10. FramesFrames erlauben es, mehrere HTML-Dokumente gleichzeitig in einem Browserfenster anzuzeigen.
Ein typischer Aufbau ist eine feste Navigation links und der Contentbereich rechts. Beide Teile sind eigenständig steuer- und scrollbar.
Das Benutzen von Frames ist unter Webmastern sehr umstritten, da gibt es mächtig viele Diskussionen. Frames haben ihre Vorteile, aber auch entscheidende Nachteile. Da das den Rahmen hier sprengen würde, werde ich das Thema „Frames: Pro – Contra“ in einem Mini-Tutorial gesondert behandeln.
Bei Frames unterscheidet man zwischen ganzen
Framesets (spezielle Seiten, in denen mehrere Dateien laden, die sonst keinen Inhalte enthalten) und
iFrames (liegen eingebettet in normalen HTML-Seiten und laden eine andere HTML-Seite in die bestehende hinein; hier kann um das iFrame bereits Inhalt bestehen).
Um das
Layout einer Seite als Frameset aufzubauen, werden mindestens 3 Dateien benötigt:
die Index-Seite, in der die Frames eingebettet sind, 2 Dateien, die in dem Frameset geladen werden sollen (z.B. eine navigation.html und eine inhalt.html). Natürlich können auch weitere Dateien geladen werden.
Der
Aufbau einer Frameset-Seite unterscheidet sich ein bisschen von der Standard-HTML-Seite.
Wir erinnern uns, dies ist der Aufbau einer HTML-Seite:
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
Inhalt der Webseite
</body>
</html>
Der Aufbau einer Frameset-Seite sieht wie folgt aus:
- Code:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN“>
<html>
<head>
<title>Titel der Webseite</title>
</head>
<frameset>
Inhalt des Framesets
</frameset>
</html>
2 Dinge müssen beim Aufbau von Framesets beachtet werden:
- der Doktype wird verändert (statt „Transitional“ wird „Frameset“ verwendet)
- statt des <body>-Tags gibt es ein
<frameset>-Tag, das die Inhalte einschließt; zusätzlich kann aber innerhalb des <frameset>-Tags ein <body> eingerichtet und mit Inhalten (Seitenbeschreibung, Sitemap usw.) befüllt
werden – diese Seite wird dann angezeigt, wenn der Browser des Users keine Frames unterstützt (ist nur bei sehr alten Browsern der Fall)
In dem <frameset>-Tag wird entweder eine horizontale (mit dem Attribut „cols“) oder vertikale (mit dem Attribut „rows“) Unterteilung des Browserfensters vorgenommen. Die Werte des Attributs werden durch Kommas getrennt und sind letztendlich eine Liste mit den jeweiligen Frame-Maßen in Pixeln (mind. 1 Frame braucht eine bestimmte Breite, das Frame mit variabler Breite bekommt den Wert „*“) oder Prozent (müssen zusammen immer 100% ergeben).
Zwischen <frameset> .. </frameset> stehen die <frame>-Tags, welche die zu ladenden Frames definieren und die ensprechenden HTML-Dokumente laden. Zusätzlich kann innerhalb eines <frameset>-Tags ein weiteres <frameset>-Tag stehen – so kann man verschachtelte Framesets erstellen.
Hier erstmal ein
klassisches Beispiel für ein Frameset:
- Code:
-
<frameset cols="100,*">
<frame src="navigation.html">
<frame src="inhalt.html">
</frameset>
Dieser Code erstellt ein 2-Spaltiges Frameset, bestehend aus Navigation und Inhalt. Die Navigation hat eine Breite von 100 Pixeln, der Inhaltsbereich passt sich an die Breite des Browserfensters an.
In die beiden Frames werden die Dateien navigation.html und inhalt.html geladen.
Mit Hilfe von verschalteten Framesets können
komplexere Framesets erstellt werden.
Häufig verwendet wird auch folgendes Beispiel:
- Code:
-
<frameset rows="150,*">
<frame src="oben.html">
<frameset cols="200,*">
<frame src="navigation.html">
<frame src="inhalt.html">
</frameset>
</frameset>
Hier haben wir ein 2-Zeiliges Frameset. In der oberen Zeile befindet sich ein Header – oben.html. In der unteren ist ein weiteres Frameset eingebunden, welches ein 2-Spaltiges Frameset erzeugt: navigation.html und inhalt.html.
Jeder Benutzer kann mit der Maus die
Größe des Frames zurechtziehen. Möchte man das unterbinden, kann man folgendes Attribut dem <frame>-Tag zuweisen:
- Code:
-
noresize=“true“
Um die Linien zwischen den Frames komplett auszublenden, fügt man folgende Attribute und Werte in das <frameset>-Tag ein:
- Code:
-
border="0" frameborder="no"
Das Ganze sieht dann zum Beispiel so aus:
- Code:
-
<frameset cols="100,*" border="0" frameborder="no" >
<frame src="navigation.html" noresize=“true“>
<frame src="inhalt.html" noresize=“true“>
</frameset>
Standardmäßig öffnet sich ein
Link innerhalb eines Framesets im gleichen Frame. Das ist natürlich, z.B. bei Navigationslinks, nicht erwünscht.
Um das zu vermeiden, müssen die einzelnen Frames einen Namen erhalten:
- Code:
-
<frame src="URL_der_Seite" name=”Name_des_Frames“>
Soll nun der Link eine Datei in einem bestimmten Frame öffnen, muss dies als Wert im target-Attribut des Hyperlinks angegeben werden (
Aufbau eines Links):
- Code:
-
<a href=“URL_des_Links“ target=“Name_des_Fensters“> ...Linktext... </a>
Bei den Frames mit der Navigation, kann im <head>-Bereich der Webseite ein
Standard-Target definiert werden:
- Code:
-
<base target=“Name_des_Fensters“>
Damit werden alle Links auf dieser HTML-Seite immer im angegebenen Frame geöffnet – auch ohne die spezielle Target-Angabe.
Ein
iFrame liegt, wie bereits oben beschrieben, in einer normalen HTML-Seite eingebettet und läd eine andere HTML-Seite in die bestehende hinein.
Um ein iFrame zu erzeugen, muss
an der gewünschten Stelle folgender Code eingefügt werden:
- Code:
-
<iframe src="URL_der_Seite" name=”Name_des_Frames“ width=“300“ height=“500“></iframe>
Auch bei einem iFrame wird die Quelle (eingebundene Seite) angegeben und ein Name kann zugewiesen werden. Zusätzlich sollte eine Höhen- und Breitenangabe in Pixeln oder Prozent definiert werden.
Startseite Otaku-Welt.de 
