Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der das Bild angezeigt werden soll. Führen Sie dann einen der folgenden Schritte aus:
Zuletzt aktualisiert am
25. April 2024
Durch die Kombination von Fireworks und Dreamweaver entsteht ein reibungsloser Arbeitsablauf für die Bearbeitung, Optimierung und Platzierung von Webgrafiken in HTML-Seiten.
Anmerkung
Diese Funktion wird in Adobe Dreamweaver-Versionen nicht unterstützt.
Fireworks-Bilds einfügen
Dreamweaver und Fireworks enthalten viele gemeinsame Funktionen zum Bearbeiten von Dateien, u. a. Änderungen von Verknüpfungen, Imagemaps. Tabellensegmenten. Zusammen bieten die beiden Anwendungen einen reibungslosen Arbeitsablauf für die Bearbeitung, Optimierung und Platzierung von Webgrafikdateien in HTML-Seiten.
Sie können eine aus Fireworks exportierte Grafik mit dem Befehl „Bild einfügen“ direkt in einem Dreamweaver-Dokument einfügen oder Sie erstellen eine neue Fireworks-Grafik aus einem Dreamweaver-Bildplatzhalter.
Wählen Sie „Einfügen“ > „Bild“ aus.
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bild“ oder ziehen Sie das Bild ins Dokument.
Navigieren Sie zur gewünschten aus Fireworks exportierten Datei und klicken Sie auf „OK“ (Windows) bzw. „Öffnen“ (Mac).
Anmerkung
Wenn sich die Fireworks-Datei nicht in der aktuellen Dreamweaver-Site befindet, wird eine Meldung mit der Frage angezeigt, ob Sie die Datei in den Stammordner kopieren möchten. Klicken Sie auf „Ja“.
Fireworks-Bilder oder -Tabellen in Dreamweaver bearbeiten
Wenn Sie ein Bild oder ein Bildsegment öffnen und bearbeiten, das Teil einer Fireworks-Tabelle ist, startet Dreamweaver Fireworks. In Fireworks wird dann die PNG-Datei geöffnet, aus der das Bild bzw. die Tabelle exportiert wurde.
Anmerkung
Dabei wird vorausgesetzt, dass Fireworks als primärer externer Bildeditor für PNG-Dateien festgelegt wurde. Fireworks wird häufig auch als Standardeditor für JPEG- und GIF-Dateien definiert, Sie können allerdings auch Photoshop als Standardeditor für diese Dateitypen festlegen.
Wenn das Bild Teil einer Fireworks-Tabelle ist, kannst du die gesamte Fireworks-Tabelle zur Bearbeitung öffnen, solange der <!--fw table--> Kommentar im HTML-Code vorhanden ist.Wenn Sie die PNG-Quelldatei aus Fireworks mit der Einstellung „HTML und Bilder in Dreamweaver-Stil“ in eine Dreamweaver-Site exportiert haben, wird der Fireworks-Tabellenkommentar automatisch in den HTML-Code eingefügt.
Öffnen Sie in Dreamweaver den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist.
Wählen Sie das Bild oder das Bildsegment aus, indem Sie darauf klicken.
Wenn Sie ein aus Fireworks exportiertes Bild auswählen, erkennt der Eigenschafteninspektor die Auswahl als Fireworks-Bild oder -Tabelle und zeigt den Namen der PNG-Quelldatei an.
Führen Sie einen der folgenden Schritte aus, um Fireworks für die Bearbeitung zu starten:
Klicken Sie im Eigenschafteninspektor auf „Bearbeiten“.
Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und doppelklicken Sie auf das ausgewählte Bild.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) auf das ausgewählte Bild und wählen Sie aus dem Kontextmenü „Mit Fireworks bearbeiten“ aus.
Anmerkung
Wenn Fireworks die Quelldatei nicht finden kann, werden Sie aufgefordert, die PNG-Quelldatei manuell zu suchen. Wenn Sie mit der Fireworks-Quelldatei arbeiten, werden die Änderungen sowohl in der Quelldatei als auch in der exportierten Datei gespeichert. Andernfalls wird nur die exportierte Datei aktualisiert.
Bearbeiten Sie die PNG-Quelldatei in Fireworks und klicken Sie auf „Fertig“.
Fireworks speichert die Änderungen in der PNG-Datei und exportiert das aktualisierte Bild (oder HTML und Bilder). Danach wechselt der Fokus zurück zu Dreamweaver. In Dreamweaver wird das aktualisierte Bild bzw. die aktualisierte Tabelle angezeigt.
Ein Tutorial zur Integration von Dreamweaver und Fireworks finden Sie unter www.adobe.com/go/vid0188_de.
Fireworks-Bilder in Dreamweaver optimieren
Sie können mit Dreamweaver schnell Änderungen an Fireworks-Bildern und -Animationen vornehmen. Sie können in Dreamweaver die Optimierungs- und Animationseinstellungen sowie die Größe und den Bereich eines exportierten Bilds ändern.
Wählen Sie das gewünschte Bild in Dreamweaver und führen Sie einen der folgenden Schritte aus:
Wählen Sie „Befehl“ > „Bild optimieren“ aus.
Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten.
Nehmen Sie im Dialogfeld „Bildvorschau“ Änderungen vor:
Klicken Sie auf die Registerkarte Optionen, um die Optimierungseinstellungen zu ändern.
Um Größe und Bereich des exportierten Bilds zu bearbeiten, klicken Sie auf die Registerkarte „Datei“.
Klicken Sie abschließend auf „OK“.
Fireworks zum Ändern von Dreamweaver-Bildplatzhaltern verwenden
Sie können ein Platzhalterbild in einem Dreamweaver-Dokument erstellen und dann Fireworks starten und eine Grafik oder Fireworks-Tabelle erstellen, um den Platzhalter zu ersetzen.
Wenn Sie anhand eines Bildplatzhalters ein neues Bild erstellen möchten, müssen Sie Dreamweaver und Fireworks in Ihrem System installiert haben.
Vergewissern Sie sich, dass Fireworks bereits als Bildeditor für PNG-Dateien festgelegt wurde.
Klicken Sie im Dokumentfenster auf den Bildplatzhalter, um ihn auszuwählen.
Starten Sie Fireworks im Modus „In Dreamweaver weiterbearbeiten“, indem Sie einen der folgenden Schritte ausführen:
Klicken Sie im Eigenschafteninspektor auf „Erstellen“.
Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Mac) und doppelklicken Sie auf den Bildplatzhalter.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) auf den Bildplatzhalter und wählen Sie anschließend „Bild in Fireworks erstellen“.
Bearbeiten Sie das Bild mit Fireworks-Optionen.
Fireworks erkennt folgende Einstellungen für Bildplatzhalter, die Sie möglicherweise beim Arbeiten mit dem Bildplatzhalter in Dreamweaver festgelegt haben: Bildgröße (entspricht der Größe der Fireworks-Arbeitsfläche), Bild-ID (in Fireworks als Standarddokumentname der Quelldatei und erstellten Exportdatei verwendet) und Textausrichtung. Fireworks erkennt außerdem Hyperlinks und bestimmtes Verhalten (z. B. „Bild austauschen“, Popup-Menü und „Text einstellen“), die Sie dem Bildplatzhalter beim Arbeiten in Dreamweaver zugewiesen haben.
Anmerkung
Obwohl in Fireworks zu einem Bildplatzhalter hinzugefügte Hyperlinks nicht angezeigt werden, werden sie beibehalten. Wenn Sie in Fireworks einen Hotspot zeichnen und einen Hyperlink hinzufügen, wird der Hyperlink, den Sie dem Bildplatzhalter in Dreamweaver hinzugefügt haben, nicht gelöscht. Wenn Sie jedoch in Fireworks im neuen Bild ein Segment erstellen, löscht Fireworks den Hyperlink im Dreamweaver-Dokument beim Ersetzen des Bildplatzhalters.
Fireworks erkennt die folgenden Einstellungen für Bildplatzhalter nicht: Bildausrichtung, Farbe, V-Abstand und H-Abstand sowie Imagemaps. Sie sind im Eigenschafteninspektor für den Bildplatzhalter deaktiviert.
Wenn Sie fertig sind, klicken Sie auf „Fertig“, um die Speicheraufforderung anzuzeigen.
Wählen Sie im Textfeld „Speichern in“ den Ordner aus, den Sie als lokalen Ordner für die Dreamweaver-Site definiert haben.
Wenn Sie den Bildplatzhalter beim Einfügen im Dreamweaver-Dokument benannt haben, zeigt Fireworks diesen Namen im Feld „Dateiname“ an. Sie können den Namen ändern.
Klicken Sie auf „Speichern“, um die PNG-Datei zu speichern.
Nun wird das Dialogfeld „Exportieren“ angezeigt. In diesem Dialogfeld können Sie das Bild als GIF- oder JPEG-Datei exportieren. Segmentierte Bildern können als HTML-Dateien und Bilder exportiert werden.
Wählen Sie unter „Speichern in“ den lokalen Ordner der Dreamweaver-Site aus.
Im Feld „Name“ wird automatisch der Name angezeigt, den Sie für die PNG-Datei verwendet haben. Sie können den Namen ändern.
Typ Speichern unter: Wählen Sie im Bereich „Dateityp“ den gewünschten Dateityp für den Export aus, wie beispielsweise „Nur Bilder“ oder „HTML und Bilder“.
Klicken Sie auf „Speichern“, um die exportierte Datei zu speichern.
Die Datei wird gespeichert und Sie kehren Sie zu Dreamweaver zurück. Im Dreamweaver-Dokument wird der Bildplatzhalter durch die exportierte Datei oder Fireworks-Tabelle ersetzt.
Fireworks-Popup-Menüs
Mit Fireworks können Sie schnell und einfach CSS-basierte Popup-Menüs erstellen.
Die mit Fireworks erstellten Popup-Menüs sind erweiterbar, lassen sich schnell herunterladen und bieten darüber hinaus folgende Vorteile:
Die Menüelemente können von Suchmaschinen indiziert werden.
Die Menüelemente können von Bildschirmlesegeräten gelesen werden, sodass die Barrierefreiheit Ihrer Seiten verbessert wird.
Der von Fireworks erzeugte Code ist mit Standards konform und kann überprüft werden.
Sie können Fireworks-Popup-Menüs mit Dreamweaver oder Fireworks, aber nicht mit beiden Programmen gleichzeitig bearbeiten. In Dreamweaver vorgenommene Änderungen bleiben in Fireworks nicht erhalten.
Fireworks-Popup-Menüs in Dreamweaver bearbeiten
Sie können ein Popup-Menü in Fireworks 8 oder höher erstellen und dann mit Dreamweaver oder Fireworks (durch Roundtrip-Bearbeitung), nicht jedoch mit beiden Programmen bearbeiten. Wenn Sie Ihre Menüs in Dreamweaver und anschließend in Fireworks bearbeiten, gehen die vorherigen Änderungen mit Ausnahme von Textinhalten verloren.
Wenn Sie Menüs lieber in Dreamweaver bearbeiten, können Sie das Popup-Menü in Fireworks erstellen und anschließend sämtliche Anpassungen in Dreamweaver durchführen.
Wenn Sie Menüs lieber in Fireworks bearbeiten, können Sie in Dreamweaver die Roundtrip-Bearbeitung verwenden. Sie sollten die Menüs jedoch nicht direkt in Dreamweaver bearbeiten.
Wählen Sie die Fireworks-Tabelle, die das Popup-Menü enthält, in Dreamweaver aus und klicken Sie im Eigenschafteninspektor auf „Bearbeiten“.
Die PNG-Quelldatei wird in Fireworks geöffnet.
Bearbeiten Sie das Menü in Fireworks mit dem Popup-Menü-Editor und klicken Sie dann in der Fireworks-Symbolleiste auf „Fertig“.
Fireworks sendet das bearbeitete Popup-Menü zurück zu Dreamweaver.
Wenn Sie ein Popup-Menü in Fireworks MX 2004 oder früher erstellt haben, können Sie es in Dreamweaver im Dialogfeld „Popup-Menü anzeigen“ bearbeiten. Dies können Sie über das Bedienfeld „Verhalten“ aufrufen.
In Fireworks MX 2004 oder früher erstellte Popup-Menüs bearbeiten
Wählen Sie in Dreamweaver den Hotspot oder das Bild aus, der bzw. das das Popup-Menü auslöst.
Klicken Sie im Bedienfeld „Verhalten“ (Umschalt+F3) in der Aktionsliste auf „Popup-Menü anzeigen“.
Nehmen Sie im Dialogfeld „Popup-Menü“ die gewünschten Änderungen vor und klicken Sie auf „OK“.
Voreinstellungen zum Starten und Bearbeiten von Fireworks-Quelldateien angeben
Wenn Sie Fireworks zum Bearbeiten von Bildern verwenden, werden die Bilder in den Webseiten in der Regel von Fireworks aus einer PNG-Quelldatei exportiert. Wenn Sie eine Bilddatei in Dreamweaver öffnen, um sie zu bearbeiten, öffnet Fireworks automatisch die PNG-Quelldatei und fordert Sie auf, den Speicherort der PNG-Datei anzugeben, wenn diese Datei nicht gefunden werden kann. Sie können in Fireworks Voreinstellungen festlegen, damit Dreamweaver das eingefügte Bild öffnet oder Fireworks die Option anzeigt, um die eingefügte Bilddatei oder Fireworks-Quelldatei jedes Mal zu verwenden, wenn Sie ein Bild in Dreamweaver öffnen.
Anmerkung
Dreamweaver erkennt die Fireworks-Voreinstellungen zum Öffnen und Bearbeiten nur in bestimmten Fällen. Genauer gesagt müssen Sie ein Bild öffnen und optimieren, das nicht zu einer Fireworks-Tabelle gehört und das einen korrekten Design Notes-Pfad zu einer PNG-Quelldatei enthält.
Wählen Sie in Fireworks „Bearbeiten“ > „Voreinstellungen“ (Windows) oder „Fireworks“ > „Voreinstellungen“ (Mac) und klicken Sie dann auf die Registerkarte „Starten und Bearbeiten“ (Windows) oder im Popup-Menü auf „Starten und Bearbeiten“ (Mac).
Geben Sie die Voreinstellungsoptionen an, die verwendet werden sollen, wenn in einer externen Anwendung platzierte Fireworks-Bilder bearbeitet oder optimiert werden:
Immer PNG-Quelldatei verwenden
Öffnet automatisch die PNG-Datei von Fireworks, die in Design Note als Quelle für das platzierte Bild angegeben wurde. Aktualisierungen werden sowohl an der PNG-Datei als auch am entsprechenden platzierten Bild vorgenommen.
Nie PNG-Quelldatei verwenden
Bewirkt, dass das platzierte Fireworks-Bild automatisch geöffnet wird, unabhängig davon, ob eine PNG-Quelldatei vorhanden ist. Änderungen werden nur am platzierten Bild vorgenommen.
Beim Start fragen
Zeigt eine Meldung mit der Frage an, ob die PNG-Quelldatei geöffnet werden soll. Sie können über diese Meldung auch allgemeine Voreinstellungen für das Starten und Bearbeiten angeben.
Fireworks-HTML-Code in einem Dreamweaver-Dokument einfügen
In Fireworks können Sie mit dem Befehl „Exportieren“ optimierte Bilder und HTML-Dateien in ein Verzeichnis innerhalb des Ordners der Dreamweaver-Site exportieren und dort speichern. Anschließend können Sie die Datei in Dreamweaver einfügen. In Dreamweaver können Sie in Fireworks erstellten HTML-Code mit allen zugehörigen Bildern, Segmenten und JavaScript-Codeabschnitten in ein Dokument einfügen.
Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der Sie den Fireworks-HTML-Code einfügen möchten.
Führen Sie einen der folgenden Schritte aus:
Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Fireworks-HTML“.
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie im Popup-Menü die Option „Fireworks-HTML einfügen“.
Klicken Sie auf „Durchsuchen“, um eine neue Fireworks-HTML-Datei auszuwählen.
Wenn Sie die Datei nicht anderweitig verwenden möchten, aktivieren Sie die Option „Datei nach Einfügen löschen“. Das Auswählen dieser Option hat keine Auswirkungen auf die mit der HTML-Datei verknüpfte PNG-Datei.
Anmerkung
Wenn sich die HTML-Datei auf einem Netzlaufwerk befindet, wird sie nicht in den Papierkorb verschoben, sondern endgültig gelöscht.
Klicken Sie auf „OK“, um den HTML-Code mit allen zugehörigen Bildern, Segmenten und JavaScript-Codeabschnitten in das Dreamweaver-Dokument einzufügen.
Fireworks-HTML-Code in Dreamweaver einfügen
Eine schnelle Möglichkeit zum Platzieren von in Fireworks erstellten Bildern und Tabellen in Dreamweaver besteht darin, Fireworks-HTML-Code zu kopieren und dann direkt in einem Dreamweaver-Dokument einzufügen.
Fireworks-HTML-Code kopieren und in Dreamweaver einfügen
Wählen Sie in Fireworks „Bearbeiten“ > „HTML-Code kopieren“.
Ein Assistent führt Sie durch die zum Exportieren des HTML-Codes und der Bilder erforderlichen Einstellungen. Geben Sie bei entsprechender Aufforderung den Ordner der Dreamweaver-Site als Zielordner für die exportierten Bilder an.
Der Assistent exportiert die Bilder in den angegebenen Zielordner und kopiert den HTML-Code in die Zwischenablage.
Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der Sie den HTML-Code einfügen möchten. Wählen Sie dann „Bearbeiten“ > „Fireworks-HTML einfügen“ aus.
Der gesamte HTML- und JavaScript-Code, der den exportierten Fireworks-Dateien zugeordnet ist, wird in das Dreamweaver-Dokument kopiert und alle Hyperlinks zu Bildern werden aktualisiert.
Fireworks-HTML-Code exportieren und in Dreamweaver einfügen
Wählen Sie in Fireworks „Datei“ > „Exportieren“.
Geben Sie den Ordner der Dreamweaver-Site als Zielordner für die exportierten Bilder an.
Wählen Sie im Popup-Menü „Exportieren“ die Option „HTML und Bilder“.
Wählen Sie im Popup-Menü „HTML“ die Option „In Zwischenablage kopieren“ und klicken Sie dann auf „Exportieren“.
Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der der exportierte HTML-Code eingefügt werden soll. Wählen Sie dann „Bearbeiten“ > „Fireworks-HTML Einfügen“.
Der gesamte HTML- und JavaScript-Code, der den exportierten Fireworks-Dateien zugeordnet ist, wird in das Dreamweaver-Dokument kopiert und alle Hyperlinks zu Bildern werden aktualisiert.
In Dreamweaver platzierten Fireworks-HTML-Code aktualisieren
In Fireworks stellt der Befehl „Datei“ > „HTML aktualisieren“ eine Alternative zum Verfahren mit Starten und Bearbeiten dar, um in Dreamweaver platzierte Fireworks-Dateien zu aktualisieren. Mit „HTML aktualisieren“ können Sie eine PNG-Quellbilddatei in Fireworks bearbeiten und dann automatisch den gesamten exportierten HTML-Code und alle Bilddateien in einem Dreamweaver-Dokument aktualisieren. Mit diesem Befehl können Sie Dreamweaver-Dateien auch dann aktualisieren, wenn Dreamweaver nicht ausgeführt wird.
Öffnen Sie die PNG-Quelldatei in Fireworks und nehmen Sie die gewünschten Änderungen vor.
Wählen Sie „Datei“ > „Speichern“.
Wählen Sie in Fireworks „Date“ > „HTML aktualisieren“.
Suchen Sie die Dreamweaver-Datei mit dem HTML-Code, den Sie aktualisieren möchten, und klicken Sie auf „Öffnen“.
Wählen Sie den Ordner aus, in dem Sie die aktualisierten Bilddateien ablegen möchten, und klicken Sie auf „Auswählen“ (Windows) bzw. „Wählen“ (Mac).
Fireworks aktualisiert den HTML- und JavaScript-Code im Dreamweaver-Dokument. Außerdem exportiert Fireworks die zum HTML-Code gehörigen aktualisierten Bilder und platziert sie in den angegebenen Zielordner.
Wenn Fireworks keinen übereinstimmenden HTML-Code zum Aktualisieren finden kann, haben Sie die Möglichkeit, neuen HTML-Code in das Dreamweaver-Dokument einzufügen. Fireworks fügt den JavaScript-Code am Anfang des Dokuments ein und die HTML-Tabelle bzw. die Verknüpfung mit dem Bild am Ende.
Webfotoalbum erstellen
Die Funktion zum Erstellen eines Webfotoalbums ist ab Dreamweaver CS5 veraltet.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
