Um eine Webseite optisch in mehrere Bereiche zu gliedern, kann man sie mit Hilfe von Frames in mehrere Segmente aufteilen. Diesen Segmenten lassen sich separate Inhalte (HTML-Dateien) zuordnen.
Diese Aufteilung kann man zum Beispiel nutzen, um einen ständig sichtbaren Titel und ein ebenfalls ständig erreichbares Menü zu erhalten. Mit Hilfe geschickt gewählter Hintergründe kann trotzdem der Eindruck einer durchgängigen Oberfläche erreicht werden.
Die hier gezeigte Webseite ist in drei Bereiche (Titel, Menü und Inhalte) wie folgt aufgeteilt:
Diese Aufteilung wird mit folgendem Quelltext in der Datei index.html erreicht:
‹html›
‹head›
‹title›Webentwicklung Klasse 10‹/title›
‹/head›
‹frameset rows="160,*" frameborder="0" framespacing="0" border="0" noresize›
‹frame src="titel.html" name="oben" marginheight="25" scrolling="no"›
‹frameset cols="190,*" frameborder="0" framespacing="0" border="0" noresize›
‹frame src="menue.html" name="links" scrolling="no"›
‹frame src="01_erste_Webseite/erste_Webseite.html" name="rechts" scrolling="auto"›
‹/frameset›
‹/frameset›
‹noframes›
Ihr Browser unterstützt leider keine Frames!
‹/noframes›
‹/html›
Wie man am Quelltext erkennen kann, ersetzt die Frameset-Definition den ‹body›-Abschnitt der HTML-Datei!
Zur Erklärung der Aufteilung nochmals die Zeilen 6 bis 12 des Quelltextes:
| Quelltext | Bedeutung |
|---|---|
| ‹frameset rows="160,*" ...› | Teilt das Fenster vertikal in zwei Bereiche (row = Zeile): oberer Bereich mit 160 Pixeln Höhe; unterer Bereich mit der restlichen Höhe des Fensters |
| ‹frame src="titel.html" name="oben" ...› | Weist dem oberen Bereich die Datei »titel.html« und den Namen »oben« zu |
| ‹frameset cols="190,*" ...› | Teilt den unteren Bereich horizontal in zwei Bereiche (column = Spalte): linker Bereich mit 190 Pixeln Breite; rechter Bereich mit der restlichen Breite des Fensters |
| ‹frame src="menue.html" name="links" ...› | Weist dem linken unteren Bereich die Datei »menue.html« und den Namen »links« zu |
| ‹frame src="01_erste_Webseite/erste_Webseite.html" name="rechts" ...› | Weist dem rechten unteren Bereich die Datei »01_erste_Webseite/erste_Webseite.html« und den Namen »rechts« zu |
| ‹/frameset› | Schließt das innere Frameset |
| ‹/frameset› | Schließt das äußere Frameset |
Der Klick auf einen Menüpunkt im Frame »links« soll im oberen Beispiel eine HTML-Datei im Frame »rechts« anzeigen. Um das zu erreichen muss im Anker für den Hyperlink zusätzlich zur zu ladenden Datei der Name des Zielframes (target="Name des Zielframes") angegeben werden. Der Quelltext für den Menüpunkt »Frames« lautet deshalb wie folgt:
‹A href="02_Frames/Frames.html" target="rechts"›Frames‹/A›
Ohne diese Zielangabe wird der Link immer im gleiche Frame geöffnet, in dem sich auch der Anker befindet!
Zum Erzeugen einer vertikalen Menüstruktur wie im Beispiel bietet sich die Verwendung einer Tabelle an. Tabellen enthalten folgende Elemente:
Der Quelltext für das Menü dieser Seite lautet wie folgt:
‹table width="100%"›
‹tr›
‹th›Menü‹/th›
‹/tr›
‹tr›
‹td>‹A href="01_erste_Webseite/erste_Webseite.html" target="rechts"›Die erste Webseite‹/A›‹/td›
‹/tr›
‹tr›
‹td›‹A href="02_Frames/Frames.html" target="rechts"›Frames‹/A›‹/td›
‹/tr›
...
‹/table›