Frames
Vorwort zu Frames
Das Frameset ist eine Art Tabelle, ein unterteilter Fensterrahmen, in welches mehrere Dateien als feste Bestandteile (Frames) geladen werden. Beim Navigieren wird nur nur die Datei im Fenster mit dem wechselnden Inhalt ausgetauscht. In HTML 5 wurde das Frameset und die Frames abgeschafft!
Head und Navigation machten eine Seite ziemlich schwer, als sie noch gänzlich aus Bildern zusammengebaut wurden, bei jedem Klick musste der Browser alles neu laden - und das dauerte bei damaligen Modems lange. Aber auch heute noch ist es überflüssig diese Seitenteile in jede Seite hinein zu kopieren; bei einer Änderung, müssen alle Dateien mit einer angepassten Kopie eines solchen Elements korrigiert werden. Durch Frames kann in jedem Frameset immer die eine Navigation und der eine Head geladen werden. Nur eine Datei muss korrigiert werden, falls sich an der Navigation etwas ändert, und sie muss nicht gleichzeitig mit dem Inhalt neu geladen werden.
Alternative zu Frames
In HTML 5 wurden das Frameset und die Frames abgeschafft!
An Stelle von Frames wird eine Seite nun in Div-Container unterteilt. Eine Navigation wird dann z.B. durch PHP mit include() geladen.
Frames sind nicht mehr so beliebt weil:
Die Seitenindexierung der Suchroboter und Bookmarks richten sich auf die Einzelseite,
wird ein Suchergebnis angeklickt, so öffnet sich diese Seite ohne die anderen Frames, das bedeutet dann zB. ohne Navigation und Logo.
Eigentlich sollte man auf diesen Seiten welche in einem Frame dargestellt werden müssen,
einen Link zum Frameset platzieren oder den Head mit einem Meta-Tag versehen,
welcher verbietet die Seite als Suchergebnis aufzulisten (darüber mehr im Kapitel über den Head).
Dem Problem kann auch mit JavaScripts abgeholfen werden, aber die wollen auch nicht alle User zulassen
(JavaScripts für Frames).
Als Alternative zu Frames steht auf vielen Servern SSI zur Verfügung.
Frameset kreieren
<frameset><frame /><frame /></frameset>
Will man eine Site mit Frames aufbauen, kreiert man zuerst eine Seite welche die Frame-Anordnung und die Frame-Grössen definiert.
Dies geschiet durch die <frameset>...</frameset>-Tags, welche die <body>...</body>-Tags dieser Seite ersetzen!!!
(Für Browser, welche das Frameset-Tag nicht kennen und darum NICHTS darstellen würden, gibt es das Noframes-Tag, welches weiter unten beschrieben ist.)
Ein Frame-Set besteht aus durchgehenden Reihen oder Kolonnen! Je nachdem, was für ein Frame ganz durchgehend ist, wird das erste Frame-Set aus Reihen oder Kolonnen gebaut. Ein Frame aus dem ersten Frame-Set kann dann weiter durch ein zweites Frame-Set mit durchgehenden Reihen oder Kolonnen ersetzt werden.
Der Attribut-Name im Frameset-Opentag für Reihen ist rows="..", für Kolonnen cols="...".
Die Attribut-Werte, also die Höhe für Reihen oder die Breite für Kolonnen, können in Pixel (ohne Masseinheit), in Prozenten (%) oder als so gross wie möglich nur mit dem *-Zeichen angegeben werden.
Das erste Frameset wurde so geschrieben:
<frameset rows="100,*,20">...</frameset>
Innerhalb jedes Frame-Sets müssen noch die Frames definiert werden, dies geschiet durch den frame-Tag. Im Attribut des frame-Tags src="..." wird
beschrieben, welches Dokument in diesen Frame geladen werden soll.
Für dieses Beispiel wurde zuerst ein Frame-Set bestehend; aus 3 Reihen (Zeilen) kreiert, das zweite,
mittlere Frame wurde dann durch ein zweites Frame-Set bestehend aus 3 Kolonnen ersetzt. Alle Frames wurden vorläufig mit der selben Datei gefüllt:
<frameset rows="100,*,20"> <!-- Das 1. Frameset beginnt, es hat -->
<frame src="frame_test.htm" /> <!-- Das 1. Frame des 1. Frameset -->
<frameset cols=120,65%,*> <!-- Das 2. Frameset ersetzt das 2. Frame des 1. Frameset -->
<frame src="frame_test.htm" /> <!-- Das 1. Frame des 2. Frameset -->
<frame src="frame_test.htm" /> <!-- Das 2. Frame des 2. Frameset -->
<frame src="frame_test.htm" /> <!-- Das 3. Frame des 2. Frameset -->
</frameset> <!-- Das 2. Frameset endet -->
<frame src="frame_test.htm" /> <!-- Das 3. Frame des 1. Frameset -->
</frameset> <!-- Das 1. Frameset endet -->
<noframes>Hier kommt alternativer Inhalt!</noframes>
<noframes>...</noframes>
Da nicht alle Browser Dokumente unterstützen, in denen die body-Tags durch frameset-Tags ersetzt wurden,
und dann rein gar nichts angezeigt würde, gibt es ein Tag-Paar, das es erlaubt eine ganz normale HTML-Seite
innerhalb das Frameset zu stellen. Nur Browser welche keine Frames unterstützen zeigen das,
was immer auch zwischen diese Tags geschrieben wurde, sei es Text, oder Hyperlinks oder eben andere HTML-Tags.
Diese Tags <noframes>...</noframes> kommen nach allen Framesets. Text in diesen Tags helfen auch zur Indexierung von FramesetSeiten, welche ja sonst keinen Text enthalten!
Das Frameset ist aufgebaut. Es zeigt Trennlinien zwischen den einzelnen Frames, welche verschoben werden können. Das jetztige Frameset sieht so aus!
Frame Name für das Targeting
Frames bieten den Vorteil, dass nicht bei jedem Klick die ganze Seite neu geladen werden muss, sondern gleichbleibende Teile wie ein Logo oder die Navigation stehen bleiben können.
Desshalb muss man zumindest die Frames, deren Inhalt ausgetauscht werden soll benennen.
Dies geschiet ebenfalls im frame-Tag.
Das zentrale Frame wird hier so benannt: name="content"
Ein Link (im Navigationsframe) kann nun auf dieses so benannte Frame (Fenster) gerichtet werden mit einem Link target="content" also auf den Fensternamen
Wenn es kein offenes Frame oder Fenster mit dem angesprochenen Namen gäbe, würde für den Link ein eigenes, neues Fenster eröffnet! - siehe dazu Links, dort Target Window.
Rahmen und Ränder
Der Rahmen des Framesets oder die Ränder der Frames sind ziemlich störend, wenn man das Ganze als eine Seite darstellen will.
Die Attribute: frameborder="no", border="0" und framespacing="0" im frameset-Opentag machen alles klahr. Allerdings wird die Resize-Möglichkeit auch
ausgeschaltet, wenn kein Rand mehr vorhanden ist, um daran zu ziehen.
Man kann aber noch in die einzelnen frame-Tags frameborder="yes" setzen.
Mehr Frame Attribute
Weiter kann in jedem frame-Tag einzeln bestimmt werden:
scrolling= "auto": Die default Funktion ist: 'yes' wenn Inhalt grösser als Frame. scrolling= kann mit "no" verboten werden, mit "yes" auch
wenn unnötig erzwungen werden.
noresize verbietet das Verschieben der Frame-Trennlinien (Ränder) durch die Benutzer.
Auf dieser fertigen Seite kann das unterste Frame mit Auswirkung auf alle oberen Frames im Browser vergrössert und verkleinert werden.
marginheight= "0" setzt den Abstand oben und unten zwischen Frame-Innenrand und Frame-Inhalt auf Null fest (für Bilder und Tabellen zu empfehlen).
marginwidth="0" bestimmt den Seitlichen Abstand des Dokumentes zu seinem es umgebenden Frame.
Fertiger Code
<frameset rows="100,*,20">
<frame name="LOGO" scrolling="no" noresize src="frame_logo.htm" />
<frameset cols="120,65%,*" frameborder="no" framespacing="0" border="0">
<frame name="NAVIGATION" marginwidth="2" scrolling="no" src="frame_nav.htm" />
<frame name="CONTENT" src="frame_content.htm" />
<frame name="BILDER" scrolling="yes" src="frame_test.htm" />
</frameset>
<frame name="BANNER" border="yes" marginheight="0" marginwidth="0" scrolling="no" src="frame_banner.htm" />
</frameset>
<noframes>Hier kommt alternativer Inhalt!</noframes>
Selbstverständlich müssten jetzt noch die HTML-Dateien, welche in die einzelnen Frames geladen werden sollen, erstellt werden! Zum Beispiel oben einen Kopf, links die Navigation, unten ein Banner und rechts Werbung.
Check den Code.