Seitenleiste
Webtutorials
Inhaltsverzeichnis
Frames
Frames sind Teilbereiche einer HTML-Datei in der eine andere Dateien angezeigt werden können. Alle Frames zusammen ergeben das sogenannte Frameset.
Framesets
Ein Frameset wird in einer Datei definiert, zum Beispiel folgendermaßen:
<!doctype html> <html> <head> </head> <frameset cols="40%,60%"> <frame src="frame1.htm" name="frame1"> <frame src="frame2.htm" name="frame2"> </frameset> </html>
Der Browser zeichnet nun also 2 Frames in Spalten, die erste 40%, die andere 60% des Browserfensters groß. Das 40% große Frame hat den Namen „frame1“ und lädt die Datei frame2.html. Das zweite heißt „frame2“ und lädt die Datei frame2.htm. Die beiden Dateien frame1.html und frame2.html müssen in dem Fall im gleichen Ordner liegen, wie die oben dargestellte Datei, damit sie geladen werden können. Man beachte den fehlenden <body>-Tag im Code. Links könnte z.B. ein Menü stehen, und rechts wird der Inhalt der Homepage geladen. Das Beispiel Menü finden Sie unten.
iFrame
Die o.g. Methode mit einem Frameset nimmt die gesamte Breite und die gesamte Höhe des Browserfensters ein, will man aber nur einen Teil einer Homepage als eigenen Frame haben, zum Beispiel für Werbung, so benutzt man den <iframe>-Tag:
<!doctype html> <html> <head> </head> <body> <p>Inhalte, sehen Sie hier</p> <iframe width="300px" height="240px" src="hallo.htm" name="iframe1"></iframe> <p>und hier sehen Sie mehr Inhalte</p> <body> </html>
Nun sind beide Schriftzüge auf der Seite: Den eigenen Inhalt so jenen der über iframe eingebunden wird. Dieser Frame kann zum Beispiel für dynamische Inhalte genutzt werden, damit nicht die gesamte Seite neu geladen werden muss.
Beispiel: Menü
In folgendem Beispiel wird ein Menü in einem Frameset dargestellt:
index.html:
<!doctype html> <html> <head> </head> <frameset cols="200px,*" border="0px"> <frame name="menu" src="menu.html"> <frame name="cont" src="home.html"> </framset> </html>
menu.html:
<!doctype html> <html> <head> </head> <body> <a href="home.htm" target="cont">Homepage</a> <a href="seite1.htm" target="cont">Inhalt1</a> ... </body> </html>
In der index.html wird das Frameset definiert, und die Dateien menu.html in den Frame 'menu' und home.html in den Frame 'cont' reingeladen. Klickt man aber einen Link im Frame 'menu' ohne target=„cont“ an, so wird die neu aufgerufene Seite im selben Frame angezeigt. Um das zu verhindern, verwendet man das Attribut target=„cont“ um dem Browser mitzuteilen, er soll als Ziel für den Link den Frame 'cont' verwenden.
Das Attribut border=„0px“ im <frameset>-Tag bewirkt, dass der Randstreifen zwischen den Frames nicht mehr angezeigt wird. Die Größe cols=„200px,*“ gibt an, dass der 'menu'-Frame 200 Pixel einnehmen soll und der andere Frame den restlichen Platz im Browserfenster.
Im nächsten Kapitel wird die Darstellung von Sonderzeichen im Browser behandelt.