WebPublisher: Gitarre

Um dieses Beispiel erfolgreich abzuschließen sind Fähigkeiten im Umgang mit Adobe Dreamweaver gefragt.

Eine Präsentation der Gibson Les Paul online – hier wird gezeigt wie.

  • Öffne mit einem Webbrowser die Internet-Adresse (URL) http://upload.wikimedia.org/wikipedia/commons/1/15/Les_Paul_57_Custom.jpg.

  • Speichere die Bilddatei in einem neuen Ordner „web“.

  • Starte das Programm Dreamweaver.

  • Erstelle eine neue HTML-Seite im Ordner „web“. Speichere sie unter dem Namen „index.html“.

  • Schreibe den Text „Gibson Les Paul – Elektrogitarre“ und formatiere ihn als Überschrift 1. (Der gleiche Text soll auch der Titel der Seite sein.).

  • Füge in einem neuen Absatz das Bild „Les_Paul_57_Custom.jpg“ ein und ordne ihm den Alternativtext „E-Gitarre“ zu.

  • Erstelle einen rechteckigen Hotspot, der den Kopf der Gitarre umfasst.

  • Ordne dem Hotspot den Alternativtext „Kopf“ zu. Erstelle zusätzlich dazu einen „title“-Tag, ebenfalls mit dem Text „Kopf“, damit alle Browser die Beschriftung anzeigen, sobald Benutzer die Maus darüber bewegen.

  • Erstelle auf die gleiche Art je einen polygonalen Hotspot für den Hals und den Korpus der Gitarre. Verwende dort ebenfalls entsprechende „alt“- sowie „title“-Tags.

  • Erzeuge vier neue HTML-Seiten im Ordner „web“ und benenne sie „text.html“, „kopf.html“, „hals.html“ und „korpus.html“.

  • Die Seite „text.html“ soll nur folgenden Text enthalten: „Klicken Sie auf die Teile der Gitarre, um eine Beschreibung zu lesen.“

  • Die anderen drei Seiten enthalten die Überschriften Kopf, Hals und Korpus (Format h3) und eine kurze Beschreibung des jeweiligen Gitarrenteils als Fließtext.

  • Füge in der Seite „index.html“ rechts neben dem Bild ein IFRAME mit dem Namen „text“ und der Quelle „text.html“ ein. Wähle die Höhe des Bildes und eine Breite von 300 Pixeln, sowie Randstärke 0.“

  • Setze jetzt Hyperlinks von den drei Hotspots des Bildes auf die entsprechenden Seiten. Die Seiten sollen als Ziel „text“ zugeordnet bekommen, damit sie im IFRAME geöffnet werden.

  • Speichere alle Seiten.

  • Teste die Seite „index.html“ und die enthaltenen Links in der Browservorschau – wenn möglich, in verschiedenen Browsern.

Aufgabenstellung zum Herunterladen

Schnellübersicht

Fächer:

Musikerziehung, Informatik / IKT

Erstellt von:

Georg Merza

Zeitdauer:

1 UE

 

Schulstufe(n)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Kompetenzen

Hören und Erfassen (H)

  • Instrumente visuell und akustisch erkennen und ihre Bau­ und Spielweise beschreiben

Soziale Kompetenzen (S)

  • Führung, Ein- und Unterordnung erleben

Methodenkompetenz (M)

  • Lern- und Arbeitstechniken anwenden
  • selbstständig, auch eigeninitiativ Informationen einholen
  • aktuelle Technologien und Medien für sich nutzen

digi.komp8
Informatiksysteme

  • 2.2 Gestaltung und Nutzung persönlicher IS
  • 2.3 Datenaustausch in Netzwerken

Anwendungen

  • 3.1 Dokumentation, Publikation und Präsentation
  • 3.3 Suche, Auswahl und Organisation von Information

Informatikkonzepte

  • 4.1 Darstellung von Informationen
  • 4.2 Strukturieren von Daten

Zusatzinformation

Benötigte Programme: Dreamweaver