Frames
Es gibt in HTML zwei arten von Frames. Zum ersten iFrames (Eingebettete-Frames) und zum zweiten
Framessets. Der unterschied besteht darin, dass in Framesets der gesamte Bildschirm aufgeteilt wird,
und in jedem eingeteilten Bereich eine HTML-Datei angezeigt wird. IFrames werden dagegen innerhalb
einer normalen HTML-Datei definiert.
Folgende Probleme können auftreten, wenn Sie mit Frames arbeiten. Nicht alle Browser können
Frames darstellen. Es können keine externen Links zu bestimmten Seiten innerhalb Ihres Framesets
gesetzt werden. Außerdem besteht die Gefahr, das Besucher aus Suchmaschinen, Seiten aus dem
Frameset direkt aufrufen, ohne das Frameset zu laden.
IFrame definieren
IFrames sind normale HTML-Dateien in der HTML-Variante Transitional. Eingeleitet wird dieses Element mit
<iframe...>
. Mit dem Attribut src="..."
bestimmen Sie die HTML-Datei,
die in diesem Frame angezeigt werden soll. Die Größe dieses Fensters bestimmen Sie mit
width="..." height="..."
. Ferner sollten Sie diesen Fenster einen Namen geben,
dieser wird mit dem Attribut name="..."
definiert. Der Name darf außer einem
Unterstrich, Bindestrich, Punkt oder Doppelpunkt keine Sonderzeichen enthalten, also auch kein Leerzeichen
oder deutsche Umlaute ä ö ü ß. Zwischen den einleitenden
<iframe>
und den schließenden </iframe>
können Sie einen
Hinweis notieren, der erscheint, wenn der Browser des Besuchers kein iFrame-Element kennt.
Mit dem Attribut scrolling="yes"
oder no
geben Sie an, ob ein Scrollbalken
angezeigt werden soll, oder nicht. Des weiteren gibt es noch scrolling="auto"
, der nur dann
einen Scrollbalken anzeigt, wenn die Seite nicht in Framefenster passt. Aber aufgepasst, haben Sie no
angegeben, und es passt nicht alles ins Fenster, so hat der Betrachter keine Möglichkeit, den Teil der Seite
zu lesen, der nicht ins Fenster passt.
Den sichtbaren Außenrahmen können Sie mit frameborder="0"
unterdrücken.
Mit frameborder="1"
wird der Rahmen angezeigt und ist die Voreinstellung.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Eingebettete Frames definieren</title>
</head>
<body>
<h1>Inline-Frame</h1>
<p>Eine externe Datei mal in einem Fenster betrachten</p>
<iframe src="zb27a.html" width="88%" height="420"
frameborder="1" scrolling="auto" name="fenster">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über
<a href="zb27a.htm">HTML-Datei</a> aufrufen.</p>
</iframe>
</body>
</html>
Das ganze sieht so aus
Framesets definieren - Grundgerüst mit HTML 4
Die Unterschiede zu anderen HTML-Dateien fängt schon mit der Deklaration an. Nach dem abschließenden
</HEAD> folgt nicht der <BODY>-Tag, sondern die Frame-Definition. Das Grundgerüst sieht dann so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Frameset-Beschreibung</TITLE>
</HEAD>
<FRAMESET...>
Angaben zum Frameset
<NOFRAME>
<BODY>
Hier kann der Text dargestellt werden, der angezeigt wird,
wenn der Browser keine Frames darstellen kann
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Fenster aufteilen
Die ersten Angaben, die Sie hinter den Frameset
-Element setzen müssen, ist die Anzahl und Breite der Spalten bzw.
Höhe der Reihen.
<FRAMESET COLS="200,*">
= für Spalten
<FRAMESET ROWS="200,*">
= für Reihen
Im ersten Beispiel wird der Bildschirm in zwei Spalten geteilt, wobei die erste Spalte 200 Pixel breit ist, und die
zweite Spalte nimmt den Rest des Bildschirms ein. Im zweiten Beispiel ist der Bildschirm in zwei Zeilen geteilt, wobei
die erste Zeile 200 Pixel hoch ist. Statt der Pixelangaben kann auch die Prozentzahl angegeben werden.
COLS="20%,80%"
.
<FRAMESET ROWS="200,*,100">
Hierzu kommen wir später
</FRAMESET>
Ausgabe:
<FRAMESET COLS="300,*,200">
Hierzu kommen wir später
</FRAMESET>
1. Frame
|
2. Frame
|
3. Frame
|
Im nun folgenden Beispiel legen wir zwei Framesets an:
<FRAMESET ROWS="100,*">
Hierzu kommen wir später
<FRAMESET COLS="200,*">
Hierzu kommen wir später
</FRAMESET>
</FRAMESET>
1. Frame |
2. Frame
| 3. Frame
|
Achten Sie darauf, dass Sie die Frames so aufteilen, dass der ganze Bildschirm eingenommen wird. Entweder Sie nehmen
das Sternchen *, oder bei Prozentangaben müssen Sie auf 100% kommen.
Rahmendicke
Um Begrenzung zu Beeinflussen gibt es im Internet Explorer die Befehle FRAMEBORDER
und
FRAMESPACING
und beim Netscape Navigator genügt der Befehl BORDER
. Um bei beiden die
Begrenzung anzuzeigen, müssen alle drei Befehle angegeben werden.
<FRAMESET BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
Wird bei BORDER
0 angegeben, erscheint keine Linie, und je höher die Zahl wird, desto breiter wird
die Linie. FRAMEBORDER
kann die Werte 0 oder 1 haben, wobei 1 der Linie einen 3D-Effekt gibt. Der Befehl
FRAMESPACING
gibt die Breite an.
Diese Befehle werden zwar von den Browsern unterstützt, gehören aber nicht zum HTML-Standard des W3-Konsortium.
Dateien anzeigen
Um in die Frames jetzt mit Inhalte zu füllen, gibt es den Befehl FRAMES SRC=
.
Code:
<FRAMESET COLS="25%,50%,25%" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="SPALTE1.HTML">
<FRAME SRC="SPALTE2.HTML">
<FRAME SRC="SPALTE3.HTML">
</FRAMESET>
Hiermit habe ich den Bildschirm in drei Spalten geteilt. In der linken Spalte wird die HTML-Seite SPALTE1.HTML
gezeigt, in die zweite Spalte die Datei SPALTE2.HTML und in der rechten Spalte wird die Datei SPALTE3.HTML dargestellt.
Auch zu FRAME
gibt es noch weitere Angaben, die Sie mit angeben können. Zum ersten die Befehle
MARGINWIDTH="3"
und MARGINHEIGHT="3"
, wobei hier der Abstand in Pixel zum
Framerand angegeben wird.
Mit dem Attribut SCROLLING="YES"
oder NO
geben Sie an, ob ein Scrollbalken angezeigt
werden soll, oder nicht. Des weiteren gibt es noch SCROLLING="AUTO"
, der nur dann einen
Scrollbalken anzeigt, wenn die Seite nicht in Framefenster passt. Aber aufgepasst, haben Sie NO
angegeben,
und es passt nicht alles ins Fenster, so hat der Betrachter keine Möglichkeit, den Teil der Seite zu lesen, der
nicht ins Fenster passt.
Zum Schluss sollten Sie den Frames noch Namen geben, der wichtig ist, wenn Sie Links zwischen den Frames angibst. Aber
dazu später, zuerst wieder ein Beispiel einer kompletten Frame-Seite:
<HTML>
<HEAD>
<TITLE>Frameset-Beschreibung</TITLE>
</HEAD>
<FRAMESET ROWS="100,*">
<FRAME SRC="willkomm.htm" SCROLLING="NO" NAME="oben"
MARGINWIDTH="5" MARGINHEIGHT="6">
<FRAMESET COLS="210,*">
<FRAME SRC="navigat.htm" SCROLLING="AUTO" NAME="links"
MARGINWIDTH="5" MARGINHEIGHT="6">
<FRAME SRC="starten.htm" SCROLLING="AUTO" NAME="rechts"
MARGINWIDTH="5" MARGINHEIGHT="6">
</FRAMESET>
<NOFRAMES>
<BODY>
<h3>Diese Seite hat Frames</h3>
<p>Diese Seite hat Frames,
die von Ihrem Browser nicht unterstützt werden</p>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
oben = Inhalt von WILLKOMMEN.HTML
|
Links = Inhalt von INHALT.HTML
| rechts = Inhalt von SEITE1.HTML
|
Verweise in Frames
Wie angekündigt möchte ich noch einmal auf die Verweise/Links zurückkommen. Wie in oben angegebenen
Bespiel könnte in der INHALT.HTML Verweise stehen, um verschiedene Seiten aufzurufen, die dann in dem rechten
Framefenster angezeigt werden sollen. Dazu benutzen wir den bereits bekannten Befehl:
<a href="SEITE2.HTML" target="rechts">Seite 2</a>
Außerdem gibt es noch einige target-Befehle, die ich Ihnen nicht vorenthalten will:
target="_new"
Es wird eine neue Browserseite geöffnet, das alte Fenster bleibt
im Hintergrund bestehen.
target="_parent"
Die Seite wird im letztem bestehenden Browserfenster angezeigt
target="_top"
Die neue Seite wird im ganzen Fenster angezeigt.