Frames in HTML

Wird das Browserfenster in mehrere, voneinander potentiell unabhängige Bereiche unterteilt, so spricht man von Frames.

Jeder Bereich kann Beliebiges darstellen. Die einzelnen Bereiche können zusammenarbeiten in der Form, dass eine Referenz auf einen anderen Frame wirkt.

Frame
Frameset
Verschachtelung von Framesets
noframes
Verlinken der Frames
Spezielle Targets
Anlinken von externen Sites
Optionale Attribute der Framedefinition
Optionale Attribute der Framesetdefinition
- Rahmen
- Rahmenfarbe

Frame

Ein Frame ist ein rechteckiger Bereich, in dem eine Datei dargestellt wird. Seine Syntax ist

<frame name="Bezeichner" src="URL" />

Der dem src-Attribut von frame zugewiesene URL bezeichnet den (anfänglichen) Inhalt des Frames. Die Benennung dient dazu, den Frame durch andere ansprechbar zu machen. Dies wird für die Verlinkung der Frames benötigt, zu der wir noch kommen werden.

Frameset

Die Definition einer Frame-Site erfolgt mit Hilfe von einem oder mehreren Framesets, die mit frameset beschrieben werden. Ein Frameset ist ein Menge von Frames. Die allgemeine Syntax ist

<frameset ausrichtung="groesse1,groesse2,...groesseN">
  definition-inhalt-1
  definition-inhalt-2
  ...
  definition-inhalt-N
</frameset>

Man unterscheidet zwei Arten von Framesets an ihrer Ausrichtung. rows-Sets zerlegen den Raum (z.B. das Browserfenster) in Zeilen und cols-Sets zerlegen den Raum in Spalten.

Die Angaben zur Größe (je nach Ausrichtung also Höhe oder Breite) können absolut in Pixel oder prozentual erfolgen. Dabei beziehen sich die Prozentangaben immer auf den Gesamtplatz, der diesem Frameset zur Verfügung steht.

Das Ganze ist also sehr vergleichbar mit der Angabe von Ausdehnungen bei Tabellen (siehe Tabellentutorial).

Darüber hinaus gibt es noch die besondere Größerenangabe "*", die bedeutet, dass der zugehörige Frame den restlichen zur Verfügung stehenden Platz belegen soll.

Sie können an der Syntax erkennen, dass aus der Anzahl der Größenangaben automatisch auf die Anzahl der Frames geschlossen wird, die dieses Set beinhaltet (hier absichtlich Inhalt genannt).

Dies macht Erweiterungen oder allgemeiner Änderungen sehr einfach möglich.

Beispiel:

<html>
<head><title>Ein Frameset Beispiel</title>

<frameset rows="50,*">
  <frame name="a" src="a.html" />
  <frame name="b" src="b.html" />
</frameset>

<noframes>
  <body>
    Ihr Browser unterst&uuml;tzt keine Frames.
  </body>
</noframes>
</html>

Dieses Beispiel definitiert ein Set, welches zwei Zeilen a und b erzeugt. a ist unabhängig von der Fenstergröße 50 Pixel hoch, b nimmt den restlichen Platz ein.

Beispiel:

<html>
<head><title>Ein Frameset Beispiel</title>

<frameset rows="20%,20,*,10">
  <frame name="a" src="a.html" />
  <frame name="b" src="b.html" />
  <frame name="c" src="c.html" />
  <frame name="d" src="d.html" />
</frameset>

<noframes>
  <body>
    Ihr Browser unterst&uuml;tzt keine Frames.
  </body>
</noframes>
</html>

Dieses Beispiel definiert ein Set mit vier Zeilen a bis d, a soll 20% der Gesamthöhe bekommen, b 20 Pixel, d 10 Pixel und c soll den Rest einnehmen. Es ist nicht erforderlich, dass der letzte Inhalt auch die restliche Höhe nimmt.

Ersetzt man in den Beispielen rows durch cols, so erhält man Spalten.

Verschachtelung von Framesets

Es ist natürlich eintönig bis unbrauchbar reine Unteilungen in Zeilen oder Spalten vorzunehmen. Für eine Site benötigt man i.a. die Kombination von beidem.

Aus diesem Grunde stand in der obigen Syntax definition-inhalt-1,... und nicht frame.

