Mit Hilfe von Frames (Felder) können Sie den Anzeigebereich
des Browsers in verschiedene, frei definierbare Segmente aufteilen.
In jedem Feld wird ein eigener Inhalt (eine .html Datei) angezeigt.
So wird häufig die Navigation in einem Frame (meist auf der
die linken Seite) und die Seiteninformation in einem anderen Frame
dargestellt.
Ein Frame wird in der Startseite (index.html) mit dem Tag <frameset></frameset>definiert,
und zwar vor dem <body></body>
Tag, denn in dieser Datei wird kein Inhalt gespeichert, nur die
Information, wo die Inhalte liegen! Dabei wird in unserem Beispiel
mit dem Attribut cols die Spaltenbreite
definiert (von Links nach Rechts).
Das kann mit einer festen Pixelzahl (z.B. 50) oder einer Prozentangabe
erfolgen (z.B. 20%).
Bei der Angabe der "Übrigen Spalte" wird nach einer
Angabe in Pixeln meist ein Platzhalter, das Asterix (*) benutzt,
um anzuzeigen, dass der gesamte Rest der verfügbaren Fläche
dem Übrigen Segment zugeteilt wird. (<frameset
cols="200,*">)
Im Anschluss der Aufteilung werden die zu ladenden Quellen (Source
- scr) angegeben. Hier:
<frame src="navigation.html">
<frame src="start.html">
Nun bekommt jeder Frame noch das Attribut name
mit auf dem Weg. Das ist besonders wichtig, wenn später ein
Link vom "navigationsframe" im
"inhaltsframe" geöffnet
werden soll. In unserem Beispiel also:
<frame src="navigation.html" name="navigationsframe">
<frame src="start.html" name="inhaltsframe">
Für den Fall, dass der Browser keine frames unterstützt,
wird der <body></body> Tag
mit dem <noframes></noframes>
Tag eingeschlossen, dort kann eine Nachricht eingebunden werden,
wie z. B., dass mann bitte eine neue Browser-Version installieren
muss, um diese Webseite zu sehen. Hier der Quellcode der Datei index.html:
<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>
<html>
<head>
<title>Meine erste Seite mit Frames</title>
</head>
<frameset cols="200,*">
<frame src="navigation.html" name="navigationsframe">
<frame src="start.html" name="inhaltsframe">
</frameset>
<noframes>
<body>
Ihr Browser unterstützt keine Frames - bitte installieren Sie
eine neuere Version.
</body>
</noframes>
</html>
<!-- Quellcode Ende -->
Damit währe der Rahmen definiert, wir benötigen jetzt
noch die beiden html-Dateien navigation.html und index.html. In
der Datei navigation.html werden die Links mit dem Attribut target="inhaltsframe"
angewiesen, das Ziel im Hauptframe anzuzeigen, das ganze sieht dann
so aus:
<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>
<html>
<head>
<title>Navigation</title>
</head>
<body text="#000000" bgcolor="#FFFFFF"
link="#006633" alink="#FF0000" vlink="#006633">
<h1>Navigation</h1>
<p>
<a href="../hI_syntax.html" target="inhaltsframe">Syntax</a><br>
<a href="../hI_formatierungen.html" target="inhaltsframe">Formatierung</a>
<br>
<a href="../hI_bilder.html" target="inhaltsframe">Bilder</a><br>
<a href="../hI_hyperlinks.html" target="inhaltsframe">Hyperlinks</a><br>
<a href="../hI_tabellen.html" target="inhaltsframe">Tabellen</a><br>
<a href="../hI_frames.html" target="inhaltsframe">Frames</a></p>
<h1>Aktuell </h1>
<p>Heute im Angebot:<br>
Ganz neue, frische Webseiten!!!</p>
</body>
</html>
<!-- Quellcode Ende -->
Und das ganze sieht dann so aus:
zurück zum Seitenanfang
|