Mit dem Web-Editor Expression Web präsentiert Microsoft eine Alternative zu Adobes Dreamweaver. Der Workshop zeigt an einem Beispiel-Layout, was der neue Bolide leistet.
Anzeige
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.
