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

Wie erstelle ich Web Frames?

Bild im Frame
Fensterbreite an ein Bild in der Breite ...
... und in der Höhe anpassen
Bildlaufleiste - Scrollbar
Fensterränder
Die Optimale Framebreite

Übung 4 - Ein Bild im Frame

Auch in diese Übung wollen wir wieder mit dem einfachen Beispiel aus Übung 1 beginnen. Laden Sie bitte die Datei frame.html mit den beiden gleichbreiten Frame-Fenstern in ihren Editor.

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

 Mein Beispiel ansehen


Bild im Frame

In Frames können auch Bilder direkt eingefügt werden, ohne daß man diese in einer extra Frame-Datei einbinden müßte. Für unser Beispiel kopieren Sie bitte das Bild world.gif in ihr Arbeitsverzeichnis. Guter HTML-Stil ist es die Breite (WIDTH) und Höhe (HEIGHT) eines Bildes mit anzugeben, um den Seitenaufbau zu beschleunigen. Netscape weiß dann beim Aufbau der Seite am Bildschirm wieviel Platz für das Bild freizuhalten ist.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
  <FRAME SRC="world.gif" WIDTH="146" HEIGHT="162">
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Speichern Sie dieses Beispiel bitte als frame4a.html im Arbeitsverzeichnis.
Was fällt Ihnen bei der Ansicht in Netscape auf, was ist neu? _________________
Was würden Sie anders machen? ______________________

  Mein Beispiel ansehen


Fensterbreite an ein Bild in der Breite ...

Genau. Mir gefällt auch die Aufteilung der Fenster nicht. Wir wollen einmal die Breite des linken Frames an das Bild anpassen.
Sie erinnern sich: Wenn man eine absolute Framebreite festlegt, sollte der Rest des Fensters eine variable Breite haben.
Entgegen der Empfehlung die Framebreite etwas größer als das Bild festzulegen, wollen wir hier zum Testen gleiche Breiten definieren.

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="146,*">
  <FRAME SRC="world.gif" WIDTH="146" HEIGHT="162">
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Dieses Beispiel bitte als frame4b.html speichern und in Netscape kontrollieren.
War das jetzt besser? ____________
Was würden Sie jetzt anders machen? _____________

 Mein Beispiel ansehen

Aufgabe: Versuchen Sie selbst die Darstellung mit dem bisher gelernten Ihren Wünschen entsprechend zu gestalten.
Wir kommen später dann darauf zurück.


... und in der Höhe anpassen

Als nächsten Schritt wollen wir den linken Frame noch einmal waagerecht in 2 Bereiche aufteilen. Die Höhe des oberen Frames soll dabei wieder genau der Höhe des eingefügten Bildes entsprechen (162 Pixel) und der untere Frame der übrigen Bildschirmhöhe entsprechen. Fügen Sie in den unteren Frame die Datei lisa.html ein

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH="146" HEIGHT="162">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Dieses Beispiel bitte als frame4c.html speichern.
Sieht das jetzt gut aus oder haben wir immer noch das kleine Problem?
Nur Geduld, wir sind ja gleich soweit.

 Mein Beispiel ansehen


Bildlaufleiste - Scrollbar

Das Bild wirkt seit einiger Zeit sehr in den Rahmen gepreßt und zusätzlich wird der knappe Platz noch mit Bildlaufleisten weiter verkleinert. Diese Bildlaufleisten kann man auch konfigurieren. Mögliche Werte sind YES, NO oder AUTO, dabei bedeutet:
YES: Scrollbars immer anzeigen, NO: nie anzeigen, AUTO: wie voreingestellt automatisch.
Normalerweise verwaltet Netscape die Bildlaufleisten AUTOmatisch, daß heißt wenn der gesamte Fensterinhalt auf den Bildschirm paßt werden auch keine Bildlaufleisten angezeigt. Nur wenn der Inhalt größer als das Framefenster ist, werden Bildlaufleisten dargestellt. Sie können aber erzwingen, daß ein Fenster Bildlaufleisten haben soll (YES) oder nicht haben darf (NO). In unserem Beispiel wollen wir die Bildlaufleisten ausschalten:

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH="146" HEIGHT="162" SCROLLING="no">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Und wieder ist speichern angesagt, diesmal als frame4d.html.
Das sieht doch gleich viel besser aus. Sind Sie es auch schon soweit, dann können wir ja noch zu einer kleinen Erweiterung kommen oder wollen Sie sich auch diesmal erst mein Beispiel ansehen?


Fensterränder

Das ist immer noch nicht optimal. Wir wollen vor dem Finale noch einen kurzen Stop einlegen und uns mit dem Fensterrand (margin) beschäftigen. Netscape fügt automatisch etwas freien Platz um den Frameinhalt ein. Normalerweise sieht das auch gut aus. Durch die Attribute MATGINWIDTH und / oder MARGINHEIGHT im FRAMESET-Tag können die Abstände zwischen rechtem bzw. linkem (oberem bzw. unterem) Fensterrand und dem Fensterinhalt in Pixeln eingestellt werden. Dabei sind linke und rechte Ränder genaus so wie obere und untere immer gleich groß. Die minimale Größe ist 1 Pixel.
Wir werden beide Ränder auf diesen Minimalwert einstellen:

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH="146" HEIGHT="162" SCROLLING="no"
     MARGINWIDTH="1" MARGINHEIGHT="1">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Und nochmal speichern, als frame4e.html.
Immer noch nicht optimal, aber sie werden mir Recht geben: Schon wieder etwas besser.

 Mein Beispiel ansehen

Aufgabe: Experimentieren sie doch etwas mit unterschiedlich breiten Rändern.


Die Optimale Framebreite

gibt es nicht, aber wie schon in Übung 3 erwähnt sollte ein Frame immer etwas größer definiert werden als unbedingt nötig. Unser Beispiel wird auch noch nicht optimal dargestellt, aber jetzt erst mal eine genaue Erklärung, warum das mit der Fensterbreite so und nicht anders ist:

Die Fenster-Dimensionen werden von Rahmenmitte zu Rahmenmitte angegeben.

Frame-Breite: Schema

Beachten Sie bitte auch, daß die minimale Rahmenbreite 1 Pixel ist und die Vorgabe sind 6 Pixel (Defaultwert).
Wir müssen also mit der vorgegebenen Breite mindestens 8 Pixel zur Breite unseres Bildes (world.gif) hinzuzählen: 6 Pixel + 1 Pixel auf jeder Seite.

Grundregel:
Frames müssen in Höhe und Breite mindestens 8 Pixel größer definiert werden!

(Bei Default-Rahmenbreite)

Und dies wollen wir gleich in unser Beispiel einbauen:

<HTML>
<HEAD>
  <TITLE>Titel dieser Seite</TITLE>
</HEAD>
<FRAMESET COLS="154,*">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH="146" HEIGHT="162" SCROLLING="no" MARGINWIDTH="1" MARGINHEIGHT="1">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>
</HTML>

Speichern Sie ein letztes Mal in dieser Übung als frame4f.html.

 Mein Beispiel ansehen

Aber jetzt ist's vollbracht. Das Bild sitzt perfekt im Frame oder etwa nicht?

Sie haben hoffentlich noch nie eine Seite wie diese in einem Frame gesehen mit einem Bild, das auf einer oder gar beiden Seiten abgeschnitten war. Diese Seite soll zur "Abschreckung" dienen und enthält sehr viele Möglichkeiten, die man auf keinen Fall in einer Homepage verwenden sollte. Bitte nicht nachmachen !

Zusammenfassung:
Wenn absolute Breitenangaben bei einem Frame verwendet werden, dann das Fenster mindestens je 8 Pixel größer definieren und die übrigen Fenster variabel gestalten.


Zurück zur Übung 3 - Senkrechte und waagerechte Fenster kombiniert
Weiter zur Übung 5 - Weitere Effekte
Zur Indexseite