Ein Frame teit das Browser-Fenster physisch in verschiedene Bereiche auf. Die Frames bestehen aus ein oder mehreren Web-Seiten die Unabhängig von einander gesteuert werden können. Großer Nachteil dieser Technik ist, bei langsamen Internetverbindungen, längere Ladezeit bis der Benutzer die komplette Webseite auf seinem Bildschirm sieht.
Abhilfe schaft ein Frame auf Basis von CSS oder PHP.
Der Assistent erlaubt Ihnen eine interaktive Gestaltungen von Frames. Eine Reihe von vordefinierten Standard-Layouts für Frames, können Sie im unteren Vorschaubereich auswählen. Für Sie habe ich im Bild das Frame hellgrün hervorgehoben.
Mit der Maus können Sie dann im oberen Bereich das Layout anpassen, in dem Sie Rahmen und Scrollbars einblenden oder die Größe des Frame verändern.
Durch einen Klick auf Ok wird das Frameset in die aktuelle Datei eingefügt.
Frame-Assistent ausgabe-Code
highlight- as: html
<frameset rows="100, *">
<frame name="Titel_der_Webseite" src="top.html" scrolling="no" noresize="yes" />
<frameset cols="200, *">
<frame name="Navigation" src="left.html" scrolling="no" noresize="yes" />
<frame name="Textbereich" src="right.html" />
</frameset>
</frameset>
Hinweis:Der Assistent trägt in Zeile 3 den Wert in cols nicht korrekt ein.
CSS-Frame-Code
highlight- as: html
<!DOCTYPE html>
<html><head>
<title>Frame Demo</title>
<meta charset="UTF-8">
<style>
html, body {height: 100%; overflow: hidden; margin: 0;}
#frame-header {width:100%; height:100px; background:#FFFF93; text-align:center;}
#frame-left{width:200px; float: left; height: 95%; background:#C5FF6D; text-align:right;}
#frame-contents{overflow:auto; padding:1em; height:85%;}
</style>
</head><body>
<div id="frame-header">
<h1>Titel der Webseite</h1>
</div>
<div id="frame-left">
<h2>Navigation </h2>
</div>
<div id="frame-contents">
<h3>Textbereich</h3>
</div>
</body></html>
