CSS, HTML und Javascript mit {stil}

HTML frame / frameset

HTML Frames sind eine überholte Technik aus der Zeit vor den Content Management Systemen und Server Side Includes Zeigt den Aufbau einer Seite aus Frames für die Sidebar, den Header, Footer und den eigentlichen Inhalt.

Frames sind eine veraltete Technik des Webdesigns. Sie beeinträchtigen den freien Zugang zur Webseite sowohl für Benutzer mit Handicaps als auch mit mobilen Geräten. Seit 2000 gelten HTML Frames als überflüssig und sind nicht mehr Teil des HTML-Standards.

frame und frameset teilen des Browserfensters in variable Bereiche für Inhalte und feste Bereiche für Navigation und Header / Footer. Das frameset-Tag bestimmt Anzahl und Größe der Frames und die Ausrichtung in Zeilen oder Spalten.

Frames waren beliebt, weil feste Bereiche wie Navigation, Header und Footer als selbstständige Datei in jede Webseite eingebunden werden konnten. Eine Änderung in einer Datei des Framesets reichte, um eine Änderung der Navigation oder des Footers in alle Seiten einzuspielen. Heute stehen dafür solide Techniken wie PHP und Content Management Systeme, Server Side Includes oder iframes zur Verfügung.

Ein frameset organisiert mehrere Frames – entweder horizontal mit dem Attribut rows oder vertikal mit dem Attribut cols. Jedes Fenster wird durch ein frame-Element erzeugt, jedes Frame-Element ist eine Datei.

Frames müssen entweder in Zeilen oder in Spalten organisiert sein – ein Mix ist nicht möglich. Aber da Framesets ineinander verschachtelt werden dürfen, können komplexe Seitenstrukturen erzeugt werden.

Beispiel für den Aufbau einer Seite mit HTML-Frames

HTML-Frames werden heute nicht mehr eingesetzt, denn sie bringen schwerwiegende Nachteile mit sich: Sie sind nicht responsive, nicht für die kleinen Monitore von Mobilgeräten geeignet und bilden ein Hindernis für die Suchmaschinen. Wer als Webdesigner heute Webseiten in HTML-Frames begegnet, wird die Inhalte schleunigst aus den verschachtelten Framesets befreien.

frameset HTML-Markup

Das frameset-Tag ersetzt das body-Tag. Wenn das frameset-Tag benutzt wird, darf das body-Tag definitiv nicht verwendet werden (das iframe-Tag hingegen darf innerhalb eines body-Tags eingesetzt werden).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
…
<head> … </head>
<frameset cols="*,380,*">
   <frame src="links.html" name="links" />
   <frameset rows="*,160,*">
      <frame src="oben.html" name="oben" />
      <frame src="mitte.html" name="mitte" />
      <frame src="unten.html" name="unten" />
   </frameset>
   <frame src="rechts.html" name="rechts" />
</frameset>

<noframes>
<body> <p>Kurzbeschreibung der Seite</p> </body>
</noframes>

</html>

Innerhalb eines frameset-Tags sind nur frame-Tags und weitere frameset-Tags erlaubt.

Attribute für frameset

cols
Anzahl der Spalten innerhalb eines Framesets. Die Angabe ist indirekt, da die aktuelle Anzahl der Spalten nicht angegeben wird. Stattdessen wird eine durch Kommas getrennte Liste von Werten angegeben, in der jeder Wert die Breite einer Spalte repräsentiert. Stehen drei Werte in der Liste, hat der Frameset also drei Spalten. Die drei Werte können angegeben werden als
  • ein Prozentsatz der Breite des Frames,
  • eine ganzzahlige Anzahl von Pixeln,
  • die Angabe eines Prozentsatzes oder einer Anzahl von Pixeln plus einem Stern *.
Der Stern weist einer Spalte den Platz zu, der bleibt, wenn die übrigen Rahmen den zugewiesenen Platz eingenommen haben. Die Angabe 3* weist dabei gegenüber der Angabe * die dreifache Größe auf. Beispiele für mögliche Angaben:
  • zwei Spalten: <frameset cols="40%, 60%" >
  • drei Spalten: <frameset cols="20%, 50%, 30%" >
  • drei Spalten: <frameset cols="50, 75, 150" >
  • zwei Spalten: Die erste mit 150 Pixel Breite, die zweite Spalte mit dem verbleibenden Platz im Frameset: <frameset cols="150, * ">
  • vier Spalten: Die zweite Spalte umfasst 50% der Breite des Framesets, die anderen drei Spalten teilen den verbleibenden Raum zu gleichen Anteilen.: <frameset cols="*, 50%, *, * ">
rows
Anzahl der Zeilen innerhalb eines Framesets. Die Angabe ist indirekt, da die aktuelle Anzahl der Zeilen nicht angegeben wird. Stattdessen wird eine durch Kommas getrennte Liste von Werten angegeben, in der jeder Wert die Höhe einer Zeile repräsentiert. Stehen drei Werte in der Liste, hat der Frameset also drei Zeilen. Wenn das Attribut rows benutzt wird, kann das cols-Attribut nicht verwendet werden. Die drei Werte können angegeben werden als
  • ein Prozentsatz der Höhe des Framesets,
  • eine ganzzahlige Anzahl von Pixeln,
  • die Angabe eines Prozentsatzes oder einer Anzahl von Pixeln plus einem Stern *.
