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 > Uebung9

Wie erstelle ich Web Frames?

Übung 9 - Gleichzeitig zwei Frames ändern (Teil 2)

Zum Schluß nochmal eines draufgesetzt. Es geht noch mehr.
Wir können die Anzahl der Frames oder die Anzahl der Links erweitern.
Was mit zwei Frames gleichzeitig geht, das geht auch mit beliebig vielen Frames.

Link hinzufügen

Zuerst wollen wir einen Link hinzufügen, etwa so:

Dazu benötigen wir noch einige Dateien. Kopieren Sie folgende Fenster in ein jeweils leeres Fenster des Texteditors und speichern Sie unter dem angegebenen Namen.

Dateiname: int_altavista.html int_excite.html
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#33cccc">
  <H1>Internationale Suchmaschine</H1>
  <H3>www.altavista.com</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#33cccc">
  <H1>Internationale Suchmaschine</H1>
  <H3>www.excite.com</H3>
</BODY>
</HTML>
 Datei ansehen  Datei ansehen

Erstellen Sie nach gleichem Muster auch die Dateien für die deutschen Suchmaschinen www.lotse.de und www.aladin.de unter den Dateinamen de_lotse.html bzw. de_aladin.html und die Dateien für die Kataloge www.web.de und www.yahoo.de unter den Namen kat_web.html bzw. kat_yahoo.html.

Aufgabe: Passen Sie bitte selbständig die Framehauptseite (index.html) aus Übung 8 an die neuen Framedateien inhalt.html, de_aladin.html und de_lotse.html an. Ich gehe davon aus, daß sie dafür jetzt keine Lösung mehr brauchen.

Unser Inhaltsverzeichnis (inhalt.html) wollen wir um einen Link erweitern. Bitte laden Sie die Datei in den texteditor und fügen Sie die passende Zeile hinzu.

<HTML>
<HEAD>
  <TITLE>Inhaltsverzeichnis zur Suche</TITLE>

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

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 HREF="javascript:multiLoad('de_aladin.html', 'de_lotse.html')">Deutsche Suche</A><P>
  <A HREF="javascript:multiLoad('int_altavista.html', 'int_excite.html')">Internationale Suche</A><P>
  HREF="javascript:multiLoad('kat_web.html', 'kat_yahoo.html')">Kataloge</A><P>
</BODY>
</HTML>

 Datei ansehen

Diese neue Zeile bedeutet, daß beim Klick auf Internationale Suche die Dateien kat_web.html und kat_yahoo.html an die Funktion (multiLoad()) übergeben werden.


und noch einen Link ...
... mit neuen Dateien ...

Dateiname: int_hotbot.html int_infoseek.html
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#33cccc">
  <H1>Internationale Suchmaschine</H1>
  <H3>www.hotbot.com</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#33cccc">
  <H1>Internationale Suchmaschine</H1>
  <H3>www.infoseek.com</H3>
</BODY>
</HTML>
 Datei ansehen  Datei ansehen

... und einem erweiterten Inhaltsverzeichnis:

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

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

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 HREF="javascript:multiLoad('de_aladin.html', 'de_lotse.html')">Deutsche Suche</A><P>
  <A HREF="javascript:multiLoad('int_altavista.html', 'int_excite.html')">Internationale Suche</A><P>
  <A HREF="javascript:multiLoad('kat_web.html', 'kat_yahoo.html')">Kataloge</A><P>
  <A HREF="javascript:multiLoad('int_hotbot.html', 'int_infoseek.html')">Weitere internationale Suchmaschinen</A><P>
</BODY>
</HTML>

 Datei ansehen

Jetzt ist's aber genug mit Links. Wir könnten aber noch beliebig so weiter machen, aber zu lange Seiten sind auch kein gutes HTML.


Frames hinzufügen

Wir wollen wieder von der Situation zu Beginn dieses Übungsteils ausgehen. Unsere Ausgangssituation sieht etwa so aus.

Die beiden rechten Frames sollen nochmal jeweils in zwei nebeneinanderliegende, gleichgroße Frames aufgeteilt werden.
Auch hierzu benötigen wir noch einige Dateien.
Unser Inhaltsverzeichnis (inhalt.html) wollen wir um einen Link erweitern.

