1 / 25

Imagemaps & Animierte GIF-Grafiken

Imagemaps & Animierte GIF-Grafiken. Anne Kersten, Claudia Wloch. Inhalt. Vorwort Imagemaps Einführung Übung Animierte GIF-Grafiken Einführung Übung. Imagemaps: Einführung. Auch verweis-sensitive Grafiken genannt (anklickbare Bilder).

airell
Download Presentation

Imagemaps & Animierte GIF-Grafiken

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia 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. Imagemaps: Einführung • Unterscheidung: clientseitige Imagemaps serverseitige Imagemaps • Typische Anwendung: Online-Landkarten ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)

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

  6. Quelltext -------------------------------------------------------------------------- <map name="Testbild"> <areashape=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,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)

  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 kennzeichnen gefolgt 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. 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)

  11. Ü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)

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

More Related