Frames

Meine Homepage
Startseite Wer ich bin Thema 1 Thema 2 Thema 3	Inhalt der jeweiligen Seite

Wenn du deine Homepage gebaut hast wirst du schnell feststellen, dass sich immer mehr ansammelt was auch noch auf die Seite soll. Früher oder später wirst du eine zweite Seite machen, die dann durch einen Link auf der ersten erreichbar ist. Dann kommt eine dritte und so weiter. Irgendwann stellst du dann fest, dass du ein undurchdringliches Gewirr von Seiten gebaut hast. Dann wird es Zeit dir eine Navigationsseite zu zu legen. Natürlich kannst du auf alle Seiten eine Tabelle machen, wie links gezeigt. In eine Spalte machst du dann Links zu allen Seiten und in eine andere Zelle machst du die Seiteninhalte. (Fortgeschrittene Webseitenbauer sollten das natürlich nicht so machen, aber als Anfänger ohne CSS-Kenntnisse wäre das eine Alternative.) Auf diese Weise behalten deine Besucher immer die Übersicht, wie sie wo, auf deiner Site (engl. - Platz) hin kommen. Das hat den Nachteil, dass alle Zellen für jede Seite neu geladen werden müssen, obwohl sie bis auf die Hauptzelle immer den gleichen Inhalt haben. Außerdem musst du jedes Mal, wenn du eine Seite ergänzt, alle Seiten ändern. Das kann man auch einfacher machen. Für so etwas verwendet man Frames in einem Frameset. "Frame" heißt "Rahmen", "Skelett", "Struktur", "Körperbau" oder als Verb "gestalten" oder "entwerfen". Ein Frameset ist ein Dokument, das ein Gebilde aus Rahmen und was in den Rahmen dargestellt werden soll beschreibt. Das bedeutet natürlich nicht, dass zwischen den Inhalten sichtbare Rahmen sein müssen. Statt der eben beschriebenen Tabelle machst du also eine Seite die ein Frameset aus z.B. 3 Frames enthält. Im ersten Frame soll dann eine Seite dargestellt werden die das enthält, was oben in der ersten Zelle war. Ein weiterer Frame enthält eine Seite, die die Navigationslinks enthält. Ein weiterer Frame enthält die Seite mit dem Inhalt der Hauptzelle. Diese Seite wird dann beim Betätigen eines Links gegen die neue Seite ausgetauscht. Die anderen Frames behalten ihren Inhalt.

oben
links	hauptframe

Quelltext

<html>
<head>
<title>Titel</title>
</head>
<frameset rows="Höhe der ersten Zeile,*">
  <frame name="oben" src="seite_2.htm">
  <frameset cols="Breite der ersten Spalte,*">
    <frame name="links" src="seite_3.htm">
    <frame name="hauptframe" src="seite_4.htm">
  </frameset>
</frameset>
</html>

Frames sind nicht immer sinnvoll. Zwar gibt es mittlerweise keine aktuellen Browser mehr, die keine Frames unterstützen, aber trotzdem gibt es noch eine ganze Reihe Nachteile. Z.B. kann man eine Seite nicht direkt bookmarken (zu den Favoriten abspeichern), weil im Browser ja nur die Adresse des Framesets erscheint. Beim erneuten Besuchen der URL werden dem User natürlich in allen Frames die jeweiligen Startseiten gezeigt. Außerdem ist es auf kleinen Monitoren nicht unbedingt sinnvoll mehrere HTML-Seiten gleichzeitig zu zeigen. Die Ladezeit ergibt sich natürlich aus der Summe aller beteiligten Elemente. Das kann bei Framesets mit vielen Frames ganz schön lang sein. Dass man Framesets nicht ohne weiteres ausdrucken kann, kommt noch dazu. Dazu kommen noch erhebleiche Probleme im Zusammenhang mit Suchmaschinen. Frames sind meist nur sinnvoll wenn einzelne Frames Elemente enthalten die beim ganzen Besuch der Site sichtbar sein sollen, oder wenn zwei Seiten miteinander verglichen werden sollen.

Fangen wir mit dem einfachsten aller möglichen Framesets an:

links

rechts

Quelltext

<html>
<head>
<title>Titel</title>
</head>
<frameset cols="Breite des ersten Frames,*">
<frame name="links" src="seite_1.htm">
<frame name="rechts" src="seite_2.htm">
</frameset>
</html>

