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. 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. 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. 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). 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 Zuber J.: HTML 4.0 in der Schule - Arbeitsbuch, 4. Auflage, Troisdorf 2002. Falls im Computerraum kein Beamer zur Verfügung steht, können die Folien und Arbeitsschritte über den Lehrer-PC auf den Schülerbildschirm dargestellt werden. Gleichzeitig ermöglicht eine u-förmige Anordnung der PC-Arbeitsplätze die Kommunikation mit und in der Lerngruppe. Gegenstand der geplanten Unterrichtsstunde ist der Internetauftritt der Rand OHG. In der Unterrichtsstunde geht es um die Verknüpfung der einzelnen Abteilungsseiten (Leitung.htm, Einkauf.htm, Verkauf.htm, Lager.htm, Fibu.htm und Verwaltung.htm) mit der Seite Abteilungen.htm. Inhalt dieser Seite ist ein Organigramm der Rand OHG (imgorga.jpg), das in der geplanten Stunde als Abbildungsplan (Imagemap) genutzt wird. Die einzelnen Abteilungsseiten enthalten Informationen über die Mitarbeiter und die Aufgaben der jeweiligen Abteilungen. Für die geplante Unterrichtsstunde ist es erforderlich, dass diese sieben Seiten vorliegen. Sie können entweder von der Lehrkraft vorbereitet und verteilt oder von den Schülerinnen und Schülern in vorhergehenden Stunden erstellt werden. Sowohl die sieben HTML-Seiten (fragmentarisch, das heißt ohne Links und Imagemap), als auch ein Arbeitsauftrag zur Erstellung durch die Lernenden (imagemap_arbeitsauftraege.rtf) stehen hier als Download zur Verfügung. Als Einstieg dient eine Abbildung (Folie) einer möglichen Verweisstruktur (imagemap_sitemap 1.ppt) für den Internetauftritt der Rand OHG. Anhand der Folie wird diskutiert, wo die bereits erstellten oder zur Verfügung gestellten Seiten zu den einzelnen Abteilungen am sinnvollsten anzuordnen sind. Imagemap_sitemap_2.ppt zeigt das Ziel der Stunde, nämlich die Verlinkung der einzelnen Abteilungsseiten mit der Seite Abteilungen.htm. Anschließend wird darüber diskutiert, wie die einzelnen Abteilungsseiten mit der Seite Abteilungen.htm am sinnvollsten zu verlinken sind. Hierzu zeigt die Lehrkraft ein Beispiel der Seite Abteilungen.htm. Am sinnvollsten erscheint hier eine Verknüpfung mit Hilfe eines Imagemap. Dabei werden die im Organigramm als Kästchen dargestellten Abteilungen selbst zum Link. Die grundsätzliche Vorgehensweise bei der Erstellung von Imagemaps wird im gelenkten Unterrichtsgespräch erörtert, die Schülerantworten werden an der Tafel festgehalten. Die Schülerinnen und Schüler erstellen ein Imagemap und verlinken so die einzelnen Seiten. Zur Anleitung und Unterstützung erhalten sie ein Arbeits- und Informationsblatt. Zur Sicherung führen einige Schülerinnen und Schüler ihre Lösungsschritte und Quelltexte vor.