Frame
Als erstes müssen wir für unsere Seite ein Frameset erstellen.
Dieses soll dann so aussehen. Oben ein Frame für das Logo. Links ein Frame für die Navigation und Rechts ein Frame für den Inhalt.
Bei selfhtml finden sich unter "Frames" => "Frames und Frameset definieren" => "Grundgerüst einer html Datei mit frames"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset ...>
<frame ...>
<noframes>
Wird angezeigt, wenn der Browser keine Frames anzeigen kann
</noframes>
</frameset>
</html>
Diese Datei speichern wir erst einmal als index.html ab.
Anschliessend passen wir die Datei an unsere Bedürfnisse an.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Die Wollmaus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta name="description" content="Das geheime Leben der Wollmaus.">
<meta name="author" content="Dein Name">
<meta name="keywords" content="Wollmaus, Leben und Lebensräume, Staubsauger">
<meta name="robots" content="index, follow">
</head>
<frameset rows="150,*" frameborder="0" framespacing="0" border="0">
<frame src="logo.html" name="logo">
<frameset cols="200,*"frameborder="0" framespacing="0" border="0" >
<frame src="navi.html" name="navigation">
<frame src="inhalt.html" name="inhalt">
<noframes>
<h1>Die Wollmaus</h1>
<p>Auf diesen Webseiten finden sie alles Wissenswerte über die Wollmaus.</p>
<p>Die Wollmaus hält sich üblicherweise in dunklen Ecken auf, so dass es nicht einfach ist, sie zu erforschen.</p>
<p>Wir haben hier versucht etwas über die Entstehung und das Sein der Wollmaus, aber auch etwas über die natürlichen Feinde zusammenzutragen.</p>
<p>Viel Spaß dabei.</p>
<p><a href="navigation.html">Hier</a> können sie mehr über die Wollmaus erfahren.</p>
</noframes>
</frameset>
</frameset>
</html>
Das Speichern nicht vergessen.
So sieht es aus. Eigentlich würde man nichts sehen, aber ich habe hier mal die 3 Dateien, die in das Frameset geladen würden (logo.html, navigation.html und inhalt.html) erstellt, und mit einer Hintergrundfarbe versehen.
Aber jetzt noch einige Erklärungen zu den neuen HTML-Tags:
Mit frameset rows="150,*" (rows engl. Zeile) wird der Bildschirm schon mal in 2 Frames aufgeteilt. Der obere Frame ist 150px hoch, der untere Frame nimmt den Rest des vorhandenen Platzes ein.
frameborder="0" framespacing="0" border="0" (frameborder engl. Rahmenumrandung) (framespacing engl. Rahmenabstand) (border engl. Rand) unterdrückt die sichtbaren Rahmen des Frames. Diese Schreibweise ist nicht w3c konform, aber funktioniert dafür in allen Browsern. Das ist ein Kompromiss den ich eingehe.
Mit frame scr="logo.html" name="logo" wird in die obere Zeile die Datei logo.html geladen. (Diese Datei müssen wir später noch erstellen.) name="logo" vergibt einen Namen für dieses Frame, so dass wir es auch "ansprechen" können. Dazu später mehr unter der Navigation. .
Dann wird das untere Frame vertikal in zwei weitere Frames zerlegt.
frameset cols="200,*" erledigt dieses. Der linke frame ist dann 200px breit.
Mit frame = "....." werden diese beiden Frames mit Dateien, die noch erstellt werden müssen, gefüllt.
Der noframe (noframe engl. Kein Frame) Bereich ist für Browser, die keine Frames darstellen können. Dazu zählen auch Suchmaschinen. Deswegen sollte man in diesen Bereich eine kurze Beschreibung seiner Seiten und einen Link auf die Navigation angeben.
Damit haben wir das Grundgerüst fertig. Jetzt müssen wir noch die Inhalte erstellen.
