Zum Inhalt der Seite


FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN Startseite > ~xx502 > Frames > Uebung8

Wie erstelle ich Web Frames?

Übung 8 - Mit einem Mausklick zwei Frames ändern

Ein Hinweis vorweg: Diese und die folgende Übung gehen über das übliche HTML hinaus und binden einige kurze JavaSkript Befehle in die HTML-Datei mit ein. Nur so ist es möglich mit nur einem Mausklick zwei oder mehr Fenster zu ändern

 Ein erstes Beispiel

 Noch ein anderes Beispiel

Wir wollen uns zuerst mit dem ersten Beispiel beschäftigen. Dazu benötigen wir einige Dateien um die Ausgangssituation darzustellen.

Legen Sie bitte dazu ein neues Arbeitsverzeichnis an, z.B. das Verzeichnis C:\frames\js und speichern dort alle für dieses Projekt erstellten Dateien.


Die variablen Seiten

Kopieren Sie folgende Fenster in ein jeweils leeres Fenster des Texteditors und speichern Sie unter dem angegebenen Namen.

Dateiname: hugh_ed.html hugh_cal.html ron_mike.html ron_peter.html
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#ccffff">
  <H1>Hugh's Freunde</H1>
  <H3>Eddi</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#ccffff">
  <H1>Hugh's Freunde</H1>
  <H3>Calvin</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#ccffff">
  <H1>Hugh's Freunde</H1>
  <H3>Michael</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#ccffff">
  <H1>Hugh's Freunde</H1>
  <H3>Peter</H3>
</BODY>
</HTML>
Datei ansehen Datei ansehen Datei ansehen Datei ansehen

Die Hauptseite

Nachdem wir die vier Teilfenster haben benötigen wir noch eine Hauptseite und das Verzeichnis im linken Frame.
Das Hauptfenster soll, wie Sie bereits gesehen haben, in einen schmalen linken Frame für das Verzeichnis und zwei waagerecht unterteilte Frames auf der rechten Bildschirmseite für die einzelnen Freunde.

Speichern sie folgende Hauptseite als index.html ab:

<HTML>
<HEAD>
  <TITLE>FEN-Schulung: Frames - Mit einem Mausklick zwei Frames ändern -Beispiel 1</TITLE>
</HEAD>
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="hugh_ed.html" NAME="Frame_A">
    <FRAME SRC="hugh_cal.html" NAME="Frame_B">
  </FRAMESET>
</BODY>
</HTML>

 Datei index.html ansehen (Da wir die Datei für das Inhaltsverzeichnis noch nicht erstellt haben, wird Netscape an dieser Stelle noch eine Fehlermeldung anzeigen.)


Das Inhaltsverzeichnis

Speichern Sie die Datei für das Inhaltsverzeichnis bitte unter dem Namen direct.html.

Diese Datei werden wir uns nach bewährtem Muster wieder schrittweise erarbeiten. Zuerst erstellen wir das Grundgerüst der Seite:

<HTML>
<HEAD>
  <TITLE>Inhaltsverzeichnis</TITLE>
</HEAD>

<BODY bgcolor="#ffffff">
  <H3>Directory</H3>
  Hugh's Freunde<P>
  Ron's Freunde<P>
</BODY>
</HTML>

 Datei ansehen

 Hauptdatei index.html ansehen, ab jetzt ohne Fehlermeldung.


Im nächsten Schritt ergänzen wir das Inhaltsverzeichnis um die Anker-Tags für die Links:

<HTML>
<HEAD>
  <TITLE>Inhaltsverzeichnis</TITLE>
</HEAD>

<BODY bgcolor="#ffffff">
  <H3>Directory</H3>
  <A>Hugh's Freunde</A><P>
  <A>Ron's Freunde</A><P>
</BODY>
</HTML>

Endlich lernen wir etwas Java kennen. Ich möchte an dieser Stelle keinen Kurs in Java anbieten und daher ohne allzu ausführliche Erklärung die nötige Funktionalität für den Framewechsel programmieern.
Java-Funktionalität, die für die gesamte Datei gilt, definiert man im <HEAD&gt;-Bereich der Datei.
Um Fehler bei der Darstellung einiger älterer Browser zu vermeiden, schließt man üblicherweise den Code zwischen den <SCRIPT>-Tags in Kommentarzeichen ein (<!--   //--&gt).

<HTML>
<HEAD>
  <TITLE>Inhaltsverzeichnis</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Kommentar markiert und damit vor nicht java-fähigen Browsern versteckt

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#ffffff">
  <H3>Directory</H3>
  <A>Hugh's Freunde</A><P>
  <A>Ron's Freunde</A><P>
</BODY>
</HTML>


Das Script enthält die Funktion multiLoad mit deren Hilfe nacheinander die Wechsel der beiden Frames durchgeführt werden. Der Betrachter der Seite muß dafür nurmal mit der Maus klicken.
Sie brauchen das Skript nicht zu versehen, sie können es einfach verwenden.

<HTML>
<HEAD>
  <TITLE>Inhaltsverzeichnis</TITLE>

 <SCRIPT LANGUAGE="JavaScript">
<!-- Kommentar markiert und damit vor nicht java-fähigen Browsern versteckt

 function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#ffffff">
  <H3>Inhaltsverzeichnis</H3>
  <A>Hugh's Freunde</A><P>
  <A>Ron's Freunde</A><P>
</BODY>
</HTML>


Die beiden bereits definierten Anker-Tags müssen noch vervollständigt werden. Ich weiß, daß Sie noch einige Fragen haben. Im Anschluß an diese Aktion werde ich noch ewas weiter ausholen.

<HTML>
<HEAD>
  <TITLE>Inhaltsverzeichnis</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Kommentar markiert und damit vor nicht java-fähigen Browsern versteckt

 function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

 // -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#ffffff">
  <H3>Directory</H3>
  <A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's Freunde</A>
  <P>
  <A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's Freunde</A>
  <P>
</BODY>
</HTML>

 Datei ansehen (Die Links auf dieser Seite führen zu einer Fehlermeldung, da kein Frame angezeigt wird)

 Das gesamte Projekt ansehen

Eigentlich war das schon alles. Ihr vermutlich erstes Javaprogramm läuft erfolgreich und Sie können stolz sein es geschafft zu haben.


Ganz fertig sind wir aber noch nicht.
Wie versprochen noch einige Antworten:

In den Links wird einfach der Name der zu ladenden HTML-Dateien eingtragen. Im <HEAD>-Bereich haben wir eine Funktion definiert. Eine Funktion ist in jeder Programmiersprache eine Sammlung von Befehlen. Die einzelnen Befehle sind so definiert, daß sie unterschiedliche Werte immer gleich verarbeiten.

Ein einfaches Beispiel:
Wir definieren die Funktion braten(). Diese Funktion brät alles das, was wir ihr geben. wir können braten('Eier') oder braten('Speck') oder braten('Schitzel'). Das Ergebnis hängt davon ab, was wir gebraten haben.

In unserem Beispiel haben wir die Funktion multiLoad() aufgerufen.

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

Wir haben der Funtion mitgeteilt die Dateien 'hugh_ed.html', 'hugh_cal.html' bzw. 'ron_mike.html', 'ron_pete.html' zu laden, abhängig davon, welcher Link angewählt wird.

In der <HEAD>-Bereich haben wir die Funktion definiert:
 function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

Ich will noch etwas in meinem braten() fortfahren. Die erste Zeile bedeutet etwa braten(x,y) wobei x und y Kartoffeln, Eier, Speck, Fisch, Würstchen oder Steaks sein könnten. (Dabei werde ich wirklich hungrig.)

In unserer Funktion multiLoad(doc1,doc2), übergeben wir hugh_ed.html, hugh_cal.html bzw. ron_mike.html, ron_pete.html abhängig vom angeklickten Link an die Funktion.

Die nächsten beiden Zeilen bewschreiben, was mit den Dateien hugh_ed.html, etc. weiter zu tun ist.
Es sind hier einfach die beiden Befehle
zuerst doc1 in Frame_A laden (doc1 ist das erste Argument, das an die Funktion übergeben wird - hugh_ed.html)
dann doc2 in Frame_B laden (doc2 ist das zweite Argument, das an die Funktion übergeben wird - hugh_cal.html)

Wahrscheinlich ist diese Erklärung etwas zu umfangreich ausgefallen, das ist aber besser als anders herum zu wenig Erklärung.


Eigentlich sind sie inzwischen schon mehr als fit in allem, was Frames betrifft, aber wenn sich zei Frames auf einmal ändern lassen geht sicher auch noch ein bischen mehr ... in der letzten Übung.


Zurück zur Übung 7 - Praktikum
Weiter zur Übung 9 - Gleichzeitig zwei Frames ändern (Teil 2)
Zur Indexseite