Imagemaps & Animierte GIF-Grafiken
Anne Kersten, Claudia Wloch
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
2
Inhalt
• Vorwort• Imagemaps
– Einführung– Übung
• Animierte GIF-Grafiken– Einführung– Übung
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
3
Imagemaps: Einführung
• Auch verweis-sensitive Grafiken genannt (anklickbare Bilder).
• Verschiedene Bildelemente sind mit Hyperlinks ausgezeichnet, die auf verschiedene Dokumente verweisen.
• Der Anwender kann mit der Maus auf diese Verweise (Hotspots) klicken und gelangt wesentlich einfacher und schneller zu Informationen als durch lange verbale Verweislisten.
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
4
• Unterscheidung:clientseitige Imagemapsserverseitige Imagemaps
• Typische Anwendung:Online-Landkarten
Imagemaps: Einführung
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
5
Beispiel
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
6
Quelltext--------------------------------------------------------------------------<map name="Testbild"> <area shape=rect coords="x1, y1, x2, y2" href="URL/Datei/..."> </map><img src="bildname.gif" usemap="#Testbild" border=0>--------------------------------------------------------------------------
<map name=””> Einleitung der Definition von image maps<area...> definiert einzelne verweis-sensitive Flächen
3 Möglichkeiten:-> shape=rect für viereckige Fläche-> shape=circle für einen Kreis-> shape=polygon für ein beliebiges Vieleck
coords= Koordinaten der verweis-sensitiven Flächen -> Pixelangaben, getrennt durch Kommata
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
7
Quelltext
Vierecke (shape=rect): Definition mit den Koordinaten für x1,y1,x2,y2x1 = linke obere Ecke, Pixel von linksy1 = linke obere Ecke, Pixel von obenx2 = rechte untere Ecke, Pixel von linksy2 = rechte untere Ecke, Pixel von oben
Kreise (shape=circle): Definition mit den Koordinaten für x,y,r x = Mittelpunkt, Pixel von linksy = Mittelpunkt, Pixel von obenr = Radius in Pixel
Polygone (shape=polygon): Definition mit den Koordinaten x1,y1,x2,y2 ... xn,yn" x = Pixel einer Ecke von linksy = Pixel einer Ecke von oben
beliebig viele Ecken definierbar
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
8
Quelltext--------------------------------------------------------------<map name="Testbild"> <area shape=rect coords="x1, y1, x2, y2" href="URL/Datei/..."> </map><img src="bildname.gif" usemap="#Testbild" border=0>-----------------------------------------------------------------
href= bestimmt das Ziel (Datei oder URL, die beim Anklicken der Fläche aufgerufen werden soll)
<img> Grafik wird referiert, die die verweis-sensitiven Flächen besitzen soll
usemap= Um die Grafik als verweis-sensitiv zu kennzeichnengefolgt von dem Namen, der im einleitenden <map>-Tag vergeben wurde -> in Anführungszeichen & vorangestelltem #
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
9
Übung
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
10
Übung 1. Teil1. Adobe
ImageReady öffnen grafik1.gif öffnen, unter Ansicht Lineale aktivieren
2. Im Info-Fenster die Koordinaten der einzelnen Felder ablesen u. notieren!
3. Ermittlung des Radius beim Kreis: Curso im Mittel-punkt platzieren, x ablesen, dann den Curso waagerecht an den rechten Rand bewegen, erneut x ablesen und die Differenz bilden
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
11
Übung 2. Teil
6. Phase5 starten, neues HTML-Dokument erstellen (Hintergrundfarbe #FFFFCC, Textfarbe #FF9900), speichern unter ImageMap.html.
7. Tabelle einfügen (1 Spalte, 2 Zeilen) und zentrieren.
8. 1. Zeile: Überschrift “Startseite” (h1) 2. Zeile: Bild einfügen über Einfügen -> Grafik einfügen -> grafik1.gif
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
12
Übung 2. Teil
Das Grundgerüst sollte damit so aussehen:
<body text="#FF9900" bgcolor="#FFFFCC"><table align="center"><tr><td><h1 align="center">Startseite</h1></td></tr><tr><td><img src="grafik1.gif" width="400" height="311"
border="0" alt=""></td></tr></table></body>
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
13
Übung 2. Teil
Das Grundgerüst sollte damit so aussehen:
<body text="#FF9900" bgcolor="#FFFFCC"><table align="center"><tr><td><h1 align="center">Startseite</h2></td></tr><tr><td><img src="grafik1.gif" width="400" height="311"
border="0" alt=""></td></tr></table></body>
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
14
Übung 2. Teil
Imagemap mit Titel „Bild“ einfügen
<tr><td><map name=„Bild"><area shape="RECT"
coords=„82,93,175,182„ href="seite1.html"><area shape="CIRCLE" coords=„259,164,50"
href="seite2.html"><area shape="POLYGON"
coords=„115,277,160,206,280,277" href="seite3.html">
</map><img src="grafik1.gif" width="400" height="311"
usemap="#Bild" border="0" alt=""> </td></tr>
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
15
Animierte GIF-Grafiken
Einführung:
• GIF-Grafiken im Web entsprechen einfachen Video-Animationen
• Animierte GIFs lassen sich ohne Java-Kenntnisse erstellen
• Einzelne Bildelemente werden auf verschiedenen Ebenen übereinander abgespeichert
• Die Animation wird anschließend wie ein Daumenkino abgespielt
• Animierte GIFs sind daher Comics ähnlich
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
16
Animierte GIF-Grafiken
Einführung:
• Die Gefahr bei Animationen im Netz besteht bei Überreizung
• Zu viele Animationen lenken den Betrachter ab
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
17
Animierte GIF-Grafiken
Übung
• Öffnen des Programms Adobe ImageReady
• Einstellen der Hintergrundfarbe #851410 und Vordergrundfarbe #EBD4A7
• Neues Dokument öffnen (Größe: Web-Banner; Titel: Springball; Hintergrundfarbe)
• Öffnen der Grafik Kreis
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
18
Animierte GIF-Grafiken
Übung:• Den Kreis mit dem Verschieben-Werkzeug, mit
gehaltener linken Maustaste in das Banner ziehen• Diesen Vorgang achtmal wiederholen, so das sich
in dem Banner nun neun Bälle befinden• Öffnen der Grafik rechteck; das Rechteck
ebenfalls in das Banner ziehen• Nun die Punkte in einer Zickzacklinie anordnen,
wobei der letzte Ball in dem Rechteck landet (Darauf achten in welcher Ebene ihr euch befindet!)
• Das Ergebnis müsste ähnlich aussehen:
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
19
Animierte GIF-Grafiken
Übung:• Die Basisgrafik ist fertig und kann animiert werden• Dafür gehen wir in die Animationsleiste und
kopieren den ersten Frame neunmal (wir sehen dann die Frames 1-10 hintereinander gereiht)
• Jetzt müssen die einzelnen Ebenen nur noch sichtbar bzw. unsichtbar gemacht werden, wie gewünscht
• Dafür verwenden wir die Ebenenleiste in der rechten unteren Bildschirmecke
• Markiert den ersten Frame und schaltet alle Augen außer den Hintergrund und das Rechteck aus
• Dann markiert den zweiten Frame und macht den ersten Ball sichtbar (das gleiche mit den restlichen Frames)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
20
Animierte GIF-Grafiken
Übung:• Zu guter letzt stellen wir noch die Zeit ein, die der
jeweilige Frame angezeigt werden soll (mit rechter Maustaste; Frame 1-5 je 0,5 Sekunden und Frame 6-10 je 0,2 Sekunden)
• Dann speichern wir die Grafik Datei Optimierte-Version speichern unter (Titel Springball; Dateityp HTML und Bilder)
• Öffnet nun einen Browser und die Datei Springball.html
• Lasst euch nun den Quelltext anzeigen
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
21
Animierte GIF-Grafiken
Übung: Quelltext – Banner ----------------------------------------------------------------------------------------------
<HTML><HEAD><TITLE>Springball</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1"></HEAD><BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0
MARGINWIDTH=0 MARGINHEIGHT=0><!-- ImageReady Slices (Springball.psd) --><IMG SRC="Bilder/Springball.gif" WIDTH=468 HEIGHT=60 ALT=""><!-- End ImageReady Slices --></BODY></HTML>
----------------------------------------------------------------------------
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
22
Animierte GIF-Grafiken
Übung: Quelltext – Banner ----------------------------------------------------------------------------------------------
<HTML><HEAD><TITLE>Springball</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1"></HEAD><BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0
MARGINWIDTH=0 MARGINHEIGHT=0><!-- ImageReady Slices (Springball.psd) --><IMG SRC="Bilder/Springball.gif" WIDTH=468 HEIGHT=60
ALT=""><!-- End ImageReady Slices --></BODY></HTML>
------------------------------------------------------------------------------------- Kopiert den markierten Absatz in eure Startseite der Übung
Imagemaps vor dem Body-Ende und schließt ihn in einen zentrierten Absatz ein (<p align=„center“></p>) ein.
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
23
Animierte GIF-Grafiken
Endergebnis der Übung:
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
24
Quellen
• Münz, S./W. Nefzger: HTML 3.2 Handbuch.
• Karbo, Michael B.: Selbstgelernt. Bildoptimierung im Internet.
• Campbell, Bruce/Rick, Darnell: Dynamic HTML. 7-Tage-Crashkurs.
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
25
Vielen Dank!