XHTML

Frames

Was sind Frames?
Durch die Anwendung von sog. Frames (Rahmen) ist es möglich, innerhalb eines Browserfensters mehrere XHTML-Dokumente gleichzeitig anzuzeigen.

Vorteile von Frames:

Teile einer Website (z. B. die Navigation) bleibt immer sichtbar, da sie nicht neu geladen werden müssen (angenehmere Bedienung für den User).
SO SIEHT'S AUS
Aufwendige, dateischwere Navigationen (z. B. durch den Einsatz vieler Grafiken oder komplexer Scripte) müssen nur einmal geladen werden.
SO SIEHT'S AUS
Durch den Einsatz von Frames können Objekte am rechten oder unteren Browserrahmen angeschnitten werden.
SO SIEHT'S AUS

Nachteile von Frames:

Websites können nur schlecht von Suchmaschinen indiziert werden (es werden die Inhaltsseiten indiziert, beim Öffnen fehlt aber die z. B. Navigationsleiste - dieses Problem kann durch den Einsatz von Javaskript gelöst werden).
Der erste Aufbau einer Website dauert deutlich länger als bei einseitigen Websites, da deutlich mehr Dateien übertragen werden müssen.
Frames lassen sich nur schwer in Kombination mit Datenbanken einsetzen.
Websites auf Basis von Framesets sind nicht barrierefrei (schwer nutzbar für stark sehgeschädigte, die mit Sprachausgabe surfen).

Um mehrere XHTML-Dokumente innerhalb eines Browserfensters anzuzeigen, wird das Browserfenster in Zeilen oder Spalten aufgeteilt, wobei jeder Zeile/Spalte ein bestehendes XHTML-Dokument zugewiesen wird.

Ablauf
1) Die 'vorgeschaltete' Framesetdefinition.htm wird geladen, der Browser teilt sein Fenster in die angegebenen Rahmen auf.

2) Die Inhalts-XHTML-Dokumente werden in die Rahmen geladen (Reihenfolge ist beliebig).

Eine Framesetdefinition enthält nur Informationen zur Aufteilung des Bowserfensters und Verweise zu den dort anzuzeigenden XHTML-Dokumenten, es enthält keine Inhalte.

Grundgerüst zur Frame-Definition

Eine Framesetdefinition enthält keinen <body>.
Vor, nach und innerhalb des <frameset> dürfen keine anderen HTML-Elemente wie <h1>, <p>, <table> usw. verwendet werden.
Befehle des Dokumentkopfs müssen vor <frameset> eingefügt werden.
Zu Beachten ist die korrekte Doctyp-Variante frameset.

Die folgenden Informationen werden in einem Framegerüst angegeben:

Größe und Ausrichtung jedes Frames
Pfad & Dateiname des HTML-Dokuments, das angezeigt werden soll
Titel der Webseite

Framesets können ein Browserfenster in Spalten und/oder Zeilen aufteilen.

Für eine Aufteilung in Zeilen wird dem Befehl <frameset> das Attribut rows="Aufteilung" hinzugefügt.
Für eine Aufteilung in Spalten der Befehl <frameset> durch das Attribut cols="Aufteilung" erweitert.

Als Werte für die Attribute cols oder rows können Prozentwerte, Pixel oder * (gesamter übriger Raum) eingefügt werden, wobei diese durch Kommata voneinander getrennt werden. Die Anzahl der angegebenen Werte definiert die Anzahl der Spalten/Zeilen.

<frameset rows="100,*">
Definition der Frames
</frameset>

<frameset cols="20%,*">
Definition der Frames
</frameset>

<frameset rows="100,*,80">
Definition der Frames
</frameset>

Bei der Aufteilung des Browserfensters ist absolut notwendig, einen Fensterbereich mit dem * als Größenangabe zu definieren, sodass er den Rest des Browserfensters (unabhängig von der Monitorauflösung=Browserfenstergröße) komplett auffüllen kann.

Der Befehl <frame>
<frame> definiert den Inhalt der einzelnen Browserfensterbereiche.

<frameset rows="100,*">
<frame />
<frame />
</frameset>

Er steht alleine, d.h. er hat keinen /Endbefehl. Jeder Fensterbereich erhält einen eigenen <frame />-Befehl (die Anzahl wird definiert durch die Anzahl der Werte im Attribut cols/rows im Befehl <frameset>).

Jeder <frame>-Befehl muss das Attribut src="Dateiname.htm" enthalten (da er ohne dieses Attribut keinen Sinn hätte). Als Wert wird die HTML-Datei eingetragen (ggf. mit dem Pfad dorthin), die der Browser in diesen Rahmenbereich laden soll.

<frameset rows="100,*">
<frame src="menue.html" />
<frame src="inhalt.html" />
</frameset>

Hierbei ist die Reihenfolge der<frame />-Befehle identisch mit der Reihenfolge der Zahlenwerte im Befehl <frameset>, d.h. in dem Beispiel oben wird das HTML-Dokument menue.htm in die erste Zeile mit der Höhe 100 px geladen, das HTML-Dokument inhalt.htm wird in die zweite Zeile geladen, die den Rest des zur Verfügung stehenden Browserfensters einnimmt.