Ein Frameset mit 2 Frames die neben einander liegen wird so aufgebaut: Die Definition des Framesets steht immer hinter dem <head>Bereich. Sie fängt immer mit <frameset an. Bei neben einander liegenden Frames folgt dann cols="aaa,bbb">. Daß cols die HTML-Abkürzung für "columns" ist, und dass das "Spalten" heißt, hast du ja schon bei den Tabellen gelernt. aaa musst du durch die Breitenangabe des ersten Frames ersetzen. Es gibt 3 verschiedene Arten das zu tun: Durch eine (ganze) Zahl gibst du die Breite in Pixel an. Durch eine Zahl mit Prozentzeichen gibst du die Breite in Prozent der Fenstergröße an. Mit * kannst du eine Angabe machen die von den anderen Angaben und von der Fenstergröße des Users abhängig ist. Bei <frameset cols="20,10%,*,2*"> z.B. werden 4 Frames gemacht. Der erste ist 20 Pixel breit, der zweite ist 10% vom Anzeigefenster breit, die beiden anderen teilen sich den restlichen Platz im Verhältnis 1 zu 2. Der dritte Frame wird also halb so breit wie der vierte. Bei <frameset cols="100,*,200"> wird der erste Frame 100 Pixel breit, der dritte wird 200 Pixel breit und der mittlere bekommt den restlichen Platz. Bei <frameset cols="3*,*,5*"> wird der Platz anteilmäßig vergeben. Der erste Frame wird 3 mal so breit wie der zweite, der dritte wird 5 mal so breit wie der zweite. Alle Angaben zusammen dürfen nicht breiter als das Fenster des Users sein! Da du nicht weißt, wie groß sein Fenster ist, solltest du also mit Angaben in Pixeln vorsichtig sein und immer mindestens einen Frame mit flexibler Breite einbauen.

Nach dem <frameset>Tag kommt die Beschreibung der einzelnen Frames. Sie fängt für jeden Frame mit <frame an. Danach bekommt der Frame mit name="Name" einen Namen. Dieser Name wird gebraucht, um den Frame als Darstellungsziel für Links angeben zu können. Der Name darf nur aus Ziffern, Buchstaben und dem Unterstrich bestehen. Die Namen "_self", "_parent", "_top" und "_blank" dürfen nicht vergeben werden weil sie reservierte Darstellungsziele sind. "_self" und "_blank" hast du ja schon im Kapitel Hyperlinks kennen gelernt. Namen dürfen natürlich nicht doppelt vergeben werden, d.h. jeder Frame muß einen anderen Namen bekommen.

Danach kommt src="URL">. Dass "src" "source" = "Quelle" heißt weißt du ja auch schon. Hier gibst du, wie bei einem Bild, die Adresse der Seite an, die zu Anfang in diesem Frame gezeigt werden soll. Wenn der Frame leer bleiben soll, kannst du src="URL" auch weg lassen. (Das > musst du natürlich schreiben!) Bei URL kannst du relative oder absolute Pfade verwenden, wie bei den Bildern und bei den Links. Für jeden Frame musst du so ein Tag schreiben.

Mit </frameset> beendest du die Definition des Framesets.

oben

unten

Quelltext

<html>
<head>
<title>Titel</title>
</head>
<frameset rows="Höhe des ersten Frame,*">
<frame name="oben" src="seite_1.htm">
<frame name="unten" src="seite_2.htm">
</frameset>
</html>

Wenn die Frames unter einander sein sollen, notierst du im <fameset>Tag statt cols="..."> einfach rows="aaa,bbb">. Dass "rows" "Reihen" heißt weißt du schon. Hier muss also die Höhe der Reihen festgelegt werden. Dafür gelten die gleichen Regeln wie für die Breite der Spalten.

links	oben
	unten

Quelltext

<html>
<head>
<title>Titel</title>
</head>
<frameset cols="Breite der ersten Spalte,*">
  <frame name="links" src="seite_1.htm">
  <frameset rows="Höhe der ersten Reihe,*">
    <frame name="oben" src="seite_2.htm">
    <frame name="unten" src="seite_3.htm">
  </frameset>
</frameset>
</html>

Framesets kann man auch verschachteln. Dadurch kann man Frames neben- und untereinander bauen.

oben
links	rechts

Quelltext

<html>
<head>
<title>Titel</title>
</head>
<frameset rows="Höhe der ersten Reihe,*">
  <frame name="oben" src="seite_1.htm">
  <frameset cols="Breite der ersten Spalte,*">
    <frame name="links" src="seite_2.htm">
    <frame name="rechts" src="seite_3.htm">
  </frameset>
</frameset>
</html>

Im nächsten Kapitel geht's um Frameeigenschaften.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: