Hier erfahren Sie, wie Sie Bilder in Dreamweaver einfügen, ersetzen, vergrößern und verkleinern.

Bilder sind wesentlicher Bestandteil einer Website, da sie Besuchern einen zusätzlichen Kontext bieten. Es gibt zwar eine Vielzahl von Grafikdateiformaten, auf Webseiten werden jedoch in erster Linie die Dateiformate GIF, JPEG und PNG verwendet. Die Formate GIF und JPEG sind mit Webseiten kompatibel und können in den meisten Browsern dargestellt werden. Im Folgenden erhalten Sie weitere Informationen über diese Dateiformate:

GIF (Graphic Interchange Format): GIF-Dateien verwenden maximal 256 Farben und sind am besten für Bilder ohne ineinander verlaufende Farbtöne geeignet. GIF-Dateien sind bei großen Bereichen mit gleichen Farben ideal (z. B. Navigationsleisten, Schaltflächen, Symbole, Logos oder andere Bilder mit einheitlichen Farben und Farbtönen).

JPEG (Joint Photographic Experts Group): Das JPEG-Dateiformat eignet sich insbesondere für Fotos und Bilder mit kontinuierlichen Farbtönen, da JPEG-Dateien Millionen von Farben enthalten können. Je höher die Qualität des JPEG-Bilds ist, desto größer wird die Datei und desto länger dauert die Übertragung. Durch Komprimieren der JPEG-Datei kann ein guter Kompromiss zwischen Bildqualität und Dateigröße erreicht werden.

PNG (Portable Network Group): Das PNG-Dateiformat ist eine patentfreie Alternative zu GIF-Dateien. Es unterstützt Bilder mit indizierten Farben, Graustufen und Echtfarben sowie einen Alphakanal zur Darstellung von Transparenz. In PNG-Dateien bleiben die ursprünglichen Daten zu Ebenen, Vektoren, Farben und Effekten wie Schlagschatten erhalten. Außerdem bleiben alle Elemente jederzeit vollständig bearbeitbar. Die Dateien müssen die Dateinamenserweiterung „.png“ haben, damit Dreamweaver sie als PNG-Dateien erkennt.

Dreamweaver ist kein WYSIWYG-Editor (What You See Is What You Get, Echtbilddarstellung). Das heißt, Sie können Bilder in Dreamweaver hinzu- und einfügen, aber nicht in der Benutzeroberfläche verschieben und platzieren.

Zum Verschieben von Bildern im Layout müssen Sie CSS verwenden, mit dem der HTML-Inhalt wie gewünscht angezeigt wird. In den grundlegenden Tutorials zu HTML und CSS erfahren Sie, wie Sie Bilder über Code anpassen. Sie können sich auch dieses Tutorial zum Arbeiten mit Bildern in Dreamweaver ansehen.

In den folgenden Abschnitten erfahren Sie, wie Sie Bilder in der Dreamweaver-Applikation einfügen und verwenden.

Bilder einfügen

Wenn Sie ein Bild in ein Dreamweaver-Dokument einfügen, wird im HTML-Quellcode ein Verweis auf die Datei erstellt. Damit dieser Verweis problemlos funktioniert, muss sich die Bilddatei in der aktuellen Site befinden. Falls sich das Bild nicht in der aktuellen Site befindet, werden Sie von Dreamweaver gefragt, ob Sie die Datei in die Site kopieren möchten.

Mit Dreamweaver können Sie Bilder auch dynamisch einfügen. Dynamische Bilder sind Bilder, die sich häufig ändern. Dazu zählen z. B. Rotationssysteme für Werbebanner, bei denen ein Banner nach dem Zufallsprinzip aus der Liste der potenziellen Banner ausgewählt wird. Wenn eine Seite abgerufen wird, zeigt das System dynamisch das Bild für das ausgewählte Banner an.

Sie können eine Ebene auch per Drag & Drop aus dem Bedienfeld „Extract“ an eine beliebige Position in der Dreamweaver-Live-Ansicht ziehen, indem Sie Live-Hilfslinien und die Elementschnellansicht verwenden. In das Bedienfeld „Extract“ können PSD-Dateien hochgeladen werden. Anschließend ziehen Sie eine beliebige Ebene per Drag & Drop aus der PSD-Datei direkt in Ihr Dreamweaver-Dokument.

