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

Wie erstelle ich Web Frames?

Übung 7 - Praktikum

In dieser Übung wollen wir ein kleines Projekt angehen.
Grundsätzlich soll ein Frameset einfach und funktionell sein um den Betrachter die Orientierung zu erleichtern und ihn nicht zu verwirren.

Beschreibung des Projektes:
Frameset mit einem Frame für die Überschrift oben über die gesamte Bildschirmbreite. Als Überschrift soll das Bild hl_schulung.gif zentriert angezeigt werden.  Darunter zwei Frames, links ein schmales Inhaltsverzeichnis zur Navigation und rechts ein großes Textfenster.

Wenn ihnen diese kurze Projektbescheibung nicht ausreicht, dann sehen sie sich schon mal an, wie z.B. das Ergebnis aussehen könnte.

Aufgabe: Versuchen Sie es erst einmal alleine. Legen Sie dafür ein neues Arbeitsverzeichnis unterhalb ihres bestehenden an, z.B. C:\frame\praxis und speichern Sie alle Dateien, die Sie für dieses Praktikum brauchen im neuen Verzeichnis ab. Sollten Sie nicht weiter kommen oder wollen Sie Ihr Ergebnis mit meinem vergleichen, dann lesen Sie bitte weiter.


1. Frame-Beschreibungsseite erstellen (index.html)

<HTML>
 <HEAD>
  <TITLE>FEN-Schulung: Praktikum - Frame-Hautseite</TITLE>
 </HEAD>
 <FRAMESET>
 </FRAMESET>
 </HTML>

2. Seitenaufteilung festlegen

<HTML>
 <HEAD>
  <TITLE>FEN-Schulung: Praktikum - Frame-Hautseite</TITLE>
 </HEAD>
 <FRAMESET ROWS="64,*">
 </FRAMESET>
 </HTML>

Anmerkung: Framebreite ist Bilddimension zuzüglich mind. 8 Pixel, wenn man eine absolute Angabe verwendet.


3. Bild in oberem Frame darstellen

Die Frame-Hauptseite index.html:

<HTML>
 <HEAD>
  <TITLE>FEN-Schulung: Praktikum - Frame-Hautseite</TITLE>
 </HEAD>
 <FRAMESET ROWS="64,*">
  <FRAME SRC="oben.html" TITLE="FEN Schulungs-Logo">
 </FRAMESET>
 </HTML>

Anmerkung: Um zusätzliche Angaben einzufügen (in unserem Praktikum:  zentriert) ist eine eigene Framedatei nötig.

Die Datei oben.html:

<HTML>
<HEAD>
<TITLE>FEN-Schulung: Praktikum - Oberer Frame</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
  <P ALIGN="CENTER">
    <IMG SRC="hl_schulung.gif" WIDTH="494" HEIGHT="56">
  </P>
</BODY>
</HTML>

oben.html ansehen


4. Die beiden unteren Frames definieren

Die Frame-Hauptseite index.html:

<HTML>
 <HEAD>
  <TITLE>FEN-Schulung: Praktikum - Frame-Hautseite</TITLE>
 </HEAD>
 <FRAMESET ROWS="64,*">
  <FRAME SRC="oben.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="inhalt.html" TITLE="Inhaltsverzeichnis">
    <FRAME SRC="text.html" TITLE="Textfenster">
  </FRAMESET>
 </FRAMESET>
 </HTML>

5. Frames benennen

Die Frame-Hauptseite index.html:

<HTML>
 <HEAD>
  <TITLE>FEN-Schulung: Praktikum - Frame-Hautseite</TITLE>
 </HEAD>
 <FRAMESET ROWS="64,*">
  <FRAME SRC="oben.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="inhalt.html" TITLE="Inhaltsverzeichnis">
    <FRAME SRC="text.html" NAME="Textfenster" TITLE="Textfenster">
  </FRAMESET>
 </FRAMESET>
 </HTML>

Anmerkung: Da sich nur ein Frame ändern soll, brauchen wir auch nur diesem einen Namen zu geben.

oben.html ansehen           Hauptseite ansehen


6. Bildlaufleisten und Ränder definieren

Es sollen in keinem Fall im Frame mit dem Überschrifts-bild Bildlaufleisten angezeigt werden.

<HTML>
 <HEAD>
  <TITLE>FEN-Schulung: Praktikum - Frame-Hautseite</TITLE>
 </HEAD>
 <FRAMESET ROWS="64,*quot;>
  <FRAME SRC="oben.html" SCROLLING="no" MARGINWIDTH="1" MARGINHEIGHT="1">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="inhalt.html">
    <FRAME SRC="text.html" NAME="Textfenster">
  </FRAMESET>
 </FRAMESET>
 </HTML>

7. Inhaltsseite und Textseite erstellen

Die Datei inhalt.html könnte z.B. folgendermaßen aussehen::

<HTML>
<HEAD>
<TITLE>FEN-Schulung: Praktikum - Frame Inhaltsangabe</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
  <H3>Inhaltsverzeichnis</H3>
  Meine Homepage<P>
  <A HREF="seite1.html"Zu Seite 1</A><BR>
  <A HREF="seite2.html"Zu einer anderen Seite</A><P>
  Interessante Links:<BR>
  <A HREF="http://www.yahoo.de/" TARGET="Textfenster""Yahoo</A><BR>
  <A HREF="http://www.netscape.de/" TARGET="Textfenster">Netscape</A>
</BODY>
</HTML>

 inhalt.html ansehen

Die Datei text.html:

<HTML>
<HEAD>
<TITLE>FEN-Schulung: Praktikum - Frame Text</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
  <H1>Meine Homepage</H1>
  Herzlich willkommen auf meiner Homepage.<BR>
  Ich freue mich, daß Sie in diesem Kurs schon so weit gekommen sind.<P>
  Für dieses Praktikum hätten Sie etwa 15 Minuten brauchen dürfen.
  Hätte diese Zeit ausgereicht?
</BODY>
</HTML>

 text.html ansehen         Hauptseite ansehen


An dieser Stelle ist dieser Kurs eigentlich schon zu Ende. Probieren Sie bitte alle Möglichkeiten von Frames selbständig aus. Übung ist durch keinen Kurs zu ersetzten! Wollen Sie an dieser Stelle aufhören und erst einmal üben, dann können Sie gleich zum abschließenden Test springen.

Für Fortgeschrittene oder solche, die es werden wollen, schließen sich noch zwei Übungseinheiten mit Frames und JavaScript an. Es hat viel Spaß gemacht diese Seiten zu erstellen. Es war mein erstes Projekt einer Online-Schulung und ich habe trotz Verwendung einer englischen Vorlage viel Zeit darauf verwendet. Eigentlich ist es gar nicht so schwer Frames zu erstellen, es gibt jedoch vielerlei Feinheiten und Kniffe.
Verspielen Sie sich bitte nicht zu sehr, denn wird es für einem Besucher der Seite zu kompliziert und findet er oder sie sich nicht mehr zurecht, dann führt der kürzeste Weg nach drausen zu fremden Seiten.

 Weiterhin viel Spaß !
 Euer Michael


Zurück zur Übung 6 - Frame-Fenster verlinken
Weiter zur letzten Übung - Abschlußtest
Zur Indexseite
Frames und JavaScript:
Weiter zur Übung 8 - Mit einem Mausklick zwei Frames ändern