Zunächst folgt nach dem Motto »Warum in die Ferne schweifen, wenn das Gute liegt so nah« ein kleiner Überblick über die in diesem Buch bisher erstellten Layouts, die Sie – mit Ausnahme des »Little Boxes«-Logo – gerne als Basis für eigene Websites verwenden können.

Die Webseiten zu den Abbildungen finden Sie im Beispielseiten-ZIP im Ordner zu diesem Kapitel.

Einspaltiges Layout mit horizontaler Navigation

Los geht es mit einem einspaltigen Layout, das in Kapitel 4 begonnen und in Kapitel 10 fertiggestellt wurde.

Abbildung 18.1: Einspalter mit horizontaler Navigation

• Beispielseite "Einspaltiges Layout mit horizontaler Navigation"
  (in neuem Browserfenster)

Diese Vorlage ist einfach zu erweitern, kann leicht farblich angepasst werden und ist als Grundlage für einfache, kleine Homepages gut geeignet.

Mehrspaltiges Layout mit absoluter Positionierung

In Kapitel 15 wird beschrieben, wie man mehrspaltige Layouts mit absoluter Positionierung erstellt. Als Grundlage für eigene Experimente finden Sie hier ein dreispaltiges Layout mit Kopf- und Fußzeile
und fester Breite, das auf den in Kapitel 15 beschriebenen Techniken basiert:

Abbildung 18.2: Dreispalter mit absoluter Positionierung

• Beispielseite "Mehrspaltiges Layout mit absoluter Positionierung"
  (in neuem Browserfenster)

Dass es bei mehrspaltigen Layouts mit absoluter Positionierung keine durchgängige Fußzeile geben kann, fällt bei dieser Variante kaum auf.

Mehrspaltiges Layout mit float und margin (feste Breite)

In Kapitel 16 haben Sie dann gesehen, wie man mit float und margin mehrspaltige Layouts mit einer festen Breite erstellt. Das Beispiel sieht dem mit absoluter Positionierung gebauten Dreispalter optisch auf den ersten Blick sehr ähnlich und ist doch ganz anders gebaut:

Abbildung 18.3: Fester Dreispalter mit float und margin

• Beispielseite "Mehrspaltiges Layout mit float und margin (feste Breite)"
  (in neuem Browserfenster)

Mehrspaltiges Layout mit float und margin (flexibel)

Mit derselben Technik haben Sie dann in Kapitel 17 ein flexibles Layout erstellt, das in der Abbildung zwar wiederum ähnlich aussieht, sich aber bei einer Änderung der Browserfenstergröße anders verhält:

Abbildung 18.4: Flexibler Dreispalter mit float und margin

• Beispielseite "Mehrspaltiges Layout mit float und margin (flexibel)"
  (in neuem Browserfenster)