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:

• Was Frames sind, welche Vorteile sie Ihnen bezⁿglich des Layouts geben, und wie sie unterstⁿtzt werden
• Wie Sie mit verknⁿpften Fenstern arbeiten
• Wie Sie mit Frames arbeiten
• Wie Sie komplexe Frame-Sets erstellen

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.

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.

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.

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.

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>

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>

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>

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.

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.

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.

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.

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.

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%, *">

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="*, *">

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.

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

<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.

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:

• Die Attribute in in der Definition des Σu▀ersten Frame-Set haben die geringste PrioritΣt.
• Attribute werden in verschachtelten Frame-Set-Strukturen durch Attribute in den tieferen Frame-Set-Definitionen ⁿberschrieben.
• Das BORDERCOLOR-Attribut im aktuellen Frame ⁿberschreibt vorherige innerhalb ⁿbergeordneter <FRAMESET>-Tags.

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%,*">.

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.

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:

• Von links nach rechts benutzen Sie ROWS.
• Von oben nach unten benutzen Sie COLS.
• Unentschlossen? Benutzen Sie COLS.

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.

<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.

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.

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.

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>

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.

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

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).

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:

• WIDTH: Legt die Breite des Floating Frame, der das HTML-Dokument aufnimmt, in Pixeln fest.
• HEIGHT: Legt die H÷he des Floating Frame, der das HTML-Dokument aufnimmt, in Pixeln fest.
• 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.
• FRAMEBORDER: Gibt an, ob der Frame ein Rahmen anzeigen soll. Nach dem Entwurf von Cougar legt der Wert 1 fest, da▀ ein Rahmen angezeigt werden soll, wohingegen der Wert 0 die Anzeige eines Rahmens verhindert.
• 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)
• MARGINWIDTH: Legt die Breite des Randes in Pixeln fest.
• MARGINHEIGHT: Legt die H÷he des Randes in Pixeln fest.
• NORESIZE: Gibt an, da▀ die Gr÷▀e des Frame nicht vom Benutzer geΣndert werden kann. (Internet-Explorer-Erweiterung)
• SCROLLING: Wie beim <FRAME>-Tag. Gibt an, ob der Frame ⁿber Bildlaufleisten verfⁿgen soll. (Dieses Attribut kann die Werte YES, NO oder AUTO annehmen; der Standardwert ist AUTO.)
• VSPACE: Gibt die H÷he des Randes an. (Internet-Explorer-Erweiterung)
• HSPACE: Gibt die Breite des Randes an. (Internet-Explorer-Erweiterung)
• ALIGN: Wie beim <IMG>-Tag. Legt die Positionierung des Frame in bezug auf die Textzeile fest, in der sich dieser befindet. M÷gliche Werte sind LEFT, MIDDLE, RIGHT, TOP und BOTTOM, wobei der letzte der Standardwert ist. Die Werte ABSBOTTOM, ABSMIDDLE, BASELINE und TEXTTOP stehen als Internet-Explorer-Erweiterungen zur Verfⁿgung.

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>

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

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.

Es gibt da jedoch eine EinschrΣnkung. Sie k÷nnen keinen Bezug auf das gegenwΣrtige Frame-Definitionsdokument von einem seiner eigenen Frames aus herstellen. Diese Situation wird Wiederholung genannt und verursacht eine Endlosschleife. Netscape Communications hat eine Sicherung gegen diese Art von Bezug eingebaut.

• 
  

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