Fenster
mit Aussicht
Sie werden geliebt
oder gehaßt: Frames sind wohl die umstrittenste Gestaltungtechnik
überhaupt,
die ein HTML-Bastler
einsetzen kann. Dabei sprechen zahlreiche gute Gründe für eine
Homepage
mit Fenstern.
Hier wird nun gezeigt, wie man Frames richtig einsetzt.
Wohin sich der
Surfer im Web auch bewegt, irgendwann stößt er auf eine Seite,
auf der Rollbalken
und graue Linien
die Harmonie des Seiten-Designs zerstückeln – auf eine Webseite mit
Frames.
Fakt ist: Schlecht
umgesetzte Homepage-Beispiele finden sich zuhauf – langweiliger Seitenaufbau
im starren Raster,
ungeschickt angelegte Fenstergrößen, lange Ladezeiten durch
Grafikoverkill.
Doch auch die
Vorteile der Frame-Technik liegen auf der Hand: Durch eine feste Navigationsleiste
zum Beispiel
behält der Surfer den Überblick. Er weiß, wo er sich befindet
und was es noch
anzuschauen gibt
– er sieht quasi ein ständig aufgeklapptes Inhaltsverzeichnis. Für
den Designer
des Webauftritts
ist interessant, daß Logos, Werbebanner, Counter und Emailsymbole
so in Frames
eingebunden werden
können, daß sie immer präsent sind. Das ständige Neuladen
entfällt, und der
Besucher freut
sich über die gesparte Online-Zeit. Und schließlich sieht eine
Web-Seite mit Frames
einfach professioneller
aus – besonders, wenn sie dezent eingesetzt werden.
1.) So funktionieren Frames
2.) Die Rahmenbedingung
3.) Einfache Aufteilung
4.) Werte zuweisen
5.) Frames füllen
6.) Namenstag mit Zielschuss
7.) Mehrfache Aufteilung
8.) Ränder mit dem Auto schieben
9.) Ganz sicher gehen
10.)
Musterbeispiel
Daß ein
Browser seine Oberfläche in Fenster aufteilen soll, wird ihm durch
eine separate
HTML-Seite mitgeteilt.
Die einzige Funktion dieser Seite ist es, mit dem Befehl frameset die
Größe
und Anordnung der Fenster zu definieren, die erzeugt werden sollen. Text
oder andere
Befehle enthält
die Seite nicht. Für jeden definierten Frame muss eine Web-Seite erstellt
werden,
die dann vom
Browser in das vorgesehene Fenster eingesetzt werden kann. Und damit der
Browser sich
nicht beim Nachladen in einem Wirrwarr von Dateien verstrickt, können
Frames
auch Namen erhalten.
Insgesamt muss immer eine HTML-Seite mehr geschrieben werden, als
Fenster im Browser
zu sehen sind.
Eröffnet
und geschlossen wird das Spiel mit den Fenstern durch den Befehl
<frameset>
</frameset>.
Er wird in das
Grundgerüst einer HTML-Seite vor oder besser anstatt des
<body>-Befehls
eingefügt. Da auf der Frame-Seite keine Seiteninhalte sichtbar
sind, ist der
Body ohnehin überflüssig.
Mit den Parametern
cols und rows wird die Aufteilung des Browser-Fensters festgelegt. Cols
steht für
das englische „columns“, teilt das Browser-Fenster also in Spalten auf.
Diese Art der
Aufteilung wird
sehr häufig für ein Inhaltsverzeichnis und übersichtliche
Navigation eingesetzt.
Mit rows (engl.
Reihen) wird das Browser-Fenster horizontal geteilt. Das geschieht häufig,
um
Werbebanner am
oberen oder unteren Bildrand festzupinnen.
Um die gewünschten
Framegrößen festzulegen, weist man den Parametern Werte zu.
Das kann
in Prozent, durch
Bildpunkte, Platzhalter oder auch durch relative Angaben erfolgen, aber
auch
durch Kombinationen
dieser Werte. Durch den Befehl
<frameset
cols=“20%,80%“>,
erzeugt der Browser
beispielsweise einen linken Frame, der 20 Prozent des verfügbaren
Platzes
einnimmt und
einen rechten, der den übrigen Platz ausfüllt. Dabei spielt die
Größe des Bildschirms
keine Rolle.
Das Verhältnis bleibt immer 20 zu 80. Definieren Sie die Frame-Seite
mit
<frameset
cols=“,2*“>
so teilt der
Browser sich in eine linken und einen rechten Frame, wobei der rechte immer
doppelt
so groß
ist wie der linke. Für den Einsatz einer Navigationsleiste empfiehlt
sich eine Kombination
von Bildpunkten
mit einem (Stern). Der Befehl
<frameset
cols=“150,*“>
erzeugt einen
Frame mit 150 Bildpunkten Spaltenbreite und einen zweiten, der den Rest
des
Browser-Fensters
ausfüllt. Die Breite des zweiten Fensters ist also nur abhängig
von der
Auflösung
des Monitors beziehungsweise der Größe des Browsers auf dem
Bildschirm. Um eine
horizontale Teilung
des Browsers zu erreichen, ersetzt man einfach den Parameter cols durch
rows.
Eine Frame-Seite
bleibt leer, wenn in die Fenster nicht
auch Web-Seiten
geladen werden. Das erledigt der Befehl
<frame
src=“Seite.htm“>.
Entschließen
Sie sich, das Browser-Fenster vertikal zu teilen,
dann könnte
Ihre Seite mit Frames so aussehen:
<HTML>
<HEAD>
<TITLE>
Workshop:
FRAMES basteln
</TITLE>
</HEAD>
<frameset
cols=“150,*“>
<frame
src=“Navigation.htm“>
<frame
src=“Bannerseite.htm“>
</frameset>
</HTML>
Nach dem Frameset-Befehl
gibt man also lediglich die Seiten an, die – von links nach rechts –
in die Fenster
geladen werden sollen. Achten Sie darauf, dass die Inhaltseiten sich mit
der
Frame-Seite in
einem Verzeichnis befinden, sonst sucht der Browser vergebens.
Das obige Beispiel
hat einen Haken: Die Navigation funktioniert damit nicht. Will man im linken
Navigations-Frame
einen Hyperlink einbauen, so dass sich im rechten Fenster eine neue Seite
lädt, braucht
man die Attribute Name und Target. Mit Name benennt man einen Frame, keine
HTML-Seite. Das
obige Beispiel könnte also wie folgt erweitert werden:
<frame src=“Hauptseite.htm“ name=RechteSeite>
Damit hat das
rechte Fenster den Namen „RechteSeite“ erhalten und kann nun mit dem Parameter
Target (engl.
Ziel) anvisiert werden. Und zwar unabhängig von der HTML-Seite, die
sich gerade
in dem Frame
befindet. Die Befehlssyntax für einen Link kennen Sie bereits aus
den ersten
Workshop. Der
erweiterte, vollständige Link-Befehl könnte demnach so aussehen:
<a href=“Hauptseite.htm“ Taget="RechteSeite"> Haupseite</a>
Er wird aber nicht
in die Frame-, sondern in die Navigations-Seite eingebaut. Ist das Ziel
einmal
definiert, treffen
Sie mit der Kombination von Name und Target ins Schwarze. Neben Name
können dem
Attribut Target auch noch die folgenden Werte zugeordnet werden, um Links
zu setzen. Siehe
die Seite "Attribute
und Einstellungen für Frames".
Genügt Ihnen
die einfache Aufteilung in vertikale oder horizontale Frames nicht, so
steht einer
Kombination von
rows und cols nichts im Wege. Die Reihenfolge der Frameset-Befehle spielt
eine entscheidende
Rolle für das, was später auf dem Schirm erscheint. Im oben genannten
Beispiel lässt
sich durch Ergänzen eines weiteren Frameset-Befehls
<frameset
cols=“150,*“>
<frame
src=“Navigation.htm“>
<frameset
rows=“110,*“>
<frame
src=“Bannerseite.htm“>
<frame
src=“Hauptseite.htm“>
</frameset>
</frameset>
ein horizontaler
Frame im rechten Fenster einbauen, der dann als Banner-
Träger oder
auch für eine Gif-Animation verwendet werden könnte.
Setzt man cols
und rows zusammen in eine Frameset-Befehl, dann überschneiden
sich die Frame-Rahmen,
und es entstehen zwei weitere Frames.
| <frameset cols=“150,*“ rows=“110,*“> | |
| <frame src=“frame_1.htm“> | (Linksoben) |
| <frame src=“frame_2.htm“> | (Rechtsoben) |
| <frame src=“frame_3.htm“> | (Linksunten) |
| <frame src=“frame_4.htm“> | (Rechtsunten) |
| </frameset> |
Beginnt man bei
der Definition der Frames mit cols, so bahnt sich der Browser bei der Erstellung
von Frames seinen
Weg von links oben die erste Spalte hinunter und hüpft dann in die
nächstgelegene
rechte Spalte, um wieder von oben nach unten zu gehen. Beginnt man mit
rows,
geht der Browser
erst nach rechts. Ist eine Spalte oder Reihe mit einer Seite gefüllt
worden, bevor
eine Aufteilung
in Frames erfolgte – wie im ersten Beispiel, so lässt sich in diesem
Frame keine
weitere Teilung
mehr einrichten und der Browser macht das im nächsten Frame. Das erscheint
am Anfang kompliziert,
aber mit ein wenig ausprobieren schaffen Sie es garantiert, die gewünscht
Fensterfront
zu kombinieren. Beim Ausfüllen der Frames mit HTML-Seiten geht der
Browser ein
wenig nachvollziehbarer
vor, und zwar einfach von links nach rechts und von oben nach unten.
8.) Ränder
mit dem Auto schieben
Grau und allgegenwärtig
ist der Standard-Frame. Das ist aber nicht besonders ansprechend. Hier
sollte man die
Devise beherzigen: Wenn Frames, dann aber richtig. Und richtig heißt:
dezent und
sparsam einsetzen.
Schließlich sollen die Funktionen der Frames im Vordergrund stehen
und
nicht hässliche
Rollbalken und graue Trennlinien. Doch diese können bunt gestaltet
werden, und
das Scrollen
kann völlig ausgeschaltet werden. Eine Goldene Regel gilt es dabei
jedoch zu
beachten: Ihr
Frame-Baukasten muss auchauf den kleinsten Bildschirm passen, das heißt
eine
Auflösung
von 640 x 480 Bildpunkten ist das Maß aller Dinge und darf nicht
überschritten werden.
Welche Attribute
es für die Frame-Gestaltung gibt, lesen Sie in der Tabelle unten.
Siehe
die Seite
"Attribute
und Einstellungen für Frames".
Frames sind eine
Erfindung von Netscape. Ab der Version 2.0 des Navigators konnten sie
eingesetzt werden.
Seither sind etliche Browser-Versionen erschienen, und sie beherrschen
alle die Fenstertechnik
– gleichgültig von welcher Software-Firma. Was aber, wenn noch jemand
mit Netscape
1.0 oder gar noch mit Mosaic unterwegs ist? Der Prozentsatz dieser Surfer
geht
wohl gegen Null.
Um aber ganz sicher zu gehen, gibt es den Befehl
<noframes> Diese Seite verwendet Frames. Ihr Browser unterstützt keine Frames. </noframes>
Der Noframes-Befehl
wird einfach hinter den Framesbefehl angehängt. Zwischen die beiden
Tags schreiben
Sie einen Text, der anstelle der Frames erscheint, wenn der Browser diese
nicht darstellen
kann.
Zum Schluß
noch ein Beispiel, das ganz im Sinne des Erfinders ist. Hier sind die grauen
Linien völlig
eliminiert, und die Navigationsleiste wurde so gestaltet, dass die Breite
sich
nie verändert.
Selbst bei der kleinsten Bildschirmauflösung gibt es mit der Kombination
von Pixelpunkten
und dem Asterisk (Sternchen) keine Probleme. Wäre die Hauptseite
ebenfalls blau,
dann würde der Surfer im ersten Moment gar nicht merken, dass die
Seite
mit Fenstern
aufgebaut ist. Und so soll es ja sein.
<HTML>
<HEAD>
<TITLE>HTML-Workshop
"FRAMES"</TITLE>
</HEAD>
<frameset
cols=“160,*“ border="0">
<frame
src=“Navigation.htm“ noresize scrolling="auto">
<frameset
rows=“110,*“ border="0">
<frame
src=“Banner.htm“ name="Werbung" noresize scrolling="no">
<frame
src=“Haupseite.htm“ name="RechteSeite">
</frameset></frameset>
</HTML>
