Exkurs Frames

Frames sind Out. Verpönt. Veraltet. Warum ich sie trotzdem vorstelle? Weil es sie gibt und sie u.U. doch interessante Möglichkeiten bieten. Allerdings sollte man beim Einsatz von Frames genau wissen, was man tut. Beschäftigt euch daher ernsthaft erst dann damit, wenn ihr einige Erfahrung mit html gesammelt habt.

Aber was ist überhaupt ein Frame?

Der Begriff Frame kommt (woher sonst?) aus dem englischen und bedeutet Rahmen. Dadurch wird das Browserfenster in mehrere Bereiche aufgeteilt, sodass gleichzeitig mehrere html-Seiten gleichzeitig angezeigt werden. Dabei kann die Seite so gestaltet werden, dass man gar nicht erkennen kann, dass es sich um eine aus Frames erstellte Seite handelt. OK, der Profi erkennt es aus z.B. dem Verhalten der Seite, der "normale" Besucher würde aber nichts bemerken.

So ein Frameaufbau (Frameset) könnte z.B. folgendermaßen aussehen:

html Lehrgang Frames

Datei 1 enthält die Definition der Frames, das Frameset.

html Lehrgang Frames

Datei 2 enthält den Inhalt des oberen Frames

html Lehrgang Frames

Datei 3 enthält den Inhalt des unteren Frames

Wir benötigen also Anzahl Frames + 1 = in diesem Fall 3 Dateien.

Schauen wir uns nun das Ergebnis an, indem wir "frames.html" laden.

html Lehrgang Frames

Wir haben jetzt zwei Bereiche, die waagerecht geteilt sind.

Die Größe der Framefenster können wir prozentual angeben oder in Pixel. Da wir jedoch nicht wissen, wie groß das Browserfenster des Anwenders ist, geben wir dann nur ein Fenster in Pixel an, das 2. Fenster mit einem *. So wird diesem Fenster der restliche Bereich zugewiesen. Genauso verfahren wir dann bei 3,4 oder wenn erforderlich noch mehr Frames: rows="200,100,*,150"

Was wir bisher mit waagerechter Teilung gemacht haben, können wir auch mit senkrechter Teilung machen.

html Lehrgang Frames

Jetzt sollten wir zwei Spalten sehen:

html Lehrgang Frames

Bei der Größenangabe verfahren wir wie bei "rows"

Wir erweitern nun unser Frameset um einen weiteren Frame und legen noch eine Dritte Datei "teil3.html" an.

html Lehrgang Frames

Das Ergebnis ist, wie nicht anders zu erwarten, nun ein dreispaltiges Layout.

Übrigens: Falls ihr es noch nicht bemerkt haben solltet, wir können die Größe der Framefenster verändern, indem wir den Mauszeiger auf einen Rahmen zwischen den Frames positionieren, die linke Maustaste drücken und durch Ziehen die gewüschte Größe einstellen. Eine u.U. fÜr den Benutzer komfortable Angelegenheit, da er die Framefenster auf seine persönlichen Bedürfnisse anpassen kann.

html Lehrgang Frames

Nun testen wir das Gleiche noch mit drei waagerechten Frames:

html Lehrgang Frames

Und siehe da, auch das funktioniert perfekt.

html Lehrgang Frames

Zu guter Letzt wollen wir noch ein Frameset basteln, das aus verschachtelten Frames besteht. Doch schauen wir uns zunächst den Quelltext an:

html Lehrgang Frames

In Zeile 7 definieren wir zunächst ein Frameset mit zwei waagerechten Frames. Danach müssten die Frame-Angaben erfolgen, doch nach der ersten Angabe erstellen wir ein weiteres Frameset (Zeile 9) aus zwei Spalten, auf das dann die Angaben für die beiden restlichen Frames folgen. Es entsteht folgendes interessantes Ergebnis:

html Lehrgang Frames

Wir haben nun einen Kopfbereich, darunter zwei Spalten, von denen die linke Spalte z.B. die Navigation aufnehmen kann. Mit diesem Layout wurden und werden die wahrscheinlich meisten Websites gebaut.

Es besteht die Möglichkeit, die Bildlaufleisten zu erzwingen bzw. zu verhindern, und das explizit für jeden Frame. Testen wir auch dies einmal:

html Lehrgang Frames

Zum Testen verändern wir auch den Quelltext in der Datei "teil1.html".

html Lehrgang Frames

Ebenso in "teil2.html"

html Lehrgang Frames

und in "teil3.html"

html Lehrgang Frames

Wir erhalten folgendes Ergebnis:

html Lehrgang Frames

(Je nach Auflösung Ihres Browsers kann das Ergebnis natürlich von dem meinen abweichen. Eventuell müssen Sie noch ein paar Zeilen einfügen.)

  • Der Text im Kopfbereich ist abgeschnitten. Scrollen ist nicht möglich. Der Benutzer kann zwar die Framegröße verändern, aber chic ist das nicht!
  • In der linken Spalte ist der oberste Absatz unter der Überschrift umgebrochen, da ja darunter noch genug Platz zu Verfügung steht. Der Text am unteren Ende fehlt jedoch wieder, auch hier ist Scrollen nicht möglich.
  • Der Text in der unteren Spalte fehlt ebenfalls, aber hier kann gescrollt werden.

Die Variante des Erzwingen oder Abschalten der Scrollbar ist sicher interessant, aber mit Vorsicht zu genießen, da wir nicht wissen, die groß das Browserfenster des Benutzers ist.

Mindestabstände zwischen Framerand und Inhalt

Mit den Attributen "marginwidth" und "marginheight" können wir den Abstand zwischen Fensterrand und -inhalt definieren.

html Lehrgang Frames

Der Frameinhalt ist nun nicht mehr direkt am Rand, sondern etwas eingerückt.

html Lehrgang Frames

Wenn wir z.B. ein Logo in einen Frame anzeigen lassen möchten, so können wir dies mit den Attributen dieses pixelgenau positionieren.

Mit "noresize" besteht die Möglichkeit, die Größenveränderung von Frames zu unterbinden.

html Lehrgang Frames

Der Kopfbereich ist nun verankert. Interessant ist dies bei Einfügen von Logos.

html Lehrgang Frames

Die Frameborder lassen sich auch ausblenden. Dies wollen wir einmal mit dem waagrechten Frameborder machen.

html Lehrgang Frames

Nun ist der Frameborder verschwunden:

html Lehrgang Frames

Ebenso ist eine farbliche Gestaltung der Frameborder möglich.

html Lehrgang Frames

Nun erstrahlt der Frameborder in "herrlichem" pink:

html Lehrgang Frames

Verweise in Frames

Zu guter Letzt kommen wir zu den Verweisen in Framesets, denn schließlich wollen wir ja auch in mit Frames erstellten Sites auf andere Seiten navigieren können.

In diesem Beispiel verwenden wir unser dreiteiliges Frameset mit dem Kopf und den zwei darunterliegenden Spalten. In die linke Spalte integrieren wir eine Navigation.

In der Datei "frames.html" habe ich u.a. meinen eigenen Fehller korrigiert und jedem Frame einen eindeutigen Namen zugewiesen: "oben" für den Kopf, "navi" für den Navigationsbreich im linken Frame und "content" für den Inhaltsbereich der rechten Spalte.

html Lehrgang Frames

In "teil2.html", dem Navigationsbereich, habe ich die Hyperrefs hinzugefügt und die Hintergrundfarbe gändert. Wer möchte, kann dies ebenfalls machen, ist aber nicht unbedingt erforderlich. Die Verweise sind nur etwas besser zu lesen. (Bald könnt ihr auch erfahren, wie ihr die Farben von Verweisen ändern könnt, wenn ihr den Lehrgang "css" besucht.)

html Lehrgang Frames

Die Ausgabe beim Aufrufen der Datei "frames.html" sieht nun folgendermaßen aus:

html Lehrgang Frames

Ihr könnt nun wunderschön zwischen den einzelnen Seiten navigieren. Und wie ihr seht, so kann man auch externe Seiten einbinden, was ich mal mit der Lehrgangs-Seite angedeutet habe.

html Lehrgang Frames

So, das soll es zum Exkurs Fames gewesen sein. Ich hoffe, dass ihr auch hier einiges lernen konntet. Nun aber zurück zum Hauptlehrgang.



« zurück