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>
<SCRIPT LANGUAGE="JavaScript">
function multiLoad(doc1,doc2) {
// -->
</HEAD>
|
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>
<SCRIPT LANGUAGE="JavaScript">
function multiLoad(doc1,doc2) {
// -->
</HEAD>
|
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 ä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 ä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 ä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>
<SCRIPT LANGUAGE="JavaScript">
function multiLoad(doc1,doc2,doc3,doc4)
{
// -->
</HEAD>
|
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