Layout ohne Tabellen
Dieser Workshop soll das Erstellen von Webseiten näherbringen, die auf Tabellen-Layouts verzichten. Solide HTML-Kenntnisse sind Voraussetzung. CSS-Grundkenntnisse sind empfohlen, zumindest ein grundsätzliches Verständnis der Syntax sollte vorhanden sein.
Sinn des Workshops soll sein, die Layout-Möglichkeiten mit CSS kennenzulernen und auszuprobieren, wohlgeformte XHTML-Seiten zu erstellen und den Content so aufzubereiten, dass auch eine sauber strukturierte Textversion zur Verfügung steht. Damit sowohl CSS- als auch Textversionen leicht zu überblicken sind, empfehlen wir das Einbinden mehrerer Stylesheets.
Legen Sie sich ein Verzeichnis mit Beispieldateien nach diesem Muster an, um die beschriebenen Quellcodes leicht nachvollziehen zu können.
- workshop
- index.html
- css
- define.css
- extra.css
- mager.css
Die Quellcodes für die index.html und die css/define.css können von dieser Beispiel-Seite herunterkopiert werden. Die anderen CSS-Dateien können im Laufe des Workshops mit Inhalten gefüllt werden.
Der gesamte Workshop kann als Zip-File heruntergeladen werden.
Download Zip-File 'Workshop'
Ein paar Worte zu den Schreibweisen innerhalb des Workshops:
Auf jeder Hauptseite des Workshops gibt es direkt nach der Überschrift den Link 'Notwendige Quellcodes für Teil x' ... Dort finden Sie die jeweiligen Quellcodes mit Kommentaren und Tipps.
Typischerweise werden HTML-Quellcodes folgendermaßen dargestellt:
<div id="head">
Der Kopfbereich
</div>
Die dazugehörigen Anweisungen aus dem Stylesheet folgen meistens direkt im Anschluss:
#head {
background: #09c;
overflow: visible;
}
Die angebotenen Stylesheets nutzen soweit möglich verkürzte Schreibweisen (Shorthand).
Tradition ist mittlerweile, das Kompendium 'SelfHTML' von Stefan Münz griffbereit zu haben ;-)
http://selfhtml.teamone.de/