Webedit - Lernanleitung für HTML-Editoren
Composer Logo Macromedia Dreamweaver
Home > Editoren > Macromedia Dreamweaver > Grafiken einfügen
Titel Grafiken einfügen
< zurück
  Home
  Einleitung
Planung
HTML-Editoren
Macromedia Dreamweaver:
  Einleitung
  Programm
  Erstellen einer neuen Seite
Einfügen und Bearbeiten von:
 
  Text
Pfeil - aktuelle Position Grafiken
  Links und Verweisen
  Linien
  Tabellen
  Audio & Video
  Veröffentlichen

Webdesign
  Links
  Download
  Glossar
  Hilfe
  FAQ
  Impressum
  Sitemap

 

Inhalt dieser Seite: Grafik einfügen | Größe | Art | Größe ändern| weiter mit


Einfügen von Grafiken

Um Ihre Webseite ansprechender zu gestalten, sollten Sie auch Grafiken einfügen. Für Grafiken gibt es eine Vielzahl von Verwendungsmöglichkeiten. Auf manchen Webseiten (Fotoalbum,...) sind Grafiken und Bilder der eigentliche Inhalt. Andererseits können Grafiken auch als Teil der Navigation, des Layouts oder als Hintergrundbild eingesetzt werden.

Grundsätzlich stellen Sie die Einfügemarke (Cursor) an die Stelle, an der die Grafik eingefügt werden soll.

Symbol Grafik einfügen

Klicken Sie auf "Grafik" im Fenster Objekte links oben und gehen Sie im daraufhin erscheinenden Fenster "Bildquelle wählen" wählen Sie die Grafik aus, die Sie einfügen möchten. Klicken Sie auf OK.

Wenn die Grafikdatei noch nicht im gleichen Ordner wie Ihre Website abgespeichert ist, fragt Dreamweaver, ob Sie die Datei dort automatisch hinkopieren wollen. Sie sollten diese Option annehmen, damit beim Upload auf der Server alle Grafiken mitkopiert werden und dann bei der Veröffentlichung im Internet alle Grafiken und die gesamte Webseite so dargestellt werden, wie Sie das beabsichtigt haben.

Tipp

Geben Sie im Fenster Bildquelle wählen, in der letzten Zeile im Feld "Relativ zu:" immer Dokument und nicht Startordner an. Wenn Sie Ihre Website auf einen Server laden, kann es passieren, dass Ihre Bilder auf der Seite nicht angezeigt werden..

Wenn Sie nun die Grafik in die HTML-Datein eingefügt haben, ändert sich die Ansicht im Fenster Eigenschaften. Hier werden nun Einstellungsmöglichkeiten für diese Grafik angeboten.

Einstellungsmöglichkeiten im Fenster Grafikeigenschaften:

B
H
links im Fenster

Hier können Sie die Größe der Datei in Pixel angeben. Dreamweaver füllt automatisch die richtigen Zahlen ein. Hier sollten Sie auch nichts verändern. Wenn Sie die Größe einer Grafik verändern wollen, sollten Sie dies nicht mit Dreamweaver sondern mit einem Grafikprogramm machen. Mehr dazu unten unter Größe der Grafik.

Qu.

An dieser Stelle sehen Sie den Speicherort der Grafik. Wollen Sie eine neue Grafik wählen, klicken Sie auf das gelbe Ordnersymbol neben dem Qu.-Eingabefeld und wählen Sie eine neue Datei.

Ausrichten

Hier können Sie Grafiken und Text auf der gleichen Linie ausrichten.

Hyperlink

Diese Eigenschaft wird unter Links und Verweise behandelt.

Alt.

Im Feld "Alt." können Sie den Titel der Grafik oder eine kurze Beschreibung eingebe. Dieser Ersatztext oder Alternativ-Text erscheint noch bevor die Grafik im Browser angezeigt wird oder an Stelle der Grafik. Siehe dazu mehr unter Webdesign.

Nachdem Sie die Grafik eingefügt haben, können Sie diese genauso wie Text mit den gleichen Buttons rechts- oder linksbündig ausrichten oder auch zentrieren. Im Grafikmodus finden Sie diese Buttons im erweiterten Fenster Eigenschaften.


Größe der Grafiken

Die Größe der Grafiken auf Ihrer Webseite sollte nicht mehr als 20 oder max. 30 kB betragen. Diese Größe können Sie feststellen, indem Sie auf die Grafik doppelklicken. Im erscheinenden Fenster muß unten das Kästchen "Vorschau" ausgewählt sein. Sie sehen dann rechts eine Vorschau des Bildes und als Bildunterschrift die Größe in Pixel und kB ebenso wie die Art der Datei (z.B. JPG-Dateien, GIF-Dateien).

