HTML-Kurs Lektion 11 Teil 1

Lektion 11/Teil 1 - Frames (Grundlagen)

In dieser HTML-Lektion werde ich dir erklären, wie man Frames anlegt. Frames bieten die Möglichkeit, den Bildschirm in verschiedene Fenster aufzuteilen. In einem Browser-Fenster sieht man dann gleichzeitig mehrere HTML-Seiten gleichzeitig.

Mit Frames zu arbeiten setzt etwas Denkarbeit vorraus.

Um Frames darstellen zu können, brauchst du einen Browser wie den Netscape Navigator ab der Version 2.0 oder den MS Internet Explorer ab der Version 3.0.

Damit der Browser Frames darstellt, muss zusätzlich zu den anzuzeigenden Seiten, eine sogenannte Frameset-Seite programmiert werden. Im Frameset werden dem Browser die verschiedenen Anweisungen, wie die Frames aussehen sollen gegeben. Sie legen fest, wie das Browserfenster gestaltet werden sollen.

Eine HTML-Seite mit einem Frameset sieht zum Beispiel so aus:

<HTML>
<HEAD>
<TITLE>Frameset</TITLE>
</HEAD>
<FRAMESET>
Angaben zum Frameset
</FRAMESET>
<BODY>
(Hier kann ein Text für die Internetbenutzer stehen, die einen Browser haben, der keine Frames darstellt.)
</BODY>
</HTML>

<FRAMESET>...</FRAMESET>- hier stehen die Parameter zum Frameset.

Das Frameset

Die ersten Angaben, die im Frameset gemacht werden müssen, sind - wie bei den Tabellen - die Größenangaben für Spalten oder Reihen. Wenn Sie z.B. zwei Spalten einrichten wollen, sieht das Frameset so aus:

COLS=... steht für column (englisch für Spalte). Hier gibt man an, wieviele Spalten dein Frameset haben soll und wie breit sie sein sollen. Schreiben Sie einfach, durch Kommas getrennt, hintereinander die Breite der Spalten. Wenn Sie vier Spalten wollen, müssen Sie vier Breiten-Werte in diesem Befehl angeben.

Man kann entweder die Pixelanzahl oder einen Prozentwert angeben. Die erste Spalte ist in meinem Beispiel 400 Pixel breit. Für die zweite Spalte habe ich ein * angegeben. Das bedeutet, die Spalte soll so groß wie der Rest des Browserfensters sein.

Gebe ich z.B. COLS="25%,75%" an, nimmt die erste Spalte ein Viertel des Browserfensters ein und die zweite Spalte drei Viertel des Fensters. Es ist also egal, wie groß das Fenster aufgezogen ist - die Aufteilung hat immer das selbe Größenverhältnis.(dynamische Anpassung)

<FRAME SRC="SPALTE1.HTML"> - SCR=... kennen Sie schon von IMG SCR beim Einbinden von Grafiken. SCR (Abkürzung für Source - englisch für Quelle) gibt dem Browser die HTML-Seite an, die an dieser Stelle stehen soll. Die erste angegebene Seite kommt in die erste Spalte - im Beispiel ist das die Spalte mit der Breite 400. Die nächste Seite kommt in die nächste angegebene Spalte, und so weiter.

Erstes Beispiel - das Frameset:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="70,400,*">
<FRAME SRC="S1.HTM">
<FRAME SRC="S2.HTM">
<FRAME SRC="S3.HTM">
</FRAMESET>
<BODY>
Wenn du diesen Text liest, kann dein Browser keine Frames darstellen.
</BODY>
</HTML>

Die Seiten, die das Frameset aufruft (Frameseite):

Speichern Sie diese Seite unter dem Namen S1.HTM ab:

<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#0000FF" BGCOLOR="#CCFF00">
Das ist die Seite, die in der linken Spalte des Frames auftauchen wird.
</BODY>
</HTML>;

Speichern Sie diese Seite unter dem Namen S2.HTM ab:

<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#66CC00" BGCOLOR="#000066">

Das ist die Seite, die in der mittleren Spalte des Frames auftauchen wird.
</BODY>
</HTML>

Speichern Sie diese Seite unter dem Namen S3.HTM ab:

<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#CCFF00" BGCOLOR="#0000FF">
Das ist die Seite, die in der rechten Spalte des Frames auftauchen wird.
</BODY>
</HTML>

Beispiel anzeigen

Genauso wie man COLS="..." angibt, kann man anstatt dessen ROWS="..." angeben. Die Seite wird dann in mehrere Reihen aufgeteilt. Dazu gibt es gleich die Beispielseite:

Zweites Beispiel - das Frameset:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="70,200,*">
<FRAME SRC="R1.HTM">
<FRAME SRC="R2.HTM">
<FRAME SRC="R3.HTM">
</FRAMESET>
<BODY>
Wenn du diesen Text liest, kann dein Browser keine Frames darstellen.
</BODY>
</HTML>

Die Seiten die das Frameset aufruft:

Speichern Sie diese Seite unter dem Namen R1.HTM ab:

<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#0000FF" BGCOLOR="#CCFF00">
Das ist die Seite, die in der oberen Reihe des Frames auftauchen wird.
</BODY>
</HTML>

Speichern Sie diese Seite unter dem Namen R2.HTM ab:

<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#66CC00" BGCOLOR="#000066">
Das ist die Seite, die in der mittleren Reihe des Frames auftauchen wird.
</BODY>
</HTML>

Speichern Sie diese Seite unter dem Namen R3.HTM ab:

<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#CCFF00" BGCOLOR="#0000FF">
Das ist die Seite, die in der unteren Reihe des Frames auftauchen wird.
</BODY>
</HTML>

Beispiel anzeigen

zur Lektion 11/2