Nachdem Sie ein Bild eingefügt haben, können Sie die Bildbeschreibung und Attribute für die Barrierefreiheit festlegen, die von Bildschirmlesegeräten für sehbehinderte Benutzer gelesen werden können. Sie können diese Attribute im HTML-Code bearbeiten.

Weitere Informationen zum Extrahieren von Bildern aus PSD-Kompositionen finden Sie unter Bilder aus PSD-Dateien extrahieren.

  1. Setzen Sie die Einfügemarke im Dokumentfenster auf 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.
  2. 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.

    Hinweis:

    Beim Einfügen von Bildern können Sie auch den absoluten Pfad zu einem Bild verwenden, unter dem es sich auf einem Remote-Server befindet, also nicht auf der lokalen Festplatte gespeichert ist. Wenn bei der Arbeit jedoch Probleme mit der Performance auftreten, können Sie die Anzeige der Bilder in der Entwurfsansicht deaktivieren, indem Sie Befehle > Externe Dateien anzeigen deaktivieren.

  3. Klicken Sie auf OK

Festlegen von Bildeigenschaften

Mit dem Eigenschafteninspektor für Bilder können Sie die Eigenschaften eines Bilds festlegen. Wenn nicht alle Bildeigenschaften angezeigt werden, klicken Sie unten rechts auf den Erweiterungspfeil.

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

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

  3. Legen Sie die gewünschten Bildoptionen fest.

    B/H

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

    Hinweis:

    Sie können diese Werte ändern, um die Darstellungsgröße der Bildinstanz zu skalieren. Allerdings verringert sich die Downloadzeit durch diese Änderung nicht, da der Browser erst die Daten des gesamten Bilds herunterladen muss, bevor es skaliert werden kann. Wenn Sie die Downloadzeit verkürzen und sicherstellen möchten, dass alle Instanzen eines Bilds dieselbe Größe haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm.

    Quelle

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

    Hyperlink

    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.

    Alt

    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.

    „Map“ und Hotspot-Tools

    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.

    Bearbeiten

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

    Bildeinstellungen bearbeiten

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

    Von Original aktualisieren

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

    Zuschneiden

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

    Neu auflösen

    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.

    Helligkeit und Kontrast

    Ändert die Helligkeits- und Kontrasteinstellungen eines Bilds.

    Scharf stellen

    Ändert die Bildschärfe.

    Hinweis:

    In der Live-Ansicht können Sie Bildattribute auch mit dem Schnellansicht-Eigenschafteninspektor bearbeiten.

Eingabehilfen-Attribute für Bilder im Code bearbeiten

Wenn Sie Eingabehilfen-Attribute für ein Bild eingefügt haben, können Sie diese Werte im HTML-Code bearbeiten.

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

  2. 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 den Wert des Feldes Alt im Eigenschafteninspektor.


Bild skalieren

Sie können Elemente wie Bilder, Plug-Ins, Shockwave- oder SWF-Dateien, Applets und ActiveX-Steuerelemente in Dreamweaver visuell vergrößern oder verkleinern.

Durch visuelles Vergrößern bzw. Verkleinern eines Bilds können Sie sich ansehen, wie sich das Bild bei verschiedenen Größeneinstellungen auf das Layout auswirkt. Die Bilddatei wird dabei allerdings nicht auf die von Ihnen angegebenen Proportionen skaliert. Wenn Sie ein Bild in Dreamweaver visuell vergrößern oder verkleinern, ohne die Bilddatei mithilfe einer Bildbearbeitungssoftware zu skalieren, wird das Bild beim Laden der Seite im Browser des Benutzers skaliert. Das Herunterladen der Seite dauert dann möglicherweise länger und das Bild wird im Browser des Benutzers unter Umständen nicht korrekt angezeigt.

Wenn Sie die Downloadzeit verkürzen und sicherstellen möchten, dass alle Instanzen eines Bilds dieselbe Größe haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm. Lesen Sie die folgende Vorgehensweise, um zu erfahren, wie Sie ein Element visuell vergrößern oder verkleinern.

