Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Inhalt Vorwort Imagemaps Einführung Übung Animierte GIF-Grafiken ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

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)

Imagemaps: Einführung Unterscheidung: clientseitige Imagemaps serverseitige Imagemaps Typische Anwendung: Online-Landkarten ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Beispiel ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) 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)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Quelltext Vierecke (shape=rect): Definition mit den Koordinaten für x1,y1,x2,y2 x1 = linke obere Ecke, Pixel von links y1 = linke obere Ecke, Pixel von oben x2 = rechte untere Ecke, Pixel von links y2 = rechte untere Ecke, Pixel von oben Kreise (shape=circle): Definition mit den Koordinaten für x,y,r x = Mittelpunkt, Pixel von links y = Mittelpunkt, Pixel von oben r = Radius in Pixel Polygone (shape=polygon): Definition mit den Koordinaten x1,y1,x2,y2 ... xn,yn" x = Pixel einer Ecke von links y = Pixel einer Ecke von oben beliebig viele Ecken definierbar ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) 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 kennzeichnen gefolgt von dem Namen, der im einleitenden <map>-Tag vergeben wurde -> in Anführungszeichen & vorangestelltem # ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Übung ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Übung 1. Teil Adobe ImageReady öffnen  grafik1.gif öffnen, unter Ansicht  Lineale aktivieren Im Info-Fenster die Koordinaten der einzelnen Felder ablesen u. notieren! 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)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Übung 2. Teil Phase5 starten, neues HTML-Dokument erstellen (Hintergrundfarbe #FFFFCC, Textfarbe #FF9900), speichern unter ImageMap.html. Tabelle einfügen (1 Spalte, 2 Zeilen) und zentrieren. 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)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Ü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> <img src="grafik1.gif" width="400" height="311" border="0" alt=""> </table> </body> ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Ü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> <img src="grafik1.gif" width="400" height="311" border="0" alt=""> </table> </body> ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Ü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)

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)

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)

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)

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)

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)

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)

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)

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)

Animierte GIF-Grafiken Endergebnis der Übung: ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) 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)

ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch) Vielen Dank! ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)