vorheriges KapitelInhaltsverzeichnisIndexInfoseitenächstes Kapitel


Frames und wie sie unterstützt werden

Mit verknüpften Fenstern arbeiten

Frames anwenden

Frame-Ränder verändern

Komplexe Frame-Sets gestalten

Floating Frames

Zusammenfassung

Fragen und Antworten



Tag 7


Kapitel 14 - Frames und verknüpfte Fenster

Bevor Sie an Tag 8, »Live aufs Web gehen«, alle Einzelheiten darüber lernen, wie Sie Ihre eigene Web Site einrichten können, müssen wir noch ein letztes Thema behandeln: das der Frames. Frames sind ein sehr fortschrittliches, neues Merkmal, das es ermöglicht, sich Webseiten auf völlig neue Weise anzuschauen. Frames wurden mit Netscape 2 eingeführt und werden in allen höheren Versionen wie auch im Internet Explorer 3 und höher unterstützt. Selbst im Hinblick auf die wachsende Anzahl der Browser, die Frames unterstützen, sind Seiten mit Frames nicht einfach abwärtskompatibel zu Browsern, die Frames nicht unterstützen, wie das z.B. bei Lynx der Fall ist.


In diesem Kapitel werden Sie mit den folgenden Themen vertraut gemacht:



Frames und wie sie unterstützt werden

Die meisten der Merkmale und Tags, die in den vorigen Kapiteln besprochen wurden, funktionieren im allgemeinen auf fast jedem Web-Browser. Die Erscheinung der Seite wird vielleicht nicht ganz Ihren Erwartungen entsprechen, wenigstens können aber Leute mit älteren Web-Browsern noch den Text und die auf der Seite enthaltenen Verknüpfungen erkennen.


In diesem Kapitel werden Sie jedoch einige neue Tags kennenlernen - nämlich solche, die Frames erzeugen, Webseiten, die mit Frames erzeugt wurden, können wegen der Beschaffenheit dieser Kennungen in anderen Browsern überhaupt nicht dargestellt werden. Die Tatsache, daß Frames in anderen Web-Browsern überhaupt nicht dargestellt werden können, hat sie zu einem der am heißesten diskutierten Themen in der »Netscape gegen den Rest der Welt«-Debatte gemacht.


Netscape beabsichtigt, die neuen Frame-Tags für die Anerkennung als Teil des neuen HTML-3.2-Standards vorzuschlagen; aber die zur Drucklegung dieses Buchs verfügbare Spezifikation berücksichtigte Frames nicht. Frames wurden für die nächste HTML-Spezifikation, Codename Cougar, vorgeschlagen.

Nachdem dies gesagt worden ist, können wir uns mit der Tatsache beschäftigen, daß Frames eine völlig neue Ebene der Layoutkontrolle beim Publizieren im Web eröffnen, wenn Sie sich darauf beschränken wollen, Ihre Präsentationen speziell für Netscape bzw. den Internet Explorer zu erstellen. Nehmen Sie die Beispiel-Webseite, die von Netscape Communications gestaltet wurde, als Anschauungsobjekt. Sie wird in Abbildung 14.1 gezeigt.


siehe Abbildung

Abbildung 14.1:
Eine Beispiel-Webseite mit Frames

Auf diesem einzelnen Bildschirm hat Netscape Informationen integriert, die vorher viele verschiedene Bildschirmflächen benötigt hätten. Da die Informationen, die auf der Seite abgebildet sind, in verschiedene Bereiche oder Frames eingeteilt sind, kann der Inhalt eines einzigen Frame außerdem aktualisiert werden, ohne daß die Inhalte anderer Frames davon beeinträchtigt würden. Wenn Sie z.B. eine beliebige Verknüpfung, die mit den Fotos im linken Rahmen verbunden ist, anklikken, wird der Inhalt des großen Rahmens auf der rechten Seite automatisch aktualisiert, um persönliche Angaben des ausgewählten Mitarbeiters darzustellen. Dabei werden die Inhalte des linken und des unteren Frame nicht beeinflußt.


Abgesehen von der Demoseite, die von Netscape angeboten wird, statten gegenwärtig auch andere Sites ihre Seiten mit Frames aus. Einer dieser Sites, den Sie ganz praktisch finden könnten, ist die Farbindexseite, die von InfiNet entwickelt wurde, Sie können sie unter http://www.infi.net/colorindex.html erreichen (siehe Abbildung 14.2). Diese Seite bietet eine praktische Nachschlagemöglichkeit für viele der Farben, die Sie für Hintergründe und Textfarben einsetzen können, wobei die Farben im Frame auf der linken Seite und die Ergebnisse im Frame auf der rechten gezeigt werden.


siehe Abbildung

Abbildung 14.2:
Der Farbindex von InfiNet


Mit verknüpften Fenstern arbeiten

Bevor Sie sich ansehen, wie Frames auf eine Seite eingefügt werden, müssen Sie zuerst etwas über ein neues Attribut des <A>-Tag lernen, das TARGET-(Ziel)-Attribut. Dieses neue Attribut wird folgendermaßen verwendet:


TARGET="window_name"


Normalerweise, wenn Sie eine Hyperverknüpfung anklicken, ersetzt der Inhalt der neuen Seite die aktuelle Seite im Browser-Fenster. In einer Umgebung, die ohnehin aus Fenstern besteht, gibt es aber keinen technischen Grund dafür, daß der Inhalt der neuen Seite nicht in einem neuen Fenster dargestellt wird, wobei der Inhalt der aufrufenden Seite weiterhin auf dem Bildschirm in seinem eigenen Fenster verbleibt.


Das TARGET-Attribut erlaubt Ihnen, genau dies zu tun, indem es den Web-Browser anweist, die Informationen, auf die eine Hyperverknüpfung hinweist, in einem neuen Fenster namens window_name darzustellen. Sie können das neue Fenster beliebig benennen, mit der einzigen Ausnahme, daß die Namen nicht mit einer Unterstreichung (_) beginnen dürfen. Namen, die mit einer Unterstreichung anfangen, sind nämlich für spezielle TARGET-Werte reserviert, über die Sie später in der Sektion »Magische TARGET-Namen« etwas lernen werden.


Wenn Sie das Target-Attribut innerhalb eines <A>-Tag verwenden, prüft Netscape zuerst, ob ein Fenster mit dem Namen window_name existiert. Wenn es existiert, wird der gegenwärtige Inhalt von window_name durch das Dokument ersetzt, auf das die Verknüpfung zeigt. Wenn andererseits momentan kein Fenster mit dem Namen window_name existiert, wird ein neues Browser-Fenster geöffnet, dem der Name window_name gegeben wird. Das Dokument, auf das die Hyperverknüpfung zeigt, wird dann in das neu geöffnete Fenster geladen.



Übung 14.1 Arbeiten mit Fenstern

In dieser Übung werden Sie vier verschiedene HTML-Dokumente erzeugen, die Hyperverknüpfungen mit TARGET-Attribut enthalten. Diese Hyperverknüpfungen werden dazu eingesetzt, zwei neue Fenster namens first_window und second_window zu öffnen, wie es in Abbildung 14.3 gezeigt wird. Das obere Fenster ist das ursprüngliche Web-Browser-Fenster, das first_window ist unten links und das second_window befindet sich unten rechts.


siehe Abbildung

