Frames


Mit Hilfe von Frames (Felder) können Sie den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufteilen. In jedem Feld wird ein eigener Inhalt (eine .html Datei) angezeigt.

So wird häufig die Navigation in einem Frame (meist auf der die linken Seite) und die Seiteninformation in einem anderen Frame dargestellt.

Ein Frame wird in der Startseite (index.html) mit dem Tag <frameset></frameset>definiert, und zwar vor dem <body></body> Tag, denn in dieser Datei wird kein Inhalt gespeichert, nur die Information, wo die Inhalte liegen! Dabei wird in unserem Beispiel mit dem Attribut cols die Spaltenbreite definiert (von Links nach Rechts).
Das kann mit einer festen Pixelzahl (z.B. 50) oder einer Prozentangabe erfolgen (z.B. 20%).

Bei der Angabe der "Übrigen Spalte" wird nach einer Angabe in Pixeln meist ein Platzhalter, das Asterix (*) benutzt, um anzuzeigen, dass der gesamte Rest der verfügbaren Fläche dem Übrigen Segment zugeteilt wird. (<frameset cols="200,*">)

Im Anschluss der Aufteilung werden die zu ladenden Quellen (Source - scr) angegeben. Hier:
<frame src="navigation.html">
<frame src="start.html">

Nun bekommt jeder Frame noch das Attribut name mit auf dem Weg. Das ist besonders wichtig, wenn später ein Link vom "navigationsframe" im "inhaltsframe" geöffnet werden soll. In unserem Beispiel also:
<frame src="navigation.html" name="navigationsframe">
<frame src="start.html" name="inhaltsframe">

Für den Fall, dass der Browser keine frames unterstützt, wird der <body></body> Tag mit dem <noframes></noframes> Tag eingeschlossen, dort kann eine Nachricht eingebunden werden, wie z. B., dass mann bitte eine neue Browser-Version installieren muss, um diese Webseite zu sehen. Hier der Quellcode der Datei index.html:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>

<html>
<head>
<title>Meine erste Seite mit Frames</title>
</head>
<frameset cols="200,*">
<frame src="navigation.html" name="navigationsframe">
<frame src="start.html" name="inhaltsframe">
</frameset>
<noframes>
<body>

Ihr Browser unterstützt keine Frames - bitte installieren Sie eine neuere Version.
</body>
</noframes>
</html>

<!-- Quellcode Ende -->

Damit währe der Rahmen definiert, wir benötigen jetzt noch die beiden html-Dateien navigation.html und index.html. In der Datei navigation.html werden die Links mit dem Attribut target="inhaltsframe" angewiesen, das Ziel im Hauptframe anzuzeigen, das ganze sieht dann so aus:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>

<html>
<head>
<title>Navigation</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#006633" alink="#FF0000" vlink="#006633">


<h1>Navigation</h1>
<p>

<a href="../hI_syntax.html" target="inhaltsframe">Syntax</a><br>
<a href="../hI_formatierungen.html" target="inhaltsframe">
Formatierung</a> <br>
<a href="../hI_bilder.html" target="inhaltsframe">
Bilder</a><br>
<a href="../hI_hyperlinks.html" target="inhaltsframe">
Hyperlinks</a><br>
<a href="../hI_tabellen.html" target="inhaltsframe">
Tabellen</a><br>
<a href="../hI_frames.html" target="inhaltsframe">
Frames</a></p>
<h1>
Aktuell </h1>
<p>
Heute im Angebot:<br>
Ganz neue, frische Webseiten!!!</p>

</body>
</html>

<!-- Quellcode Ende -->

Und das ganze sieht dann so aus:

 

zurück zum Seitenanfang