CSS-Layout mit Expression Web
Website-Express
Konkurrenz für Dreamweaver?
CSS-Layout mit Expression Web
Webdesigner und -entwickler teilen sich in zwei Gruppen: Die Puristen arbeiten am liebsten mit einem guten Text-Editor, die anderen schätzen den Komfort eines spezialisierten und umfangreicheren Editors mit einer Entwurfsansicht (auch Wysiwyg ? What you see is what you get) und weiteren Komfortfunktionen wie dialoggeführtem CSS. Gerade Letztere möchte Microsoft mit dem neuen Expression Web ansprechen. Und natürlich wartet Microsoft gespannt, ob bei der Konkurrenz ? sprich, hauptsächlich Adobe mit Golive und Dreamweaver ? auch einer der Probanden beerdigt wird. Bis es aber so weit ist, muss sich Expression Web vor allem gegen den etwas in die Jahre gekommenen Marktführer Dreamweaver beweisen. Ob das gelingt, lässt sich am besten beim Arbeiten feststellen. Deswegen zeigt dieser Workshop, wie Sie ein CSS-Layout mit Expression Web umsetzen und noch ein wenig serverseitige Logik mit ASP.NET-Controls integrieren. Dies hilft, sowohl die Qualitäten des Editors zu beurteilen, als auch, sich an die neue Oberfläche zu gewöhnen.
Thema des Workshops ist ein fiktives Projekt namens Expression. Mag der Name nicht einfallsreich sein, so entspricht das Projekt doch den Zielen von Microsoft, neue, Design-lastigere Zielgruppen anzusprechen. Als Workflow wird der klassische Entwicklungsprozess für Weblayouts verwendet: Nach der Idee entsteht ein Layout in einem Grafikprogramm, hier Adobe Photoshop. Dieses Layout soll dann per Expression Web umgesetzt werden. Dazu sollten Sie natürlich einen grundlegenden Plan haben, welche Elemente wohin kommen, denn bevor Sie in Web Expression loslegen, müssen Sie zuerst die Bilder zuschneiden.
Im vorliegenden Beispiel fällt die Entscheidung leicht: Die Seite wird in einen Header, einen Inhaltsteil in der Mitte und einen Footer unterteilt. Für die einzelnen Teile wird jeweils ein etwas größeres Hintergrundbild verwendet. Wer auf Dauer noch Bildgröße sparen will, kann zumindest das mittlere Hintergrundbild als Kachel anlegen.
Organisation
Wenn alle Bilder geschnitten sind, geht es in den Editor. Im Zentrum steht bei Expression Web eine Website, die wiederum alle benötigten Seiten enthält. Dieses Konzept ist aus verschiedenen anderen Editoren bekannt. Dreamweaver verwendet beispielsweise eine so genannte Site, und auch die Entwicklungswerkzeuge von Microsoft Visual Web Developer und Visual Studio setzen auf das Website-Konzept. Der Vorteil liegt auf der Hand: Für eine Website können wiederverwendbare Elemente definiert werden, und die Website lässt sich beispielsweise per FTP gut mit dem Stand auf dem Produktiv-Webserver abgleichen. Legen Sie zuerst eine neue Website an. Die Standard-Website enthält eine HTML-Datei.
Um ein bestehendes Verzeichnis zur Website zu machen, verwenden Sie den Website-Import-Assistenten im Dialog für eine neue Website. Sie können die Dateien hier auch mit der Option Zur aktuellen Website hinzufügen in eine bestehende Website integrieren. Über die Vorlagen sind die üblichen Standardtemplates mit einigen vorgefertigten Seiten verfügbar.
CSS, Javascript und ASP
Normalerweise ist das Anlegen einer neuen Datei nicht erwähnenswert. Interessant wird diese Standardfunktionalität allerdings, wenn Sie die Möglichkeiten eines neuen Editors kennen lernen möchten. Expression Web bietet hier das Übliche, sprich HTML, CSS, Javascript und XML. Als serverseitige Technik wird ? wen wundert es ? nur ASP.NET angeboten (Seitentyp ASPX). PHP-Unterstützung sucht man in Expression Web vergeblich. Dafür gibt es für ASP.NET auch Masterseiten, die ASP.NET-Variante eines Template-Systems.
Wer Templates ohne ASP.NET möchte, wird bei der dynamischen Webvorlage fündig. Hierbei handelt es sich um das Dateiformat DWT. Über HTML-Kommentare werden Platzhalter gesetzt. Das Prinzip ist dasselbe wie bei DWT-Dateien in Dreamweaver, allerdings unterscheiden sich die Standardkommentare für bearbeitbare Regionen, so dass die zwei Systeme inkompatibel sind. Die Kommentarnamen unterscheiden sich jedoch nicht so stark, dass sich die Systeme nicht konvertieren ließen.
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.
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.
ASP.NET 2.0
CSS-Layout mit Expression Web
Microsoft möchte mit Expression Web natürlich nicht nur neue Zielgruppen erreichen, sondern auch seine eigene serverseitige Technik ASP.NET 2.0 gegen PHP und Konsorten in Stellung bringen. Dementsprechend finden sich neben normalen HTML-Tags auch ASP.NET-Steuerelemente, Controls genannt. Sie lassen sich in ASPX-Seiten einsetzen. In der vorliegenden Beispielanwendung lässt sich so das Kontaktformular realisieren. Ziehen Sie dazu die Formularelemente in den Inhaltsbereich. Die TextBox ist für ein Eingabefeld zuständig und Button für die Schaltfläche. Zur Validierung können Sie die Steuerelemente von ASP.NET zur Gültigkeitsprüfung verwenden. Leider ist die Handhabung der Steuerelemente nicht ganz so einfach wie in Visual Studio. Dies macht sich vor allem in Kleinigkeiten bemerkbar: Beispielsweise wird beim Kopieren eines Elements im Code nicht automatisch die ID mit angepasst, so dass doppelte IDs möglich sind.
Der serverseitige Code für das Auswerten des Formulars lässt sich ebenfalls in Expression Web schreiben. Der Code wird sogar automatisch in eine separate Code-Datei ? in ASP.NET Codebehind genannt ? ausgelagert. Beim richtigen Coding ist dann allerdings ein spezialisiertes Tool wie das kostenlos erhältliche Visual Web Developer Express empfehlenswert. Neben ASP.NET wird von Expression Web auch Javascript unterstützt. Am wertvollsten ist hier sicherlich die Autovervollständigung. Daneben bietet ASP.NET einige so genannte Verhalten, sprich vorgefertigte Javascript-Code-Schnipsel. Damit lässt sich beispielsweise ein Popup öffnen.
Fazit
Auch wenn die CSS-Steuerung mit dem Begriff Formatvorlagen etwas Office-lastig benannt ist, weiß sie in der Praxis zu überzeugen. Sich überschneidende Stile sind gut zu erkennen und die Steuerung funktioniert sowohl für CSS-erfahrene Webdesigner als auch für Anfänger sehr gut. Bei den üblichen Layout-Problemen wie Platzierung und CSS-Layout kann Microsoft keine neuen Glanzlichter setzen. Allerdings sind Innovationen in diesem Bereich schwer zu erreichen und von einem
neuen Marktteilnehmer auch nicht unbedingt zu erwarten gewesen.