Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch."—  Präsentation transkript:

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

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

3 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.

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

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

6 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 6 Quelltext Einleitung der Definition von image maps 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 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

8 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 8 Quelltext href= bestimmt das Ziel (Datei oder URL, die beim Anklicken der Fläche aufgerufen werden soll) 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 -Tag vergeben wurde -> in Anführungszeichen & vorangestelltem #

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

10 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 10 Übung 1. Teil 1.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 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 Zeile: Überschrift Startseite (h1) 2. Zeile: Bild einfügen über Einfügen -> Grafik einfügen -> grafik1.gif

12 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 12 Übung 2. Teil Das Grundgerüst sollte damit so aussehen: Startseite

13 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 13 Übung 2. Teil Das Grundgerüst sollte damit so aussehen: Startseite

14 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 14 Übung 2. Teil Imagemap mit Titel Bild einfügen

15 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

16 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

17 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 17 Animierte GIF-Grafiken Übung Öffnen des Programms Adobe ImageReady Einstellen der Hintergrundfarbe # und Vordergrundfarbe #EBD4A7 Neues Dokument öffnen (Größe: Web- Banner; Titel: Springball; Hintergrundfarbe) Öffnen der Grafik Kreis

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

19 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 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 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

21 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 21 Animierte GIF-Grafiken Übung: Quelltext – Banner Springball

22 ImageMaps & Animierte GIF- Grafiken (A. Kersten, C. Wloch) 22 Animierte GIF-Grafiken Übung: Quelltext – Banner Springball Kopiert den markierten Absatz in eure Startseite der Übung Imagemaps vor dem Body-Ende und schließt ihn in einen zentrierten Absatz ein ( ) ein.

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

24 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.

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


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

Ähnliche Präsentationen


Google-Anzeigen