Website (XHTML/CSS) - 06. März 09

Aktualisiert: 24.02.2009

Nachdem wir gestern die grundlegende Syntax von XHMTL und CSS kennen gelernt haben, wollen wir uns heute eingehend mit den Formatierungsmöglichkeiten mittels CSS befassen.

Grundlagen: Elemente mit CSS positionieren

Bevor wir uns um die Positionierung und Ausrichtung von Elementen kümmern, müssen wir uns nochmals einige Grundsätze vergegenwärtigen. XHTML-Dokumente bestehen aus einer Vielzahl von Elementen, welche von ihrer Form her in der Regel als rechteckige Box dargestellt werden. Das Verständnis des so genannten CSS-Boxmodell ist die Grundlage, um Elemente wie gewünscht darzustellen und zu positionieren.

Box Model

Jedes Element besteht aus einer rechteckigen Box, mit Inhalt, Polsterung, Rand und Abstand.

position

Blockelementen können mittels CSS-Deklaration position: static, position: relative, position: absolute, position: fixed an einer bevorzugten Stelle im XHTML-Dokument positioniert werden.

float

Elemente können mit der Anweisung float aus dem Elementfluss heraus und rechts oder links des umschliessenden Blocks angeordnet werden. Zusätzlich wird das “gefloatete” Element vom darauf folgende Inhalt umflossen.

Fortgeschritten: Layouts mit CSS entwickeln

Wir haben gelernt wie man Elemente ausrichtet und positioniert. Nun wollen wir uns daran machen eine einfaches CSS-Seitenlayout zu gestalten.

Spezial: Navigation-Menus mit CSS gestalten

Die Navigation ist eines der wichtigsten Elemente einer Website. Danke CSS lassen sich normale HTML-Listenelemente beispielsweise in horizontale Menus verwandeln. Hierfür wenden wir die am Morgen erlernten CSS-Deklarationen für eine saubere Positionierung von HTML-Elementen an.

Aufgaben

Nun haben wir in nur zwei Kurstagen die Grundlagen der Webentwicklung, nämlich das Schreiben von XHTML und das Gestalten mittels CSS, kennen gelernt. Kommende Woche wollen wir aufbauend auf diesem Grundlagenwissen ein Kurzprojekt starten, bei welchem die Umsetzung eines persönlichen Webportfolios auf dem ZHdK-Webserver das erklärte Ziel ist. Hierfür sollen bis am Dienstag erste Konzeptideen entwickelt werden. Dies kann in Form von rudimentären Handskizzen oder mit Hilfe von Grafikwerkzeugen wie Photoshop oder Illustrator geschehen. Diese Entwürfe können mit einer Auswahl von inspirierenden Websites ergänzt werden.

Als Ergänzung zum heutigen Kurstag, empfehle ich euch die folgenden Artikel zur CSS-Positionierung anzuschauen.