HTML - Frames - So geht'sFrames werden nicht mehr allzu oft verwendet. Doch auch Frames werden
als Layoutmittel immer noch in Betracht gezogen. Frames, so geht's.

Frames sind eine Technik, bei der mehrere HTML Seiten in einem festen Bereich
in eine andere Seite eingebunden werden. Man kann über Frames mehrere Dokumente zu einem Zusammenfassen. Durch Links kann man dann die einzelnen
Bereiche ansprechen, und andere Dokumente in diese Bereiche laden.

Frames erleichtern so die Arbeit eines Webmasters, da z.B. ein Menü nun in einer einzelnen Datei ist. Man muss z.B. bei einer Veränderung dieses Menüs nur noch eine HTML Datei verändern.
Seit dem Netscape Browser 2.0 wurde die Arbeit mit Frames möglich. Durch diese neue Technik wurde Netscape bald zum Marktführer in Sachen Browser. Die Framesetechnik wurde später auch offizieller Standard des W3C.

Um eine Framesseite zu realisieren benötigen Sie erst einmal ein Frameset.
Dieses Frameset ist die Hauptseite. In ihr werden die einzelnen Bereiche, sowie
die Dokumente, die in diesen Bereich geladen werden, definiert. Ein Frameset steht in einer gewöhnlichen HTML-Datei, nur das diese über keinen <body> Bereich verfügt. Statt diesem gibt es die Frameset-Definition.

index.html

<html>
<head>
<title>Das erste Frameset</title>
</head>
<frameset>
<!-- Framedefinitionen -->
</frameset>
</html>

Nun wollen wir unserem Frameset ein wenig Form geben. Die Seite soll zunächst
einmal Vertikal geteilt werden. So ist es z.B. möglich, das auf der Linken Seite das Menü ist, auf der anderen Seite der Inhalt.

index.html

<html>
<head>
<title>Das erste Frameset</title>
</head>
<frameset cols="20%, 80%">
<!-- Framedefinitionen -->
</frameset>
</html>

Diese Frameseite wurde im Verhältnis 20 zu 80 Vertikal geteilt. Das Schlagwort "cols" steht für Spalten, die Definition der Größen erfolgt von Links nach Rechts. Die erste Spalte soll 20% des Fensters einnehmen, die zweite soll die restlichen 80% einnehmen. Sie können die Größenangabe auch in Pixel machen, indem Sie einfach einen Wert eingeben, wie z.B. 150 für 150 Pixel. Die dritte Möglichkeit ist der *, er gibt an, das dieser Bereich den restlichen zu Verfügung stehenden
Platz einnimmt.

Neben der Vertikalen gibt es natürlich auch eine Horizontale Einteilung. Diese wird mit dem Wort rows, für Reihen oder Zeilen erreicht.

Die Framedefinition

Wie Sie hier schon bemerkt haben ist die Definition bei weiten noch nicht komplett. Das folgende Frameset teilt eine Frameseite in drei Abschnitte. Der obere Bereich für ein Logo (oder Werbebanner), der linke Bereich für ein Menü, und der restliche Rechte Bereich für den Inhalt.

index.html

<html>
<head>
<title>Das erste Frameset</title>
</head>
<frameset cols="20%, 80%">
<frame src="navigation.html" name="navigation">
<frameset rows="60, *">
<frame src="werbung.html" name="werbung">
<frame src="inhalt.html" name="inhalt">
</frameset>
</frameset>
</html>

Der erste Befehl <frameset cols="20%, 80%"> teilt die Seite in zwei Abschnitte. Der erste Abschnitt ist für das Menü.
Dieses wird darauf mit <frame src="navigation.html" name="navigation">
definiert. Diese Zeile gibt mit src="" die Quelle, also wo die
einzufügende Datei liegt, an, und das name="" Attribut gibt dem Frame einen Namen, über welchen man dieses ansprechen kann. Dieser Name sollte auf jeden Fall gesetzt werden.
Der zweite Teil definiert nun den Inhaltsbereich (80%). Da dieser nochmals in "Oben" und "Unten" eingeteilt sein soll, muss eine weitere Definition erfolgen. Dazu wird in dem Frameset, nochmals ein Frameset geöffnet, dieses hat eine Unterteilung mit 2 Zeilen.

<frameset rows="60, *">

Die Obere Zeile hat eine Höhe von 60 Pixeln, die untere Zeile nimmt den restlichen Platz ein. Diesen beiden Bereiche werden nun wiederum genauer definiert. Zunächst die Zeile mit 60 Pixeln.

<frame src="werbung.html" name="werbung">

Und darauf endgültig der Inhalt, welcher angezeigt werden soll.

<frame src="inhalt.html" name="inhalt">

Bei dem Aufruf des Framesets, werden die Seiten angezeigt, welche als
src="" definiert sind.

Wie kann man jedoch über das Menü, welches in einem externen Frame eingebunden ist, in den Unterseiten navigieren?

Die Lösung dafür liegt in dem definierten name="" Attribut, über welches ein Frame angesprochen werden kann. Dieser Name muss bei einem Link als target="" angegeben sein, und der Link öffnet sich in dem entsprechenden Frame.
So sähe ein Link aus der Datei navigation.html aus, welcher im Inhalts-Frame
geöffnet werden soll.
<a href="/html/index.htm" target="inhalt">Link ins Inhaltsframe</a>

Wenn Sie nicht immer für jeden Link das target="" Attribut setzten wollen,
können Sie im <head> Bereich der jeweiligen Seite (in unserem Beispiel der navigation.html), den <base> Tag verwenden. Dieser gibt ein default-
Ziel
an, in welchem alle Links geöffnet werden, wenn das target-Attribut
nicht gesetzt ist.

navigation.html

<html>
<head>
<base target="inhalt">
</head>
<body>
<!-- Das Menü -->
</body>
</html>

Wie bekommt man die Scrollbalken weg?

Die Scollbalken machen bei dem Navigationsframe, oder bei dem Werbeframe
kaum Sinn, sind jedoch Standardmäßig da.
Mit dem scolling-Attribut bei der Framedefinition können Sie diese
explizit erlauben, oder verbieten.

<frame src="navigation.html" name="navigation" scolling="no">
Die Scrollleiste wird nicht angezeigt.

<frame src="navigation.html" name="navigation" scolling="auto">
Die Scollleiste wird angezeigt, wenn Sie benötigt wird.

<frame src="navigation.html" name="navigation" scolling="yes">
Die Scollleiste ist immer da (der Standardwert).

Ein Browser untersützt keine Frames?

Es gibt immer noch einige Browser die keine Frames unterstützen.
Diese Besucher bekommen dann eigentlich nichts zu sehen.
In dem Frameset können Sie jedoch einen noframes-Bereich definieren,
welcher angezeigt wird, wenn der Browser keine Frames unterstützt.

<html>
<head>
<title>Das erste Frameset</title>
</head>
<frameset cols="20%, 80%">
<!-- Framedefinitionen -->
</frameset>
<body>
<noframes>
Ihr Browser unterstützt leider keine Frames!
</noframes
</html>


In diesem Bereich sollte jedoch ein Link zu der Seite sein, welche über das Menü aufgerufen wurde. Am besten ist ein Inhaltsverzeichnis, über welches auch ohne Framesünterstützung alle Unterseiten aufgerufen werden können.

Im Frameset Tag können weitere Attribute gesetzt werden.

<frameset cols="20%, 80%" frameborder="0" framespacing="0" border="0">
<!-- Framedefinitionen -->
</frameset>

Das Attribut frameborder="" gibt die Stärke eines Rahmens an, framespacing=""
gibt den Abstand der einzelnen Bereiche an, und das border="" gibt nochmals
die Stärke des Rahmens an.
Es sollte immer frameborder="" und border="" gesetzt werden, da Netscape
und der IE die Rahmendefinition anders interpretieren, im Endeffekt wird
trotzdem dasselbe ausgegeben.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: