Das Layout

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Viele Webseiten-Designs beginnen ihr Dasein als Entwurfsskizze in einem Grafikprogramm. Unsere erste Beipielseite macht da keine Ausnahme: Wir gehen von einem Beispiel-Layout oder »Design-Entwurf« aus, der mit Fireworks erzeugt wurde.

Abbildung: Das Layout als Grafikdatei entwerfen.

Wenn man, wie hier, mit einer visuellen Darstellung anfängt, kann man sich schon Gedanken über den Aufbau der Seite machen, noch bevor man mit der Umsetzung in CSS oder XHTML beginnt. So haben wir die Möglichkeit, uns vorab für die beste Vorgehensweise zu entscheiden, bevor wir eine einzige Zeile Code geschrieben haben.

Dieses Layout teilt die Seite in drei Bereiche:

1. eine Kopfleiste, die das Logo der Seite und einen Teil der Hauptnavigation enthält;
2. den Hauptbereich, bestehend aus einem großen Bild oberhalb einer Liste von Nachrichten;
3. eine Seitenleiste, die einige zusätzliche Einträge enthält.

Abbildung: Die Bereiche des Layouts markieren.

Man könnte dieses Layout als zweispaltiges Layout mit Kopfleiste bezeichnen. Wenn man einen Entwurf als Kombination seiner Hauptbereiche darstellt, fällt die Entscheidung, wie man an die Umsetzung herangeht, leichter.

  

<< zurück

vor >>