Gibt man in eine Frameset-Definition N Größen an, so muss man N Inhalte angeben. Dies können atomare Frames oder erneut Framesets sein. Wie bei allem in HTML, muss natürlich auch hier die {/artikel/html/tags-attribute-plattformunabhaengigkeit|Blockeigenschaft} beachtet werden, d.h. innere Framesets müssen vor dem äußeren beendet werden.

Beispiel:

<html>
<head><title>Ein Frameset Beispiel</title>
</head>

<frameset rows="50,*">

  <frame name="head" src="head.html" />
  <frameset cols="30%,*">
    <frame name="navigation" src="navigation.html" />
    <frame name="text" src="welcome.html" />
  </frameset>
</frameset>

<noframes>
  <body>
    Ihr Browser unterst&uuml;tzt keine Frames.
  </body>
</noframes>
</html>

Analysieren wir das Set. Das erste Set, auf das wir treffen ist ein rows-Set. Da es das erste und damit äußere Set ist, es hat das gesamte Browserfenster als Raum zur Verfügung. Da es ein rows-Set ist, teilt es diesen Raum in Zeilen.

Es hat zwei Größenangaben, d.h. es teilt den Raum genauer in zwei Zeilen. Dem oberen Set wird eine absolute Höhe von 50 Pixeln zugewiesen, das andere soll den Rest (="*") einnehmen.

Kommen wir nun zu den Inhalten. Der erste Inhalt ist ein frame-Tag, mit name-Attribut head, dem der anfängliche Inhalt head.html zugewiesen wird. Wollte man seine Höhe verändern, müßte man einfach nur die 50 ändern, z.B. in 100 oder in 25.

Der zweite Inhalt und die somit untere Zeile ist selbst ein Frameset (frameset). Dieses hat natürlich nur nicht mehr das gesamte Browsersfenster als Raum zur Verfügung. Zwar die volle Breite, aber nur noch eine um 50 Pixel verringerte Fensterhöhe, denn diese 50 Pixel sind ja schon von head belegt.

Wir erkennen sofort, dass dieses innere Frameset, wegen der Ausrichtung cols Spalten und aufgrund der beiden Größenangaben genauer zwei Spalten erzeugen wird. Die linke Spalte wird 30% der verfügbaren Gesamtbreite nehmen, die rechte den Rest.

Die Inhalte dieses Framesets sind einfach, da es beides Frames sind, navigation und text, die die in den src-Attributen uebergebenen Dokumente laden sollen.

Dieses Frameset würde in einem 600x400 Fenster also so aussehen.

Das Frameset bei 300x200.

Das Ganze ist analog zu Tabellen eine Sache der Übung, mir der man auch eine gewisse Vorstellungskraft dafür entwickelt.

Beispiel:

In diesem Beispiel gehen wird anders herum vor. Ausgehend von einem Ziel, konstruieren wir uns unser Frameset.

Sagen wir, wir möchten, die Navigationsspalte durchgehend haben, den head marginal höher. Das Copyright soll zudem eine dauerhaft sichtbar sein. Das Ganze für Werbebanner geeignet. Also in etwa so:

Das Frameset bei 300x200.

Da die Navigationsspalte durchgehend sein soll, benötigen wie also eine Spalten-Set über die volle Fensterhöhe. Daraus folgt, dass dieses Set das äußere sein muss. Geben wir der Navigationsspalte einfach ein feste Breite von 130, was meiner Meinung nach i.a. reichen wird. Der restliche Platz geht an die andere Spalte. Wir sind also so weit:

<frameset cols="130,*">
  <frame name="navigation" src="navigation.html" />
  ---inneres set---
</frameset>

Die andere Spalte ist natürlich ein inneres Zeilen-Frameset, mit head-, inhalt- und copyright-Frames. Den head und copyright geben wir absolute Größen in Pixeln. Dem Inhalt spendieren wir den Rest. Das innere Set sieht also so aus:

<frameset rows="60,*,20">
  <frame name="head" src="head.html" />
  <frame name="inhalt" src="inhalt.html" />
  <frame name="copy" src="copy.html" />
</frameset>

Einfügen des inneren Sets in das äußere liefert schließlich unser gesuchtes Frameset:

<html>
<head><title>Ein Frameset Beispiel</title>

<frameset cols="130,*">
  <frame name="navigation" src="navigation.html" />
  <frameset rows="60,*,20">
    <frame name="head" src="head.html" />
    <frame name="inhalt" src="inhalt.html" />
    <frame name="copy" src="copy.html" />
  </frameset>
</frameset>

<noframes>
<body>
Ihr Browser unterst&uuml;tzt keine Frames.
</body>
</noframes>
</html>

Es gibt zu Frames mehr zu sagen. Das Wichtigste ist noframes, welches sowohl Benutzern ohne Frame-Browser, als auch Suchmaschinen, den Zugang zu Ihrer Site ermöglicht. Eine Site, die nicht gefunden werden kann, braucht gar nicht er hochgeladen zu werden.

Danach betrachten wir analog zu den Tabellen Möglichkeiten, wie Sie das Erscheinungsbild Ihrer Site optimieren können.

noframes

Nicht alle Browser unterstützen Frames, die meisten Suchmaschinen verstehen keine Frames und zumindest der Browser Opera lässt den Benutzer die Frameunterstützung ein und ausschalten. Zudem benötigen Blinde (oder andersweitig Behinderte) Hilfsmittel wie ScreenReader, um das Web zu nutzen.

Denken Sie bitte daran, wenn Sie framebasierte Sites bauen und bringen Sie eine alternative Darstellung für diejenigen, die Frames deaktiviert haben.

Der Teil, der in Nicht-Frame-Browsern dargestellt werden soll, wird durch noframes gekapselt.

<noframes>
  <body>
    Ihr Browser unterst&uuml;tzt keine Frames.
  </body>
</noframes>

Dieses Beispiel ist natürlich ebenso unschön (dass sein Browser keine Frames kann, weiß er Benutzer auch so schon), wie das berühmte "Die Site benötigt Frames".

Gewisse Features, wie Frames oder JavaScript zu erzwingen (hier frei übersetzt für "Beschaffen Sie sich einen Framebrowser, dann dürfen Sie hier hinein" oder "leider bin ich unfähig, eine vernünftige Site zu bauen") wird sich selten auszahlen.

Es ist in Ordnung gewisse Funktionalitäten zu verwenden, eine Site sollte aber auch ohne diese noch "benutzbar" sein. Ansonsten ist die Site technisch einfach noch nicht das Wahre. Ob jemand mit oder ohne JavaScript, muss man jedem selbst überlassen. Gleiches gilt für Frames. Manche können sie nicht nutzen.

Einfach machen Sie es sich, wenn Sie weitestgehend auf Frames verzichten. Der Autor ist selbst kein Freund von Frames, hat sie in den letzten Jahren nur sehr selten benutzt.

Verlinken der Frames

Enthält beispielsweise navigation.html die Referenz

<a href="a.html" target="text">beliebig</a>

so wird bei Anwahl a.html im Frame text dargestellt.

Wir stellen hier eine Erweiterung des a-Tags um das target-Attribut fest. Dieses trägt den Namen des Frames, in dem das Dokument/Bild/Objekt erscheinen soll. Ganz analog existiert ein target-Attribut für den form-Tag, um das Ergebnis in einen bestimmten Frame (hier: ausgabe) zu leiten.

<form action="//example.org/cgi-bin/prg.pl"
      target="ausgabe" method="post">
...
</form>

Einzelheiten zu Formularen finden Sie im Formular-Tutorial.

Spezielle Targets

Es gibt folgende Werte von target mit besonderer Bedeutung:

_parent

_parent adressiert den Vater des Frames, also sein Frameset.

<a href="a.php" target="_parent">beliebig</a>

führt dazu, dass das Frameset, welches den Frame enthält, geschlossen wird und statt seiner a.php dargestellt wird.

_top

_top adressiert die oberste Ebene

<a href="a.html" target="_top">beliebig</a>

führt dazu, dass alle Framesets geschlossen werden. Das Dokument a.html erscheint allein im Browser.

_blank oder _new

_blank und _new erzeugen ein neues Browserfenster:

<a href="a.php" target="_blank">beliebig</a>

führt dazu, dass das Dokument a.php in einem neuen Browser erscheint.

Anlinken von externen Sites

_top und _blank sind die einzigen akzeptablen Wege, fremde Sites aus einer Framesite heraus anzulinken. Es gehört sich einfach nicht und ist allgemein unerwünscht, fremde Sites in das eigene Frameset zu laden.

Es ist ein Weg der Verwertung fremden Eigentums für den man erstmal eine Lizenz bzw. Erlaubnis benötigt.

Kommen wir nun noch zu den Möglichkeiten, das Erscheinungbild zu verbessern.

Optionale Attribute der Framedefinition

