Multimediakurs Leinfelder: Inhalt/A: Einsteiger/Modul 3 "Frames und iFrames"/Modul 3.1.4 "Frame-Attribute, Frames mit Composer"

(© copyright)     Letzte Änderungen:30.03.2003


Modul 3.1.4: Fortsetzung: Verwendung von Frames für Webseiten - Einführung in die Syntax von Frames

(4. von 4 Seiten) Frame-Attribute, Verwenden des Composers zur Erstellung von Websites mit Frames.


Frameset- und Frame-Attribute:Position innerhalb des Kurses

Oft finden Sie im Web Frame-Seiten, bei denen Sie z.B. folgendes beobachten können:

Um derartiges zu definieren, gibt es zusätzliche Frameset- und Frame-Attribute und zugehörige Parameter, da hilft nur Ausprobieren.

Wichtig!!: nicht alle Attribute zeigen bei allen Browsern Effekte. Hier gibt es - leider - Sonderlösungen z.B. zwischen Netscape Navigator und Internet-Explorer. Solche Unterschiede werden uns auch später noch zunehmend zu schaffen machen (aber man wächst ja mit seinen Herausforderungen ;-)

Frameset-Attribute:

Hier nun die Möglichkeiten bei der Definition von Framesets mit willkürlichen Beispielen

<frameset rows="100,*" border="6" framespacing="6" bordercolor="#0000ee" frameborder="no">

Außer der Angabe der rows bzw. der cols können Sie alles andere weglassen, Rand ist dann grau und mittelbreit, frameborder wäre yes,

Sie wissen ja bereits. Die Höhe von rows bzw. Breite von cols kann, wie oben absolut in Pixeln angegeben werden oder relativ in prozent (z.B. rows="30%,*", gleicher Effekt wäre "30%,70%">

Probieren Sie die anderen Dinge einfach aus. Wichtig ist z.B. border="0", dann haben Sie keine Ränder zwischen den frames (ggf. auch framespacing herunterfahren, bedeutet den Abstand des Inhalts einer html-Seite vom Frame-Rand).

Frame-Attribute:

Nun die Möglichkeiten von Attributen bei der Definition von Frames:

<frame src="meinedatei.html" name="frwin1" scrolling="no" noresize>

Dies bedeutet, dass hier keinesfalls ein Scrollbalken erscheint (auch wenn Sie die Größe des Frames zu klein gewählt haben) und auch die Framegrößen nicht verändert werden können. Standard wäre scrolling="auto", d.h. dies kann man dann auch weglassen. Scrollbalken kommen nur bei Bedarf (d.h. je nach Länge der geladenen Seite). Es gibt auch noch scrolling="yes", da kommen die Scrollbalken immer, aber das ist eher ein unnützer Befehl. Wenn man noresize weglässt, können die Frames ggf. von Hand, d.h. per Maus des Websurfers in ihrer Größe verändert werden.

Übung: Hier hilft nur ausprobieren. Sie können dazu die Beispiele Beispiele in Modul 3.2 benutzen (die gehen übrigens in nem neuen Fenster mit Name "mm_extra" auf). Basteln Sie nun auch kräftig Seiten von Hand.


Frame-Seitenerstellung mit dem Composer?

Nun zur Frage, die Sie sicherlich bereits brennend interessiert. Können wir uns denn bei der Frame-Seitenerstellung durch Webeditoren helfen lassen??

So oder so: es ist wichtig, dass Sie mit allen Fallstricken von Frame-Seiten vertraut werden, wenn Sie sich wirklich daran wagen wollen. Da helfen Ihnen auch professionelle Editoren wenig, wenn erst mal ein Fehler drin ist.

Was mit Netscape Composer nicht funktioniert:

Sie können auch keine Frameset-Seite mit dem Composer schreiben (Schade). Immerhin, eine Frameset-Seite ist rasch definiert, verwenden Sie dazu WordPad (oder SimpleText beim Mac) und speichern als reines Textfile mit der Endung .html (ggf. die Endung .txt gegen .html austauschen). Notieren Sie sich auf ein Blatt Papier, wie Sie Ihre Frames auf der Frameseite genannt haben.

Sie können dann Ihre jeweiligen html-Seiten, die in den einzelnen Frames aufgerufen werden sollen, wie üblich mit dem Composer erstellen.

Achtung Fallstricke !

Sie könnten versucht sein, eine Frameset-Seite im html-Quelle-Modus des Composers zu schreiben (d.h. diesen sozusagen als Texteditor zu verwenden, um nicht Wordpad oder SimpleText aufrufen zu müssen). Funktioniert nicht! Der Composer lässt Sie zwar zuerst den Quellcode schreiben, aber sobald Sie einmal in den Normalmodus gehen und danach wieder Ihren Quellcode ansehen, ist dieser weg. Auch speichern lässt sich der Quellcode nicht direkt. Der Composer kennt die Frame-Tags nicht, empfindet den Code als fehlerhaft und schmeißt ihn selbständig raus. Sie müssen den Code also in jedem Fall mit einem Texteditor schreiben.

Apropos Texteditor: häufiger Fehler: wenn Sie mit Wordpad schreiben, dürfen Sie nicht im Wordformat abspeichern. Neuere Wordpad-Versionen lassen auch als html-Files abspeichern. Dies ist unter Wordpad nichts anderes als ein reines Textfile, dessen Ändung aber von .txt auf .html geändert wurde. Bei älteren Versionen speichern Sie als Textfile ab und ändern die Endung .txt per Hand auf .html ab.

Vorsicht mit Word: Wenn Sie Ihre Frameset-Seite in Word schreiben, müssen Sie wiederum als reines Textfile abspeichern und selbständig die Endung .doc oder .txt gegen .html austauschen. Beim Speichern mit Word gibt es auch eine Option "als html-Dokument abspeichern". Verwenden Sie dies nicht bei der Erstellung einer Frameset-Seite. Word hat einen eingebauten (sehr mäßigen) html-Editor und versteht diesen Befehl so, als ob Sie das geschriebene Layout im Browser anzeigen wollen. Es garantiert also jede Menge zusätzlichen Code und Ihr Frameset-File funktioniert nicht!!
Sie könnten die Word-Option "als html-Dokument speichern" ggf. verwenden, wenn Sie ein normales Word-File schnell aufs Web bringen wollen. Der generierte Code ist aber sehr fehlerhaft und bringt so manchen Browser ins Wanken. Wandeln Sie also nur sehr einfach strukturierte Texte auf diese Weise in html-code um.

Oops! Composer-6.1-2-Bug:

Prinzipiell sollten Sie auch die Targets mit dem Inspektor für Verknüpfungseigenschaften des Composers erstellen können. Das geht grundsätzlich so (s. Abbildung):

Zum Einrichten eines Links wie üblich Textstelle oder Bild markieren und auf Verknüpfung einfügen klicken. Geben Sie dort die zu verknüpfende Seite bzw. den Pfad in das Verknüpfungs-Eigenschaftenfenster ein (ggf. auch via Datei wählen) und klicken dann auf Fortgeschrittene Bearbeitung. Dadurch öffnet sich das Fenster Weitere Eigenschaften (siehe Bild oben rechts). Sie sehen das für das erstellte <a>-Tag automatisch erstellte Attribut href mit seinem Wert (Parameter) seite2.html (oder welche Datei bzw. Pfad Sie auch immer ausgewählt haben).
Gehen Sie dann nach unten in die Menuliste Attribut und wählen target aus (oder tippen Sie target in das entsprechende Feld). Geben Sie einen Wert dafür ein (im Beispielfall neufenster). Das erscheint dann auch oben in der Attribut-Liste. Dann mit ok beide Fenster schließen und das Ganze sollte erledigt sein.

Nun der Haken an der Sache: Die mir vorliegenden Composer-Versionen (6.1 deutsch für Mac, 6.2 deutsch für PC) haben nen Bug. Die Eintragung wird nicht in den Source-Code vorgenommen. Ich hoffe, dass dieser Bug bald behoben wird. Zwischenzeitlich hilft nur, die targets per Hand in der Ansicht html-Quelle in den Sourcecode zu schreiben (wenn Sie dann das Eigenschaften-Fenster aufrufen, erscheint target samt zugehörigen Wert auch in der obigen Attribute-Liste und geht beim Schließen auch nicht wieder verloren.

Aktuell: Die einfache Lösung ist folgende: Besorgen Sie sich (unter www.netscape.com) die aktuelle Netscape Version 7. Dort ist der Fehler behoben und alles funktioniert wie es sollte.

Hinweis: Falls Sie noch mit dem Composer des Netscape Communicators 4.7 arbeiten: dort funktioniert es. Hier ist die Anleitung.

Trotz diesen Bad News am Ende sind Sie nun sicher ziemlich fit, tolle Webseiten zu erstellen. Das technische Rüstzeug hierzu haben Sie nun. In der nächsten Lektion werden wir noch über Weboptik und einige Fallstricke reden, aber im Prinzip können Sie nun schon richtig flott loslegen. Viel Erfolg.

Wenn Sie aber noch andere alternative Frames (sogenannte inline frames, iframes) kennenlernen wollen, nehmen Sie noch Modul 3.3 (iframes) mit.


>> Zu den Frame-Übungsbeispielen (Modul 3.2)
>> zur Erläuterung von iframes (Modul 3.3)

<< Modul 3.1.3