Abbildung 14.3:
Hyperverknüpfungen können so konstruiert sein, daß für jede Seite, auf die sie verweisen, ein neues Fenster geöffnet wird.

Zuerst erstellen Sie das Dokument, das im Haupt-Browser-Fenster dargestellt werden soll, welches in Abbildung 14.4 gezeigt ist, indem Sie Ihren Texteditor öffnen und den folgenden Code eingeben:


<HTML>
<HEAD>
<TITLE>Target Parent Window</TITLE>
</HEAD>
<BODY>
<H1>Target Parent Window</H1>
<P>
<A HREF="target2.html" TARGET="first_window">Open</A>
a new window called first_window.
<BR>
<A HREF="target3.html" TARGET="second_window">Open</A>
a new window called second_window.
</P>
<P>
<A HREF="target4.html" TARGET="first_window">Load</A>
some new text into first_window.
</P>
</BODY>
</HTML>


siehe Abbildung

Abbildung 14.4:
Das Ziel-Ursprungs-Fenster

Speichern Sie diesen HTML-Quellcode als target1.html.


Als nächstes erstellen Sie ein Dokument namens target2.html, das so aussieht wie die in Abbildung 14.5 dargestellte Seite, indem Sie den folgenden Code eingeben:


<HTML>
<HEAD>
<TITLE>Target First Window</TITLE>
</HEAD>
<BODY>
<H1>Target First Window</H1>
</BODY>
</HTML>


siehe Abbildung

Abbildung 14.5:
target2.html wird hier im Web-Browser-Fenster namens first_window dargestellt

Nachdem Sie target2.html gespeichert haben, erschaffen Sie ein anderes Dokument mit dem Namen target3.html, siehe hierzu Abbildung 14.6. Und zwar tun Sie dies durch Eingabe des folgenden Codes:


<HTML>
<HEAD>
<TITLE>Target Second Window</TITLE>
</HEAD>
<BODY>
<H1>Target Second Window</H1>
</BODY>
</HTML>


siehe Abbildung

Abbildung 14.6:
target3.html wird hier im Web-Browser-Fenster namens second_window dargestellt

Und schließlich erstellen Sie ein viertes Dokument namens target4.html, das so aussieht:


<HTML>
<HEAD>
<TITLE>Target First Window</TITLE>
</HEAD>
<BODY>
<H1>Target First Window</H1>
<P>But this time with new text...</P>
</BODY>
</HTML>


Um die Übung abzuschließen, laden Sie target1.html in Ihren Web-Browser und klicken die oberen beiden Hyperverknüpfungen an. Diese Handlung öffnet zwei neue Fenster mit dem Inhalt des entsprechenden Ziels.


Beachten Sie, daß die neuen Fenster wahrscheinlich nicht so nebeneinanderliegen werden wie die, die in Abbildung 14.3 gezeigt werden, sondern sich wahrscheinlich überlappen werden.


Schließlich klicken Sie die dritte Hyperverknüpfung an, um den Inhalt von first_window mit der Webseite zu ersetzen, die durch target4.html definiert wird, sie wird in Abbildung 14.7 gezeigt.


siehe Abbildung

Abbildung 14.7:
target4.html wird hier im Web-Browser-Fenster namens first_window dargestellt


Die <BASE>-Kennung

Wenn Sie das TARGET-Attribut mit Verknüpfungen verwenden, werden Sie manchmal in eine Situation kommen, in der alle oder die meisten der Hyperverknüpfungen auf einer Webseite auf dasselbe Fenster zeigen - dies passiert vor allem, wenn Sie Frames verwenden, wie Sie noch im folgenden Abschnitt feststellen werden.


In solchen Fällen können Sie, anstatt ein TARGET-Attribut bei jedem <A>-Tag einzufügen, eine andere Kennung einsetzen, die <BASE> genannt wird, mit der Sie ein globales Ziel für alle Verknüpfungen auf einer Webseite definieren. Die <BASE>-Kennung erscheint in der folgenden Form:


<BASE TARGET="window_name">


Wenn Sie die <BASE>-Kennung zwischen den <HEAD>...</HEAD>-Kennungen eines Dokuments verwenden, wird jede <A>-Kennung, die kein korrespondierendes TARGET-Attribut hat, das Dokument, auf das sie zeigt, in dem Fenster abbilden, das durch <BASE TARGET="window_name"> bestimmt wird. Wenn z.B. die Kennung <BASE TARGET="window_name"> im HTML-Quellcode für target1.html enthalten gewesen wäre, hätte man die drei Hyperverknüpfungen auf folgende Weise schreiben können:


</HTML>
<HEAD>
<TITLE>Target Parent Window</TITLE>
<BASE TARGET="first_window"> <! - hier BASE TARGET="Wert" einfuegen ->
</HEAD>
<BODY>
<H1>Target Parent Window</H1>
<P>
<A HREF="target2.html">Open</A> <! - hier kann TARGET weggelassen werden ->
a new window called first_window.
<BR>
<A HREF="target3.html" TARGET="second_window">Open</A>
a new window called second_window.
</P>
<P>
<A HREF="target4.html">Load</A> <! - hier kann TARGET weggelassen werden ->
some new text into first_window.
</P>
</BODY>
</HTML>


In diesem Fall werden target2.html und target3.html in das Standard-Fenster geladen, das vom <BASE>-Tag festgelegt wurde; target3.html überschreibt diese Voreinstellung, indem es sein eigenes Ziel-Fenster definiert.


Sie können das Voreinstellungs-Fenster, das durch das <BASE>-Tag festgelegt wurde, durch die Verwendung eines (von zwei) speziellen Fenster-Namen überschreiben. Wenn Sie TARGET="_blank" in einer Hyperverknüpfung einsetzen, wird ein neues Browser-Fenster ohne Namen geöffnet. Sie können auch alternativ TARGET="_self" einsetzen, so daß das aktuelle Fenster anstelle des durch das <BASE>-Tag definierte benutzt wird.


Folgendes sollten Sie sich einprägen: Wenn Sie kein Ziel über das TARGET-Attribut des <BASE>-Tag und auch keines über das <A>-Tag eines Link bieten, dann wird das neue Dokument in den selben Frame geladen, in dem sich auch das Dokument mit dem Link befindet.


Frames anwenden

Die Einführung von Frames durch Netscape 2.0 leitet eine neue Ära für Web-Publizisten ein. Mit Frames können Sie Webseiten erstellen, die völlig anders aussehen und sich anders anfühlen als herkömmliche Webseiten - z.B. Seiten mit verschachtelten Tabellen, Logos, Fußnoten und Rollbalken, um nur einige der Merkmale von Frames zu nennen.


Gleichzeitig verändern Frames die Bedeutung einer »Seite« für den Browser und den Leser. Im Unterschied zu all den vorigen Beispielen, die eine einzelne HTML-Seite benutzen, um einen Bildschirm voller Informationen zu zeigen, besteht bei Webseiten, die mit Frames erstellt wurden, ein einzelner Bildschirm tatsächlich aus einer Anzahl unterschiedlicher HTML-Dokumente, die miteinander in Verbindung stehen. Abbildung 14.8 zeigt, wie ein Minimum von vier unterschiedlichen Dokumenten notwendig ist, um den Bildschirm hervorzubringen, der bereits in Abbildung 14.1 gezeigt wurde.


siehe Abbildung

Abbildung 14.8:
Für jeden einzelnen Frame mußten separate HTML-Dokumente erzeugt werden.

Das erste HTML-Dokument, das Sie erzeugen müssen, wird Frame-Definitionsdokument genannt. In diesem Dokument geben Sie den HTML-Code an, der das Layout jedes einzelnen Frame bestimmt, und Sie bestimmen auch die Namen der einzelnen HTML-Dokumente, welche die physische Information enthalten, die dargestellt werden soll. Die drei verbleibenden HTML-Dokumente enthalten die normalen HTML-Tags, die den physischen Inhalt jedes einzelnen Frame-Bereichs beschreiben. Dies sind die Dokumente, auf die sich das Frame-Definitionsdokument bezieht.


Das Frame-Definitionsdokument ist die Seite, die das Layout für jeden Frame und die Namen der HTML-Dokumente enthält, die diese Frames füllen werden.


Die <FRAMESET>-Kennung

Um ein Frame-Definitionsdokument zu erstellen, benutzen Sie die <FRAMESET>-Kennung. Wenn sie in einem HTML-Dokument verwendet wird, ersetzt die <FRAMESET>-Kennung wie hier die <BODY>-Kennung:


<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
hier gehoert Ihre Frame-Definition hin.
</FRAMESET>
</HTML>


Es ist wichtig, von Anfang an zu verstehen, wie sich ein Frame-Definitionsdokument von einem normalen Dokument unterscheidet. Wenn Sie ein <FRAMESET>-Tag in einem HTML-Dokument verwenden, können Sie nicht gleichzeitig eine <BODY>-Kennung anwenden. Im Grunde genommen schließen diese beiden Kennungen einander aus. Außerdem sollten auch keine anderen Formatierungs-Tags, Hyperverknüpfungen oder Dokumententext in einem Frame-Definitionsdokument enthalten sein, mit einer speziellen Ausnahme (die <NOFRAME>-Kennung), über die Sie im Abschnitt »Die <NOFRAME>-Kennung« noch mehr erfahren werden. Die <FRAMESET>-Tags enthalten außschließlich die Definitionen der Frames, die in einem Dokument verwendet werden, also die Struktur der Seite.


Das <FRAMESET>-Tag wird in der für HTML 4.0 vorgeschlagenen Spezifikation mit zwei möglichen Attributen, COLSund ROWS, unterstützt.


Ein Frameset sind mehrere Frames, die von oben <FRAMESET>-Kennungen im Frame-Definitionsdokument eingeschlossen werden.


Das COLS-Attribut

Wenn Sie ein <FRAMESET>-Tag definieren, müssen Sie eines von zwei Attributen als Teil der Kennungsdefinition einfügen. Das erste dieser Attribute ist COLS, das folgendermaßen angewendet wird:


<FRAMESET COLS="spaltenbreite, spaltenbreite, ...">


Das Attribut COLS (Spalten) veranlaßt Netscape, den Bildschirm in mehrere vertikale Frames aufzuteilen, deren Breite durch die Werte der Spaltenbreite angegeben werden. Diese Werte werden durch Kommata getrennt und können auf drei Arten definiert werden: als genauer Pixel-Wert, als Prozentsatz der totalen Breite des <FRAMESET> oder durch ein Sternchen (*). Wenn Sie * benutzen, benutzt Netscape so viel Platz wie möglich für den aufgeführten Frame.


Wenn es in einer vollständigen Frame-Definition enthalten ist, bringt das folgende <FRAMESET>-Tag einen Bildschirm mit drei vertikalen Frames hervor (vgl. Abbildung 14.9). Der erste Frame ist 100 Pixel breit, der zweite 50 Prozent der Bildschirmbreite und der dritte benutzt den restlichen Platz.


<FRAMESET COLS="100,50%, *">


siehe Abbildung

Abbildung 14.9:
Das Attribut COLS legt fest, wie viele vertikale Frames oder Spalten in einem Frame-Set enthalten sind.

Da Sie Webseiten gestalten, die auf verschieden großen Bildschirmen betrachtet werden, sollten Sie absolute Frame-Größen sparsam verwenden. Wenn Sie doch einmal absolute Größen angeben, stellen Sie sicher, daß einer der anderen Frames mit einem * definiert wurde, um die verbleibende Bildschirmbreite einzunehmen.

Wenn Sie einen Frame-Set mit drei gleich großen Spalten erstellen wollen, verwenden Sie COLS="*, *, *". Auf diese Weise brauchen Sie sich nicht mit Prozentsätzen abzugeben, da Netscape jedem Frame, dessen Breite durch * bestimmt wird, einen gleichgroßen Platz zuweist.


Das ROWS-Attribut

Das ROWS-Attribut (Reihe, Zeile) arbeitet genauso wie das COLS-Attribut, außer daß es den Bildschirm in horizontale Frames statt in vertikale einteilt. Um z.B. den Bildschirm in zwei gleich hohe Frames einzuteilen, wie es in Abbildung 14.10 gezeigt wird, könnten Sie eine der beiden folgenden Methoden anwenden:


<FRAMESET ROWS="50%, 50%">
<FRAMESET ROWS="*, *">


siehe Abbildung

Abbildung 14.10:
Das ROWS-Attribut bestimmt die Anzahl der horizontalen Frames oder Reihen in einem Frame-Set.

Wenn Sie eines der vorhergehenden Beispiele selbst ausprobieren, werden Sie feststellen, daß das <FRAMESET>-Tag anscheinend nicht funktioniert. Das liegt daran, daß momentan noch keine Inhalte für die Reihen oder Spalten im Frame-Set definiert worden sind. Um Inhalte festzulegen, wenden Sie die <FRAME>-Kennung an, die im nächsten Abschnitt besprochen wird.


Die <FRAME>-Kennung

Nachdem Sie Ihren grundlegenden Frame-Set festgelegt haben, müssen Sie mit jedem Frame noch ein HTML-Dokument verbinden. Dazu wenden Sie die <FRAME>-Kennung mit der folgenden Syntax an:


<FRAME SRC="document URL">


Für jeden Frame, der innerhalb der <FRAMESET>-Kennung definiert wird, müssen Sie ein entsprechendes <FRAME>-Tag ergänzen:


<FRAMESET ROWS="*, *, *">
<FRAME SRC="document1.html">
<FRAME SRC="document2.html">
<FRAME SRC="document3.html">
</FRAMESET>


In diesem Beispiel wurde ein Frame-Set mit drei gleich hohen horizontalen Frames definiert (vgl. Abbildung 14.11). Der Inhalt von document1.html wird im ersten Frame dargestellt, der von document2.html im zweiten und der von document3.html im dritten Frame.


siehe Abbildung

Abbildung 14.11:
Das <FRAME>-Tag wird benutzt, um den Inhalt jedes Frame zu definieren.

Wenn Sie Frame-Definitionsdokumente erstellen, kann es hilfreich sein, die <FRAME>-Tags einzurücken, so daß sie sich von den <FRAMESET>-Kennungen in Ihrem Quellcode abheben. Sie beeinflussen damit das Aussehen der resultierenden Webseiten nicht, gestalten aber dadurch den HTML-Quellcode übersichtlicher.


Zusätzliche Attribute

Sie können den <FRAME>-Kennungen noch ein paar extra Attribute hinzufügen, durch die Sie mehr Kontrolle darüber erhalten, wie der Benutzer mit Ihren Frames umgeht. Tabelle 14.1 gibt Einzelheiten darüber an. Alle diese Attribute werden in der für HTML 4.0 vorgeschlagenen Spezifikation unterstützt.


Tabelle 14.1: Kontroll-Attribute für die <FRAME>-Kennung

Attribut

Wert

Beschreibung

SCROLLING

AUTO
(Voreinstellung)

Wenn der Inhalt eines Frame mehr Platz einnimmt, als für den Frame zur Verfügung steht, stattet Netscape den Frame automatisch mit Rollbalken aus. Die Rollbalken befinden sich entweder an der Seite oder am unteren Rand des Frame, so daß der Benutzer durch das Dokument blättern kann.

SCROLLING

NO

Wenn Sie SCROLLING auf NO stellen, setzen Sie damit die Verwendung von Rollbalken für den aktuellen Frame außer Kraft. (Beachten Sie, daß der Benutzer, wenn Sie SCROLLING auf NO einstellen, nicht mehr zu dem Text blättern kann, der nicht in den Rahmen paßt.)

SCROLLING

YES

Wenn Sie SCROLLING auf YES stellen, wird der Frame mit Rollbalken ausgestattet, auch wenn diese unnötig sind (d.h. wenn der Text ganz in den Frame paßt).

NORESIZE

 

Benutzer können die Position und Größe der Umrandung jedes Frame auf dem Bildschirm standardgemäß ändern, indem Sie die Umrandung mit der Maus festhalten und herumziehen. Um die Umrandungen des Frame zu sperren, so daß sie nicht mehr bewegt werden können, wenden Sie das NORESIZE-(keine Größenveränderung)-Attribut an.

MARGINHEIGHT

Pixel

MARGINHEIGHT gibt die Höhe der Umrandung an, die einen Frame oben und unten abschließt. Sie können MARGINHEIGHT durch eine Zahl als Pixel-Wert festlegen.

MARGINWIDHT

Pixel

Das MARGINWIDTH-(Randbreite)-Attribut erlaubt es Ihnen, den Rand links und rechts eines Frame mit einer Zahl festzulegen, die in Pixeln angegegben wird.


<NOFRAME>-Kennung

Wenn Sie ein Frame-Definitionsdokument in einen Web-Browser laden, der keine Frames unterstützt, bekommen Sie eine leere Seite. Um dieses Problem zu umgehen, stellt Netscape einen Kennungsblock namens <NOFRAME> zur Verfügung, mit dem Sie das sonst fehlende BODY-Element des Frame-Set simulieren können. Die <NOFRAME>-Kennung hat die folgende Syntax:


<HTML>
<HEAD>
<TITLE> Seitentitel </TITLE>
</HEAD>
<FRAMESET>
hier gehoert Ihre Frame-Definition hin.
<NOFRAME>
Hier koennen Sie beliebigen Text, Links und Tags einfuegen.
</NOFRAME>
</FRAMESET>
</HTML>


Der Text, den Sie innerhalb des <NOFRAME>-Blocks einfügen, wird von Browsern mit Frame-Unterstützung nicht angezeigt, wenn diese Seite jedoch in einem Browser geladen wird, der Frames nicht unterstützt, wird er anstelle der Frames auftauchen. Indem Sie den Inhalt von Frames mit den alternativen Tags innerhalb von <NOFRAMES> verbinden, können Sie Seiten gestalten, die in beiden Arten von Browsern fast gleich gut funktionieren.



Frame-Ränder verändern

Beachten Sie bitte, daß alle Frames in diesem Kapitel dicke Ränder haben, die sie von einander trennen. In der ursprünglichen Implementation der Frames in Netscape 2.0 konnten Sie nur wenig gegen diese Situation tun. Mit der Einführung von Netscape 3.0 und Internet Explorer 3.0 wurden neue Attribute des <FRAME>- und <FRAMESET>-Tag verfügbar, die eine gewisse Kontrolle über die Farbe und die Breite der Frame-Ränder bieten.


Beginnen wir mit dem <FRAME>-Tag. Durch die Verwendung von zwei Attributen, BORDERCOLOR und FRAMEBORDER, können Sie die Ränder an- und abschalten und deren Farbe festlegen. Dem BORDERCOLOR-Attribut kann jeder gültige Farbwert entweder als Name oder als Hexadezimal-Tripel zugewiesen werden. Für FRAMEBORDER gibt es zwei zulässige Werte: YES und NO.


Wenn Sie die Anzeige der Ränder abschalten, zeigt Netscape zwar die Standard-3-D-Ränder an aber es läßt für die Ränder entsprechend Freiraum.

In HTML 4.0 ist bisher nur das FRAMEBORDER-Attribut aufgeführt. Das BORDERCOLOR-Attribut stellt eine Erweiterung dar.

Die folgende Zeile erzeugt z.B. einen Frame mit einem dunkel blauen Rand (dies wird durch F#020A33 festgelegt):


<FRAME FRAMEBORDER=YES BORDERCOLOR="#020A33" SRC="irgendeineDatei.html">


Beide Attribute können auch im <FRAMESET>-Tag verwendet. Hier definieren sie dann die Standardeinstellung für das gesamte Frame-Set in Netscape und dem Microsoft Internet Explorer. HTML 4.0 bietet allerdings keines der beiden Attribute in Verbindung mit dem <FRAMESET>-Tag.


Es kann natürlich zu Verwirrungen kommen, wenn farbige Ränder definiert werden. In der folgenden Frame-Set-Definition z.B. ergibt sich ein Konflikt, da die beiden Frames über einen gemeinsamen Rand verfügen. Diesem Rand wird aber in den einzelnen Frames jeweils eine andere Farbe zugewiesen:


<FRAMESET ROWS="*,*" FRAMEBORDER=NO>
<FRAME FRAMEBORDER=YES BORDERCOLOR=yellow SRC="firstfile.html">
<FRAME BORDERCOLOR=blue SRC="secondfile.html">
</FRAMESET>


Zusätzlich sind in der Frame-Set-Definition die Ränder abgeschaltet. Der erste Frame soll allerdings über Ränder verfügen. Wie wird dieses Problem gelöst? Netscape hat drei einfache Regeln festgelegt, die in solchen Situationen angewendet werden:


Ein weiteres Attribut des erlaubt es Ihnen die breite des Rahmens zu kontrollieren: Das BORDER-Attribut legt über einen numerischen Wert die Breite aller Ränder innerhalb des Frame-Set in Pixel fest. Sie können das BORDER-Attribut nur in dem Frame-Set verwenden, das in einer verschachtelten Frame-Set-Struktur alle anderen beinhaltet. Alle anderen Verwendungen werden ignoriert. Die Abbildungen 14.12 und 14.13 verdeutlichen den Effekt des BORDER-Attributs.


In Abbildung 14.12 sehen Sie ein Frame-Set mit der Definition: <FRAMESET BORDER=6 ROWS="25%,*">.


Das Frame-Set in Abbildung wurde dagegen über die folgende Anweisung definiert: <FRAMESET BORDER=0 ROWS="25%,*">.


Das BORDER-Attribut wird im der aktuellen Entwurf der HTML-4.0-Spezifikation nicht unterstützt.

siehe Abbildung

Abbildung 14.12:
Ein Frame-Set mit einem Randbreite von 6 Pixeln

siehe Abbildung

Abbildung 14.13:
Ein Frame-Set mit einer Randbreite von 0 Pixeln


Komplexe Frame-Sets gestalten

Die Frame-Sets, die Sie bisher kennengelernt haben, stellen die grundlegendsten Typen von Frames dar, die dargestellt werden können. Im alltäglichen Gebrauch werden Sie solche einfachen Frame-Designs jedoch nur selten anwenden. Mal ganz abgesehen von den einfachsten Sites, werden Sie wahrscheinlich komplexere Frame-Sets aufbauen.


Um Ihnen deshalb dabei zu helfen, die möglichen Kombinationen von Frames, Verknüpfungen, Bildern und Dokumenten zu verstehen, die bei einer Webseite auftreten können, erforscht der abschließende Abschnitt dieses Kapitels das Thema der komplexen Frame-Sets.



Übung 14.2 Reihen und Spalten kombinieren

Das Frame-Layout, das in Abbildung 14.1 am Anfang des Kapitels gezeigt wird, liefert eine gute Grundlage für ein einfaches Beispiel, mit dem Sie erforschen können, wie Sie Frame-Sets in komplexeren Anordnungen kombinieren können. Um Sie an das grundlegende Layout zu erinnern, zeigt Abbildung 14.12 einen Bildschirm mit einem ähnlichen Design, das allerdings noch keinen Inhalt enthält.


Wenn Sie komplexe Frame-Layouts gestalten, ist die Verwendung eines Drehbuchs ein unschätzbares Hilfsmittel. Mit einem Drehbuch können Sie die Struktur eines Frame-Set skizzieren, und es kann auch unschätzbare Dienste leisten, wenn Sie Hyperverknüpfungen hinzufügen, wie Sie im nächsten Beispiel, »Benannte Frames und Hyperverknüpfungen verwenden«, sehen werden.

siehe Abbildung

Abbildung 14.14:
Die Übung »Reihen und Spalten kombinieren«

In Abbildung 14.14 wird der obere Abschnitt des Bildschirms in zwei vertikale Frames eingeteilt, und der dritte Frame, der sich unten auf der Seite befindet, überspannt die gesamte Breite des Bildschirms. Um ein Frame-Definitionsdokument zu erstellen, das dieses Layout beschreibt, öffnen Sie Ihren Texteditor, und geben Sie die folgenden grundlegenden strukturellen HTML-Definitionen ein:


<HTML>
<HEAD>
<TITLE>Complex Frames Exercise</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>


Als nächstes müssen Sie entscheiden, ob Sie ROWS- und COLS-Attribute in ihrem Basis-<FRAMESET> verwenden wollen. Dazu sehen Sie sich Ihr Storyboard an - in diesem Fall Abbildung 14.2 - und versuchen Sie herauszubekommen, ob es Frame-Bereiche gibt, die sich quer über den Bildschirm erstrecken oder von oben nach unten. Wenn es Frames gibt, die sich von oben nach unten erstrecken, müssen Sie mit dem COLS-Frame-Set beginnen; andernfalls fangen Sie mit dem ROWS-Frame-Set an. Wenn sich jedoch keine Frames in irgendeiner Richtung über den gesamten Bildschirm erstrecken, sollten Sie mit dem COLS-Frame-Set anfangen.


Um es einfacher auszudrücken, folgen hier noch mal drei leicht zu merkende Regeln:


Die Grund hinter der Regel »von links nach rechts ROWS benutzen« kommt von der Art und Weise, wie Netscape Frames aufbaut. Jede getrennte <FRAMESET>-Definition kann den Bildschirm (oder den Frame) entweder vertikal oder horizontal einteilen, nicht jedoch in beide Richtungen gleichzeitig. Deshalb müssen Sie beim Definieren von Frame-Sets in einer logischen Reihenfolge vorgehen, wenn Sie das gewünschte Layout erreichen wollen.

Der untere Frame in Abbildung 14.2 erstreckt sich von einer Seite des Bildschirms zur anderen. Wenn Sie die eben erwähnten Regeln anwenden, bedeutet das, daß Sie mit dem ROWS-Frame-Set beginnen müssen. Diesen definieren Sie folgendermaßen:


<FRAMESET ROWS="*, 80">
<FRAME SRC="dummy.html"> <!- dies ist der Frame fuer Reihe 1 ->
<FRAME SRC="dummy.html"> <!- dies ist der Frame fuer Reihe 2 ->
</FRAMESET>


Bisher haben Sie erreicht, daß Ihr Bildschirm in zwei Abschnitte aufgeteilt ist: ein kleiner Frame unten, der 80 Pixel hoch ist, und ein großer Frame oben, der den verbleibenden Platz einnimmt. Es wurden auch noch zwei <FRAME>-Tags eingefügt, um den Inhalt eines jeden Frame darzustellen.


Wenn Sie die grundlegende Struktur eines Frame-Set festlegen, wollen Sie sich normalerweise nicht mit solchen Details wie dem tatsächlichen Inhalt der Frames abgeben. Andererseits wird Ihr Frame-Set beim Testen in Netscape jedoch nicht ordnungsgemäß dargestellt, wenn die <FRAME>-Kennungen kein gültiges Dokument enthalten. Um dies zu umgehen, erstellen Sie ein kleines leeres Dokument namens dummy.html, das Sie dann für all Ihre Frame-Tests einsetzen können.


<FRAMESET>-Kennungen ineinander verschachteln

Als nächsten Schritt in diesem Vorgang spalten Sie den oberen Frame in zwei vertikale Frames. Sie erreichen dies, indem Sie einen zweiten <FRAMESET>-Block in den ursprünglichen <FRAMESET>-Block einbauen. Wenn ein <FRAMESET>-Block in einen anderen verschachtelt ist, muß der innere Block eines der <FRAME>-Tag des äußeren Frame-Set ersetzen.


Um deshalb den ursprünglichen oberen Frame in die beiden vertikalen Frame-Bereiche aufzuteilen, ersetzen Sie die <FRAME>-Kennung für den ersten Frame mit einem eingebetteten <FRAMESET>-Block. Auf diese Weise wird der Frame-Set dort eingebettet, wo sich vorher das <FRAME>-Tag befand, das nun ersetzt wird. Innerhalb des <FRAMESET>-Tag für diesen neuen Block müssen Sie dann noch ein COLS-Attribut definieren:


<FRAMESET ROWS="*, 80">
<FRAMESET COLS="30%, *"> <!- der Frame fuer Reihe 1 ->
<FRAME SRC="dummy.html"> <!- wurde ersetzt durch ->
<FRAME SRC="dummy.html"> <!- einen eingebetteten ->
</FRAMESET> <!- Frameset-Block ->
<FRAME SRC="dummy.html"> <!- dies ist der Frame fuer Reihe 2 ->
</FRAMESET>


Der eingebettete COLS-Frame-Set definiert zwei Spalten, von denen die erste 30% der Breite des eingebetteten Frame-Bereichs einnimmt und die zweite den verbleibenden Platz im verschachtelten Frame-Bereich ausfüllt. Außerdem sind innerhalb des <FRAMESET>-Blocks zwei <FRAME>-Kennungen eingebettet, die den Inhalt jeder Spalte definieren.


Wenn Prozentsätze innerhalb eines eingebetteten Frame-Set angewendet werden, dann beziehen sich diese auf den gesamten Bereich des eingebetteten Frame und nicht auf die gesamte Bildschirmgröße.

Schließlich speichern sie das fertige HTML-Dokument auf Ihrer Festplatte und testen es mit einem Frame-fähigen Browser. Wenn Sie eine Version eines anderen, nicht Frame-fähigen Web-Browser zur Verfügung haben, versuchen Sie, das Dokument dort ebenfalls zu laden. (Sie sollten mit einem anderen Browser allerdings nichts vom Frame-Set zu sehen bekommen.)



Benannte Frames und Hyperlinks anwenden

Wie bereits erwähnt, beschreibt das Frame-Definitionsdokument selbst nicht den Inhalt eines jeden Frame, sondern es sind die Dokumente, die vom SRC-Attribut innerhalb von <FRAME> angegeben werden, die den Text, die Bilder und die Tags enthalten, die vom Frame-Set dargestellt werden.


Wenn Sie deshalb das Frame-Definitionsdokument, das Sie in der vorhergehenden Übung aufgestellt haben, in eine voll funktionsfähige, Frame-basierte Webseite umwandeln wollen, müssen Sie ein stimmiges HTML-Dokument zu seiner Definition hinzufügen. Frames sind so effektiv, weil jedes HTML-Dokument, das Sie zuvor erstellt haben, jetzt zur Quelle (SRC) für einen individuellen Frame werden kann. Deswegen ist es jetzt ein leichtes, die HTML-Nachschlagedokumente, die Sie für jedes Kapitel erstellt haben, in einen Frame-Set zu integrieren.


Zuerst aber, damit Sie verstehen, was Sie jetzt gleich tun werden, zeigt Abbildung 14.13 das komplette Frame-Set, das Sie in dieser Übung erstellen werden.


siehe Abbildung

Abbildung 14.15:
Das HTML-Nachschlagedokument als Frame-Set


Fügen Sie Ihrem Frame-Set echte Dokumente hinzu

Der erste Schritt in diesem Prozeß ist einfach. Nehmen Sie das Frame-Set-Dokument, das Sie in der Übung 14.2, »Reihen und Spalten kombinieren«, erstellt haben, und speichern Sie eine Kopie davon in demselben Verzeichnis, in dem Sie die HTML-Nachschlagedokumente aufbewahren, die Sie bereits erzeugt haben. Nennen Sie die neue Datei html_frame.html.


Nachdem Sie diese neue Datei erstellt haben, verändern Sie die Verweise auf dummy.html, indem Sie statt dessen echte HTML-Dateien einsetzen (hier sind die Veränderungen fett gedruckt):


<FRAMESET ROWS="*, 80">
<FRAMESET COLS="30%, *">
<FRAME SRC="html_contents_frame.html">
<FRAME SRC="05notes_frame.html">
</FRAMESET>
<FRAME SRC="html_footer.html">
</FRAMESET>


Das erste <FRAME>-Tag zeigt jetzt auf eine Datei namens html_contents_frame.html, die eine Kopie der html_contents.html-Datei ist, mit der Sie in den vorigen Kapiteln gearbeitet haben. Ich habe hier den Namen geändert, um das Original zu schützen, da Sie noch einige Änderungen am Dokument vornehmen müssen. In der Zwischenzeit kopieren Sie einfach den Inhalt von html_contents.html zu der neuen Datei html_contents_frame.html.


Wenn Sie mit DOS arbeiten, müssen Sie Ihre Dateien anders benennen, z.B. cont_f.htm und 05not_f.htm.

Tun Sie das gleiche mit 05notes.html, indem Sie es zu 05notes_frame.html kopieren, und arbeiten Sie sich dann durch die anderen Kapiteldokumente und etwaige andere Seiten, zu denen sie in bezug stehen.


Als nächstes müssen Sie einige Änderungen an 05notes_frame.html vornehmen. In den vorherigen Übungen haben Sie jeder Seite <ADDRESS>-Blöcke und Navigations-Buttons hinzugefügt. Bei Frames brauchen Sie jedoch keines dieser Elemente hinzuzufügen, da deren Aufgaben in dieser Übung auf die eine oder andere Weise von den anderen Frames des Frame-Set übernommen werden. Deswegen sollten Sie die Unterschrift und die Navigations-Buttons vom Unterteil des 05notes_frame.html entfernen. Außerdem entfernen Sie alle anderen Hyperlinks, die die Seiten miteinander verknüpfen.


Schließlich müssen Sie noch ein neues HTML-Dokument namens html_footer.html erstellen. In dieses Dokument werden Sie die Informationen stecken, die zuvor im <ADDRESS>-Block Ihrer individuellen Seiten enthalten waren. Was Sie in dieses Dokument packen, bleibt Ihnen überlassen; vergessen Sie jedoch nicht, daß es in den kleinen, 80 Pixel hohen Frame unten auf dem Frame-Set passen muß.


Um Ihnen eine Idee davon zu vermitteln, wie Sie die Inhalte für das html_footer.html erzeugen können, zeige ich Ihnen hier einen Teil des HTML-Quellcodes, der für Abbildung 14.15 benutzt wurde:


<TABLE WIDTH="100%">
<TR>
<TD WIDTH="50%">
<ADDRESS>
Created by <B>Laura Lemay</B><BR>
Copyright (c) 1995,1996
</ADDRESS>
</TD>
<TD WIDTH="50%" ALIGN="RIGHT">
<ADDRESS>
Email: <A lemay@lne.com
">HREF="mailto:lemay@lne.com">lemay@lne.com</A><BR>
Homepage: <A HREF="http://www.lne.com/lemay/">
http://www.lne.com/lemay/</A>
</ADDRESS>
</TD>
</TR>
</TABLE>


Dieses Beispiel benutzt eine Tabelle ohne Rahmen, um meinen Namen auf die linke Bildschirmseite und meine E-Mail-Adresse auf die rechte zu bringen.



Individuelle Frames benennen

Wenn Sie html_frame.html in diesem Entwicklungsstadium in Netscape laden würden, sähen Sie einen Bildschirm, der dem in Abbildung 14.15 gezeigten sehr ähnlich wäre. Einige der Schriftgrößen und -abstände wären vielleicht verschieden, aber das allgemeine Aussehen wäre das gleiche. Wenn Sie jedoch auf irgendeinen der Hyperlinks im linken Frame klickten, bekämen Sie wahrscheinlich sehr seltsame Ergebnisse. Um es genau zu sagen, würde Netscape versuchen, die Inhalte der ausgewählten Datei in den linken Rahmen zu laden, wohingegen Sie das Dokument ja eigentlich in den rechten Rahmen laden wollten.


Um dies zu erreichen, müssen Sie eine leichte Veränderung am TARGET-Attribut vornehmen, wie ich schon zu Beginn des Kapitels erwähnt habe. Anstatt das TARGET jedoch auf ein neues Fenster zu richten, möchten Sie es auf einen der Frames des aktuellen Frame-Set zeigen lassen.


Dies erreichen Sie, indem Sie jedem Frame Ihres Frame-Sets einen Frame-Namen, auch Fenster-Name genannt, geben. Und zwar fügen Sie zu diesem Zweck ein NAME-Attribut innerhalb des <FRAME>-Tag mit der folgenden Syntax ein:


<FRAME SRC="document URL" NAME="frame name">
Um deshalb jedem der Frames im html_frame.html-Dokument einen Namen zuzuweisen, verändern Sie die <FRAME>-Tags dahingehend, daß sie so aussehen:
<FRAMESET ROWS="*, 80">
<FRAMESET COLS="30%, *">
<FRAME SRC="html_contents_frame.html" NAME="Contents">
<FRAME SRC="05notes_frame.html" NAME="Chapter">
</FRAMESET>
<FRAME SRC="html_footer.html" NAME="Footer">
</FRAMESET>


Diese nennt den linken Frame »Contents«, den rechten »Chapter« und den unteren Frame »Footer«. Danach speichern Sie die aktualisierte html_frame.html-Datei erneut und sind nun fast fertig mit der Übung.



Dokumente mit individuellen Frames verknüpfen

Jetzt brauchen Sie nur noch einige kleinere Veränderungen an html_contents_frame.html vorzunehmen, so daß jedes Dokument in den rechten Frame des Frame-Set geladen wird.


Vielleicht erinnern Sie sich vom Anfang des Kapitels noch daran, daß das TARGET-Attribut zusammen mit der <A>-Kennung verwendet wurde, um zu bestimmen, in welches Fenster ein Dokument geladen wird. Dasselbe Attribut wird eingesetzt, um zu kontrollieren, in welchen Frame ein Dokument geladen wird.


Bei unserer Übung wollen Sie erreichen, daß, wenn Sie ein Hyperlink im linken Frame anklicken, das entsprechende Dokument im rechten Frame geladen wird. Da Sie dem rechten Frame schon den Fenster-Namen »Chapter« gegeben haben, brauchen Sie jedem Tag innerhalb von html_inhalt_frame.html nur noch TARGET="Chapter" hinzuzufügen, um alle Dokumente im rechten Frame erscheinen zu lassen. Der folgende HTML-Quellcode zeigt, Ihnen wie dies geschieht:


<DT><A HREF="05notes_frame.html" TARGET="Chapter"><H3>Chapter 5</H3></A>
<DD>
<P>This chapter discusses document tags, headings,
character styles and the comment tag. </P>
<UL>
<LI><A HREF="05notes_frame.html#document_tags" TARGET="Chapter">
Document tags</A>
<LI><A HREF="05notes_frame.html#heading_tags" TARGET="Chapter">
Heading tags</A>
<LI><A HREF="05notes_frame.html#paragraph_tags" TARGET="Chapter">
Paragraph Formatting tags</A>
</UL>


Wenn Sie das neue Benennungssytem anwenden, mit dem wir zu Anfang dieses Kapitels angefangen haben, müssen Sie den HREF-Wert jedes <A>-Tag so ändern, daß er auf die neuen Namen jedes Dokuments hinweist. Aus 05notes.html wird so z.B. 05notes_ frame.html.

Sie haben auch die Möglichkeit, da jedes Tag innerhalb von html_inhalt_frame.html auf denselben Frame zeigt, die Kennung <BASE TARGET="wert"> einzusetzen. In diesem Fall brauchen Sie TARGET="Chapter" innerhalb jedes <A>-Tag nicht einzufügen. Statt dessen plazieren Sie folgendes im <HEAD>...</HEAD>-Block Ihres Dokuments:


<BASE TARGET="Chapter">


Die einzige andere Veränderung, die Sie noch an html_inhalt_frame.html vornehmen müssen, ist von kosmetischer Natur. Im ursprünglichen Dokument wird die Hauptüberschrit <H1> verwendet, diese Überschriftsgröße paßt jedoch nicht in den kleinen linken Frame. Deswegen sollten Sie sie folgendermaßen ersetzen:


<H2 ALIGN="CENTER">HTML Reference Table of Contents</H2>


Nachdem Sie nun all diese Veränderungen vorgenommen und diese neuen Dokumente erstellt haben, sollten Sie jetzt dazu in der Lage sein, html_frame.html in Netscape zu laden und alle Ihre HTML-Nachschlagedokumente zu betrachten, indem Sie diese vom Inhaltsverzeichnis im linken Frame auswählen.


Wenn Sie das Layout richtig hinkriegen wollen, nachdem alle Ihre Links gut funktionieren, können Sie noch einmal zurückgehen und mit der Größe der Reihen und Spalten experimentieren, die vom <FRAMESET>-Tag definiert werden. Bedenken Sie jedoch, daß die endgültige Darstellung eines Frame-Set immer noch von der Bildschirmgröße und dem Betriebssystem der Betrachter Ihres Dokuments bestimmt wird.


Magische TARGET-Namen

Sie können vier spezielle Werte für das TARGET-Attribut bestimmen, von denen Sie bereits zwei (_blank und _self) kennengelernt haben. Netscape nennt diese Werte magische TARGET-Namen (Zielnamen). Tabelle 14.2 führt diese magischen TARGET-Namen auf und beschreibt ihre Anwendung.


Tabelle 14.2: Magische TARGET-Namen

TARGET-Name

Beschreibung

TARGET="_blank"

(leeres Ziel) Zwingt das Dokument, das durch das <A>-Tag festgelegt ist, in einem neuen, »namenlosen« Fenster geladen zu werden.

TARGET"_self"

Lädt das Dokument, das durch das <A>-Tag bestimmt ist, in das Fenster oder den Rahmen, der das <A>-Tag beinhaltet. Dies kann nützlich sein, wenn das <BASE>-Tag einen anderen Frame als Ziel definiert ein bestimmter Link allerdings in den aktuellen Frame geladen werden muß.

TARGET="_parent"

Zwingt das Link dazu, im <FRAMESET>-Ursprungsdokument des gegenwärtigen Dokuments geladen zu werden. Wenn das aktuelle Dokument jedoch keinen Ursprung hat, wird TARGET="_self" angewandt.

TARGET="_top"

Zwingt das Link dazu, im vollen Web-Browser-Fenster zu laden, wobei der aktuelle <FRAMESET> ersetzt wird. Wenn das gegenwärtige Dokument sich jedoch bereits oben (= top) befindet, wird TARGET="_self" angewandt.


Floating Frames

Mit dem Internet Explorer 3.0 stellte Microsoft eine neue Variante der Frames vor: Floating Frames (Auch als Inline Frame bezeichnet). Dieses Konzept, das sich auch in der Cougar-Spezifikation wiederfindet, unterscheidet sich von der ursprünglichen Idee hinter den Frames, die von Netscape vorgestellt wurde. Dieser spezielle Frame-Typ befindet sich im Textfluß der HTML-Seite und fließt mit diesem mit - daher auch der Name (floating bedeutet soviel wie schwimmen).


Die Autoren der Cougar-Spezifikation haben im Bereich der Frame-Definition auch Floating Frames mit aufgenommen - allerdings mit Bedenken. Nach dem Entwurf kann nämlich der selbe Effekt über das <OBJECT>-Tag erreicht werden, was die Aufnahme dieses Frame-Typs in Frage stellt. Im Entwurf sind sie weiterhin enthalten und der Internet Explorer 3.0 unterstützt diese Technologie, was das erlernen dieser Technologie sinnvoll macht.

Floating Frames erzeugen Sie über das <IFRAME>-Tag. Genau wie Bilder erscheinen diese Frames innerhalb des Rumpfes des HTML-Dokuments (daher das »I« in <IFRAME>). Das <IFRAME>-Tag erlaubt es Ihnen ein HTML-Dokument an einer beliebigen Stelle in einem anderen HTML-Dokument einzufügen.


<IFRAME> Verfügt über diverse wesentliche Attribute, die alle - bis auf die als Internet-Explorer-Erweiterung gekennzeichneten - in dem HTML 4.0 Entwurf enthalten sind:


Da Sie mit der Anwendung von normalen Frames und Bildern innerhalb von Dokumenten vertraut sind, ist es ziemlich einfach das <FRAME>-Tag anzuwenden. Der folgende HTML-Quelltext z.B. fügt einen 200mal 200 Pixel großen Frame mit einem Rahmen ein und zeigt in diesem Frame das Dokument iframe.html an. Die Abbildung 14.16 zeigt das Ergebnis im Internet Explorer.


<HTML>
<HEAD>
<TITLE>IFRAME Example</TITLE>
</HEAD>
<BODY>
This is an In-line Frame (also known as a Floating Frame):
<IFRAME SRC="iframe.html" WIDTH=200 HEIGHT=200 FRAMEBORDER=1>
As you can see it just sits there in the middle of the document.
</BODY>
</HTML>


siehe Abbildung

Abbildung 14.16:
Ein Floating Frame


Zusammenfassung

Wenn Sie von diesem Kapitel Kopfschmerzen bekommen haben, sind Sie wahrscheinlich nicht allein. Obwohl die grundlegenden Konzepte, die hinter der Verwendung von Frames stehen, ziemlich einfach sind, ist ihre Anwendung doch ein wenig schwieriger zu verwirklichen. Deshalb ist die beste Methode mehr über Frames zu lernen die, damit zu experimentieren.


In diesem Kapitel haben Sie gelernt, wie Sie ein Dokument mit einem neuen oder bereits existierenden Fenster verknüpfen. Außerdem lernten Sie, wie Sie Frame-Sets aufbauen und sie miteinander verknüpfen können, indem Sie die in der Tabelle 14.3 aufgezählten Kennungen anwenden.


Tabelle 14.3: Die neuen Kennungen aus diesem Kapitel

Kennung

Attribut

Beschreibung

<BASE TARGET="Fenster">

 

Bestimmt das globale Link-Fenster für ein Dokument.

<FRAMESET>

 

Definiert die grundlegende Struktur eines Frame-Set.

 

COLS

Definiert die Anzahl der Frame-Spalten und deren Breite innerhalb eines Frame-Set.

 

ROWS

Bestimmt die Anzahl der Frame-Reihen und deren Höhe innerhalb eines Frame-Set.

 

FRAMEBORDER

Legt fest, ob im Frame-Set-Rahmenlinien zwischen den Frames angezeigt werden sollen.

 

BORDERCOLOR

Gibt die Farbe der Rahmen in einem Frame-Set an.

 

BORDER

Definiert die Breite des Rahmens in Pixeln.

<FRAME>

 

Legt den Inhalt eines Frame innerhalb eines Frame-Set fest.

 

SRC

Die URL des Dokuments, das innerhalb des Frame dargestellt werden soll.

 

MARGINWIDTH

Die Breite des Randes links und rechts vom Frame, angegeben als Anzahl der Pixel.

 

MARGINHEIGHT

Die Breite des Randes ober- und unterhalb des Frame-Inhalts, gemessen in Pixeln.

 

SCROLLING

Schaltet das Display von Rollbalken für einen Frame ein oder aus. Erlaubte Werte sind YES, NO oder AUTO.

 

NORESIZE

Verhindert, daß der Anwender die Frame-Größe verändern kann.

 

FRAMEBORDER

Legt fest, ob im Frame Rahmenlinien zwischen den Frames angezeigt werden sollen.

 

BORDERCOLOR

Gibt die Farbe der Rahmen in einem Frame-Set an.

<IFRAME>

 

Definiert einen Inline Frame.

 

SRC

Gibt die URL des HTML-Dokuments an, das in dem Frame angezeigt werden soll.

 

NAME

Legt den Namen des Frame fest, der für Verknüpfungen bzw. Zielangaben verwendet werden kann.

 

WIDTH

Legt die Breite des Frame in Pixeln fest.

 

HEIGHT

Legt die Höhe des Frame in Pixeln fest.

 

MARGINWIDTH

Legt die Breite des Randes in Pixeln fest.

 

MARGINHEIGHT

Legt die Höhe des Randes in Pixeln fest.

 

SCROLLING

Gibt an, ob der Frame über Bildlaufleisten verfügen soll. Mögliche Werte sind YES, NO oder AUTO.

 

FRAMEBORDER

Gibt an, ob der Frame ein Rahmen anzeigen soll. Mögliche Werte sind 1 und 0.

 

BORDER

Definiert die Dicke des Rahmens in Pixeln (Internet-Explorer-Erweiterung)

 

BORDERCOLOR

Legt die Farbe des Rahmens fest. (Internet-Explorer-Erweiterung)

 

FRAMESPACING

Gibt die Anzahl der zusätzlichen Pixel zwischen Rahmen und Frame-Inhalt an. (Internet-Explorer-Erweiterung)

 

VSPACE

Gibt die Höhe des Randes an. (Internet-Explorer-Erweiterung)

 

HSPACE

Gibt die Breite des Randes an. (Internet-Explorer-Erweiterung)

 

ALIGN

Legt die Ausrichtung des Frame in bezug auf die Textzeile fest, in der sich dieser befindet. Mögliche Werte sind LEFT, MIDDLE, RIGHT, TOP und BOTTOM. (Die Werte ABSBOTTOM, ABSMIDDLE, BASELINE und TEXTTOP stehen als Internet-Explorer-Erweiterungen zur Verfügung.)

 

NORESIZE

Gibt an, daß die Größe des Frame nicht vom Benutzer geändert werden kann. (Internet-Explorer-Erweiterung)

<NOFRAME>

 

Erlaubt es, einen anderen Inhalt für Web-Browser zu definieren, die keine Frames unterstützen.

Wenn Sie es bis hierher im Buch geschafft haben, können Sie sich jetzt selber gratulieren. Mit dem Wissen, das Sie innerhalb der letzten Woche erworben haben, haben Sie so ziemlich alles getan, was mit einem einzelnen Computer noch möglich ist. Jetzt sind Sie bereit dazu, Ihre Webseiten aufs Internet zu laden und ihnen interaktivere Merkmale hinzuzufügen, wie z.B. Formulare, Imagemaps und eingebettete Animationen. Morgen, am achten Tag, werden Sie genau damit beginnen.



Fragen und Antworten

Frage:

Gibt es eine Begrenzung dafür, wie viele Ebenen von <FRAMESET>-Kennungen ich innerhalb eines einzigen Bildschirms verschachteln kann?

Antwort:

Nein, da gibt es keine Einschränkung. Praktisch gesehen wird jedoch die verfügbare Fenstergröße zu klein, wenn Sie mehr als vier Ebenen benutzen.

Frage:

Was würde passieren, wenn ich innerhalb eines <FRAME>-Tag einen Bezug auf ein Frame-Definitionsdokument einfügte?

Antwort:

Netscape wird damit fertig, indem es das verschachtelte Frame-Definitionsdokument als verschachtelten Frame-Set behandelt. Diese Technik wird oft angewandt, um die Komplexität verschachtelter Frames zu reduzieren.


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenächstes Kapitel