Setzen Sie die Einfügemarke in Dreamweaver (Entwurfs- oder Codeansicht) an die Stelle auf Ihrer Seite, an der das Bild eingefügt werden soll.
Zuletzt aktualisiert am
1. Mai 2021
- Dreamweaver-Benutzerhandbuch
- Einführung
- Dreamweaver und Creative Cloud
- Arbeitsbereiche und Ansichten in Dreamweaver
- Sites einrichten
- Dreamweaver-Sites
- Lokale Version Ihrer Site einrichten
- Verbindung mit einem Publishing Server herstellen
- Testserver einrichten
- Site-Einstellungen importieren und exportieren
- Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
- Barrierefreie Funktionen in Dreamweaver
- Erweiterte Einstellungen
- Site-Voreinstellungen für die Übertragung von Dateien festlegen
- Proxyserver-Einstellungen in Dreamweaver festlegen
- Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
- Git in Dreamweaver verwenden
- Dateien verwalten
- Dateien öffnen und erstellen
- Dateien und Ordner verwalten
- Dateien vom Server abrufen/auf dem Server bereitstellen
- Dateien einchecken und auschecken
- Dateien synchronisieren
- Dateien auf Unterschiede vergleichen
- Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
- Design Notes für Dreamweaver-Sites aktivieren
- Potenzielle Gatekeeper-Angriffe verhindern
- Layout und Entwurf
- CSS
- Grundlegendes zu Cascading Stylesheets
- Gestalten von Seitenlayouts mit CSS Designer
- CSS-Präprozessoren in Dreamweaver verwenden
- Voreinstellungen für CSS-Stile in Dreamweaver festlegen
- CSS-Regeln in Dreamweaver verschieben
- Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
- Mit div-Tags arbeiten
- Verläufe auf den Hintergrund anwenden
- CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
- Code formatieren
- Seiteninhalt und Elemente
- Seiteneigenschaften festlegen
- CSS-Eigenschaften von Überschriften und Links festlegen
- Mit Text arbeiten
- Text, Tags und Attribute suchen und ersetzen
- DOM-Bedienfeld
- In der Live-Ansicht bearbeiten
- In Dreamweaver die Kodierung von Dokumenten festlegen
- Elemente im Dokumentfenster auswählen und anzeigen
- Texteigenschaften im Eigenschafteninspektor festlegen
- Rechtschreibprüfung für Web-Seiten durchführen
- Horizontale Linien in Dreamweaver verwenden
- Schriftkombinationen in Dreamweaver hinzufügen und ändern
- Mit Elementen arbeiten
- Datumsangaben in Dreamweaver einfügen und aktualisieren
- In Dreamweaver Favoritenelemente erstellen und verwalten
- Bilder in Dreamweaver einfügen und bearbeiten
- Medienobjekte hinzufügen
- Videos in Dreamweaver einfügen
- HTML5-Videos einfügen
- SWF-Dateien einfügen
- Audioeffekte hinzufügen
- In Dreamweaver HTML5-Audiodateien einfügen
- Mit Bibliothekselementen arbeiten
- Arabischen und hebräischen Text in Dreamweaver verwenden
- Hyperlinks und Navigation
- jQuery-Widgets und -Effekte
- Websites programmieren
- In Dreamweaver programmieren
- Programmierumgebung in Dreamweaver
- Voreinstellungen für Code festlegen
- Codehervorhebung anpassen
- Code schreiben und bearbeiten
- Codehinweise und Codevervollständigung
- Code aus- und einblenden
- Code mit Codefragmenten wiederverwenden
- Code-Linting
- Code optimieren
- Code in der Entwurfsansicht bearbeiten
- Mit den Head-Inhalten von Seiten arbeiten
- Server-Side Includes in Dreamweaver einfügen
- Tag-Bibliotheken in Dreamweaver verwenden
- Benutzerdefinierte Tags in Dreamweaver importieren
- JavaScript-Verhalten (allgemeine Anweisungen)
- Integrierte JavaScript-Verhalten anwenden
- XML und XSLT
- Server-seitige XSL-Transformationen in Dreamweaver durchführen
- Client-seitige XSL-Transformationen in Dreamweaver durchführen
- Zeichenentitäten für XSLT in Dreamweaver einfügen
- Code formatieren
- Produktübergreifende Arbeitsabläufe
- Erweiterungen für Dreamweaver installieren und verwenden
- In-App-Updates in Dreamweaver
- Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
- Mit Fireworks und Dreamweaver arbeiten
- Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
- Dreamweaver-Business Catalyst-Integration
- Personalisierte E-Mail-Kampagnen erstellen
- Vorlagen
- Dreamweaver-Vorlagen
- Vorlagen und vorlagenbasierte Dokumente erkennen
- Dreamweaver-Vorlagen erstellen
- Bearbeitbare Bereiche in Vorlagen erstellen
- Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
- Optionale Bereiche in Vorlagen verwenden
- Bearbeitbare Tag-Attribute in Dreamweaver definieren
- Verschachtelte Vorlagen in Dreamweaver erstellen
- Vorlagen bearbeiten, aktualisieren und löschen
- XML-Inhalte in Dreamweaver exportieren und importieren
- Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
- Inhalte in Dreamweaver-Vorlagen bearbeiten
- Syntaxregeln für Vorlagen-Tags in Dreamweaver
- Markierungseinstellungen für Vorlagenbereiche festlegen
- Vorteile von Vorlagen in Dreamweaver
- Mobilgeräte und Multiscreen
- Dynamische Websites, Seiten und Web-Formulare
- Grundlegendes zu Web-Anwendungen
- Computer für die Entwicklung von Anwendungen einrichten
- Fehlerbehebung bei Datenbankverbindungen
- Verbindungsskripts in Dreamweaver entfernen
- Dynamische Seiten entwerfen
- Quellen für dynamischen Inhalt – Überblick
- Quellen für dynamische Inhalte definieren
- Dynamische Inhalte in Seiten einfügen
- Dynamischen Inhalt in Dreamweaver ändern
- Datenbankdatensätze anzeigen
- Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
- Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
- Formulare mit Dreamweaver erstellen
- Formulare zum Sammeln von Benutzerinformationen verwenden
- ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
- Web-Formulare erstellen
- Verbesserte HTML5-Unterstützung für Formularelemente
- Formularentwicklung mit Dreamweaver
- Visuelles Entwickeln von Anwendungen
- Master- und Detailseiten in Dreamweaver erstellen
- Such- und Ergebnisseiten erstellen
- Datensatz-Einfügeseiten erstellen
- Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
- Datensatz-Löschseiten in Dreamweaver erstellen
- ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
- Registrierungsseiten erstellen
- Anmeldeseiten erstellen
- Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
- Ordner in ColdFusion mit Dreamweaver schützen
- ColdFusion-Komponenten in Dreamweaver verwenden
- Websites testen, in der Vorschau anzeigen und veröffentlichen
- Fehlerbehebung
Erfahren Sie, wie Photoshop in Dreamweaver integriert ist. Arbeiten Sie mit Smartobjekten in Photoshop/Dreamweaver-Workflows.
Photoshop-Integration
Hinweis:
Die Workflows für die Photoshop-Integration wurden ab der Dreamweaver-Version 21.0 eingestellt.
In Dreamweaver können Sie Photoshop-Bilddateien im PSD-Format in Webseiten einfügen und Dreamweaver wandelt sie dann in webfähige Bilder (im GIF-, JPEG- und PNG-Format) um. Bei diesem Vorgang fügt Dreamweaver das Bild als Smartobjekt ein und behält eine Live-Verbindung mit der ursprünglichen PSD-Datei bei.
In Dreamweaver können Sie zudem ein Photoshop-Bild mit mehreren Ebenen oder Segmenten ganz oder teilweise in eine Webseite einfügen. Beim Kopieren und Einfügen von Bildern aus Photoshop wird jedoch die Live-Verbindung mit der ursprünglichen Datei nicht beibehalten. Um ein Bild zu aktualisieren, nehmen Sie die gewünschten Änderungen in Photoshop vor und kopieren und fügen Sie das Bild dann erneut ein.
Hinweis:
Wenn Sie diese Integrationsfunktion häufig verwenden, empfiehlt es sich, die Photoshop-Dateien in der Dreamweaver-Site zu speichern, um leichter auf sie zugreifen zu können. In diesem Fall sollten Sie für die entsprechenden Dateien unbedingt das Cloaking aktivieren, um die Bereitstellung der ursprünglichen Elemente sowie unnötige Übertragungen der Bilder zwischen der lokalen Site und dem Remote-Server zu vermeiden.
Ein Tutorial über die Photoshop-Integration mit Dreamweaver, finden Sie unter Integrieren von Dreamweaver mit Photoshop (auf Englisch).
Workflow für Smartobjekte und für Photoshop/Dreamweaver
Es gibt zwei Haupt-Workflows für das Arbeiten mit Photoshop-Dateien in Dreamweaver: den Kopieren/Einfügen-Workflow und den Smartobjekte-Workflow.
Kopieren/Einfügen-Workflow
Mit dem Kopieren/Einfügen-Workflow können Sie Slices und Ebenen in einer Photoshop-Datei auswählen und diese dann in Dreamweaver als webfertige Bilder einfügen. Wenn Sie den Inhalt zu einem späteren Zeitpunkt aktualisieren möchten, müssen Sie allerdings die Photoshop-Originaldatei öffnen, Ihre Änderungen vornehmen, das Slice bzw. die Ebene erneut in die Zwischenablage kopieren und dann das aktualisierte Slice bzw. die aktualisierte Ebene in Dreamweaver einfügen. Dieser Workflow wird nur empfohlen, wenn Sie einen Teil einer Photoshop-Datei (beispielsweise einen Teil einer Design-Komposition) als Bild auf einer Webseite einfügen möchten.
Smartobjekte-Workflow
Wenn Sie mit vollständigen Photoshop-Dateien arbeiten, wird der Smartobjekte-Workflow empfohlen. In Dreamweaver ist ein Smartobjekt ein auf einer Webseite platziertes Bildelement, das weiterhin mit der Photoshop-Originaldatei (PSD) verknüpft ist. In der Entwurfsansicht von Dreamweaver ist ein Smartobjekt in der linken oberen Ecke des Bilds mit einem Symbol gekennzeichnet.
Wenn das Webbild (also das Bild auf der Dreamweaver-Seite) nicht mit der Photoshop-Originaldatei übereinstimmt, erkennt Dreamweaver, dass die Originaldatei aktualisiert wurde, und zeigt einen der Smartobjekt-Symbolpfeile in Rot an. Wenn Sie in der Entwurfsansicht das Webbild auswählen und im Eigenschafteninspektor auf die Schaltfläche „Von Original aktualisieren“ klicken, wird das Bild automatisch aktualisiert, um die von Ihnen an der Photoshop-Originaldatei vorgenommenen Änderungen zu reflektieren.
Wenn Sie den Smartobjekte-Workflow verwenden, brauchen Sie zum Aktualisieren eines Webbilds Photoshop nicht zu öffnen. Darüber hinaus sind alle Aktualisierungen, die Sie an Smartobjekten in Dreamweaver vornehmen, nicht destruktiv. Das bedeutet, dass Sie Änderungen an der Webversion des Bilds auf Ihrer Seite vornehmen können und die Photoshop-Originaldatei hierbei intakt bleibt.
Sie können ein Smartobjekt auch aktualisieren, ohne das Webbild in der Entwurfsansicht auszuwählen. Über das Elementebedienfeld lassen sich alle Smartobjekte (auch Bilder, die sich im Dokumentfenster eventuell nicht auswählen lassen, z. B. CSS-Hintergrundbilder) aktualisieren.
Bildoptimierungseinstellungen
Für den Kopieren/Einfügen- und den Smartobjekte-Workflow können Sie im Dialogfeld „Bildoptimierung“ Optimierungseinstellungen festlegen. In diesem Dialogfeld können Sie das Dateiformat und die Bildqualität festlegen. Wenn Sie ein Slice oder eine Ebene kopieren oder eine Photoshop-Datei zum ersten Mal als Smartobjekt einfügen, zeigt Dreamweaver dieses Dialogfeld an, damit Sie das Webbild ganz leicht erstellen können.
Wenn Sie eine Aktualisierung eines bestimmten Slice bzw. einer bestimmten Ebene kopieren und einfügen, wendet Dreamweaver die ursprünglichen Einstellungen an und erstellt das Webbild anhand dieser Einstellungen neu. Ebenso verwendet Dreamweaver bei der Aktualisierung eines Smartobjekts über den Eigenschafteninspektor dieselben Einstellungen, die Sie beim erstmaligen Einfügen des Bilds verwendet haben. Sie können die Einstellungen eines Bilds jederzeit ändern, indem Sie das Webbild in der Entwurfsansicht auswählen und dann im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten klicken.
Speichern von Photoshop-Dateien
Wenn Sie ein Webbild eingefügt haben und die Photoshop-Originaldatei nicht in Ihrer Dreamweaver-Site gespeichert haben, erkennt Dreamweaver den Pfad zur Originaldatei als absoluten lokalen Dateipfad. (Dies gilt sowohl für den Kopieren/Einfügen- als auch für den Smartobjekte-Workflow.) Wenn beispielsweise der Pfad zu Ihrer Dreamweaver-Site „C:\Sites\meineSite“ lautet und die Photoshop-Datei unter „C:\Bilder\Photoshop“ abgespeichert ist, erkennt Dreamweaver die Originaldatei nicht als Teil der Site „meineSite“. Dies führt zu Problemen, wenn Sie die Photoshop-Datei für andere Team-Mitglieder freigeben möchten, da Dreamweaver die Datei lediglich als auf einer bestimmten lokalen Festplatte verfügbar erkennt.
Wenn Sie die Photoshop-Datei jedoch in Ihrer Site speichern, richtet Dreamweaver einen Site-relativen Pfad zur Datei ein. Alle Benutzer, die Zugriff auf die Site haben, können den richtigen Pfad zur Datei aufbauen, vorausgesetzt, Sie haben auch die Originaldatei für sie zum Herunterladen bereitgestellt.
Ein Videotutorial über die nahtlose Bearbeitung mit Photoshop finden Sie unter Nahtlose Bearbeitung mit Photoshop (auf Englisch).
Smartobjekte erstellen
Beim Einfügen eines Photoshop-Bilds (PSD-Datei) in eine Webseite wird in Dreamweaver ein Smartobjekt erstellt. Ein Smartobjekt ist ein webfähiges Bild mit einer Live-Verbindung zum ursprünglichen Photoshop-Bild. Wenn Sie das ursprüngliche Bild in Photoshop aktualisieren, haben Sie die Möglichkeit, das Bild mit einem Mausklick auch in Dreamweaver zu aktualisieren.
-
-
Wählen Sie Einfügen > Bild.
Hinweis:Sie können die PSD-Datei zudem aus dem Bedienfeld „Dateien“ auf die Seite ziehen, wenn die Photoshop-Dateien in der Website gespeichert sind. In diesem Fall können Sie den nächsten Schritt überspringen.
-
Wählen Sie im Dialogfeld Bildquelle auswählen die Photoshop-Bilddatei im PSD-Format aus, indem Sie auf die Schaltfläche „Durchsuchen“ klicken und zu der Datei navigieren.
-
Passen Sie die Optimierungseinstellungen in dem angezeigten Dialogfeld Bildoptimierung nach Bedarf an und klicken Sie auf „OK“.
-
Speichern Sie die webfähige Bilddatei in einem Verzeichnis im Stammordner der Website.
Dreamweaver erstellt das Smartobjekt entsprechend den ausgewählten Optimierungseinstellungen und fügt eine webfähige Version des Bilds auf der Seite ein. Mit dem Smartobjekt besteht eine Live-Verbindung zum ursprünglichen Bild und Sie werden informiert, wenn die beiden Bilder nicht mehr synchron sind.
Hinweis:
Wenn Sie zu einem späteren Zeitpunkt die Optimierungseinstellungen für ein Bild in Ihren Seiten ändern möchten, wählen Sie das Bild aus und klicken im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten. Im Dialogfeld Bildoptimierung können Sie dann die gewünschten Änderungen an dem Bild vornehmen. Änderungen im Dialogfeld Bildoptimierung werden angewendet, ohne dass negative Auswirkungen auf die Originaldatei entstehen. Die ursprüngliche Photoshop-Datei wird in Dreamweaver niemals geändert. Stattdessen wird das Webbild immer anhand der Originaldaten neu erstellt.
Ein Videotutorial über die nahtlose Bearbeitung mit Photoshop finden Sie unter Nahtlose Bearbeitung mit Photoshop (auf Englisch).
Smartobjekte aktualisieren
Wenn Sie die Photoshop-Datei ändern, mit der das Smartobjekt verknüpft ist, werden Sie in Dreamweaver benachrichtigt, dass das webfähige Bild nicht mehr mit dem Original synchron ist. Smartobjekte werden in Dreamweaver durch ein Symbol in der oberen linken Ecke des Bilds gekennzeichnet. Wenn das webfähige Bild in Dreamweaver mit der ursprünglichen Photoshop-Datei synchron ist, sind beide Pfeile in diesem Symbol grün. Wenn das webfähige Bild nicht mit der ursprünglichen Photoshop-Datei synchron ist, wird einer der Pfeile rot dargestellt.
-
Um ein Smartobjekt mit dem aktuellen Inhalt der ursprünglichen Photoshop-Datei zu aktualisieren, wählen Sie das Smartobjekt im Dokumentfenster aus und klicken dann im Eigenschafteninspektor auf die Schaltfläche Von Original aktualisieren.
Hinweis:
Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Mehrere Smartobjekte aktualisieren
Im Bedienfeld „Elemente“ können Sie mehrere Smartobjekte gleichzeitig aktualisieren. Darüber hinaus können Sie im Bedienfeld „Elemente“ Smartobjekte anzeigen, die im Dokumentfenster möglicherweise nicht ausgewählt werden können (z. B. CSS-Hintergrundbilder).
-
Klicken Sie im Bedienfeld „Dateien“ auf die Registerkarte „Elemente“, um die Elemente der Site anzuzeigen.
-
Achten Sie darauf, dass die Bildansicht ausgewählt ist. Klicken Sie andernfalls auf die Schaltfläche Bilder.
-
Wählen Sie im Bedienfeld „Elemente“ die einzelnen Bildelemente aus. Wenn Sie ein Smartobjekt auswählen, wird in der oberen linken Ecke des Bilds das Smartobjekt-Symbol angezeigt. Bei normalen Bildern wird dieses Symbol nicht angezeigt.
-
Klicken Sie bei jedem Smartobjekt, das Sie aktualisieren möchten, mit der rechten Maustaste auf den entsprechenden Dateinamen und wählen Sie „Von Original aktualisieren“ aus. Sie können beim Klicken auch die Strg-Taste gedrückt halten, um mehrere Dateinamen auszuwählen und die entsprechenden Bilder gleichzeitig zu aktualisieren.
Hinweis:
Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Größe von Smartobjekten ändern
Sie können die Größe eines Smartobjekts wie bei jedem anderen Bild im Dokumentfenster ändern.
-
Wählen Sie das Smartobjekt im Dokumentfenster aus und ändern Sie durch Ziehen der Größenänderungsgriffe die Größe des Bilds. Sie können das Verhältnis von Breite und Höhe beibehalten, indem Sie beim Ziehen die Umschalttaste gedrückt halten.
-
Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Von Original aktualisieren.
Beim Aktualisieren des Smartobjekts wird das Webbild entsprechend dem aktuellen Inhalt der ursprünglichen Datei und den ursprünglichen Optimierungseinstellungen ohne negative Auswirkungen auf das Originalbild mit der neuen Größe dargestellt.
Ursprüngliche Photoshop-Datei eines Smartobjekts bearbeiten
Nach dem Erstellen eines Smartobjekts in Ihrer Dreamweaver-Seite können Sie die ursprüngliche PSD-Datei in Photoshop bearbeiten. Nachdem Sie die Änderungen in Photoshop vorgenommen haben, können Sie auf einfache Weise das Webbild in Dreamweaver aktualisieren.
Hinweis:
Dazu muss Photoshop als primärer externer Bildeditor festgelegt sein.
-
Wählen Sie das Smartobjekt im Dokumentfenster aus.
-
Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Bearbeiten.
-
Nehmen Sie die Änderungen in Photoshop vor und speichern Sie die neue PSD-Datei.
-
Wählen Sie in Dreamweaver erneut das Smartobjekt aus und klicken Sie auf die Schaltfläche Von Original aktualisieren.
Hinweis:
Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver zurücksetzen. Smartobjekte werden in Dreamweaver nur entsprechend den Inhalten der ursprünglichen Photoshop-Datei und nicht entsprechend ihrer Größe aktualisiert. Um die Größe eines Webbilds mit der Größe der ursprünglichen Photoshop-Datei zu synchronisieren, klicken Sie mit der rechten Maustaste auf das Bild und wählen Größe auf Original zurücksetzen.
Smartobjekt-Statuswerte
In der folgenden Tabelle sind die verschiedenen Statuswerte von Smartobjekten aufgeführt.
|
Smartobjekt-Status |
Beschreibung |
Empfohlene Aktion |
|
Bilder sind synchronisiert |
Das Webbild ist mit den aktuellen Inhalten der ursprünglichen Photoshop-Datei synchronisiert. Die Attribute für Breite und Höhe im HTML-Code entsprechen den Abmessungen des Webbilds. |
Keine. |
|
Originalelement wurde geändert |
Die ursprüngliche Photoshop-Datei wurde nach dem Erstellen des Webbilds in Dreamweaver geändert. |
Über die Schaltfläche Von Original aktualisieren im Eigenschafteninspektor können Sie die beiden Bilder synchronisieren. |
|
Abmessungen des Webbilds weichen von der ausgewählten HTML-Breite und -Höhe ab |
Die Attribute für Breite und Höhe im HTML-Code unterscheiden sich von den Abmessungen für Breite und Höhe des Webbilds, das in Dreamweaver beim Einfügen erstellt wurde. Wenn die Abmessungen des Webbilds kleiner sind als die ausgewählten Werte für die Breite und Höhe im HTML-Code, wird das Webbild möglicherweise verpixelt angezeigt. |
Über die Schaltfläche „Von Original aktualisieren“ im Eigenschafteninspektor können Sie das Webbild aus der ursprünglichen Photoshop-Datei neu erstellen. Beim Neuerstellen des Bilds in Dreamweaver werden die aktuell festgelegten Abmessungen für Breite und Höhe verwendet. |
|
Abmessungen des Originalelements sind zu klein für die ausgewählte HTML-Breite und -Höhe |
Die Attribute für Breite und Höhe im HTML-Code sind größer als die Abmessungen für Breite und Höhe der ursprünglichen Photoshop-Datei. Das Webbild wird möglicherweise verpixelt dargestellt. |
Erstellen Sie keine Webbilder, deren Abmessungen größer sind als die Abmessungen der ursprünglichen Photoshop-Datei. |
|
Originalelement wurde nicht gefunden |
Die im Textfeld „Original“ des Eigenschafteninspektors angegebene ursprüngliche Photoshop-Datei kann in Dreamweaver nicht gefunden werden. |
Korrigieren Sie den Dateipfad im Textfeld „Original“ des Eigenschafteninspektors oder verschieben Sie die Photoshop-Datei in den derzeit angegebenen Speicherort. |
Photoshop-Auswahl kopieren und einfügen
Sie können ein Photoshop-Bild ganz oder teilweise kopieren und das ausgewählte Segment als webfähiges Bild in Ihre Dreamweaver-Seite einfügen. Sie können eine oder mehrere Ebenen eines ausgewählten Bildbereichs oder lediglich ein Bildsegment kopieren. Dabei wird in Dreamweaver jedoch kein Smartobjekt erstellt.
Hinweis:
Obwohl die Funktion „Von Original aktualisieren“ für eingefügte Bilder nicht verfügbar ist, können Sie die ursprüngliche Photoshop-Datei öffnen und bearbeiten, indem Sie das eingefügte Bild auswählen und im Eigenschafteninspektor auf die Schaltfläche Bearbeiten klicken.
-
Führen Sie in Photoshop einen der folgenden Schritte aus:
- Kopieren Sie eine einzelne Ebene ganz oder teilweise, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu kopierenden Bereich auswählen und dann Bearbeiten > Kopieren wählen. Auf diese Weise wird nur die aktive Ebene des ausgewählten Bereichs in die Zwischenablage kopiert. Falls in dem Bild ebenenbasierte Effekte enthalten sind, werden diese nicht kopiert.
- Kopieren und reduzieren Sie mehrere Ebenen, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu kopierenden Bereich auswählen und dann Bearbeiten > Auf eine Ebene reduziert kopieren wählen. Dadurch werden alle aktiven und niedrigeren Ebenen des ausgewählten Bereichs auf eine Ebene reduziert und in die Zwischenablage kopiert. Falls mit manchen dieser Ebenen ebenenbasierte Effekte verknüpft sind, werden diese ebenfalls kopiert.
- Kopieren Sie ein Bildsegment, indem Sie mithilfe des Segmentauswahlwerkzeugs das entsprechende Segment auswählen und dann Bearbeiten > Kopieren wählen. Dadurch werden alle aktiven und darunter liegenden Ebenen des Bildsegments auf eine Ebene reduziert und in die Zwischenablage kopiert.
Hinweis:Über Auswählen > Alles auswählen können Sie schnell ein ganzes Bild zum Kopieren auswählen.
-
Setzen Sie die Einfügemarke in Dreamweaver (Entwurfs- oder Codeansicht) an die Stelle auf Ihrer Seite, an der das Bild eingefügt werden soll.
-
Wählen Sie Bearbeiten > Einfügen.
-
Nehmen Sie im Dialogfeld Bildoptimierung die gewünschten Änderungen an den Optimierungseinstellungen vor und klicken Sie auf „OK“.
-
Speichern Sie die webfähige Bilddatei in einem Verzeichnis im Stammordner der Website.
Dreamweaver definiert das Bild gemäß Ihren Optimierungseinstellungen und platziert eine webfähige Version des Bildes auf Ihrer Seite. Informationen zu dem Bild wie z. B. der Speicherort der ursprünglichen PSD-Quelldatei werden in einer Design Note gespeichert, unabhängig davon, ob Sie Design Notes für Ihre Site aktiviert haben. Die Design Note ermöglicht es Ihnen, aus Dreamweaver zu Ihrer ursprünglichen Photoshop-Datei zurückzukehren, um diese zu bearbeiten.
Eingefügte Bilder bearbeiten
Nach dem Einfügen von Photoshop-Bildern in Ihre Dreamweaver-Seiten können Sie die ursprüngliche PSD-Datei in Photoshop bearbeiten. Wenn Sie Bilder kopieren und einfügen, wird empfohlen, dass Sie Bearbeitungen immer an der ursprünglichen PSD-Datei (und nicht am webfähigen Bild selbst) vornehmen und diese dann erneut einfügen, sodass keine unterschiedlichen Versionen desselben Bilds vorhanden sind.
Hinweis:
Stellen Sie sicher, dass Photoshop für den zu bearbeitenden Dateityp als primärer externer Bildeditor festgelegt ist.
-
Wählen Sie in Dreamweaver ein webfähiges Bild aus, das ursprünglich in Photoshop erstellt worden ist, und führen Sie eine der folgenden Aktionen aus:
- Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche Bearbeiten.
- Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und doppelklicken Sie auf die Datei.
- Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf ein Bild, wählen Sie im Kontextmenü die Option „Original bearbeiten mit“ aus und klicken Sie dann auf „Photoshop“.
Hinweis:Dabei wird vorausgesetzt, dass Photoshop als primärer externer Bildeditor für PNG-Dateien festgelegt wurde. Sie sollten auch in Erwägung ziehen, Photoshop als Standardeditor für JPEG-, GIF- und PNG-Dateien festzulegen.
-
Bearbeiten Sie die Datei in Photoshop.
-
Wechseln Sie wieder zu Dreamweaver und fügen Sie das aktualisierte Bild oder die aktualisierte Auswahl in die Seite ein.
Wenn Sie das Bild zu einem anderen Zeitpunkt erneut optimieren möchten, wählen Sie das Bild aus und klicken Sie im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten.
Optionen des Dialogfelds „Bildoptimierung“ einstellen
Beim Erstellen eines Smartobjekts oder Einfügen einer Auswahl aus Photoshop wird in Dreamweaver das Dialogfeld Bildoptimierung angezeigt. (Dieses Dialogfeld wird auch bei anderen Bildern angezeigt, wenn Sie ein bestimmtes Bild auswählen und im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten klicken.) In diesem Dialogfeld können Sie Einstellungen für webfähige Bilder mit einer geeigneten Kombination aus Farbe, Komprimierung und Bildqualität definieren und als Vorschau anzeigen.
Ein webfähiges Bild kann von allen aktuellen Webbrowsern angezeigt werden und sieht immer gleich aus, unabhängig davon, welches System oder welchen Browser der Betrachter verwendet. Im Allgemeinen wirken sich die Einstellungen entweder auf die Qualität oder auf die Dateigröße nachteilig aus.
Hinweis:
Die ausgewählten Einstellungen wirken sich nur auf die importierte Version der Bilddatei aus. Die ursprüngliche Photoshop-Datei im PSD-Format oder Fireworks-Datei im PNG-Format wird hingegen nie geändert.
Vorgabe
Wählen Sie eine Vorgabe aus, die Ihren Anforderungen am meisten entspricht. Die Dateigröße des Bildes wird basierend auf der gewählten Vorgabe geändert. Eine sofortige Vorschau des Bildes mit der angewendeten Einstellung wird im Hintergrund angezeigt.
Für Bilder, die mit einem hohen Maß an Klarheit angezeigt werden sollen, wählen Sie PNG24 für Fotos (Detailtreue) aus. Wählen Sie GIF für Hintergrundbilder (Muster) aus, wenn Sie ein Muster einfügen, das als Hintergrund der Seite verwendet werden soll.
Wenn Sie eine Vorgabe auswählen, werden die konfigurierbaren Optionen für die Vorgabe angezeigt. Wenn Sie die Optimierungseinstellungen weiter anpassen möchten, ändern Sie die Werte für diese Optionen.