Größe von Elementen visuell ändern

  1. Wählen Sie das Element (beispielsweise ein Bild oder eine SWF-Datei) im Dokumentfenster aus.

    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.

  2. Ändern Sie die Größe des Elements mit einer der folgenden Methoden:
    • 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.
    Breite und Höhe eines Elements mit dem Eigenschafteninspektor anpassen
    Breite und Höhe eines Elements mit dem Eigenschafteninspektor anpassen
  3. 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.

Ursprüngliche Größe eines Bilds wiederherstellen

Klicken Sie im Eigenschafteninspektor für das Bild auf die Schaltfläche „Größe zurücksetzen“.

Ursprüngliche Größe eines Bilds wiederherstellen
Ursprüngliche Größe eines Bilds wiederherstellen

Neu auflösen der Bilder nach einer Größenänderung

Wenn Sie die Größe eines Bilds in Dreamweaver ändern, können Sie das Bild auch mit den neuen Abmessungen neu auflösen. Bei der Neuauflösung werden einer vergrößerten oder verkleinerten JPEG- oder GIF-Bilddatei Pixel hinzugefügt bzw. daraus entfernt, 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.

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

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

    Bild in Dreamweaver neu auflösen
    Bild in Dreamweaver neu auflösen

    Hinweis:

    Bildplatzhalter und andere Elemente mit Ausnahme von Bitmapbildern können nicht neu aufgelöst werden.

Bilder in Dreamweaver bearbeiten

Dreamweaver enthält allgemeine Bildbearbeitungsfunktionen, mit denen Sie Bilder ändern können, ohne eine externe Bildbearbeitungsanwendung wie Photoshop verwenden zu müssen. Die Bildbearbeitungsfunktionen von Dreamweaver sind so ausgelegt, dass Sie ohne Probleme mit Content-Designern zusammenarbeiten können, um Bilddateien für Websites zu erstellen.

Sie können Bilder in Dreamweaver neu auflösen, zuschneiden, optimieren und scharf stellen. Darüber hinaus können Sie die Helligkeit und den Kontrast von Bildern ändern.

Hinweis:

Sie können die Bildbearbeitungsfunktionen von Dreamweaver auch verwenden, wenn Photoshop oder andere Bildbearbeitungsanwendungen nicht auf Ihrem Computer installiert sind.

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

    Optimieren

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

    Neu auflösen

    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.

    Zuschneiden

    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.

    Helligkeit und Kontrast

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

    Scharf stellen

    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.

    Hinweis:

    Die Bildbearbeitungsfunktionen von Dreamweaver können nur auf Bilder im JPEG-, GIF- oder PNG-Dateiformat angewandt werden. Andere Bitmap-Bilddateiformate können mit diesen Bildbearbeitungsfunktionen nicht bearbeitet werden.

Bilder zuschneiden

In Dreamweaver können Sie Bitmapdateibilder zuschneiden.

Hinweis:

Beim Zuschneiden eines Bilds wird die Quellbilddatei auf der Festplatte geändert. Sie sollten eine Sicherungskopie der Bilddatei für den Fall anlegen, dass Sie das Originalbild wiederherstellen müssen.

  1. Ö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 Zuschnittwerkzeug .
    • Wählen Sie Bearbeiten > Bild > Zuschneiden.
    • Um das ausgewählte Bild herum werden Zuschneidegriffe angezeigt.
    Bilder in Dreamweaver zuschneiden
    Bilder in Dreamweaver zuschneiden
  2. Bewegen Sie die Zuschneidegriffe, bis der Begrenzungsrahmen den Bereich des Bilds umrahmt, den Sie beibehalten möchten.
  3. Doppelklicken Sie in den Begrenzungsrahmen oder drücken Sie die Eingabetaste, um die Auswahl zuzuschneiden.
  4. 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, die anderen Objekte im Bild bleiben jedoch erhalten.

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

    Hinweis:

    Sie können die Auswirkungen des Befehls „Zuschneiden“ so lange rückgängig machen und die Originalbilddatei wiederherstellen, bis Sie Dreamweaver beenden oder die Datei mit einem externen Bildbearbeitungsprogramm bearbeiten.

Bilder optimieren

Sie können Bilder in Ihren Webseiten in Dreamweaver optimieren.

  1. Ö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.
    Bildeinstellungen mit dem Eigenschafteninspektor bearbeiten
    Bildeinstellungen mit dem Eigenschafteninspektor bearbeiten
  2. Nehmen Sie im Dialogfeld Bildoptimierung die gewünschten Änderungen vor und klicken Sie auf „OK“.

    Bild in Dreamweaver optimieren
    Bild in Dreamweaver optimieren

Bilder scharf stellen

Der Befehl „Scharf stellen“ vergrößert den Kontrast der Pixel am Objektrand, um die Definition oder Schärfe eines Bilds zu verbessern.

  1. Öffnen Sie die Seite, die das scharf zu stellende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
    • Klicken Sie im Eigenschafteninspektor des Bilds auf die Schaltfläche Scharf stellen.
    • Wählen Sie Bearbeiten > Bild > Scharf stellen.
  2. 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.

    Bilder in Dreamweaver scharf stellen
    Bilder in Dreamweaver scharf stellen
  3. Klicken Sie auf „OK“, wenn Sie mit dem Ergebnis zufrieden sind.
  4. Speichern Sie die Änderungen mit Datei > Speichern oder stellen Sie das Originalbild wieder her, indem Sie Bearbeiten > Rückgängig Scharf stellen wählen.

    Hinweis:

    Sobald Sie die Seite mit dem Bild speichern, können Sie die Auswirkungen des Befehls „Scharf stellen“ nicht mehr rückgängig machen und das Originalbild nicht wiederherstellen. Wenn Sie die Seite speichern, können die am Bild vorgenommenen Änderungen nicht mehr rückgängig gemacht werden.

Helligkeit und Kontrast von Bildern anpassen

Mit der Option „Helligkeit und Kontrast“ ändern Sie den Kontrast oder die Helligkeit der Pixel eines Bilds. Diese Option wirkt sich auf die Lichter, Tiefen und Mitteltöne eines Bilds aus. Normalerweise wird die Option „Helligkeit und Kontrast“ zur Korrektur von zu dunklen oder zu hellen Bildern verwendet.

  1. Öffnen Sie die Seite, die das einzustellende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
    • Klicken Sie im Eigenschafteninspektor des Bilds auf die Schaltfläche Helligkeit und Kontrast.
    • Wählen Sie Bearbeiten > Bild > Helligkeit/Kontrast.
  2. Ziehen Sie an den Schiebereglern für „Helligkeit“ und „Kontrast“, um die Einstellungen anzupassen. Die gültigen Werte liegen im Bereich von -100 bis 100.
    Helligkeit und Kontrast von Bildern in Dreamweaver anpassen
    Helligkeit und Kontrast von Bildern anpassen
  3. Klicken Sie auf „OK“.

Rollover-Bilder erstellen

Ein Rollover ist ein Bild, das sich im Browser ändert, wenn Sie den Mauszeiger darüber bewegen. Sie benötigen zwei Bilder, um ein Rollover zu erstellen: das primäre Bild, das angezeigt wird, wenn die Seite geladen wird, und das sekundäre Bild, das angezeigt wird, wenn der Mauszeiger über das primäre Bild bewegt wird. Beide Bilder eines Rollovers müssen gleich groß sein. Ist dies nicht der Fall, passt Dreamweaver die Größe des zweiten Bilds an die Größe des ersten Bilds an.

Rollover-Bilder werden automatisch so eingerichtet, dass sie auf das onMouseOver-Ereignis reagieren. Sie können ein Bild auch so konfigurieren, dass es auf andere Ereignisse reagiert, z. B. auf einen Mausklick, und ein Rollover-Bild ausgetauscht wird.

  1. Setzen Sie die Einfügemarke im Dokumentfenster auf die Stelle, an der Sie das Rollover einfügen möchten.
  2. Fügen Sie das Rollover mit einer der folgenden Methoden ein:
    • 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.
  3. 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:

    Eigenschaften eines Rollover-Bilds festlegen
    Eigenschaften eines Rollover-Bilds festlegen

    Bildname

    Der Name des Rollover-Bilds.

    Originalbild

    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.

    Rollover-Bild

    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.

    Rollover-Bild vorausladen

    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.

    Alternativtext

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

    Wenn angeklickt, gehe zu URL

    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.

    Hinweis:

    Wenn Sie keinen Hyperlink für das Bild festlegen, fügt Dreamweaver einen Null-Hyperlink (#) in den HTML-Quellcode ein, mit dem das Rollover-Verhalten verknüpft wird. Wenn Sie den Null-Hyperlink entfernen, funktioniert das Rollover-Bild nicht.

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

  5. Bewegen Sie den Zeiger im Browser über das Originalbild, um das Rollover-Bild anzuzeigen.

    Hinweis:

    Die Wirkung eines Rollover-Bilds ist in der Entwurfsansicht nicht sichtbar.

Mit externen Bildeditoren arbeiten

Während Sie in Dreamweaver arbeiten, können Sie ein ausgewähltes Bild in einem externen Bildeditor öffnen. Wenn Sie nach dem Speichern des Bilds zu Dreamweaver zurückkehren, sind alle vorgenommenen Änderungen im Dokumentfenster zu sehen.

Sie können einen primären externen Editor festlegen und bestimmen, welche Dateitypen in einem Editor geöffnet werden sollen. Sie können mehrere Bildeditoren auswählen. Beispielsweise können Sie in den Voreinstellungen angeben, dass Photoshop zum Bearbeiten von JPEG-Dateien gestartet werden soll und ein anderer Bildeditor zum Bearbeiten von animierten GIFs.

Externen Bildeditor starten

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

Externen Bildeditor für einen vorhandenen Dateityp festlegen

Sie können einen Bildeditor zum Öffnen und Bearbeiten von Grafikdateien auswählen. Führen Sie zum Auswählen eines externen Bildeditors die folgenden Schritte aus:

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

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

    Externen Editor für bestimmte Dateitypen festlegen
    Externen Editor für bestimmte Dateitypen festlegen
  3. Klicken Sie auf die Schaltfläche „Hinzufügen“ (+) über der Liste „Editoren“.
  4. Navigieren Sie im Dialogfeld Externen Editor auswählen zu der Anwendung, die Sie als Editor für diesen Dateityp starten möchten.

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

  6. Wenn Sie weitere Editoren für diesen Dateityp festlegen möchten, wiederholen Sie Schritt 3 und 4.

    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.

Neuen Dateityp zur Liste „Erweiterungen“ hinzufügen

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

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

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

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

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

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

Vorhandene Editoreinstellung ändern

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

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

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

Verhalten für Bilder definieren

Sie können ein beliebiges verfügbares Verhalten an ein Bild oder einen Hotspot anfügen. Wenn Sie ein Verhalten an einen Hotspot anfügen, fügt Dreamweaver den HTML-Code in das area-Tag ein. Speziell für Bilder stehen drei Verhalten zur Auswahl: „Bilder vorausladen“, „Bild austauschen“ und „Bildaustausch wiederherstellen“.

Bilder vorausladen

Lädt Bilder, die nicht sofort auf der Seite angezeigt werden, z. B. Bilder, die mithilfe von Verhalten, AP-Elementen oder JavaScript ausgetauscht werden, in den Browser-Cache. Indem Bilder vorausgeladen werden, lassen sich durch das Herunterladen verursachte Verzögerungen verhindern, wenn die Bilder angezeigt werden sollen.

Bild austauschen

Ersetzt ein Bild durch ein anderes, indem das src-Attribut des img-Tags geändert wird. Verwenden Sie diese Aktion, um Schaltflächen-Rollover und sonstige Bildeffekte zu erstellen. (Sie können damit auch mehrere Bilder gleichzeitig austauschen.)

Bildaustausch wiederherstellen

Stellt für die letzte Gruppe von vertauschten Bildern die vorherigen Quelldateien wieder her. Diese Aktion wird immer automatisch angefügt, wenn Sie die Aktion „Bild austauschen“ an ein Objekt anfügen. Daher müssen Sie diese Aktion in der Regel nicht manuell auswählen.

Mithilfe von Verhalten können Sie auch anspruchsvollere Navigationssysteme (z. B. Sprungmenüs) erstellen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie