Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch.

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


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.


4

• Unterscheidung:clientseitige Imagemapsserverseitige Imagemaps

• Typische Anwendung:Online-Landkarten

Imagemaps: Einführung


5

Beispiel


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


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


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 #


9

Übung


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


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


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>


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>


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>


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


16


Einführung:

• Die Gefahr bei Animationen im Netz besteht bei Überreizung

• Zu viele Animationen lenken den Betrachter ab


17


Ü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


18


Ü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:


19


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


20


Ü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

21


Ü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><IMG SRC="Bilder/Springball.gif" WIDTH=468 HEIGHT=60 ALT=""></BODY></HTML>

----------------------------------------------------------------------------

22


Ü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><IMG SRC="Bilder/Springball.gif" WIDTH=468 HEIGHT=60

ALT=""></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.


23


Endergebnis der Übung:


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.


25

Vielen Dank!

Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch.

Documents

Transcript of Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch.