WEBFEATURES: HTML

Html für Einsteiger

Seitengestaltung mit Frames

Eine Webseite kann, aber muß nicht unbedingt aus einer einzigen HTML-Datei bestehen. Mit Hilfe eines Framesets können auch mehrere Dateien am Aufbau einer Webseite beteiligt sein. Einzelne Seitenelemente, die immer wieder kehren wie z. B. die Navigation und das Logo, können in andere Dateien ausgelagert werden. Bei Änderungen an der Navigation ist dann nur eine einzige Seite zu ändern. Bei Tabellenseiten muß jede Seite einzeln angepasst werden. Frames ermöglichen außerdem bestimmte gestalterische Feinheiten, die sonst nur schwer oder gar nicht realisierbar sind. Seiteninhalte lassen sich z. B. in Frames bis an den Rand positionieren und zwar nicht nur an den linken und oberen Rand, sondern auch an den rechten und unteren. Das kann manchmal aus Design-Gründen erforderlich sein (vor allem dann, wenn der verantwortliche Grafiker selbst noch nie HTML-Seiten gebaut hat...;-) ).

Dateien, die Bestandteile eines Framesets sind, nennt man Frames. Frames sind hierarchisch aufgebaut. Der oberste Frame - sozusagen der "Urframe" - wird in Zeilen und Spalten aufgeteilt. Innerhalb dieser kann eine weitere Aufteilung in Zeilen und Spalten erfolgen. Framesets können auch verschachtelt werden. Ein Frameset kann also neben "normalen" Frames weitere Framesets enthalten.

Beispiele für häufig angewandte Framesets:

Linker Frame: Navigation / Logo
Rechter Frame: Inhalte

Oberer Frame: Navigation / Logo
Unterer Frame: Inhalte

Linker Frame:		Oberer Frame: Logo Unterer Frame: Navigation
Rechter Frame:		Inhalt (content)

Bei den bis jetzt gezeigten Beispielen ist die Navigation im Frameset noch ganz einfach, denn es kann nur ein Frame bei Klick auf den Link ausgetauscht werden.

Ein mehrfach verschachteltes (und damit kompliziertes) Frameset könnte z. B. so aussehen:

So wird es Schritt für Schritt aufgebaut:

1. Schritt:		2. Schritt:

Das erste Frameset besteht aus 2 Zeilen.		Das zweite Frameset wird im unteren Frame des ersten angelegt und enthält 2 Spalten.
3. Schritt:

Das dritte Frameset wird im rechten Frame des zweiten Framesets angelegt und enthält wiederum 2 Spalten.

Bei mehrfach verschachtelten Framesets wird es mit der Navigation schon schwieriger, denn hier muss mit ziemlicher Sicherheit mehr als ein Frame auf einmal ausgetauscht werden. Das kann nur mittels JavaScript realisiert werden. Solch raffiniert aufgebauten Framesets sind daher nur für Menschen mit Vorkenntnissen in JavaScript zu empfehlen. Stefan Münz erklärt dies sehr gut in Selfhtml.

Wie sehen Framesets nun im Quelltext aus?

Ein Frameset wird vom <frameset></frameset> - Tag umschlossen. Die einzelnen Frames werden mit dem <frame> - Tag aufgerufen. Welche Spalten das Frameset hat, wird im <frameset> - Tag über das Attribut cols definiert, die Zeilen legt man mit dem Attribut rows fest. Cols und rows können absolut in Pixeln, relativ in % oder relativ mit Stern angegeben werden. Der Stern bedeutet, daß für das betreffende Frame der restliche Platz vorgesehen ist, nachdem alle anderen die ihnen zugewiesene Größe angenommen haben.

Das Frameset wird nach </head> anstelle eines <body> - Tags eingefügt.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Frameset</title>
</head>

<frameset cols="180,*">
<frame name="navigation">
<frame name="inhalt" src="start.html">
</frameset>

</html>

Dringend zu empfehlen ist die Verwendung des <noframes>-Tag. Das ist für Browser gedacht, die keine Frames "verstehen". Heutzutage gibt es zwar kaum noch Browser, die das nicht können, aber Suchmaschinen-Robots können häufig nicht mit Frames umgehen. Damit auch der robot alle Seiten findet, ist es sinnvoll, innerhalb des <noframes> - Tag eine Linkliste einzufügen, mit der alle Seiten der Site gefunden werden können. Es ist auch sehr empfehlenswert, dort vor den Links eine kurze Seitenbeschreibung einzufügen, den viele Suchmaschinen verwenden die ersten Sätze einer Website als Seitenkommentar. Es ist sehr unschön, in den Suchmaschinen Seiten zu finden, deren Seitenbeschreibung lautet: Diese Seite verwendet Frames.... :-|

Wenn <noframes> eingesetzt werden, muß innerhalb des <noframes></noframes> - Tag das <body> - Tag stehen, damit die Inhalte ordnungsgemäß angezeigt werden.

Ein Beispiel für eine einfaches Frameset mit noframes-Bereich:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Frameset</title>
</head>

</body>
</noframes>
</html>

Beispielseite anschauen

Das <frame> - Tag hat einige Eigenschaften, die für die Seitengestaltung mit Frames wichtig sind:

frameborder	Framerand, kann die Werte "NO" oder "YES" annehmen
border	Randstärke in Pixeln, wird meist auf 0 gesetzt
framespacing	Abstände zwischen den Frames, Angabe in Pixeln
scrolling	Angaben fürs Scrollen von Frames, Wert kann auf NO, YES oder AUTO gesetzt werden
noresize	Wenn noresize eingefügt ist, kann die Größe des Frames vom User nicht verändert werden
src	Sehr wichtig! Hier wird der Pfad der im Frame zu ladenden Datei angegeben
name	Name des Frames: wichtig für die Links, da bei Framesets immer ein Zielframe angegeben werden muß (s. u.)
marginwidth	Gibt in Pixeln den Abstand des Frames zum linken und rechten Fensterrand an
marginheight	Angabe des Abstandes zum oberen und unteren Fensterrand in Pixeln

So sieht es dann im Quelltext aus:

<frameset rows="*" cols="180,*" frameborder="NO" border="0" framespacing="0">
<frame name="navigation" scrolling="NO" noresize src="navi.html" marginwidth="0" marginheight="0">
<frame name="inhalt" src="inhalt.html">
</frameset>

Frames weisen bezüglich Links eine Besonderheit auf. Da am Bildaufbau verschiedene Dateien beteiligt sind, ist es in einem Frameset notwendig, beim Link anzugeben, in welchem Frame die Datei aufgerufen werden soll. Dies geschieht über das Attribut target. Als Wert wird der Name des betreffenden Frame angegeben. Den finden Sie im Frameset bzw. vergeben ihn dort. In meinen Beispielen habe ich z. B. den Namen "navigation" für den linken Frame und den Namen "inhalt" für den rechten Frame verwendet. Bei der Angabe des Namens muß man auf die Groß- und Kleinschreibung achten. Ich müßte also im Navigationsframe bei den Links als target immer "inhalt" angeben. So sieht dann ein Link im Frame aus:

<a href="home.html" target="inhalt">Home</a>

Der Quelltext der Frameset - Datei:

<html>
<head>
<title>Frameset</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="180,*" frameborder="NO" border="0" framespacing="0">
<frame name="navigation" scrolling="NO" noresize src="navi.html">
<frame name="inhalt" src="inhalt.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
Hier steht eine kurze Beschreibung der Inhalte der Site....

Link1
Link2
Link3....

</body>
</noframes>
</html>

Der Quelltext des linken Frame:

<html>
<head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#00CC99" text="#000000">
Hier steht das
Logo
 
 
 
Hier stehen die
Navigationslinks

<a href="home.html" target="inhalt">Home</a>

<a href="kontakt.html" target="inhalt">Kontakt</a>

<a href="anfahrt.html" target="inhalt">Anfahrt</a>
</body>
</html>

Der Quelltext des rechten Frame:

<html>
<head>
<title>Inhalt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#0099CC" text="#000000">
Hier stehen die Inhalte

</body>
</html>

Beispielseite anschauen

Nun haben Sie es fast geschafft - nur noch ein Thema ist übrig geblieben. Wenn Sie etwas über die Erstellung von Formularen wissen möchten, dann klicken Sie auf den Pfeil....

Formulare