Frames #
Übersicht
Frames mit <frameset>
Frames mit <iframe>
Frames mit <object>
Mit Hilfe von Frames (frame = Rahmen) ist es möglich, eine Webseite in unabhängige Bereiche aufzuteilen, die eigenständige Dokumente enthalten. Der Inhalt jedes einzelnen Frames ist in der Regel ein normales HTML-Dokument. Da man in den Browser aber immer nur genau eine Datei laden kann, wird mit den Elementen <frameset>, <iframe> oder <object> ein Bereich innerhalb der Seite definiert, in dem das oder die Frames lediglich referenziert werden. Die einzelnen Frames werden dann nachrangig, wie z. B. auch im Quelltext referenzierte Bilddateien, nachgeladen und an der definierten Position angezeigt.
Framesets #
Die klassische Methode, Frames in eine Seite zu integrieren, ist die Verwendung von Framesets. Dieses Verfahren ist in HTML5 nicht mehr erlaubt, weshalb man in diesem Fall auf HTML 4.01 zurückgreifen muss (s. Quelltext). Der große Nachteil von Framesets (und Frames überhaupt) besteht darin, dass immer nur das Elterndokument als Lesezeichen gespeichert werden kann, und der Inhalt eines darin enthaltenen Frames (der ja wechseln kann), dabei nicht berücksichtigt wird.
Ein Frameset kann beliebig viele Frames oder auch weitere Framesets enthalten. Der Inhalt eines einzelnen Frames kann durch einen internen Link geändert werden, ohne dass sich die eigentliche Frameset-Datei selbst ändert.
Um ein Frameset zu laden, müssen die referenzierten Dateien natürlich existieren. Um das Beispiel hier zu testen, ist es daher nun zunächst nötig, die einzelnen Dateien herzustellen. Das Beispiel verwendet drei Frames, wobei für den Inhalt des dritten Frames drei und für den Titel-Frame zwei alternative Dokumente zur Verfügung stehen. Der Inhalt der Frames für dieses Beispiel ist relativ beliebig. Hilfreich ist es aber für diese Demonstration, wenn diese z. B. duch unterschiedliche Hintergrundfarben optisch von einander unterscheidbar sind, damit man den Frame-Effekt auch sieht. Ich habe daher für jeden einzelnen Frame sowie für das Frameset den kompletten Quellcode angegeben:
frameset.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title>Mein erstes Frameset</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<meta http-equiv='language' content='de'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='index, follow'>
</head>
<frameset rows='85,*'>
<frame src='banner1.htm' name='banner' scrolling='no'>
<frameset cols='150,*'>
<frame src='navi.htm' name='navi'>
<frame src='haupt1.htm' name='hauptframe'>
</frameset>
<noframes>
<body>
<p>Diese Seite verwendet Frames! Bitte besorgen Sie sich einen aktuellen
Browser!<br>Sie können aber auch <a href='ohne_frames.htm'>eine Version dieser Website ohne Frames
ansehen</a>!</p>
</body>
</noframes>
</frameset>
</html>
|
banner1.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Banner</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:aqua'>
<h1>Mein erstes Frameset</h1>
</body>
</html>
|
banner2.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Banner2</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:green;'>
<h1>Ein anderer Titel</h1>
</body>
</html>
|
navi.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Navi</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:wheat;'>
<p>
<a href='haupt1.htm' target='hauptframe'>Erste Seite</a><br>
<a href='haupt2.htm' target='hauptframe'>Zweite Seite</a><br>
<a href='haupt3.htm' target='hauptframe'>Dritte Seite</a><br><br>
<a href='banner2.htm' target='banner'>Neuer Titel</a><br>
<a href='banner1.htm' target='banner'>Alter Titel</a><br><br>
<a href='haupt2.htm' target='_parent'>_parent</a><br>
</p>
</body>
</html>
|
haupt1.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Seite 1</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:white;'>
<h3>Erste Seite</h3>
<p>Hier steht jede Menge wichtiger Inhalt…</p>
</body>
</html>
|
haupt2.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Seite 2</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:yellow;'>
<h3>Zweite Seite</h3>
<p>Hier steht jede Menge wichtiger Inhalt…</p><br>
<a href='haupt2.htm' target='_parent'>_parent</a>
</body>
</html>
|
haupt3.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title>Frame Seite 3</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<meta http-equiv='language' content='de'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<frameset cols='*,100'>
<frame src='haupt3b.htm'>
<frame src='haupt3c.htm' noresize='noresize'>
<noframes>
<body>
<p>Diese Seite verwendet Frames! Bitte besorgen Sie sich einen aktuellen
Browser!<br>Sie können aber auch <a href='ohne_frames.htm'> eine Version dieser Website ohne Frames
ansehen</a>!</p>
</body>
</noframes>
</frameset>
</html>
|
haupt3b.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Seite 3b</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:green;'>
<h3>Ditte Seite</h3>
<p>Hier steht jede Menge wichtiger Inhalt…</p><br>
<a href='haupt3c.htm' target='_parent'>_parent</a>
</body>
</html>
|
haupt3c.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Frame Seite 3c</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:white;'>
<p><a href='haupt1.htm' target='_top'>Seite 1</a><br>(_top)</p>
</body>
</html>
|
Abgesehen von dem unterschiedlichen Dokumenttyp besitzt ein Frameset keinen <body>, sondern eben ein <frameset>, in dem die einzelnen Frames angegeben werden. Innerhalb des <frameset>-Tags wird außerdem ein <noframe>-Bereich angegeben, in dem normales HTML stehen kann, das in dem Fall angezeigt wird, wenn der benutzte Browser keine Frames unterstützt. Hier kann ein einfacher Hinweis stehen oder zu einer alternativen Version des Inhaltes verwiesen werden, die ohne Frames funktioniert. Der Inhalt des <noframe>-Bereiches muss in einen <body>-Tag eingeschlossen werden.
Innerhalb des <frameset>-Tags werden nun die Dimensionen des Sets angegeben. Es ist hier möglich, eine beliebige Anzahl von Spalten (columns) oder Zeilen (rows) anzugeben. Will man innerhalb einer Spalte mehrere Frames untereinander oder innerhalb einer Zeile mehrere Frames nebeneinander anzeigen lassen, so muss man statt dieser Spalte bzw. Zeile ein eigenes Frameset definieren, wie im Beispiel. Hier besteht das primäre Frameset aus zwei Zeilen. Die erste Zeile enthält die Datei mit dem Seitentitel (banner1.htm), und in der zweiten Zeile wurde nun statt eines Frames ein weiteres sekundäres Frameset definiert, das aus zwei Spalten besteht (navi.htm und haupt1.htm).
Da das primäre Frameset aus Zeilen besteht, gibt der Wert seines Attributs rows='85,*' die Höhe der Zeilen an. Im sekundären Frameset, das aus Spalten besteht, gibt der Wert cols='150,*' die Breite der Spalten an. Die Wertangabe wird bei Zeilen von oben und bei Spalten von links aus nachfolgend notiert. Die Summe der Werte muss immer dem Gesamtmaß des Browserfensters entsprechen. Da man aber über dieses Gesamtmaß keine sicheren Informationen besitzt (das Fenster lässt sich ja vom Benutzer beliebig in der Größe verändern), gibt man nur die festen Werte an und ersetzt die flexiblen Werte durch einen *, was dann soviel bedeutet wie ›restliche Fläche‹. Es sind auch Wertangaben in Prozent möglich, z. B. cols='20%,80%'. Ebenso kann man Verhätnisse angeben, wie z. B. cols='1*,5*,2*'. Hier wird die Fensterbreite in 1 + 5 + 2 = 8 gleichgroße Bereiche aufgeteilt, wobei die erste Spalte 1/8, die zweite 5/8 und die dritte 2/8 der Fensterbreite einnimmt.
Innerhalb des <frameset>-Tags werden dann mit dem <frame>-Tag die einzelnen Dateien der Frames referenziert, die in das Frameset geladen werden sollen. Der <frame>-Tag besitzt keinen End-Tag. Das Attribut src (source) gibt den Pfad der Datei an. Das Attribut name muss angegeben werden, wenn der Browser beim Anklicken eines Links wissen soll, in welchem Frame die verlinkte Datei angezeigt wird (s. navi.htm). Dieser Name wird in dem <a>-Tag als Wert des Attributs target angegeben. Soll die neue Datei im gleichen Frame angezeigt werden, in dem sich auch der Link befindet, muss kein target angegeben werden, optional erfüllt target='_self' aber den gleichen Zweck. Weitere mögliche Werte für target sind innerhalb von Framesets '_parent' und '_top'. Der Wert '_parent' gibt an, dass die gesamte Datei (also nicht nur der einzelne Frame), in der das Frameset, aus dem heraus der Link erfolgt, definiert ist, von der Zieldatei überschrieben wird. Der Wert '_top' führt dazu, dass die Zieldatei den Raum des gesamten Browserfensters einnimmt, also alle Inhalte des Fensters ersetzt. Das Beispiel beinhaltet ein paar Links zum Testen dieses Verhaltens. Dabei sollte man auch mal einen Blick in die Adresszeile des Browsers werfen, um zu verstehen, welche Datei nun eigentlich angezeigt wird.
Optionale Attribute für <frame> sind Angaben über die Anzeige von Scrollbars und die Verschiebbarkeit des Rahmens zwischen den Frames. Mit scrolling='no' bzw. scrolling='yes' (s. frameset.htm, Zeile 13) legt man fest, ob Scrollbars nie bzw. immer angezeigt werden sollen. Lässt man dieses Attribut weg, werden Scrollbars nur bei Bedarf angezeigt. Mit dem Attribut noresize='noresize' (s. haupt3.htm, Zeile 14) kann man die Verschiebbarkeit des Rahmens zwischen zwei Frames unterdrücken. Dieses Attribut muss nur bei einem Frame angegeben werden, nicht auch zusätzlich für die angrenzenden Frames.
Inline-Frames mit <iframe> #
Inline-Frames sind in HTML5 zugelassen. Der Code innerhalb des <iframe>-Tags erfüllt eine ähnliche Aufgabe, wie der <noframe>-Tag bei Framesets: Wenn Inline-Frames von dem verwendeten Browser nicht unterstützt werden, wird statt dessen dieser Code angezeigt (in diesem Fall der Absatz innerhalb von <p></p>).
Das Attribut src enthält den Pfad der darzustellenden Datei. Die Attribute width und height geben die Größe des Frames in Pixeln an. Das name-Attribut ist nur für die Ansteuerung des Frames bei Verweisen von Bedeutung.
In verschiedenen Browsern wird ein Inline-Frame mit einem Rahmen versehen, dies lässt sich mit style='border-width:0;' unterbinden.
1 2 3 4 5 |
<iframe src='haupt.htm' width='450' height='200' name='iframe1'> <p>Diese Seite verwendet Frames! Bitte besorgen Sie sich einen aktuellen Browser!<br>Sie können aber auch <a href='ohne_frames.htm'>eine Version dieser Website ohne Frames ansehen</a>!</p> </iframe> |
Dazu benötigt man noch die referenzierte Datei haupt.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML>
<html lang='de'>
<head>
<title>Eingebettete Seite</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, follow'>
</head>
<body style='background-color:wheat;'>
<h2>Eingebettete Seite</h2>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
<p>Jede Menge Inhalt</p>
</body>
</html>
|
Dateien Einbinden mit <object> #
Mit dem <object>-Element können Bereiche innerhalb eines HTML-Dokuments festgelegt werden, in die ein bestimmter Inhalt nachgeladen wird, z. B. ein anderes HTML-Dokument oder eine Multimedia-Datei. Auf diese Weise lassen sich ebenfalls Frames innerhalb eines Dokuments realisieren.
Das Attribut data enthält den Pfad der darzustellenden Datei. Im Attribut type wird der MIME-Typ der Datei angegeben. Die Attribute width und height geben die darzustellende Größe der Datei in Pixeln an.
Zum Vergleich hier das Element <object> zusammen mit dem Element <iframe>. Man beachte, dass Pseudoframes mit <object> bei Mozilla und Opera im Gegensatz zu Inline-Frames keinen Rahmen haben!
1 2 3 4 5 6 7 |
<object data='haupt.htm' type='text/html' width='450' height='200'></object><br> <iframe src='haupt.htm' width='450' height='200' name='iframe1'> <p>Diese Seite verwendet Frames! Bitte besorgen Sie sich einen aktuellen Browser!<br>Sie können aber auch <a href='ohne_frames.htm'>eine Version dieser Website ohne Frames ansehen</a>!</p> </iframe> |