Dreamweaver CS5

Sven Fischer

Dank der neuen Live-Ansicht lassen sich in Dreamweaver CS5 die Webseiten bereits während der Arbeit kontrollieren. Zudem erkennt das Programm automatisch dynamische Seiten.

Dreamweaver CS5

 

Das Update von Dreamweaver im Rahmen der Creative Suite 5 kann man zwar nicht als großen Wurf bezeichnen, aber es sind doch einige interessante Details und Verbesserungen hinzugekommen. So bietet die neue Version des Webseiten-Editors eine noch weiter reichende Unterstützung im CSS-Bereich. CSS ist die Basis für moderne Webseiten und wird verwendet, um beispielsweise Inhalt und Gestaltung voneinander zu trennen. Wichtig ist dies etwa für das Thema Barrierefreiheit.

Live-Ansicht

Die Live-Ansicht gab es schon in CS4 – sie ermöglicht den Test einer Seite in Dreamweaver, ohne den Browser starten zu müssen. In der neuen Version wird nun auch PHP unterstützt. Adobe bezeichnet die zugrunde liegende Technologie als „Browser-Lab“; sie findet sich auch in anderen Komponenten der Creative Suite 5. Die aktuelle Suite geht noch einen Schritt weiter: Mit ihr lassen sich nun in der Live-Ansicht auch Navigationselemente auf ihre Funktio­nalität hin testen. Im Menü Ansicht in den Live-Ansicht-Optionen kann man festlegen, ob die Hyperlinks normal funktionieren sollen wie im Browser oder erst mit gedrückter Befehl-Taste. Über dem Fenster, in dem die Seite dargestellt wird, gibt es nun eine URL-Leiste, in der die Adresse der aktuellen Seite steht. Mit Hilfe von Buttons, wie sie auch im Browser zur Verfügung stehen, kann man auf vorherige Seiten zurückspringen oder weiterschalten. Auch gibt es hier einen Zugriff auf das Aktualisieren, die Startseite und den Verlauf.
Über die Schaltfläche Überprüfen aktiviert man den CSS-Inspektor. Fährt man mit der Maus über Seitenelemente, werden bei CSS-Objekten die entsprechenden Eigenschaften angezeigt und so das CSS-Element überprüft. Mit unterschiedlichen Farben werden Eigenschaften wie beispielsweise box oder margin dargestellt. Die zugehörigen Regeln und Eigenschaften finden sich in der CSS-Stile-Palette.
Mit einem Klick lässt sich der aktuelle Zustand des Projekts einfrieren. Das bietet die Möglichkeit, in der CSS-Palette einzelne Regeln zu editieren und damit eine Seite live zu bearbeiten und erneut zu testen.

Live-Code

Sehr hilfreich ist in diesem Zusammenhang auch die Live-Code-Ansicht. Das Seitenfenster lässt sich teilen, so dass sowohl die Seite als auch der Code angezeigt wird. Ist zudem der Überprüfen-Modus aktiviert, zeigt der Live-Code zu jedem Element, über dem sich der Mauszeiger befindet, den aktuellen Code an. Klickt man ein Element an, wird es wieder eingefroren. Man kann live Werte ändern und sieht auf der Seite und im Code sofort das Ergebnis. Auch dynamische Elemente können mit Hilfe der Live-Code-Ansicht überprüft werden, da sofort der aktuelle Code angezeigt wird. Das sind sicherlich mächtige und hilfreiche Werkzeuge für den Test und die Überprüfung von CSS-basierten Webseiten.

CSS-Layoutvorlagen

Auch die CSS-Layoutvorlagen wurden komplett überarbeitet. Beim Anlegen einer neuen Datei stehen im Dialogfenster eine ganze Reihe von Layoutvorlagen zur Verfügung. Das gab es zwar schon in CS4, in der CS5 hat Adobe die Vorlagen jedoch verbessert. So gibt es Vorlagen für mehrere Spalten, fixiertes und fließendes Layout sowie mit Kopf- und Fußzeilen. Der Anwender bestimmt bei der Erstellung, wie die CSS-Informationen gespeichert werden sollen, beispielsweise im Header der HTML-Seite oder als eigene Datei. In den einzelnen Bereichen der Layoutvorlage stehen nun keine sinnfreien Blindtexte mehr, sondern Texte mit Informationen und Tipps, wie die jeweiligen Seitenbereiche zu verwenden sind. Zudem sind in der Code-Ansicht die Regeln mit Kommentaren versehen, so dass sich auch Einsteiger mit deren Hilfe gut in das Thema einarbeiten können.
Die neue Version von Dreamweaver CS5 unterstützt die Zusammenarbeit mit Content-Management-Systemen wie Joomla, Drupal und WordPress. Hier ist es oft schwierig zu beurteilen, wie eine dynamische Seite später real aussehen wird. Mit Hilfe der Live-Ansicht ist es möglich, sich einerseits einen Überblick zu verschaffen, welche Dateien und Skripts Verwendung finden, und sich andererseits eine dynamische Seite live anzeigen zu lassen, einschließlich funktionsfähiger Navigation.
Dreamweaver CS5 erkennt automatisch, ob es sich um eine dynamische Seite handelt und findet dank des Suchen-Buttons die verknüpften Dateien und Skripts. Sie werden in einer eigenen Leiste angezeigt. Anschließend kann man sich mittels der Live-Ansicht eine Vorschau anzeigen lassen, die der Darstellung im Browser entspricht.

Fazit

Die Integration von „Browser Labs“ erleichtert und beschleunigt das Austesten einer Seite für die unterschiedlichen Browser, und der Umgang mit CSS ist deutlich einfacher geworden. Auch die Zusammenarbeit mit Content-Management-Systemen ist ein Schritt in die richtige Richtung. Abgesehen von der PHP-Unterstützung werden Besitzer von Dreamweaver CS4 in der neuen Version allerdings vergeblich nach wirklich grundlegenden Neuerungen
suchen.     Sven Fischer/sck

Hat dir "Dreamweaver CS5" von Sven Fischer gefallen? Schreib es uns in die Kommentare oder teile den Artikel. Wir freuen uns auf deine Meinung - und natürlich darfst du uns gerne auf Facebook, Twitter oder Google+ folgen.

Weitere Themen: Adobe

Neue Artikel von GIGA SOFTWARE