Auf eine gute Zusammenarbeit

ALEXANDER GRAF Webdesigner der ersten Stunde mögen sich noch an die umständlichen und zeitraubenden Arbeitsschritte beim Erstellen einer grafischen Navigation erinnern. Kreierte man damals die Grafiken in Photoshop, musste die Datei jedes Mal in einem Programm, wie zum Beispiel dem Graphic Converter, in ein Webformat umgewandelt werden. Eine Vorschau war frühestens im Browser möglich. Für einen einheitlichen Gesamteindruck musste man die Grafiken manuell zerschneiden. Doch diese zerschnittenen Bilder mit reinem HTML-Code wieder zusammenzusetzen, war nicht nur äusserst mühsam, sondern auch langwierig. Man musste sich schon im Voraus im Klaren sein, wie die Seite aussehen soll. Andernfalls musste jeder dieser Arbeitsschritte nochmals von vorne gemacht werden. Macromedia hat mit Dreamweaver und Fireworks schon seit einiger Zeit Abhilfe geschaffen. Trotzdem gab es in den früheren Versionen noch keine Hand-in-Hand-Zusammenarbeit. Meistens funktionierte der Austausch nur in eine Richtung. Mit den neuen MX-Versionen sind die Webentwicklerprogramme ein grosses Stück zusammengewachsen.

Design Notes als Verbindung

In Dreamweaver MX können Bilddateien optimiert werden, ohne dass dazu ein Bildeditor wie Fireworks MX gestartet werden muss. Diese Funktion kennen wir jedoch schon von verschiedenen Anwendungen. Seine Flexibilität spielt Dreamweaver MX erst mit dem nächsten Schritt aus, bei der Verknüpfung der webtauglichen Datei mit deren Quelldokument. Das Editieren einer Navigationsliste in Dreamweaver MX ruft somit die zugehörige PNG-Datei in Fireworks auf. Diese Arbeitsweise verbessert den Workflow erheblich, da alle Texte und Vektoren editierbar bleiben. Auf die gleiche Weise funktioniert es auch mit Flash-Filmen. Diese Verknüpfung von Quelldokument und der exportierten Bild- oder Filmdatei basiert auf den Design Notes. Standardmässig sind die Design Notes in den Programmen aktiviert, dass heisst, sie werden beim Speichern des Dokumentes automatisch erzeugt. Sie enthalten Informationen über Speicherorte und weitere Einzelheiten zu exportierten Dateien.

Handshake von Dreamweaver und Fireworks

Damit eine integrierte Arbeitsumgebung einwandfrei funktioniert, müssen einige Vorbereitungen getroffen werden. Als erstes sollte in Dreamweaver MX die lokale Site definiert werden. Ferner muss überprüft werden, ob Fireworks MX als primärer Bildeditor in Dreamweaver MX festgelegt ist. Nun kann mit dem Design der Website begonnen werden. Um ein Bild in Dreamweaver MX zu platzieren, gibt es verschiedene Wege. Ist das Bild in irgend einer Form schon vorhanden, kann es über den Befehl Einfügen Bild eingefügt werden. Es spielt dabei keine Rolle, ob es sich um eine Photoshop-Datei oder um ein bereits optimiertes JPEG-Bild handelt. Webtaugliche Bilder erscheinen direkt im Layout von Dreamweaver MX. Bei allen anderen Formaten wird das Symbol eines fehlenden Bildes angezeigt. Über den Befehl In Fireworks optimieren erscheint das Optimieren-Fenster, bekannt aus Fireworks MX. Hier können alle Einstellungen vorgenommen werden, um das bestmögliche Resultat für den Webexport zu erreichen. Das Bild muss nun in einem Webformat gespeichert werden und erscheint danach ebenfalls im Dreamweaver-Layout.

Platzhalterbilder

Sind noch keine Bilder vorhanden, hat man in Dreamweaver MX die Möglichkeit, ein so genanntes Platzhalterbild zu generieren. Diese Art von Bild belegt den Platz eines noch nicht erstellten Bildes und macht das Definieren des Grunddesigns zu einer mühelosen Sache. Im Falle einer Aufgabentrennung erstellt der Webdesigner die Seiten mit Platzhalterbildern. Der Grafiker kann nun bei Gelegenheit diese «leeren» Platzhalter durch die definitiven Bilder ersetzen. Ein einfacher Klick auf den Erstellen-Button in der Eigenschaften-Palette öffnet ein neues Dokument in Fireworks MX. Die Dimensionen des Platzhalterbildes werden automatisch übernommen. Nun kann das Bild mit den Werkzeugen von Fireworks erstellt werden. Man schliesst über den Button Fertig die Bearbeitung in Fireworks MX ab und wechselt gleichzeitig zurück zu Dreamweaver MX. Bei diesem Schritt muss man zwei Dateien speichern. Zum einen die Quelldatei im PNG-Format und gleichzeitig die damit verknüpfte optimierte Datei. Interessant ist diese Funktion, da dies nicht nur mit reinen Bilddateien funktioniert, sondern auch mit Navigationslisten und Imagemaps, die man mittels zugewiesenen Verhalten in Fireworks MX generieren kann. In diesem Falle wird statt einer JPEG- oder GIF-Grafik eine HTML-Datei mit den zugehörigen Bildern gespeichert und im Dreamweaver-Dokument eingefügt.

Webfotoalbum erstellen

