Wenn man nicht gerade eine Web-Visitenkarte baut, die ausschliesslich zur Kontaktaufnahme im Internet dient, besteht eine Website aus mehreren Seiten (Pages). Neben den Seiten, welche die tatsächlichen Inhalte einer Webpräsenz vorstellen, gibt es einige Pflichtseiten. Für gewöhnlich landet ein User auf einer Startseite. Von dort aus kann er dann zu den Inhaltsseiten navigieren. Auf der Seite Kontakt kann er durch ein Web-Formular Kontakt zum Betreiber der Site aufnehmen. Zwar haben nur gewerbliche Anbieter von Internetseiten eine Impressumspflicht, jedoch hat es sich inzwischen eingebürgert auch auf den privaten Internetauftritten ein Impressum zu veröffentlichen. Verwendet ein Webseitenbetreiber einen Dienst wie “Goolge Analytics” für Besucherstatistiken, welcher die IP-Adressen speichert, ist der Betreiber verpflichtet einen entsprechenden Hinweis (Disclaimer) bezüglich der Erfassung und Nutzung der Daten auf der Webseite zu platzieren.  

Performance / Coding

Eine Seite besteht aus folgenden Elementen: 

• (X)HTML - Markup
• Text
• Grafiken
• CSS - Styling

Zunächst gilt es ein sauberes (X)HTML Markup zu programmieren. WYSWIG-HTML-Editoren wie z.B. Adobe’s Dreamweaver machen es zwar automatisch, nichtsdestotrotz können auch dort Fehler passieren, wenn der Entwickler die Code-Ansicht nicht im Auge behält. Zum sauberen HTML gehört zunächst das korrekte Verschachteln von HTML-Elementen. z.B. ein DIV-Container umschliesst ein SPAN-Tag.

1

<div><span>Inhalt</span></div>

und nicht

1

<div><span>Inhalt</div></span>

Richtige HTML-Elemente für entsprechende Inhalte. Eine Hauptüberschrift gehört in einen H1-Tag, ein zusammenhängender Text wird in Paragraphen aufgeteilt und von P-Tags umschlossen. Einen TABLE-Tag verwendet man ausschliesslich um tabellarische Inhalte darzustellen und nicht etwa zur Strukturierung einer Seite.

Grafiken in einer Web-Site sollten stets im korrekten Format eingebunden werden. Für verlaufsarme Darstellungen eignet sich am besten das GIF-Format, jedoch sollte die Grafik-Export-Funktion eines Bildbearbeitung-Programms belangt werden um einen Kompromiss zwischen Qualität und Dateigröße herauszufinden. Dateigrößen von über 50 Kilobyte haben auf einer Internet-Seite keinen Platz, die Größe muss entsprechend in Relation zu den Abmessungen eines Bildes gesetzt werden. Je kleiner die Abmessungen eines Bildes, desto kleiner die Dateigröße. Vor Allem übertriebene Dateigrößen für Grafiken beeinflussen die Performance einer Web-Site sehr stark.

CSS-Styling sollte in externe Dateien ausgelagert werden. So ist es auf eine einfache Art und Weise möglich Aussehen mehrerer Seiten oder der Ganzen Web-Site schnell zu manipulieren. Zwar ist es nicht verboten visuelle Anpassungen durch CSS mithilfe vom STYLE-Attribut vorzunehmen, jedoch empfiehlt es sich nicht, da man dadurch HTML-Markup (die Struktur) und das Aussehen der Seite in einer Datei miteinander vermischt. 

Bei Coden der ausgelagerten CSS-Dateien ist auf die korrekte Verwendung von Selektoren und die Kaskadierung von CSS-Eigenschaften zu achten. Korrekt ist es z.B. die Eigenschaft font-family schon für den Selektor BODY zu definieren und nicht für jedes einzelne Element, das einen Text darstellt. 
 
Usability / Accesability

Es gibt einige wichtige Usability-Faktoren, die beim Erstellen einer Web-Site zu beachten sind.

Da wären zuerst die Proportionen einer Seite. Ist die Breite einer Seite größer als die Breite des Browser-Fensters, zwingt es einen Benutzer horizontal zu scrollen. Daher müssen geeignete Abmessungen für eine Web-Site gefunden werden, die dem User ein bestmögliches Browsing-Erlebnis bereiten.

Es ist unmöglich die Darstellung einer Web-Site in allen auf dem Markt verfügbaren Browsern identisch zu gestalten, jedoch sollte sie in den am meisten verbreiteten Browsern überprüft und angepasst werden. Die Boliden unter den Browsern sind zur Zeit Internet Explorer ab Version 6, Firefox ab Version 2 und Safari ab Version 2. Eine Site sollte in diesen Browsern getestet werden und die Darstellung optimiert werden.

Eine klare Navigation soll den User durch die Internetpräsenz leiten und ihm stets anzeigen wo er sich zur Zeit auf der Site befindet. Bei größeren Internet-Auftritten wird empfohlen ein Breadcrumping einzusetzen, bei Kleineren genügt es oft den aktiven Navigationspunkt entsprechend zu markieren.

Links im Fließtext oder Link-Listen müssen als solche erkennbar sein. Es eignet sich eine farbliche Absetzung oder auch eine Textdekoration wie z.B. eine Unterstreichung. Nicht markierte Links verwehren dem User eine Weiternavigation.

Fließtext einer Web-Site sollte keineswegs in Grafiken dargestellt werden. Zwar ist dadurch möglich eine Seite grafisch ansprechender zu gestalten, jedoch reduziert man die Zugänglichkeit (Accessebility) dieser Seite. Inhalte müssen für alle User lesbar und erkennbar sein. User, welche z.B. die Darstellung von Bildern im Browser ausstellen, würden demnach die Texte der Web-Site nicht lesen können, da diese in Grafiken verpackt sind. Auch sollte die Farbe des Textes so gewählt werden, dass sie im entsprechenden Kontrast zum Hintergrund einfach zu erkennen und zu lesen ist. Es sollte auf eine adäquate Schriftgröße zu achten und ein akzeptabler Zeilenabstand einzustellen.

Nicht zuletzt sollte auf den Einsatz von PopUp-Fenstern verzichtet werden. Es hat sich in den letzten Jahren herausgestellt, dass PopUps die Usability einer Seite stark reduzieren, wenn diese nicht vom Benutzer selbst geöffnet wurden.

[Im Feed kann dieses Video nicht angezeigt werden.Klicke zum Blogeintrag um das Video anzusehen.]

Es gibt drei Möglichkeiten CSS-Formatierungen einem HTML-Element zuzuweisen. Die erste wäre die inline-Einbindung. Mit dem Attribut style werden Eigenschaften eines HMTL-Elements geändert. 

1
2
3
4
5

<h1 style="color: blue;">Eine Überschrift</h1>
<div style="background: red; width: 100px; height: 100px;">
     Das ist ein DIV-Container, dessen Eigenschaften innerhalb
     des DIV-Elements mit dem Attribut style festgelegt wurden.
</div>

Diese Methode eignet sich dafür nur bestimmte Elemente einer HTML-Datei zu formatieren. Auf das obige Beispiel bezogen: das H1-Element würde die Farbe blau erhalten, alle weiteren H1-Überschriften in diesem HTML-Dokument würden ihre Standard-Farbe behalten.

Sollen jedoch alle h1-Überschriften dieses Dokuments die Farbe blau erhalten, dann eignet sich hierfür die zweite Methode - das Definieren der Formate zentral für ein HTML-Dokument im Kopfbereich dieses Dokuments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
     <title>Das style-Element zentral im Head einbinden</title>
     <style type="text/css">
          h1 {
               color: blue;
          }
          div {
               background: red;
               width: 100px;
               height: 100px;
          }
     </style>
</head>
<h1>Eine Überschrift</h1>
<div>
     Ein DIV-Container mit Inhalten.</div>
<h1>Eine weitere Überschrift</h1>
<div>
     Ein weiterer DIV-Container mit Inhalten.</div>

Alle H1-Überschriften aus dem obigen Beispiel würden nun die Farbe blau erhalten und alle DIV-Container dieses Dokuments würden eine Größe von 100×100px und eine rote Hintergrundfarbe bekommen.

Für gewöhnlich besteht aber eine Internet-Seite aus vielen HTML-Dokumenten, die miteinander verknüpft sind. Soll die gesamte Site ein einheitliches Aussehen bekommen, dann macht es Sinn alle CSS-Formatierungen in einer CSS-Datei zu halten und diese Datei nur mit den entsprechenden HTML-Dokumenten zu verknüpfen. Das HTML-Markup der ersten Datei (z.B. index.html) könnte so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
     <title>Das style-Element in einer externen Datei</title>
     <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
     <h1>Eine Überschrift auf der ersten Seite</h1>
     <div>
          Ein DIV-Container mit Inhalten auf der ersten Seite.
     </div>
     <h1>Eine weitere Überschrift auf der ersten Seite</h1>
     <div>
          Ein weiterer DIV-Container mit Inhalten auf der ersten Seite.
     </div>
