Benutzerhandbuch Abbrechen

Mit Fireworks und Dreamweaver arbeiten

  1. Dreamweaver-Benutzerhandbuch
  2. Einführung
    1. Grundlagen von responsivem Webdesign
    2. Neue Funktionen in Dreamweaver
    3. Web-Entwicklung mit Dreamweaver – Überblick
    4. Dreamweaver/Häufige Fragen
    5. Tastaturbefehle
    6. Dreamweaver – Systemanforderungen
    7. Übersicht über die Funktionen
  3. Dreamweaver und Creative Cloud
    1. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    2. Creative Cloud-Bibliotheken in Dreamweaver
    3. Photoshop-Dateien in Dreamweaver verwenden
    4. Mit Adobe Animate und Dreamweaver arbeiten
    5. Web-optimierte SVG-Dateien aus Bibliotheken extrahieren
  4. Arbeitsbereiche und Ansichten in Dreamweaver
    1. Der Dreamweaver-Arbeitsbereich
    2. Dreamweaver-Arbeitsbereich für die visuelle Entwicklung optimieren
    3. Dateien anhand von Dateinamen oder Inhalten suchen | Mac OS
  5. Sites einrichten
    1. Dreamweaver-Sites
    2. Lokale Version Ihrer Site einrichten
    3. Verbindung mit einem Publishing Server herstellen
    4. Testserver einrichten
    5. Site-Einstellungen importieren und exportieren
    6. Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
    7. Barrierefreie Funktionen in Dreamweaver
    8. Erweiterte Einstellungen
    9. Site-Voreinstellungen für die Übertragung von Dateien festlegen
    10. Proxyserver-Einstellungen in Dreamweaver festlegen
    11. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    12. Git in Dreamweaver verwenden
  6. Dateien verwalten
    1. Dateien öffnen und erstellen
    2. Dateien und Ordner verwalten
    3. Dateien vom Server abrufen/auf dem Server bereitstellen
    4. Dateien einchecken und auschecken
    5. Dateien synchronisieren
    6. Dateien auf Unterschiede vergleichen
    7. Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
    8. Design Notes für Dreamweaver-Sites aktivieren
    9. Potenzielle Gatekeeper-Angriffe verhindern
  7. Layout und Entwurf
    1. Visuelle Hilfsmittel für das Layout verwenden
    2. CSS für das Seitenlayout verwenden
    3. Responsive-Websites mit Bootstrap entwerfen
    4. Medienabfragen in Dreamweaver erstellen und verwenden
    5. Inhalte in Tabellen darstellen
    6. Farben
    7. Responsive Design mithilfe von fließenden Rasterlayouts
    8. Extract in Dreamweaver
  8. CSS
    1. Grundlegendes zu Cascading Stylesheets
    2. Gestalten von Seitenlayouts mit CSS Designer
    3. CSS-Präprozessoren in Dreamweaver verwenden
    4. Voreinstellungen für CSS-Stile in Dreamweaver festlegen
    5. CSS-Regeln in Dreamweaver verschieben
    6. Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
    7. Mit div-Tags arbeiten
    8. Verläufe auf den Hintergrund anwenden
    9. CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
    10. Code formatieren
  9. Seiteninhalt und Elemente
    1. Seiteneigenschaften festlegen
    2. CSS-Eigenschaften von Überschriften und Links festlegen
    3. Mit Text arbeiten
    4. Text, Tags und Attribute suchen und ersetzen
    5. DOM-Bedienfeld
    6. In der Live-Ansicht bearbeiten
    7. In Dreamweaver die Kodierung von Dokumenten festlegen
    8. Elemente im Dokumentfenster auswählen und anzeigen
    9. Texteigenschaften im Eigenschafteninspektor festlegen
    10. Rechtschreibprüfung für Web-Seiten durchführen
    11. Horizontale Linien in Dreamweaver verwenden
    12. Schriftkombinationen in Dreamweaver hinzufügen und ändern
    13. Mit Elementen arbeiten
    14. Datumsangaben in Dreamweaver einfügen und aktualisieren
    15. In Dreamweaver Favoritenelemente erstellen und verwalten
    16. Bilder in Dreamweaver einfügen und bearbeiten
    17. Medienobjekte hinzufügen
    18. Videos in Dreamweaver einfügen
    19. HTML5-Videos einfügen
    20. SWF-Dateien einfügen
    21. Audioeffekte hinzufügen
    22. In Dreamweaver HTML5-Audiodateien einfügen
    23. Mit Bibliothekselementen arbeiten
    24. Arabischen und hebräischen Text in Dreamweaver verwenden
  10. Hyperlinks und Navigation
    1. Allgemeines zu Hyperlinks und Navigation
    2. Hyperlinks erstellen
    3. Imagemaps
    4. Fehler in Hyperlinks beheben
  11. jQuery-Widgets und -Effekte
    1. jQuery UI- und Mobile-Widgets in Dreamweaver verwenden
    2. jQuery-Effekte in Dreamweaver verwenden
  12. Websites programmieren
    1. In Dreamweaver programmieren
    2. Programmierumgebung in Dreamweaver
    3. Voreinstellungen für Code festlegen
    4. Codehervorhebung anpassen
    5. Code schreiben und bearbeiten
    6. Codehinweise und Codevervollständigung
    7. Code aus- und einblenden
    8. Code mit Codefragmenten wiederverwenden
    9. Code-Linting
    10. Code optimieren
    11. Code in der Entwurfsansicht bearbeiten
    12. Mit den Head-Inhalten von Seiten arbeiten
    13. Server-Side Includes in Dreamweaver einfügen
    14. Tag-Bibliotheken in Dreamweaver verwenden
    15. Benutzerdefinierte Tags in Dreamweaver importieren
    16. JavaScript-Verhalten (allgemeine Anweisungen)
    17. Integrierte JavaScript-Verhalten anwenden
    18. XML und XSLT
    19. Server-seitige XSL-Transformationen in Dreamweaver durchführen
    20. Client-seitige XSL-Transformationen in Dreamweaver durchführen
    21. Zeichenentitäten für XSLT in Dreamweaver einfügen
    22. Code formatieren
  13. Produktübergreifende Arbeitsabläufe
    1. Erweiterungen für Dreamweaver installieren und verwenden
    2. In-App-Updates in Dreamweaver
    3. Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
    4. Mit Fireworks und Dreamweaver arbeiten
    5. Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
    6. Dreamweaver-Business Catalyst-Integration
    7. Personalisierte E-Mail-Kampagnen erstellen
  14. Vorlagen
    1. Dreamweaver-Vorlagen
    2. Vorlagen und vorlagenbasierte Dokumente erkennen
    3. Dreamweaver-Vorlagen erstellen
    4. Bearbeitbare Bereiche in Vorlagen erstellen
    5. Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
    6. Optionale Bereiche in Vorlagen verwenden
    7. Bearbeitbare Tag-Attribute in Dreamweaver definieren
    8. Verschachtelte Vorlagen in Dreamweaver erstellen
    9. Vorlagen bearbeiten, aktualisieren und löschen
    10. XML-Inhalte in Dreamweaver exportieren und importieren
    11. Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
    12. Inhalte in Dreamweaver-Vorlagen bearbeiten
    13. Syntaxregeln für Vorlagen-Tags in Dreamweaver
    14. Markierungseinstellungen für Vorlagenbereiche festlegen
    15. Vorteile von Vorlagen in Dreamweaver
  15. Mobilgeräte und Multiscreen
    1. Medienabfragen erstellen
    2. Seitenausrichtung für Mobilgeräte ändern
    3. Mit Dreamweaver Web-Anwendungen für Mobilgeräte erstellen
  16. Dynamische Websites, Seiten und Web-Formulare
    1. Grundlegendes zu Web-Anwendungen
    2. Computer für die Entwicklung von Anwendungen einrichten
    3. Fehlerbehebung bei Datenbankverbindungen
    4. Verbindungsskripts in Dreamweaver entfernen
    5. Dynamische Seiten entwerfen
    6. Quellen für dynamischen Inhalt – Überblick
    7. Quellen für dynamische Inhalte definieren
    8. Dynamische Inhalte in Seiten einfügen
    9. Dynamischen Inhalt in Dreamweaver ändern
    10. Datenbankdatensätze anzeigen
    11. Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
    12. Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
    13. Formulare mit Dreamweaver erstellen
    14. Formulare zum Sammeln von Benutzerinformationen verwenden
    15. ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
    16. Web-Formulare erstellen
    17. Verbesserte HTML5-Unterstützung für Formularelemente
    18. Formularentwicklung mit Dreamweaver
  17. Visuelles Entwickeln von Anwendungen
    1. Master- und Detailseiten in Dreamweaver erstellen
    2. Such- und Ergebnisseiten erstellen
    3. Datensatz-Einfügeseiten erstellen
    4. Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
    5. Datensatz-Löschseiten in Dreamweaver erstellen
    6. ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
    7. Registrierungsseiten erstellen
    8. Anmeldeseiten erstellen
    9. Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
    10. Ordner in ColdFusion mit Dreamweaver schützen
    11. ColdFusion-Komponenten in Dreamweaver verwenden
  18. Websites testen, in der Vorschau anzeigen und veröffentlichen
    1. Seitenvorschau
    2. Dreamweaver-Web-Seitenvorschau auf mehreren Geräten
    3. Dreamweaver-Site testen
  19. Fehlerbehebung
    1. Behobene Probleme
    2. Bekannte Probleme

 

 

