W O R K F L O W M I T D R E A M - W E AV E R 4 U N D F I R E W O R K S 4

Transkript

1 80 SBO 06/01 W O R K F L O W M I T D R E A M - W E AV E R 4 U N D F I R E W O R K S 4 Mit der Version 4 ist Dreamweaver durch eine umfangreichere Site-Verwaltung und die enge Verzahnung mit dem Grafikprogramm Fireworks noch teamtauglicher geworden. Wie Sie die neuen Features praxisnah, sinnvoll und Ressourcen schonend einsetzen, beleuchtet dieser SBO-Workshop. In der Site-Definition legen Sie unter anderem Ihren Benutzernamen und die E- Mail-Adresse für das Ein- und Auschecken von Dateien fest. Auf unserer Heft-CD finden Sie die in diesem Artikel verwendeten Beispieldateien sowie Demoversionen von Dreamweaver 4 und Fireworks 4. Workflow ist das neudeutsche Wort für prozessorientierte Arbeitsteilung (siehe Seite XX). Im weiteren Sinne bezeichnet es auch das Verknüpfen einzelner Prozesselemente (Daten, Informationen etc). Workflow beschreibt also das Zusammenspiel zwischen Menschen, Anwendungen und Maschinen: Workflow entsteht nicht nur, wenn man von einem Kunden ein Briefing entgegen nimmt, sondern auch, wenn man ein Word-HTML in Dreamweaver importiert oder einen lokalen und einen Remote-Server miteinander abgleicht. Integration hingegen beschreibt eher das Miteinanderverzahnen mehrerer eigentlich getrennter Anwendungen: Das Paradebeispiel hierfür ist etwa Microsofts Office. Auch eine Datenbank wird in eine Website integriert. Dreamweaver und auch Fireworks sind in ihrer Grundkonzeption ausgelegt auf Flexiblität, freie Konfigurierbarkeit und Workflow. Jede Programmressource ist aus den Komponenten Javascript, HTML und XML aufgebaut und somit modular einsetzbar und erweiterbar. Der inzwischen sehr benutzerfreundliche Extension Manager und der integrierte Zugang zum Exchange Server bieten beste Voraussetzungen für einen regen Einsatz der von Drittanbietern entwickelten Extensions e und stellen damit sicherlich den wichtigsten Wettbewerbsvorteil des Produktes dar. Zu den Workflow-Features zählen insbesondere die jüngsten Neuerungen, etwa die Elementeverwaltung (Assetmanagement), mit der sich alle in der Site verwendeten Objekte sehr flexibel und zentral verwalten lassen und die Vorlagen (Templates), Bibliotheksobjekte (Instances) und Flash-Objekte mit einschließt. Für größere Projekte mit Versionskontrolle ist die Integration der Standards Visual Source Safe und WebDAV (Web-based Distributed Authoring and Versioning) ein großer Gewinn. Die Tools der Site-Verwaltung und der Einsatz von Design Notes lassen sich ohne großen Aufwand in der Praxis einsetzen und sollen hier näher vorgestellt werden. Viele Webentwickler kennen zwar die automatisierbaren Workflow-Tools von Dreamweaver und Co., greifen jedoch in der Praxis oft sicherheitshalber nach wie vor zu halbautomatischen Routinen, was zumindest bei kleineren Projekten auch sinnvoll erscheint. Wenn jedoch an einer mittelgroßen Site ein halbes Dutzend Entwickler an unterschiedlichen Orten und zu unterschiedlichen Zeiten arbeiten erweisen sich Workflow-Features als enorm hilfreich. Und bei noch größeren Projekten sind Redaktionssysteme und Versionskontrollen unverzichtbar. In jedem Fall aber ist die Kette nur so stark wie ihr schwächstes Glied: Der Workflow kann nur mit entsprechender Kompetenz und Prozessdisziplin jedes einzelnen Projektteilnehmers funktionieren. Dazu sollte jeder mit den im Folgenden vorgestellten Funktionen vertraut sein. Die Site als Dreh- und Angelpunkt in Dreamweaver Jede mit Dreamweaver entwickelte Website basiert auf einer per Dialog definierten Site. Ohne diese Definition läuft gar nichts. Die Site-Definition ist notwendig, damit Dreamweaver die logischen Verknüpfungen zwischen den einzelnen Dokumenten verifizieren kann. Außerdem werden in dieser lokalen Site Steuerdateien und Hilfsverzeichnisse für die Administration der Site angelegt. Hierzu gehören etwa unsichtbare Steuerdateien für ausgecheckte Dateien, Bibliotheksverzeichnisse oder Design Notes. Mit dem Menüpunkt Site/Neue Site... starten Sie in Dreamweaver die Site-Definition. In den einzelnen Dialogfeldern definieren Sie die Einstellungen für die lokale Site und die Remote-Site auf dem Server. Sie bestimmen Zugangsrechte und Eincheck-Informationen, eventu-

2 SBO 06/01 81 SBOKOMPAKT Neue Workflow-Features machen den Webeditor Dreamweaver noch flexibler im Teameinsatz bei der Produktion von Websites Ein- und Auschecken, Site-Fenster und Design Notes sind die zentralen Tools für den Workflow im Team Die Integration von Standards für die Versionskontrolle schafft zusätzliche Sicherheit Spezielle Roundtrip-Funktionen verbessern die Effizienz der Grafikroutinen zwischen Dreamweaver und Fireworks e Erweiterungen für Dreamweaver und Fireworks finden Sie unter: Die von verschiedenen Projektteilnehmern ausgecheckten Dateien sind deutlich durch farbige Häkchen gekennzeichnet. Ein Klick auf den Namen ruft den E- Mail-Client, um eine Nachricht an den Teilnehmer zu schicken. Die Sprechblase kennzeichnet die zum Dokument gehörige Designnote. ell einen Anwendungsserver, die Design Notes, das Sitemap-Layout sowie die Dateinansichtspalten. Ein- und Auschecken: eine empfehlenswerte Disziplin Das Feature Ein- und Auschecken verhindert, dass Änderungen an einem Dokument durch mehrere Benutzer gleichzeitig vorgenommen werden. Dabei wird das Dokument während der Bearbeitung durch einen Benutzer für alle übrigen gesperrt. Wenn Sie mit mehreren Entwicklern an einem Projekt arbeiten und sich dazu entschließen, Ein- und Auschecken zu verwenden, sollten Sie dies entweder immer und in jedem Fall tun oder es ganz lassen. Die Gründe hierfür sind einfach: Die als ausgecheckt markierten Dateien werden von unsichtbaren Steuerdateien (mit der Endung.LCK ) begleitet, die bei manueller Site-Verwaltung gerne übersehen werden und damit zu großer Verwirrung und Datenverlusten führen können. Versionskontrolle gibt mehr Sicherheit Die Zusammenarbeit in großen Teams an umfangreichen Projekten macht ein umfangreiches Administrationssystem mit Zugangskontrollen, Rechtevergaben und Freigabemechanismen notwendig. Auf einem so genannten Staging-Server werden neue oder aktualisierte Teile der Site vor der öffentlichen Publizierung den Projektteilnehmern zur Überprüfung und Freigabe zugänglich gemacht. Solche Redaktionssysteme umfassen Komponenten, mit denen es möglich ist, sehr komplexe Freigaberoutinen zu realisieren und auch wieder mehrere Versionen zurückzugehen ( Rollback ). Standards hierfür sind etwa die Schnittstellen Visual Source Safe und WebDAV, die Dreamweaver beide unterstützt. Sobald eine Verbindung zu den Anwendungen auf dem Server steht, können alle Funktionen zur gemeinsamen Dateinutzung (Ein-/Auschecken, Aktualisieren, Abrufen und Bereitstellen, Design Notes etc.) auf entsprechende Funktionen im Quellkontrollsystem zugreifen. Über das Site-Fenster von Dreamweaver greifen Sie auf eine installierte Visual-Source-Safe(VSS)-Datenbank zu: 1. In der Kategorie Remote-Informationen des Fensters Site- Definition wählen Sie im Pop-up-Menü Zugriff die Option Sourcesafe. 2. Bei Bedarf markieren Sie die Option Dateien beim Öffnen Auschecken. 3. Wenn Sie auf Info klicken, erscheint das Dialogfeld Sourcesafe-Datenbank. 4. Im Feld Datenbankpfad klicken Sie auf Durchsuchen, um die gewünschte VSS-Datenbank zu suchen. Wahlweise geben Sie den kompletten Pfad der Datenbank ein. 5. Die ausgewählte Datei wird zur Datei srcsafe.ini und initialisiert Source Safe. 6. Im Feld Projekt geben Sie das Projekt der VSS-Datenbank ein, das als Stammverzeichnis der Remote-Site verwendet werden soll. 7. In die Felder Benutzername und Kennwort geben Sie Angaben für das Login in die ausgewählte Datenbank ein. Wenn Sie Ihr Kennwort in Dreamweaver speichern wollen, klicken Sie auf die Option Kennwort speichern. 8. Ein Klick auf OK bringt Sie zum Site-Fenster zurück. Wählen Sie Site/Verbinden oder klicken Sie auf die Schaltfläche Verbinden in der Symbolleiste des Site-Fensters, um mit der Remote- Site Verbindung aufzunehmen. Um die Verbindung zu trennen, klicken Sie auf die Schaltfläche Trennen oder wählen im Menü

3 82 SBO 06/01 03/01 r Infos zu Microsoft Visual Source Safe 6: t Infos zu Metrowerks Visual Source- Safe für Macintosh: Basis-Info und Alle Informationen im Fenster Design Notes. Site/Trennen. Um dieses Feature unter Windows verwenden zu können, muss Microsoft Visual Sourcesafe Client, Version 6 r installiert sein, auf einem Macintosh Metrowerks Sourcesafe Client t. Benutzer von Metrowerks Visual Sourcesafe können nur auf Microsofts Sourcesafe-Datenbanken der Version 5.0 zugreifen. Wenn Ihr gesamtes Team plattformübergreifend auf jede VSS- Datenbank Zugriff haben soll, verwenden Sie eine Datenbank der Version 5.0. Dreamweaver unterstützt auch das WebDAV-Protokoll, das zurzeit nur auf Microsofts Internet Information Server (IIS) 5.0 und Apaches Web Server verfügbar ist. Eine Verbindung mit Dreamweaver stellen Sie folgendermaßen her: 1. In der Kategorie Remote-Informationen des Fensters Site- Definition wählen Sie im Pop-up-Menü Zugriff die Option Webdav. 2. Bei Bedarf markieren Sie die Option Dateien beim Öffnen Auschecken. 3. Wenn Sie auf Info klicken, wird das Dialogfeld Webdav-Verbindung eingeblendet. 4. Im Feld URL geben Sie die vollständige URL zu dem Verzeichnis des WebDAV-Servers an, zu dem die Verbindung hergestellt werden soll. Dazu gehören auch das Protokoll, der Anschluss und das Verzeichnis, sofern dies vom Stammverzeichnis abweicht. Zum Beispiel: 5. In die Feldern Benutzername und Kennwort geben Sie Angaben für das Login der Serverauthentifizierung ein. Wenn Ihr Kennwort in Dreamweaver gespeichert werden soll, klicken Sie auf die Option Kennwort speichern. 6. Ihre -Adresse im nächsten Feld wird zur Identifizierung des Eigentumsrechts auf dem WebDAV-Server benötigt und wird auch im Sitefenster als Kontaktinformation angezeigt. 7. Ein Klick auf OK bringt Sie zum Site-Fenster zurück. Wählen Sie Site: verbinden oder klicken Sie auf die Schaltfläche Verbinden in der Symbolleiste des Site-Fensters, um mit der Remote- Site Verbindung aufzunehmen. Wollen Sie die Verbindung unterbrechen, klicken Sie auf die Schaltfläche Trennen oder wählen im Menü Site: Trennen. Design Notes mehr als gelbe Post-its Dieses wichtige Feature führte Macromedia mit Dreamweaver 3 zum ersten Mal ein. In der Vergangenheit waren Entwickler von Websites immer auf Kommentare im HTML-Code, -Fragmente, telefonische Nachrichten auf Mailboxen oder kleine gelbe Zettel an Monitoren angewiesen, um Teammitglieder auf bestimmte Informationen zu Dateien hinzuweisen. Mit Design Notes wurde die Möglichkeit eingeführt, für den Benutzer nicht sofort erkennbare Informationen und Nachrichten den Dateien direkt zuzuordnen: vertrauliche Interna des Projektteams, Kommentare, Quellenverweise, Hinweise zu Bezugsdaten, Bemerkungen der einzelnen Entwickler zum Entwicklungsstand oder noch fehlenden Bestandteilen etc. Damit ist es möglich, Design Notes für jedes Dokument einer Site auch Objekte oder Vorlagen zu verwenden. Beachten Sie jedoch, dass Design Notes zu einer Vorlage nicht von den Dokumenten übernommen werden, die auf der Vorlage basieren. Um die Design Notes einer Seite zu erstellen oder zu sichten, wählen Sie Datei/Design Notes oder im Kontextmenü Design Notes.... Im dann erscheinenden Fenster wählen Sie einen Status aus (zum Beispiel Entwurf ) und geben Ihre Anmerkungen ein. Wenn Sie auf das kleine Kalender-Icon mit der Zahl 19 klicken, fügen Sie das aktuelle Datum in die Anmerkungen ein. Wenn Sie möchten, dass Ihre Design Note auf jeden Fall gelesen wird, wählen Sie die Option Zeigen, wenn Datei geöffnet ist. Darüber können Sie in der Tafel Alle Informationen die Informationen strukturieren und ergänzen. Klicken Sie auf das Pluszeichen, um weitere Schlüsselpunkte hinzuzufügen. Tragen Sie Namen und dazugehörige Werte ein. Einen neuen Default für Status können Sie eingeben, wenn Sie unter Name Status eingeben und unter Wert einen neuen Wert (zum Beispiel ***neu*** ) eingeben. Alle Design Notes verwaltet Dreamweaver in einem eigenen Verzeichnis _notes. Dieses befindet sich im gleichen Verzeichnis wie das zugehörige Dokument. Design Notes tragen den Dateinamen des Dokuments plus der Endung.mno (zum Beispiel ani.htm.mno ). Wird das Dokument verschoben oder umbenannt, werden die entsprechenden Änderungen automatisch auch auf die Design Notes angewen-

4 SBO 06/01 83 Die Verzeichnisstruktur einer Site mit dem Verzeichnis _notes. Die mit Dreamweaver geöffnete Designnote zeigt den Code der Datei und einen Bug in der Entwurfsansicht: Der Code wird kurioserweise als PHP-Code angezeigt! Im Fenster Site-Definition stellen Sie die Optionen der Dateiansichtsspalten des Site-Fensters ein, indem Sie zum Beispiel die Design Notes verknüpfen. det. Um Design Notes zu deaktivieren, muss die entsprechende Option im Fenster Site-Definition ausgeschaltet werden. Im dann folgenden Dialogfeld werden Sie gefragt, ob Sie vorhandene Design Notes löschen möchten. Mit Klick auf Nein behalten Sie alle bisherigen Design Notes. Um nicht zugeordnete Design Notes zu löschen, klicken Sie auf die Schaltfläche Entfernen. Ein Dialogfeld fragt Sie noch mal, ob die verwaisten Design Notes wirklich gelöscht werden sollen. Wenn Sie mit Dreamweaver eine Datei löschen, der Design Notes zugeordnet sind, werden diese ebenfalls gelöscht. Deswegen kommen verwaiste Design-Notes- Dateien normalerweise nur dann vor, wenn die Datei außerhalb von Dreamweaver gelöscht oder umbenannt wird. Wenn Sie die Option Design Notes verwalten deaktivieren, bevor Sie auf Entfernen klicken, werden alle Design-Notes-Dateien der Site gelöscht. Im Fenster Site-Definition finden Sie auch das Auswahlkästchen für die Bereitstellung der gemeinsamen Nutzung von Design Notes. Ist die Option nicht ausgewählt, versaltet das Programm die Design Notes nur lokal, das heißt sie werden nicht auf die Remote-Site übertragen, wenn Sie Dateien einchecken oder bereitstellen. Design Notes im Site-Fenster Seit Dreamweaver 4 können Sie direkt im Site-Fenster sehen, hinter welchen Dateien sich Design Notes verbergen. Sie werden in der Spalte Anmerkungen mit dem Icon einer kleinen gelben Sprechblase versehen. Klicken Sie auf dieses Icon, öffnen sich die Design Notes der Datei. Auch die im Site-Fenster angezeigten Spalten in den Bereichen Lokaler Ordner und Remote-Site lassen sich angepassen; möglich sind bis zu zehn Spalten je Bereich. Sie können neue Spalten hinzufügen, die Reihenfolge der Spalten ändern und Spalten ausblenden. Informationen der Design Notes können Sie mit Spaltendaten verbinden und für die gemeinsame Nutzung aller an der Site beteiligten Teammitglieder zugänglich machen. Die Standard-Spalten Name, Anmerkungen, Größe, Typ, Geändert und Ausgecheckt von können Sie nur in der Reihenfolge verändern nicht aber umbenennen, löschen oder mit Design Notes verknüpfen. Sie ändern die Reihenfolge, indem Sie Site/Ansicht der Sitedateien/Dateiansichtsspalten wählen und die ausgewählte Spalte mit den Aufwärts- und Abwärtspfeilen oben rechts in die gewünschte Position bringen. Eine neue Spalte fügen Sie hinzu, indem Sie auf das Pluszeichen klicken. Im Feld Spaltenname geben Sie einen Namen ein. Nur wenn Sie eine neue Spalten mit einer Design Note verknüpfen, können Daten im Site-Fenster angezeigt werden. Mit der Ausrichtungsoption können Sie einstellen ob der Spaltentext links-, rechtsbünding oder zentriert erscheint. Das Ein- und Ausblenden der Spalte steuern Sie mit der Option Zeigen. Mit der Option Mit allen Benutzern dieser Site teilen erlauben Sie eine gemeinsame Nutzung der Spalte. Sie löschen eine von Ihnen angelegte Spalte, indem Sie die Spalte auswählen und dann auf das Minuszeichen klicken. Vorsicht: Die Spalte wird ohne Sicherungsdialog sofort gelöscht! Die Sortierreihenfolge (aufsteigend oder absteigend) einer Spalte im Site-Fenster ändern Sie durch mehrmaliges Klicken auf die Spaltenüberschrift. Workflow-Berichte erstellen Mit dem Befehl Site/Berichte können Sie auch den Arbeitsfluss in Ihrem Webteam verbessern, indem Sie Workflow-Berichte generieren lassen. Diese enthalten Infos über den Auscheckstatus und Design Notes einschließlich definierter Namens- und Wertparameter. Da bei dieser Art von Bericht auch Abfragen über Einund Auscheck-Status gemacht werden, muss eine Verbindung zur entfernten Site bestehen. 1. Wenn Sie Site/Berichte auswählen, erscheint das Dialogfeld Berichte. 2. Wählen Sie als erstes aus dem oberen Pop-up-Menü, wofür der Bericht erstellt werden soll: Aktuelles Dokument", Gesamte lokale Site", Ausgewählte Dateien der Site oder Ordner Wählen Sie in der Berichtskategorie Workflow die Option Ausgecheckt von und klicken Sie unten im Fenster auf die Schaltfläche Berichtseinstellungen. 4. Im Dialogfeld Ausgecheckt von geben Sie den Namen eines Mitglieds Ihres Teams ein und klicken dann auf OK. 5. Wenn Sie jetzt auf Ausführen klicken, erhalten Sie einen

5 84 SBO 06/01 Beim Export aus Fireworks sollten Sie die Grafiken gleich im richtigen Zielverzeichnis speichern. Bericht mit der Zusammenfassung aller von der jeweiligen Person ausgecheckten Dateien. Sie können auch zusätzlich zum oder anstatt des Auscheckberichts, einen Bericht für Design Notes erstellen lassen: 1. Wählen Sie in der Berichtskategorie Workflow die Option Design Notes und klicken Sie unten im Fenster auf die Schaltfläche Berichtseinstellungen. 2. Geben Sie ein oder mehrere Namen-Wert-Paare ein und wählen Sie Vergleichswerte aus den entsprechenden Po p - p - Menüs aus. Wenn Sie zum Beispiel Status enthält Final angeben, sucht das Berichtsprogramm nach Dateien, deren Design Notes den Status Final haben. 3. Klicken Sie nun auf OK. Im anschließend erscheinenden Dialogfeld Berichte klicken Sie auf Ausführen", um den Bericht zu generieren. Wenn Sie keine Verbindung zur entfernten Site hergestellt haben, versucht Dreamweaver trotzdem ohne Erfolg, auf die entfernte Site zuzugreifen. Das kann sehr nervenzehrend sein, wenn es Ihnen nicht gelingt, diese Schleife zu unterbrechen, da für jede zu überprüfende Datei eine erneute Anfrage an die Remote-Site gestellt wird. Fireworks rückt noch ein Stück näher Dreamweaver ist in Version 4 noch stärker mit dem Grafikeditor Fireworks und auch der Animationssoftware Flash verzahnt als in den vorhergehenden Versionen: Flash-Schaltflächen und -Texte lassen sich beispielsweise jetzt direkt aus Dreamweaver editieren. Hersteller Macromedia bezeichnet diese Form des Hin- und Herreichens zwischen Anwedungen mit dem Sammelbegriff Roundtrip. In Fireworks hat Macromedia für eine nahtlose Integration erweiterte Roundtrip-Features implementiert. Dreamweaver und Fireworks arbeiten nun jedes Programm innerhalb seiner Kernfunktionen im gleichen Dokument Hand in Hand. Die Integration funktioniert weil Fireworks und Dreamweaver auf das gleiche _notes -Verzeichnis zugreifen, in dem die gemeinsam benötigten Informationen gespeichert sind. Im Folgenden einige Beispiele für den äußerst praxisnahen und flexiblen Einsatz dieser Möglichkeiten. Bildtabellen editieren Mit Fireworks erstellter HTML-Code (zum Beispiel eine segmentierte Bildtabelle) können Sie auf unterschiedliche Art in Dreamweaver einfügen. Der normale Weg ist, die Bildsegmente und das dazugehörige HTML aus Fireworks zu exportieren. Dreamweaver setzt dann Fireworks-HTML direkt an der Einfügemarke in das aktuelle Dokument ein. Die schnellere Lösung kann sein, den HTML-Code über die Zwischenablage zu transportieren. Benutzen Sie hierfür in Fireworks entweder den Befehl HTML-Code kopieren... oder aber die Exportoption HTML/In Zwischenablage kopieren. In beiden Fällen fragt Fireworks nach zusätzlichen Optionen: So ist es etwa möglich, HTML speziell für Adobes Golive zu generieren. Die Bilder der entsprechenden Segmente werden in jedem Fall neu erstellt. Per Zwischenablage wird das Fireworks-HTML dann direkt in Dreamweaver eingesetzt. Die eingesetzte Bildtabelle können Sie jetzt direkt aus Dreamweaver heraus bearbeiten. Hierfür ist in Dreamweaver Fireworks als primärer Bildeditor eingestellt ( Vo r e i n s t e l l u n g e n / D a t e i t y- pen/editoren ). In Fireworks können Sie wiederum einstellen, wie mit der Quelldatei (Fireworks PNG) bei der Bearbeitung und Optimierung durch externe Anwendungen umgegangen werden soll ( Voreinstellungen/Starten und bearbeiten ). Wählen Sie in Dreamweaver die ganze Tabelle aus und klicken Sie dann im Eigenschafteninspektor auf Bearbeiten. Fireworks startet wenn nicht bereits geöffnet und lädt die Quelldatei der Tabelle. Nachdem Sie die Änderungen vorgenommen haben,

6 SBO 06/01 85 SBOAUTOR Jörg Kilian Die Bearbeitung einer mit Fireworks erstellten Tabelle wird direkt aus Dreamweaver getriggert. ist Gründer und geschäftsführender Gesellschafter der Designagentur Kilde Communications GmbH in Hamburg und Autor des Buchs Dreamweaver 4 Integriertes Webdesign mit professionellen Tools ( Addison-Wessley Verlag, München 2001, ISBN: , 99,90 Mark, 320 Seiten). klicken Sie auf Fertig. Anschließend zeigt Dreamweaver das neu generierte HTML und die neuen Bildsegmente automatisch an. Einzelne Bilder bearbeiten und optimieren Auch ein einzelnes Bild können Sie in Dreamweaver auswählen, um es mit Fireworks zu editieren. Wählen Sie das Bild aus und klicken Sie im Eigenschafteninspektor auf Bearbeiten. Dann gehen Sie so vor wie oben beschrieben. Wenn für das Bild keine Quelldatei vorliegt beziehungsweise die Design-Notes-Informationen fehlen, wird Ihnen im Eigenschafteninspektor Hilfe angeboten: Quelle zur Bearbeitung suchen.... Dabei sollten Sie allerdings eines immer bedenken: Wenn Sie bei diesen Verfahren nicht mit der Quelldatei arbeiten, kann ein Verändern der Farbpalette, des Kompressionsverfahrens oder der Bildgröße und -proportionen die Qualität des Bildes verringern. Etwas anders verhält es sich, wenn Sie das Bild nicht aus der Quelldatei neu generieren möchten, sondern das exportierte Bild also auch ein Bildsegment direkt bearbeiten wollen. Wählen Sie hierfür aus dem Menü Befehle/Bild in Fireworks optimieren.... Das Bild wird in das Optimize-Modul (eine Version des Exportassistenten) von Fireworks geladen und kann dort neu eingestellt werden: Bildformat, Bildgröße und -proportionen oder die Einstellungen eines animierten Gif. Klicken Sie am Ende auf Aktualisieren, um die Änderungen zu sichern und danach in Dreamweaver anzuzeigen. Auch animierte Gifs lassen sich von Dreamweaver aus modifizieren. Die Vorgehensweise ist dabei dieselbe wie beim Bearbeiten einzelner Bilder. Sie haben also die Wahl zwischen Bearbeiten und Optimieren. Als besonders interessant erweisen sich dabei die Möglichkeiten der Einstellung von Autoclipping und Autodifferenz sowie der Einsatz des Exportassistenten, um Animationen auf eine bestimmte Dateigröße hin zu optimieren. Aktualisierung von Dreamweaver HTML in Fireworks Durch die Quelldatei-Informationen in den Design Notes ist es sogar möglich, Dreamweaver-HTML zu editieren, ohne überhaupt Dreamweaver zu starten. Mit dem Fireworks-Befehl Datei: HTML aktualisieren... können Sie direkt die HTML-Datei auswählen, in der der aktualisierte HTML- und/oder Javascript- Code eingesetzt werden soll. Auch die verknüpften Bilder werden dabei aktualisiert. Interaktive Elemente: Hotspots und Schaltflächen Das Erstellen und Editieren von Imagemaps mit Hotspots erfolgt direkt in den Anwendungen: entweder in Fireworks oder in Dreamweaver. Das Erstellen und Editieren interaktiver Schaltflächen mit Mouseover-Effekten funktioniert ähnlich wie das Bearbeiten von Bildtabellen und Bildern. Dabei haben Sie die Wahl, die Objekte komplett mit DHTML in Fireworks zu erstellen oder aber in Dreamweaver aufzubauen und zu verknüpfen. Die interaktiven Bilder sind entweder Rollover-Bilder (up, over) oder Navigationsleisten (up, over, down, overdown). Wenn Sie eine Schaltfläche in Fireworks erstellt haben, exportieren Sie die HTML- und Bilddaten und fügen den HTML-Code wie oben beschrieben in Dreamweaver ein. Worflow-Features funktionieren nur mit guter Planung Die neuen Workflow-Features und integrierten Programme gaukeln gerne eine Welt vor, in der alles plötzlich total super-easy über die Bühne geht. Jedoch ist bei jeder Automatisierung von Workflow-Prozessen in der Praxis äußerste Vorsicht geboten, da bei mangelnder Planung schnell Probleme entstehen: Die Übersicht geht verloren, eine Hand weiß nicht mehr, was die andere tut, Daten werden versehentlich gelöscht etc. Oft vernachlässigt man auch die Tatsache, dass die Anzahl der Fehlerquellen mit

7 Komplexität und Umfang eines Projekts sowie Anzahl der Teilnehmer und Prozessvorgaben steigt. Um diese zu minimieren, bedarf es eines signifikanten Aufwands an planerischen und administrativen Ressourcen. Letztendlich muss es immer noch eine kompetente Person im Projekt geben, die weiß, wie und warum die entsprechenden Voreinstellungen gemacht werden, und zur Not manuelle Workarounds findet. Joerg Kilian SBO 06/01 86