HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Frames ] [ IFrames ] [ Framesets definieren ] [ Fenster aufteilen ] [ Rahmendicke ] [ Dateien anzeigen ] [ Verweise in Frames ]

Frames

Es gibt in HTML zwei arten von Frames. Zum ersten iFrames (Eingebettete-Frames) und zum zweiten Framessets. Der unterschied besteht darin, dass in Framesets der gesamte Bildschirm aufgeteilt wird, und in jedem eingeteilten Bereich eine HTML-Datei angezeigt wird. IFrames werden dagegen innerhalb einer normalen HTML-Datei definiert.

Folgende Probleme können auftreten, wenn Sie mit Frames arbeiten. Nicht alle Browser können Frames darstellen. Es können keine externen Links zu bestimmten Seiten innerhalb Ihres Framesets gesetzt werden. Außerdem besteht die Gefahr, das Besucher aus Suchmaschinen, Seiten aus dem Frameset direkt aufrufen, ohne das Frameset zu laden.

IFrame definieren

IFrames sind normale HTML-Dateien in der HTML-Variante Transitional. Eingeleitet wird dieses Element mit <iframe...>. Mit dem Attribut src="..." bestimmen Sie die HTML-Datei, die in diesem Frame angezeigt werden soll. Die Größe dieses Fensters bestimmen Sie mit width="..." height="...". Ferner sollten Sie diesen Fenster einen Namen geben, dieser wird mit dem Attribut name="..." definiert. Der Name darf außer einem Unterstrich, Bindestrich, Punkt oder Doppelpunkt keine Sonderzeichen enthalten, also auch kein Leerzeichen oder deutsche Umlaute ä ö ü ß. Zwischen den einleitenden <iframe> und den schließenden </iframe> können Sie einen Hinweis notieren, der erscheint, wenn der Browser des Besuchers kein iFrame-Element kennt.

Mit dem Attribut scrolling="yes" oder no geben Sie an, ob ein Scrollbalken angezeigt werden soll, oder nicht. Des weiteren gibt es noch scrolling="auto", der nur dann einen Scrollbalken anzeigt, wenn die Seite nicht in Framefenster passt. Aber aufgepasst, haben Sie no angegeben, und es passt nicht alles ins Fenster, so hat der Betrachter keine Möglichkeit, den Teil der Seite zu lesen, der nicht ins Fenster passt.
Den sichtbaren Außenrahmen können Sie mit frameborder="0" unterdrücken. Mit frameborder="1" wird der Rahmen angezeigt und ist die Voreinstellung.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
   <title>Eingebettete Frames definieren</title>
  </head>
  <body>
    <h1>Inline-Frame</h1>
    <p>Eine externe Datei mal in einem Fenster betrachten</p>
    <iframe src="zb27a.html" width="88%" height="420" 
      frameborder="1" scrolling="auto" name="fenster">
     <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
     Sie können die eingebettete Seite über 
     <a href="zb27a.htm">HTML-Datei</a> aufrufen.</p>
    </iframe>
  </body>
  </html>
Das ganze sieht so aus

Framesets definieren - Grundgerüst

Die Unterschiede zu anderen HTML-Dateien fängt schon mit der Deklaration an. Nach dem abschließenden </HEAD> folgt nicht der <BODY>-Tag, sondern die Frame-Definition. Das Grundgerüst sieht dann so aus:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
   <HEAD>
    <TITLE>Frameset-Beschreibung</TITLE>
   </HEAD>
   <FRAMESET...>
      Angaben zum Frameset
    <NOFRAME>
     <BODY>
       Hier kann der Text dargestellt werden, der angezeigt wird,
       wenn der Browser keine Frames darstellen kann
     </BODY>
    </NOFRAME>
   </FRAMESET>
  </HTML>

Fenster aufteilen

Die ersten Angaben, die Sie hinter den Frameset-Element setzen müssen, ist die Anzahl und Breite der Spalten bzw. Höhe der Reihen.
<FRAMESET COLS="200,*"> = für Spalten
<FRAMESET ROWS="200,*"> = für Reihen
Im ersten Beispiel wird der Bildschirm in zwei Spalten geteilt, wobei die erste Spalte 200 Pixel breit ist, und die zweite Spalte nimmt den Rest des Bildschirms ein. Im zweiten Beispiel ist der Bildschirm in zwei Zeilen geteilt, wobei die erste Zeile 200 Pixel hoch ist. Statt der Pixelangaben kann auch die Prozentzahl angegeben werden. COLS="20%,80%".

  <FRAMESET ROWS="200,*,100">
    Hierzu kommen wir später
  </FRAMESET>

Ausgabe:
1.
Frame
 
 
2.
 
Frame
 
3.
Frame

  <FRAMESET COLS="300,*,200">
    Hierzu kommen wir später
  </FRAMESET>
 
1. Frame
 
 
2. Frame
 
 
3. Frame
 


Im nun folgenden Beispiel legen wir zwei Framesets an:

  <FRAMESET ROWS="100,*">
     Hierzu kommen wir später
   <FRAMESET COLS="200,*">
     Hierzu kommen wir später
   </FRAMESET>
  </FRAMESET>

1. Frame
 
 
2. Frame
 
 
 
3. Frame

Achten Sie darauf, dass Sie die Frames so aufteilen, dass der ganze Bildschirm eingenommen wird. Entweder Sie nehmen das Sternchen *, oder bei Prozentangaben müssen Sie auf 100% kommen.

Rahmendicke

Um Begrenzung zu Beeinflussen gibt es im Internet Explorer die Befehle FRAMEBORDER und FRAMESPACING und beim Netscape Navigator genügt der Befehl BORDER. Um bei beiden die Begrenzung anzuzeigen, müssen alle drei Befehle angegeben werden.

<FRAMESET BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">

Wird bei BORDER 0 angegeben, erscheint keine Linie, und je höher die Zahl wird, desto breiter wird die Linie. FRAMEBORDER kann die Werte 0 oder 1 haben, wobei 1 der Linie einen 3D-Effekt gibt. Der Befehl FRAMESPACING gibt die Breite an.
Diese Befehle werden zwar von den Browsern unterstützt, gehören aber nicht zum HTML-Standard des W3-Konsortium.

Dateien anzeigen

Um in die Frames jetzt mit Inhalte zu füllen, gibt es den Befehl FRAMES SRC=.

Code:
  <FRAMESET COLS="25%,50%,25%" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
   <FRAME SRC="SPALTE1.HTML">
   <FRAME SRC="SPALTE2.HTML">
   <FRAME SRC="SPALTE3.HTML">
  </FRAMESET>

Hiermit habe ich den Bildschirm in drei Spalten geteilt. In der linken Spalte wird die HTML-Seite SPALTE1.HTML gezeigt, in die zweite Spalte die Datei SPALTE2.HTML und in der rechten Spalte wird die Datei SPALTE3.HTML dargestellt.
Auch zu FRAME gibt es noch weitere Angaben, die Sie mit angeben können. Zum ersten die Befehle MARGINWIDTH="3" und MARGINHEIGHT="3", wobei hier der Abstand in Pixel zum Framerand angegeben wird.
Mit dem Attribut SCROLLING="YES" oder NO geben Sie an, ob ein Scrollbalken angezeigt werden soll, oder nicht. Des weiteren gibt es noch SCROLLING="AUTO", der nur dann einen Scrollbalken anzeigt, wenn die Seite nicht in Framefenster passt. Aber aufgepasst, haben Sie NO angegeben, und es passt nicht alles ins Fenster, so hat der Betrachter keine Möglichkeit, den Teil der Seite zu lesen, der nicht ins Fenster passt.
Zum Schluss sollten Sie den Frames noch Namen geben, der wichtig ist, wenn Sie Links zwischen den Frames angibst. Aber dazu später, zuerst wieder ein Beispiel einer kompletten Frame-Seite:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
   <HEAD>
    <TITLE>Frameset-Beschreibung</TITLE>
   </HEAD>
   <FRAMESET ROWS="100,*">
    <FRAME SRC="willkomm.htm" SCROLLING="NO" NAME="oben" 
      MARGINWIDTH="5" MARGINHEIGHT="6">
    <FRAMESET COLS="210,*">
     <FRAME SRC="navigat.htm" SCROLLING="AUTO" NAME="links" 
       MARGINWIDTH="5" MARGINHEIGHT="6">
     <FRAME SRC="starten.htm" SCROLLING="AUTO" NAME="rechts" 
       MARGINWIDTH="5" MARGINHEIGHT="6">
    </FRAMESET>
    <NOFRAMES>
     <BODY>
      <h3>Diese Seite hat Frames</h3>
      <p>Diese Seite hat Frames, 
        die von Ihrem Browser nicht unterstützt werden</p>
     </BODY>
    </NOFRAMES>
   </FRAMESET>
  </HTML>

oben = Inhalt von WILLKOMMEN.HTML
 
Links = Inhalt von INHALT.HTML
 
rechts = Inhalt von SEITE1.HTML

Verweise in Frames

Wie angekündigt möchte ich noch einmal auf die Verweise/Links zurückkommen. Wie in oben angegebenen Bespiel könnte in der INHALT.HTML Verweise stehen, um verschiedene Seiten aufzurufen, die dann in dem rechten Framefenster angezeigt werden sollen. Dazu benutzen wir den bereits bekannten Befehl:

<a href="SEITE2.HTML" target="rechts">Seite 2</a>

Außerdem gibt es noch einige target-Befehle, die ich Ihnen nicht vorenthalten will:
target="_new" Es wird eine neue Browserseite geöffnet, das alte Fenster bleibt im Hintergrund bestehen.
target="_parent" Die Seite wird im letztem bestehenden Browserfenster angezeigt
target="_top" Die neue Seite wird im ganzen Fenster angezeigt.

back top next