6. HTML: Frames verwenden

So kannst du mehrere Seiten in einem Fenster anzeigen

In diesem Kapitel lernst du, wie man eine Seite mit einem frameset teilt, wie du Fenstergrößen und Rahmen festlegst und wie du eingebettete Rahmen in eine Einzelseite einfügst

Wiederholung

Im letzten Kapitel haben wir gelernt, wie man Tabellen kontextbezogen und physisch formatiert, Zelleninhalte ausrichtet und einzelne Zellen miteinander verschmilzt.

Einführung

Welche Vor- und Nachteile framesets bieten ist in Kapitel 3. Inhalt - Seite teilen: mit Frames oder verborgenen Tabellen arbeiten ausführlich beschrieben.

Bevor du daran gehen kannst, ein frameset zu programmieren, sollten die Seiten, die im frameset angezeigt werden, natürlich schon vorhanden sein.

Damit wir gleich ins Programmieren einsteigen können, habe ich darum eine leere Seite vorbereitet, die in allen Rahmen der framesets als Platzhalter angezeigt wird.

Einfach geteilte framesets

So teilst du das Fenster in zwei ungleiche Teile. Der kleinere (für die Navigation) kommt nach links. Siehe

Beispiel 16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Klassisches zweigeteiltes Frameset</title>
</head>
<frameset cols="20%,80%">
<frame src="los_17.htm" scrolling="no">
<frame src="los_17.htm" name="mitte">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Erklärung

Aufffällig ist, dass hier alles anders läuft als gewohnt. Denn nach dem head kommt in unserem Beispiel kein body. Stattdesen notieren wir: <frameset cols="20%,80%">. Mit cols="" wird das frameset horizontal aufgespalten. Durch die notierten Werte "20%,80%"wird das Fenster entsprechend proportional geteilt. Sodann werden in den frame-Marken die Dateien angegeben, welche in die beiden Fenster geladen werden sollen. Mit scrolling="no" wird im Rahmen, der die Seite mit der Navigation aufnimmt, die "Bildlaufleiste" (engl. = scrollbar) unterdrückt. Mit name="mitte" wird dem Fenster, in das die informationstragenden Seiten geladen werden sollen, ein Namen gegeben, was wir ja schon von a name="" her kennen. Diesen Namen werden wir später allen Navigations-links durch das Attribut target (target="mitte") mitgeben, damit die aufgerufenen Seiten in das benachbarte (rechte) und nicht ins eigene (linke) Fenster geladen werden!
Im angehängten body-Bereich, der innerhalb von noframes-Marken notiert wird, kann alternativer Text, ein Link auf die Navigationsseite oder Links zum Downloadbereich für frame-fähige Browser notiert werden.
Dieser body-Bereich wird nur von Browsern angezeigt wird, die keine framesets anzeigen können.
Zuletzt werden das frameset mit </frameset> und die HTML-Seite mit </html> abgeschlossen.

Im nächsten Beispiel kommt zur Abwechslung die Navigation nach unten. Siehe

Beispiel 18

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Zweigeteiltes Frameset, Navigation unten</title>
</head>
<frameset rows="*,60">
<frame src="los_17.htm" name="mitte">
<frame src="los_17.htm" scrolling="no">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Erklärung:

Mit rows="" wird das frameset vertikal aufgespalten. Statt einer Angabe in Prozent arbeiten wir mit einer festen Größe von 60 Pixeln für die Höhe der Navigation. Den ganzen Rest des verbliebenen Platzes bekommt das Fenster, in das die Inhalte geladen werden sollen (es trägt den Namen "mitte"), indem wir ein Sternchen notieren.

Kleine Übung:
Wie muss der Quelltext des framesets verändert werden, damit die Navigation oben erscheint?

Fenster weiter teilen:
Natürlich kannst du das Hauptfenster auch in drei oder noch mehr Sektionen aufspalten. Dazu muss nur ein weiterer frame notiert, und in der frameset-Marke, durch ein weiteres Komma abgetrennt, entsprechend Platz reserviert werden.

Verschachtelte framesets

Mit dem, was du bereits gelernt hast, kann man schon eine Menge programmieren. Wie aber erzeugst du Teilungen in der Art, wie wir sie bei den Tabellen mit verschmolzenen Zellen kennengelernt haben?

