Handbuch Webdesign: Ebenen und Frames

Aus Wikibooks

[Bearbeiten] Ebenen und Frames

Handbuch Webdesign Ebenen und Frames

[Bearbeiten] Einleitung

Diese Kapitel stellt verschiedene Methoden zum Layout einer Webseite vor: Ebenen haben wir schon im Kapitel 3: Layout mit CSS behandelt, hier werden noch einmal die absolut positionierten Ebenen betrachtet. Im zweiten Teil werden Frames behandelt, die den Browser in mehrere Unter-Fenster zerlegen. Diese Technik ist umstritten, als Webdesign-Profi müssen Sie aber auf jeden Fall damit umgehen können.

[Bearbeiten] 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. Mit Dreamweaver sind sie wesentlich praktischer zu erstellen als im HTML-Code.

[Bearbeiten] Ebenen in HTML

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.

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

[Bearbeiten] Ebenen in Dreamweaver

Ebenen kann man in Dreamweaver ganz einfach mit dem entsprechenden Werkzeug zeichnen. Abbildung 93 zeigt die Darstellung von Ebenen in Dreamweaver. Die Position des HTML-Tags <div> in der Seite durch ein gelbes Symbol das den Buchstaben C enthält dargestellt, die Ebene selbst wird an der definierten Position durch ein Rechteck dargestellt. Das gelbe [C] kann man in der Seite beliebig verschieben, es ist bei der Darstellung im Browser unsichtbar. Die Ebene kann man an dem Rechteck in der linken oberen Ecke nehmen und verschieben.

Die Attribute des <div>-Tags können mit dem Eigenschaften-Fenster verändert werden.

Eigenschaften der Ebene:

1. Name: wie immer ganz links am Eigenschaftsfenster
2. Position und Grösse: nicht hier eintippen, sondern die Ebene mit der Maus positionieren
3. Z-Index: gibt an welche Ebene "über" welcher Ebene liegt
4. Sichtbarkeit: eine Ebene kann versteckt oder sichtbar sein.
5. Hintergrundfarbe + Hintergrundbild
6. Überlauf: soll eine Scrollbar erscheinen wenn der Inhalt zu groß für die Ebene ist?

[Bearbeiten] 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 unter­bringen, 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.

Abbildung 94a: Absolut positionierte Ebene und zentrierte Überschrift

[Bearbeiten] 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.

 <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.

[Bearbeiten] Frames in Dreamweaver

Achtung: es ist sehr einfach in Dreamweaver mit ein paar Mausklicks eine komplizierte Webseite mit 100 Frames zu erzeugen. Am Ende hat man keine Ahnung wie die beteiligten Dateien heißen. Das ist schlecht! Zuerst denken + planen, dann erst Frames anlegen!

Um im Dreamweaver mit Frame zu arbeiten müssen Sie als erstes die Anzeige des Frame-Rahmens aktivieren: Anzeige ⇒ Frame-Rahmen. Damit wird im Dreamweaver um jeden Frame ein zusätzlicher Rahmen angezeigt, mit dem Sie diesen Frame dan manipulieren können.

Frame erzeugen: Bei gedrückter ALT-Taste den Frame-Rahmen ins Dokument ziehen Frame auswählen: Bei gedückter ALT-Taste den Framerahmen anklicken.

Das Attribut src des Frames ("Qu." wie "Quelle") gibt an, welche HTML-Datei als erstes in diesen Frame geladen wird. Mit Links können dann aber andere HTML-Seiten geladen werden.

Im Dreamweaver können Sie mit Alt-Klick oder mit dem Tag-Selector jeden Frame und jedes Frameset auswählen und mit dem Eigenschaftesfenster manipulieren.

[Bearbeiten] Layout im Vergleich

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

[Bearbeiten] Quellen