Teil 3

Expression Web im Praxistest
Kommentare

Für das Erstellen von Webseiten existieren die unterschiedlichsten Ansätze und Tools. Das reicht von der Erstellung einzelner Seiten mittels eines Texteditors bis hin zur Programmierung komplexer Webauftritte mit Datenbankanbindung. Irgendwo dazwischen ist das Tool Expression Web angesiedelt. Es verspricht die leichte Erstellung und Pflege von Webauftritten mittlerer Größe und Komplexität. Kann es dieses Versprechen einlösen?

Weitere Teile:

Seite 1 – Seite 2 – Seite 4

Programmoberfläche

Die Benutzeroberfläche von Expression Blend ist modern gestaltet und intuitiv zu bedienen. Verwendet wird aktuell (noch) die klassische Menüstruktur. Der Aufbau orientiert sich an den typischen Elementen einer Entwicklungsumgebung: Unterhalb der Menüleiste findet sich die frei konfigurierbare Symbolleiste. In der Mitte ist das Dokumenten- und Arbeitsfenster angeordnet. Hier kann zwischen den verschiedenen Ansichten gewechselt werden. Die Ansicht ENTWURF ermöglicht ein Bearbeiten der Webseite im Sinne einer Textverarbeitung. Weiterhin kann entweder ausschließlich der Quellcode oder eine Kombination aus Quellcode und Designvorschau angezeigt werden (Abb. 3). Selektiert man eine bestimmte (Text-) Stelle im ENTWURF und wechselt man zu Ansicht CODE, so ist man unmittelbar an der richtigen Stelle im Quelltext. Diese Funktion ist hilfreich und notwendig für große Dokumente. Neben dem Dokumentenfenster befinden sich rechts und links die verschiedenen Hilfsansichten (Ordner, Toolbox, Eigenschaftenbrowser etc.). Die einzelnen Fenster können flexibel auf der Programmoberfläche angeordnet werden. Ein Andocken an den Rändern ist möglich und auch sinnvoll. Bei einem begrenzten Platz auf dem Bildschirm ist es möglich, dass so genannte AutoHide der Fenster zu nutzen, d. h. sie werden nur eingeblendet, wenn mit der Maus über den Randbereich gefahren wird.

Abb. 3: Dualansicht von Code und Design (Entwurf)
Erfassung der Inhalte: Text, Grafiken und Tabellen

Eine Webseite basiert im Wesentlichen auf Informationen in Form von Text. Abbildungen und Grafiken können das Interesse an der Seite wecken, die Lesbarkeit erhöhen und für ein verbessertes Verständnis eingesetzt werden. Mit Expression Web lassen sich Texte ebenso einfach erstellen wie mit einer normalen Textverarbeitung. Zur Formierung stehen die typischen Elemente wie Schriftarten und -größen zur Verfügung. Mit der direkten Formatierung von einzelnen Textpassagen sollte jedoch sorgfältig und sparsam vorgegangen werden. Um im gesamten Webauftritt ein einheitliches Schriftbild und Layout zu erhalten sind Cascading Style Sheets (CSS) -Dateien einzusetzen. Die Einbindung einer Grafik gestaltet sich einfach mittels des Befehls EINFÜGEN | BILD aus der Menüleiste.

Tabellen spielen bei der Gestaltung von Webseiten schon immer eine große Rolle. Zum einen werden sie für die Gestaltung des Layouts der Webseite verwendet. Die Elemente können dann exakt platziert werden. Diese Vorgehensweise wird jedoch nicht mehr empfohlen. Das Layout sollte über CSS-Elemente gestaltet werden. Für das Erzeugen von Datentabellen bietet Expression Web ein wirklich hilfreiches Dialogfeld. Natürlich ist die Struktur einer Tabelle schnell mit den HTML-Tags
und   generiert. Die Arbeit beginnt jedoch, wenn beispielsweise einzelne Zeilen oder Spalten andersfarbig zu gestalten sind. Auch dieses kann man bequem über den grafischen Editor vornehmen. Es werden im Hintergrund die entsprechenden Formatvorlagen als lokale CSS-Styles definiert.

Zentrales Element: Der Einsatz von CSS

Über CSS-Dateien kann die Darstellung einer Webseite gesteuert werden. Um allen Seiten ein einheitliches Layout zu geben und die gleichen Schriftgrößen und -stile für Überschriften, Textkörper und sonstige Elemente zu verwenden, ist es empfehlenswert externe CSS-Definitionen (Vorlagen) einzusetzen. Sind Anpassungen in der Darstellung gewünscht, so muss nur einmal die zugehörige Stelle in der CSS-Datei angepasst werden. Dieses Vorgehen ist allen Webentwicklern vertraut. Es wird hier deshalb explizit erwähnt, da Expression Blend zur Verwendung des Vorlagenkonzeptes motiviert. Beispielsweise werden in der Palette CSS-BERICHTE alle verwendeten CSS-Formatvorlagen übersichtlich dargestellt. So hat man stets einen Überblick.


Auf den kommenden Seiten folgt:

    • Streifzug: Überblick zu wichtigen Programmfunktionen
    • Fazit
    • Infos zum Autoren

Seite 1 – Seite 2 – Seite 4

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -