Layout-Elemente

CSS-Layout mit Expression Web

Als Nächstes müssen die div-Blöcke für das vorliegende Layout gesetzt werden. Einer soll dabei die Einfassung bieten. Die darin enthaltenen sind dann für Header, Inhalt und Footer gedacht. div-Elemente bietet Expression Web unter ihrem Namen und als Ebenen an. Die Ebenen sind natürlich absolut positionierte div-Elemente. Diese Unsitte scheint sich auf Jahre hinaus in den Web-Editoren zu halten ? kaum eine professionelle Website setzt hauptsächlich auf absolut positionierte div-Blöcke. Und wenn man sie mal braucht, ist es schade, dass Expression Web die Positionierung standardmäßig als Inline-Stil anwendet. Im vorliegenden Beispiel kommen deswegen normale div-Elemente zum Einsatz. Allerdings erweist es sich hier vor allem in der Entwurfsansicht als schwierig, die div-Elemente ineinander zu verschachteln. Der div-Block für den Header lässt sich noch einfügen. Nun wird aber die sehr exakte Vorschau in der Entwurfsansicht zum Verhängnis. Da der leere Block für den Header genauso breit angezeigt wird wie das ihn umgebende Tag, lässt sich das nächste Element für den Inhalt nur in und nicht unter den Header ziehen. Zur Steuerung können Sie die Ebenen allerdings auch im Bedienfeld Schichten anordnen.

Der erfahrene Entwickler greift normalerweise sowieso schnell zur Code-Ansicht, um die vier div-Blöcke zu setzen. Hier können Sie die Elemente bequem einfügen. Und auch die übrigen Funktionen sind vorbildlich. Ordentliche Einrückungen erhalten Sie über das Kontextmenü und dort den Befehl HTML neu formatieren. Außerdem können Sie Start- und End-Tags ergänzen, Markierungen setzen und den gesamten Inhaltsbereich eines markierten Tags auswählen. Besonders praktisch ist die Autovervollständigung auch für CSS-Selektoren. Legen Sie beispielsweise die IDs für Header, Inhalt und Footer schon vorher im CSS an, werden sie Ihnen im id-Attribut zur Auswahl geboten. Stehen sie dann im Code, sind sie über Code-Links verfügbar. Mit [Strg] und Klick erreichen Sie dann die Stelle im externen CSS, an der der Selektor steht.

Im vorliegenden Beispiel vergeben Sie für das umschließende div-Element eine feste Breite von 740 Pixeln und einen schwarzen Rahmen mit neun Pixeln. Anschließend zentrieren Sie das Element mit dem Wert auto für margin-left und margin-right. Die drei darin enthaltenen Elemente versehen Sie mit dem jeweiligen Hintergrundbild und der Höhe, die der Größe des Hintergrundbilds entspricht (177, 405 und 101 Pixel).

In dem Header nehmen Sie anschließend ein div-Element auf, das die Navigation enthält. Hier fügen Sie die Links auf Home, Projekt, Anmeldung, Kontakt und Impressum ein. Dies erledigen Sie beispielsweise über die standardmäßig eingeblendete Symbolleiste. Weitere Symbolleisten erreichen Sie übrigens über das Menü Ansicht. Die Navigation erhält als Schriftart Courier und die dazu angebotene Schriftfamilie Monospace. Bei der Anpassung der Schriftgröße ist Expression Web etwas unbequem. Die heute als Standard verwendete Einheit em lässt sich im Dialogfeld nur in Einerschritten ändern. Hier wären allerdings 0,1er-Schritte wichtig.

Im Inhaltsbereich werden zwei Blöcke definiert. Der eine enthält den Text, der andere das Foto. Hier erfolgt die Anordnung mit float. Der float-Befehl befindet sich im Dialogfeld unter Layout. Die Inhalte selbst werden mit Überschrift (h1) und Absatz eingefügt und formatiert.

Website-Tests

Zwischendurch eignet sich die Entwurfsansicht oder die geteilte Ansicht recht gut zur Vorschau. Für die Tests vor allem von ASP.NET-getriebenen Websites ist der schon aus Visual Studio und Visual Web Developer bekannte Entwicklungs-Webserver gedacht. Für Tests der eigenen Arbeit gibt es diverse Möglichkeiten: Sie können den HTML-Code testen. Fehler im Code werden allerdings schon in der Code-Ansicht live unterringelt. Ebenfalls rot markiert werden Links auf nicht vorhandene Dateien.

Ein Highlight sind die Testmöglichkeiten. Bei den Browser-Kompatibilitätstests werden zwar nur Doctype und Internet Explorer getestet. Für moderne Browser lassen sich damit aber auch alle relevanten Informationen generieren. In Sachen CSS lässt sich prüfen, ob beispielsweise Klassen nicht definiert sind oder Selektoren nicht verwendet werden. Besonders praktisch ist der Check auf Fehler in der Groß- und Kleinschreibung.

Beim Veröffentlichen der Website können Sie den HTML-Code weiter optimieren und ? nur für das Veröffentlichen ? Kommentare und Leerzeichen entfernen. Außerdem lassen sich nur geänderte Dateien hochladen und selbstverständlich sind auch Dateisystem, WebDAV und FTP für die Übertragung der Website auf das Produktivsystem möglich.