Durch die Kombination von Fireworks und Dreamweaver entsteht ein reibungsloser Arbeitsablauf für die Bearbeitung, Optimierung und Platzierung von Webgrafiken in HTML-Seiten.

Hinweis:

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.

  1. 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:
    • Wählen Sie „Einfügen“ > „Bild“.

    • Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bild“ oder ziehen Sie das Bild ins Dokument.

  2. Navigieren Sie zur gewünschten aus Fireworks exportierten Datei und klicken Sie auf „OK“ (Windows) bzw. „Öffnen“ (Mac).
    Hinweis:

    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.

Hinweis:

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, können Sie die gesamte Fireworks-Tabelle zur Bearbeitung öffnen, vorausgesetzt, der HTML-Code enthält den Kommentar <!--fw table-->. 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.

  1. Öffnen Sie in Dreamweaver den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist.
  2. 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.

  3. Führen Sie einen der folgenden Schritte aus, um Fireworks zum Bearbeiten zu starten:
    • Klicken Sie im Eigenschafteninspektor auf „Bearbeiten“.

    • Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Mac) 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.

    Hinweis:

    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.  

  4. 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.

  1. Wählen Sie das gewünschte Bild in Dreamweaver und führen Sie einen der folgenden Schritte aus:
    • Wählen Sie „Befehl“ > „Bild optimieren“.

    • Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten.

  2. 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“.

  3. 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.

  1. Vergewissern Sie sich, dass Fireworks bereits als Bildeditor für PNG-Dateien festgelegt wurde.
  2. Klicken Sie im Dokumentfenster auf den Bildplatzhalter, um ihn auszuwählen.
  3. 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“.

  4. 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.

    Hinweis:

    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.

  5. Wenn Sie fertig sind, klicken Sie auf „Fertig“, um die Speicheraufforderung anzuzeigen.
  6. 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.

  7. 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.

  8. 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.

  9. 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“.
  10. 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.

  1. 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.

  2. 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

  1. Wählen Sie in Dreamweaver den Hotspot oder das Bild aus, der bzw. das das Popup-Menü auslöst.
  2. Klicken Sie im Bedienfeld „Verhalten“ (Umschalt+F3) in der Aktionsliste auf „Popup-Menü anzeigen“.
  3. 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.