</body>
</html>

Das HTML-Markup der zweiten Datei (z.B. news.html) könnte so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
     <title>Das style-Element in einer externen Datei</title>
     <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
     <h1>Eine Überschrift auf der zweiten Seite</h1>
     <div>
          Ein DIV-Container mit Inhalten auf der zweiten Seite.
     </div>
     <h1>Eine weitere Überschrift auf der zweiten Seite</h1>
     <div>
          Ein weiterer DIV-Container mit Inhalten auf der zweiten Seite.
     </div>
</body>
</html>

Sowohl das erste als auch das zweite Dokument verweisen in der fünften Zeile auf die Stylesheet-Datei mit dem Namen style.css. In dieser Datei sind nun die CSS-Formatierungen für die gesamte Site definiert, die sich auf alle Seiten erstrecken.

1
2
3
4
5
6
7
8

h1 {
     color: blue;
}
div {
     background: red;
     width: 100px;
     height: 100px;
}

Demnach würden alle h1-Überschriften, sowohl in der ersten Datei als auch in der zweiten Datei die Farbe blau erhalten und die alle DIV-Container in beiden Dateien die Hintergrundfarbe rot und die Abmessungen von 100×100px bekommen.

Die genaue Syntax und weiterführende Erklärungen zu den drei Methoden werden in diesem Artikel auf SelfHTML.org http://de.selfhtml.org/css/formate/einbinden.htm besprochen. Auch die folgende Seite gibt weitere Informationen mit Anzeigebeispielen zum Thema CSS-Einbindung: http://selfmade-webdesign.fresh-webspace.de/css-eigenschaften-werte.php

Ich fange immer damit an meine Photoshop-Vorlage in Bereiche aufzuteilen, die in Dreamweaver zu DIV-Containern werden.

Mit “div” leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden “/div” steht, wird als Teil des Bereichs interpretiert.

Quelle: selfhtml.org

DIV-Container geben meiner Seite eine HTML-Struktur. In der Photoshop-Vorlage mache ich zunächst farbliche Markierungen, die in der HTML-Datei einen DIV-Container darstellen sollen.

Bei der Aufteilung bestimme ich nur die grobe Struktur, welche sich über die gesamte Site erstreckt. Elemente, die sich auf einzelnen Unterseiten meines Web-Auftritts ändern, also deren Position, Auffüllung oder Abstände sich verändern, nehme ich in die Grobstruktur nicht mit auf. Für jeden in der Photshop-Vorlage markierten Bereich erstelle ich in meiner HTML-Datei einen DIV-Container. Dabei achte ich darauf die korrekte Verschachtelung zu übernehmen.

Bei der Verschachtelung sollte man nicht zu kompliziert denken. An der Metapher “Klassenraum” kann man sich die korrekte Verschachtelung aneignen. Ein Klassenraum ist für sich ein geschlossener Raum. Auf HTML übertragen ist das ein “wrapper” - ein DIV-Container, welcher alle weiteren Container umschliesst. In diesem Raum befinden sich für gewöhnlich mehrere Gegenstände, wie Tische, Stühle, Tafel, Schränke. Das könnten weitere DIV-Container sein. Ein Schrank kann z.B. Bücher enthalten. Auch Bücher können als “DIV-Container” angesehen werden, die in dem Container “Schrank” untergebracht, verschachtelt sind.

Von meiner Photoshop-Vorlage ausgehend, ergibt sich folgende HTML-Struktur. Einem jeden DIV-Container vergebe ich einen eindeutigen Namen.

1
2
3
4
5
6
7
8
9

<div id="wrapper">
	<div id="themenBild">Hier erscheint das Themenbild</div>
    <div id="banner">Hier erscheint der Banner</div>
    <div id="content">
	    <div id="contentLeft">Hier erscheinen alle Inhalte</div>
            <div id="contentRight">Hier erscheint die Navigation</div>
    </div>
</div>
<div id="footer">Hier erscheint der Seitenfuß</div>

Durch den Universalattribut “id” kann ich nun jeden einzelnen Container über CSS-Steuern und auf der Seite gemäß der Photoshop-Vorlage platzieren.

SelfHTML von Sven Rautenberg (http://www.selfhtml.org)
Man kommt nicht drum rum und man sollte auch nicht an dieser Seite vorbei gehen. Nicht nur ein nüchternes “Nachschlagewerk” zu HTML, CSS und allen anderen Web-Scripting-Sprachen bietet diese Seite, sondern gibt auch zu jedem Thema, einem jeden HTML-Tag umfangreiche zusätzliche Informationen und Beispiele. Diese Seite ist ein Muss für Anfänger und Fortgeschrittene.

Einführung in XHTML, CSS und Webdesign von Michael Jendryschik (http://jendryschik.de)
Eine sehr übersichtliche und gute gestaltete Seite. Auch hier findet man nicht nur ein “HTML-Wörterbuch” sondern detaillierte Grundlagen-Informationen zur Web-Entwicklung. Der Autor stellt einige Hilfsmittel und Tools für den angehenden HTML-Coder vor, geht auf Details des Web-Skripting ein und vergisst auch nicht Probleme aus der globalen Perspektive zu beleuchten.

W3 (http://www.w3.org/MarkUp/Guide/)
Natürlich darf man die offizielle Seite für (X)HTML von der W3-Organisation nicht vergessen. In dem Artikel “Getting started with HTML” von Dave Raggett geht es um die ersten Schritte in HTML. Die Grundlagen werden in dem Artikel “More advanced features” vertieft. Aber auch nicht nur den Umgang mit HTML beschreibt diese Seite, sondern ist eine Art “Gesetzbuch” für jeden Web-Entwickler. W3C veröffentlich Empfehlungen über den Gebrauch von bestimmten HTML-Tags, treibt die Entwicklung von sämtlichen Auszeichnungssprachen an und ist die Anlaufstelle, wenn es darum geht Standards beim HTML-Coden herauszufinden.

Ein fixes Layout ist recht einfach zu skripten und  man schafft es in der Regel die Design-Vorlage nahezu identisch in HMTL/CSS umzusetzen, womit man dem Screen-Designer einen großen Gefallen tut. Jedoch ist die Darstellungen eines fixen Layouts auf sehr kleinen Bildschirmen, wie z.B. auf einem Smartphone nicht benutzerfreundlich. Dort wird vom Browser ein horizontaler Scroll-Balken angezeigt. Auch verschwendet man sehr viel Platz auf einem größeren Monitor. 

Bei einem fixen Layout codiert man für gewöhnlich einen div-Wrapper, der alle weiteren Inhaltselemente umschiesst. Dieser Wrapper hat eine feste Breite und wird gerne in der Mitte des Bildschrims plaziert. 

<div id="wrapper">
<div id="spalteEins">Inhalt 1</div>
<div id="spalteZwei">Inhalt 2</div>
<div id="spalteDrei">Inhalt 3</div>
<div id="spalteVier">Inhalt 4</div>
</div>

Die CSS-Beschreibung würde dann in etwa so aussehen:

#wrapper {
	width: 600px;
	margin: 0px auto;
	border: 1px solid red;
}
#spalteEins, #spalteZwei, #spalteDrei, #spalteVier {
	width: 280px;
	float: left;
	margin: 8px;
	border: 1px solid green;
}
#spalteZwei {
	border-color: blue;
}
#spalteDrei {
	border-color: yellow;
}
#spalteVier {
	border-color: black;
}

Der Wrapper bekommt eine Breite von 600 Pixel (Zeile 2) und wird in der dritten Zeile mit den automatischen Werten für die Abstände links und rechts horizontal mittig ausgerichtet. Die einzelnen Inhaltselemente im Wrapper bekommen eine feste Breite und werden schwebend positioniert. So schaut das Resultat aus bei einem 800 pixel breitem Fenster.

Um daraus nun ein flexibles Layout zu erstellen, muss der CSS-Code wie folgt geändert werden:

#wrapper {
	border: 1px solid red;
} 

Durch das Entfernen der Breitenangaben beim Wrapper, kann dieser sich nun auf die komplette Fensterbreite ausdehnen und je nach Breite entsprechend mehr bzw. weniger “Inhaltsboxen” in einer Zeile anzeigen.