Beispiele für Framesets

Aufteilung in 2 Zeilen

SO SIEHT'S AUS

Aufteilung in 2 Spalten

SO SIEHT'S AUS

Aufteilung in 4 Spalten

<!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>
<title>Ein Frameset-Dokument</title>
</head>

<frameset cols="120,60,*,100">
<frame src="blau.html" />
<frame src="rot.html" />
<frame src="gruen.html" />
<frame src="orange.html" />
</frameset>

</html>

SO SIEHT'S AUS

Attribute des Befehls <frameset>

Wie in den Beispielen oben bereits zu sehen war, wird die Teilung des Browserfensters durch einen verschiebbaren Balken deutlich gemacht. Dieser Balken ist aber im Normalfall unerwünscht (er zerstört das Layout, gibt dem User die Möglichkeit, innerhalb des Layouts die Proportionen zu verändern). Daher ist es wünschenswert, diesen Balken auszuschalten. Dies gelingt durch die Erweiterung des Befehls <frameset> mit drei Attributen:
border="0"
frameborder="NO"
framespacing="0"

Beispiel:

<!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>
<title>Ein Frameset-Dokument</title>
</head>

<frameset rows="80,*" border="0" frameborder="NO" framespacing="0">
<frame src="menue_horizontal.html" />
<frame src="inhalt.html" />
</frameset>

</html>

SO SIEHT'S AUS

Attribute des Befehls <frame>

Unabhängig von dem bereits angesprochenen Attributsrc="Dateiname" kann der Befehl <frame> durch eine Reihe weiterer Attribute ergänzt werden.

norezise="norezise"
Diese Attribut wird ohne Attributswert eingefügt. Bei eingeschaltetem frameborder unterbindet es ein Verschieben des Trennbalkens durch den User.

scrolling="yes|no|auto"
Die Anzeige eines Scrollbalkens kann unterbunden (no) oder erzwungen (yes) werden. auto ist identisch mit der Standardeinstellung jedes Webbrowsers und damit überflüssig. Hier werden Scrollbalken nur bei Bedarf (wenn der Inhalt des Dokuments nicht komplett im Browserfenster angezeigt werden kann) eingeschaltet.

<!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>
<title>Ein Frameset-Dokument</title>
</head>

<frameset cols="250,250,*" framespacing="0" frameborder="NO" border="0">
<frame src="txt_no.html" scrolling="no" />
<frame src="txt_yes.html" scrolling="yes" />
<frame src="txt_auto.html">
</frameset>

</html>

SO SIEHT'S AUS

Verschachtelte Framekonstruktionen

Um ein Browserfenster sowohl in Spalten, als auch in Zeilen zu unterteilen müssen verschachtelte Framesetkonstruktionen verwendet werden. Hierzu wird anstelle eines <frame />-Befehls ein neues <frameset> geöffnet.

Beispiel:

Um die hier gezeigte Aufteilung zu erhalten muss das Browserfenster zuerst in zwei Zeilen (rows) geteilt werden. Die zweite Zeile erhält jedoch anstelle einer Dokumentenzuweisung <frame /> eine eigen <frameset>-Konstruktion, die diese Zeile in zwei Spalten (cols) unterteilt (die dann jeweils Dokumentenzuweisungen erhalten).

<!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>
<title>Ein Frameset-Dokument</title>
</head>

<frameset rows="80,*" framespacing="0" frameborder="NO" border="0">
  <frame src="oben.html" scrolling="no" />
  <frameset cols="160,*" framespacing="0" frameborder="NO" border="0">
    <frame src="menue_vertikal.html" scrolling="no" />
    <frame src="inhalt.html" />
  </frameset>
</frameset>

</html>

SO SIEHT'S AUS

Verweise innerhalb von Frames

Der Einsatz von Frames macht vor allem Sinn, wenn man die Navigation von den Inhaltsseiten trennen möchte. D.h. die Verweise befinden sich in einem eigenen HTML-Dokument, die Inhaltsseiten beinhalten keine Navigation.

Bisher war die Standardaktion bei Klick auf einen Verweis, dass das HTML-Dokument, welches gerade im Browser geöffnet ist (und auf dessen Verweis gerade geklickt wird) entladen und im Browserfenster von dem neu geladenen Dokument ersetzt wird.

Bei Verweisen innerhalb von Frames muss aber der Verweis einen anderen Rahmen ansteuern können, sonst würde die Navigation entladen werden.
SO SIEHT'S AUS

Hierzu müssen in zwei Dokumenten zusätzliche Angaben gemacht werden:
1) Framesetdefinition
Der <frame />, der die Inhalte fassen und indem sich die Dokumente austauschen sollen muss einen Namen erhalten. Durch diesen Namen kann er später angesteuert werden. Hierzu wird der Befehl <frame /> durch das Attribut name="Bezeichnung" erweitert. Die Bezeichnung, also der Wert von name, kann frei gewählt werden, muss aber dem ASCII-Beschränkungen unterliegen.

Beispiel: <frame src="dokument.htm" name="inhalte" />

Die verwendete Bezeichnung (hier: inhalte)sollte notiert werden, sie wird wieder benötigt:

2) Menüdokument
In Verweisen muss nun eine Zusatzinformation hinzugefügt werden, die dem Browser angibt, in welchen Fensterbereich er neue Dokumente laden soll. Diese Information wird in jeden vorhandenen Verweis eingetragen. Hierzu wird der Befehl <a></a> durch das Attribut target="Bezeichnung" erweitert. Der Wert von target ist identisch mit der Bezeichnung, die im Attribut name innerhalb der Framesetdefinition vergeben wurde.

Beispiel: <a href="neuesdokument.html" target="inhalte"> Verweis </a>

Quelltext der Framesetdefinition:

<!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>
<title>Verweise</title>
</head>

<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">
<frame src="menue_vif.html" scrolling="NO" />
<frame src="start.html" name="inhalte" />
</frameset>

</html>

Quelltext der Navigation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<title>Ein Frameset-Dokument</title>
</head>

<frameset rows="80,*" framespacing="0" frameborder="NO" border="0">
  <frame src="oben.html" scrolling="no" />
  <frameset cols="160,*" framespacing="0" frameborder="NO" border="0">
    <frame src="menue_vertikal.html" scrolling="no" />
    <frame src="inhalt.html" />
  </frameset>
</frameset>

</html>

SO SIEHT'S AUS

<noframes>

Der Befehl <noframes></noframes> kann innerhalb der Framesetdefinition nach dem Befehl </frameset> eingefügt werden. Er diente als Zusatzinformation für Browser, die Framesetdefinitionen nicht interpretieren konnten. Innerhalb von <noframes></noframes> ist der Befehl <body></body> erlaubt, innerhalb dessen Standard-HTML-Informationen abgelegt werden konnten (sehr beliebt: "Ihr Browser kann keine Frames darstellen. Um diese Site betrachten zu können laden Sie bitte eine aktuelle Browsersoftware unter ... blabla").
Aktuell dient dieser Bereich zur Hinterlegung von Informationen für Suchmaschinen (d.h. Texte, die möglichst viele relevante Schlüsselwörter enthalten).

Beispiel:

<!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>
<title>Ein Frameset-Dokument</title>
</head>

<frameset rows="80,*">
<frame src="menue_horizontal.html" />
<frame src="inhalt.html" />
</frameset>

<noframes>
<body> Und hier nun ein Text, der möglichst vile Schlüsselbegriffe zu dieser Website enthält.
</body>
</noframes>
</html>

Eingebettete Frames

Durch den von Microsoft eingeführten Befehl <iframe></iframe> ist es möglich, innerhalb eines 'normalen' HTML-Dokuments, das schon Elemente wie Text und Grafiken usw. enthält, einen definierten, rechteckigen Bereich 'aufzureißen' und in dieses 'Loch' ein externes HTML-Dokument zu laden. Diese Technik funktioniert ab IE 4 und NC 6, entspricht aber nicht dem offiziellen HTML-Standard.

Syntax:
Der Befehl <iframe></iframe> kann innerhalb eines HTML-Dokuments wie ein beliebiges Objekt (Grafik, Absatz, etc.) verwendet werden. Wichtig ist die Angabe des anzuzeigenden externen HTML-Dokuments (durch das Attribut src), die Abmessung (width & height) und ob scrolling erlaubt ist oder nicht. Durch Erweiterung um das Attribut name="Bezeichnung" kann es auch von Verweisen innerhalb der Seite angesteuert werden.

Ein iframe fließt auch ggf. mit dem Inhalt mit, kann also 'seine Position verändern', wenn das Browserfenster skaliert wird und dadurch Texte neu umbrechen.

<iframe scrolling="auto" height="100" width="250" src="menue_vertikal.html"></iframe>

Beispiel innerhalb eines Dokuments:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>iframe</title>
</head>
<body bgcolor="#E2E2E2">
<table width="530" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" rowspan="3">
In, suscipit veniam augue praesent, veniam exerci, et eros aliquip laoreet
dignissim tation vero in nulla lobortis. In suscipit praesent nisl vero
lobortis odio in. Und weiterer Text</td>
<td width="30" rowspan="3"> </td>
<td><img src="smile5.gif" width="250" height="201" /></td>
</tr>
<tr>
<td width="250"><b>Unterhalb dieses Textes wird nun ein externes HTML-Dokument durch den Einsatz von <iframe>innerhalb einer Tabellenzelle angezeigt:</b></td>
</tr>
<tr>
<td>

<iframe scrolling="auto" height="100" width="250" src="menue_vertikal.html"></iframe>

</td>
</tr>
</table>
</body>
</html>

SO SIEHT'S AUS

MEHR INFOS