Dreamweaver - Entwurfsphasen-Stylesheets nutzen

Entwurfsphasen-Stylesheets erleichtern vor allem bei der Entwicklung von CMS-gestützten Websites die Arbeit im Bereich CSS-Anpassungen und Qualitätssicherung. Das auf den ersten Blick unscheinbare Feature bindet zu Testzwecken verschiedene Stylesheets während der Entwicklungsphase ein oder aus, die im Echtbetrieb vom Content Management System dynamisch inkludiert werden.

Nehmen wir an, Sie entwickeln in Dreamweaver ein HTML-Template für eine Website, die dynamisch aus einem Content Management System ausgegeben wird. Die für die Darstellung erforderlichen CSS-Stylesheets werden während der Laufzeit vom CMS eingesetzt, weshalb sich im HTML-Template keine Links zu CSS-Dateien befinden. Natürlich möchten Sie das Template während der Entwicklung in der Entwurfsansicht von Dreamweaver kontrollieren, um CSS-Fehler und die (möglicherweise) unterschiedliche Darstellung in den Browsern sofort erkennen und korrigieren zu können. Dazu könnten Sie für Testzwecke natürlich das zu verknüpfende Stylesheet wie üblich mit „Stylesheet anfügen“ in die HTML-Datei einbinden und damit den Echtbetrieb simulieren. Nach den Tests müssten Sie die Verknüpfung wieder löschen, damit keine mehrfache Einbindung durch das CMS geschieht.

Der Weg über die Entwurfsphasen-Stylesheets erleichtert Ihnen die Arbeit und minimiert Fehlerquellen. Entwurfsphasen-Stylesheets werden nämlich nicht im Quelltext der Seite implementiert und dienen nur zur Layoutkontrolle.

Wählen Sie im CSS-Bedienfeld den Befehl „Entwurfsphase“ oder im Hauptmenü „Text“, „CSS-Stile“ und „Entwurfsphase“. Anschließend erscheint das Dialogfenster „Entwurfsphasen-Stylesheets“, in dem Sie die folgende Einstellungen vornehmen können:

• Nur während der Entwurfsphase anzeigen
  Hier können Sie mit dem „+“-Symbol alle CSS-Dateien von der Festplatte auswählen, mit deren Formatierung das Dokument angezeigt werden soll. Die entsprechenden CSS-Eigenschaften zeigt Dreamweaver nach der Einbindung wie gewohnt im CSS-Panel an, wo sie auch direkt editiert werden können. Dadurch können Sie nachträglich mehrere, z. B. rubrikabhängige CSS-Dateien editieren, die im Echtbetrieb auf das selbe HTML-Template angewandt werden sollen. 

• Während der Entwurfsphase ausblenden
  Möchten Sie bereits eingebundene CSS-Dateien für die Anzeige in Dreamweaver ausblenden, können Sie diese Dateien ebenfalls mit dem „+“-Symbol auswählen oder mit dem „-“-Symbol wieder entfernen.

Alle ausgewählen Entwufszeit-Stylesheets wirklen sich nur auf die Entwurfsansicht in Dreamweaver aus. Im Webbrowser werden die Dateien immer entsprechend den im HTML-Quelltext eingebundenen Stylesheet-Dateien angezeigt.