Quick and Dirty (Teil 2)
Kommentare

Der Aufbau und die grundsätzliche Vorgehensweise werden deutlich, wenn man sich die generierte Seitenstruktur ansieht (Abb. 2). Für jeden Menüpunkt (Themenbereiche: Nachrichten, Produkte, Dienste …)

Der Aufbau und die grundsätzliche Vorgehensweise werden deutlich, wenn man sich die generierte Seitenstruktur ansieht (Abb. 2). Für jeden Menüpunkt (Themenbereiche: Nachrichten, Produkte, Dienste …) wurde ein separater Unterordner generiert. Innerhalb dieses Unterordners werden die Elemente und die Hauptseite zu diesem Punkt abgelegt. Diese Hauptseite trägt stets den Namen default.html. Da sich die Navigationselemente, Kopf- und Fußzeilen und z. B. das Titelbild auf allen Seiten wiederholen und identisch sind, sollten diese auch nicht auf den einzelnen Seiten geändert werden. Im Designer erscheint ein entsprechendes Bearbeitungsverbot und im Quelltext sind diese Bereiche als schreibgeschützt gekennzeichnet. Für die wiederkehrenden Elemente werden die Änderungen zentral in der Datei namens master.dwt vorgenommen. Diese Datei wird als Template in jede Seite eingebunden. Bei Änderungen am Inhalt der Datei master.dwt wird der Anwender darauf hingewiesen, dass weitere Dateien gebunden sind. Eine automatische Aktualisierung wird vorgeschlagen. Wird der Vorschlag akzeptiert, dann aktualisiert Expression Web alle angehängten Dateien. Somit ist es für den Entwickler nur notwendig, die Änderungen zentral an einer Stelle vorzunehmen. Man erreicht damit einen ähnlichen Komfort, wie bei einem dynamischen Seitenaufbau (beispielsweise mittels PHP), wo wiederkehrende Elemente während des Parsens im Browser in die aktuelle Datei integriert werden.

Abb. 2: Die Ordnerstruktur des Projekts entspricht der inhaltlichen Struktur der Webseite
Abb. 2: Die Ordnerstruktur des Projekts entspricht der inhaltlichen Struktur der Webseite
Programmoberfläche

class=“headline“>
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)
Abb. 3: Dualansicht von Code und Design (Entwurf)
Erfassung der Inhalte: Text, Grafiken und Tabellen

class=“headline“>
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 < table > und < td > 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

class=“headline“>
Ü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.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -