Schnelle Weblayouts mit Dreamweaver

Webseiten mit Cascading Style Sheets zu layouten ist viel praktischer als mit den längst überholten Tabellenlayouts - nur leider ist der Einstieg in die Arbeit mit CSS nicht ganz einfach. Den Start erleichtert ein visueller Web-Editor wie Dreamweaver. Er zeigt die Seiten schon beim Bearbeiten so an, wie sie später im Browser erscheinen. Damit geht das Layouten einfacher als im Quellcode. Eine gute Hilfe beim Gestalten sind die Dreamweaver mitgelieferten Vorlagen. Diese findet man unter "Datei > Neu..." und im Dialogfenster unter "Leere Vorlage". Unter "Vorlagentyp" wählt man zum Beispiel "HTML-Vorlage" für ein HTML-Dokument, dessen Inhalte dann aber mit CSS gesteuert sind. Rechts zeigt das Fenster verschiedene Seiten mit typischen Anordnungen für Weblayouts, zum Beispiel mit Kopf- und Fußbereich (für Logos und Navigation) und zwei senkrechten Spalten für den Inhalt. "Elastisch" bedeutet, dass sich die Größe der Spalten dem Inhalt flexibel anpasst. Mit "Erstellen" erzeugt Dreamweaver dann die HTML-Seite, die gleich mit überschreibbaren Blindtexten gefüllt ist. Die Seite ist zunächst auch nur mit grau und weiß eingefärbt, was sich leicht verändern lässt: Um zum Beispiel dem Kopfbereich eine neue Farbe zuzuweisen, markiert man ihn im Layout und ruft die Palette "CSS-Stile" auf. Dort werden alle Eigenschaften aufgelistet. Markiert man "Background" und ruft mit der rechten Maustaste "Bearbeiten" auf, erscheint das Fenster zum Bearbeiten eines Stils. Mit dem Farbwähler sucht man eine neue Farbe aus und klickt zum Ausprobieren auf "Anwenden".