Aufgabe: Bitte laden Sie die Datei inhalt.html in den Texteditor und fügen Sie die passende Zeile hinzu. Erstellen Sie bitte noch vier weitere Dateien nach bewährtem Muster, die in den 4 Frames angezeigt werden können.

Sie sollten dann in ihrem Arbeitsverzeichnis mindestens folgende Dateien haben:
1) die Frame-Hauptseite (index.html)
2) das Inhaltsverzeichnis (inhalt.html)
3) acht Dateien für die Frames:
   - de_aladin.html
   - de_lotse.html
   - de_eule.html
   - de_lycos.html
   - int_altavista.html
   - int_excite.html
   - int_hotbot.html
   - int_infoseek.html


Lösung:

1. Die Frame-Hauptseite (index.html).

a) Für die gleichmäßige Aufteilung ist es am Besten Prozentangaben zu verwenden:

<HTML>
<HEAD>
<TITLE>FEN Schulung: Frames - Mit einem Mausklick zwei Frames &auml;ndern - Beispiel Suchmaschinen</TITLE>
</HEAD>
 <FRAMESET COLS="160,*">
  <FRAME SRC="inhalt.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
    </FRAMESET>
  </FRAMESET>
</FRAMESET>
</HTML>

b) Die Frames mit den zuerst zu ladenden Dateien einfügen ...

<HTML>
<HEAD>
<TITLE>FEN Schulung: Frames - Mit einem Mausklick zwei Frames &auml;ndern - Beispiel Suchmaschinen</TITLE>
</HEAD>
 <FRAMESET COLS="160,*">
  <FRAME SRC="inhalt.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="de_aladin.html">
      <FRAME SRC="de_eule.html">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="de_lotse.html">
      <FRAME SRC="de_lycos.html">
    </FRAMESET>
  </FRAMESET>
</FRAMESET>
</HTML>

c) ... und die Frames, die geändert werden sollen, benennen.

<HTML>
<HEAD>
<TITLE>FEN Schulung: Frames - Mit einem Mausklick zwei Frames &auml;ndern - Beispiel Suchmaschinen</TITLE>
</HEAD>
 <FRAMESET COLS="160,*">
  <FRAME SRC="inhalt.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="de_aladin.html" NAME="Frame_A">
      <FRAME SRC="de_eule.html" NAME="Frame_B">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="de_lotse.html" NAME="Frame_C">
      <FRAME SRC="de_lycos.html" NAME="Frame_D">
    </FRAMESET>
  </FRAMESET>
</FRAMESET>
</HTML>

2. Das Inhaltsverzeichnis (inhalt.html)

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

<SCRIPT LANGUAGE="JavaScript">
<!--

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

 // -->
</SCRIPT>

</HEAD>
<BODY bgcolor="#ffffff">
  <H3>Inhaltsverzeichnis</H3>
  <A HREF="javascript:multiLoad('de_aladin.html', 'de_eule.html', 'de_lotse.html', 'de_lycos.html')">Deutsche Suche</A><P>
  <A HREF="javascript:multiLoad('int_altavista.html', 'int_excite.html', 'int_hotbot.html', 'int_infoseek.html')">Internationale Suche</A><P>
</BODY>
</HTML>

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

Nach dem gleichen, bekannten Schema müssen sowohl die Funktion, als auch die Links erweitert werden.
Das war's eigentlich schon wieder. Hatten Sie alles richtig? - Wahrscheinlich schon.

Ein Tip: Schauen Sie sich auch ein erst teilweise fertiges Projekt oder einzelne Frame-Dateien immer wieder in Netscape an. Auf diese Weise erkennen Sie Fehler oft schon sehr früh.


Noch ein Schlußwort. Es hat viel Spaß gemacht diese Seiten zu erstellen. Es war mein erstes Projekt einer Online-Schulung und ich habe trotz Verwendung einer englischen Vorlage viel Zeit darauf verwendet. Eigentlich ist es gar nicht so schwer Frames zu erstellen, es gibt jedoch vielerlei Feinheiten und Kniffe. Verspielen Sie sich bitte nicht zu sehr, denn wird es für einen Besucher der Seite zu kompliziert und findet er oder sie sich nicht mehr zurecht, dann führt der kürzeste Weg nach drausen zu fremden Seiten.

 Viel Spaß !
 Euer Michael


Zurück zur Übung 8 - Mit einem Mausklick zwei Frames ändern
Weiter zur letzten Übung - Abschlußtest
Zur Indexseite