Zum Inhalt der Seite


FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN Startseite > ~xx502 > Frames > Uebung1

Wie erstelle ich Web Frames?

Übung 1 - Einfache Frames

Frames sind die Grundlagen für die Aufteilung des Browserbildschirms in mehrere Fenster.
In dieser Anleitung wird die Erstellung einer Webseite zur Darstellung von Frames schrittweise beschrieben.
Bitte öffnen Sie zuerst einen einfachen Windows-Texteditor z.B. Notepad oder Wordpad. Die HTML-Beispiele können Sie mit den Windows Funktionen in die Zwischenablage kopieren [Strg]-[C] und im Texteditor einfügen [Strg]-[V].
Legen Sie bitte für diese Übungen ein Arbeitsverzeichnis an, z.B. C:\Frame


Einfache Webseite (ohne Frame)

Der folgende Abschnitt beschreibt den allgemenen Aufbau einer Webseite.
Kopieren Sie bitte den Inhalt des folgenden Rahmens in ein leeres Fenster des Texteditors.
Den Text "Titel dieser Seite" und den "Textbereich" können Sie nach belieben ändern.
Speichern Sie die Datei als frame1.html in Ihrem Arbeitsverzeichnis ab. Den Texteditor bitte nicht schließen.

<HTML>
<HEAD>
 <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<BODY>
  Textbereich
</BODY>
</HTML>

Starten Sie Netscape und geben Sie als Adresse ein: C:\frame\frame1.html
Mit [Alt]-[Tab] oder über die Windows-Taskleiste können Sie zwischen Netscape und dem Texteditor umschalten.
Machen Sie einige Änderungen im Textbereich der HTML-Seite und speichern Sie die Seite unter neuem Namen ab: lisa.html, terri.html, kim.html, elke.html, tina.html ... Wir benötigen für die weiteren Übungen min. 5 verschiedenen Dateien.
Um die Darstellung in Netscape zu aktualisieren müssen Sie die [Shift]-Taste gedrückt halten, während Sie mit der Maus auf Reload (Neu Laden) klicken.


Die Frame-Hauptseite (Rahmenseite)

Ändern Sie die Seite im Texteditor wie im folgenden Rahmen angegeben.Die Änderungen sind dort rot hervorgehoben. In der Beschreibung der Fensterstruktur sind die Body-Tags nicht nötig und können gelöscht werden.

<HTML>
<HEAD>
 <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>

Speichern Sie die Seite als index.html ins Arbeitsverzeichnis.
Diese Seite werden wir in den folgenden Schritten noch ergänzen.
Wir haben jetzt die Seite als Frame-Seite definiert.

Ich werde immer wieder einige Kontroll-Fragen einstreuen:

Was wird in Netscape dargestellt?
In der Titelzeile: _______________________
Im Hauptfenster: ______________________


Senkrechte oder waagerechte Bildschirmteilung und Teilungsverhältnis

Im nächsten Schritt wollen wir die Aufteilung des Bildschirms senkrecht (in Spalten) oder waagerecht (in Zeilen) festlegen.
Die Breite bzw. Höhe kann entweder in Prozent (%) oder in Pixeln (Bildschirmpunkten) angegeben werden. In den Beispielen werden jeweils zwei Spalten bzw. Zeilen definiert.

Senkrechte Aufteilung
<HTML>
<HEAD>
 <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</HTML>
waagerechte Aufteilung:
<HTML>
<HEAD>
 <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
</FRAMESET>
</HTML>

Entscheiden sie sich bitte für eine der beiden Varianten und speichern sie diese unter dem eben schon verwendeten Namen index.html im Arbeitsverzeichnis ab.
Was wird jetzt in Netscape dargestellt? : __________________________________


Fensterinhalte

Die einzelnen Fensterinhalte sind eigene HTML-Dateien. Wir verwenden für diese Übung die erstellten Dateien aus Schritt 1.
Ich habe mich für die erste Variante aus dem vorigen Schritt entschieden:


<HEAD>
<HTML>
<TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Die beiden neuen Zeilen bezeichnen die Quelldateien, die in den Bildschirm-Fenstern von links nach rechts bzw. von oben nach unten dargestellt werden.
Speichern Sie die Datei als frame.html und kontrollieren sie wiederum in Netscape.
Sie können auch mein Beispiel testen und vergleichen.

Hinweis: <FRAMESET> ist ein Container, der ein abschließendes </FRAMESET> benötigt; <FRAME> muß im Gegensatz dazu ohne schließendes Tag stehen!

Herzlichen Glückwunsch zu ihren ersten Frameseiten.
In weiteren Übungen werden wir zusätzliche Möglichkeiten kennenlernen.


Weiter zur Übung 2 - Mehrere Fenster
Zur Indexseite