Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

## 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.

Schritt 1, 2 und 3

Schritt 4

Schritt 5

Schritt 6

Schritt 7

Schritt 10

Schritt 10a

Schritt 11

Schritt 12

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

Vorab: Stylesheets in Macromedia Dreamweaver anlegen

Beispiel 6.1: Stile für Schriftgestaltung

Beispiel 6.3: Ein einfaches CSS-Layout

Beispiel 6.4: Einfach nur Stylesheets

Zu Kapitel 7.7:
Der kleine Bruder des Framesets: iframes

Drucken mit Stylesheets Regeln für den Druck und Beispieldatei

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen