 Lektion 1 : simple Definition
Häufig sehen sie, dass der Bildschirmbereich für die Anzeige einer Webseite offenbar in separate Bereiche, z.B. für Menü und Anzeige aufgeteilt ist. Wie das funktioniet solche Bereiche festzulegen lesen sie hier.
Definition eines Framesets, Typ, Aufteilung, Größe der Frames
Der Fensterbereich kann horizontal oder vertikal aufgeteilt werden. Duch Kombinationen kann man auch mehrere Horizontale und vertikale Bereiche innerhalb eines Fensters schaffen.
Grundsätzliches zum Verständnis + Demo
Mit den Frameset- und Frame-Befehlen können sie den Bildschirm in Bereiche aufteilen und diese Bereiche mit unterschiedlichen HTML-Dateien "füllen". Sie können außerdem die Inhalte der Frames (einzeln oder mehrere gleichzeitig) gezielt austauschen.
| |
Bewegen sie den Mauszeiger über die Links für eine Demo
In der Frameset-Datei legen sie fest, in wie viele Frames (Fensterbereiche) der Bildschirm aufgeteilt wird und wie groß diese Bereiche sind. Sie können horizontale oder vertikale Aufteilungen vornehmen. Ein Frameset kann 2 oder mehr Frames enthalten oder sogar verschachtelt werden. Das bedeutet, ein Frameset kann wiederum einen weiteren Frameset enthalten. Die Frameset-Datei selbst hat keine anzeigbaren Inhalte. Erst die HTML-Dateien, die in den Frames dargestellt werden, zeigen den eigentlichen Inhalt ihrer Web-Präsenz.
Da es also in der Framesetdatei keine Seiteninhalte gibt (die stehen normalerweise im Body) ersetzt die Definiton des Framesets die <body>-Tags.
1.1 Einbinden in die HTML-Datei
Eine Frameset-Datei hat einen anderen Aufbau als eine übliche HTML-Datei! Die Frameset-Befehle ersetzen die <body>-Tags!
|
normale HTML-Datei
|
Frameset-Datei
|
<html>
<head>
</head>
<body>
</body>
</html>
|
<html>
<head>
</head>
<frameset rows="50%,50%">
<frame src="oben.htm">
<frame src="unten.htm">
</frameset>
</html>
|
|
|
Frameset steht für: Ein Set von Frames
Eingeleitet werden die Anweisungen für ein Frameset durch das HTML-Tag <frameset>. Dann erfolgt die Definition der Frames in der Reihenfoge, wie sie später angezeigt werden sollen: Von rechts nach links oder von oben nach unten. Abgeschlossen wird die Definition durch das HTML-Tag </frameset> .
1.2 Definition: Erstmal die simple Version mit 2 Frames
Wie hätten Sie's gerne? Spalten oder Zeilen? Der Anzeigebereich des Browserfensters lässt sich in Spalten (cols) oder Zeilen (rows) aufteilen).
2 Frames, vertikale Aufteilung:
Die englische Bezeichnung für Spalten (colums)
legt das fest. (der Befehl = cols)
<frameset cols="50%,50%">
<frame src="links.htm">
<frame src="rechts.htm">
</frameset>
2 Frames, horizontale Aufteilung:
Die englische Bezeichnung für Zeilen (rows)
legt das fest (der Befehl = rows)
<frameset rows="50%,50%">
<frame src="oben.htm">
<frame src="unten.htm">
</frameset>
1.3 Größe bestimmen: Prozent oder Pixel
In den beiden Beispielen oben sind die Anzeigenbereiche exakt mittig unterteilt. Das erreicht man durch die Angaben "50%". Die Größe (bei cols Breite / bei rows Höhe) kann man also in Prozent der Bildschirmgröße aber auch absolut in Pixel (Bildschrimpunkte) bestimmen (die Werte sind durch Komma getrennt).
Dabei ist gibt es eine böse Falle, die aber geschickt umgangen wird: Würde man beide Bereiche in der Größe absolut festlegen wollen, müsste man die Bildschrimauflösung des Seitenbesuchers kennen. Logisch, eine Aufteilung wie 200,600 passt nur für die Bildschrimauflösung 800 x 600 und auch dass nur, wenn das Browserfenster maximiert ist und auch sonst kein Bildschrimbereich für Rahmen usw. benötigt wird.
Regel:
1) bei Prozentangaben sollte summiert immer 100% herauskommen.
2) bei absoluten Angaben beleibt die Bestimmung einer Framegröße dem Browser überlassen. Das definiert man durch die Verwendung des Sterns (*) für eine Größenangabe.
<frameset rows="30%,70%">
Angabe in Prozent: Frame 1 = 30%, Frame 2 = 70 %
<frameset rows="300,*">
Angabe in Punkte: Frame 1 = 300 Pixel, Frame 2 = Restbreite ( * )
Sie werden niemals die absolute Größe der Frames (in Punkten) für alle Frames bestimmen!
Das "Sternchen" dient hier als Platzhalter, schließlich kennen sie die exakte Bildschirmbreite des Besuchers nicht. Das könnte man zwar mittels JavaScript abfragen, müsste dann aber auch jede Fenstergrößenänderung überwachen.
Demos
<frameset cols="50%,50%">
<frame src="links.htm">
<frame src="rechts.htm">
</frameset>
|
|
<frameset rows="50%,50%">
<frame src="oben.htm">
<frame src="unten.htm">
</frameset>
|
|
<frameset cols="200,*">
<frame src="nav.htm">
<frame src="inhalt.htm">
</frameset>
|
|
<frameset cols="200,*,100">
<frame src="nav.htm">
<frame src="start.htm">
<frame src="leer.htm">
</frameset>
|
|
<frameset cols="200,500,*">
<frame src="nav.htm">
<frame src="start.htm">
<frame src="leer.htm">
</frameset>
|
|
<frameset cols="*,750,*">
<frame src="leer.htm">
<frame src="seite01.htm">
<frame src="leer.htm">
</frameset>
|
|
<frameset cols="*,200,500,*">
<frame src="leer.htm">
<frame src="menue.htm">
<frame src="start.htm">
<frame src="leer.htm">
</frameset>
|
|
|
WWW.WEB-TOOLBOX.NET
BEISPIEL 
DOWNLOAD 
ZURÜCK 
rechten Bereich