Erster Blick auf Dreamweaver 4

In der Welt des Webdesign gibt es zwei Pole. Am einem Ende finden sich hartnäckige Coder, die bis auf die letzte spitze Klammer und den letzten Javascript-Befehl alles von Hand schreiben, auf der anderen Seite platzieren grafisch orientierte Designer Objekte wie Bilder, Textblöcke und Multimediadateien in ihr Layout und formatieren dort nach Lust und Laune, ohne sich über HTML, Javascript und Cascading Stylesheets (CSS) Gedanken zu machen. Die Masse der Webdesigner lebt jedoch, um im Bild zu bleiben, in tropischen und gemäßigten Breiten.
Macromedias HTML-Editor Dreamweaver wird seit jeher beiden Philosophien gerecht, lassen sich Code und Design gleichzeitig anzeigen. In Version 4 des Programms, fasst Macromedia Design- und Code-Ansicht in ein Fenster zusammen.
Der Moduswechsel erfolgt über einen Klick auf eine Schaltfläche in der neuen Werkzeugleiste im Kopf des Hauptfensters oder das Menü “View”. Der dritte Modus dürfte vor allem am Äquator der Welt des Webdesign beliebt sein: im “Split View” teilt sich das Hauptfenster horizontal und zeigt im oberen Bereich den Code an, während im Rest das Design zu sehen ist. Neuerungen im Design zeigt Dreamweaver sofort im Codefenster an, während die manuell erstelltes HTML Änderungen im Design erst sichtbar werden, wenn man die Code-Ansicht verlässt.
Eine weitere Innovation, die der Übersicht auf dem Monitor dient: Alle Fenster lassen sich aneinander und am Rand des Bildschirmen ausrichten, schiebt man eine Palette an eine andere oder das Hauptfenster, schnappt diese am Rand ein. Neue Fenster öffnet Dreamweaver, ohne bereits platzierte zu überlappen.

Neuerungen im Texteditor …

Noch liefert Macromedia Dreamweaver im Bundle mit einem rein textbasierten HTML-Editor aus, in der Mac-Ausgabe eine Demoversion von BBEdit. War in Version 2 noch eine Vollversion des Programmes von Bare Bones beigegeben und auf der Dreamweaver3-CD BBEdit Lite zu finden, so lässt diese Entwicklung vermuten, dass Macromedia dem eigenen Texteditor immer mehr zutraut. Zu Recht, wie wir meinen. Besonders hilfreich sind beim Handcodieren automatische Einrückungen und Einfärbungen.
Setzt man den Cursor irgendwo zwischen den beginnenden und den abschließenden Tag, beispielsweise einer Tabelle, markiert Dreamweaver nach Aktivieren eines Tastaturkürzels den gesamten zugehörigen Code. Ebenso lassen sich schrittweise Abschnitte von Javascriptbefehlen, die zwischen zwei Klammern stehen, markieren.
Die wichtigste Neuerung dürfte jedoch die kontextsensitive Hilfe für alle Arten von HTML-Tags, Javascript-Befehlen und CSS-Auszeichnungen sein. Die Tastenkombination “Umschalt-F1” gedrückt, erscheint in der neuen Referenzpalette die zugehörige Beschreibung. Dabei greift Dreamweaver auf die HTML-, Java- und CSS-Referenzen von O’Reilly zurück. Der Hersteller hat versprochen, in der lokalisierten Version deutsche Übersetzungen zu verwenden.
Webdesignern, die Javascript selbst schreiben und editieren, bietet Dreamweaver nun einen Javascript-Debugger, der den Code in einem Browser ablaufen lässt und auf Fehler überprüft – in der Mac-Version arbeitet er jedoch nur mit Netscape Communicator zusammen. Wie in Debuggern üblich, lassen sich Breakpoints setzen, damit man das Programm schrittweise abarbeiten kann.

… und im Design-Modus

Mit einer Seitenbeschreibungssprache wie HTML, die ursprünglich dazu gedacht war, Texte auszuzeichnen, ist Layout, wie man es im Printbereich kennt, nicht trivial zu gestalten. Während jedoch Programme wie Golive oder Freeway oft so tun, als wären sie ein Layoutprogramm wie Xpress und für den Anwender unsichtbar im Hintergrund umständlichen Code mit mannigfach verschachtelten Tabellen generieren, setzt Dreamweaver voraus, dass der Anwender weiß, wie er zeitgemäß mehrspaltigen Satz erzeugt. Dem Rechnung tragend führt Dreamweaver 4 im Design-Modus die Layout-Ansicht ein. Legt man mit einer Layot-Tabelle – neu in der Objekte-Palette – gewissermaßen zunächst den Satzspiegel fest, lässt sich dieser mit Layout-Zellen unterteilen. Dabei zeichnet das Programm ein Raster, das über freien Platz für weitere Zellen Auskunft gibt. Die derart erzeugten Rahmen lassen sich nun mit Inhalten füllen: Bilder etwa per Drag-and-Drop oder Text direkt aus der Tastatur.
Das Ineinander-Verschachteln von Tabellen unterstützt Dreamweaver dank Layout-Ansicht nun auch im Design-Modus. Ineinander verschachtelte Tabellen – die verhindern, dass Inhalte eine bestimmte Breite überschreiten oder für Abstand zwischen einzelnen Elementen auf der Seite sorgen – zu erzeugen, erfordert zwar einiges Fingerspitzengefühl. Dieses “Nesting” jedoch rückgängig zu machen und den Inhalt einer Tabelle in die sie einhüllende Zelle einfließen zu lassen, geschieht mit einem einzigen Mausklick.
In der Layout-Ansicht kann man darüber hinaus bequem festlegen, ob sich der Satzspiegel am Browserfensters orientieren oder eine feste Breite behalten soll.

Texte und Buttons im Flash-Format

Vektorgrafiken gewinnen im Web immer mehr Bedeutung. Das hauseigene Flash-Format enger mit Dreamweaver zu verknüpfen, mag für Macromedia nahe gelegen haben. Flash-Elemente lassen sich mit Dreamweaver 4 in die Website integrieren, ohne dass man das Vektor-Programm haben muss. Noch sind die Möglichkeiten begrenzt: Flash-Text ändert seine Farbe, fährt man im Browser mit der Maus über ihn hinweg. Mehr als fünfzig vordefinierte Flash-Buttons – wie Flash-Texte anhand einer Schaltfläche in der Objekte-Palette in das Design einzusetzen – helfen, die Website mit animerten Knöpfen zu versehen. Die Eigenschaften eines Elements, wie Text- oder Hintergrundfarbe legt man in einer Dialogbox fest.

Neben den Annehmlichkeiten, die Vektorgrafiken durch ihre Skalierbarkeit beim Design bringen, mag die Einführung von Flash-Texten ein erster Schritt sein, in Dreamweaver zahlreiche Texteffekte zu ermöglichen.

Multimedia, siteweise

Das Nachbearbeiten von Fireworks-Grafiken und den von Macromedias Programm für Webgrafik erstellten HTML-Code soll Dreamweaver 4 erleichtern. In unseren Tests der Beta-Versionen beider Programme erweist sich die Angelegenheit jedoch noch als ein wenig hakelig: Zwar öffnet sich Fireworks nach Doppelklick auf eine Grafik, zerstört jedoch beim Aktualisieren des zur Grafik gehörenden HTML wiederholt den Code der gesamten Datei. Ob das Zusammenspiel der beiden Programme mit den finalen Versionen wirklich nahtlos vonstatten geht, wird sich zeigen.
Leichteren Zugriff auf alle zur Website gehörenden Dateien soll die Asset-Palette gewähren. Darin finden sich nicht alle Bilder, Filme und Skripte der Site, sondern auch alle Links, Bibliotheken und Farbdefinitionen. Oft verwendete Elemente definiert man als Favoriten und fügt sie per Drag-and-Drop in das Layout ein, Farben lassen sich im Design-Modus markierten Objekten ebenfalls zuweisen.
Links innerhalb einer Site konnte Dreamweaver schon in früheren Versionen überprüfen und komplett ersetzen, neu ist hingegen das Sitereporting. In einzelnen Dateien, Ordnern oder der gesamten Site untersucht das Werkzeug dabei den HTML-Code auf fehlende “Alt”-Tags, überflüssige Tabellenverschachtelungen oder leere Tags. Golive hat unseren Eindrücken zu Folge jedoch dafür die besseren Lösungen.
Dreamweaver 4 unterstützt jedoch mit einem Plug-in das WebDAV-Protokoll. So ist es bequem möglich, Dateien direkt auf dem Server zu bearbeiten, sofern dieser – wie etwa Apache – WebDAV ebenfalls unterstützt.

Fazit

Dreamweaver 4 hat alles, was ein HTML-Editor benötigt. Mit den neuen Funktionen hat Macromedia für noch mehr Übersichtlichkeit gesorgt. Experten für spitze und eckige Klammern hilft Dreamweaver 4 mit zahlreichen Kontrollmöglichkeiten, der vom Programm erzeugte schlanke und akkurater Code ermöglicht jedoch auch mehr visuell orientierten Designern, Dateien minimaler Größe zu erzeugen. Besonders hilfreich ist die kontextsensitive Hilfe, mit der man Zugriff auf HTML-, Javascript- und CSS-Referenzen von O’Reilly erhält. Für zukünftige Versionen dürften Flash-Technologien ein Thema werden.

Peter Müller

:Screenshots…