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