Hinweise (Blatt 6)

Arbeiten mit Frames

Inhalt:

Informationen zu Frames
Vorteile von Frames
Nachteile von Frames
Voraussetzungen für den Einsatz von Frames
Vorbereitungen für den Einsatz von Frames
Erster Ansatz zur Realisierung
Kopf und Link-Leiste
Nützliche Ergänzungen
Praktisches Vorgehen mit dem HTML-Editor Phase5
Praktisches Vorgehen mit HoTMetaL

Informationen zu Frames

Stefan Münz: Frames -- mehrere Bildschirmfenster [html/frames/index.htm]
Alternative Frame-Konzepte (wie z.B. mit iframe) sollen hier nicht vorgestellt werden. Lesen Sie dazu am besten Stefan Münz: Eingebettete Frames [html/frames/eingebettete.htm]

Vorteile von Frames

Das Navigieren per Links kann vom eigentlichen Dokument getrennt werden.
Navigationselemente können auch beim Scrollen des eigentlichen Dokuments sichtbar bleiben.
Und damit ergibt sich: eine übersichtlichere Bildschirmaufteilung

Nachteile von Frames

Das Ausdrucken von Frame-Dokumenten ist aufwändig.
Viele Suchmaschinen können Frame-Dokumente nicht oder nicht korrekt nachweisen.
Es ist schwierig, Bookmarks auf Frame-Dokumente zu setzen.
Das Abspeichern aller Teile eines fremden Frame-Dokuments ist vergleichsweise mühsam. -- Es sei denn, Sie benutzen Datei > Speichern unter... im Internet Explorer 4.x/5.x.
Das Erstellen, Pflegen und Verwalten von Frame-Dokumenten ist verhältnismäßig aufwändig.

Voraussetzungen für den Einsatz von Frames

Browser, der Frames darstellen kann (z.B. Netscape 4.7 oder Internet Explorer 5.0)
Einsatz von HTML ab der Version 4.0
Angabe (ganz am Anfang des HTML-Dokuments) von
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
          "http://www.w3.org/TR/html4/frameset.dtd">
```
(oder ähnlich), falls eine HTML-Version im Dokument spezifiziert wird
ggf. HTML-Editor oder auch HTML-Werkzeug, das sich zum Bearbeiten von Frames eignet

Vorbereitungen für den Einsatz von Frames

Layout (d.h. Aufteilung der Bildschirmfläche in Frames) festlegen
Anteile (feste Pixel-Zahl, prozentual bzw. beliebig) der einzelnen Frames festlegen
Namen der einzelnen Frames festlegen
mit den einzelnen Frames assoziierte Dateien festlegen
festlegen, in welchem Frame die Links angezeigt werden sollen

Beispiel (mit den Anforderungen in der Aufgabenstellung):

+--------------------------------------------------------------+
| oben: kopf.html                                              |
+-------------+------------------------------------------------+
|             |                                                |
|             |                                                |
|links:       | haupt: ../homepage.html                        |
|verweise.html|                                                |
|             |                                                |
|             |                                                |
|             |                                                |
|             |                                                |
|             |                                                |
+-------------+------------------------------------------------+

Erster Ansatz zur Realisierung

Das übergeordnete WWW-Dokument (Verwaltungsinstanz) könnte im Beispiel wie folgt aussehen:

<html>

<head>
<title>Frame-Test</title>
</head>

<frameset rows="60,*">
    <frame src="kopf.html" name="oben">
    <frameset cols="300,*">
        <frame src="verweise.html" name="links">
        <frame name="haupt" src="../homepage.html">
        </frameset>
    </frameset>
</html>

Damit ergibt sich folgende Aufteilung:
- zunächst in zwei vertikal übereinander angeordnete Frames; das erste Frame mit dem Namen oben 60 Pixel hoch; für das zweite Frame der Rest der Bildschirmfläche (rows="60,*")
- Das zweite Frame wird horizontal weiter unterteilt (cols="300,*"): in ein linkes Frame mit dem Namen links (300 Pixel breit) und in ein rechtes Fenster mit dem Namen haupt (Rest der Bildschirmfläche)
Das frame-Attribut src bewirkt, dass im obersten Frame die Datei kopf.html und im Frame links darunter die Datei verweise.html wird.
Jetzt sind noch die Dateien kopf.html und verweise.html zu erstellen.

Kopf und Link-Leiste

Der Kopfteil (hier die Datei kopf.html) soll lediglich einen feststehenden Titel aufnehmen und ist deshalb recht einfach: er enthält im Wesentlichen nur eine Überschrift:
```
<h1 align="CENTER">Frame-Test (HTML-Kurs)</h1>
```
Der linke untere Bildschirmteil ist mit der Datei verweise.html verbunden. In ihr sind u.a. Links aufgeführt, die im Hauptfenster angezeigt werden. Im Prinzip sind alle Links nach dem Muster
```
<a href="index.html" target="haupt">Blatt 6 (Frames)</a>
```
aufgebaut. Wesentlich ist die Angabe target="haupt", die bewirkt, dass die Links im Fenster mit dem Namen haupt angezeigt werden.

Nützliche Ergänzungen

Das im Abschnitt "Erster Ansatz zur Realisierung" vorgestellte Beispiel ist zwar im Prinzip funktionsfähig, kann aber sinnvoll ergänzt werden:

Um auch bei solchen Browsern, die Frames nicht darstellen können, eine halbwegs sinnvolle Ausgabe zu bekommen, sollten Sie im äußeren Frameset einen noframe-Abschnitt aufführen. Wie beispielsweise durch
```
<noframe>Ihr Browser kann keine Frames.</noframe>
```
Normalerweise können mit Hilfe der Maus die Grenzen zwischen zwei Frames verschoben werden. Das kann aber durch die entsprechende Attribut-Angabe noresize bei frame verhindert werden. Hier beispielsweise
```
<frame src="kopf.html" name="oben" noresize>
```
Näheres dazu bei Stefan Münz: [html/frames/eigenschaften.htm#unveraenderbar]
Rollbalken bei Frames werden oft als störend empfunden. Ein Abhilfe bietet das Attribut scrolling bei frame. Mögliche Angaben sind yes (immer Rollbalken), no (keine Rollbalken) und auto (bei Bedarf automatisch). Ein Beispiel:
```
<frame src="kopf.html" name="oben" scrolling="no" noresize>
```
Näheres dazu bei Stefan Münz: [html/frames/eigenschaften.htm#scrollbars]
Als ebenso störend werden manchmal die ausgeprägten Grenzen zwischen den einzelnen Frames empfunden. Um sie sowohl bei Netscape als auch im Internet Explorer zu unterdrücken, sind zwei Angaben erforderlich:
- border="0" bei frameset
- frameborder="0" bei frame
Weitere Informationen dazu bei Stefan Münz: [html/frames/eigenschaften.htm#rahmen]

Gesamtbeispiel (Hauptteil des im Abschnitt " Erster Ansatz zur Realisierung" gezeigten Beispiels, ergänzt um die oben aufgeführten Zusätze):

<frameset rows="60,*" border="0">
    <frame src="kopf.html" name="oben" scrolling="no" frameborder="0" noresize>
    <frameset cols="300,*" border="0">
        <frame src="verweise.html" name="links" frameborder="0">
        <frame name="haupt" src="../homepage.html" frameborder="0">
    </frameset>
</frameset>
<noframe>Ihr Browser kann keine Frames.</noframe>

Durch unsere Maßnahmen sind leider die verschiedenen Frames -- und damit auch die verschiedenen Aufgaben der Bildschirmfläche -- nicht mehr zu unterscheiden. Abhilfe könnte eine entsprechende Farbgebung für den body-Bereich geben. Dazu gibt es u.a. die beiden folgenden Möglichkeiten:
- eine Attribut-Angabe wie z.B.
```
<body bgcolor="#FF6000">
...
</body>
```
- eine Style-Angabe wie z.B.
```
<style type="text/css">
 
</style>
```
  Dieser Methode ist der Vorzug zu geben. Siehe dazu auch das entsprechende Aufgabenblatt 8 "Arbeiten mit CSS"

Praktisches Vorgehen mit dem HTML-Editor Phase5

Eingebaute Möglichkeiten

Praktisches Vorgehen mit HoTMetaL

noch nicht realisiert

$Revision: 1.17 $ ($Date: 2004/10/17 15:36:34 $) by $Author: g029 $