Start Basics Struktur Text Links Bilder Tabellen Style Frames Tag-Ref

Frames
(für Fortgeschrittene)

Du hast das sicherlich schon einmal gesehen: Eine Seite ist zweigeteilt, die Navigationsseite bleibt links immer erhalten, nur die Inhaltsseite ändert sich.

Beide Bereiche sind in einem eigenen Rahmen (frame) eingebunden.

Der Quelltext solcher Seiten ist nicht so kompliziert.

Zunächst muss man den Gesamtrahmen (Frameset) definieren. Innerhalb dieses Rahmens werden dann die einzelnen Framefenster bestimmt

Nach oben Grundaufbau einer Frames-Seite

Hier legt man fest, wieviele Frames es geben soll und wo sie sich befinden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset ...> <!-- Frameset-Definition -->
<frame ...> <!-- Framefenster-Definition -->
<noframes>
Wird angezeigt, wenn der Browser keine Frames anzeigen kann (alte Browser)
</noframes>
</frameset>
</html>

Nach oben Verschiedene Frame-Anordnungen

Wir wollen hier zwei Beispiele für die Anordnung von Frames ansehen, um das Prinzip zu verstehen:

Anordnung nebeneinander (Navigation links):

Innerhalb des Frameset-Tags werden Spalten (cols) definiert, die in Prozenten oder (oft besser) genauen Pixeln angegeben werden können.

Danach werden den jeweiligen Framefenstern je eine HTML-Seite zugeordnet, die beim Aufruf des Framesets geladen wird.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset cols="150,500">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird: -->

<frame src="navigation.html" name="Navigation">
<!-- Das ist der Inhalt des linken Frames -->

<frame src="startseite.html" name="Inhalt">
<!-- Das ist der Inhalt des rechten Frames -->
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>


Zur Beispielseite

Anordnung übereinander (Navigation oben):

Innerhalb des Frameset-Tags werden Reihen (rows) definiert, die in Prozenten oder (oft besser) genauen Pixeln angegeben werden können. Hier ist es auch sinnvoll, die Größe des zweiten Frame undefiniert zu lassen (s.u.)

Danach werden den jeweiligen Framefenstern je eine HTML-Seite zugeordnet, die beim Aufruf des Framesets geladen wird.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset rows="150,*">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird: -->

<frame src="navigation.html" name="Navigation">
<!-- Das ist der Inhalt des linken Frames -->

<frame src="startseite.html" name="Inhalt">
<!-- Das ist der Inhalt des rechten Frames -->
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>


Zur Beispielseite

Natürlich können noch mehrere weitere Framefenster definiert werden.

Nach oben Verweise zwischen Frames

Damit die Navigation funktioniert, muss ich den Links auf der Navigationsseite als Ziel das Fenster der Inhaltsseite angeben. Das funktioniert mit dem schon bekannten target=""- Befehl:

<a href="inhalt.html" target="Inhalt">Link zum Inhalt</a>

Nach oben Die Gestaltung von Frames

Natürlich sehen diese Frames nicht besonders gut aus.

Das ist aber kein Problem, denn man kann sie entsprechend anpassen.

Am besten sind Frames-Seiten, denen man das nicht ansieht - das geht einfach mit den entsprechenden Befehlen:

frameborder="0" framespacing="0" border="0">

Weitere Möglichkeiten findet ihr hier.

Inline-Frames

Eine weitere Methode sind so genannte eingebettete Frames.

Sie befinden sich in einem normalen HTML-Quelltext zwischen dem iframe-Tag.

[...HTML-CODE]

<iframe src="schueler_bsp3.html" name="iframe" width="90%" height="400">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis
aufrufen: <a href="schueler_bsp3.html">Beispiel</a></p>
</iframe>
<br />
<a href="blindtext.html" target="iframe">Was anderes anzeigen!</a>


[...HTML-CODE]


Was anderes anzeigen!

Großes Lob!!

Wenn Du es bis hierher geschafft und die Übungen mitgemacht hast, hast du ein dickes Lob verdient!
Viel Spaß mit deinem neuen Wissen und frohes Experimentieren mit deiner Seite!

Zurück zur Startseite

HTML-Einführung (Version 2.0) © 2003 Ralf Arndt