Frames
- siehe dazu auch hier
Der Einsatz von Frames gilt mittlerweile als überholt. Hardliner sagen sogar:
Leugnen Sie die Existenz von Frames!
Mit Frames bzw. Framesets hat man die Möglichkeit, das Browserfenster in mehrere Bereiche aufzuteilen, um dann in jedem Bereich eine separate HTML-Datei anzeigen zu lassen. Dazu benötigt man zunächst eine Frameset-Datei, welche die Aufteilung festlegt und bestimmte Dateien in die so entstandenen Frames lädt. Den Begriff Frame würde ich in diesem Fall mit "Gerüst" oder "Fachwerk" (Framework) übersetzen.
Die Frameset-Datei hat einen Head-Bereich wie jede andere HTML-Datei auch. Danach wird ein <frameset> definiert, welches dann die Unterteilung in mehrere Frames vornimmt.
Üblicherweise wird die Frameset-Datei index genannt. Warum ist das so? Wird z.B. die Domain www.csskiste.de aufgerufen, so schaut der Browser zunächst, ob auf dem Server eine Datei mit dem Namen index vorhanden ist und lädt diese. Handelt es sich hierbei nun bereits um das Frameset, so kann dieses die weiteren Dateien aufrufen. Ist hier aber nicht der Fall, ich verwende keine Frames. Natürlich kann die index-Datei auch andere Funktionen haben, wie z.B. eine automatische Weiterleitung.
Die Frameset-Datei
Folgender Code definiert einen linken Navigationsframe (navFrame) von 142 Pixel Breite und einen rechten Hauptframe (mainFrame) für den eigentlichen Inhalt der Seite.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
<html>
<head>
<title>Beschreibung des Frameset-Inhalts</title>
</head>
<frameset cols="142,*" frameborder="0" framespacing="0" border="0">
<frame name="navFrame" scrolling="no" noresize src="nav.htm">
<frame name="mainFrame" src="start.htm">
<noframes>
<body>
<h1>Alternativ-Inhalt</h1>
<p>Wird angezeigt, wenn der Browser keine Frames darstellen kann.</p>
<p>Das sollte heute jedoch nicht mehr vorkommen.</p>
<p>Mindest-Inhalt sollten eine Kurzbeschreibung und eine Sitemap sein.</p>
<p>Dieser Text erscheint auch als Beschreibung bei Suchmaschinen.</p>
</body>
</noframes>
</frameset>
</html>
Die Angaben Frameborder, Framespacing und Border benötigen Sie, um den sichtbaren Rand der Frames zu unterdrücken. Die verschiedenen Browser halten sich hier leider nicht an die Vorgaben des W3C und lösen diese Aufgabe unterschiedlich, daher sollten Sie alle Attribute verwenden (das jeweils browserspezifisch richtige wird dann schon dabei sein, das jeweils andere wird ignoriert).
- siehe dazu auch hier.
Innerhalb der Frames werden dann (mit src="pfad+dateiname") ganz gewöhnliche HTML-Seiten angezeigt, d.h. diese werden sozusagen in die Frames geladen.
Links steht in unserem Fall dann ein Menü. Durch klicken auf einen Menüpunkt wird durch die Angabe target="mainFrame" (also der willkürlich gewählte Name des Ziel-Frames) die entsprechende Datei im Main-Frame geladen. Verweise auf fremde Seiten sollten wie gewohnt die Angabe target="_blank" erhalten.
Hier noch der Code der Beispielseiten, welche in die Frames geladen werden könnten:
Die Datei nav.htm...
<html> <head> <title>Navigation</title> <meta name="author" content="Charly"> <link rel="stylesheet" href="css/format.css" type="text/css"> </head> <body> <h2 class="shadow">Menü:</h2> <p><a href="start.htm" target="mainFrame">Home</a></p> <p><a href="seite1.htm" target="mainFrame">Link 1</a></p> <p><a href="seite2.htm" target="mainFrame">Link 2</a></p> </body> </html>
... und die Datei start.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Leere Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Frerichs">
<link rel="stylesheet" href="css/format.css" type="text/css">
<style type="text/css">
<!--
body {margin:0}
-->
</style>
</head>
<body>
<table style="width:100%; height:100%" border="0">
<tr>
<td align="center" valign="middle">
<!--Content-->
<table width="50%" border="0">
<tr>
<td>
<div align="center">
<h2 class="shadow">Moin</h2>
</div>
</td>
</tr>
</table>
<!--End Content-->
</td>
</tr>
</table>
</body>
</html>
Die Datei start.htm könnte auch als Grundgerüst für weitere Inhaltsseiten verwendet werden. Speichern Sie sie dazu einfach unter dem Namen musterseite.htm und ändern sie dann nur den als Content (=Inhalt) markierten Bereich.
Tipp: Die Angabe margin:0 (im Stylesheet) unterdrückt unnötige Abstände der Inhalte zu den Framebegrenzungen und spart somit Platz auf kleinen Monitoren.
Vor- und Nachteile von Frames
Der größte Vorteil von Frames ist, dass immer wiederkehrende Dinge wie Menüs oder Firmenlogos nur einmal erstellt werden müssen und dann in jede Seite quasi eingebunden werden. Das erleichtert die Pflege dieser Elemente, beugt Fehlern vor und spart auch noch Speicherplatz. Ein weiterer Vorteil ist, dass in der Adresszeile des Browsers im Idealfall nur der Domainname steht, und der Betrachter nichts von unserer Ordnerstruktur mitbekommt.
Darin liegt aber auch gleichzeitig der größte Nachteil! Denn wenn jemand unsere Seite bookmarkt, wird er diese später aus dem Zusammenhang gerissen vorfinden. Es fehlt dann in unserem Fall das Menü, weil ja nur die Seite start.htm gebookmarkt wird und nicht das Frameset index.htm. Genauso verhält es sich, wenn jemand über eine Suchmaschine auf unsere Seiten gerät.
Diese Seite sähe dann beispielsweise so aus: klick. Allenfalls wäre das CSS noch vorhanden. Header, Navi und Footer würden aber fehlen.
Mit JavaScript ist es zwar möglich, das Frameset nachzuladen... aber was ist, wenn der Besucher in seinem Browser die Ausführung von Scripten deaktiviert hat?