Bei den framesets funktioniert das zwar auch, aber leider etwas anders als bei den Tabellen. Während du in Tabellen Zellen durch Verwenden von colspan und rowspan miteinander verschmolzen hast, musst du jetzt etwas umdenken. Um framesets so zu teilen wie Tabellen mit verschmolzenen Zellen, müssen mehrere (zwei reichen für's erste) framesets ineinander geschachtelt werden. Wir probieren es mal wieder mit der klassischen Seitenaufteilung: Wie das geht zeigt

Beispiel 19

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Verschachteltes Frameset</title>
</head>
<frameset rows="50,*">
<frame src="los_17.htm">
<frameset cols="20%,80%">
<frame src="los_17.htm" scrolling="no">
<frame src="los_17.htm" name="mitte">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Erklärung

Zuerst definierst du ein vertikal geteiltes frameset mit frameset rows="50,*", und gibst die Quelle der Kopfdatei in der frame-Marke an. Soweit läuft alles ähnlich wie im vorigen Beispiel 18, abgesehen davon, dass jetzt das oberste Fenster auf eine Höhe von 50 Pixel beschränkt wird.

Doch dann kommt es anders:
Statt einem zweiten frame notierst du nun ein zweites frameset. Dieses befindet sich ja damit innerhalb des ersten. Darum sprechen wir auch von einem verschachtelten frameset. Dieses zweite, in das erste geschachtelte frameset teilen wir aber mit cols="20%,80%" (wie in Beispiel 16) in einen Navigationsbereich links,und einen Inhaltsbereich rechts.

Und schon ist die verschachtelte Teilung perfekt! - Wie in Beispiel 19

Eingebettete Rahmen - iframe

Der eingebettete Rahmen zeigt Beispiel 12

Eine Alternative zum frameset bietet das Arbeiten mit eingebetteten Rahmen. Ein eingebetterter Rahmen (iframe) ist wie ein Fenster in der Datei, durch das man auf eine andere Datei sehen kann. Eingebettete Rahmen können an beliebiger Stelle in Einzelseiten platziert werden.
Der iframe erhält vom Browser automatisch einen Rahmen und einenscrollbar (wenn der Rahmen zu klein ist), die auch unterdrückt werden können.

Mit diesem Quelltext wird das Beispiel oben erzeugt:

<iframe src="../../beispiel/los_12.htm"
width="350" height="120" frameborder="1" scrolling="auto">Der
eingebettete Rahmen zeigt <a href="../../beispiel/los_12.htm"
target="_blank">Beispiel 12</a></iframe>

Wie bei Bildern kann die Größe des iframe mit width="" und height="" genau festgeleht werden. Das Attribut scrolling="" ist aus der Marke frame bereits bekannt. Mit der Wertzuweisung "auto" überlässt du es dam Browser, ob ein scrollbar gezeigt wird, falls der iframe für seinen Inhalt zu klein bemessen ist. Das Attribut frameborder wird im nächsten Absatz genauer beschrieben.

Weitere Attribute für frameset, frame und iframe

Rahmenbreiten bestimmen und unterdrücken

Rahmenbreiten einzelner Fenster kannst du mit dem Attribut frameborder="" in der frame und iframe-Marke festlegen. Durch frameborder="0" in der iframe-Marke wird der Rahmen vollständig unterdrückt, in der frame-Marke jedoch nur unvollständig.

Sollen Rahmen in framesets vollständig unterdrückt werden, hilft nur die "Brutalo"-Methode mit frameborder="0" framespacing="0" border="0" in der frameset-Marke.

Achtung:
Die Verwendung von frameborder="0" framespacing="0" border="0" in der frameset-Marke ist nach W3-Regeln nicht erlaubt.

Rahmeninnenstärke bestimmen

Rahmeninnenstärken einzelner Fenster kannst du mit dem Attribut framespacing="" in der frame und iframe-Marke festlegen. Gehört nicht zum HTML-Standard!

Innenabstände in einzelnen Rahmen festlegen

Mit marginwidth="" wird ein rechter und linker Innenabstand für einen frame festgelegt. Mit marginheight="" ein oberer und unterer Innenabstand.

Veränderung der Fenstergröße verhindern

Durch Notierung von noresize in der frame-Marke wird die Veränderung der Fenstergröße durch Ziehen mit der Maus verhindert. Davon betroffen sind auch alle angrenzenden Fenster. Wurden alle Rahmen bereits in der frameset-Marke unterdrückt ist die Notierung von noresize in einzelnen frames überflüssig, da die Fenstergröße nur bei vorhandenen Rahmen vom Benutzer verändert werden kann.

Bildlaufleisten (scrollbars) erzwingen und verhindern

Mit scrolling="yes" werden Bildlaufleisten generell erzwungen (auch wenn das Fenster groß genug ist).
Mit scrolling="no" werden Bildlaufleisten ganz unterdrückt (auch wenn das Fenster zu klein ist).
Mit scrolling="auto" überlassen wir alles dem Browser (die Standardeinstellung).

Weiter geht's:

HTML-Schule