X. Frames:
Mit Frames kann man die Anzeigefläche des Browsers in mehrere Bereiche teilen.
ZumBeispiel könnte man das Browserfenster, wie auf dieser Seite, horizontal in zwei Bereiche splitten, und dann in der oberen Hälfte ein Inhaltsverzeichnis postieren.
In der unteren Hälfte könnte man sich nun die Ergebnisse anzeigen lassen, die erscheinen, wenn man auf die Links des Inhaltsverzeichnisses klickt. Jeder Frame stellt also sozusagen einen kleinen Mini-Browser dar.
Man kann das Browserfenster aber auch senkrecht oder sogar mehrfach splitten.
Für Frames benötigt man mindestens 3 html -Dateien:
Die erste bestimmt, wie gesplittet wird. Mit ihr wird also festgelegt, wie das Browserfenster aufgeteilt wird. Die anderen beiden Dateien sind die beiden sichtbaren Dateien, die in die definierten Frames geladen werden.
In gewisser Weise sind Frames den html -Tabellen sehr ähnlich. Nur erstrecken sich die Gitternetzlinien der Frames über das ganze Browserfenster.
Anstatt:
<table> ... </table>
lautet das Grundgerüst von Frames:
<frameset ... >...</frameset>
Der Tag <frameset> hat zwei Attribute:
- rows= X,Y (für horizontale Aufteilung)
- cols= X,Y (für vertikale Aufteilung)
X und Y werden in Prozent (der Fensterbreite) oder aber in Pixel angeben.
Beispiel:
<frameset rows="20%,80%"> ... </frameset>
Das Beispiel bewirkt eine horizontale Aufteilung des Bildschirmes in zwei Reihen bzw. Frames. Der obere Frame nimmt 20% des Browserfensters ein, der untere 80%.
Als nächstes muss man nun die Namen der html-Dateien definieren, die innerhalb der Frames erscheinen sollen. Um die zu erscheinenden html-Dateien innerhalb der Frames zu bestimmen, benutzt man folgenden Tag:
<frame src="http://www.grazersoft.com/Dateiname">
Hierbei ist zu beachten, dass sich der erste frame src-Tag auf die erste Prozent- oder Pixelangabe bezieht!
Ein komplettes html-Frame sieht dann so aus:
<frameset rows="20%,80%">
<frame src="http://www.grazersoft.com/inhalt.html">
<frame src="http://www.grazersoft.com/willkommen.html" name="unten">
</frameset>
Zusätzlich wurde dem unteren Rahmen der Name "unten" gegeben. Denn bei Verweisen aus einem anderen Rahmen muss man target="Fenstername" hinzufügen, damit der Link im entsprechenden Rahmen erscheint:
<a href="http://www.grazersoft.com/datei.html" target="unten">
Um zwei Frames zu erzeugen, die senkrecht bzw. vertikal voneinander getrennt sind, verwendet man folgende Tags:
<frameset cols="30%,70%">
<frame src="http://www.grazersoft.com/links.html">
<frame src="http://www.grazersoft.com/rechts.html" name="rechts">
</frameset>
Die html-Datei, die die Frames erzeugen soll, sollte lediglich das Frameset beinhalten.
Ein <body>-Tag und sollte nicht vorhanden sein.
Jedoch sind die Tags:
<head><title> ... </title></head>
am Anfang der Datei sinnvoll.
Ein Frameset als vollständige html-Datei:
Beispiel:
<html>
<head><title>Meine erste Homepage mit Frames</title></head>
<frameset rows="30%,70%">
<frame src="http://www.grazersoft.com/oben.html">
<frame src="http://www.grazersoft.com/unten.html" name="unten">
</frameset>
</html>
Man kann das Browserfenster aber auch mehrmals teilen:
Beispiel:
<frameset cols="20%,60%,20%">
<frame
src="http://www.grazersoft.com/links.html">
<frame src="http://www.grazersoft.com/mitte.html" name="main">
<frame src="http://www.grazersoft.com/rechts.html">
</frameset>
Das Beispiel lässt drei Frames entstehen, senkrecht voneinander getrennt, dessen mittlerer Frame der größte ist. Will man jetzt z.B. den mittleren Frame in zwei horizontale Frames teilen, könnte man auf eine html-Datei verweisen, die nochmals einen Frameset enthält.
Besonders professionelle Effekte kann man erzielen, indem man mit durchsichtigen Frametrennlinien arbeitet:
<frameset cols="40%,60%" frameframespacing="0">
Um eine Seite in einem neuen Browserfenster zu öffnen, benutzt man:
<a href="http://www.grazersoft.com/datei.html" >
Um eine Seite im selben Browserfenster als Vollbild zu öffnen, benutzt man:
<a href="http://www.grazersoft.com/datei.html" target="_parent">
Zuletzt sei noch gesagt, dass wir in unserem Webdesign von Frames abraten. Usability und nicht optimales Verhalten für Suchmaschinen sind hierfür ursächlich.
Wiki, HTML-Kurs, Beispiel-Formular selbst lernen und erstellen