Wir hatten die Syntax einer Framedefinition kennengelernt als

<frame name="Bezeichner" src="URL" />

Optional kann man nun noch weitere Attribute bei frame angeben.

Scrollbars

Mit dem scrolling-Attribut wird das Verhalten der ScrollBars gesteuert. Es kann die Werte yes, no und auto annehmen, wobei auto die Voreinstellung ist.

auto führt also dazu, dass ScrollBars genau dann angezeigt werden, wenn Sie notwendig sind,
yes blendet Sie kontinuierlich ein und
no unterdrückt ihre Darstellung.

In den allermeisten Fällen ist auto schon optimal.

Ich rate dringend davon ab, ScrollBars generell abzuschalten. Jemand mit geringerer Bildschirmauflösung oder Elementen auf dem Desktop (ShortCut-Leisten u.ä.), ist möglicherweise nicht in der Lage den Browser groß genug zu ziehen, um etwas ohne Scrolling zu sehen.

<frame name="Bezeichner" src="URL" scrolling="auto" />

Abstand vom Rand

Dokumente haben im Browser einen Abstand zum oberen und unteren bzw. zum linken und rechten Rand. Sich gegenüberliegend Ränder sind gleich breit.

Bei Frames ist das ebenso.

Hier gibt es einen Rand zur oberen und unteren bzw. zu linken und rechten Framekante. Die Breite des linken und rechten wird mit marginwidth, die Höhe des oberen und unteren mit marginheight eingestellt.

Dieser Wert entspricht von seinem Sinn und von seinen Auswirkungen her, in etwa cellpadding bei Tabellen.

<frame name="Bezeichner" src="URL" marginwidth="2" marginheight="2" />

Größenänderung

Per Voreinstellung kann man die Größe eines Frames mit der Maus verändern. Das noresize-Flag verhindert dies. Es ist sofort klar, dass man, wenn man einen Frame nicht mehr verändern kann, man auch die umliegenden nicht mehr verändern kann. Denn, wenn man einen Frame z.B. schmaler macht, macht man seien Nachbarn breiter und umgekehrt.

I.a. rate ich von der Verwendung ab. Es gibt zwar sicher Momente, wo man dies benötigt, aber denken Sie bitte daran, dass Besucher das Set und die Inhalte möglicherweise anders sehen, als Sie und insbesondere nicht den Frameinhalt komplett dargestellt bekommen.

<frame name="Bezeichner" src="URL" noresize="noresize" />

Das wohl Schlimmste in dem Zusammenhang, was Sie machen können, ist die Kombination von noresize="noresize" und scrolling="no" zu

<frame name="Bezeichner" src="URL" noresize="noresize" scrolling="no" />

Das ist sozusagen "böse". Jemand, der den Browser nicht groß genug machen kann (und auch mit 1024x768er Schirmen passiert das, weil man schließlich nicht nur den Browser sehen muss), kann eine solche Site nicht benutzen.

Er sieht die Inhalte nicht vernünftig und kann sie weder hineinscrollen, noch die Dimensionen des Framesets korrigieren, um den Fehler zu beheben.

Optionale Attribute der Framesetdefinition

Auch der frameset-Tag verfügt über optionale Attribute.

Rahmen

Zwischen den Frames liegen Rahmen. (Man kann auch sagen, die Frames sind umrandet, aber sie liegen zwischen den Frames, wie ein Gitternetz).

Die Dicke der Rahmen kann mit frameborder eingestellt werden. Wir erkennen hier eine Analogie zum Attribut border bei Tabellen.

<frameset ... frameborder="2">

Das ist dann standardgerecht. Damit dies auf möglichst allen Browsern funktioniert, sollten Sie noch border und framespacing hinzufügen.

<frameset ... frameborder="2" border="2" framespacing="2">

Rahmenfarbe

Die Rahmenfarbe ist kein Standard, wird jedoch von beiden besonders verbreiteten Browsern unterstützt und ist ein rein visuelles Feature. Es sei daher rasch erwähnt. Es kann natürlich gut sein, dass der ein oder andere Browser das Attribut ignoriert. Bei der Rahmenfarbe wird das wohl nicht wichtig sein.

<frameset ... bordercolor="#XXXXXX">

Die Farbkodierung ist die übliche, die wir im Anhang Farben des HTML-Kurses kennengelernt hatten. Sie können somit sowohl RGB-Werte als auch Farbnamen nutzen.