XHTML-Grundlage

CSS-Layout mit Expression Web

Für den Anfang genügt für diesen Workshop eine normale HTML-Datei mit dem Doctype XHTML 1.0 Transitional. Dieser Doctype ist auch der Standard in Expression Web. Sie finden den Doctype eines Dokuments jeweils rechts unten im Editor. Wenn Sie doppelt daraufklicken, landen Sie in den Voreinstellungen, wo Sie den Standard-Doctype wechseln können. Neben dem normalen Doctype gibt es noch ein so genanntes sekundäres Schema, sprich einen Fallback-Doctype, auf den Expression Web zurückgreift, wenn keiner angegeben ist.

Der Doctype ist deswegen so wichtig, weil sich die Autovervollständigung oder im Microsoft-Slang Intellisense nach dem Doctype richtet. Haben Sie XHTML 1.0 Strict eingesetzt, werden viele Tags wie beispielsweise center nicht mehr angeboten.

Wenn Sie den Doctype nachträglich ändern oder einfügen möchten, können Sie einen so genannten Code-Ausschnitt verwenden. Code-Ausschnitte sind kleine Code-Schnipsel, die Microsoft schon vorbereitet hat. Um einen Code-Auschnitt einzufügen, müssen Sie sich in der Code-Ansicht mit dem Cursor an der gewünschten Stelle befinden. Anschließend drücken Sie [Strg Eingabe] und wählen den Code-Schnipsel aus einer Liste. Dazu können Sie eine Abkürzung eingeben oder durch die Liste scrollen. Über Liste anpassen dürfen Sie auch eigene Code-Ausschnitte hinzufügen.

Dies ist in der Praxis allerdings auch notwendig, da zum Beispiel meta-Tags und Links auf Stylesheets nicht automatisch beendet sind. Hier lohnt es sich, die jeweiligen Code-Ausschnitte zu ändern.

Mit Format: CSS

Für den vorliegenden Workshop soll das CSS als externes Stylesheet in einem eigenen Verzeichnis liegen. Legen Sie also in der Ordnerliste ein Verzeichnis und das neue CSS-Dokument an. Beides geht entweder über die Schaltflächen, das Kontextmenü oder das Menü. Um die CSS-Datei zu verlinken, können Sie entweder den Code-Ausschnitt einsetzen oder Sie gehen über Format, CSS-Stylesheets, Stylesheet anfügen. Besonders praktisch ist hier die Option, ein Stylesheet gleich in allen HTML-Dateien des Projekts zu verlinken.

Ist das Stylesheet erst verlinkt, lassen sich Stile für die HTML-Seite auch über dieses Stylesheet definieren. Expression Web organisiert die CSS-Befehle in Formatvorlagen. Zwar gibt es auch die klassische Übersicht über Tags und CSS-Eigenschaften, aber die Formatvorlagen bieten eine dialoggeführte Steuerung. Für den vorliegenden Workshop soll zuerst das body-Tag mit einem Hintergrundbild versehen und die Abstände reduziert werden. Auch hierfür können Sie eine Formatvorlage definieren. Sie wählen dort bei Auswahl einfach body. An mancher Stelle würde sich der erfahrene Web-Entwickler hier allerdings wünschen, eher mit Fachsprache, sprich Selektoren und Ähnlichem, konfrontiert zu werden als mit Word-nahen Begriffen wie Formatvorlage.

Alternativ zur Formatvorlage können Sie das body-Tag auch über das Bedienfeld Tageigenschaften oder in der Code-Ansicht über das Kontextmenü und dort Tageigenschaften mit einem Hintergrundbild versehen. Interessanterweise verwendet das Bedienfeld auch wirklich die eigentlich veralteten HTML-Attribute, während die Tageigenschaften im Kontextmenü per Dialogfeld den CSS-Befehl background-image einfügen. Im Prinzip ist das allerdings logisch, denn das Bedienfeld ist in Tag- und CSS-Eigenschaften unterteilt. Nur der gleich lautende Name ist etwas unglücklich.

Für das vorliegende Beispiel bieten sich Formatvorlagen am ehesten an, da so das Layout komplett au
sgelagert werden kann. In der Vorlage definieren Sie für das body-Tag Außen- und Innenabstände von 0 Pixel und weisen das Hintergrundbild hintergrund.jpg zu. Diese Beispieldatei finden Sie ebenfalls auf der Heft-CD. Hier erweist sich Expression Web bei der CSS-Bearbeitung als sehr intelligent. Die Eigenschaften aus den Formatvorlagen, die per Tag-Selektor definiert wurden, stehen auch im Bedienfeld CSS-Eigenschaften zur Verfügung. Das gilt allerdings nur so lange, wie es keine Definition mit höherer Präferenz beispielsweise als Inline-Stylesheet gibt. Wenn Sie per Tag-Selektor im externen Stylesheet die Hintergrundfarbe setzen und im Inline-Stil die Schriftart, wird der CSS-Befehl für die Hintergrundfarbe in den CSS-Eigenschaften nicht angezeigt, bis Sie oben im Bedienfeld bei Zugewiesene Regeln auf den Tag-Selektor wechseln. Sie können hier also die CSS-Befehle von verschiedenen Stellen im Überblick betrachten und bearbeiten.