Frames mit GoLive

von Fries Websolutions

An dieser Technik unterscheiden sich die Nutzer, denn die einen lieben Frames und halten sie für unverzichtbar, die anderen meiden sie und schimpfen auf jedes Frame-Design. Frames bieten Vorteile, aber auch zahlreiche Nachteile, denn es kommt darauf an, was wir erreichen möchten.

GoLive bietet uns nützliche Werkzeuge, um zu ansprechenden Frame-Gestaltungen zu kommen und deshalb wollen wir auch nicht mit dem Hundertsten 0-8/15-Standard-Frameset beginnen, sondern wir zeigen, was mit Frames auch möglich ist.

Das eigentliche Frameset besteht aus zwei, oder drei einzelnen HTML-Seiten, und von denen ist jeweils eins für die Navigation: respektive ein Logo, oder die Bannerwerbung reserviert. Genau diese Unterteilung des Bildschirmes in mehrere, voneinander unabhängige Bereiche ist es, die besonders Anfänger zur Verzweiflung treiben, denn aus einem Frame kann man nur: Speichern, Rollen oder Drucken, wenn das Frame vorher mit einem Mausklick aktiviert wurde. Aber wir können ein gutes Frameset nicht auf den ersten Blick als solches erkennen und so fallen sogar fortgeschrittene Anwender darauf herein.

Web-Designer haben eigentlich keine Probleme mit der Frame-Technik, obwohl die Arbeit hier ein wenig kompliziert ist, denn es müssen Hyperlinks fensterübergreifend funktionieren und es gibt auch allerlei Fallstricke, was die unterschiedlichen Browser betrifft. Der alte Netscape Navigator (4.x) hat einigen Entwicklern das Fürchten bereitet, denn dieser Browser neigt zu unpräzisen Darstelllungen, daran ist ein Rundungsfehler Schuld.

Ein Praxisbeispiel: Wir benutzen Frames, um damit eine Seite einzurahmen
Frames eignen sich gut dazu, um ein typisches Problem, des Web-Design auszugleichen, dass eine Seite an unterschiedliche Monitore anpassen zu lassen. Der Trick besteht darin, das feste Lay-out in eine variable Frame-Struktur einzupassen, und auf diese Weise passen sich die Frames, der Monitorgröße an, während der eigentliche Inhalt doch immer der gleiche bleibt, und das ganz ohne störenden Effekten.

Eine Rahmen-Struktur aus Frames kann aus unterschiedlichen Farben bestehen und auch die Breite kann bestimmt werden.

Es werden 5 HTML-Dateien benötigt: oben.html für den oberen Rahmen, unten.html für den unterer Rahmen, links.html für den linken Rahmen, rechts.html für den rechten Rahmen und mitte.html für den eigentlichen Inhalt

Wir müssen erst diese Dateien erstellen, dabei muss noch kein Inhalt definiert werden, denn es genügt einen Seitentitel zu bestimmen, damit wir die Dateien später auch im Browser identifizieren können. Dann machen wir uns daran, das Frameset zu erstellen. Wir klicken dazu auf die Registerkarte: "Frames".

Dann ziehen wir aus dem Frame-Inspektor auf der rechten Seite, zwei fertige Frameset-Vorgaben auf unsere Arbeitsoberfläche. Um einen Seitenrahmen zu bekommen, können wir die Vorlagen benutzten.

Wir ziehen das mit der 1 markierte Frameset, auf die Arbeitsfläche, dann können wir das Frame rechts und links mit einer festen Größe von ca. 30 Pixel ausstatten. Diese Einstellung werden wir im Frame Inspektor machen und in dem Fenster können wir auch den Rollbalken auf: "Nein" setzten und dem Frame jetzt einen sinnvollen Namen geben.

Dann ziehen wir das mit der: 2 markierte Frameset in das mittlere Frame.

Jedem Frame werden wir eine entsprechende Größe zuweisen. Dabei sollte das mittlere Frame sich anpassen können und bekommt dann keinen festen Wert, dadurch bleibt es auf alle Fälle variabel. Das Frame unter- und oberhalb soll den gleichen Wert bekommen, wie die Seitenframes (ca.30 Pixel). Damit erhalten wir ein gleichmäßiges Frameset, in dem wir jetzt die schon vorgefertigten HTML-Dateien einbinden müssen.

Das machen wir über den Frame Inspektor auf der rechten Seite des Hauptfensters.

Da wir das mittlere Frame variabel gelassen haben, dadurch ändert sich seine Größe je nach Browserauflösung. Wir können auch die Seitenframes variabel lassen und dafür das Hauptframe in der Mitte mit einer festen Größe versehen. In diesem Fall würde der Inhalt der Seite, immer in gleicher Größe erscheinen, ganz unabhängig von der Browserauflösung. Denn die kleinen Frames, die das mittlere Frame umschließen, würden dann die restliche freie Fläche füllen.

Wir können die Framegröße auf drei verschiedene Art und Weisen einstellen, entweder pixelgenau mit einer Prozentangabe, oder auch variabel lassen. Dann würden wir im HTML Code der Seite ein Stern sehen und dieses Zeichen gibt dem Browser die Anweisung, dass er den restlichen Platz mit dem Frame füllen soll, aber nur die, die das Jokerzeichen (*) als Größenangabe haben.

Wir können aber auch die Größe der Frames manuell bestimmen, wenn wir in dem Rand eines Frames anklicken, um ihn dann in die gewünschte Größe zu ziehen. Dadurch haben wir bei der Gestaltung mehr Freiraum und ermöglicht uns interessante Frame-Designs.

Damit wir keine unschönen Effekte bekommen, müssen wir die Rollbalken der Rahmen-Frames abschalten. Nur das mittlere Frame kann den Rollbalken behalten, denn auf dieser Seite soll der eigentliche Seiteninhalt erscheinen.

Wir haben einen Seitenrahmen, aber die hässlichen Rahmenlinien sehen wir immer noch, um diese weg zu bekommen, muss die Randgröße im Frameset Inspektor auf 0 gesetzt werden und die Randfarbe das Attribut "nein"

Hier ein Tip: Wir wählen das gesamte Frameset aus, indem wir die Linie seitlich des mittleren Frames anklicken.

Das war noch nicht alles: es gibt <Tags>, die manchmal nur von einem Browser (IE ) interpretiert werden, und nicht einfach über den Inspektor einzustellen sind.

Wir haben den Rand des Framesets im Inspektor auf 0 gesetzt, aber er kann trotzdem von IE angezeigt werden. Um das zu umgehen, wechseln wir in den: Outline-Modus und klappen das Frameset auf, das sich direkt nach dem <Head> End-Tag befindet.

Im Frame Inspektor ist nur: "Yes" oder "No" möglich, aber diese Angabe reicht dem Browser leider nicht, und wir müssen die Änderung dann manuell im Outline-Modus eintragen und dazu klicken wir sofort: "Yes" bzw. "No" und tragen dort die Null ein.

Wenn wir die Randgröße und Randfarbe geändert haben, werden wir in der Vorschau eine weiße Seite sehen. Aber wenn wir jetzt den einzelnen Seiten, die wir als Rahmen definiert haben, dann eine Hintergrundfarbe zuweisen, sieht die Sache schon ganz anders aus.

Wir weisen die Farbe per: Drag&Drop auf das kleine Icon, neben dem Seitentitel.

Wenn wir allen Seitenrahmen die gleiche Farbe geben, dann bekommen wir einen gleichmäßigen Rahmen, der dann doch einer Grafik ähnelt. Durch den Einsatz der Frames haben wir eine kurze Ladezeit im Vergleich zur Grafik erreicht, und dabei auch nicht auf den Rahmeneffekt verzichtet. Kreative Experimente sind auch möglich, denn es lassen sich Beispielsweise, Grafiken in die Rahmen einfügen und auf diese Weise bekommen wir, die gebogenen oder gezackte Linien. Die dürfte es eigentlich mit Frames gar nicht geben, aber damit fallen wir garantiert auf.