Bei den obigen Layouts wurde für die Breitenangaben stets die Einheit Pixel gewählt. Durch das Ersetzen der Pixelmaße mit den entsprechenden em-Umrechnungen oder Abmessungen in Prozent, erreicht man ein Zoomlayout. 

Für welches der Layouts sich nun ein Entwickler entscheidet, hängt ganz von der Zielgruppe bzw. Ziel-Viewport ab und nicht zuletzt natrülich auch von den Fähigkeiten eines Web-Programmierers.

Prototyping

Nachdem ein Überblick über alle Inhalte und Funktionen einer Webseite geschaffen wurde, geht es ans Modellieren - Stichwort Prototyping. In dem gleichnamigen Artikel gibt Walter Maner von der Bowling Green State University einen überblick zum Thema Prototyping. Er geht dabei auf die verschiedene Arten von Modellen oder Simulationen ein und zeigt auf, wann ein Prototyp überhaupt Sinn macht. Über eine bestimmte Art von Modellierung, nämlich über das Paper Prototyping schreibt Shawn Medero in dem auf der Website alistapart.com veröffentlichtem Artikel.

Zum Erstellen von Prototypen gibt es einige Werkzeuge. Für Paper Prototyping reichen eine Schere und ein Stift völlig aus. Um aber einen digitalisierten Klick-Dummy zu produzieren bedarf es bestimmter Software. Neben den bereits oben erwähnten Programmen Visio und OmniGraffle, gibt es das Programm Axure welches es einem ziemlich einfach macht so ein computerisiertes Modell einer Webseite zu erstellen. Fernerhin gibt es einige kostenfreie Programme die einen dabei unterstützen ein Webseitenmodell zu erstellen. Da wäre das Pencil Projekt zu erwähnen, welches in Form einer Erweiterung für den Browser Firefox zur Verfügung steht. “An Informal Tool For Early Stage Web Site and UI Design” - so beschreiben die Entwickler das Tool DENIM. Optimiert für ein Grafiktablett eignet sich dieses kostenlose Programm hervorragend für Modellierungen in frühen Entwicklungsphasen einer Webseite.

Der Artikel “Auf der Suche nach dem optimalen Prototyping-Tool” verfasst von der Interactive Design Group der Firma AOL Deutschland, stellt nicht nur eine Übersicht über die zur Zeit auf dem Markt verfügbaren Programme zur Erstellung von Website-Prototypen, sondern behandelt auch einige theoretischen Grundlage zum Thema Prototyping. Auch Erhard Wimmer vom Interactive Design Stammtisch Wien versucht eine Antwort auf die Frage Welches Mockup Tool verwendest du? zu geben. Er selbst setzt beim Modellieren auf das Programm Freehand MX. Für welches Tool man letzten Endes sich entscheidet, ist wohl eine Frage der Bequemlichkeit und der Finanzen.

Wenn man Prototypen erstellt, spart man nicht nur Entwicklungskosten, die z.B. durch nachträgliche Änderungen einer Webseite entstehen könnten, sondern kann Probleme schon zu Beginn einer Entwicklung erkennen. Mit Hilfe von Modellen kann man Verhalten einer Seite simulieren ohne hohen Aufwand zu betreiben. Ganze Usability-Studien lassen sich anhand von Prototypen durchführen und somit die Qualität des endgültigen Produkts sichern.

Grafiken im Web

Je kleiner die Dateigröße, desto besser ist es!

Eine genaue Beschreibung und Übersicht zu den Grafikformaten wird auf der Seite SelfHTML vorgestellt. Die Funktionsweise der Alphatransparenz wird in dem Artikel “Transparente Grafiken: gif und png” auf der Seite webkrauts.de behandelt.

Fachbegriffe

• Die Liste der Internetdienste
• Client-Server Architektur
• Uniform Resource Location (URL, URN, URI)
• Protokolle (IP, HTTP, HTTPS, FTP, TCP)
• Cookies
• Clientseitige Technologien (XHTML, CSS, JavaScript, XML)
• Serverseitige Technologien (PHP, MySQL, ASP.NET, ActionScript)
• Webseite, Website, Homepage

In seinem Pamphlet “Internet-Grundlagen für Anwender” behandelt Dipl. Math. Günter Marxen von der Universität Köln knapp und anschaulich die oben erwähnten Fachbegriffe und setzt diese in Zusammenhang. Er spricht nicht nur die technischen Grundlagen des Internets an, wie den Aufbau eines Computer-Netzwerks (WAN, LAN), das Schichtenmodell mit seinen Protokollen (TCP/IP) oder die Client-Server-Architektur, sondern er behandelt auch die Sicherheitsaspekte des Internets und geht auf die Funktionsweise der Viren, Dialer und Trojaner ein. Andere Dienste des Internets, wie E-Mail, das World Wide Web oder Net News (Usenet) kommen auch nicht zu kurz. Ein leichte einführende Pflichtlektüre für jeden Web-Entwickler.

Browser

In der Präsentation stelle ich nur die gängigsten Browser vor, doch es sind bei weitem nicht alle. Eine schöne Übersicht über aktuelle und eingestellte Entwicklungen gibt die Website drweb.de im dem Artikel “Alle Browser dieser Welt“. In einer tabellarischen Übersicht werden die Browser mit einer kurzen Beschreibung, Zuweisung zu einem Betriebssystem und den Versionsnummern präsentiert.

10 Regeln für ein Web-Portfolio

• Positionierung
• Idee / Metapher
• Planung
• Referenzen
• Erklärungen
• Technologie
• Details / Finessen / Special Features
• Usability
• Publikation
• Aktualisierungen

Die erste Version der Kurs-Outline

Wie erstellt man ein eigenes Portfolio? Welche Web-Techniken verwendet man am Besten? Was ist XHTML und was ist CSS? Wie manipuliert man HTML mit JavaScript? Wann verwendet man PHP und wie ist das mit MySQL verwandt? Erstellt man doch lieber eine Flash-Seite? Diese und viele andren Fragen sollen im Laufe des Seminars Web-Werkstatt geklärt werden.

Die HBK-Braunschweig beschreibt das Seminar wie folgt: Dieses Werkstattangebot schlägt ein paar helle Wege in den dunklen Wald der Abkürzungen von Ajax bis Xhtml und erklärt die für den Designer relevanten Grundlagen des Internets. Verschiedene Aspekte moderner Online-Medien werden dazu herangezogen, neben den technischen Eigenheiten auch medienspezifische Nutzungsformen, Interface Design, uvm.

Parallel erfolgt eine Einführung in geeignete Softwarewerkzeuge für die Produktion entsprechender Online-Medien, begleitet von Übungen und/oder Kurzreferaten. Jeder Teinehmer sollte am Seminarende in der Lage sein, seine Anforderungen an ein persönliches Online-Portfolio zu formulieren, dieses zu gestalten und umzusetzen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<field_new type="array">
	<type>no_map</type>
	<tx_templavoila type="array">
	<title>enlarge?</title>
	<sample_data type="array">
	<numIndex index="0"></numIndex>
	</sample_data>
	<eType>int</eType>
	</tx_templavoila>
	<TCEforms type="array">
		<config type="array">
		<type>check</type>
		<eval>int</eval>
		<default type="integer">0</default>
		</config>
		<label>Mark as new</label>
	</TCEforms>
</field_new>

Mit der “isTrue”-Funktion lässt sich dann überprüfen ob die Check-Box aktiviert ist und abhängig davon ein Bild in einem FCE einbinden.

1
2
3
4
5
6
7
8
9
10
11
12

5 = IMAGE
5 {
   file = fileadmin/images/stern.gif
   file.import.data = levelmedia: -1, "slide"
   file.import = uploads/media/
   file.import.listNum = 1
   file.import.override.field = media
   file.width = 42
   file.height = 41
   offset = [10.w]+10,0
}
5.if.isTrue.field = field_new

1
2
3
4
5

<div class="wrapper">
	<div class="links">Spalte 1</div>
	<div class="mitte">Spalte 2</div>
	<div class="rechts">Spalte 3</div>
</div>

Die CSS-Klassen haben folgende Eigenschaften

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.wrapper {
	background: red;
	overflow: hidden;
	width: 600px;
}
.links, .mitte, .rechts {
	float: left;
	width: 190px;
	background: blue;
	padding-bottom: 3000px;
	margin-bottom: -3000px;
}
.mitte {
	background: green;
}

Der Trick hierbei ist nicht zu übersehen. Für die gefloateten Elemente wird ein übergroßes “padding-bottom” eingestellt und dieses gleichzeitig mit einem übergroßen negativen “margin-bottom” ausgeglichen. Für den umschließenden Container muss dann die Eigenschaft “overflow” auf “hidden” gesetzt werden.

So schaut das Resultat aus:

Drei-Spalten-Layout