Bilder in Dreamweaver einfügen und bearbeiten

Setzen Sie im Dokumentfenster die Einfügemarke an die Stelle, an der das Bild erscheinen soll. Führen Sie anschließend einen der folgenden Schritte aus:

• Wählen Sie im Bedienfeld Einfügen in der Dropdown-Liste HTML aus. Klicken Sie auf Bild. Doppelklicken Sie oder ziehen Sie das Symbol in das Dokumentfenster (bzw. in die Codeansicht, wenn Sie mit Code arbeiten).

• Wählen Sie Einfügen > Bild.

• Ziehen Sie ein Bild aus dem Bedienfeld „Elemente“ (Fenster > Elemente) an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.

• Ziehen Sie ein Bild aus dem Bedienfeld Dateien an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.

• Ziehen Sie ein Bild vom Desktop an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.

• Ziehen Sie ein Bild in der Live-Ansicht aus dem Bedienfeld Extract oder von der Registerkarte Ebenen. Legen Sie das Bild mithilfe der Live-Hilfslinien über, unter oder neben einem Element ab. Sie können das Element auch an einer bestimmten Position in der Dokumentstruktur ablegen, indem Sie auf </> klicken und die Elementschnellansicht verwenden.

Wählen Sie in der Verzeichnisstruktur das Bild oder die Bildquelle aus, das bzw. die Sie einfügen möchten.

Wenn Sie in einem nicht gespeicherten Dokument arbeiten, erstellt Dreamweaver den Verweis file:// auf die Bilddatei. Wenn Sie das Dokument in einem beliebigen Ordner in der Site speichern, wandelt Dreamweaver diesen Verweis in einen dokumentrelativen Pfad um.

Klicken Sie auf OK. 

Zum Anzeigen des Eigenschafteninspektors für ein ausgewähltes Bild klicken Sie auf das Bild und wählen Sie Fenster > Eigenschaften.

Geben Sie im Textfeld unter dem Miniaturbild einen Namen ein. Über diesen Namen können Sie auf das Bild verweisen, wenn Sie ein Dreamweaver-Verhalten wie „Bild vertauschen“ oder eine Skriptsprache wie JavaScript oder VBScript verwenden.

Legen die Breite und Höhe des Bilds in Pixel fest. Dreamweaver aktualisiert diese Felder automatisch und gibt darin die ursprünglichen Maße an, wenn Sie ein Bild in eine Seite einfügen.

Wenn Sie für „B“ und „H“ Werte festlegen, die nicht der tatsächlichen Breite und Höhe des Bilds entsprechen, wird das Bild nicht korrekt im Browser angezeigt. Um die ursprünglichen Werte wiederherzustellen, klicken Sie auf die Feldbeschriftungen „B“ und „H“ oder rechts neben den Textfeldern „B“ und „H“ auf die Schaltfläche „Größe zurücksetzen“.

Gibt die Quelldatei des Bilds an. Klicken Sie auf das Ordnersymbol, um die Quelldatei auszuwählen, oder geben Sie den Pfad ein.

Gibt einen Hyperlink für das Bild an. Ziehen Sie das Dateizeigersymbol auf eine Datei im Bedienfeld „Dateien“. Klicken Sie auf das Ordnersymbol, um ein Dokument in der Site zu suchen, oder geben Sie den URL-Pfad manuell ein.

Gibt alternativen Text an, der anstelle des Bilds geladen wird, wenn ein reiner Textbrowser verwendet wird bzw. wenn im Browser festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit Sehschwierigkeiten, die reine Textbrowser zusammen mit Sprach-Synthesizern verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn der Zeiger sich über dem Bild befindet.

Damit können Sie eine clientseitige Imagemap beschriften und erstellen.

Ziel Gibt den Frame oder das Fenster an, in den bzw. das die verknüpfte Seite geladen wird. Diese Option ist nur verfügbar, wenn das Bild nicht mit einer anderen Datei verknüpft ist. Alle Frames im aktuellen Dokument werden namentlich in der Liste „Ziel“ aufgeführt. Sie können auch einen der folgenden reservierten Zielnamen auswählen:

• „_blank“ lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
• „_new“ lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
•  „_parent“ lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das ganze Browserfenster geladen.
• „_self“ lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dieses Ziel ist das Standardziel. Es muss nicht explizit angegeben werden.
•  „_top“ lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.

Startet den Bildeditor, den Sie in den Voreinstellungen für externe Editoren gewählt haben, und öffnet das ausgewählte Bild.

Öffnet das Dialogfeld Bildvorschau und ermöglicht das Optimieren des Bilds.

Wenn das Bild auf der Dreamweaver-Seite nicht mit der Photoshop-Originaldatei übereinstimmt, erkennt Dreamweaver, dass die Originaldatei aktualisiert wurde. In der Anwendung wird einer der Smartobjekt-Symbolpfeile in Rot angezeigt. Wenn Sie in der Entwurfsansicht das Webbild auswählen und im Eigenschafteninspektor auf die Schaltfläche Von Original aktualisieren, wird das Bild automatisch aktualisiert. Das aktualisierte Bild weist nun die von Ihnen an der Photoshop-Originaldatei vorgenommenen Änderungen auf.

Dient dem Zuschneiden der Bildgröße, wobei unerwünschte Bereiche aus dem ausgewählten Bild entfernt werden.

Ermöglicht es Ihnen, ein in der Größe geändertes Bild neu aufzulösen, wobei dessen Qualität in der neuen Größe und Form verbessert wird.

Ändert die Helligkeits- und Kontrasteinstellungen eines Bilds.

Ändert die Bildschärfe.

Klicken Sie im Dokumentfenster auf das Bild oder wählen Sie das Bildtag im Code.

Führen Sie einen der folgenden Schritte aus, um einen Namen oder eine kurze Beschreibung für das Bild mit weniger als 50 Zeichen im Feld „Alternativtext“ einzugeben. Die Informationen, die Sie hier eingeben, werden später vom Bildschirmlesegerät vorgelesen.  

• Bearbeiten Sie die jeweiligen Bildattribute in der Codeansicht.

• Bearbeiten Sie Bildattribute in der Live-Ansicht mithilfe des Schnellansicht-Eigenschafteninspektors.

• Bearbeiten Sie den Wert des Feldes Alt im Eigenschafteninspektor.

An der unteren und der rechten Seite sowie in der unteren rechten Ecke des Elements werden Ziehgriffe angezeigt, mit denen Sie die Größe des Elements ändern können. Wenn keine Größenänderungsgriffe angezeigt werden, klicken Sie außerhalb des Elements und wählen Sie es dann erneut aus. Sie können auch auf das entsprechende Tag im Tag-Selektor klicken, um das Element auszuwählen.

• Ziehen Sie den Griff an der rechten Seite, um die Breite des Elements zu ändern.

• Ziehen Sie den Griff an der unteren Seite, um die Höhe des Elements zu ändern.

• Ziehen Sie den Griff an der Ecke, um Höhe und Breite des Elements gleichzeitig zu ändern.

• Halten Sie die Umschalttaste gedrückt und ziehen Sie den Griff an der Ecke, um das Verhältnis zwischen Breite und Höhe beizubehalten, während Sie die Größe des Elements ändern.

• Möchten Sie die Breite und Höhe auf eine bestimmte Größe einstellen (z. B. 1 x 1 Pixel), verwenden Sie hierzu den Eigenschafteninspektor. Geben Sie in die Felder „B“ und „H“ einen numerischen Wert ein. Sie können Elemente visuell bis zur Mindestgröße von 8 x 8 Pixel verkleinern.

Wenn Sie die ursprünglichen Abmessungen eines Elements wiederherstellen möchten, dessen Größe Sie geändert haben, löschen Sie die Werte in den Feldern „B“ und „H“ im Eigenschafteninspektor. Sie können auch im Eigenschafteninspektor für das Bild auf Größe zurücksetzen klicken.

Ändern Sie die Bildgröße, wie im Abschnitt Bild skalieren beschrieben.

Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Neu auflösen“.

Wählen Sie Bearbeiten > Bild. Sie können die folgenden Dreamweaver-Bildbearbeitungsfunktionen auswählen:

Wählen Sie eine Vorgabe aus und legen Sie das Dateiformat und das Qualitätsniveau fest. Während mit dem Schieberegler die verschiedenen Qualitätsstufen anzeigen, können Sie im Dialogfeld sehen, wie sich die Dateigröße des Bilds verändert. Wenn Sie alle gewünschten Änderungen vorgenommen haben, klicken Sie auf „OK“.

Fügt einer in der Größe geänderten JPEG- oder GIF-Bilddatei Pixel hinzu bzw. entfernt Pixel, um das Erscheinungsbild des Originals weitgehend zu reproduzieren. Die Neuauflösung eines Bilds führt zu einer kleineren Dateigröße und einer kürzeren Downloadzeit.

