World Wide Web - Grundlagen und Technologie

Aufgabe 2 (Frames und DHTML)

Erstellen eines eigenen Framesets und JavaScript Integration

Abgabe bis 30.4.2001

In dieser Aufgabe geht es zuerst darum, die Fahrpläne der Zürich-Trams, welche über das ETH Zentrum fahren, in Form von Frames zusammenzufassen, um die Navigation zu erleichtern. Im zweiten Teil der Aufgabe wollen wir anhand von JavaScript eine in Teil 1 erstellte Seite so erweitern, dass mit einem Mausklick auf einen Link je ein Dokument in zwei Frames angezeigt wird.

Aufgabe Tips
1. Bei der Verwendung von Frames wird das eigentliche Browserfenster in kleinere Frames aufgeteilt. Das Layout einer Seite wird daher durch einen Frameset bestimmt, der die Position und Grösse der einzelnen Frames bestimmt. Als ersten Schritt muss daher ein Frameset definiert werden, welcher die Seite in einzelne Frames unterteilt. Der Inhalt eines Frames kann (z.B. durch Anklicken eines Links) verändert werden. Um diesen Mechanismus zu verwenden, ist es notwendig, jedem Frame einen Namen zuzuweisen. Diese Zuweisung geschieht durch das name Attribut. (z.B. <frame name="TOC" ...>
2. Das Browserfenster soll so unterteilt werden, dass links ein Inhaltsverzeichnis dargestellt wird und rechts das entsprechende Dokument. Um beim Anklicken eines Links das entsprechende Dokument im rechten Frame anzuzeigen, wird das target Attribut verwendet. (z.B. <a href="..." target="CONTENT">...</a>
3. Im dritten Schritt soll dann ein einfaches Script in eine Seite integriert werden. Ein Script, das im Browser abläuft, ist direkt im HTML Code integriert. Zwischen den beiden Tags <script type="text/javascript"> und </script> befindet dabei sich der auszuführende Code. Eine Referenz sowie weitere nützliche Informationen zu JavaScript finden sich hier.

Abgabe

Die Abgabe der Aufgabe besteht darin, die im zweiten Teil erwähnten Dokumente zu erstellen: einen Frameset, ein Hauptverzeichnis, sowie die entsprechenden Unterverzeichnisse. Beim Laden des Framesets soll dann links oben das Hauptverzeichnis, links unten das jeweilige Unterverzeichnis dargestellt werden, rechts das entsprechende Dokument. Die URL, unter der der Frameset verfügbar ist, sollen Sie dann an einen Betreuer (www-vl@dret.net, gerke@tik.ee.ethz.ch oder hasan@tik.ee.ethz.ch) mailen, der dann überprüft, ob die Darstellung und Funktionsweise korrekt implementiert wurde.

Überblick:

Mittels Frames ist es möglich, Webseiten zu erzeugen, die aus mehreren Dokumenten bestehen, im Browser aber innerhalb eines einzigen Fensters dargestellt werden. Als ersten Schritt von Aufgabe 2 soll nun ein HTML-File geschrieben werden, dass durch den Browser dargestellt die folgende Ausgabe ergibt:

two_frames.gif here

Framesets und Frames:

Das oben dargestellte Browserfenster ist dabei in zwei Frames geteilt, wobei links das Inhaltsverzeichnis der Dokumente dargestellt ist und rechts das eigentliche Dokument. Die dazu notwendige HTML Struktur für ein solches Design hat die folgende Gestalt:

HTMLStruct image here

Wie ersichtlich, wird das Aussehen der Webpage durch mehrere Dokumente bestimmt. Das sogenannte Frameset Dokument (dargestellt in Grün) definiert die Struktur der einzelnen Frames. Dieses Dokument enthält keinen eigentlichen Inhalt, sondern bestimmt das Layout der Webseite. Zudem enthält es Links zu den Dokumenten, die in den einzelnen Frames initial dargestellt werden.

Die Frame Dokumente (dargestellt in Rot und Blau) sind normale HTML Seiten, die keine speziellen Elemente oder Attribute enthalten.

Schritt 1 (Erzeugen eines Framesets):

Der erste Schritt besteht nun darin, einen Frameset zu erzeugen, um das Layout der einzelnen Frames zu bestimmen. Ein möglicher Frameset hat die folgende Gestalt: 

<html>
<head><title>...</title></head>

<frameset cols="200,*">
<frame name="TOC" src="toc.html">
<frame name="CONTENT" src="...">
...
</frameset>
...
</html>

Der gegebene HTML Code erzeugt einen Frameset bestehend aus zwei Frames angeordnet in Spalten, wobei die erste Spalte 200 Pixels einnehmen soll (die zweite Spalte nimmt den Rest ein).

Jedes <frame> Element definiert nun einen eigenen Frame innerhalb des Framesets. Das name Attribut weist dem Frame einen symbolischen Namen zu. Ein anderes Dokument kann unter Verwendung dieses Namens auf den Frame zugreifen (um z.B. den Frameinhalt beim Anklicken eines Links zu verändern). Das src Attribut spezifiziert ein initiales HTML Dokument, das im Frame dargestellt wird beim Laden des Framesets.

In entsprechender Weise soll als erster Schritt der Aufgabe ein Frameset erstellt werden. Ein Gerüst fuer ein Frameset können Sie hier vom Server herunterladen. Speichern Sie es dann unter frameset.html in ihrem Homeverzeichnis ab und vervollständigen Sie es mit den notwendigen Links.

Schritt 2 (Frame für Inhaltsverzeichnis erstellen):

Als nächsten Schritt soll nun das Inhaltsverzeichnis (roter Frame oben dargestellt) erzeugt werden. Das Inhaltsverzeichnis besteht aus einer Liste von Links, wobei beim Anklicken eines Links das entsprechende Dokument im rechten Frame (blauer Frame oben) dargestellt werden soll. Ein Inhaltsverzeichnis hat folgende mögliche Struktur: 

<html>
<head>
<title>Tramlinien ETH Zentrum</title>
</head>

<p><b>Tramlinien ETH Zentrum:</b>
<p>Voltastrasse:
<ul>
  <li>
    <a href="http://www.zvv.ch/abfahrtsfahrplan.asp?linie=005"
       target="...">Linie 5</a>
  </li>
  <li>
    <a href="http://www.zvv.ch/abfahrtsfahrplan.asp?linie=006"
       target="...">Linie 6</a>
  </li>
</ul>
<p>ETH/Unispital:
...

</html>

Das Inhaltsverzeichnis besteht hauptsächlich aus einer Liste verschiedener Verweise. Damit beim Anklicken eines Links die Seite im rechten Frame (dem wir den Namen CONTENT zugewiesen haben), verwenden Sie das target Attribut.

Als Vorlage können Sie toc.html verwenden. Fügen Sie dann die entsprechenden Verweise ein.

Die Funktionsweise können Sie folgendermassen überprüfen: Öffnen Sie das Frameset-Dokument (frameset.html) im Browserfenster und versichern Sie sich, dass durch Anklicken der Verweise im Inhaltsverzeichnis immer das entsprechende Dokument im rechten Frame angezeigt wird.

Schritt 3 (JavaScript Integration):

Im letzten Teil dieser Aufgabe wollen wir unseren Frameset auf 3 Frames erweitern. Der Inhaltsverzeichnis-Frame wird in zwei Frames unterteilt, einem Hauptverzeichnis- und einem Unterverzeichnis-Frame, wie in folgender Abbildung ersichtlich ist:

three_frames.gif here

Nun soll durch Anklicken der Verweise im Hauptverzeichnis, sowohl das zugehörige Unterverzeichnis im Unterverzeichnis-Frame als auch das entsprechende Dokument im rechten Frame angezeigt wird. Dafür werden wir JavaScript anwenden. JavaScript ist eine plattformübergreifende, objekt-orientierte Scriptsprache, die es ermöglicht, Programme zu schreiben, die direkt im Browser ablaufen und auf Ereignisse wie Tastureingaben oder Mausbewegungen reagieren. Ziel dieser Aufgabe ist es, ein einfaches Script in der HTML-Seite des Hauptverzeichnisses zu integrieren, um den Anforderungen gerecht zu werden.

Zuerst soll das Frameset-Dokument angepasst werden: 

<html>
<head>
<title>...</title>
</head>

<frameset cols="200,*">
  <frameset rows="50%,*">
    <frame name="..." src="...">
    <frame name="..." src="...">
  </frameset>
  <frame name="..." src="...">
</frameset>
</html>

Als nächstes sollen die einzelnen Dokumente, die das Unterverzeichnis beinhalten, kreiert werden. Das folgende Beispiel ziegt den Inhalt des Dokuments line5.html für das Unterverzeichnis der Linie 5. Ähnlich gelten für line6.html, usw. 

<html>
<head>
<title>Linie 5</title>
</head>

<p><b>Linie 5 ab Voltastrasse</b>
<ul>
  <li>
    <a href="http://www.vbz.ch/fahrplan/hstf/fpset1/l005/005avolt.htm"
       target="...">Richtung Enge</a>
  </li>
  <li>
    <a href="http://www.vbz.ch/fahrplan/hstf/fpset1/l005/005bvolt.htm"
       target="...">Richtung Kirche Fluntern</a>
  </li>
</ul>
</html>

Schliesslich soll auch das HTML Dokument für das Hauptverzeichnis angepasst werden. Dieses Dokument enthält ein Script mit der notwendigen Funktionalität und kann folgendermassen aussehen: 

<html>
<head>...</head>

<script type="text/javascript" language="javascript">

function choose(line) {
  top.frames["..."].location="line"+line+".html";
  return true;
}

</script>

<p><b>Tramlinien ETH Zentrum:</b>
<p>Voltastrasse:
<ul>
  <li>
    <a href="http://www.zvv.ch/abfahrtsfahrplan.asp?linie=005"
       onClick="choose(5); return true;"
       target="...">Linie 5</a>
  </li>
  <li>
    <a href="http://www.zvv.ch/abfahrtsfahrplan.asp?linie=006"
       onClick="choose(6); return true;"
       target="...">Linie 6</a>
  </li>
</ul>
<p>ETH/Unispital:
...
</body>
</html>

Wie ersichtlich, ist das JavaScript direkt in der HTML Seite eingebettet, und zwar zwischen den beiden Tags <script type="text/javascript"> und </script>.

Die Funktion choose weist dem spezifizierten Frame den neuen URL zu. Damit diese Funktion aufgerufen wird, wenn der Benutzer auf den Verweis anklickt, wird das onClick Ereignis angewandt. Die Funktion erwartet als Parameter die Liniennummer, welche sie zur Bestimmung des entsprechenden Dokuments verwendet wird.

Erstellen Sie nun das Frameset-Dokument, die einzelnen HTML Seite der jeweiligen Unterverzeichnisse (line5.html, line6.html, usw), und das Dokument des Hauptverzeichnisses. Als Vorlage zum letzten Dokument können Sie main.html verwenden. Weiter können Sie start.html als Start-Seite für den rechten Frame benutzen.

please send comments to www-vl@dret.net
last modification on Monday, 12-Mar-2001 14:54:11 CET 		valid CSS!valid HTML 4.01!