Der Befehl zur automatischen Generierung eines Webfotoalbums in Dreamweaver ist bereits aus der Vorgängerversion bekannt. Fireworks erzeugt für diesen Zweck sowohl die Fotos in der gewünschten Grösse als auch die kleinen Vorschaubilder. Leider ist diese nützliche Funktion nicht erweitert worden. Wünschenswert wären hier selbstdefinierte Vorlagen. Dann könnten ganze Fotoalben im Designstil der Website auf Knopfdruck erzeugt werden. In Photoshop 7 ist es mit ein bisschen Hintergrundwissen möglich, eigene Stile für Fotoalben zu erstellen. Dabei bleiben die erzeugten Seiten sogar mit einer Vorlage verknüpft. Spätestens in der nächsten Version muss Dreamweaver an dieser Stelle mit erweiterten Funktionen aufwarten. Es wird bestimmt noch einige Zeit dauern, bis jeder Webdesigner die Webfotoalben an Bilderdatenbanken anbinden kann.

Optimieren in Fireworks MX

In Fireworks MX kann man nicht nur Grafiken zeichnen und fürs Web optimieren. Man kann auch komplexe Navigationen entwickeln. Um trotz der Vielzahl von Grafiken kurze Ladezeiten zu garantieren, hat man die Möglichkeit, jedem einzelnen Segment eigene Einstellungen zur Optimierung zuzuweisen. Je nach Inhalt des Segmentes kann die GIF- oder JPEG-Komprimierung gewählt werden. Man kann aber noch einen Schritt weitergehen. Mit Hilfe der selektiven JPEG-Komprimierung lassen sich verschiedene Bereiche einer JPEG-Grafik unterschiedlich stark komprimieren. Die detailreichen Bereiche der Grafik können auf höherer Stufe komprimiert werden als die anderen. Bei Bildern mit einfachen Hintergründen kann man die Gesamtgrösse der Datei wesentlich verringern, wenn man diesen Bereich in niedriger Qualität komprimiert. Die wichtigen Bereiche werden trotzdem in hoher Qualität dargestellt.

Flash

Auch in Flash MX werden die importierten GIF- und JPEG-Grafiken mit der PNG-Originaldatei verknüpft. Will man die Grafik ändern, genügt ein Klick auf den Button Bearbeiten. Flash MX öffnet die Originaldatei in Fireworks MX. Da in diesem Falle alle Ebenen und Vektoren editierbar bleiben, sind Änderungen schnell erledigt. Es können auch direkt PNG-Dateien in Flash MX importiert werden. In diesem Falle hat man zwei Optionen. Entweder importiert man ein gerastertes, auf die Hintergrundebene reduziertes Bild, oder Flash behält alle Vektoren, editierbaren Texte und Ebenen. In diesem Fall wird die Verbindung mit der PNG-Datei jedoch unterbrochen.

Die Bearbeitung von Flash-Filmen aus Dreamweaver MX ist leider nicht identisch mit der Funktionsweise der anderen Programme. Flash MX wird jedes Mal neu gestartet, selbst wenn das Programm bereits am Laufen ist. Ausserdem beendet der Befehl Fertig (Wechsel zurück zu Dreamweaver MX) das Programm. Fireworks MX indessen bleibt für weitere Arbeiten geöffnet.

In Dreamweaver MX können direkt Flash-Schaltflächen erzeugt werden. Dazu wählt man einen vorgegebenen Stil aus und gibt den gewünschten Text ein. Natürlich können auch eigene Stile in Flash gestaltet und in Dreamweaver MX gespeichert werden. Das ist nützlich für Redaktoren, welche ohne Flash-Kenntnisse die Website mit Buttons erweitern müssen. Braucht man für eine Webseite Schriften, die nicht auf jedem Computer installiert sind, hat man die Möglichkeit, den Text direkt in Dreamweaver MX in einen Anti-Aliasing-Text umzuwandeln. Auch in diesem Fall wird eine SWF-Datei generiert.

Mächtig und trotzdem schlank

Mit dem Studio MX bietet Macromedia Lösungen aus einer Hand. Die einzelnen Anwendungen wachsen zusammen und bleiben trotzdem stark in ihren Kernkompetenzen. Die Softwareschmiede verfolgt mit dieser Entwicklung ein ähnliches Konzept wie Microsoft mit Office. Durch die Integration der verschiedenen Anwendungen versucht man auch, sich gegenüber der Konkurrenz abzusetzen. Die schwächeren Komponenten werden stark, indem sie reibungslos mit den anderen zusammenarbeiten. So ist Fireworks, auch wenn es Photoshop nicht das Wasser reichen kann, die erste Wahl im Bereich Webgrafiken.

Trotz dem gewaltigen Funktionsumfang sind die Programme übersichtlich und einfach zu bedienen. Die neue, einheitliche Oberfläche ist angenehm und schnell erlernbar. Endlich ist Schluss mit dem Herumschieben von Paletten. Speziell Dreamweaver MX kommt die Überarbeitung zugute. Sehr gut gelungen ist auch die Integration von Dreamweaver Ultra Dev. Damit kann man ohne teure Zusatzsoftware dynamische Seiten erzeugen und mit dem mitgelieferten ColdFusion-Server gleich testen. Trotz des riesigen Funktionsumfanges wirkt das Programm schlank und nicht überladen. Vielleicht wird es in naher Zukunft nur noch eine Software geben, welche die verschiedenen Module bei Bedarf einblendet und wieder verschwinden lässt.