Imagemaps sind Grafiken, die in anklickbare Bereiche aufgeteilt sind. Die anklickbaren Flächen werden Hot-Spots genannt und dem User verdeutlicht, indem der Mauszeiger zur Hand wird. Wird ein Hot-Spot angeklickt, erfolgt eine Aktion, in der Regel wird dadurch einem Link gefolgt. Dies erhöht die Möglichkeit ansprechende Seiten zu erstellen. Die Form der Hot-Spots kann rund oder eckig sein, je nachdem, wie sie programmiert sind. In der Unterrichtseinheit erstellen die Schülerinnen und Schüler ein Imagemap und gestalten darüber die Navigation zwischen verschiedenen HTML-Dokumenten.
Erstellen von Imagemaps
Unterrichtseinheit
Die Gestaltung von Internetseiten bietet heute viele Möglichkeiten - eine gestalterische Form sind Imagemaps (Grafiken mit Markierungen und verweisenden Bereichen). Die Schülerinnen und Schüler sollen den Internetauftritt des Modellunternehmens "Rand OHG" komplettieren, indem sie aus dem Organigramm eine Imagemap erstellen.
- Informationstechnik
- Sekundarstufe II
- variabel
- Ablaufplan, Arbeitsblatt
- 1 Arbeitsmaterial
Beschreibung der Unterrichtseinheit
Unterrichtsablauf
Inhalt
-
Problemstellung
Möglichkeiten zur Einbindung der einzelnen Abteilungsseiten
-
Lösungsmöglichkeit
Grundsätzliche Vorgehensweise bei der Erstellung eines Abbildungsplans (Imagemap)
-
Problemlösung
Erstellung eines Abbildungsplans (Imagemap) zur Einbindung der einzelnen Abteilungsseiten
-
Sicherung
Quelltext
Didaktisch-methodischer Kommentar
Man unterscheidet grundsätzlich clientseitige und serverseitige Imagemaps. Bei den clientseitigen Imagemaps übernimmt der Browser die Auswertung der Koordinaten und lädt das Dokument, auf das die Hot-Spot verweist. Bei den serverseitigen Imagemaps werden die Koordinaten an einen Server übermittelt, der die Auswertung übernimmt. Da in der Praxis überwiegend clientseitige Imagemaps eingesetzt werden, wird im Unterricht auschließlich dieses Prinzip behandelt. Mit dem Modellunternehmen Rand OHG wird hautpsächlich im Fach Informationswirtschaft gearbeitet. Für die Arbeit in dieser Unterrichtsstunde werden alle notwendigen Daten zur Rand OHG vorgegeben.
- Unterrichtsablauf
Der Ablauf der Unterrichtsstunde und die Einbindung der Arbeitsmaterialien werden hier vom Einstieg bis zur Sicherung erläutert.
Download
- imagemap_materialien.zip
Alle Arbeitsblätter, Folien, fragmentarische Dateien und dazugehörige Lösungen finden Sie in diesem gezippten Ordner.
Im Classroom-Manager speichern
Vermittelte Kompetenzen
Die Schülerinnen und Schüler sollen
- erkennen, dass Imagemaps eine weitere Möglichkeit der Navigation zwischen und innerhalb von HTML-Dokumenten darstellen.
- eine Grafik als Imagemap in ihrem HTML-Dokument kennzeichnen.
- mithilfe eines Grafikprogramms die Koordinaten für die Bereiche (Hot-Spots) ermitteln, die den Benutzer zu HTML-Dokumenten verweisen.
- diese Hot-Spots definieren und entsprechende Verweise einrichten.
- die Imagemap in ihr HTML-Dokument einbinden.
- selbstständig am PC arbeiten und dabei alle nötigen Tools benutzen (Editor, Internet Explorer, Grafikprogramm).
Kurzinformation zum Unterrichtsmaterial
| Thema | Erstellen von Imagemaps mit rechteckigen Hot-Spots |
|---|---|
| Autor | Patrick Uhlemann |
| Fach | Wirtschaftsinformatik, Organisationslehre |
| Zielgruppe | Zweijährige Berufsfachschule für den Bereich Wirtschaftsinformatik, Informationstechniker, Kaufleute |
| Zeitumfang | 1 Unterrichtsstunde |
| Technische Voraussetzungen | Computer mit Internetzugang, Editor, Bildbearbeitungsprogramm |
| Planung | Erstellen von Imagemaps |
Zusatzinformationen
- Zuber J.: HTML 4.0 in der Schule - Arbeitsbuch, 4. Auflage, Troisdorf 2002.
