Zurück || Weiter Index Startseite
HTML Einführung: Frames
Frames - Rahmen im Browserfenster

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. Framedefinition
  2. Frame-Sets definieren
  3. Frames mit Inhalt füllen
  4. Ziel-Frame definieren
  5. Das <noframes>-Tag
  6. Schlusswort von Peter Bittner

Allgemeines

Hier, im letzten Kapitel in unserer HTML-Einführung, wollen wir uns mit Frames beschäftigen. Diese sind erst ab Netscape 2.0 und MS Internet Explorer 3.0 verfügbar, doch sind ältere Versionen kaum noch vorhanden, weshalb wir diese Tatsache als vernachlässigbar betrachten wollen. Bedenken Sie aber dennoch, dass andere Browser u.U. nicht in der Lage sind, Frames darzustellen, wenn Sie den Gedanken hegen, HTML-Dokumente für einen weiten Benutzerkreis zu erstellen. Überdenken Sie also, ob Frames wirklich nötig sind und ob Sie damit nicht vielleicht einen wichtigen Teil Ihrer Adressaten von Anfang an ausschließen.

Was sind überhaupt Frames?

Beispiel für Frames Es besteht mit HTML die Möglichkeit, das Browserfenster in mehrere Teile zu unterteilen mit dem Vorteil, dass dann jedes dieser Teilfenster, jeder Frame (engl. für Rahmen), wie ein eigenes Browserfenster behandelt wird. Es kann sich also der Inhalt eines Frames ändern (z.B. durch Klicken auf einen Verweis/Laden eines anderen Dokuments), ohne dass sich die anderen Frames verändern. - Der Vorteil liegt auf der Hand: Man kann beispielsweise eine Navigationsleiste am linken Fensterrand plazieren, die immer sichtbar bleibt, wohin auch immer der Benutzer im rechten Teil des Fensters "surft". - Nachteil: Setzt der Benutzer einen Bookmark (ein Lesezeichen) auf eine angewählte Seite, wird nicht die Seite im Frame gebookmarked, sondern das Dokument, das die Frame-Definition enthält! Oje!

Die Framedefinition

Wenn Sie Frames verwenden wollen, brauchen Sie ein Dokument, das die Frame-Definitionen enthält.
Das sind die Informationen, wie das Browserfenster aufgeteilt wird (Framesets) und welche Dokumente (für den ersten Aufruf einmal) in den Fensterteilen, den Frames, angezeigt werden.

Das Grundgerüst einer HTML-Datei, in der Sie ein Frameset definieren, sieht folgendermaßen aus:

<html>
<head>
 <title>Meine Homepage mit Frames</title>
</head>

<frameset ...>
   <!-- Hier steht die Definition der Frames des Framesets. -->
</frameset>

<body>
  Dieser Text wird angezeigt, wenn der Browser keine Frames kennt
</body>
</html>

Dabei können im angegebenen Frameset weitere Framesets eingetragen werden.

Frame-Sets definieren

Beim Definieren von Framesets bestimmen Sie, wie das Browserfenster aufgeteilt werden soll. Dabei müssen Sie sich das Fenster wie den leeren Rahmen einer Tabelle vorstellen. Damit die Tabelle Gestalt annimmt, müssen Sie zunächst Zeilen (rows) und Spalten (cols) definieren:

<frameset cols="20%,80%">
  <!-- Damit ergeben sich 2 Frames; Inhalt wird hier bestimmt. -->
</frameset>

Mit diesem Frameset erhalten wir eine Aufteilung des Fensters in zwei Spalten: Die linke Spalte ist 20%, die rechte 80% des Fensters breit. - Zweites Beispiel:

<frameset rows="100,*,60">
  <!-- Damit ergeben sich 3 Frames; Inhalt wird hier bestimmt. -->
</frameset>

Dieses Frameset liefert uns eine Aufteilung des Fensters in drei Zeilen: Der oberste Teil ist genau 100 Pixel, der unterste genau 60 Pixel hoch. Der mittlere Teil, mit '*' (Stern) markiert, füllt den Rest des Fensters aus.

Um Spalten und Zeilen für Ihre Framedefinition zu erhalten, können Sie Framesets verschachteln:

<frameset cols="40%,60%">
      <!-- 2 Frames; Inhalt des ersten Frames wird hier bestimmt. -->
  <frameset rows="20%,80%">
      <!-- Noch einmal 2 Frames, deren Inhalt hier bestimmt wird. -->
  </frameset>
</frameset>

Aufteilung in 3 Bereiche In der Abbildung links sehen Sie das Resultat unserer Definition.
In den rechten Teil des ersten Framesets wurde das zweite Frameset eingebracht. Jeder Frame (1, 2 und 3) wird in weiterer Folge ein "normales" HTML-Dokument enthalten.

Klarerweise können Sie jede beliebige Verschachtelung wählen (z.B. eine Aufteilung in vier gleich große Quadrate o.ä.), beachten Sie aber bitte, dass die Übersichtlichkeit für den Anwender gewahrt bleibt!

Frames mit Inhalt füllen

Jetzt stehen die Frames und ihre Aufteilung, allerdings fehlt noch die Zuweisung von Inhalten. Dies geschieht mit Hilfe des <frame>-Tags. Ein Frametag beschreibt, welches Dokument in dem Frame dargestellt wird, benötigt daher auch kein passendes Endetag. Zur Festlegung diverser Eigenschaften des Frames stehen uns wieder Optionen zur Verfügung. Die wichtigsten sind dabei:

Optionen für das <frame>-Tag
Option Bedeutung
 src="Datei"  Datei ist der URL des Dokumentes, das im Frame dargestellt werden soll.
 name="Name"  Gibt dem Frame einen internen Namen, der es dann erlaubt, bei Verweis-Tags eine Option target="Name" anzugeben, um zu bestimmen, in welchen Frame die Daten geladen werden.
 noresize  Verhindert, dass der Anwender die Framegröße mit der Maus verändern kann.
 scrolling=yes|no|auto  Bestimmt, ob der Frame Scrollbars haben soll oder nicht:  yes = immer, no = nie, auto = wenn notwendig (default).
 marginheight=Wert  Gibt den Abstand des Frameinhaltes zum oberen bzw. unteren Framerand in Pixeln an.
 marginwidth=Wert  Gibt den Abstand des Frameinhaltes zum linken bzw. rechten Framerand in Pixeln an.

Mit der Angabe von frameborder="no" im <frameset>-Tag können Sie die Rahmenleiste zwischen den einzelnen Frame-Fenstern ausblenden. - Die Option frameborder gehört zwar zum HTML 4.0 Standard, da die verschiedenen Browser derzeit aber noch unterschiedliche Syntax verwenden, ist zur Kontrolle der Rahmenleiste folgende Syntax anratsam:

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

Darauf reagiert sowohl Netscape als auch MS IE. (Alternativ zu yes/no kann 1 oder 0 notiert werden!)

Ziel-Frame definieren

Die target-Option ermöglicht (wie bereits erwähnt) die Kontrolle, in welchem Fenster bzw. Frame das mit dem angesprochenen Verweis geöffnete Dokument angezeigt werden soll. Dabei kann target in folgenden Tags eingesetzt werden:
  • <a href="URL" target="Ziel">...</a>
  • Im <form>-Tag.
  • Im <area>-Tag innerhalb von Image Maps.
  • Im <base>-Tag. Dieses Tag steht innerhalb von <head>...</head>. Es bestimmt die Voreinstellung für target, wenn dieses innerhalb der oben genannten Tags fehlen sollte.
Soweit, so gut. Wie löst man Frames aber wieder auf? Wie kommt man wieder zurück?
Für diesen Fall und für einige andere gibt es spezielle Targets:

  • _top
  • _parent
  • _blank
  • _self
 - 
 - 
 - 
 -  		löst alle Frames im aktuellen Fenster auf.
bringt das Anzeigefenster in den Zustand vor dem Start des Framesets zurück.
öffnet ein neues Browser-Fenster, in dem dann das Verweisziel angezeigt wird.
lädt das Verweisziel in den aktuellen Frame. (Diese Angabe ist allerdings nur notwendig, wenn mit <base> ein fremdes Target definiert wurde!)

Ausgaben ohne Frames - Das <noframes>-Tag

