Dass dieser Workshop überhaupt geschrieben wird, ist bereits die Überraschung an sich. Nicht wenige Experten hatten Macromedias Grafikwerkzeug bereits abgeschrieben. Zu stark war die Konkurrenz von Photoshops und Illustrator. Wo sollte da noch Platz für Fireworks sein? Fireworks sucht seine neue Rolle im Adobe-CS3-Paket und findet sie bei der schnellen Herstellung von Website Dummys. Das wichtigste Feature hierbei: die Masterpages.
Doch es anders. Nach intensiven Diskussionen mit seinen Macromedia-Kollegen empfahl Chefentwickler Adobe, Fireworks zu behalten und im neuen Paket mitzunehmen. Der Grund: Fireworks ist das jüngste Desktop-Produkt bei Macromedia und hatte die modernste Engine. So lässt sich zum Beispiel das Interface von Fireworks mit Hilfe von Komponenten ausdehnen, die in Flash produziert und mit ActionScript programmiert werden. Doch dazu an anderer Stelle mehr.
Fireworks kann auch die Kopiermodi der Photoshop-Ebenen bearbeitbar halten
Die neue Rolle für Fireworks war schnell umrissen. Das Tool musste auf jeden Fall mehr für den Web-Export leisten als die internen Photoshop-Funktionen alias ImageReady. Und so konzentrierte man sich auf einen Arbeitsschritt, der vor allem Gestaltern mit wenig Web-Erfahrung entgegen kommen soll: die schnelle Erstellung von Website-Prototypen.
PSD-Import
Das Prinzip ist simpel. Firewoks veröffentlicht rudimentäre Webseiten, die nur aus zwei Teilen bestehen, Einem grafischen Hintergrund und einem so genannten Web-Layer, der die Interaktivität trägt, also Formular-Elemente, Hyperlinks, Hotspots oder RollOvers. Die Seiten sind natürlich viel zu groß für eine Live-Schaltung im Netz, sie eignen sich aber gut um mit Kunden oder Kollegen übers Internet hinweg Designs zu besprechen und zu verbessern. Erst wenn der endgültige Entwurf verabschiedet wird, beginnt die Feinarbeit mit Slicing und Kompression in Photoshop und die Nachbearbeitung in Dreamweaver.
Legen Sie zur Übung eine Photoshop-Datei an. Sie besitzt einen grafischen Hintergrund mit einigen Elementen, vielleicht mit einem Rahmen und einem Logo. Außerdem gibt es eine Reihe von Content-Ebenen, die Bilder oder Texte enthalten. Speichern Sie die PSD-Datei, starten Sie Fireworks CS3 und öffnen Sie das File dort.
In der Grundeinstellung werden alle grafischen Effekte bearbeitbar gehalten, wenn Fireworks das kann. Das gilt für die meisten Kopiermodi bei den Ebenen und für einige klassische Ebeneneffekte wie Schlagschatten, Glow oder Bevel. Kann Fireworks den Effekt nicht auflösen, rastert er das Ergebnis.
Wenn modifizierter Text zu den Schmuckelementen ihres Designs gehört, müssen Sie in den Voreinstellungen umschalten
Auch Texte bleiben in der Grundeinstellung bearbeitbar. Fireworks kann aber Texte nicht biegen wie Photoshop. So geht ein solcher Effekt beim Import verloren. Ist das Erscheinungsbild wichtiger als die Modifizierbarkeit, dann gehen Sie auf „Bearbeiten/Voreinstellungen/Importieren“ und schalten die Bearbeitbarkeit dort ab. Schließen Sie das Dokument ohne zu speichern und öffnen Sie die PSD-Datei dann erneut. Der gebogene Text erscheint nun als Pixelbild.
Ebenen und Seiten
Die Tatsache, dass Fireworks die PS-Ebenen erhält, führt dazu, dass man die vordefinierten Inhaltselemente sichtbar und unsichtbar machen kann. Dupliziert man also die sichtbare Seite, dann kann man durch Veränderung der Ebenen Sichtbarkeit zwei unterschiedliche Dokumente erzeugen.
Und exakt hier steckt der Kern der neuen Möglichkeiten von Fireworks. Wenn zur rechten nicht sichtbar, öffnen Sie das Bedienfeld „Seiten“ oder drücken Sie „F5“. Klicken Sie doppelt auf den Seitenamen und entfernen Sie das Leerzeichen, so dass „Seite1“ übrig bleibt. Nun wählen Sie den kleinen Pfeil rechts oben am Bedienfeld und wählen die Option „Duplizieren“ zwei Mal hintereinander.
Sie sehen: Fireworks erstellt neue Seiten und gibt denen gleich eine fortlaufende Benennung, nämlich Seite1, Seite2 und Seite3. Schon jetzt können wir die einzelnen Ebenen in jeder Seite modifizieren und mit einem einzigen Export-Dialog alle drei HTML-Seiten veröffentlichen. Hier beginnt der Spaß aber erst. Fireworks kennt ein mächtiges Instrument – die Masterpages – mit denen Elemente, die auf allen Seiten erscheinen, zentral gesteuert werden.
Seiten, die mit einer Masterseite verknüpft wurden, erhalten eine zusätzliche Masterseitenebene
Klicken Sie also die Seite 1 an. Wählen Sie erneut den kleinen Pfeil rechts oben und entscheiden Sie sich nun für den Begriff „“Als Masterseite festlegen“. Die nicht ausgewählte Masterebene erscheint nun immer grau statt weiß. Um ihre beiden Folgeseiten mit dieser Masterpage zu verknüpfen, klicken Sie im Seiten-Bedienfeld links neben der jeweiligen Seite auf das Symbol eines Kettenglieds.
Wechseln Sie nun zur Ebenenansicht von „Seite 2“. Sie werden feststellen, dass hier nun zwei Sätze mit identischen Inhalten zu finden sind. Zum einen die „Ebene“ zum anderen die „Masterseitenebene“. Letztere ist durch Vorhängeschlösser gesperrt. Das heißt aber nicht, dass man sie nicht bearbeiten kann. Vielmehr ist es eine Warnung. Eine Veränderung der Masterseitenelemente wirkt sich auf alle Seiten aus, die an dieser Masterseite hängen.
Die „Ebene“ ist also das individuelle Erscheinungsbild der jeweiligen Seite. Schalten Sie nun auf der Masterseite alles aus, was Sie als „Inhalt“ definiert haben. Und dann gehen Sie in die „Ebene“ der jeweiligen Seite und schalten dort die Sichtbarkeit für alle Ebenen aus. So dann reaktivieren Sie eine einzige Inhaltsebene. Natürlich auf jeder Seite eine andere.
Interaktion
Wenn Sie nun die Seiten durchklicken, haben wir bereits eine Miniwebsite erzeugt. Verlangt der Kunde eine Änderung im Navigationsbereich, im Header oder Logo, genügt eine Modifikation für alle Seiten.
Fehlt noch der interaktive Mehrwert. Hier ist Fireworks für Designer einfacher zu verstehen, als ImageReady und bietet mit dem großen Bereich Formularelemente auch einiges mehr. Für diesen ersten Workshop konzentrieren wir uns einfach auf eine Verlinkung zwischen den Seiten.
Als Träger der Links haben wir drei Texte definiert: Seite 1, Seite 2, und Seite 3. Diese sind im Kopf der Seite zu sehen. Sollten Sie in Ihrem Layout noch nicht existieren, umso besser. Gehen Sie auf die Masterpage und wählen Sie das Textwerkzeug. Scheiben Sie die Texte; Fireworks erstellt für Sie eine neue Ebene, die natürlich in allen Seiten sichtbar sein wird.
Das Hotspot-Werkzeug arbeitet automatisch auf der Web-Ebene der jeweiligen Seite
Nun wechseln Sie auf die Web-Ebene der Masterpage. Nehmen Sie das Hotspot-Werkzeug, ziehen Sie einfache Rechtecke über die Texte und verlinken diese über den Eigenschaftsinspektor mit Seite1.htm und den beiden anderen. Die Links dafür hat Fireworks schon bereitgestellt.
Gehen Sie nun auf „Datei/Exportieren“, deaktivieren Sie im Dialog vor allem die Option „Nur aktuelle Seite“ und betrachten Sie ihren ersten Rapid-Dummy im Browser.
Nun müssen Sie selbst entscheiden, wie häufig ein solches Arbeitsszenario für Sie relevant ist. Wer nur drei oder vier Websites im Jahr veröffentlicht und wessen Kunde/Mitarbeiter, mit dem das Design diskutiert werden soll, im Nebenzimmer sitzt, der wird die Einarbeitung in Fireworks zu Recht scheuen. Allen anderen bietet sich eine spannende neue Option im CS3-Paket. ™
