Fireworks & Dreamweaver kombinierenTeamgeist
Webdesign-Spezialist Fireworks
Fireworks & Dreamweaver kombinieren
Viele betrachten Fireworks als nette Dreingabe zu Dreamweaver und Flash im großen Macromedia-Studio-Paket. Da unterschätzen sie das Grafikprogramm ganz gewaltig: Fireworks ist ein Webdesign-Spezialist, der gleichermaßen mit Bitmap- und Vektorelementen umgehen kann und sich als HTML-Profi erweist. Schaltflächen, Menüs, sogar komplette Seiten lassen sich entwerfen, mit Rollover-Effekten und Links versehen, Ladezeit sparend zerteilen und schließlich nahtlos als eine HTML-Seite zusammensetzen.
In der Praxis erspart Ihnen das manchen Start Ihres HTML-Editors, macht ihn sogar fast überflüssig. Dennoch würden wir Ihnen nicht raten, auf die Nachbearbeitung der Seite zu verzichten ? der grafiklastige Entwurf ist alles andere als suchmaschinenkompatibel, Meta-Tags und Seitentitel fehlen ganz. Und schlichter und schlanker wird die Seite ebenfalls nur durch die sinnvolle Kombination von Grafikprogramm und HTML-Editor. Schritt für Schritt zeigt Internet Pro am Beispiel einer Firmen-Webseite, wie es geht. Eine in Fireworks gebaute Beispiel-Website finden Sie unter
listings.internet-pro.de.
Seitenentwurf anlegen
Fireworks & Dreamweaver kombinieren
Über Datei, Neu oder [Strg N] öffnen Sie ein neues Fireworks-Dokument. Es sollte etwa 750×500 Pixel groß sein, wenn Sie sich am sichtbaren Bereich eines 15-Zoll-Monitors orientieren, oder 950×600 Pixel, wenn Sie für 17-Zoll-Monitore entwickeln. Entscheiden Sie sich für eine passende Hintergrundfarbe und stellen Sie die Auflösung der Datei auf 72 Pixel pro Zoll ? höhere Werte brauchen Sie nur für den Druck, nicht aber für Webseiten. Als Orientierungshilfe für die Gestaltung können Sie über Ansicht, Raster, Raster zeigen das Gitternetz einblenden.
Zeichnen Sie nun mit den Fireworks-Werkzeugen Ihren Seitenentwurf: Malen Sie Farbflächen, Linien, setzen Sie Titel, Bilder und Schlagzeilen ein, positionieren Sie Navigationselemente. Achten Sie schon in dieser Phase auf Abstände und Aufteilung: Wenn sich viele Bereiche Ihres Entwurfes überlappen und Sie viele kleine Elemente einsetzen, wird später eine HTML-Seite mit extrem kompliziertem, kleinteiligem Tabellen-Layout entstehen. Halten Sie die Struktur daher so einfach wie möglich.
Vorder- und Hintergründiges
Fireworks & Dreamweaver kombinieren
Stapeln, Ausrichten und Gruppieren sind Techniken, die Sie beim Arbeiten mit einem ganzseitigen Entwurf häufig anwenden müssen. Wenn Sie Fireworks die Reihenfolge überlassen, liegt das zuletzt hinzugefügte Element ganz oben auf dem Objektstapel und verdeckt darunter liegende. Das ändern Sie, indem Sie das gewünschte Element markieren und den Weg über das Kontextmenü gehen: Klicken Sie Anordnen und anschließend
In den Vordergrund, In den Hintergrund oder Nach vorne bringen beziehungsweise Nach hinten stellen, um es um je eine Position verschieben. Zum Positionieren mehrerer Elemente finden Sie im Menü Modifizieren den Befehl Ausrichten. Um beispielsweise Buttons einer Navigationsleiste exakt zu platzieren, markieren Sie sie mit gedrückter Umschalt-Taste und wählen Modifizieren, Anordnen, Links sowie Höhen verteilen.
Ebenfalls hilfreich: Vermindern Sie die Zahl von Einzelobjekten, indem Sie Zusammengehöriges gruppieren. Sinnvoll ist das zum Beispiel bei Formen und Schriften eines Logos, deren wohlkonstruierte Anordnung damit nicht mehr durcheinander geraten kann. Zum Gruppieren markieren Sie mit Mausklicks und gedrückter Umschalt-Taste die gewünschten Elemente. Klicken Sie im Menü auf Modifizieren, Gruppieren ? damit werden die ausgewählten Objekte zu einem einzigen und lassen sich gemeinsam verschieben und skalieren. Mit
Modifizieren, Gruppierung aufheben machen Sie diesen Schritt wieder rückgängig, falls Sie doch ein Einzelobjekt herausnehmen müssen.
Seitenentwurf aufteilen
Fireworks & Dreamweaver kombinieren
Der grafische Rahmen Ihrer Beispielseite ist fertig. Links eine Navigationsleiste, oben das Logo und einige Produktbilder, unten eine Fußzeile. Im leeren Bereich unten rechts soll später der eigentliche Inhalt Platz finden. Der fehlt bislang ? ebenso Funktionen wie Hyperlinks und Rollover.
Diese könnten Sie jetzt zwar einbauen, aber sinnvoller ist es, den Entwurf zunächst in verschiedene Funktionsbereiche aufzuteilen: Seitenkopf, Seitenfuß und Inhaltsteil in der Mitte. Weshalb diese Maßnahme? Zum einen, weil Seitenkopf und -fuß eine feste Höhe haben. Im Mittelteil findet später mal wenig, mal viel Inhalt Platz ? er muss also so gestaltet sein, dass er sich problemlos nach unten ausdehnen kann. Mit den standardmäßigen, absoluten Höhen des Fireworks-Entwurfs geht das nicht. Der zweite wichtige Grund: Mehrere untereinander gesetzte Tabellen werden vom Browser schneller angezeigt als eine große, in die der Inhalt einer ganzen Seite gezwängt wird. Und genau so ein Monstrum würde Ihnen Fireworks erstellen, wenn Sie den kompletten Seitenentwurf als Seite speichern.
So zerteilen Sie Ihren Entwurf: Wählen Sie das Zuschneidewerkzeug in der Werkzeugleiste. Schneiden Sie damit pixelgenau den Seitenkopf aus und bestätigen Sie mit [Eingabe]. Speichern Sie den Seitenkopf als PNG-Datei. Kehren Sie in das Dokumentfenster zurück und klicken Sie Bearbeiten, Rückgängig, um wieder den ganzen Seitenentwurf zu sehen. Schneiden Sie nun exakt den Seitenfuß aus ? am besten gleich mit einigen Pixel Luft nach oben hin, die später den notwenigen Abstand zu eingestellten Texten gewährleisten. Speichern Sie auch den Seitenfuß über Datei, Speichern als PNG-Datei. Stellen Sie über Bearbeiten, Rückgängig erneut das ganze Dokument wieder her, schneiden Sie den Mittelteil aus und speichern ihn als PNG-Datei.
Kopf- und Fußleiste ausbauen
Fireworks & Dreamweaver kombinieren
Gezielt können Sie nun an den Einzelteilen weiter arbeiten: Öffnen Sie beispielsweise die Fußleiste (fuss.png auf der Heft-CD) und verlinken Sie die Schriftzüge mit den passenden HTML-Seiten. Dafür klicken Sie das Hotspot-Werkzeug und ziehen mit gedrückter Maustaste über dem gewünschten Text eine Form auf. Weisen Sie dann dem Hotspot im Eigenschafteninspektor ein Link-Ziel und einen Alt-Text zu.
Auch den geplanten Seitenkopf könnten Sie nach dem obigen Muster mit Links versehen und später als HTML-Tabelle exportieren. Dann bestünde er allerdings aus einem einzigen Bild mit Hotspots ? weder ladezeitfreundlich noch bearbeitbar.
Das geplante Suchfeld und der Warenkorb-Button ließen sich so gar nicht unterbringen. Deswegen gehen Sie hier einen anderen Weg: Sie zerteilen den Seitenkopf in Segmente ? Einzelteile, die den später von Fireworks generierten HTML-Zellen entsprechen.
Wer sich mit Tabellen auskennt, dem wird eine sinnvolle Einteilung nicht schwer fallen: Klicken Sie das Segmentwerkzeug und ziehen Sie beispielsweise über dem Logo ein Rechteck auf. Gliedern Sie auch die restliche Fläche ? bevorzugterweise so, dass eine klare Struktur mit gleich hohen Elementen entsteht.
Möchten Sie einzelne Schnittlinien bearbeiten, führen Sie den Cursor über die Segmentlinie: Er verändert sich, und Sie können Versprünge ausmerzen, die sonst jeweils eine eigene HTML-Zelle ergeben hätten.
Von Grafik zu HTML
Fireworks & Dreamweaver kombinieren
Im Interesse vernünftiger Ladezeiten sollten das Optimieren und Exportieren zusammengehören. Bevor Sie also Seitenkopf und -fuß als HTML-Seite speichern, ermitteln Sie das beste Dateiformat für Ihre Segmente. Dazu öffnen Sie mit [F6] die Optimieren-Palette, falls sie ausgeblendet war.
Über die Dropdown-Felder stellen Sie nun für jedes Segment ein Dateiformat und die dazugehörige Kompressionsstufe ein. Möchten Sie mehrere unterschiedliche Einstellungen direkt nebeneinander begutachten, aktivieren Sie über dem Arbeitsfenster die Vorschau 2fach oder 4fach.
Haben Sie über die Optimieren-Palette die richtigen Formate gefunden, gelangen Sie mit [Strg Umschalt R] zum Exportfenster. Dort geben Sie bei Dateityp HTML und Bilder, bei HTML HTML exportieren und bei Segmente Segmente exportieren an. Über einen Klick auf Bilder in Unterordner ablegen erreichen Sie, dass Fireworks Bildeinzelteile im Bildunterordner Ihres Webs speichert ? das schafft Übersicht. Unter Optionen finden Sie weiter gehende Einstellungen zur Benennung der Segmente sowie zum HTML-Stil von Fireworks. Normalerweise können Sie es bei den Standardeinstellungen belassen, bevor Sie mit Speichern bestätigen.
Rollover-Navigation
Fireworks & Dreamweaver kombinieren
Den Mittelteil Ihres Entwurfs haben Sie bislang außen vor gelassen. Bei diesem müssen Sie berücksichtigen, dass er später wechselnd lange Inhalte enthält. Fireworks ist jedoch weniger flexibel und generiert beim Export immer Tabellen mit festen Höhen. Sie verzichten also kurzerhand auf den Export. Stattdessen ziehen Sie passende Segmente über den Navigationsbuttons auf, markieren nacheinander jedes Einzelteil und wählen im Kontextmenü Ausgewähltes Segment exportieren. Wenn Sie die Buttons anschließend noch umfärben und wieder einzeln exportieren, haben Sie in Windeseile das Material für die Erstellung von Rollover-Buttons in Dreamweaver zusammen.
Natürlich hätten Sie die Navigationsleiste auch in Fireworks anlegen können. Allerdings wäre dann wieder der Export als Seite fällig gewesen ? mit den genannten Einschränkungen. Die generierte Tabelle lässt sich natürlich umbauen, aber eine neue in Dreamweaver zu erstellen geht allemal schneller.
Seite in Dreamweaver ausbauen
Fireworks & Dreamweaver kombinieren
Aus den drei Funktionsbereichen des Entwurfs entsteht nun in Dreamweaver wieder eine Einheit. Öffnen Sie dazu zunächst die HTML-Seite mit dem Seitenkopf ? im Beispiel kopf.htm. Wenn Sie die Tabelle markieren, sehen Sie im Eigenschafteninspektor, dass Dreamweaver das Fireworks-HTML anhand der Kommentare im Quelltext erkennt. Im Eigenschafteninspektor unter Ausrichten können Sie die Kopftabelle auf der Seite zentrieren.
Sehen Sie sich die Tabelle noch einmal genau an: Prüfen Sie noch einmal, an welchen Stellen Sie Grafikelemente entfernen und stattdessen Hintergrundfarben oder Bilder einsetzen können. Fügen Sie Funktionen wie das Formularfeld oder den Warenkorb-Link hinzu und vergessen Sie auch nicht, der Seite einen aussagekräftigen Seitentitel und Metatags (über Einfügen, HTML, Headtags, Meta) zu geben. Wer es ganz genau nimmt, benennt die Grafikdateien um: countrylogo.gif ist als Titel in jedem Fall aussagekräftiger als das von Fireworks generierte seite_r2_c1.gif.
Unter der Kopftabelle findet der eigentliche Inhaltsteil seinen Platz. Hier hatten Sie darauf verzichtet, Fireworks-HTML zu exportieren, und setzen stattdessen über Einfügen, Tabelle eine in der Breite passende Tabelle darunter. Sie ist in drei Spalten gegliedert: Die rechte erhält einen Linienhintergrund und ist eine Art Abstandshalter, damit Texte nicht bis ganz an den Rand laufen. Die mittlere Spalte ist die eigentliche Inhaltszelle und kann später mit einer weiteren Tabelle gegliedert werden.
Die linke Tabellenzelle enthält einen Hintergrund, den Befehl valign=”top” und eine weitere Tabelle mit den Navigationsbuttons. Dieses Verfahren sorgt dafür, dass die Navigation ihre Position behält, ganz gleich wie hoch die umliegende Zelle durch Inhalte der mittleren Spalte gedehnt wird.
Nun fehlt zu guter Letzt nur noch die Tabelle mit der Fußleiste: Klicken Sie auf die entsprechende Position der Seite und wählen im Menü Einfügen, Grafikobjekte, Fireworks-HTML. Selektieren Sie die passende Seite (im Beispiel fuss.htm).
Bestätigen Sie mit Ok, und Dreamweaver importiert die Fußleiste mitsamt der Imagemap-Koordinaten.
Fehlerquellen
Fireworks & Dreamweaver kombinieren
Gelingt es Ihnen nicht, die Tabellen nahtlos aneinander zu stellen? Grund dafür sind vermutlich die Referenzzeilen, die Fireworks über und neben jeder Tabelle anlegt. Mit ihnen werden die Spalten auf Breite und die Zellen auf Höhe gehalten, auch wenn noch kein Inhalt vorhanden ist.
Wenn sich der Sicherheitsmechanismus als Störfaktor erweist, löschen Sie die Platzhalter-Zeile zwischen und . Entfernen Sie auch die letzte Zelle jeder Zeile ? sie besteht ohnehin nur aus einem ein Pixel breiten Platzhalter.
Weitere mögliche Fehlerquellen können die folgenden Aspekte sein:
– Haben Sie die Grafikbestandteile wirklich ganz exakt zugeschnitten? Kontrollieren Sie, wie breit die Tabellen und ihre Grafikbestandteile tatsächlich jeweils sind. Ist ein Bild zu groß, markieren Sie es und wählen Sie aus dem Kontextmenü Bearbeiten mit Fireworks, um es im Grafik-Editor anzupassen.
– Erscheinen Ihnen die Fireworks-Tabellen unnötig verschachtelt? Prüfen Sie im Ebenen -Fenster von Fireworks bei Webebene nach, ob Sie dort noch leere Segmente sehen. Diese haben Sie vielleicht im Arbeitsfenster gelöscht, in der Web-Ebene blieben sie jedoch stehen und wurden mit exportiert. Löschen Sie diese Elemente auch in der Web-Ebene und exportieren Sie die Seite erneut.