|
Multimediakurs Leinfelder: Inhalt/A: Einsteiger/Modul 3 "Frames und iFrames"/Modul 3.1.1 "Frames-Basics" |
| (© copyright) Letzte Änderungen: |
Als Vorwissen für diesen Modul sollten Sie mit den vorhergehenden Modulen vertraut sein und erste Webseiten-Versuche hinter sich haben:
- Modul 1 macht Sie mit html-tags, links, Bildeinbau und Composer, dem html-Editor von Netscape vertraut
- Modul 2 behandelt u.a. http und ftp-Protokoll, URLs und Pfade, Bildformate und Bildbearbeitung
Modul 3: Frames und iFrames: Inhalt
Modul 3.1 Crashlektion zur Grundsyntax von Frames und damit assoziierter Attribute
3.1.1 Frames-Basics
3.1.2 Navigation und Links mit Frameseiten
3.1.3 Verlassen von Frames, neue Fenster
3.1.4 weitere Frameset und Frame-Attribute, Frames mit Composer-Unterstützung?
Modul 3.2 Beispiele für Frames zum Ausprobieren und Ändern
Modul 3.3 erweiterte Möglichkeiten mit inline-Frames (iframes)
Kursanlagen zu diesem Modul
Anlage 13: Immer Frames, nie Frames: Wie vermeide ich, dass Seiten außerhalb ihrer Framesets aufgerufen werden, bzw. wie verhindere ich den Aufruf von Seiten in Framesets.
Anlage 13b: Troubleshooting zu "Immer-mit-Frames" und Vermeidung von Webnapping
Anlage 13c:Force-Frame nur benutzerdefiniert aufrufen
1. von 4 Seiten: Definition von Frames
Aus eigener Websurfer-Erfahrung bzw. aus unserem Kursmodul 1.2 (Seitenkategorien) haben Sie bereits Frames kennengelernt (auch unsere Kurswebsite basiert ja auf Frames)
Hinweis: sollten Sie dieses Dokument isoliert, d.h. nicht in einem Frameset eingebaut, aufgerufen haben, etwa aufgrund eines Suchergebnisses mit einer Suchmaschine, klicken Sie auf den Link am Top dieser Seite und gehen dann wieder zu Modul 2.5. Der isolierte Aufruf von Seiten außerhalb des zugehörigen Framesets ist übrigens eines der Hauptprobleme von Frames. Wie man dies vermeiden kann, erfahren Sie in Kursmodul 10 (Anlagen): Anlage 13)
Frames bringen also mehrere html-Seiten in einer Browseransicht (sog. Frameset) zusammen. In unserer Kurswebsite können Sie z.B. diese Seite scrollen und das Inhaltsverzeichnis links bleibt davon unberührt. Umgekehrt funktioniert es genauso. Das Nachfolgende soll dies veranschaulichen.
Im obigen Beispiel werden also drei html-Dokumente (die Ihrerseits natürlich Bilder und Links enhalten dürfen) zu einem Browserfenster mit drei Frame-Bereichen zusammengefügt. Insgesamt müssen wir damit für obiges Beispiel vier html-Dateien erstellen:
Wir haben damit die Aufteilung des Browserfensters in drei Frames definiert, welches man durch die Erstellung von zwei Framesets erreichen kann (Frameset 1: Aufspaltung in zwei Reihen, darin verschachtelt Frameset 2, welches die zweite Reihe nochmals in zwei Spalten aufteilt)
Wenn nun ein WWW-Benutzer die Datei schoenframe.html aufruft, wird die Aufteilung in die oben beschriebenen Framesets vorgenommen, die Framenamen definiert und die drei weiteren html-Dateien in die definierten Frames innerhalb eines Browserfensters eingeladen.
Klingt schwieriger, als es ist. Schauen wir uns obiges Beispiel mal mit der html-Syntax an, im blau unterlegten Teil stehen nur die Erläuterungen, der zu schreibende Code ist also nur links im grün unterlegten Teil angeführt.
| <html> | Beginn des html-Dokuments |
| <head> | Beginn des Headers (in diesem Beispiel wurde kein <title>-Tag definiert |
<frameset rows=20%,80%> |
Beginn der Frames-Definition mit einem Frameset: Dokument wird im Prozentsatz Erste Reihe 20% Höhe des Browser zu 80% Höhe in zwei Reihen aufgeteilt. (Statt 80% hätte man auch * schreiben können, was bedeutet, dass hier automatisch auf 100% ergänzt worden wäre. Statt 20% hätte man auch eine Zahl angeben können, z.B. 150. Dies wären dann die absolute Höhe in Pixel gewesen, unabhängig davon, wie groß der Benutzer sein Browserfenster aufzieht.) |
<frame src="hallo.html"> |
Hier wird nun definiert, dass in die erste Reihe die Datei "hallo.html" geladen werden soll |
<frameset cols="300,*"> |
Hier wird nun definiert, wie die zweite Reihe aussehen soll. Wenn wir nur eine Seite mit zwei Framefenstern haben wollen, hätten wir hier nun wieder <frame src="dateiname.html"> angegeben. Wir wollen aber diese Reihe noch in zwei Spalten unterteilen. Das wird hier als neuer, in den ersten Frameset verschachtelter zweiter Frameset definiert. Der unterteilt die Reihe in zwei Spalten, die erste (linke) soll 300 Pixel breit sein, die Breite der zweiten hängt von der Breite des Benutzerfensters ab. |
<frame src="frmenu.html"> |
In die erste Spalte der zweiten Reihe wird die Datei "frmenu.html" geladen. |
<frame src="anfang.html"> |
In die zweite Spalte der zweiten Reihe wird die Datei "anfang.html" geladen. |
</frameset> |
Hier beenden wir die Definition des zweiten Framesets (Aufteilung der zweiten Reihe) |
</frameset> |
Hier beenden wir die Definition des ersten Framesets (Grundaufteilung des Browserfensters in zwei Reihen), damit sind die Frameseite fertig definiert. |
| </head> | Das war alles im Header, klar soll ja nirgendwo auf der Seite angezeigt werden, ist ja nur Steuercode. Also jetzt header zu. (hätte aber genausogut im Body stehen können). |
| <body> | Hier wird der Body eröffnet |
<noframes>schade, Ihr Browser ist doof</noframes> |
Eigentlich, soll auf dieser html-Seite ja nix angezeigt werden. Es gibt aber Browser, die keine Frames darstellen können, entweder ganz alte Versionen, oder aber Einfachstbrowser von Handheld-Computern. Die bekommen dann diesen Alternativtext zu sehen. |
| </body> | Ende Body |
| </html> | Ende html-code. |
Na, ist doch gar nicht so schwer, oder? Falls Sie aber doch erst noch ein einfacheres Beispiel sehen wollen, wie wäre es mit einem Beispiel mit nur zwei Frames in einem Fenster? Das finden Sie hier.
Tipp: Am besten laden Sie sich dazu auch die entsprechenden html-Dateien auf Ihre Festplatte (zip-File herunterladen)
>> zum zweiten Teil des Moduls 3.1: Navigation und Linkerstellung innerhalb von Frames (2 von 4)
<< Modul 2.5: Transparent Gifs