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

Wie erstelle ich Web Frames?

Übung 6 - Frame-Fenster verlinken

Wir haben inzwischen viele Details kennengelernt. Auch in dieser Übung werden wir wieder von einem einfachen Beispiel ausgehen. Speichern Sie folgenden HTML-Code als frame6.html in Ihrem Arbeitsverzeichnis ab.

<HTML>
<HEAD>
<TITLE>Frame-Beispiel 6</TITLE>
</HEAD>
<FRAMESET COLS="33%,67%">
  <FRAME SRC="kim.htm">
  <FRAME SRC="terri.htm">
</FRAMESET>
</HTML>

 Mein Beispiel ansehen


Link im gleichen Fenster anzeigen

Nun wollen wir einen Link (Verweis) von kim.html auf lisa.html einfügen, sodaß das Fenster von kim.html duch den Inhalt von lisa.html ersetzt wird.
Erst einmal aber einige Vorbereitungen dafür. Laden Sie kim.html in den Texteditor,  fügen Sie bitte den folgenden Link mit Linktext hinzu und speichern Siue die Datei unter gleichem Namen wieder ab.

<HTML>
<HEAD>
<TITLE>Titelzeile der allgemeinen Beispieldatei kim.html</TITLE>
</HEAD>
<BODY>
<p>
  <B>kim.html</B> Beispieldatei<br>
  Hier geht's zu Seite von <A HREF="lisa.html">Lisa</A>!
</p>
</BODY>
</HTML>

Öffnen Sie jetzt frame6.html in Netscape, wenn nötig erst aktualisieren um die Änderungen von kim.html zu laden und dann den neuen Link auf Lisa ausprobieren.

 Mein Beispiel ansehen


Link in einem anderen Fenster anzeigen

Das war noch nicht berauschend, aber durch einen Link im Frame kim.html den anderen Frame terri.html zu ändern, das wäre doch was. Also ran ans Werk.

Um einen anderen Frame ansprechen zu können müssen wir diesem erst mal einen Namen (NAME) geben. Diese Angabe muß in der Frame-Beschreibungsseite stehen.
Für ein barrierefreies Webdesign muß jeder Frame auch einen Titel als kurze Erklärung seiner Funktion enthalten.
Geben wir also dem zweiten Frame Namen und Titel:

<HTML>
<HEAD>
<TITLE>Frame-Beispiel 6b</TITLE>
</HEAD>
<FRAMESET COLS="33%,67%">
  <FRAME SRC="kim.html" TITLE="Seite von Kim">
  <FRAME SRC="terri.html" NAME="Fenster" TITLE="Hauptseite">
</FRAMESET>
<HTML>

Speichern sie bitte das Beispiel als frame6b.html.
Was hat sich im Vergleich zum vorigen Beispiel in Netscape verändert?

 Mein Beispiel ansehen

Um Mißverständnissen gleich vorzubeugen: Der Zweite Frame gehört nicht terri.html, diese Datei wird nur beim Aufruf der Frame-Beschreibungsdatei dort angezeigt. Hätten wir einen leeren <FRAME> - Tag dort angegeben, dann würde auch ein - wer hätte das erwartet - leeres Fenster angezeigt werden.
Der 2. Frame ist einfach nur der 2. Frame!

Anmerkung: Namen von Frames müssen mit einem Buchstaben beginnen, dürfen nicht zu lang sein und nur aus Buchstaben, Ziffern und Unterstrichen bestehen. Namen, die mit einem _Unterstrich beginnen haben eine besondere Bedeutung, doch dazu später mehr.


Noch eine kleine Ergänzung muß in die Datei kim.html eingefügt werden. Laden Sie wieder die datei kim.html in den Texteditor und ergänzen Sie bitte die TARGET -Angabe (Ziel). Speichern Sie dann die Datei.
Dieses neue Attribut gibt an in welches Fenster die angegebene Datei geladen werden soll.

<HTML>
<HEAD>
<TITLE>Titelzeile der allgemeinen Beispieldatei kim.html</TITLE>
</HEAD>
<BODY>
<p>
  <B>kim.html</B> Beispieldatei<br>
   Hier geht's zu Seite von <A HREF="lisa.html" TARGET="Fenster">Lisa</A>!
</p>
</BODY>
</HTML>

 Mein Beispiel ansehen

Hinweis: Die Schreibweise des Namen bei Target, auch groß-/Kleinschreibung muß exakt bei der Definition und beim Link unterschieden werden!


Link auf einen entfernten Server  in einem anderen Fenster anzeigen

