Dreamweaver für Einsteiger

Die Dreamweaver Programmoberfläche
Texte und Bilder formatieren
Seitenlayout mit Tabellen
Bilder und Farben
Einführung in einfache Javascripte
HTML Quellcode
Veröffentlichen von Webprojekten
Gifanimationen, Hintergrundbilder und Imagemaps
Über die Grundlagen hinaus
Literaturhinweise und weiterführende Informationen

Die Technik:

Sie können Hintergrundbilder in eine HTML-Datei einbinden. Das funktioniert so ähnlich wie die Hintergrundbilder, die Sie in Tabellenzellen legen können. Hintergrundbilder werden von allen aktuellen Browsern angezeigt.
Gestalten Sie Ihr Seitenlayout mit transparenten Grafiken den sogenannten "blindgifs". Blindgifs werden manchmal eingesetzt, um ein Seitenelement im Layout an eine bestimmte Position zu bringen.
Oder bauen Sie eine "imagemap", mit der Sie unterschiedliche Bereiche in einem Bild mit Hyperlinks versehen.

Aufgabe

Bauen Sie die Datei "gifanimation_vorlage.html" nach.

Schritt für Schritt

A. Hintergrundbild für die Seite festlegen

1. Wählen Sie im Menü Modifizieren > Seiteneigenschaften > Erscheinungsbild.

Geben Sie im Eingabefeld "Hintergrundbild" die Datei "bg.gif" aus dem Materialordner an. "bg" steht hier für "background".
Hintergrundbilder "kacheln" (wie schon in den Tipps der Seite "Bilder und Farben" beschrieben), das heißt, sie wiederholen sich vertikal und horizontal. Um zu vermeiden, dass unsere Grafik am rechten oder unteren Rand wieder auftaucht, ist das GIF in einer Größe von 1800 x 1800 Pixel angelegt. Selbst wenn ein Anwender einen sehr großen Bildschirm oder eine hohe Auflösung eingestellt hat, wird das Hintergrundbild nur einmal zu sehen sein.

Im "Dreamweaverkurs II" lernen Sie, wie man das "Kacheln" mit Hilfe von Cascading Style Sheets unterbindet.

B. Blindgifs und Gifanimationen

1. Erstellen Sie folgende Tabelle: Zeilen = 2, Spalten = 1, Breite 700px. Die obere Zelle erhält eine Höhe von 200px.

2. Die untere Zelle soll eine Gifanimation erhalten. Laden Sie die Dateien "russflecke.gif" und "rinderbraten.gif". Das russflecken-Bild ist bereits mit Adobe ImageReady animiert. Die Gifanimation ist in Dreamweaver 4 nicht zu sehen, sondern erst im Browser.

3. Die beiden Bilder sollen jetzt mit Hilfe von "blindgifs" positioniert werden. Ein blindgif ist eine 1x1 Pixel große transparente Datei. Durch Verändern der Höhe oder Breite eines blindgifs, können wir das Bild als Abstandshalter benutzen.

Laden Sie ein blindgif vor die erste Grafik ("russflecken.gif"), indem Sie das russflecken-Bild aktivieren und dann über die Cursortasten auf Ihrer Tastatur einen Schritt nach links gehen. An diese Stelle laden Sie das blindgif auf Ihre Seite. Stellen Sie unmittelbar nach dem Einfügen des blindgifs seine Breite in der Eigenschaftenpalette auf 200 Pixel.

Zwischen das Russfleckenbild und das Rinderbratenbild setzen Sie noch ein weiteres blindgif, Breite 150 Pixel. Als nächstes werden Sie die beiden Gifanimationen mit Imagemaps belegen...

C. So erstellen Sie eine Imagemap

1. Aktivieren Sie das GIF "russflecken.gif" und geben ihm im Eingabefeld "Map" der Eigenschaftenpalette einen eindeutigen Namen.

2. Sie legen jetzt eine Imagemap auf den Schornsteinfeger. Klicken Sie auf das Rechtecktool in der Eigenschaftenpalette und erstellen Sie auf dem Schornsteinfeger einen rechteckigen Hotspot (einen anklickbaren Bereich).
Einen runden Hotspot erzeugen Sie mit dem Oval und mit dem Polygon definieren Sie einen unregelmäßig geformten Hotspot, indem Sie einmal für jeden Eckpunkt klicken. Klicken Sie auf den Pfeil, um die Form zu schließen.

3. Nach dem Erstellen eines Hotspots wird die Eigenschaftenpalette für Hotspots angezeigt. Hier können Sie einen Hyperlink festlegen, der beim Mausklick auf die ImageMap angezeigt werden soll. In unserem Fall auf "schornsteinfeger.html", diese Datei existiert bereits und muss nicht angelegt werden. Neben "Ziel" geben Sie bitte "blank" an, dieses hat zur Folge, dass sich die verlinkte Seite in einem neuen Browserfenster öffnet.

4. Geben Sie im Eingabefeld "Alt" den Text ein, der als alternativer Text angezeigt werden soll.

5. Wiederholen Sie die Schritte 2 bis 4, um weitere Hotspots in der Imagemap zu definieren.

Kontrollfragen und weitere Übungen

Bauen Sie eine Gifanimation im Programm ImageReady, Fireworks oder einer anderen Software Ihrer Wahl und laden Sie diese Datei in eine HTML-Seite.

Letzte Aktualisierung dieser Datei am: 18.1.2006
Autor: Stephan Franke · Impressum und Hinweise zu diesen Seiten · Suche
Diese Seiten wurden produziert von: sfk

Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben.
Ihr Kommentar wird am Ende dieser Seite angefügt.

Bislang wurden zu dieser Seite keine Kommentare geschrieben