Hani Sahyoun, Rechenzentrum Universität Hohenheim

Präsentation zum Thema: "Hani Sahyoun, Rechenzentrum Universität Hohenheim"—  Präsentation transkript:

1 Hani Sahyoun, Rechenzentrum Universität Hohenheim
HTML Workshop Imagemaps (Grafiken mit klicksensitiven Bereichen) in Dreamweaver erstellen Hani Sahyoun, Rechenzentrum Universität Hohenheim

2 HTML-Workshop: Übung zu Imagemaps
Imagemaps: Beispiel HTML-Workshop: Übung zu Imagemaps

3 Erste Schritte: Grafik speichern
Starten Sie das Programm Mozilla und laden Sie folgende Seite: Klicken Sie mit der rechten Maustaste auf die Grafik und speichern Sie die Grafikdatei im Verzeichnis H:\public_html\bilder Starten Sie Dreamweaver HTML-Workshop: Übung zu Imagemaps

4 Erste Schritte: Grafik einfügen
Gehen Sie in das Dokument-Fenster und geben Sie die Überschrift ein Fügen Sie darunter die Grafik aus dem Verzeichnis H:\public_html\bilder ein Markieren Sie die Grafik durch Klicken HTML-Workshop: Übung zu Imagemaps

5 Klickbare Bereiche definieren
Klicken Sie im Eigenschaften-Fenster auf das Auswahlwerkzeug für die gewünschte Form (Rechteck, Kreis, Polygon) HTML-Workshop: Übung zu Imagemaps

6 Klickbare Bereiche definieren
Zeichnen Sie mit dem Auswahlwerkzeug den ersten klickbaren Bereich und füllen Sie im Eigenschaften-Fenster die Felder Hyperlink und Alt aus HTML-Workshop: Übung zu Imagemaps

7 Klickbare Bereiche definieren
Feld Hyperlink: geben Sie hier die URL ein für die Datei, die mit dem ausgewählten Grafikbereich verknüpft ist. Feld Alt: Geben Sie hier einen Text ein, der eingeblendet wird, wenn man mit der Maus über den ausgewählten Bereich geht. HTML-Workshop: Übung zu Imagemaps

8 Klickbare Bereiche definieren
Wiederholen Sie den Vorgang für alle gewünschten Bereiche in der Grafik Speichern Sie die Datei anschließend ab. Für den HTML-Workshop sollte die Datei wie folgt gespeichert werden: H:\public_html\uebungen\imagemap.html Überprüfen Sie das Ergebnis in einem Browser HTML-Workshop: Übung zu Imagemaps