Funktioniert das auch, wenn ich auf einen entfernten Server verweisen möchte?
Probieren wir es einfach aus.
Laden Sie wieder kim.html in den Texteditor und fügen Sie zusätzlich noch einen Link mit kompletter Adressangabe (einschließlich Server) hinzu.

<HTML>
<HEAD>
<TITLE>Titelzeile der allgemeinen Beispieldatei kim.html</TITLE>
</HEAD>
<BODY>
<p>
  <B>kim.html</B> Beispieldatei<br>
  Hier geht's zu Seite von <A HREF="lisa.html" TARGET="Fenster">Lisa</A>!<br>
  und hier wollen wir zur Homepage von
  <A HREF="http://www.fen-net.de/" TARGET="Fenster">
  Förderverein FEN: Free-Net Erlangen-Nürnberg-Fürth</A> linken.
</p>
</BODY>
</HTML>

 Mein Beispiel ansehen

... und? Hat es auch bei ihnen geklappt?


Fensternamen mit besonderenen Funktionen

Soll ein Link nicht in einem Frame angezeigt werden, sondern den ganzen Browser-Bildschirm ausfüllen und der Frame damit beendet werden, so sind besondere TARGET-Angaben nötig: TARGET = "_top"

<HTML>
<HEAD>
<TITLE>Titelzeile der allgemeinen Beispieldatei kim.html</TITLE>
</HEAD>
<BODY>
<p>
  <B>kim.html</B> Beispieldatei<br>
  Hier geht's zu Seite von <A HREF="lisa.html" TARGET="Fenster">Lisa</A>!<br>
  und hier wollen wir zur Homepage von
  <A HREF="http://www.fen-net.de/" TARGET="_top">
  Förderverein FEN: Free-Net Erlangen-Nürnberg-Fürth<</A> linken.
</p>
</BODY>
</HTML>

 Mein Beispiel ansehen

Wie zeigt sich der Erfolg in Netscape? ____________________
Wird das Frameset beendet? _______________________

Hinweis: Im Allgemeinen sollte man diese Methode verwenden, wenn man auf eine fremde Seite verweist. Oft haben sich sonst mehrere Frames ineinander verschachtelt und der Besucher der Seite kann auf dem Bildschirm kaum noch was erkennen.
Außerdem ist es unfair, denn eine fremde Seite wird zwar meist in einem Framefenster korrekt dargestellt, aber für den Betrachter der Seite ist in keinster Weise erkennbar, daß die Seite fremden Ursprungs ist.
Es ist auch möglich  fremde Unterseiten von Frames in ein eigenes Projet einzufügen. Damit nehmen Sie aber auch dem Fremdanbieter die Möglichkeit (oder schränken ihn ein) seinerseits Navigationshilfen oder weitere Angebote darzustellen.

Beim Verweis auf fremde Seiten TARGET="_top" verwenden.


Weitere besondere TARGETS sind
_self, _blank und _parent.
target="_blank" bewirkt, daß das Verweisziel in einem neuen, zusätzlichen Instanzfenster des Browsers angezeigt wird.
Das ursprüngliche Browser-Fenster mit Ihrem Frameset bleibt im Hintergrund erhalten und mit der Tastenkombination [ALT]-[TAB] oder der Windows-Taskleiste kann zwischen den Fenstern umgeschaltet werden.
target="_parent" bewirkt, daß das Verweisziel in dem Zustand des Anzeigefensters angezeigt wird, der vor dem Start Ihres Framesets aktuell war, also eine Instanz höher.
Ungültige Targets, oder Targets, die auf nicht vorhandene Angaben verweisen werden wie _blank behandelt, jedoch mit einem kleinen Unterschied.
Welchem ? ______________________________

Hinweis: Normalerweise unterscheidet HTML nicht Groß-/Kleinschreibung. TARGET ist hiervon eine Ausnahme!
Nur TARGET="_top" wird zum gewünschten Ergebnis führen. Jede andere Schreibweise wirkt ähnlich wie TARGET="_blank" und öffnet eine neue Instanz des Browsers (s.o.). Dabei bekommt aber dieses neue Browserfenster den angegebenen Namen und weitere Links mit dem gleichen TARGET werden in diesem Fenster angezeigt (auch wenn es durch andere Fenster verdeckt wird).

Aufgabe: Probieren Sie die neuen Attribute aus. Experimentieren Sie auch einmal mit TARGET="_blank" und TARGET="_parent" oder einer außergewöhnlichen Angabe wie TARGET="_iRgeNdwaS_".
Beschreiben sie die erzielten Effekte: _________________________

In der folgenden Übung wollen wir das bisher Gelernte in einem Projekt ausprobieren.


Zurück zur Übung 5 - Weitere Effekte
Weiter zur Übung 7 - Praktikum
Zur Indexseite