Zum Inhalt der Seite


FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN Startseite > ~xx502 > Frames > Uebung3

Wie erstelle ich Web Frames?

Feste und Variable Fensterbreiten
Größenverhältnisse
Waagerechte und senkrechte Aufteilung kombinieren
Noch weiter aufteilen
Was, wenn mein Browser keine Frames kann?

Übung 3 - Senkrechte und waagerechte Fenster kombiniert

Wir wollen diesmal mit dem abschließendne Beispiel aus Übung 1 beginnen. Laden Sie bitte die Datei frame.html mit den beiden gleichbreiten Frame-Fenstern in ihren Editor.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

 Mein Beispiel nochmal ansehen


Feste und Variable Fensterbreiten

Wie schon in Übung 1 erwähnt kann man statt der Prozentangaben auch Pixel definieren. Wir wollen im folgenden mit 50 Pixeln statt 50% arbeiten. Das Zeichen * (Stern) kann man anstelle einer konkreten Zahlenangabe für den "Rest des Bildschirms" definieren.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
 <FRAMESET COLS="50,*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Speichern Sie bitte diese Datei als frame3a.html im Arbeitsverzeichnis ab und sehen Sie sich das Ergebnis in Netscape an.
Wie ist die Aufteilung der Fenster jetzt? _______________________

  Mein Beispiel ansehen

An dieser Stelle muß ich einige wichtige Anmerkungen machen. Angenommen sie setzten eine Bildschirmauflösung von 600x800 Bildpunkten (Pixel) voraus und haben links ein Frame-Fenster (kurz Frame) mit 100 Pixeln und rechts einen Frame mit 100 Pixeln definiert. Bei dieser Auflösung würden Sie nun für den mittleren Bereich 600 Pixel eingeben und auf Ihrem Bildschirm sieht alles toll aus. Ich habe aber eine Bildschirmauflösung von 1024x768 Bildpunkten und ein anderer Besucher Ihrere Seite hat 640x480 Bildpunkte eingestellt.
Wie würde Ihre Seite auf diese Besucher wirken?
Richtig, auf meinem Bildschirm ist die Seite ganz an den Rand gerückt und der Bildschirm ist teilweise leer und der andere Betrachter bekommt nur einen Teil der Seite auf den Bildschirm und muß scrollen.
Wenn Sie absolute Pixelangaben machen, z.B. weil in einem Frame ein Bild mit fester Breite dargestellt wird, dann sollten sie immer einen Bereich variabel lassen und die Breite mit * angeben. Auf diese Weise wird bei jeder Bildschirmauflösung eine möglichst gute Aufteilung des Bildschirms erzielt.

In dieser Problematik steckt der Grund für viele Probleme mit Frames. Ein übliches Frame-Layout ist ein schmales Navigationsfenster am linken Rand und ein größeres Hauptfenster wie dieses Beispiel. Definiert man eine Bildschirmaufteilung mit Prozentangaben (wie z.B. <FRAMESET COLS="15%,85%">) wird alles gut aussehen aber mit einer kleineren Auflösung kann das Ergebnis dann etwa so aussehen.

Wir wollen diesem Phänomen noch weiter nachgehen. Wir haben den linken Frame mit einer Breite von 15% definiert, 15% der gesamten Bildschirmbreite! Das bedeutet, daß evtl jeder Betrachter eine andere absolute Aufteilung des Bildschirms sieht.
Eine mögliche Lösung ist für das linke Fenster eine absolute Breite anzugeben und die Breite des rechten Fensters variabel zu lassen. (z.B. <FRAMESET COLS="120,*">). Bingo. Problem gelöst, sagt der Autor.
Anmerkung: Schlechtes HTML wäre z.B. anzugeben, daß diese Seite nur mit einer Bildschirmauflösung von 999x888 Bildpunkten gut aussieht und deshalb jeder sich bitte einen entsprechenden Bildschirm zulegen muß und die angegebene Auflösung einzustellen hat.

Übrigens ist es eine gute Idee die absolute Angabe ein klein wenig größer als nötig anzugeben, damit die Inhalte nicht so reingepreßt wirken. Statt z.B. 100 Pixeln, die minimal benötigt werden etwa 120 oder 125 Pixel angeben.


Größenverhältnisse

Es ist auch möglich Größenverhältnisse bei der Definition der Frames anzugeben.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE> 
</HEAD>
<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
</FRAMESET>
</HTML>

Speichern Sie bitte diese Datei als frame3b.html im Arbeitsverzeichnis ab und sehen Sie sich das Ergebnis in Netscape an.
Und wie ist die Aufteilung der Fenster jetzt?

 Mein Beispiel ansehen

Wir wollen diese Angabe einmal übersetzen:
Teile den Bildschirm in 3 Frames. Der erste Frame ist 50 Pixel breit. Der Rest des Bildschirms teilt sich auf 2 weitere Frames auf, wobei Frame3 doppelt so breit wie Frame2 ist.
lisa.html soll im linken Frame, terri.html im mittleren Frame und kim.html im rechten Frame dargestellt werden.

Wichtig dabei ist zu verstehen, daß bei Frames alles der Reihe im <FRAMESET> Tag (50/lisa.html) dargestellt, der zweite mit der zweiten Größenangabe (*/terri.html)nach zugeordnet. Der erste <FRAME> wird mit der ersten Größenangabe und der dritte mit der dritten Größenangabe (2*/kim.html). Das ist eigentlich logisch, aber trotzdem wichtig um Frames zu verstehen.


Waagerechte und senkrechte Aufteilung kombinieren

Jetzt wollen wir das Fenster kim.html noch einmal aufteilen.
Wir erinnern uns, daß für jede Aufteilung ein <FRAMESET> Tag nötig ist. Wir müssen also den Frame <FRAME SRC="kim.html"> durch ein <FRAMESET> Tag ersetzen.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>
</HTML>

Damit sagen wir dem Browser folgendes:
Teile den Bildschirm in 3 Frames. Der erste Frame ist 50 Pixel breit. Der Rest des Bildschirms teilt sich auf 2 weitere Frames auf, wobei Frame3 doppelt so breit wie Frame2 ist.
lisa.html soll im linken Frame, terri.html im mittleren Frame dargestellt werden. Den rechten Frame wollen wir uns gleich noch genauer ansehen.


Wir wollen den rechten Frame waagerecht in 2 gleichgroße Frames aufteilen.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
  </FRAMESET>
</FRAMESET>
</HTML>

Als nächstes soll kim.html im oberen teil des rechten Frames und tina.html im unteren Teil dargestellt werden:

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>
</HTML>

Jetzt können wir das Ergebnis wieder abspeichern, diesmal als frame3c.html und das Ergebnis in Netscape ansehen.
Beschreiben Sie die Aufteilung: ________________________________

 Mein Beispiel ansehen


Noch weiter aufteilen

Weil das "Fensterln" so viel Spaß macht wollen wir es nochmal probieren und den Frame lisa.html auch noch aufteilen.
Das obere Fenster soll genau 50 Pixel hoch sein, die anderen beiden gleich groß.
Jetzt sieht das neue Projekt so aus:

<HTML>
<HEAD>
 <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>
</HTML>

 Mein Beispiel ansehen

Ich weiß, daß dieses Beispiel nicht mehr so gut aussieht. Es soll nur zeigen, daß man diese Aufteilung auch beliebig weit treiben kann. Eine gute Grundregel ist es zu versuchen mit höchstens 3 Frames auf einer Seite auszukommen.


Was, wenn mein Browser keine Frames kann?

Es ist jetzt an der Zeit auch einmal an alle zu denken, die mit einem Browser im Internet "unterwegs sind", der keine Frames versteht. Die meisten, aber nicht alle Besucher Ihrer Seite werden Frames darstellen können. Wir sollten die kleine Minderhait aber nicht von unseren Seiten ausschließen. Bei unseren bisherigen Beispielen wird ein leerer Bildschirm angezeigt und um dies zu vermeiden müssen wir die Seite noch ergänzen.
Dazu dient der <NOFRAMES> </NOFRAMES> Tag. Zwischen diesen Tags kann normaler HTML-Code geschrieben werden. Entweder werden beim Seitenaufruf die Frames angezeigt oder es wird stattdessen der NOFRAMES-Bereich dargestellt.
Dieser NOFRAMES-Bereich ist nur auf der Seite mit dem <FRAMESET> erforderlich.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Hier sollte die "Frame-Ersatzseite" stehen. Falls ein Besucher einen alten Browser ohne Frame-Funktionalität benutzt, wird der obige Teil übersprungen und dieser Teil wird angezeigt. Frame-fähige Browser ignorieren diesen Teil zwischen den <NOFRAMES> Tags und stellen die Frames dar.
Braucht man diesen Bereich wirklich?
Es wird sehr wenige geben, die noch einen alten Browser benutzen und für diese ist zumindest eine Kurzform der Information mit einigen Links doch wichtig um weiterzukommen.
</BODY>
</NOFRAMES>
</HTML>

Dieses Beispiel bitte als frame3d.html abspeichern. Sollten Sie als Vergleich eine ältere Version von Netscape (v2.x oder früher) zur Hand haben, können sie auch den NOFRAME-Bereich testen.
Was zeigt Ihr Browser an? _________________________

Hinweis: Auch viele Suchmaschinen haben Schwierigkeiten Seiten mit Frames richtig zu indizieren, da hier die Bildschirmdarstellung auf mehrere Dateien aufgeteilt ist. Häufig wird nur die Frame-Beschreibungsseite indiziert.

Nach dieser Übung haben wir schon eine ganze Menge zum Thema Frames gelernt. Gibt's da noch mehr? Ja, da gibt's noch einiges an Erweiterungen in Übung 4.


Zurück zur Übung 2 - Mehrere Fenster
Weiter zur Übung 4 - Ein Bild im Frame
Zur Indexseite