CSS-Eigenschaften abschalten

Sobald Sie Überprüfen angeklickt haben, verändert sich das Verhalten der Seitenvorschau. Gleiten Sie mit dem Mauszeiger auf ein bestimmtes Element, dann visualisiert Dreamweaver dessen Box in blauer Farbe, wobei es Padding (lila) und Margin (gelb) gesondert hervorhebt. Zeitgleich erscheint der Pfad zum jeweiligen HTML-Element innerhalb des DOM Tree samt der Eltern-Elemente. Über die Tasten Pfeil nach Links und Pfeil nach Rechts können Sie innerhalb dieses Pfades navigieren.Das klingt etwas umständlich, ist aber sehr nützlich, wenn man zum Beispiel ein <div> ansteuern will, das sich nicht per Mausklick erreichen lässt, weil es von einem Tochter-Element verdeckt wird. Sobald Sie ein Element auf der Seite oder im DOM Tree anklicken, schaltet Dreamweaver den Überprüfen-Modus aus.Im Fenster CSS Stile am rechten Bildschirmrand ist nun der Reiter Aktuell aktiv, es werden nur die zum ausgewählten HTML-Element gehörenden CSS-Anweisungen angezeigt. Diese sehen Sie im Abschnitt Zusammenfassung für Auswahl. Klicken Sie hier eine CSS-Eigenschaft an, zeigt Dreamweaver im Abschnitt Regeln den CSS-Selektor, aus dem diese Eigenschaft herrührt.

CSS-Eigenschaften abschalten

Praktisch beim Entwickeln neuer Designs ist, dass man Formatierungen unter Eigenschaften nun temporär deaktivieren kann. Dazu zeigt man auf die Eigenschaft und klickt auf den durchgestrichenen Kreis links daneben. Über einen Rechtsklick auf den zugehörigen Selektor können Sie bei Bedarf alle deaktivierten Eigenschaften dauerhaft entfernen oder wieder aktivieren. Dreamweaver merkt sich abgeschaltete Eigenschaften über einen CSS-Kommentar.

Arbeiten mit der Live-Ansicht

Zur Höchstform läuft die Live-Ansicht auf, wenn man sie mit der neuen Funktion Live- Code kombiniert. Dadurch erscheinen die Browser-Ansicht der Website und der zugehörige HTML-Code nebeneinander. Das Besondere daran ist, dass Dreamweaver im Code-Fenster alle dynamischen Änderungen abbildet, ganz gleich, ob diese nun durch server- oder clientseitige Skripte verursacht wurden. Insbesondere wer mit Dreamweavers Widgets arbeitet, mit denen man zum Beispiel Javascript-basierte Karteikarten auf eine Website zaubern kann, der weiß diese Funktion zu schätzen.Während die Live-Ansicht, die übrigens auf der Rendering Engine Webkit basiert, bereits mit Dreamweaver CS4 eingeführt wurde, debütiert Live-Navigation in CS5. Dank dieser Funktion rückt Dreamweaver noch ein wenig näher an den Browser heran. Klicken Sie in der Live-Ansicht bei gedrückter Strg-Taste (Cmd auf dem Mac) auf einen Link, dann surft Dreamweaver die zugehörige Seite an. So können Sie rasch überprüfen, wie sich eine Änderung am CSS auf die verschiedenen Seiten Ihres Projektes auswirkt.Dabei gibt es eine Überraschung: Kehrt man anschließend zur Code-Ansicht zurück, dann zeigt diese nicht etwa den Code der zuletzt besuchten Seite, sondern den der Seite, auf der die Live-Navigation ihren Anfang nahm. Möchten Sie die aktuell angezeigte Seite bearbeiten, dann klicken Sie auf das Symbol rechts vom Adressfeld und gehen auf Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten.

CMS-Templates bearbeiten

Wer ein beispielsweise in Photoshop entwickeltes Webdesign für ein Content- Management-System umsetzen will, der kämpft regelmäßig mit den unzähligen Dateien, aus denen Wordpress, Joomla und Konsorten Webseiten zusammenmontieren. Nun besteht die Möglichkeit, zusammenhängende dynamische Dateien zu entdecken und unter einer vereinfachten Verwaltung zugänglich zu machen. Die Funktion setzt zwingend einen Webserver voraus und lässt sich prima am Beispiel von Wordpress erkunden.Vielleicht ist Ihnen schon folgender Hinweis am oberen Rand des Dreamweaver- Editors aufgefallen: "Diese Seite verfügt u.U. über dynamisch zugehörige Dateien. Diese können nur gesucht werden, indem die Seite vom Server verarbeitet wird." Sobald Sie auf den Suchen-Link dahinter klicken, erkundet Dreamweaver die Seitenstruktur. Eine gewisse Kenntnis des internen Aufbaus des jeweiligen CMS ist aber weiterhin notwendig. Wer diese mitbringt, der navigiert dank Dreamweaver CS5 nun schneller durch das Dateiengeflecht.In der neuen Quellcode-Leiste erscheinen nach der Analyse alle voneinander abhängigen Dateien. Über die zwei Pfeilspitzen am rechten Ende der Leiste öffnen Sie eine vollständige Übersicht. Noch etwas nützlicher ist das Trichter-Symbol, über das Sie die Liste nach Dateitypen oder Stichworten ausdünnen können. Dreamweaver CS5 bringt viele Neuerungen mit, dank dener Sie den Editor künftig deutlich seltener verlassen müssen, um Seiten zu testen oder zu analysieren. Wünschenswert wäre, dass in der nächsten Version die Analyse der dynamisch verwandten Seiten noch etwas mehr Übersicht schafft.