Hinweis:

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.

  1. 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).
  2. 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.

  1. Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der Sie den Fireworks-HTML-Code einfügen möchten.
  2. 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“.

  3. Klicken Sie auf „Durchsuchen“, um eine neue Fireworks-HTML-Datei auszuwählen.
  4. 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.
    Hinweis:

    Wenn sich die HTML-Datei auf einem Netzlaufwerk befindet, wird sie nicht in den Papierkorb verschoben, sondern endgültig gelöscht.

  5. 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

  1. Wählen Sie in Fireworks „Bearbeiten“ > „HTML-Code kopieren“.
  2. 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.

  3. 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

  1. Wählen Sie in Fireworks „Datei“ > „Exportieren“.
  2. Geben Sie den Ordner der Dreamweaver-Site als Zielordner für die exportierten Bilder an.
  3. Wählen Sie im Popup-Menü „Exportieren“ die Option „HTML und Bilder“.
  4. Wählen Sie im Popup-Menü „HTML“ die Option „In Zwischenablage kopieren“ und klicken Sie dann auf „Exportieren“.
  5. 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.

  1. Öffnen Sie die PNG-Quelldatei in Fireworks und nehmen Sie die gewünschten Änderungen vor.
  2. Wählen Sie „Datei“ > „Speichern“.
  3. Wählen Sie in Fireworks „Date“ > „HTML aktualisieren“.
  4. Suchen Sie die Dreamweaver-Datei mit dem HTML-Code, den Sie aktualisieren möchten, und klicken Sie auf „Öffnen“.
  5. 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.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?