Dreamweaver CS6 Charlotte von Braunschweig, Jan Götzelmann, Linda York Grundlagen. Ausgabe, November 202 DRWCS6
5 Dreamweaver CS6 - Grundlagen 5 Bilder einbinden In diesem Kapitel erfahren Sie worauf bei Bildern in Webseiten zu achten ist wie Sie eingefügte Bilder bearbeiten können wie Sie Hintergrundbilder zuweisen und ihre Darstellung anpassen wie Sie Rollover-Bilder einbinden Voraussetzungen Webseiten erstellen Erste Bilder einfügen Hyperlinks und Imagemaps erstellen 5. Bilder im Web Bilder in Webauftritten einsetzen Grafiken können auf Webseiten vielfältig eingesetzt werden, z. B. zur Information, als Navigationsschaltflächen oder als Bestandteile des Designs. Da die Dateigröße der Bilder die Ladezeit der Webseite beeinflusst, ist es wichtig, auf eine möglichst geringe Dateigröße zu achten. Wenn Sie für Ihre Webseite Grafiken verwenden, sollten diese nicht größer als etwa 20 KB sein. Bei Dateien, die größer sind, dauert das Herunterladen zu lange. Wenn Sie auf einer Webseite mehrere Bilder einfügen, müssen Sie die Dateigrößen der Bilder addieren. Um eine möglichst geringe Dateigröße bei möglichst guter Bildqualität zu erreichen, bearbeiten Sie das Bild mit einem passenden Programm, sodass es die Maße aufweist, mit denen es später auf der Webseite eingefügt werden soll. Pixelgrafiken werden mit Bildbearbeitungsprogrammen wie z. B. Adobe Photoshop, Adobe Photoshop Elements, GIMP, Corel Paint Shop Pro oder auch mit Adobe Fireworks bearbeitet. speichern Sie das Bild in einem geeigneten Dateiformat (vgl. unten). Welche Maße soll das Bild aufweisen? Die Dateigröße wird u. a. von den Bildmaßen beeinflusst. Wenn eine große Grafik auf der Webseite eingefügt und nachträglich verkleinert wird, wird nur das angezeigte Bild kleiner, der benötigte Speicherplatz bleibt jedoch unverändert hoch. 48 HERDT-Verlag
Bilder einbinden 5 Wenn hingegen eine kleine Pixelgrafik eingebunden und nachträglich vergrößert wird, wirkt das Bild oft unscharf und die Pixelstruktur wird sichtbar. Passen Sie daher vor dem Einfügen eines Bilds seine Größe in einem geeigneten Programm entsprechend an. Um die optimalen Abmessungen eines Bildes für Ihre Webseite zu ermitteln, können Sie es testweise in Dreamweaver skalieren (vgl. Abschnitt 5.3). Beim Vergrößern von Pixelgrafiken findet ein Qualitätsverlust statt: Details gehen verloren und es treten Unebenheiten auf. Wenn eine Grafik die ganze Breite der Webseite einnehmen soll, empfiehlt sich eine Breite, bei der die Grafik bei den verschiedenen gängigen Bildschirmauflösungen vollständig angezeigt wird, z. B. 960 Pixel. Auf Monitoren, deren Anzeigefläche breiter ist als die eingefügte Grafik, kann der entstehende seitliche Leerraum durch ein Hintergrundbild gefüllt werden (vgl. Abschnitt 5.2). Welches Dateiformat ist für das Bild geeignet? Wählen Sie Dateiformate mit geringem Speicherplatzbedarf, die vom Browser unterstützt werden. In der Regel kommen im Web vor allem die folgenden Dateiformate zum Einsatz: Das JPG-Format ist für Farbfotos gut geeignet, unterstützt aber keine Transparenz. Das GIF-Format eignet sich aufgrund einer geringen Farbtiefe eher für Bilder mit einfarbigen Farbflächen, z. B. Banner und kleinere Grafiken, und unterstützt Transparenz. Außerdem können GIF-Grafiken animiert werden. Das PNG-Format ist für Farbfotos und Grafiken mit Verläufen gut geeignet und unterstützt Transparenz. PNG-Dateien sind meist größer als JPG- und GIF-Dateien. JPG GIF PNG Inhalte aus dem Web verwenden Wenn Sie auf Ihrer Webseite fremde Inhalte, z. B. Bilder, verwenden möchten, sollten Sie auf jeden Fall die urheberrechtlichen sowie gegebenenfalls die lizenzrechtlichen Bestimmungen beachten. Gehen Sie davon aus, dass fast alle Inhalte, die Sie aus dem Internet herunterladen, geschützt sind, es sei denn, es gibt einen ausdrücklichen Hinweis darauf, dass die Inhalte frei verwendet werden können. Falls Sie ein Bild in Ihre Webseite eingefügt haben, werden Sie beim Speichern der Webseite aufgefordert, die Bilddatei getrennt zu speichern. Wenn Sie anschließend z. B. die Größe eines Bildes auf der Webseite ändern, bleibt die Bilddatei selbst unverändert. Um bei den Arbeitsschritten dieses Kapitels möglichst effizient vorzugehen, kopieren Sie die Beispielbilder, also alle Grafikdateien aus dem Ordner C:\Übung\DRWCS6_BU\Beispieldateien\05 - Bilder einbinden, in den Ordner images des Kick-Webauftritts. Banner auf der Beispiel-Startseite einfügen Öffnen Sie die Startseite index.html des Kick-Webauftritts. Löschen Sie das Wort Willkommen! einschließlich des Ausrufezeichens und lassen Sie den Cursor in der leeren Zeile stehen. Fügen Sie das Bild banner.jpg ein, geben Sie Banner als Alternativtext ein und speichern Sie die Datei. HERDT-Verlag 49
5 Dreamweaver CS6 - Grundlagen 5.2 Hintergrundbilder verwenden Hintergrundbilder festlegen Für das Hintergrundbild des Kick-Webauftritts verwenden Sie eine Pixelgrafik, die Pixel breit ist und einen Farbverlauf beinhaltet. Da Hintergrundbilder standardmäßig wiederholt werden, bis der vorgesehene Bereich (hier die gesamte Bildschirmfläche) gefüllt ist, dehnt sich der Farbverlauf entsprechend aus. Diese Methode spart Speicherplatz und wird häufig genutzt, um Farbverläufe und Schatteneffekte zu erstellen. Farbverlauf erstellen Schatteneffekt erzeugen Öffnen Sie die Webseite, der Sie ein Hintergrundbild zuweisen möchten, z. B. die Seite index des Kick-Webauftritts. Klicken Sie im Eigenschafteninspektor auf SEITEN- EIGENSCHAFTEN. Seite index mit eingefügtem Hintergrundbild verlauf.png Auf DURCHSUCHEN klicken, zum Speicherort der Grafik wechseln und doppelt auf die gewünschte Datei klicken, z. B. auf die Beispieldatei verlauf.png 2 Wenn Sie ein kleines Hintergrundbild verwenden, auf klicken und bestimmen, wie Dreamweaver mit der Grafik verfahren soll; für das Beipielbild REPEAT-X wählen Sie möchten das Bild nur einmal darstellen das Bild gekachelt darstellen das Bild nur waagerecht bzw. senkrecht wiederholen Wählen Sie bei WIEDERHOLEN den Eintrag NO-REPEAT REPEAT REPEAT-X bzw. REPEAT-Y Hintergrundbild entfernen Klicken Sie im Eigenschafteninspektor auf SEITENEIGENSCHAFTEN. Bei HINTERGRUNDBILD den Eintrag markieren und _ betätigen 50 HERDT-Verlag
Bilder einbinden 5 5.3 Bilder skalieren Optimale Bildmaße ermitteln Um die optimalen Abmessungen für das jeweilige Webseitenlayout zu ermitteln, können Sie in Dreamweaver versuchsweise verschiedene Bildgrößen ausprobieren. Öffnen Sie das Bild anschließend in einem Bildbearbeitungsprogramm, skalieren Sie es dort nach Ihren Wünschen und speichern Sie es, bevor Sie es in den Webauftritt einbinden. Markieren Sie das Bild. Um das Bild proportional zu skalieren, H gedrückt halten und den Eckziehpunkt in die gewünschte Richtung ziehen Um das Bild zu verzerren bzw. nichtproportional zu skalieren, ziehen Sie einen beliebigen Ziehpunkt. Bilder über den Eigenschafteninspektor skalieren Möchten Sie die Maße pixelgenau angeben, nutzen Sie am besten den Eigenschafteninspektor. Markieren Sie das Bild, dessen Größe Sie ändern wollen. Die gewünschten Bildmaße in Pixeln eingeben 2 Auf klicken Sie können wählen, ob Sie das Bild proportional skalieren oder verzerren wollen: Wenn angezeigt wird, wird das Bild proportional skaliert und Sie brauchen nur einen Wert (Höhe oder Breite) anzugeben. Wird hingegen angezeigt, können Sie Breite und Höhe unabhängig voneinander festlegen. Zwischen und wechseln Sie durch Anklicken des Symbols. Um ein Bild wieder auf seine Originalmaße zurückzusetzen, klicken Sie auf. Einen horizontalen Balken durch Skalierung erzeugen Mit einer nichtproportionalen Skalierung können Sie beispielsweise eine aus nur wenigen Pixeln bestehende Grafik so in die Breite strecken, dass sich ein horizontaler Balken ergibt. Auch diese Vorgehensweise spart Speicherplatz und verringert die Ladezeit der Webseite, da der Browser zunächst sämtliche Bilddaten lädt und dann erst das Bild skaliert. HERDT-Verlag 5