Diese Überschrift erscheint auf dem ersten Blick vielleicht etwas seltsam, wo wir uns doch hier mit Frames beschäftigen. Es geht um folgendes: Das Tagpaar <noframes>...</noframes> bietet uns die Möglichkeit, für Anwender, deren Browser keine Frames unterstützen, die HTML-Dokumente, die normalerweise innerhalb der Frames dargestellt werden, so zu gestalten, dass solche Anwender dennoch alle Daten aufrufen und wie vorgesehen navigieren können. Dazu definiert man eben die sogenannten No-Frames-Bereiche. Der Inhalt dieser Bereiche wird nur dann interpretiert, wenn die Datei nicht innerhalb eines Framesets angezeigt wird. - Ein kurzes Beispiel:

Das ist die Datei, die das Frameset definiert:

<html>
<head>
</head>

<frameset cols="40%,60%">
 <frame src="verweise.html" name="Verweise">
 <frame src="titel.html" name="Daten">
</frameset>

<body>
Ihr Browser unterst&uuml;tzt keine Frames.<p>
Bitte rufen Sie die <a href="titel.html">Titelseite</a> auf!
</body>
</html>

Der folgende Code stellt die Datei titel.html dar. Die No-Frames-Section definiert hier die Verweise, die dem Anwender sonst im anderen Frame mit verweise.html zur Verfügung stünden:

<html>
<head>
</head>
<body>

<h1>Willkommen auf meiner Homepage!</h1>

<noframes>
 <a href="datei1.htm">Verweis zu Datei 1</a> |
 <a href="datei2.htm">Verweis zu Datei 2</a> |
 <a href="datei3.htm">Verweis zu Datei 3</a>
 <hr size=1 noshade><p>
</noframes>

 ... Text der Homepage, Daten, Bilder usw. ...

</body>
</html>

Zusammenfassung und Beispiel

Zu allem Überfluss habe ich für Sie auch noch im letzten Kapitel dieser HTML-Einführung ein Beispiel vorbereitet. Der folgende Code liefert uns eine Frame-Definition, die eine Aufteilung des Browserfensters in drei Frames bewirkt:

<html>
<head>
 <title>Beispiel für eine Homepage mit Frames</title>
</head>

<frameset cols="20%,*">
 <frame src="beispiel9links.html" name="Links">
 <frameset rows="*,80">
   <frame src="welcome.html" name="Daten">
   <frame src="beispiel9unten.html" name="Unten">
 </frameset>
</frameset>

<body>

<h2>Problem mit Frames</h2>
Ihr Web-Browser kann keine Frames darstellen oder es ist ein
Browser, der es erlaubt, das Anzeigen von Frames auszuschalten,
und Sie haben die Anzeige von Frames ausgeschaltet.
<p>
<a href="frames.html#Zusammmenfassung">Zur&uuml;ck zum
 Beispiel</a>

</body>
</html>

Lassen Sie sich also überraschen, wie unsere erste "Frame-Homepage" aussieht:

Bitte schauen Sie sich den Quellcode der beiden eingebundenen Dokumente beispiel9links.html und beispiel9unten.html mit einem Textbetrachter oder Editor selbst an!

Schlusswort

Na also, weder einfacher HTML-Text, noch Grafiken, Listen, Tabellen und Formulare und sogar Frames sind jetzt noch ein Buch mit 7 Siegeln für Sie! - Und selbst, wenn Sie sich einfach nur unsicher in der Materie oder gar nur in der Syntax einzelner Tags fühlen, können Sie diese Einführung ja immer als Nachschlagewerk benutzen. Der Index scheint mir dafür ja wie geschaffen.

Ja, das war's. Der HTML-Kurs findet hier sein Ende. Ich hoffe, es hat Ihnen gefallen und vielleicht war dieser Kurs ja eben der Grundstein zu einer tollen Homepage wenn schon nicht sogar zu einer erfolgreichen Web-Designer Karriere!

Bei Fragen können Sie sich gerne per e-mail an mich wenden. Schauen Sie auch beizeiten auf meiner Homepage vorbei, vielleicht gibt's dort schon eine aktuellere Version dieser Einführung!

Viel Spaß und Erfolg mit HTML weiterhin wünscht Ihnen Ihr

Peter Bittner

 

Zur Startseite <||> Zum Index <||> Weiterführende Literatur <||> Empfehlenswerte Software

 

Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner