Frames
Frames teilen den Bildschirm in mehrere unterschiedliche Bereiche auf, deren Anordnung und Größe Sie frei bestimmen können.
10.1 Frames definieren
Folgendes Beispiel teilt eine Webseite in zwei Bereiche auf: einen kleineren linken Bereich (z.B. für die Navigation) und einen größeren rechten (z.B. für den eigentlichen Inhalt).
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset cols="20%,80%"> <frame name="Links" src="links.html"> <frame name="Inhalt" src="inhalt.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
Der Tag
<frameset>...</frameset>
muss ein Attribut enthalten, wie die einzelnen Frames angeordnet werden und welche Größe sie haben. Das Attribut cols=”…” teilt das Frameset in mehrere Spalten auf, rows=”…” dagegen teilt es in Reihen auf. Innerhalb der Anführungszeichen werden die Größen der einzelnen Frames – entweder als absolute oder relative Werte – durch Kommata getrennt notiert.
Innerhalb des FRAMESET-Tags werden die einzelnen Frames notiert, wobei es für jeden Frame eine Größeangabe im Frameset-Tag geben sollte. Andernfalls kann es bei der Darstellung zu unschönen Verzerrungen kommen. Ein * ist ein Platzhalter für die restliche Größe. Haben Sie 50% und 30% als Größen angegeben, steht * in diesem Fall für 20%.
Die einzelnen Frame-Definitionen brauchen mindestens das Attribut src=”…”. Dieses gibt an, wo die HTML-Datei für den Frame zu finden ist. Zusätzlich sollten Sie jedem Frame einen eindeutigen Namen geben, damit später Verweise in den richtigen Frames geöffnet werden können.
Dieses oben aufgeführte Frameset besteht insgesamt also aus drei Dateien: die erste (s. Quellcode oben) definiert das Frameset, die zweite (“links.html”) und dritte (“inhalt.html”) sind die Dateien, die angezeigt werden. Diese beiden Dateien sind gewöhnliche HTML-Seiten.
Hier nun ein weiteres Beispiel mit absoluten Werten:
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset rows="100,*,75"> <frame name="Oben" src="oben.html"> <frame name="Inhalt" src="inhalt.html"> <frame name="Unten" src="unten.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
10.2 Verschachtelte Frames
Möchten Sie einzelne Frames noch weiter unterteilen, müssen Sie bei der Frame-Definition ein weiteres Frameset wie im nachstehenden Beispiel einfügen.
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset cols="150,*"> <frame name="Links" src="links.html"> <frameset rows="15%,*"> <frame name="Oben" src="oben.html"> <frame name="Inhalt" src="inhalt.html"> </frameset> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
Wenn alle Bereiche wie im folgenden Beispiel gleich groß sind, spielt es keine Rollen, ob Sie den Bildschirm zuerst in Spalten oder in Reihen aufteilen.
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset cols="25%,25%,25%,25%"> <frameset rows="25%,25%,25%,25%"> <frame name="Bereich1" src="bereich1.html"> <frame name="Bereich2" src="bereich2.html"> <frame name="Bereich3" src="bereich3.html"> <frame name="Bereich4" src="bereich4.html"> </frameset> <frameset rows="25%,25%,25%,25%"> <frame name="Bereich5" src="bereich5.html"> <frame name="Bereich6" src="bereich6.html"> <frame name="Bereich7" src="bereich7.html"> <frame name="Bereich8" src="bereich8.html"> </frameset> <frameset rows="25%,25%,25%,25%"> <frame name="Bereich9" src="bereich9.html"> <frame name="Bereich10" src="bereich10.html"> <frame name="Bereich11" src="bereich11.html"> <frame name="Bereich12" src="bereich12.html"> </frameset> <frameset rows="25%,25%,25%,25%"> <frame name="Bereich13" src="bereich13.html"> <frame name="Bereich14" src="bereich14.html"> <frame name="Bereich15" src="bereich15.html"> <frame name="Bereich16" src="bereich16.html"> </frameset> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
10.3 Scrollbalken
Standardmäßig werden bei Frames die Scrollbalken aktiviert, wenn der Inhalt der Seite größer als der Frame ist. Möchten Sie dies verhindern, müssen Sie in der Frame-Definition das Attribut scrolling=”no” notieren.
Beachten Sie, dass so Teile der Webseite für Ihre Besucher unzugänglich werden können (je nach eingestellter Bildschirmauflösung).
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset rows="75,*"> <frame name="Oben" scrolling="no" src="oben.html"> <frame name="Inhalt" src="inhalt.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
10.4 Veränderung der Fenstergröße verhindern
Um zu verhindern, dass Besucher die voreingestellten Framegrößen verändern, müssen Sie das Attribut “noresize” in der Frame-Definition notieren.
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset rows="75,*"> <frame name="Oben" noresize src="oben.html"> <frame name="Inhalt" noresize src="inhalt.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
10.5 Abstände zwischen Fenstern
Sie können den Abstand zwischen Fensterrand und Fensterinhalt durch zwei Attribute exakt bestimmen:
marginheight="..."
bestimmt den Abstand zwischen oberem bzw. unterem Fensterrand und dem Fensterinhalt (in Pixeln).
marginwidth="..."
bestimmt den Abstand zwischen linkem bzw. rechtem Fensterrand und dem Fensterinhalt (in Pixeln).
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset rows="20%,*"> <frame marginheight="25" marginwidth="0" name="Oben" src="oben.html"> <frame marginheight="20" marginwidth="10" name="Inhalt" src="inhalt.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
10.6 Rahmen
Standardmäßig wird vom Browser ein dünner Rahmen um jeden Frame gezogen. Um nahtlose Übergänge zwischen Frames zu erzeugen, müssen Sie im FRAMESET-Tag drei zusätzliche Attribute notieren:
border="..."
gibt beim Browser von Netscape die Dicke des Rahmens an (in Pixeln).
frameborder="..."
bestimmt beim Browser von Microsoft, ob ein Rahmen angezeigt werden soll oder nicht (1 bzw. 0).
[/html]framespacing=”…” [/html] bestimmt beim Browser von Microsoft den Abstand zwischen den Fenstern, also die Dicke des Rahmens (in Pixeln).
Möchten Sie bei allen Browser den Rahmen verhindern, müssen Sie wie im folgenden Beispiel alle drei Attribute auf den Wert “0″ setzen.
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame marginheight="0" marginwidth="0" name="Oben" src="oben.html"> <frame marginheight="0" marginwidth="0" name="Inhalt" src="inhalt.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html>
10.7 Verweise zwischen Frames
Wenn Sie wie im nachstehenden Beispiel einen linken Navigationsframe und einen Inhaltsframe haben, müssen Sie die Verweise im Navigationsframe mit dem Attribut target=”…” ausstatten, damit diese im Inhaltsframe geöffnet werden.
Wichtig ist dabei, dass Sie die Namen der Frames vorher im Frameset definiert haben und diese exakt übernommen haben (Groß- und Kleinschreibung beachten!).
Die Frameset-Definition:
<html> <head> <title>Meine erste HTML-Seite</title> </head> <frameset cols="30%,*"> <frame name="Links" src="links.html"> <frame name="Inhalt" src="inhalt.html"> </frameset> <body> Dieser Bereich wird nur angezeigt, wenn der Browser Frames nicht unterstützt. </body> </html> Die Datei "links.html": <html> <head> <title>Meine erste HTML-Seite</title> </head> <body> <a href="inhalt.html" target="Inhalt">Startseite</a><br> <a href="seite1.html" target="Inhalt">Seite 1</a><br> <a href="seite2.html" target="Inhalt">Seite 2</a> </body> </html>
10.8 Frameset durch Verweise beenden
Es gibt drei Möglichkeiten ein Frameset per Link zu beenden:
target="_blank"
öffnet den Link in einem neuen Browserfenster.
target="_parent"
öffnet den Link in dem Anzeigefenster, das vor dem Start des Framesets aktiv war.
target="_top"
beendet das Frameset und öffnet den Link im gleichen Browserfenster.
<html> <head> <title>Meine erste HTML-Seite</title> </head> <body> <a href="seite1.html" target="_blank">Seite 1</a><br> <a href="seite2.html" target="_parent">Seite 2</a><br> <a href="seite3.html" target="_top">Seite 3</a> </body> </html>