Wenn Sie die Größe eines Bilds in Dreamweaver ändern, können Sie es neu auflösen, um den neuen Maßen Rechnung zu tragen. Wenn ein Bitmapobjekt neu aufgelöst wird, werden Pixel dem Bild hinzugefügt oder daraus entfernt, um es größer oder kleiner zu machen. Die Neuauflösung eines Bilds in eine höhere Auflösung geht im Allgemeinen mit geringen Qualitätsverlusten einher. Bei einer Neuberechnung in eine niedrigere Auflösung gehen jedoch immer Daten verloren und dies führt in der Regel zu Qualitätseinbußen.

Ermöglicht Ihnen das Bearbeiten des Bilds durch Reduzieren des Bildbereichs. Verwenden Sie die Zuschnittfunktion, um das Motiv mehr in den Mittelpunkt zu stellen und unerwünschte Bereiche zu entfernen, die vom zentralen Motiv ablenken.

Ändert den Kontrast oder die Helligkeit der Pixel eines Bilds. Helligkeit und Kontrast wirken sich auf die Lichter, Tiefen und Mitteltöne eines Bilds aus. Normalerweise wird die Option „Helligkeit/Kontrast“ zur Korrektur von zu dunklen oder zu hellen Bildern verwendet.

Stellt den Fokus eines Bilds ein, indem der Kontrast der im Bild gefundenen Kanten erhöht wird. Wenn Sie ein Bild scannen oder eine Aufnahme mit einer Digitalkamera machen, werden die Objektkanten im Bild von den meisten Bilderfassungsprogrammen standardmäßig weichgezeichnet. Durch Scannen wird verhindert, dass extrem feine Details in den Pixeln verloren gehen, aus denen Digitalbilder bestehen. Um jedoch die Details in einem Digitalbild herauszuarbeiten, ist es oftmals erforderlich, das Bild scharf zu zeichnen. Mit der Option „Scharf stellen“ wird der Kantenkontrast erhöht und das Bild wirkt schärfer.

Öffnen Sie die Seite, die das zuzuschneidende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:

• Klicken Sie im Eigenschafteninspektor für Bilder auf das Symbol für das Zuschneidewerkzeug .

• Wählen Sie Bearbeiten > Bild > Zuschneiden.

• Um das ausgewählte Bild herum werden Zuschneidegriffe angezeigt.

Ein Dialogfeld informiert Sie darüber, dass die zuzuschneidende Bilddatei auf der Festplatte geändert wird. Klicken Sie auf OK.

Sämtliche Pixel des ausgewählten Bitmaps, die außerhalb des Begrenzungsrahmens liegen, werden entfernt, aber die anderen Objekte im Bild bleiben erhalten.

Überprüfen Sie in der Vorschau, ob das Bild Ihren Erwartungen entspricht. Andernfalls wählen Sie Bearbeiten > Rückgängig Zuschneiden, um das Originalbild wiederherzustellen.

Öffnen Sie die Seite mit dem Bild, das Sie optimieren möchten. Wählen Sie das Bild aus und führen Sie einen der folgenden Schritte aus:

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

• Wählen Sie Bearbeiten > Bild > Optimieren.

Nehmen Sie im Dialogfeld Bildoptimierung die gewünschten Änderungen vor und klicken Sie auf „OK“.

• Klicken Sie im Eigenschafteninspektor des Bilds auf die Schaltfläche Scharf stellen.

• Wählen Sie Bearbeiten > Bild > Scharf stellen.

Sie können den Grad der Scharfzeichnung bestimmen, den Dreamweaver auf das Bild anwendet, indem Sie den Schieberegler ziehen. Sie können auch einen Wert zwischen 0 und 10 im Textfeld eingeben. Während Sie die Schärfe des Bilds im Dialogfeld Scharf stellen einstellen, können Sie die Änderungen am Bild in einer Vorschau verfolgen.

Speichern Sie die Änderungen mit Datei > Speichern oder stellen Sie das Originalbild wieder her, indem Sie Bearbeiten > Rückgängig Scharf stellen wählen.

• Klicken Sie im Eigenschafteninspektor des Bilds auf die Schaltfläche Helligkeit und Kontrast.

• Wählen Sie Bearbeiten > Bild > Helligkeit/Kontrast.

• Wählen Sie im Bedienfeld Einfügen in der Dropdown-Liste HTML aus. Wählen Sie in der Liste der Optionen Rollover-Bild.

• Wählen Sie Einfügen > HTML > Rollover-Bild.

Wählen Sie im Dialogfeld Rollover-Bild einfügen die Bilder aus und legen Sie die Eigenschaften für das Rollover fest. Sie können die folgenden Eigenschaften definieren:

Der Name des Rollover-Bilds.

Das Bild, das beim Laden der Seite angezeigt werden soll. Geben Sie den Pfad in das Textfeld ein oder klicken Sie auf „Durchsuchen“ und wählen Sie das Bild aus.

Das Bild, das angezeigt werden soll, wenn der Zeiger über das Originalbild bewegt wird. Geben Sie den Pfad ein oder klicken Sie auf „Durchsuchen“, um das Bild auszuwählen.

Lädt die Bilder vorab in den Cache des Browsers, sodass es nicht zu Verzögerungen kommt, wenn der Zeiger über das Bild bewegt wird.

Optional: Eine Beschreibung des Bilds für Benutzer, die einen reinen Textbrowser verwenden.

Die Datei, die geöffnet werden soll, wenn ein Benutzer auf das Rollover-Bild klickt. Geben Sie den Pfad ein oder klicken Sie auf „Durchsuchen“ und wählen Sie die Datei aus.

Um eine Vorschau des Rollover-Bilds aufzurufen, wählen Sie Datei > Echtzeitvorschau oder drücken Sie F12.

Zum Öffnen eines externen Editors führen Sie einen der folgenden Schritte aus:

• Doppelklicken Sie auf das Bild, das Sie bearbeiten möchten.

• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (macOS) auf das zu bearbeitende Bild. Klicken Sie dann auf Bearbeiten mit > Durchsuchen und wählen Sie einen Editor.

• Wählen Sie das zu bearbeitende Bild aus und klicken Sie im Eigenschafteninspektor auf Bearbeiten.

• Doppelklicken Sie im Bedienfeld Dateien auf die Bilddatei, um den primären Bildeditor zu starten. Wenn Sie keinen Bildeditor angegeben haben, startet Dreamweaver den Standardeditor für den Dateityp.

Wenn das aktualisierte Bild nach der Rückkehr zum Dreamweaver-Fenster nicht angezeigt wird, wählen Sie das Bild aus und klicken im Eigenschafteninspektor auf die Schaltfläche „Aktualisieren“.

Wählen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (macOS) und klicken Sie im linken Bedienfeld auf die Kategorie Dateitypen/Editoren.

Wählen Sie in der Liste „Erweiterungen“ die Erweiterung aus, für die Sie einen externen Editor festlegen möchten.

Navigieren Sie im Dialogfeld Externen Editor auswählen zu der Anwendung, die Sie als Editor für diesen Dateityp starten möchten.

Klicken Sie im Dialogfeld Voreinstellungen auf Zu primärem Editor machen, wenn dieser Editor der primäre Editor für diesen Dateityp werden soll.

Dreamweaver verwendet automatisch den primären Editor, wenn Sie diesen Bildtyp bearbeiten. Die anderen aufgeführten Editoren können Sie im Kontextmenü für das Bild im Dokumentfenster wählen.

Wählen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (macOS) und klicken Sie im linken Bedienfeld auf die Kategorie Dateitypen/Editoren.

Klicken Sie im Dialogfeld Voreinstellungen in der Kategorie „Dateitypen/Editoren“ auf die Schaltfläche „Hinzufügen“ (+) oberhalb der Liste „Erweiterungen“.

In der Liste „Erweiterungen“ wird ein Textfeld angezeigt.

Wählen Sie die Dateinamenerweiterung für den Dateityp aus, dem ein Editor zugewiesen werden soll.

Um einen externen Editor für den Dateityp anzugeben, klicken Sie auf die Schaltfläche Hinzufügen (+) über der Liste „Editoren“.

Ein Dialogfeld wird eingeblendet, in dem Sie die Anwendung auswählen können, mit der dieser Bildtyp bearbeitet werden soll.

Klicken Sie auf Zu primärem Editor machen, wenn dieser Editor der primäre Editor für diesen Bildtyp sein soll.

Wählen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (macOS) und klicken Sie im linken Bedienfeld auf die Kategorie Dateitypen/Editoren.

Wählen Sie im Dialogfeld „Voreinstellungen“ in der Kategorie Dateitypen/Editoren in der Liste „Erweiterungen“ den zu ändernden Dateityp aus, um die vorhandenen Editoren anzuzeigen.

Wählen Sie in der Liste „Editoren“ den Editor aus, auf den sich die Änderung beziehen soll, und führen Sie dann einen der folgenden Schritte aus:

• Um einen Editor hinzuzufügen oder zu entfernen, klicken Sie auf die Schaltfläche Hinzufügen (+) bzw. Löschen (–) über der Liste „Editoren“.

• Klicken Sie auf die Schaltfläche Zu primärem Editor machen, um einen neuen Editor festzulegen, der standardmäßig zum Bearbeiten gestartet wird.