Handbuch Webdesign: Ebenen und Frames

Diese Kapitel stellt verschiedene Methoden zum Aufteilen Webseite vor: Frames, Ebenen und CSS media-queries.

Frames

Sinvolles Beispiel: [SELFHTML Suchleiste] WARNUNG: Frames machen Probleme: Ohne Frames hat jede Webseite eine eindeutige URL. Mit Frames gilt das nicht mehr. Daraus folgen unvermeidbare Probleme: In der Suchmaschine wird immer nur ein einzelner Frame gefunden, nicht das "Gesamtkunstwerk"

Von anderen Websites können keine gezielten Links mehr gesetzt werden, nur Links auf die "Einstiegskonstellation" des Framesets, oder auf einzelne Frames
Beim Drucken muss man extra angeben welcher Frame / ob alle Frames gedruckt werden sollen. Das misslingt meistens.

Zusätzlich machen Frames noch Probleme, die durch geeignete Programmierung vermeidbar sind, aber trotzdem oft auftreten:

Innerhalb von Frames ist es schwieriger einen Links richtig zu setzen
Mit Frames kann man leicht den Bildschirmplatz verschwenden
Man kann die Bildlaufleisten abschalten, auch wenn sie zum benützen der Seite notwendig wären

Was im Browser wie "eine" Webseite aussieht, kann aus mehreren Frames, und damit aus mehreren HTML-Datei bestehen. Die wichtigste Datei enthält neue HTML-Tags: <frameset> und <frame>. Alle anderen Dateien enthalten ganz normales HTML wie Sie es schon kennen.

Navi
ga
tion

Inhalt Inhalt Inhalt

 <frameset cols="60,*"> 
 <frame name="linksframe" src="links.html"> 
 <frame name="inhaltframe" src="inhalt.html"> 
 </frameset>

Damit die Seite funktioniert müssen 3 Dateien vorhanden sein: index.html, links.html, inhalt.html So könnte die Datei links.html aussehen:

<p><b>Navigation<b></p>
<p>
<a href="inhalt.html" target="inhaltframe">Home</a><br>
<a  href="zwei.html" target="inhaltframe">Seite 2</a><br>
<a href="drei.html" target="inhaltframe">Seite 3</a><br>
<a href="vier.html" target="inhaltframe">Seite 4</a><br>
</p>

Die Dateien inhalt.html, zwei.html, drei.html,und vier.html sind ganz normale html-Dokumente.

Ebenen

Ebenen werden mit dem <div>-Tag erzeugt. Sie können absolut positioniert werden, und sind unabhängig vom "normalen" Inhalt der Webseite. Sie werden manchmal für Layout, und oft für Effekte verwendet.

Sie kennen den HTML-Tag <div> schon als allgemeinen Container ohne eigene Bedeutung, den man verwenden kann um einen Style anzuwenden:

<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="border: 1px black solid; 
               background-color: yellow ">
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<p>drei Absatz Text</p>
</div>

Mit der Stylesheet-Anweisung position: absolute; wird aus dem Container-Tag eine Ebene. Der Inhalt der Ebene verhält sich, als ob er auf einer Folie über der normalen Webseite "schwebt".

<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="position:absolute; 
        left:43px; top:9px; width:104px; height:173px; 
        z-index:1; background-color:yellow;
        border: 1px black solid"> 
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<p>drei Absatz Text</p>
</div>

ACHTUNG: Im Gegensatz zu Tabellen-Zellen reagieren Ebenen nicht auf die Größe ihres Inhalts. Wenn der Text zu groß ist &quote;läuft die Ebene über&quote;, wie in Abbildung 92 gezeigt.

Datei:Handbuch Webdesign-Ebenen 2.jpg

Abbildung 92: Absolut positionierte Ebene bei verschiedenen Schriftgrößen

Tipps für die Verwendung von Fixen Ebenen

Fix positionierte Ebenen sind nur beschränkt für das Layout der Seite geeignet. Wie oben beschreiben reagiert eine Ebene nicht darauf, dass der Inhalt zu groß wird. Hier sind die in Kapitel 3.4 beschriebenen Methoden mit CSS zum empfehlen, die immer garantieren, dass der gesamte Inhalt lesbar bleibt Wenn man doch absolut positionierte Ebenen für das Layout verwenden will, muss man den gesamten Inhalt der Seite in Ebenen unterbringen, sonst hat man folgendes Problem:

Die Ebenen sind immer absolut, oder besser gesagt: relativ zur linken oberen Ecke des Browser-Fensters positioniert
Der "normale" Inhalt der Webseite kann auch anders positioniert sein, z.B. zentriert im Browser-Fenster

Bei einer Änderung der Fenstergröße oder der Schriftgröße "verrutschen" also normaler Inhalt und Ebenen gegeneinander.

Datei:Handbuch Webdesign-Ebenen 6.jpg

Abbildung 94a: Absolut positionierte Ebene und zentrierte Überschrift

Layout im Vergleich

To-Do:

Verschiedene Techniken gegenüberstellen: absolut positioniert vs. frames vs. (anderes) layout mit css

Quellen