Frames


Hinweis: Für eine vertiefende Beschäftigung mit dem Einsatz von Frames zum Gestalten von Webseiten empfehle ich das Studium der hervorragenden Online-Dokumentation SelfHTML von Stefan Münz!

Allgemeines zu Frames

Frames werden dazu verwendet den Bildschirm in verschiedene, frei definierbare Bereiche aufzuteilen. Jeder der Bereiche kann dann verschiedene Inhalte enthalten. Im nebenstehend abgebildeten Beispiel wird der Bildschirmbereich in drei Frames aufgeteilt. Der obige Rahmen enthält hier ein Logo und eine allgemeine Navigationsleiste. Der linke Rahmen enthält die Navigationsleiste der Webseite und der rechte Rahmen enthält den eigentlichen Inhalt.

Beispiel für Webseite mit Frames

Es soll allerdings nicht verschwiegen werden, dass der Einsatz von Frames aus verschiedenen Gründen problematisch sein kann:

[Seitenanfang]

Ein Beispiel

Wir wollen gemeinsam das nebenstehende Beispiel erstellen. Der Bildschirm ist in drei Bereiche aufgeteilt. Der linke Frame entält die Links zum Navigieren durch die einzelnen Seiten des Projekts, die jeweils im rechten unteren Fenster dargestellt werden. Im rechten oberen Bereich soll Platz für allgemeine Angaben wie ein Logo oder ähnliches sein. Beispielprojekt

Dazu müssen wir zunächst auf der Startseite unseres Projekts ein so genanntes Frameset definieren, das die Aufteilung des Bildschirms in die gewünschten Bereiche beschreibt. Die Angabe der Definition des Framesets erfolgt nach dem abschließenden head-Tag und vor dem body-Tag.

Definition des Framesets Ergebnis des Framesets

Das Fenster wird zunächst mit cols="30%,70%" in zwei Spalten unterteilt, wobei die linke Spalte 30 % und die rechte Spalte 70 % der verfügbaren Bildschirmbreite einnimmt. Das Frame-Fenster auf der linken Seite soll die Navigationsleiste aufnehmen, während das rechte Frame-Fenster durch ein weiteres untergeordnetes Frameset noch einmal unterteilt wird. Mit der Angabe rows="20%,80%" erfolgt eine Aufteilung in zwei übereinander angeordnete Fenster, wobei das obere 20 % und das untere 80 % der zur Verfügung stehenden Fläche einnimmt.

Wie unterstützt uns der HTML-Editor Phase5 beim Anlegen der Frames?

1. Schritt: Menü auswählen 2. Schritt: Frameset auswählen und einfügen
Menü wählen Frameset wählen und einfügen

Im dritten und letzten Schritt müssen die noch fehlenden Webseiten erstellt werden:

[Seitenanfang]

Aufgaben

  1. Erzeugen Sie einen Frame-Set, der das Browserfenster in drei horizontale Bereiche aufteilt! Der mittlere Frame soll 55%, der untere 15% des Anzeigebereiches verwenden. Benennen Sie die Startseite des Projekts mit dem Dateinamen index.html! Dieser Name hat sich für die Startseite eines Webprojektes eingebürgert. Erstellen Sie anschließend für die einzelnen Frames einen Beispieltext und wählen Sie geeignete Bezeichnungen für die drei HTML-Dateien!
  2. Wie kann man die Größe der Frames auch während der Darstellung im Browserfenster verändern? Sollte man diese Möglichkeit dem Betrachter zur Verfügung stellen? Begründen Sie Ihre Entscheidung!
  3. Was passiert mit den verschiedenen Frames, wenn Sie das Browserfenster vergrößern oder verkleinern? Beschreiben Sie Ihre Beobachtungen!
  4. Versuchen Sie am Beispiel verschiedener WebSites im Internet die am häufigsten verwendeten Aufteilungen zu ermitteln! Wo werden die Verweise dargestellt und wo die Inhalte? Skizzieren Sie die verschiedenen Aufteilungen auf dem Papier!
[Seitenanfang]

Einige Eigenschaften von Frames

Definieren der Rahmendicke

Die Eigenschaft border innerhalb des Frameset-Tags legt die Darstellung der Rahmen fest. Mit border="0" werden beispielsweise unsichtbare Fensterrahmen erzeugt. Wird ein anderer Zahlenwert als 0 angegeben, so bewirkt dies eine Darstellung der Rahmen mit der angegebenen Rahmendicke in Pixeln.

Aufgabe: Öffnen Sie die Startseite unseres Beispielprojektes und sorgen Sie dafür, dass keine Rahmenlinien mehr angezeigt werden!

[Seitenanfang]
Anzeigen von Bildlaufleisten (Scrollbars)

Eine Größenveränderung des Browserfenster kann automatisch eine Anzeige von Bildlaufleisten (so genannten Scrollbars) hervorrufen, wenn der Fensterinhalt nicht mehr vollständig angezeigt werden kann. Mit Hilfe der Bildlaufleiste kann sich der Betrachter der Webseite den Inhalt trotzdem noch anzeigen lassen.

Ob solche Bildlaufleisten angezeigt werden oder nicht liegt ganz im Ermessen des Autors der Webseite. Er hat die Möglichkeit, für jeden einzelnen Frame die Darstellung von Scrollbars zuzulassen oder zu unterbinden. Soll eine Scrollbar angezeigt werden, so muss die Eigenschaft scrolling="yes" in der Definition des entsprechenden Frames hinzugefügt werden. Dementsprechend bewirkt scrolling="no" ein Unterbinden der Anzeige von Scrollbars.

Aufgabe: Bearbeiten Sie die Definition des Frame-Sets unseres Beispielprojekts so, dass nur für den linken Frame (navi) und den unteren rechten Frame (daten) Scrollbars angezeigt werden! Der Kopfteil der Webseite im rechten oberen Frame soll keine Scrollbars anzeigen!


zuletzt geändert am:
Eine Seite von Mirko Hans