Bilder

Es gibt viele verschiedene Arten von Grafikdateiformaten. Auf Webseiten werden jedoch im Allgemeinen nur drei Grafikdateiformate verwendet: GIF, JPEG und PNG. Die Formate GIF und JPEG werden am umfassendsten unterstützt und können von den meisten Browsern dargestellt werden.

GIF-Dateien (Graphic Interchange Format)

GIF-Dateien umfassen maximal 256 Farben und eignen sich besonders für die Anzeige von Bildern, die keine ineinander verlaufenden Farbtöne oder großen Bereiche mit einander sehr ähnlichen Farben enthalten (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-Bildes ist, desto größer wird die Datei und desto länger dauert die Übertragung. Oft kann durch Komprimieren der JPEG-Datei ein guter Ausgleich zwischen Bildqualität und Dateigröße erzielt werden.

Das PNG-Dateiformat (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 Transparenzdarstellung. PNG ist das programmeigene Dateiformat von Adobe® Fireworks®. In PNG-Dateien bleiben alle ursprünglichen Daten für Ebenen, Vektoren, Farben und Effekte (wie z. B. Schlagschatten) erhalten und alle Elemente sind stets voll bearbeitbar. Die Dateien müssen die Erweiterung .png haben, damit Dreamweaver sie als PNG-Dateien erkennt.

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 die Datei nicht in der aktuellen Site befindet, werden Sie von Dreamweaver gefragt, ob Sie die Datei in die Site kopieren möchten.

Sie können Bilder auch dynamisch einfügen. Dynamische Bilder ändern sich häufig. So müssen zum Beispiel Rotationssysteme für Werbebanner einzelne Banner nach dem Zufallsprinzip aus einer Liste potentieller Banner auswählen und das ausgewählte Banner dynamisch anzeigen, wenn eine Seite angefordert wird.

Nachdem Sie ein Bild eingefügt haben, können Sie für das Bild-Tag Eingabehilfen-Attribute festlegen, die von Bildschirmlesegeräten für sehbehinderte Benutzer gelesen werden können. Diese Attribute können im HTML-Code bearbeitet werden.

Ein Tutorial zum Einfügen von Bildern finden Sie unter Adding images.

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

    • Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf das Symbol „Bilder“ .
    • Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie das Symbol „Bild“ aus. Wenn das Symbol „Bild“ im Bedienfeld „Einfügen“ angezeigt wird, können Sie das Symbol in das Dokumentfenster ziehen (bzw. in die Codeansicht, wenn Sie den Code bearbeiten).
    • 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.
  2. Führen Sie im daraufhin erscheinenden Dialogfeld einen der folgenden Schritte aus:
    • Wählen Sie „Dateisystem“, um eine Bilddatei auszuwählen.
    • Wählen Sie „Datenquellen“, um eine dynamische Bildquelle auszuwählen.
    • Klicken Sie auf die Schaltfläche „Sites und Server“, um in einem Remote-Ordner einer Ihrer Dreamweaver-Sites eine Bilddatei auszuwählen.
  3. 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 absolute Pfade zu Bildern auf Remote-Servern verwenden (d. h. zu Bildern, die sich nicht auf der lokalen Festplatte befinden). Wenn Sie bei der Arbeit jedoch Leistungsprobleme feststellen, empfiehlt es sich unter Umständen, die Anzeige der Bilder in der Entwurfsansicht zu deaktivieren, indem Sie die Auswahl von „Befehle“ > „Externe Dateien anzeigen“ aufheben.

  4. Klicken Sie auf „OK“. Das Dialogfeld „Eingabehilfen-Attribute für Image-Tag“wird eingeblendet, sofern Sie das Dialogfeld in den Voreinstellungen aktiviert haben („Bearbeiten“ > „Voreinstellungen“).

  5. Geben Sie Werte in die Textfelder „Alternativtext“ und „Lange Beschreibung“ ein und klicken Sie anschließend auf „OK“.
    • Geben Sie im Textfeld „Alternativer Text“ einen Namen oder eine kurze Beschreibung für das Bild ein. Die Informationen, die Sie hier eingeben, werden später vom Bildschirmlesegerät vorgelesen. Diese Informationen sollten nicht länger als etwa 50 Zeichen sein. Für längere Beschreibungen können Sie im Textfeld „Lange Beschreibung“ einen Hyperlink auf eine Datei angeben, die nähere Informationen über das Bild enthält.
    • Geben Sie im Feld „Lange Beschreibung“ den Speicherort einer Datei ein, die angezeigt werden soll, wenn der Benutzer auf das Bild klickt. Sie können auch auf das Ordnersymbol klicken und die Datei aus der Verzeichnisstruktur auswählen. Dieses Feld enthält einen Hyperlink auf eine Datei, die sich auf das Bild bezieht oder nähere Informationen darüber bietet.

    Hinweis:

    Je nach Bedarf können Sie in nur einem der Textfelder Text eingeben oder in beiden Textfeldern. Das Bildschirmlesegerät liest dann das „alt“-Attribut des Bildes.

    Hinweis:

    Wenn Sie auf „Abbrechen“ klicken, wird das Bild in das Dokument eingefügt, ohne jedoch von Dreamweaver mit Eingabehilfen-Tags oder -Attributen versehen zu werden.

  6. Legen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschten Eigenschaften des Bildes fest.

Festlegen von Bildeigenschaften

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

Bildeigenschaften im Eigenschafteninspektor.
  1. Wählen Sie „Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor für ein ausgewähltes Bild anzuzeigen.

  2. Geben Sie in das Textfeld unterhalb des Piktogramms einen Namen ein, damit Sie sich auf das Bild beziehen können, wenn Sie ein Dreamweaver-Verhalten (beispielsweise „Bild vertauschen“) oder eine Skriptsprache wie JavaScript oder VBScript verwenden.
  3. Stellen Sie die gewünschten Bildoptionen ein.

    B / H

    Legen die Breite und Höhe des Bildes 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 Bildes entsprechen, wird das Bild unter Umständen 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 die Breite und Höhe ändern, um die Größe des jeweiligen Bildes zu skalieren. Dies hat jedoch keine Auswirkungen auf die Downloadzeit, da der Browser zunächst alle Bilddaten herunterlädt und erst dann das Bild skaliert. Wenn Sie die Downloadzeit verkürzen und sicherstellen möchten, dass alle Instanzen eines Bildes dieselbe Größe haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm.

    Quelle

    Gibt die Quelldatei des Bildes 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 Bildes 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 dem die verknüpfte Seite geladen werden soll. (Diese Option ist nur verfügbar, wenn das Bild 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.

    • _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. Dies ist das Standardziel, sodass Sie es normalerweise nicht ausdrücklich angeben müssen.

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

    Von Original aktualisieren

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

    Bildeinstellungen bearbeiten

     Öffnet das Dialogfeld „Bildvorschau“ und ermöglicht das Optimieren des Bildes.

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

    Scharf stellen

     Ändert die Bildschärfe.

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. Wählen Sie im Dokumentfenster ein Bild aus.
  2. Führen Sie einen der folgenden Schritte aus:
    • Bearbeiten Sie die jeweiligen Bildattribute in der Codeansicht.
    • Klicken Sie mit der rechten Maustaste (Windows) bzw. drücken Sie die Ctrl-Taste (Macintosh) und wählen Sie dann „Tag bearbeiten“.
    • Bearbeiten Sie den Wert des Feldes „Alt“ im Eigenschafteninspektor.

Bildgröße visuell ändern

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 Bildes 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, die Bilddatei jedoch nicht mithilfe einer Bildbearbeitungssoftware (z. B. Adobe Fireworks) auf die gewünschte Größe skalieren, wird das Bild beim Laden der Seite im Browser des Benutzers skaliert. Dadurch wird die Seite möglicherweise verzögert heruntergeladen und das Bild im Browser des Benutzers falsch angezeigt. Wenn Sie die Downloadzeit verkürzen und sicherstellen möchten, dass alle Instanzen eines Bildes dieselbe Größe haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm.

Wenn Sie die Größe eines Bildes in Dreamweaver ändern, können Sie es neu auflösen, um den neuen Maßen Rechnung zu tragen. 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 Bildes führt zu einer kleineren Dateigröße und einer kürzeren Downloadzeit.

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. Werden keine Größenänderungsgriffe angezeigt, klicken Sie neben das Element, dessen Größe Sie ändern möchten, und wählen Sie es dann erneut aus. Alternativ dazu können Sie im Tag-Selektor auf das entsprechende Tag 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), geben Sie dazu im Eigenschafteninspektor einen numerischen Wert ein. Elemente können visuell auf eine Mindestgröße von 8 x 8 Pixel verkleinert werden.
  3. Wenn Sie die Originalmaße eines in der Größe geänderten Elements wiederherstellen möchten, löschen Sie im Eigenschafteninspektor die Werte in den Feldern „B“ und „H“ oder klicken Sie auf die Schaltfläche „Größe zurücksetzen“.

Ursprüngliche Größe eines Bildes wiederherstellen

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

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

  1. Ändern Sie die Größe des Bildes, wie zuvor beschrieben.
  2. Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Neu auflösen“ .

    Hinweis:

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

Bild-Platzhalter einfügen

Ein Bild-Platzhalter ist eine Grafik, die Sie vorübergehend einsetzen, bis die endgültigen Grafiken für die Webseite bereitstehen. Sie können Größe und Farbe des Platzhalters bestimmen und ihn mit einer Beschriftung versehen.

  1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie eine Platzhaltergrafik einfügen möchten.
  2. Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Bild-Platzhalter“.

  3. Optional: Geben Sie unter „Name“ den Text ein, der als Beschriftung des Bild-Platzhalters dienen soll. Wenn Sie keine Beschriftung wünschen, lassen Sie das Feld einfach leer. Der Name muss mit einem Buchstaben beginnen und darf nur Buchstaben und Ziffern enthalten. Leerzeichen und ASCII-Sonderzeichen sind nicht zulässig.
  4. Erforderlich: Geben Sie in die Felder „Breite“ und „Höhe“ Maßangaben für das Bild in Pixel ein.
  5. Optional: Führen Sie unter „Farbe“ einen der folgenden Schritte aus, um eine Farbe anzuwenden:
    • Wählen Sie im Farbwähler eine Farbe aus.
    • Geben Sie den Hexadezimalwert für die gewünschte Farbe ein (z. B. #FF0000).
    • Geben Sie einen websicheren Farbnamen ein (z. B. „red“).
  6. Optional: Geben Sie unter „Alternativtext“ eine Beschreibung des Bildes für Benutzer an, die einen reinen Textbrowser verwenden.

    Hinweis:

    Im HTML-Code wird dabei automatisch ein Bild-Tag mit dem undefinierten Attribut src eingefügt.

  7. Klicken Sie auf „OK“.

    Die Farbe, die Größenattribute und die Beschriftung eines Platzhalters werden folgendermaßen angezeigt:

    Bild-Platzhalter mit Attributen.

    In einem Browserfenster sind die Beschriftung und die Größenangaben nicht sichtbar.

Bild-Platzhalter ersetzen

Ein Bild-Platzhalter ist kein Bild, das in einem Browser angezeigt wird. Bevor Sie eine Site veröffentlichen, sollten Sie alle verwendeten Bild-Platzhalter durch browserkompatible Bilddateien wie GIF- oder JPEG-Bilder ersetzen.

Wenn Sie über Fireworks verfügen, können Sie direkt aus dem Dreamweaver-Bild-Platzhalter heraus eine neue Grafik erstellen. Das neue Bild erhält dabei dieselben Maße wie der Platzhalter. Sie können das Bild in einem Bildeditor bearbeiten und dann wieder in Dreamweaver einfügen.

  1. Führen Sie im Dokumentfenster einen der folgenden Schritte aus:
    • Doppelklicken Sie auf den Bild-Platzhalter.
    • Klicken Sie auf den Bild-Platzhalter, um ihn auszuwählen, und klicken Sie dann im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf das Ordnersymbol neben dem Textfeld „Quelle“.
  2. Wählen Sie im Dialogfeld „Bildquelle“ das Bild aus, durch das Sie den Bild-Platzhalter ersetzen möchten, und klicken Sie dann auf „OK“.

Eigenschaften für Bild-Platzhalter festlegen

Zum Festlegen der Eigenschaften eines Bild-Platzhalters wählen Sie den Platzhalter im Dokumentfenster aus. Klicken Sie anschließend auf „Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor anzuzeigen. Um alle Attribute einzublenden, klicken Sie auf den Erweiterungspfeil in der Ecke rechts unten.

Legen Sie im Eigenschafteninspektor die gewünschten Angaben für Name, Breite, Höhe, Bildquelle, Alternativtext, Ausrichtung und Farbe des Bild-Platzhalters fest.

Eigenschafteninspektor für Bild-Platzhalter.

Im Eigenschafteninspektor für Platzhalter sind das graue Textfeld und das Textfeld „Ausrichten“ deaktiviert. Sie können diese Eigenschaften im Eigenschafteninspektor für Bilder festlegen, wenn Sie den Platzhalter durch ein Bild ersetzen.

  1. Wählen Sie eine der folgenden Optionen:

    B / H

    Legen die Breite und Höhe des Bild-Platzhalters in Pixel fest.

    Quelle

    Gibt die Quelldatei des Bildes an. Bei Bild-Platzhaltern ist dieses Feld leer. Klicken Sie auf „Durchsuchen“, um ein Ersatzbild für die Platzhaltergrafik auszuwählen.

    Hyperlink

    Gibt einen Hyperlink für den Bild-Platzhalter 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 Bildes 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.

    Erstellen

    Dient zum Starten von Fireworks, um ein Ersatzbild zu erstellen. Die Schaltfläche „ „Erstellen“ ist nur dann aktiviert, wenn auch Fireworks auf dem Computer installiert ist.

    Von Original aktualisieren

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

    Color

    Legt eine Farbe für den Bild-Platzhalter fest.

Bilder in Dreamweaver bearbeiten

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.

Bildbearbeitungsfunktionen

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

Hinweis:

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

  1. Wählen Sie „Modifizieren“ > „Bild“. Sie können beliebige dieser Dreamweaver-Bildbearbeitungsfunktionen auswählen:

    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 Bildes führt zu einer kleineren Dateigröße und einer kürzeren Downloadzeit.

    Wenn Sie die Größe eines Bildes 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 Bildes 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 Bildes durch Reduzieren des Bildbereichs. Im Allgemeinen wird ein Bild zugeschnitten, um das Motiv mehr in den Mittelpunkt zu stellen und unerwünschte Bereiche zu entfernen, von denen das zentrale Motiv im Bild umgeben ist.

    Helligkeit und Kontrast

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

    Scharf stellen

    Stellt den Fokus eines Bildes 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. Auf diese Weise 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. Dabei 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 Bildes wird die Quellbilddatei auf der Festplatte geändert. Aus diesem Grund sollten Sie 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 Zuschneidewerkzeug .
    • Wählen Sie „Modifizieren“ > „Bild“ > „Zuschneiden“.
    • Um das ausgewählte Bild herum werden Zuschneidegriffe angezeigt.
  2. Bewegen Sie die Zuschneidegriffe, bis der Begrenzungsrahmen den Bereich des Bildes 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, aber die anderen Objekte im Bild bleiben 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 in einem externen Bildbearbeitungsprogramm bearbeiten.

Bilder optimieren

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

  1. Öffnen Sie die Seite, die das zu optimierende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
    • Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche „Bildeinstellungen bearbeiten“ .
    • Wählen Sie „Modifizieren“ > „Bild“ > „Optimieren“.
  2. Nehmen Sie im Dialogfeld „Bildoptimierung“ die gewünschten Änderungen vor und klicken Sie auf „OK“.

Bilder scharf stellen

Der Befehl „Scharf stellen“ vergrößert den Kontrast der Pixel am Objektrand, um die Definition oder Schärfe eines Bildes 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 Bildes auf die Schaltfläche „Scharf stellen“ .
    • Wählen Sie „Modifizieren“ > „Bild“ > „Scharf stellen“.
  2. Sie können den Schärfegrad bestimmen, den Dreamweaver auf das Bild anwendet. Betätigen Sie hierzu den Schieberegler oder geben Sie im Textfeld einen Wert zwischen 0 und 10 ein. Während Sie die Schärfe des Bildes im Dialogfeld „Scharf stellen“ einstellen, können Sie die Änderungen am Bild in einer Vorschau betrachten.
  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:

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

Helligkeit und Kontrast von Bildern anpassen

„Helligkeit/Kontrast“ ändert den Kontrast oder die Helligkeit der Pixel eines Bildes. Dies wirkt sich auf die Lichter, Tiefen und Mitteltöne eines Bildes aus. Normalerweise wird die Option „Helligkeit/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 Bildes auf die Schaltfläche „Helligkeit/Kontrast“ .
    • Wählen Sie „Modifizieren“ > „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.
  3. Klicken Sie auf „OK“.

Rollover-Bilder erstellen

Sie können Rollover-Bilder in eine Seite einfügen. 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 (wird angezeigt, wenn die Seite geladen wird) und das sekundäre Bild (wird angezeigt, wenn der Mauszeiger über das primäre Bild bewegt wird). Die beiden Bilder eines Rollovers müssen dieselbe Größe haben. Ist dies nicht der Fall, passt Dreamweaver die Größe des zweiten Bildes an die Größe des ersten Bildes 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 (beispielsweise einen Mausklick) reagiert, sowie ein Rollover-Bild austauschen.

  1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das Rollover einfügen möchten.
  2. Fügen Sie das Rollover mit einer der folgenden Methoden ein:
    • Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie das Symbol „Rollover-Bild“ aus. Wenn das Symbol „Rollover-Bild“ im Bedienfeld „Einfügen“ angezeigt wird, können Sie es direkt in das Dokumentfenster ziehen.
    • Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Rollover-Bild“.
  3. Legen Sie die Optionen fest und klicken Sie auf „OK“.

    Bildname

    Der Name des Rollover-Bildes.

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

  4. Wählen Sie „Datei“ > „Vorschau in Browser“ 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-Bildes 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 Bildes zu Dreamweaver zurückkehren, sind alle vorgenommenen Änderungen im Dokumentfenster zu sehen.

Sie können Fireworks als Ihren primären externen Bildeditor einrichten. Sie können auch bestimmen, welche Dateitypen ein Editor öffnen soll, und Sie können mehrere Bildeditoren auswählen. Beispielsweise können Sie in den Voreinstellungen angeben, dass Fireworks zum Bearbeiten von GIF-Dateien gestartet werden soll und ein anderer Bildeditor zum Bearbeiten von JPEG-Dateien.

Externen Bildeditor starten

  1. 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 (Macintosh) auf das zu bearbeitende Bild. Wählen Sie dann „Bearbeiten mit“ > „Durchsuchen“ und wählen Sie einen Editor aus.
    • 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.

    Hinweis:

    Wenn Sie ein Bild vom Bedienfeld „Dateien“ aus öffnen, sind die oben beschriebenen Fireworks-Integrationsfunktionen nicht aktiv. Fireworks öffnet nicht die ursprüngliche PNG-Datei. Um die Fireworks-Integrationsfunktionen zu nutzen, müssen Sie Bilder vom Dokumentfenster aus öffnen.

    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.

  1. Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld „Voreinstellungen“ zu öffnen:
    • Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf die Kategorie „Dateitypen/Editoren“.
    • Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
  2. Wählen Sie in der Liste „Erweiterungen“ die Dateierweiterung aus, für die Sie einen externen Editor festlegen möchten.
  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. Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld „Voreinstellungen“ zu öffnen:

    • Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf die Kategorie „Dateitypen/Editoren“.
    • Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „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. Geben Sie die Dateinamenerweiterung für den Dateityp ein, bei dem ein Editor gestartet werden soll.
  4. Um einen externen Editor für den Dateityp anzugeben, klicken Sie auf die Schaltfläche „Hinzufügen (+)“ oberhalb 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. Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld „Voreinstellungen“ zu öffnen:

    • Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf die Kategorie „Dateitypen/Editoren“.
    • Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
  2. Wählen Sie im Dialogfeld „Voreinstellungen“ in der Kategorie „Dateitypen/Editoren“ in der Liste „Erweiterungen“ den zu ändernden Dateityp aus, um den bzw. die vorhandenen Editor(en) 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:
    • Verwenden Sie die Schaltfläche „Hinzufügen“ (+) oder „Entfernen“ (–) über der Liste „Editoren“, um einen Editor hinzuzufügen oder zu entfernen.
    • Klicken Sie auf die Schaltfläche „Zu primärem Editor machen“, um einen neuen Editor festzulegen, der standardmäßig zum Bearbeiten gestartet wird.

Bilder mit Verhalten versehen

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, in den Browser-Cache (z. B. Bilder, die mithilfe von Verhalten, AP-Elementen oder JavaScript ausgetauscht werden). Damit werden durch das Herunterladen verursachte Verzögerungen verhindert, 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