CSS-Workshops: Einfach nur Stylesheets

Beispiel 4: Einfach nur Stylesheets

Das folgende Beispiel ist CSS »pur« – es beruht einzig und allein auf den positionierenden Eigenschaft von CSS. Das Layout ist ein typisches »Drei-Spalten-Layout« und passt sich der Größe des Browserfensters an, selbst ein Bildschirm mit einer Auflösung von 640 x 480 Pixel kann alle drei Spalten im Fenster halten. Dabei ist der Inhalt der Seite in Browsern, die Stylesheets nicht unterstützen, sinnvoll zu erfassen und voll funktionsfähig.

Das Layout legt sechs Blöcke für die Seite an:

Eine Navigationsleiste oben mit Textlinks, dem Logo und einem Suchformular
Eine Logoleiste für ein Logo oder für Bannerwerbung
Eine Navigationsleiste auf der linken Seite, mit einem Logo und Textlinks
Eine Navigationsleiste auf der rechten Seite mit Links zu anderen Sites oder kleinen Werbeblöcken
Ein Block mit dem Inhalt, mit einer Beschreibung der angebotenen Seminare und Online-Tutorials
Ein farbiger Block innerhalb des Inhaltsblocks, in dem die Tipps des Tages veröffentlicht werden

Die Dateien des Beispiels liegen im Ordner cssdesign. Kopieren Sie den Ordner auf Ihre Festplatte und entpacken Sie ihn. Er enthält die HTML-Dokumente in den verschiedenen Stadien des CSS-Aufbaus und einen Ordner mit zwei Bildern. Alle Stylesheets des Beispiels liegen jeweils lokal im <style>-Tag der HTML-Datei.

Das Layout wird für die Seminarankündigungen und Workshops von Ivent Digital Imaging benutzt.

Begleitmaterial zu den Beispielen

aus Kapitel 6 und das iframe-Beispiel aus Kapitel 7.7