Hinzufügen von Bildern zu Ihrer Website in Dreamweaver - Dummies

Das Hinzufügen eines Bildes zu Ihrer Webseite mag auf den ersten Blick fast magisch erscheinen, da der Prozess mit Dreamweaver so einfach ist. Die Herausforderung bei Webgrafiken besteht darin, sie nicht zu Ihren Seiten hinzuzufügen, sondern gut aussehende Bilder zu erstellen, die schnell im Browser Ihres Viewers geladen werden.

Sie benötigen ein anderes Programm wie Photoshop, Photoshop Elements oder Fireworks, um Bilder zu erstellen, zu konvertieren, zu bearbeiten und zu optimieren. Optimieren von Bildern verkleinert die Dateigröße, damit Ihre Bilder schneller heruntergeladen werden können. Dreamweaver bietet einige grundlegende Bildbearbeitungswerkzeuge, aber meistens verwenden Sie Dreamweaver zum Einfügen und Positionieren von Bildern auf Ihrer Seite.

Dreamweaver erleichtert das Platzieren von Bildern auf Ihren Webseiten und bietet mehrere Möglichkeiten:

• Klicken Sie im Fenster "Gemeinsame Einfügung" auf das Symbol Bilder und wählen Sie dann ein Bild über das Dialogfeld Bild einfügen aus.

• Klicken Sie im Bedienfeld "Dateien" auf einen Bildnamen und ziehen Sie ihn auf die Seite, auf der das Bild erscheinen soll.

• Verwenden Sie das Menü Einfügen.

Wenn Sie kein web-optimiertes JPEG-, GIF- oder PNG-Bild zur Hand haben, können Sie kostenlose Bilder herunterladen, die bereits optimiert sind.

Gehen Sie folgendermaßen vor, um ein Bild mithilfe des Menüs "Einfügen" auf einer Webseite zu platzieren:

1. Öffnen Sie eine vorhandene Seite oder erstellen und speichern Sie eine neue Seite.

2. Platzieren Sie den Cursor an der Stelle, an der Sie das Bild auf der Seite einfügen möchten.

   Sie können Bilder oben links in eine neue leere Datei einfügen und Sie können Bilder in Tags und Elemente in einer Webseite einfügen, aber Sie können nicht einfach ein Bild in der Mitte einer Seite platzieren, ohne zusätzliches HTML zu verwenden. Tags oder CSS-Formatierung, um es zu positionieren.

3. Wählen Sie Einfügen → Bild → Bild.

   Das Dialogfeld Bildquelle auswählen wird angezeigt.

4. Suchen Sie nach dem Bild, das Sie einfügen möchten.

   Abhängig von Ihrem Computersystem können Sie Bilder in der Vorschau anzeigen, wenn Sie sie auf unterschiedliche Weise einfügen. Hier sind drei gängige Optionen:

   • Auf einem PC mit Windows XP, wählen Sie Miniaturansichten in der Dropdown-Liste "Ansicht" rechts neben dem Feld "Suchen in", um Miniaturansichten aller Bilder in einem geöffneten Ordner anzuzeigen. Sie können auch eine einzelne Vorschau eines ausgewählten Bildes ganz rechts im Dialogfeld anzeigen.

   • Wählen Sie auf einem PC mit Windows Vista oder Windows 7 eine Symboloption (Kleine Symbole, Mittlere Symbole, Große Symbole oder Sehr Große Symbole) aus der Dropdown-Liste "Ansicht" auf der rechten Seite des Feld, um Miniaturansichten aller Bilder in einem geöffneten Ordner anzuzeigen. Sie können auch eine einzelne Vorschau eines ausgewählten Bildes ganz rechts im Dialogfeld anzeigen.

   • Wählen Sie auf einem Mac die Option Als Spalten anzeigen aus der oberen linken Ecke des Dialogfelds aus. Sie können eine einzelne Vorschau eines ausgewählten Bildes ganz rechts im Dialogfeld anzeigen.

     

     Kredit: Fotos von Casey Stoll

5. Doppelklicken Sie zum Einfügen des Bildes auf den Namen des Bildes oder klicken Sie einmal darauf und klicken Sie dann auf OK.

   Wenn Sie ein Bild in eine Seite einfügen und das Bild nicht in Ihrem lokalen Site-Ordner gespeichert wird, werden Sie von Dreamweaver mit einem Warndialogfeld aufgefordert, das Bild in Ihren lokalen Site-Ordner zu kopieren. Viele Designer erstellen einen Unterordner namens images innerhalb des lokalen Site-Ordners, in dem sie alle Bilder auf ihrer Site speichern. Sie können Bilder jedoch in mehreren Unterordnern organisieren, wenn Sie dies bevorzugen.

6. Wählen Sie das Bild auf Ihrer Webseite aus, um Bildeigenschaften anzuzeigen und zu bearbeiten.

   Die Bildoptionen werden automatisch im Eigenschafteninspektor unten auf der Seite angezeigt, wenn ein Bild ausgewählt wird.

   

   Credit: Foto von Casey Stoll

Wenn Sie eine Bilddatei auf einer Seite einfügen, fügen Sie der Seite nicht tatsächlich eine Kopie des Bildes hinzu; Sie erstellen einen Verweis auf das Bild. Der zugrunde liegende Code ähnelt stark dem Code für eine Verknüpfung von einer Seite zu einer anderen.

Sowohl Bildverweise als auch Links enthalten den Namen der Datei und den Pfad von der Seite zu dieser Datei. Im Wesentlichen erstellen Sie eine Anweisung für einen Webbrowser, um das Bild beim Anzeigen der Seite zu finden.

Um ein Bild auf Ihrer Webseite anzuzeigen, müssen Sie sowohl die Seite als auch das Bild hochladen, wenn Sie Ihre Website veröffentlichen. Wenn sich Ihre Bilddateien und die Seiten, die auf diese Dateien verweisen, nicht am selben relativen Speicherort auf Ihrer Festplatte befinden wie auf Ihrem Webserver, unterbrechen Sie den Verweis auf Ihre Bilder, und ein hässliches Symbol für beschädigte Bilder wird auf Ihrer Seite angezeigt…

Der beste Weg, um sicherzustellen, dass Ihre Bilder und Dateien an dem Ort bleiben, an dem sie zueinander in Beziehung stehen sollten, ist, Dreamweaver den Überblick zu behalten. Aus diesem Grund ist es so wichtig, den Website-Setup-Prozess abzuschließen und sicherzustellen, dass Sie kein Bild verschieben oder umbenennen, außer im Bedienfeld "Dateien".