Formatierung in Webseiten

Eine modernere Variante, die grobe Struktur eine Webseite festzulegen, sind Bereiche (auch Ebenen, Block-Elemente, Container, CSS-Bereiche oder <div>-Elemente genannt). Solche Bereiche können auch gut durch CSS formatiert werden. Es handelt sich einfach um eine Zusammenfassung von Text, Bildern, Tabellen etc., die durch den Tag <div> </div> umschlossen und so als gemeinsamer Bereich gekennzeichnet werden. Solche Bereiche können dann auf der Webseite positioniert und formatiert werden.

Nicht zu verwechseln sind <div>-Elemente mit den Layern, die Netscape für seine Version 4.x einführte, die aber mit neueren Versionen nicht mehr funktionieren. Sie wurden durch den Tag <layer> </layer> gekennzeichnet.

Der Inhalt eines Bereiches kann natürlich direkt in der HTML-Seite stehen, aber auch aus einer anderen Datei importiert werden. Das folgende Beispiel enthält beides:

Hier können Sie die Seite in Ihrem Browser aufrufen. Tipp: Klicken Sie in Ihrem Browser mit der rechten Maustaste in die Seite und wählen sie "Quelltext anzeigen" oder "Seitenquelltext anzeigen" oder "Show Page Source" (je nach Browser und Sprache etwas unterschiedlich). So können Sie den verwendeten Code untersuchen.

Die Datei ist aus vier Bereichen aufgebaut, die alle absolut positioniert sind. Oben finden Sie den Bereich mit der Überschrift, im untersten Bereich ist ein Logo und Text eingeblendet. Auch das Textfenster ist fix, hat keine Hintergrundfarbe, dafür einen Rahmen. Der linke Bereich mit der Navigation wird durch den Befehl <!--#include file="bereich_menue.htm" --> aus einer externen Datei importiert. An den Bereichen, die zwischen den Tags <div> und </div> stehen, können Sie die Struktur der Webseite (Überschrift, Navigation, Inhalt und Fussleiste) erkennen. Die Formatierung wird durch den Einsatz von CSS getrennt vorgenommen und könnte auch in eine externe Datei ausgelagert werden.

Die Verwendung von CSS-Bereichen wird auch für barrierefreies Webdesign empfohlen, da die Struktur auch von alternativen Browsern gut erkannt und wiedergegeben werden kann.