Optionen und weiterführende Links


In der Datenbank befinden sich derzeit 477 Specials. Alle Specials anzeigen...

Immer schön im Rahmen

Immer schön im Rahmen

Manchmal steht Ihr als Webdesigner vor einem Dilemma: Einerseits soll ein längerer Text, mehrere Fotos oder etwas ähnlich umfangreiches auf Eure Webseite. Also muß der Benutzer scrollen. Andererseits soll das Menu immer sicht- und damit erreichbar bleiben. Was nun? Für solche Fälle gibt es Frames. Das sind abgegrenzte Bereiche auf einer Seite, in denen jeweils eine eigene HTML-Datei angezeigt wird.

Dazu legt Ihr eine etwas abgewandelte HTML-Datei an. Die enthält anstelle des normalen Bodys ein Frameset 

<html>

<head>
  <title>Das Frameset</title>

</head>

<frameset cols="10%,*">
  <frame name="navigation" src="nav.html">
  <frame name="haupt" src="content.html">

</frameset>

</html>

Wenn Ihr diese Datei im Browser aufruft, wird das Fenster in zwei Teile aufgeteilt. In einem davon wird 'nav.html' angezeigt, im anderen 'content.html'. Anmerkung: Für eine solche Frameset-Datei ist der Dokumententyp 'frameset' gedacht, der bereits zu Beginn erwähnt wurde.

Wie Ihr seht, tritt an die Stelle des gewohnten body-Tags ein frameset-Tag. Darin steht für jeden Abschnitt (Frame) ein frame-Tag. Diesem frame-Tag gebt Ihr per src-Attribut mit, welche URL in dem Frame angezeigt werden soll. Mit dem Attribut name könnt Ihr dem Framen einen Namen geben. Diesen Namen könnt Ihr beispielsweise in das target-Attribut eines a-Tags einsetzen, um das gelinkte Dokument im Frame mit diesem Namen zu öffnen 

<a href="http://ein.server.test" target="derFrame">

Dieser Link öffnet 'http://ein.server.test' nicht in dem Frame, in dem der Link steht, sondern in dem Frame mit name="derFrame". Mit target="_top" öffnet sich der Link auf der obersten Ebene; das verlinkte Dokument ersetzt also das komplette Frameset. Mit target="_parent" ersetzt das verlinkte Dokument das Frameset, zu dem der Frame gehört, in dem der Link steht. Beim obigen Beispiel macht _parent keinen Unterschied zu _top, das ändert sich aber bei mehreren verschachtelten Framesets (die weiter unten beschrieben werden).

Normalerweise kann der Benutzer die Abgrenzungen zwischen den Frames mit der Maus verschieben. Wenn Ihr das nicht erlauben wollt, könnt Ihr einem frame-Tag das boolsche Attribut noresize mitgeben.Außerdem legt das Attribut scrolling fest, ob der Frame Scrollbalken haben soll (scrolling="yes") oder nicht (scrolling="no"). Der Normalfall entspricht scrolling="auto". Damit wird nur dann ein Scrollbalken angezeigt, wenn es auch etwas zu scrollen gibt.

Wie die Frames auf der Seite angeordnet werden, legen zwei Attribute im frameset-Tag fest. Mit dem cols-Attribut ordnet Ihr die Frames nebeneinander an und zählt die Maße der Frames auf 

<frameset cols="100,50,*">
  <!-- Links ein Frame mit 100 Pixeln Breite,
  daneben einer mit 50 Pixeln Breite,
  der dritte Frame nimmt den Rest (*) ein -->
</frameset>

<frameset cols="10%, *, 10%">
  <!-- Links und rechts je ein Frame mit 10% Breite,
  der Frame dazwischen nimmt den Rest (*) ein -->
</frameset>

Die Breitenangaben können absolut (in Pixel) sein oder relativ (in Prozent). Ein Frame sollte immer die Breitenangabe '*' haben; dieser Frame nimmt den noch zur Verfügung stehenden Rest ein. Wenn Ihr Frames nicht nebeneinander, sondern untereinander anordnen wollt, könnt Ihr nach demselben Prinzip anstelle von cols das rows-Attribut benutzen.

Ihr könnt auch Framesets verschachteln. Dazu gebt ihr einfach innerhalb des frameset-Tags neben den normalen frame-Tags ein oder mehrere weitere frameset-Tags an, die ihrerseits frame-Tags enthalten. Das kann beispielsweise so aussehen

Beispiel für verschachtelte Framesets 
<frameset rows="20%, *">
  <frame name="Kopfzeile">
  <frameset cols="20%, *" name="inner">
    <frame name="Navigation">

    <frame name="Inhalt">
  </frameset>
</frameset>

Die beiden Frames 'Navigation' und 'Inhalt' werden auf dem «Umweg» über den Namen des verschachtelten Framesets angesprochen, also als 'inner.Navigation' und 'inner.Inhalt'.

Meist wollt Ihr keinen Rand zwischen den Frames auf der Seite. Um die Standard-3D-Ränder loszuwerden, reicht das Attribut frameborder="0" im frameset-Tag. Dann kann es aber passieren, daß insbesondere der Internet Explorer zwar keine 3D-Ränder zeichnet, aber zwischen den Frames einfach eine weiße Lücke läßt. Um das zu vermeiden, könnt Ihr diese (nicht ganz standardkonforme) Variante benutzen 

<frameset frameborder="0" framespacing="0" border="0">...</frameset>

Heute können fast alle Browser mit Frames umgehen. Trotzdem könnt Ihr in Eurem Frameset Inhalt angeben, der angezeigt werden soll, falls der Browser keine Frames beherrscht. Dazu ergänzt Ihr innerhalb des frameset-Tags einen noframes-Tag ergänzen. Darin kann beispielsweise ein Hinweis stehen, daß Eure Seite Frames verwendet, und ein Verweis auf eine Frame-lose Alternative 

<frameset cols="10%,*">
  
  <!-- Hier die Frame-Definitionen -->
  
  <noframes>
    <p>Diese Seite basiert auf Frames. Leider unterstützt 
    Ihr Browser offenbar keine Frames; daher kann die Seite 
    nicht angezeigt werden. Bitte verwenden Sie unsere 
    <a href="start2.html">alternative Startseite</a>.</p>

  </noframes>

</frameset>


Special vom: 16.01.2003
Autor dieses Specials: Henning Kockerbeck
Die weiteren Unterseiten dieses Specials:
Die reine Lehre - HTML
Stilvoll - CSS
Kleiner Grundkurs Programmieren
Jetzt wird's dynamisch - JavaScript
Die andere Seite der Dynamik - PHP
Neue Gefilde - XML
Weiterführende Links
Zurück zur Hauptseite des Specials


?>