Der Stern weist einer Zeile den Platz zu, der bleibt, wenn die übrigen Rahmen den zugewiesenen Platz eingenommen haben. Die Angabe 3* weist dabei gegenüber der Angabe * die dreifache Größe auf. Beispiele für mögliche Angaben:
  • zwei Zeilen: <frameset rows="40%, 60%" >
  • drei Zeilen: <frameset rows="20%, 50%, 30%" >
  • zwei Zeilen: Die erste mit 150 Pixel Höhe, die zweite Zeile mit dem verbleibenden Platz im Frameset: <frameset rows="150, * ">
  • vier Zeilen: Die zweite Zeile umfasst 50% der Höhe des Framesets, die anderen drei Zeilen teilen den verbleibenden Raum zu gleichen Anteilen: <frameset rows="*, 50%, *, * ">

Nachteile und Mankos

Heute stehen moderne Methoden (PHP, Ajax, Server Side Includes, CSS-Positionierung) zuverlässig zur Verfügung und Frames werden im modernen Webdesign nicht mehr eingesetzt, denn sie bringen gravierende Nachteile mit:

  • Es gibt keine Lösung für die Monitore von Handys oder Tabletts: frames sind nicht responsive.
  • Die Navigation mit der Tastatur innerhalb des Browserfensters ist kompliziert: Zuerst von Frame zu Frame, dann innerhalb des Frames …
  • Das Drucken einer Webseite mit Frames stellt den Besucher ebenfalls vor die Frage »Welcher Frame denn nun«?
  • Frame-Seiten lassen sich kaum durch Bookmarks speichern.
  • Seiten mit Frames lassen sich auch kaum durch einen Link anbinden. Der Link auf eine Seite, die aus Frames aufgebaut ist, wird nur die Startseite erreichen, aber nicht den tatsächlich referenzierten Inhalt.
  • Suchmaschinen können die Inhalte nicht indexieren, denn sie erreichen nur die frameset-Seite, die aber keine Inhalte aufweist. U.u. indexiert die Suchmaschine nur den Inhalt des noframe-Elements.
  • Wenn die Suchmaschine Inhalt aus einer Frame-Seite indexiert, bekommt der Besucher die Adresse des Frames, nicht die übergeordnete Frameset-Seite. Damit sich die Frameseite korrekt in die Organisation des Framessets einbinden kann, muss fast immer Javascript herhalten.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	

frame Attribute

frameborder
legt einen Rahmen um den Frame oder entfernt ihn. Die möglichen Werte sind 0 oder no und 1 oder yes. Der Wert von yes oder 1 erlaubt die Darstellung eines Rahmens. Ein Wert von no oder 0 unterdrückt die Ausgabe eines Rahmens.
longdesc
ist die URL-Adresse eines HTML-Dokuments, das eine ausführlichen Beschreibung des Frames enthält. Das Attribut ist dafür gedacht, mehr Informationen zur Verfügung zu stellen, als das title-Element darstellen kann.
marginheight
setzt einen Abstand nach unten und nach oben zwischen Framerahmen und Inhalt und wird in Pixel angegeben. Bei unrealistischen Werten ignoriert der Browser das Attribut.
marginwidth
setzt einen Abstand nach links und nach rechts zwischen Framerahmen und Inhalt und wird in Pixel angegeben. Wenn unrealistische Werte angegeben werden, ignoriert der Browser das Attribut.
name
eine Zeichenfolge, die den Frame identifiziert. Der Name muss eindeutig sein und darf nur einmal im Dokument vorkommen.
noresize
verhindert Änderungen der Framegröße durch den Benutzer.
scrolling
legt eine horizontale und vertikale Scrollleiste fest, die im Frame erscheint. Wenn der Inhalt größer ist als der Frame, erlaubt sie dem Besucher, aufwärts und abwärts oder nach rechts und links zu scrollen, um den gesamten Inhalt zu sehen. Die drei möglichen Werte sind: yes, womit festgelegt wird, dass stets eine Scrollleiste erscheint, no, womit nie eine Scrollleiste erscheint, und auto, das die Scrollleiste einspielt, wenn sie erforderlich ist. Wenn kein Wert angegeben wird, ist die Voreinstellung auto.
src
gibt die URL-Adresse einer HTML-, ASP-, PHP- oder anderen Seite an. Der Inhalt der referenzierten URL wird im Frame dargestellt.

HTML noframes

HTML noframes stellt alternativen Inhalt für Browser zur Verfügung, die Frames nicht erkennen oder darstellen können – z.B. eine Zusammenfassung der Inhalte und Links zu den jeweiligen Dokumenten.

Wenn der Browser Frames darstellen kann, wird der Inhalt des noframes-Elements nicht angezeigt. Aber der Inhalt des noframes-Tags kann eine Zusammenfassung des Inhalts für die Suchmaschinen abgeben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head> … </head>
<frameset cols="*,380,*">
   …
</frameset>

<noframes>
   <body>
      <p>Kurzbeschreibung der Seite</p>
   </body>
</noframes>
</html>

Das <noframes>-Tag muss direkt hinter dem ersten frameset-Tag folgen.

mitte.html oben.html unten.html links.html rechts.html