Frames
| HTML Grundkurs - Frames |
Was sind Frames und was bringen sie mir?
in Frame (engl. für Rahmen), genau genommen ein Frameset ist Bestandteil einer eigenen HTML-Datei. Sie integriert zwei oder mehr fremde HTML-Dateien und regelt deren Anordnung auf dem Monitor.
Du siehst zum Beispiel in diesem Moment ein Frameset vor dir: Der linke, bordeaux-rote Teil ist eine eigene Datei, genau wie der rechte, silbergraue mit diesem Text drauf. Die Datei 'start.html' (deren Namen oben angegeben wird) hat selber keinen Inhalt, sie regelt nur die Anordnung fremder Dateien. Der Vorteil dieser Framesets ist, daß man die Homepage sehr übersichtlich gestalten kann. Links oder oben eine Inhaltsangabe, in der Mitte ein großer Frame für den Inhalt, unten noch ein kleines Feld mit Links und persönlichen Informationen, das alles mit unterschiedlichen Hintergrundfarben und schon ist die Homepage viel übersichtlicher und gegliedeter. Allerdings sollte man aufpassen, dass auch bei kleinen Monitoren die Frames groß genug sind um ausreichend Inhalt anzuzeigen.
Ein Frameset definieren:
Frameset sind etwas besonderes: Sie werden nicht zwischen die <BODY>-Tags geschrieben (dieser Bereich bleibt leer), sondern zwischen den Kopfbereich und den Dokumentenkörper einer HTML-Datei, also zwischen den </HEAD>-Tag und den <BODY>-Tag.
Ein Frameset wird definiert durch den Tag (wer hätte das gedacht!) <FRAMESET>...</FRAMESET>. Man muss aber noch zwingend Attribute einfügen, die festlegen, wie man die einzelnen Frames anordnen will. Frames senkrecht nebeneinander entstehen durch das Attribut 'cols="x,y,z..."'. 'x' bzw. 'y' und 'z' sind Zahlen bzw. Prozentwerte und definieren zum einen durch ihren Wert die Breite des Frames zum anderen stehen sie für die Anzahl an Frame-Fenster (für jede Variable wird ein eigener Frame gebildet). Die Seite 'start.html' (die du ja gerade siehst) hat zum Beispiel den Befehl <FRAMESET COLS="150,*">. Der Stern (*) steht übrigens für den Rest der Bildschirmfläche, die von der Monitorgröße abhängt.
Anschließend muß man den Tag <FRAME name="x" src="y.html"> so oft zwischen die <FRAMESET>- und </FRAMESET> - Befehle schreiben, wie man oben Anzahl an Variablen (also Frames) hat. 'x' steht dafür für einen beliebigen Namen, der aber aus Logikgründen etwas mit dem Frameset zu tun haben sollte, also z.B. 'links-oben'. Anstelle von 'y' setzt man die Datei ein, die in die für den Frame vorgesehene Fläche soll. Das muss man, wie gesagt, für jedes einzelne Framefenster separat machen und jeweils eigene Namen (zwingend) und Quellen (nicht zwingend) verwenden.
Senkrecht übereinander angeordnete Frames erhält man durch das Attribut 'rows="x,y,z..."', und funktioniert genauso wie die vertikalen Frames.
Frames verlinken:
Wenn man dieses Frameset erstellt hat, kann man die Seiten gestalten, die in dem Frameset später angezeigt werden sollen. Auf diesen Seiten kann man mit dem inzwischen bekannten <A href="x">...</A>-Tag Links zu anderen Dateien installieren. Diese werden dann in dem selben Frame geöffnet, in dem die ursprüngliche Datei war.
Nun will man aber sicher manchmal einen Link beim Aufrufen in einem anderen Frame öffnen lassen (zum Beispiel den Inhalt eines in einer Übersicht ausgewählten Links im Hauptfenster anzeigen). Um das zu erreichen muss man den <A href>-Tag durch das Attribut 'target="x"' erweitern. Anstelle von 'x' wird der Name des Frames, in dem man die Datei öffnen will, eingesetzt (also das, was man hinter das Attribut 'name=' im <Frame>-Tag geschrieben hat).
Es gibt auch die Möglichkeit, die Zieldatei in einem neuen Browser-Fenster zu öffnen. Dafür verwendet man wieder das Attribut 'target="x"'. Allerdings setzt man nun für 'x' einen Namen ein, der noch nicht für Frames vergeben ist. Empfehlenswert ist auch hier einen logischen Namen zu wählen, also z.B. 'neu'.
|
<frameset rows="30%,70%"> <frame src="oben.html"> <frame src="unten.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset rows="70%,30%"> <frame src="oben.html"> <frame src="unten.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset cols="30%,70%"> <frame src="links.html"> <frame src="rechts.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset cols="70%,30%"> <frame src="links.html"> <frame src="rechts.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset cols="30%,70%"> <frame src="links.html"> <frameset rows="30%,70%"> <frame src="oben.html"> <frame src="unten.html"> </frameset> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset cols="30%,70%"> <frameset rows="30%,70%"> <frame src="oben.html"> <frame src="unten.html"> </frameset> <frame src="rechts.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset rows="30%,70%"> <frame src="oben.html"> <frameset cols="30%,70%"> <frame src="links.html"> <frame src="rechts.html"> </frameset> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset cols="30%,70%"> <frameset rows="30%,70%"> <frame src="oben.html"> <frame src="unten.html"> </frameset> <frame src="rechts.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset rows="10%,80%,10%"> <frame src="oben.html"> <frame src="mitte.html"> <frame src="unten.html"> </frameset> <noframes> Ihr Browser unterstützt keine Frames! </noframes> |
|
|
<frameset rows=80,*> <frame name="FrameName1" src="oben.html" marginheight=0 marginwidth=0 border=0> <frameset cols=150,*> <frame name="FrameName2" src="links.html" marginheight=0 marginwidth=0 border=0> <frameset cols=*,150> <frame name="FrameName3" src="mitte.html" marginheight=0 marginwidth=0 border=0> <frame name="FrameName4" src="rechts.html" marginheight=0 marginwidth=0 border=0> </frameset> </frameset> </frameset> |
|