Ist die Grafik-Datei größer als 30 kB, sollten Sie überlegen, die Grafik in einem Grafikprogramm wie Photoshop noch kleiner zu machen oder auf einer eigene Seite darzustellen und die BesucherInnen Ihrer Webseite darauf hinzuweisen, dass die Ladezeit durch die Bildgröße auf der nächsten Webseite länger ist.


Art der Grafiken

Weiter oben wurde bereits von JPG- und GIF-Dateien gesprochen. Diese beiden Formate sind die Standard-Formate, die von allen Browsern und auch anderen Betriebssystemen (z.B. Mac OS) gelesen und dargestellt werden können.

Wenn Sie keine JPG- oder GIF-Dateien auf Ihrem Computer haben, können Sie entweder welche aus dem Internet herunterladen (mit der rechten Maustaste in einem Browser z.B. Internet Explorer auf eine Grafik klicken, "Grafik speichern unter" wählen - Urheberrechte!) oder z.B. BMP-Dateien (Bitmaps) aus eingescannten Bildern oder aus dem Programm Paint in JPG- oder GIF-Formate umwandeln.

Tipp

Wenn Sie wissen wollen, welche Formate Sie am besten verwenden sollen, lesen Sie dies in der Kategorie Webdesign - Grafik.

Ein sehr einfaches Programm für das Umwandeln von Grafik-Dateien ist Microsoft Photo Editor, das meist standardmäßig auf Windows-Computern installiert oder zumindest auf der Installations-CD-ROM von Windows enthalten ist. Normalerweise ist das Programm im folgenden Pfad zu finden:
C:\Programme\Gemeinsame Dateien\Microsoft Shared\PhotoEd\PHOTOED.EXE
Oder Sie gehen im Windows-Startmenü auf "Programme - Zubehör - Microsoft Photo Editor".

Öffnen Sie die Grafik-Datei, die in eine JPG- oder GIF-Datei umgewandelt werden soll, im Photo Editor. Dann gehen Sie auf "Datei - Speichern unter..." und geben den Speicherort und den Dateinamen an. Im Auswahlmenü im unteren Bereich des Fensters wählen Sie das Format JPG (JPEG File Interchange Format) für Fotos und größere Grafiken mit vielen verschiedenen Farben oder das Format GIF (Graphics Interchange Format) für kleinere Grafiken mit wenigen Farben (z.B. Logos oder Buttons).

Bei JPG-Grafiken können Sie auch noch den Komprimierungsgrad einstellen. Dazu wählen Sie im gleichen Fenster (Speichern unter) die Auswahl "Weitere >>" und stellen auf der Leiste unten den JPEG Qualitätsfaktor ein. Ein Komprimierungsgrad von etwa 60 % bringt eine recht gute Qualität und für Fotos eine Größe, die auch für Webseiten geeignet ist.

Diese Umwandlung können Sie ebenso in anderen Programmen, auch kommerziellen wie z.B. Adobe Photoshop oder ACDSee, durchführen.


Vergrößern und Verkleinern von Grafiken

Die Dateigröße von Grafiken können Sie durch die Änderung von Grafikformaten und den Komprimierungsgrad vergrößern oder verkleinern. Die angezeigte Bildgröße auf der Webseite sollten Sie nicht im HTML-Editor durch Drag&Drop an den Ecken der Grafik verändern.

Um die Bildgröße zu verändern sollten Sie ebenfalls ein Grafikprogramm wie z.B. Microsoft Photo Editor wählen und dort die entsprechende Grafik öffnen. Gehen Sie nun in der Menüleiste auf "Bild" und wählen Sie die Funktion "Größe ändern". Im nächsten Fenster stellen Sie die Größe ein. "Verzerrungen" sollten Sie nicht zu lassen. Beim Verkleinern von Grafiken können Sie die Funktion "Glätten" wählen, um die Qualität der verkleinerten Grafik zu verbessern.

Dieses Programm bietet allerdings keine ausgezeichneten Ergebnisse. Bessere Möglichkeiten bietet hier z.B. das Programm Photoshop von Adobe.


Noch nicht genug gelernt? - Dann geht es weiter...


Home | Editoren | Netscape Composer | Frontpage Express | Macromedia Dreamweaver | Planung | Webdesign | Links | Download | Glossar | Hilfe | Impressum | Sitemap | FAQ
© 2001 - Sigrid Moser - letzte Änderung: 26-Sep-2001

Im Netlexikon suchen
Erklärung zu Begriffen wie Internet,
Webspace, HTML und anderen.


-> öffnet sich in neuem Fenster