Beim Erstellen von Websites vermischen sich zwei unterschiedliche Disziplinen: Auch wenn moderne Web-Editorprogramme nach dem WYSIWYG-Prinzip arbeiten und damit einem gestalterischen Ansatz entgegenkommen, kommt kein Webdesigner um HTML, CSS und Javascript herum, und zunehmend sind detaillierte Kenntnisse des Browser-DOM und der Eigenschaften verschiedener AJAX-Frameworks vonnöten.
Mit Dreamweaver führt Adobe ein Produkt, das seit Jahren als Standard gilt. Die neueste Version legt wie die gesamte CS4-Suite den Fokus auf Bedienbarkeit und führt sowohl für Code-orientierte Webentwickler als auch für reine Webdesigner nutzbringende Neuerungen ein, ohne das Programm mit überflüssigen Features unnötig aufzublasen.
Wie Photoshop – getestet in der letzten InfoWeek-Ausgabe – hat Adobe auch Dreamweaver mit der typischen CS4-Oberfläche ausgestattet: Ein einziges Fenster mit verschiedenen Bereichen und angedockten, kontextsensitiv erscheinenden Paletten schafft Übersicht und verhilft im Vergleich zum früher üblichen Wust schwebender Fensterchen zu merklich erhöhter Produktivität.
Eine Website wird meist nicht bloss durch ein HTML-Dokument repräsentiert. Meist sind zusätzlich mehrere Dokumente mit CSS-Definitionen, eigenem Javascript-Code und Javascript-Frameworks, PHP-Routinen und so weiter im Spiel. Damit die Übersicht nicht verloren geht, zeigt Dreamweaver CS4 zuoberst in jedem Dokumentenfenster die Namen aller zusammenhängenden Dokumente an. Dabei werden alle Dateien berücksichtigt, die mit «include» oder «link» ins Hauptdokument eingebunden sind. Die Einträge sind verlinkt: Mit einem Klick wird das Dokument geöffnet, und jede Änderung in einer zusammenhängenden Datei wird sofort in der Code- und Designansicht des Hauptdokuments reflektiert.
Noch genauere Auskunft gibt der neu eingeführte Code Navigator: Klickt man in der Design-Ansicht ein Seitenelement mit gedrückter Alt-Taste an (Mac: Command-Option-Klick), erscheint in einem kleinen Fenster eine hierarchisch nach der CSS-Kaskade gegliederte Liste mit allen für genau dieses Seitenelement relevanten Codequellen. Mit einem Klick auf eine Quelle gelangt man direkt zur fraglichen Definition. Auch hier führt Dreamweaver sämtliche Änderungen sofort im Hauptdokument nach. Alles in allem erleichtern diese Neuerungen den Umgang mit modern aufgebauten, CSS- und Javascript-basierten Websites stark.
Auch das Code-Hinting wurde verbessert. Dreamweaver zeigt in der Code-Ansicht schon während der Eingabe mögliche Fortsetzungen und Parameter an, die dann per Mausklick übernommen werden können. In der neuen Ausgabe funktioniert das Code Hinting auch für verschiedene Javascript- und Ajax-Frameworks wie Spry, Prototype und jQuery sowie für selbst erstellte Funktionen mit Unterstützung für Parameter, Class Constructors und verschachtelte Objekte.
In der neuen Version bietet Dreamweaver neben der Design-, der Code- und der zweigeteilten Split-Ansicht – neu wahlweise horizontal oder vertikal geteilt – eine «Live View». Der Live-View-Modus erlaubt es, auch komplexe HTML-Dokumente, zum Beispiel Seiten mit XML-basierter dynamischer Datenpräsentation, direkt innerhalb der Dreamweaver-Oberfläche so anzusehen, wie sie später im Realbetrieb erscheinen. Bisher war dazu der Umweg über die Browser-Preview-Funktion nötig, die ihrerseits mit einem temporären Zwischendokument arbeitet, das auf einem funktionierenden Webserver abgelegt wird.
Nicht nur die optische Darstellung lässt sich im Live-View-Modus überprüfen: Im Code-Anzeigebereich präsentiert Dreamweaver bei aktiviertem Live-View-Modus den Sourcecode exakt so, wie er an den Browser geschickt wird. Das Seitenelement, das in der Live-Ansicht mit der Maus ausgewählt ist, wird dabei hervorgehoben dargestellt. Um Verwechslungen mit der herkömmlichen Code-Ansicht zu vermeiden, ist der gesamte Sourcecode im Live-Code-Modus zudem gelb hinterlegt.
Live View ist allerdings nicht uneingeschränkt nützlich: Für die Darstellung kommt die Webkit-Engine zum Einsatz. Webkit erfüllt zwar sämtliche aktuellen Web-Standards mehr als hinreichend – genau dies kann aber auch von Nachteil sein. Zum Beispiel dann, wenn eine Seite auf Darstellungseigenheiten im bekanntermassen problematischen, aber sehr verbreiteten Internet Explorer geprüft werden soll – in diesem Fall bleibt nur die herkömmliche Browservorschau.
Auch wenn es immer noch nicht alle Webdesigner begriffen haben: Textformatierung und Seitenlayout erledigt man heutzutage mit Cascading Style Sheets. Dreamweaver hat im Vergleich zu anderen visuellen Web-Editoren schon immer gute CSS-Unterstützung geboten, in der CS4-Version kommt eine gewichtige Neuerung hinzu: Das Properties Panel, das üblicherweise unter der Code- und Designansicht erscheint, unterscheidet neu zwischen HTML- und CSS-Eigenschaften. Um zwischen den beiden Modi zu wechseln, klickt man auf den entsprechenden Button am linken Rand des Panels.
Im CSS-Modus zeigt das Panel kontextsensitiv die CSS-Eigenschaften des ausgewählten Seitenelements und erlaubt, diese zu bearbeiten. Falls für das Element mehrere CSS-Regeln zuständig sind, wählt man die gewünschte Regel aus einem Aufklappmenü aus, das auch eine Option zum Erstellen einer neuen Regel bietet. In diesem Fall erscheint der Dialog «New CSS Rule», der unter anderem die zwei Buttons «less specific» und «more specific» enthält, mit denen sich der Geltungsbereich der neuen Regel auf einfache Weise und von Haus aus korrekt einschränken oder erweitern lässt. Über ein Aufklappmenü bestimmt man ausserdem, ob die Regel im aktuellen Dokument oder in einem der verlinkten CSS-Files plaziert werden soll.
Einige Texteigenschaften wie Fett- oder Kursivdarstellung können sowohl auf der HTML- als auch auf der CSS-Ebene des Properties Panel bestimmt werden. Dreamweaver generiert in jedem Fall den passenden Code: Wird eine Textstelle auf der HTML-Ebene als fett markiert, fügt das Programm ein 'strong'-Tag ein; in der CSS-Ebene wird stattdessen die zugehörige CSS-Regel durch text-decoration:bold ergänzt. Es kommt also darauf an, wie das Properties Panel während des Editierens konfiguriert ist – es wäre nützlich, wenn der jeweilige Modus etwas deutlicher angezeigt würde als mit den beiden ziemlich unscheinbaren Buttons.
Mit den zusätzlichen CSS-Features beweist sich Dreamweaver noch mehr als in der CS3-Ausgabe als gut geeignet für das Design standardkonformer, barrierefreier Webseiten. Ein Tip: Wer noch bequemeres CSS-Editing möchte und vor allem Wert auf eine ansprechend präsentierte Style-Analyse bestehender Webseiten legt, ist mit dem Stylizer von skybound.ca gut bedient – allerdings läuft dieses Utility nur unter Windows.
Dreamweaver CS4 treibt auch die Integration mit der Schwesterapplikation Photoshop weiter voran. Erstmals lässt sich ein PSD-Dokument als «Smart Object» auf einer Dreamweaver-Seite plazieren. Das Bild bleibt auch nach dem Einfügen mit dem Original verbunden: Wird in Photoshop etwas an dem File geändert, weist ein rot umkreistes Symbol in der Design-Ansicht von Dreamweaver darauf hin, dass neu synchronisiert werden muss. Zum korrekten Nachführen genügt ein Klick auf «Update from Original» im Properties Panel.
Beim Einfügen wandelt Dreamweaver das PSD-Originalfile automatisch in ein webfähiges Format wie JPG oder PNG um. Über einen Dialog kann dabei die Qualität bestimmt werden, und das Bild lässt sich auf Wunsch auch skalieren. Dreamweaver merkt sich diese Einstellungen: Bei späteren Änderungen am PSD-File wird das Bild automatisch wieder korrekt aufbereitet. Auf diese Weise lässt sich zum Beispiel ein PSD-basiertes Logo, das an verschiedenen Stellen einer Website in unterschiedlichen Grössen vorkommen soll, fast ohne Aufwand an allen betroffenen Stellen nachführen, sollte sich am Original etwas geändert haben.
Neues bietet Dreamweaver CS4 auch beim Einfügen von Flash-Movies. Bereits bisher konnten Flash-Dateien per Drag&Drop auf einer Seite plaziert werden, und Dreamweaver generierte den benötigten Code im Hintergrund. In der neuesten Ausgabe wurde dieser Code generalüberholt, er ist nun XHTML-konform. Das Programm erstellt dazu zwei externe Dateien, und der auf der Seite selbst eingesetzte Code prüft, welche Version des Flash-Players auf dem Zielsystem bereits vorhanden ist und installiert bei Bedarf automatisch eine aktuellere Ausgabe.
Eine neue Komponente der CS4-Suite sind die ergänzenden «Creative Pro Online Services» wie zum Beispiel acrobat.com (File-Sharing, Web-Conferencing, PDF-Konverter) oder Community Help (online durchsuchbare Hilfetexte zu den Produkten, ergänzt durch weitere Inhalte wie Tutorials, die von Anwendern und anderen Dritten beigetragen werden).
Im Zusammenhang mit Dreamweaver ist ein weiterer Dienst besonders interessant, der als Erstes in einer Preview-Version kostenlos zur Verfügung steht und später zu noch nicht angegebenen Kosten abonniert werden muss. Er nennt sich «Incontext Editing» und erlaubt es, mit Dreamweaver erstellte Websites direkt im Browser zu editieren. Der Designer der Site markiert dazu die Stellen, an denen Veränderungen zugelassen sind, als editierbar – zum Beispiel den Hauptinhaltsbereich einer Seite. Die Kunden können dann die freigegebenen Bereiche selbst bearbeiten und ihre Website auf den neuesten Stand bringen.
Ähnliches gab es in Form der «Dream Templates» und der Zusatzanwendung Contribute als Editing-Client schon seit mehreren Versionen. Incontext Editing macht die Installation einer zusätzlichen Software auf den Kundensystemen jedoch überflüssig und den Editiervorgang ortsunabhängig: Mit dem neuen
Service lassen sich die erstellten Websites
von jedem internetfähigen Computer aus
pflegen.
