Informatik-Kompendium
Frames
Mit Frames lässt sich eine Webseite in mehrere Bereiche unterteilen. Jeder Bereich beinhaltet dabei einen eigenen Inhalt aus einer eigenen HTML Datei.
Somit ergeben sich für eine Webseite sehr viele gestalterische Möglichkeiten.
So kann zum Beispiel eine Webseite aufgeteilt werden in die Bereiche Kopf, Navigation, Inhalt, Fuss oder weitere. Wird nun aus der Navigation eine Unterseite ausgewählt, so kann diese direkt in den Inhaltsbereich geladen werden und die Navigation braucht somit nicht neu geladen werden, da die Navigation auf allen Seiten gleich bleibt.
Viele Webseiten besitzen auch einen Kopfbereich für Firmenname und Firmenlogo. Dieser Kopfbereich wird in der Regel auch auf allen Unterseiten identisch angezeigt und könnte somit als Frame angelegt werden.
Der große Nachteil von Webseiten die mit Frames erstellt wurden ist allerdings, dass sich die Unterseiten nicht als Favorit/Lesezeichen im Browser speichern lassen, da in der Adresszeile des Browsers immer nur die Startseite angezeigt wird.
Die Startseite z.B. index.html liegt immer im Hintergrund und lädt praktisch andere HTML Dateien in die zuvor erstellten Frame Bereiche.
Das Grundgerüst mit <frameset>
Das Grundgerüst einer Startseite für Frames sieht etwas anders aus.
Zuerst benötigen wir eine Dokumenttyp-Deklaration für Frame-Seiten (siehe im Menü 'Grundgerüst').
Innerhalb unseres <html></html> Bereichs schreiben wir wie gewohnt unseren <head></head> Bereich mit dem <title></title> und eventuellen Meta-Tags.
Danach folgt allerdings kein <body></body> Bereich sondern ein Frameset <frameset></frameset>.
Mit dem Frameset unterteilen wir unsere Webseite in mehrer Frames. Mit den Attributen 'cols' und 'rows' lassen sich die Anzahl der Spalten und Zeilen festlegen.
Ein Beispiel mit zwei vertikalen Frame-Bereichen bzw. Spalten z.B. für Navigation-links und Inhalt-rechts:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Webseite mit Frames</title>
</head>
<frameset cols="120px,*">
</frameset>
</html>
Mit 'cols' sind hier 2 Frame-Bereiche bzw. Spalten angegeben. Der erste Frame-Bereich hat eine Breite von 120px und der zweite Bereich hat eine automatische Breite. Dies wurde mit dem Sternchen angegeben und der Browser weiß das dieser Bereich die volle Breite vom Ende der ersten Spalte bis zum rechten Browserrand nutzen soll. Anstatt der Angabe in Pixel kann auch eine Angabe in Prozent (%) erfolgen.
Ein Beispiel mit 3 horizontale Frame-Bereiche bzw. Zeilen z.B. für Kopfbereich-oben, Inhalt-mitte und Fussbereich-unten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Webseite mit Frames</title>
</head>
<frameset rows="120px,*,50px">
</frameset>
</html>
Der Kopfbereich hat hier eine Höhe von 120px, der Fussbereich 50px und der Inhaltsbereich nimmt automatisch den restlichen zur Verfügung stehende Platz ein.
noframes
Für Browser die keine Frame-Technik darstellen können besteht die Möglichkeit hierfür einen separaten HTML Bereich mit '<noframes></noframes>' anzulegen.
Dieser Bereich muss innerhalb eines <frameset></frameset> liegen und wird nur abgearbeitet wenn ein Browser diese Frame-Technik nicht unterstützt.
Hierfür ist es zwingend notwendig im <noframes></noframes> Bereich das bekannte <body></body> zu definieren.
So könnte es z.B. aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Webseite mit Frames</title>
</head>
<frameset rows="120px,*,50px">
<noframes>
<body>
<p>
Ihr Browser unterstützt keine Frames. Bitte benutzen Sie einen anderen Browser
um die Webseite ansehen zu können.
Z.B. den Browser .......
<p>
</body>
</noframes>
</frameset>
</html>
frames
Mit <frame> bestimmen wir wir die Inhalte für jeden Frame-Bereich und vergeben jedem Frame-Bereich einen eindeutigen Namen.
Im folgenden Beispiel sind im <frameset> 2 horizontale Frames definiert, also benötigen wir auch 2 <frame> Tags.
So könnte es z.B. aussehen:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Webseite mit Frames</title>
</head>
<frameset rows="120px,*">
<frame src="oben.html" name="oben">
<frame src="unten.html" name="unten">
<noframes>
<body>
<p>
Ihr Browser unterstützt keine Frames.
Bitte benutzen Sie einen anderen Browser
um die Webseite ansehen zu können.
Z.B. den Browser .......
<p>
</body>
</noframes>
</frameset>
</html>
Die Seiten oben.html und unten.html sind gewöhnliche Seiten und könnten so aussehen:
oben.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Oben</title>
</head>
<body>
<p>
<a href="unten.html" target="unten" >Home</a> |
<a href="unterseite1.html" target="unten" >Unterseite 1</a> |
<a href="unterseite2.html" target="unten" >Unterseite 2</a>
</p>
</body>
</html>
unten.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unten</title>
</head>
<body>
<p>
Inhaltsbereich von unten.html
</p>
</body>
</html>
Zu Testzwecken wurden noch 2 einfache HTML-Seiten (unterseite1.html und unterseite2.html) angelegt die im erstellten Menü ausgewählt können.
Eigenschaften festlegen
Es kann für jedes <frame> Tag festgelegt werden, ob Bildlaufleisten angezeigt werden sollen.
scrolling="no" - Bildlaufleisten aus
scrolling="yes" - Bildlaufleisten an
scrolling="auto" - Bildlaufleisten automatisch an oder aus
In unserem Beispiel lässt sich die Größe der Frames im Browser durch ziehen mit der Maus verändern. Dies können wir unterbinden, indem wir in den <frame>Tag die Eigenschaft 'noresize' eintragen. Für XHTML beachten sie bitte das jedes Attribut auch einen Wert haben muss und daher schreiben sie für XHTML noresize="noresize".
Der Innenabstand des Frame-Inhalts lässt sich mit 'marginheight' für oben und unten sowie mit 'marginwidth' für links und rechts innerhalb des <frame> Tag festlegen. Als Wert geben sie einen. Geben sie hier einen Wert in Pixeln 'px' an.
Mit 'frameborder' lässt sich der Frame-Rahmen im <frame> Tag an oder aus schalten. Der Wert '0' steht für kein Frame-Rahmen und '1' für einen Frame-Rahmen.
Die Rahmenbreite können sie im <frame> Tag mit 'framespacing' in Pixeln angeben. Hierfür muss allerdings 'frameborder' auf 1 gesetzt sein.
Die Rahmenfarbe lässt sich im <frameset> Tag für alle Frames festlegen.
Für Farbenbeispiele schauen sie bitte im Navigationsbereich unter Farben.
Inline Frames / iframe
Ein internes Frame / Inline Frame können sie auf jeder beliebigen Webseite mit <iframe> einbinden. Das <iframe> wird dabei vom Browser wie eine gewöhnliche Grafik behandelt. Im <iframe>lassen sich andere Webdokumente wie z.B. HTML-Dateien o.a. darstellen.
So könnte ein iframe definiert werden:
<iframe src="http://www.html-kompendium.de/beispiel.html" name="iframe_1"
width="200px" height="200px" scrolling="yes" marginheight="0"
marginwidth="0" frameborder="0" >
Alternativer Text</iframe>
In diesem Beispiel wird ein <iframe> eingebettet mit einer Höhe und Breite von 200px. Die Bildlaufleisten wurden ausgeschalten. Die Innenabstände wurden auf 0 gesetzt und der Frame-Rahmen ausgeschalten. Anstatt des Alternativen Textes kann natürlich auch eine Grafik angezeigt werden.
Linktipps: