4.2 Grundgerüst

Nachdem Sie sich etwas mit HTML und CSS vertraut gemacht haben, möchte ich Ihnen in diesem Unterkapitel zeigen, wie Sie das Grundgerüst einer Webseite aufbauen können. Basierend auf diesem Quellcode baue ich anschließend in den folgenden Kapiteln Stück für Stück weitere Elemente hinzu, so dass Sie den Prozess der Entwicklung einer Webseite so gut es geht nachvollziehen können.

Einteilung

Auch wenn Sie dies in der Regel mit etwas Übung bereits beim Design überdacht haben, so möchte ich Ihnen zunächst nochmals verdeutlichen, wie Sie die Webseite für sich selbst in kleinere Blöcke unterteilen können. Abbildung 1 zeigt eine Möglichkeit der Einteilung.
Die gelbe äußere Linie zeigt das äußerste Element. Darin erfolgt eine Einteilung in Banner, Navigation, Subnavigation und Inhalt, wobei in diesen Bereichen erneut unterteilt werden kann. Für den Bannerbereich empfiehlt es sich in der Regel etwa, die beiden Teilbereiche erneut in einem gesamten Banner-Block zusammenzufassen.

HTML

Ich fange mit dem HTML-Teil an, der in Quellcode 1 dargestellt wird.

Im Vergleich zum Beispiel-Quellcode aus dem vorherigen Kapitel sind gar nicht mal so viele Elemente hinzugekommen. Neu sind etwa die Zeilen 6 und 7 im Kopfbereich der Datei. Zeile 6 definiert die Zeichenkodierung der Webseite. Die ISO-8859-Zeichenkodierung ist zum Beispiel ein Standard für alphabetische Schriften, zu denen auch der Zeichensatz für die deutsche Sprache zählt.
In der darauf folgenden Zeile 7 wird die Beschreibung der Webseite definiert. Wird dieses Meta-Tag nicht definiert, so sucht sich zum Beispiel Google eine Beschreibung aus den textuellen Inhalten der Seite. Das Tag sollten Sie daher immer unbedingt setzen, da Sie somit einen eigenen Text bei der Anzeige der Google-Suchtreffer unterbringen können, der die potentiellen Nutzer wohlmöglich besser anspricht als ein zufälliger Textausschnitt.

Der Inhaltsbereich der HTML-Datei beginnt in Zeile 12 mit einem div-Container (division: Bereich). Dabei handelt es sich um ein allgemeines Block-Element, mit dem Sie andere Elemente gruppieren und somit formatieren können. Ich habe diesem Element die Klasse root zugewiesen, da dies in meinen Umsetzungen stets das oberste Element ist.
In Zeile 13 folgt ein Anker-Tag, durch das in der Regel Links definiert werden. In diesem Fall wird es dazu benötigt einen Anker zu definieren, zu dem der Nutzer springen kann. Sie kennen sicherlich Pfeile am Ende einer Seite oder Links wie "zum Anfang". Wenn Sie auf diese Links klicken springt der sichtbare Bereich des Browserfensters ganz nach oben. Dabei handelt es sich um einen Anker, den Sie an beliebigen Stellen Ihrer Webseite positionieren können.
Anschließend folgt in Zeile 14 erneut ein Block-Element für den Bannerbereich. Neu an dieser Stelle ist, dass ich keine Klasse, sondern eine Id verwendet habe. Der Unterschied ist, dass Klassen beliebig oft vorkommen können, Ids aber lediglich ein einziges Mal. Da der Bannerbereich einzigartig ist, können Sie diesen getrost als Id definieren. Der Vorteil einer Id besteht zudem darin, dass die Wertigkeit der CSS-Angaben höher ist. Stellen Sie sich vor, Sie weisen einem Element eine Klasse und eine Id zu, wobei in beiden eine Schriftfarbe gesetzt wird. Da die Id nur einmalig vorkommen darf ist diese höherwertig und überschreibt somit die Farbangabe der Klasse. Verwenden Sie nun noch eine direkte Style-Angabe im HTML-Code, so wird auch diese wieder bevorzugt behandelt. Zu Recht werden Sie sich jetzt überlegen, warum ich das root-Element als Klasse definiert habe. Der Grund ist einfach, dass es bestimmte Fälle gibt, in denen eine höhere Bindung hinderlich sein kann. Daher habe ich mir angewöhnt, lediglich speziellere Blöcke mit Ids zu definieren um spätere Umstände zu vermeiden.
Innerhalb des header-Block-Elements befindet sich in Zeile 15 erneut ein Anker-Tag. Dieses verweist mit dem href-Attribut auf die entsprechende URL der Seite. Zudem beinhaltet das Anker-Tag eine explizite Style-Angabe, in der ein Hintergrundbild definiert wird. In diesem Fall ist dies der Schriftzug des Webdesign Tutorials oben links, der im Unterordner design abgelegt wurde. Der Text "Webdesign Tutorial" innerhalb des Anker-Tags wird normalerweise als Link dargestellt. In diesem Fall wird dieser jedoch aufgrund diverser CSS-Eigenschaften ausgeblendet.

CSS

Was nun noch fehlt ist die CSS-Definition für die Klassen und Ids, die ich im HTML-Code verwendet habe. Da CSS oftmals sehr viel, dafür aber sehr einfach zu verstehen ist, werde ich nicht jede Zeile erläutern. Dennoch möchte ich Ihnen grob vermitteln welchen Zweck die einzelnen Klassen und Ids haben.

In Zeile 1 definiere ich zunächst die Eigenschaften für den Body. Da es sich dabei nicht um eine Klasse, sondern ein HTML-Element handelt, wird dieses ohne vorangehenden Punkt definiert. Selbstverständlich könnten Sie dem Body auch eine Klasse zuweisen, aber das ist in diesem Fall nicht notwendig. Da der Body das höchstgelegene Element ist, macht es an dieser Stelle Sinn den Schrifttyp und eine Standard-Schriftgröße zu definieren, da dieser an alle Elemente darunter vererbt wird. Zudem setze ich an dieser Stelle die Farbe und den Farbverlauf in Form einer Grafik (Zeile 4). Neu für Sie dürften die beiden Begriffe padding und margin sein. Anhand dieser können Sie die Abstände von Elementen definieren. Abbildung 2 zeigt den Unterschied der beiden Eigenschaften. Der div-Container wird durch die rote Linie umrandet. Der Außenabstand (margin) wird durch die gelbe Fläche symbolisiert, der Innenabstand (padding) durch die lila eingefärbte Fläche. Der eigentliche Inhalt des Containers ist der blau hinterlegte Text in der Mitte der Abbildung. Die Abstände können Sie auf mehrere Wege definieren. Geben Sie bei der entsprechenden Abstandseigenschaft nur einen Wert an, so erhalten alle 4 Richtungen den selben Abstandswert, wie dies in Zeile 7 der Fall ist. In Zeile 8 werden jedoch 4 Werte angegeben, für jede Richtung einen. Definiert werden die Werte in der Reihenfolge: oben, rechts, unten, links.
In diesem Fall möchte ich also, dass der Body unten einen Innenabstand von 20 Pixeln hat. Somit berührt der Inhaltsbereich nicht den unteren Rand des Browsers.

Zeile 11 in Quellcode 2 sorgt im Übrigen neben Zeile 17 dafür, dass die Seite mittig platziert wird. Da sich diverse Browser anders verhalten werden beide Angaben benötigt.
In der root-Klasse setze ich die Ausrichtung des Textes auf linksbündig, damit die mittige Zentrierung des Body-Tags überschrieben wird. Zudem definiere ich die Breite der Seite (Zeile 16) und die graue Hintergrundfarbe.
Die Klassenangabe in Zeile 22 bezieht sich auf alle Anker-Tags unterhalb der Klasse. In diesem Fall sollen einfach alle Links einen Standard-Stil erhalten. Die in Zeile 28 definierte Klasse sorgt mit :hover für eine andere Linkfarbe beim Mouseover.

Was letztendlich fehlt ist der Bannerbereich. Dafür habe ich in Zeile 35 einen Hintergrund definiert. Die optionale Farbangabe sorgt dafür, dass der Banner nicht ganz so merkwürdig aussieht falls das Bild nicht geladen werden kann.
Ab Zeile 38 folgen die Eigenschaften des Schriftzuges, der im Banner als Link platziert wurde. Dieser soll linksbündig ausgerichtet sein (Zeile 43) und 472 Pixel breit sein. Mit der in Zeile 56 definierten Eigenschaft beim Mouseover verschieben Sie das Bild um -472 Pixel, so dass der zuvor in Photoshop erstellte rechte Teil des Bildes sichtbar wird. Der Effekt ist der eines normalen Mouseovers mit dem Vorteil, dass die Gesamtgrafik beim Aufruf der Seite vollständig geladen wird. Wenn Sie mehrere Grafiken verwenden und diese beim Mouseover austauschen haben Sie oftmals den Nachteil, dass die Grafik kurz flackert, da diese zunächst nachgeladen werden muss.
Wichtig ist übrigens auch die no-repeat-Eigenschaft in Zeile 35 und 52. Diese sorgt dafür, dass der Hintergrund nicht wiederholt wird, wie es etwa beim Hintergrundverlauf mit repeat-x (wobei das x für die X-Achse steht) in Zeile 5 der Fall ist.

Ergebnis

Das Ergebnis der in diesem Kapitel verwendeten Quellcodes zeigt Abbildung 3. Der Banner sitzt bereits mittig und der Schriftzug hat beim Mouseover bereits einen leichten Scheineffekt. Zudem hat der Hintergrund der Webseite einen Verlauf erhalten.