 |
|
Frames
Bevor ich an dieser Stelle beschreibe, wie man Frames einfügt, möchte ich erstmal einige Grundinformationen darüber aufschreiben.
Mit Frames teilt man eine Seite der Homepage in mehrere Bereiche auf. Eine Seite, die mit Frames aufgeteilt ist, besteht aus mehreren Einzelseiten, die sich den Platz einer Seite teilen. Dabei kann man die Inhalte jeder einzelnen Seite getrennt voneinander verändern.
Eine Framesseite kann beispielsweise folgendermmaßen aufgeteilt werden:
So eine Aufteilung bietet sich zum Beispiel an, wenn man links im schmalen Frame die Navigation platziert, während im großen rechten Frame die verschiedenen Inhalte angezeigt werden.
Um eine Seite mit Frames zu erstellen, muss man zunächst eine separate HTML-Datei erstellen, in die der HTML-Text für das Frameset platziert wird. Dieses Frameset beinhaltet dann die Information, welche Seiten in dem Fenster wie angeordnet werden sollen.
Nun zum praktischen Teil.
Wir erstellen zunächst 3 neue Seiten. Die erste speichern wir unter "frameset.html", die zweite unter "navigation.html" und die dritte unter "start.html". (alle 3 Seiten in den Hauptordner "Tutorial" speichern).
Kurz zur Info: die Datei mit dem zukünftigen Frameset könnte auch einen beliebigen anderen Namen bekommen. Meist befindet sich die Frame-Definition gleich in der Startseite index.html .
Nun müssen wir zunächst das Frameset erstellen. Dazu wählen wir die Seite "frameset.html" an. Dort ist bisher nur das HTML-Grundgerüst zu sehen.
Der HTML-Text für ein Frameset muss zwischen head und body stehen.
Wir setzen jetzt den Cursor hinter den Head-Abschluss-Tag. Nun wählen wir im Menü oben "Einfügen" und klicken dort auf "Frame..." Es öffnet sich ein Fenster, aus dem man 9 verschiedene Frame-Varianten auswählen kann. Wir klicken auf die Variante, die ich oben als Beispiel gezeigt habe (2 Frames, links schmal, rechts breit). Anschließend klicken wir auf "einfügen".
HTML-Text:
Nun eine kleine Erklärung zum Frameset:
Der Begriff "cols" bestimmt, dass die Seite in zwei Spalten aufgeteilt wird. Um die Seite in zwei Reihen, also oben und unten, zu teilen, wählt man den Begriff "rows".
Die beiden Prozentzahlen bestimmen, in welchem Verhältnis die Seiten aufgeteilt werden. In diesem Beispiel bekommt der linke Frame 30% des Bildschirmes und der rechte 70%. Man kann den Frames auch eine feste Größe zuteilen. Das zeige ich euch später an unserem Beispiel.
Mit "src" bestimmt man, welche HTML-Seite in welchem Frame angezeigt werden soll.
Der "noframes"-Bereich ist für Browser bestimmt, die keine Frames anzeigen können. Sollte also ein Surfer mit einem Browser unterwegs sein, der Frames nicht darstellen kann (was mittlerweile äußerst selten sein dürfte), sieht dieser nicht die Inhalte der beiden Frames, sondern den Text, der im Noframes-Bereich steht. (beispielsweise der Hinweis, wo der Surfer ein Update für seinen Browser bekommt ;-) )
Soviel zur Erklärung.
Jetzt kommen wir wieder zum praktischen Teil:
Damit in unserer Framesseite auch was angezeigt wird, müssen wir zunächst auf der Seite frameset.html ein paar Daten ändern.
Im linken Frame soll unsere Navigation sein. Also ersetzen wir im Frameset "links.html" durch "navigation.html".
Rechts soll unsere Startseite sein. Wir ersetzen "rechts.html" durch "start.html". Nun müssen wir den beiden Frames einen Namen geben. Dazu klicken wir mit rechts in den ersten <frame src...> - tag und wählen aus dem Menü "name". Zwischen die Anführungszeichen schreiben wir "navigation". Den zweiten Frame nennen wir auf dem selben weg "main"
HTML-Text:
Jetzt kann man sich bereits in der Vorschau ansehen, wie das Browserfenster aufgeteilt ist. Die beiden Frames sind allerdings noch weiss, da die Seiten Navigation und Start ja noch keine Inhalte haben.
Das ändern wir jetzt. Wir wählen zunächst die Seite "navigation.html" an. Dort setzen wir jetzt unsere Links ein, damit man später über die Navigation die verschiedenen Seiten aufrufen kann. Wir möchten über die Navigation die Startseite und unsere zuvor erstelle Tabelle aufrufen können.
Wir schreiben also in den Body-Tag die Worte Startseite und Tabelle mit einer Leerzeile (also zweimal "br") dazwischen. Auf Startseite setzen wir einen Link zu start.html und Tabelle verlinken wir mit tabelle.html.
Nun müssen wir noch bestimmen, in welchem Frame die Links geöffnet werden sollen. Wenn wir dies nicht tun würden, würden sich die einzelnen Links in dem Navigations-Frame öffnen. Wir wollen jedoch, dass die einzelnen Seiten rechts (im Frame mit Namen main) öffnet.
Wir klicken jetzt mit rechts in den Link-Tag ( <a href="start.html"> ) und wählen aus dem Menü "target" aus. Zwischen die Anführungszeichen schreiben wir "main". Das gleiche machen wir mit dem zweiten Link.
Bevor wir uns das ganze jetzt ansehen, soll die Seite "start.html" ebenfalls mit Inhalt gefüllt werden.
Wir wählen die Seite "start.html" an und schreiben in den Body-Tag schlicht und einfach "Herzlich willkommen"
Nun müssen wir unbedingt unsere Seiten speichern. Dies geht am einfachsten, indem wir auf das rechte der beiden Speichersymole oben klicken. Damit werden alle Änderungen an den geöffneten Seiten gespeichert.
Jetzt können wir unsere fertige Frames-Seite betrachten. Dazu muss die Seite frameset.html aufgerufen werden.
vergleichen
Dort können wir jetzt über die Navigation zwischen den Seiten Start und Tabelle wechseln.
Wie bereits weiter oben "angedroht", kann man den Frames statt eines Prozentwertes auch eine feste Größe zuteilen. Bei Prozentwerten ändern die Fenster ihre Größe je nach Bildschirmauflösung; das Verhältnis bleibt jedoch immer gleich.
Um dem Navigations-Frame eine feste Größe zu geben, ändern wir die Werte in unserem Frameset.
Den Wert "30%" ersetzen wir durch den Wert 200 (ohne Prozentzeichen). Der Navigationsframe wird somit 200 Pixel breit sein.
Den Wert "70%" erstetzen wir durch ein * (Sternchen).
Das Hauptfenster (rechts) bleibt durch das Sternchen variabel, das heißt, je nach Bildschirmauflösung des Surfers wird dieses breiter oder schmaler. Der Bildschirm ist somit bei jeder Auflösung zu 100% abgedeckt.
Quelltext:
Trennbalken entfernen
Zwischen den beiden Frames ist jetzt noch eine Trennlinie, die die beiden Seiten optisch trennt. Da dies nicht besonders schön aussieht, entfernen wir diese.
Dazu klicken wir mit rechts in den Frameset-Start-Tag und wählen dort "border". Zwischen die Anführungszeichen setzen wir den Wert 0 (null) ein. Anschließend klicken wir nochmals mit rechts in diesen Tag und wählen aus dem Menü frameborder="no". Als letzes wählen wir aus dem gleichen Menü framespacing und setzen den Wert auf 0.
Linktipp: auf www.clairette.de habe ich im Bereich Webdesign verschiedene Frame-Variationen mit HTML-Text aufgelistet.
|
|
|
