Framestutorial-2

Weitersagen:

brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Frames in HTML-2

von Thomas Salvador.

Teil 1

Verschachtelung von Framesets

Es ist natürlich eintönig bis unbrauchbar reine Unteilungen in Zeilen oder Spalten vorzunehmen. Für eine Site benötigt man i.a. die Kombination von beidem.

Aus diesem Grunde stand in der obigen Syntax definition-inhalt-1,... und nicht frame.

Gibt man in eine Frameset-Definition N Größen an, so muss man N Inhalte angeben. Dies können atomare Frames oder erneut Framesets sein. Wie bei allem in HTML, muss natürlich auch hier die Blockeigenschaft beachtet werden, d.h. innere Framesets müssen vor dem äußeren beendet werden.

Beispiel:

<html>
<head><title>Ein Frameset Beispiel</title>
</head>

<frameset rows="50,*">

<frame name="head" src="head.html" />
<frameset cols="30%,*">
<frame name="navigation" src="navigation.html" />
<frame name="text" src="welcome.html" />
</frameset>
</frameset>

<noframes>
<body>
Ihr Browser unterst&uuml;tzt keine Frames.
</body>
</noframes>
</html>

Analysieren wir das Set. Das erste Set, auf das wir treffen ist ein rows-Set. Da es das erste und damit äußere Set ist, es hat das gesamte Browserfenster als Raum zur Verfügung. Da es ein rows-Set ist, teilt es diesen Raum in Zeilen. Abschließend hat es zwei Größenangaben, d.h. es teilt den Raum genauer in zwei Zeilen. Dem oberen Set wird eine absolute Höhe von 50 Pixeln zugewiesen, das andere soll den Rest (="*") einnehmen.

Kommen wir nun zu den Inhalten. Der erste Inhalt ist ein frame-Tag, mit name-Attribut head, dem der anfängliche Inhalt head.html zugewiesen wird. Wollte man seine Höhe verändern, müßte man einfach nur die 50 ändern, z.B. in 100 oder in 25.

Der zweite Inhalt und die somit untere Zeile ist selbst ein Frameset (frameset). Dieses hat natürlich nur nicht mehr das gesamte Browsersfenster als Raum zur Verfügung. Zwar die volle Breite, aber nur noch eine um 50 Pixel verringerte Fensterhöhe, denn diese 50 Pixel sind ja schon von head belegt.

Wir erkennen sofort, dass dieses innere Frameset, wegen der Ausrichtung cols Spalten und aufgrund der beiden Größenangaben genauer zwei Spalten erzeugen wird. Die linke Spalte wird 30% der verfügbaren Gesamtbreite nehmen, die rechte den Rest.

Die Inhalte dieses Framesets sind einfach, da es beides Frames sind, navigation und text, die die in den src-Attributen uebergebenen Dokumente laden sollen.

Dieses Frameset würde in einem 600x400 Fenster also so aussehen.

Das Frameset bei 600x400 (skaliert auf 300x200)

Das Ganze ist analog zu Tabellen eine Sache der Übung, mir der man auch eine gewisse Vorstellungskraft dafür entwickelt.

Beispiel:

In diesem Beispiel gehen wird anders herum vor. Ausgehend von einem Ziel, konstruieren wir uns unser Frameset.

Sagen wir, wir möchten, die Navigationsspalte durchgehend haben, den head marginal höher. Das Copyright soll zudem eine dauerhaft sichtbar sein. Das Ganze für Werbebanner geeignet. Also in etwa so:

Das Frameset bei 600x400 (skaliert auf 300x200)

Da die Navigationsspalte durchgehend sein soll, benötigen wie also eine Spalten-Set über die volle Fensterhöhe. Daraus folgt, dass dieses Set das äußere sein muss. Geben wir der Navigationsspalte einfach ein feste Breite von 130, was meiner Meinung nach i.a. reichen wird. der restliche Platz geht an die andere Spalte. Wir sind also so weit:

<frameset cols="130,*">
  <frame name="navigation" src="navigation.html" />
  ---inneres set---
</frameset>

Die andere Spalte ist natürlich ein inneres Zeilen-Frameset, mit head-, inhalt- und copyright-Frames. Den head und copyright geben wir absolute Größen in Pixeln. Dem Inhalt spendieren wir den Rest. Das innere Set sieht also so aus:

<frameset rows="60,*,20">
  <frame name="head" src="head.html" />
  <frame name="inhalt" src="inhalt.html" />
  <frame name="copy" src="copy.html" />
</frameset>

Einfügen des inneren Sets in das äußere liefert schließlich unser gesuchtes Frameset:

<html>
<head><title>Ein Frameset Beispiel</title>

<frameset cols="130,*">
  <frame name="navigation" src="navigation.html" />
  <frameset rows="60,*,20">
    <frame name="head" src="head.html" />
    <frame name="inhalt" src="inhalt.html" />
    <frame name="copy" src="copy.html" />
  </frameset>
</frameset>

<noframes>
<body>
Ihr Browser unterst&uuml;tzt keine Frames.
</body>
</noframes>
</html>

Teil 1

Teil 3

Frames in HTML-2

Verschachtelung von Framesets

Verwandte Artikel und Seiten