Themen:   Was sind Frames?
Anlage einer Framestruktur, die Steuerungsseite
Frame-Inhalte an die richtige Stelle laden
Frames wieder loswerden
Seiten gegen das Einladen in Frames schützen
Framestruktur mit fester Größe
?
Was sind Frames? Jeder Surfer kennt heute Frames (dt. Gefüge, Gerüst und Rahmen) ohne unbedingt ihren Namen zu wissen. Sie unterteilen das Browserfenster in unterschiedlich zu handhabende Fenster. Man kann z. B. einen Teil des Bildschirms für die Navigation oder auch für Werbeeinblendungen reservieren, den anderen Teil für die wechselnden Text- oder Grafikangebote. Häufig wird auf diese Weise eine "Navigationsleiste" angeboten, die meist links oder oben angeordnet ist.
Frames sind von Netscape eingeführt worden und konnten früher von vielen Browsern nicht dargestellt werden. Heute sind sie aber in professionellen Präsentationen Standard und man kann sie hemmungslos einsetzen, wenn man kann.
Frames sind nicht immer auf den ersten Blick zu erkennen. Sie können mit oder ohne Begrenzung gestaltet werden. Wenn einheitliche Hintergründe benutzt werden, was sich aus gestalterischen Gründen empfiehlt, bemerkt man erst beim Scrollen, ob Frames vorliegen, wenn nämlich Teile des Browserfenster stehen bleiben, während andere verschoben werden.
Wenn Sie diese Seite begucken, sieht sie etwas anders aus, als die anderen Kursseiten. Richtig, wir sind ja gerade bei Frames. Das Festhalten meiner Überschrift ist platzraubend, also dumm, es wäre sinnvoller, wenn dort Dinge zur Programmstruktur stünden. Aber um Sinn geht es hier nicht, es geht um Technik. (Der Satz ist tiefsinniger als ich ihn hier meine!)
Zur Anlage von Frames dient das Tag <frameset>...</frameset>,  zur Konfigurierung das Tag <frame>.
Wenn Sie mit dieser Seite etwas experimentieren, also z. B. die Größe des Browserfensters verändern, werden Sie bemerken, daß Frames nicht ohne Probleme sind. Sie überstehen nicht alle Bildgrößenänderungen schadlos und sprengen in sofern die Philosophie der Seitenbeschreibungssprache HTML, die unter allen Umständen gute Ergebnisse liefern soll.
Anlage einer Framestruktur, die Steuerungsseite Es ist zuerst eine Steuerungsseite nötig, auf der die Framestruktur festgelegt wird. Diese Seite wird später auch aufgerufen, wenn man das ganze Kunstwerk sehen will. Die Steuerungsseite ruft nämlich ihrerseits die Fensterinhalte auf und füllt sich damit selbst.
Die Steuerungsseite bildet eine Ausnahme in HTML, denn sie muß keinen body besitzen. Sie würde, wenn das Laden der anzuzeigenden Dateien nicht klappt, leer erscheinen. Man kann deshalb für den möglichen Fehlerfall (daß nämlich ein bescheuerter Eigenbaubrowser immer noch keine Frames erkennt), 		hier einen Hinweistext dazu vorsehen, den der normale User nie im Leben zu sehen bekommt.
Wie sieht der Text einer solchen Seite aus? Gucken Sie sich den Text dieser Seite an. Versuchen Sie es im Browser, da kann es allerdings passieren, daß sie den falschen Quelltext sehen, der zu einem der Fenster gehört.
Für Faulpelze hier die um Unwesentliches bereinigte aber mit verdeutlichenden Einrückungen bereicherte Fassung:
  <html>
   <head>
      <title>Frames im Kurs</title>
   </head>
   <frameset rows = "20%,*,80" border="1" framespacing="1">
      <frame src="framob.htm" name= "oben">
      <frame src="framit.htm" name= "mitte">
      <frame src="framun.htm" name= "unten" noresize>
      <noframes>
         <body>
            Dieses ist die Framset-Seite
         </body>
      </noframes>
   </frameset>
</html>

Die entscheidende Zeile, die die Frames definiert, ist <frameset rows = "20%,*,80" ..>. Was sagt sie uns?

Was bedeutet das alles?
  • Das Attribut "rows" setzt horizontal geteilte Fenster in die Welt, vertikal geteilte würden mit "cols" definiert. Beide Attribute können auch gemeinsam auftreten. Die folgende Angabe bedeutet die Fenstergrößen von oben nach unten, bei "cols" von links nach rechts. Angaben sind wie immer in Pixeln oder % der Fenstergröße möglich. Der Stern ist üblich und steht immer für den Rest. Bei meiner speziellen Angabe ist dieser Rest abhängig von der Größe des Browserfensters. Lautete die Angabe aber "25%,50%,25%" lägen die Proportionen ein für allemal fest.
  • Das border-Attribut kann auf "0" gesetzt werden, das bedeutet überraschenderweise eine unsichtbare Grenze. Ich habe hier "1" gewählt, obwohl das Ergebnis häßlich aussieht, damit Sie probieren können, diese Grenze zu verschieben. Das Attribut "noresize" in der dritten Frame-Klammer verhindert dies zuverlässig für die untere Grenze.
  • Die drei frame-Tags ordnen mit "src=..." die zu ladenden Seiten zu und vergeben, ganz wichtig, Namen für die drei Fenster. Die werden Sie (und ich natürlich) noch brauchen.
  • Diese Seite enthält keinen body, der wird hier vom Frameset vertreten. Ein Eintrag im <noframes>-Bereich wird vom Composer angezeigt und macht sich speziell in der Bearbeitungsphase der Seite bezahlt. (Eigener Herd ist Goldes wert! - paßt hier zwar nicht, will aber das Richtige sagen: Erst wenn Sie selbst drauf gekommen sind, werden Sie es mir glauben.) Übrigens werden Frameset-Seiten von Suchmaschinen u.U. auf ihren  Inhalt hin untersucht. Deshalb ist es keine schlechte Idee, im noframes-Bereich den Inhalt der Präsentation kurz anzugeben.
Frame-Inhalte an die richtige Stelle laden Was in die Frames geladen wird, sind an sich ganz normale HTML-Seiten. Aber nur an sich. Rufen Sie bitte im Browser die Seiten "url/framob.htm", "url/framit.htm" und url/framun.htm" auf (wie man das macht? Oben im Adressfenster steht die vollständige URL der gerade beguckten Frame-Steuerungsseite. Sie löschen bis zum Slash, also "frames.htm" und setzen dafür die "framob.htm" etc. ein. Return schließt die Sache ab.) nun besehen Sie den Quellcode. Es gibt hier gleich mehrere Probleme zu lösen.
<base target="mitte">. Was will uns der Dichter damit sagen? Wenn durch Mausklick auf einen beliebigen Link eine neue Seite geladen wird, dann soll sie immer im Fenster "mitte" angezeigt werden. Diesen Namen hatten wir in der Steuerungsseite so festgelegt. Alternativ könnten auch bei den einzelnen Links dieser Seite jeweils zu src="dateiname" die Zielangabe target="mitte" bzw. target="unten" folgen. 		Das ist hier ebenfalls geschehen, die Adressierung den Kursnutzern zuliebe also doppelt gemoppelt. Wenn es unterschiedliche Zielfenster für die Links gibt, dann geht nur die zweite Art der Adressierung.
Wenn der spezielle Wunsch besteht, in beiden Fenstern, dem Menüfenster (mein oberes "oben") und dem Datenfenster (mein mittleres "mitte") die Inhalte gleichzeitig zu wechseln, dann kann das Laden zweier Inhalte so erfolgen: <a href="inhaltneu.htm" target="mitte" onclick="self.location='menüneu.htm'">. Der <base target>-Eintrag müßte in diesem Falle unterbleiben.
"framit.htm" enthält keine Veränderungen dieser Art. Es ist eine ganz normale Textseite. Der Grund, sie enthält keine Links auf den Index, auf eigene Textmarken etc., weil diese Links in anderen Fenstern erscheinen werden.
Frames wieder loswerden Frames sind toll, wenn Sie mit meinen Seiten ein Experiment machen wollen, klicken Sie das oben im Kopf befindliche Fragezeichen. Es lädt die gleiche Seite noch einmal. Da alle Links dieser Seite auf den Mittelframe adressiert sind, geschieht ein Unglück. Na ja, es gibt schlimmere. Das Problem wird deutlich, man braucht eine Möglichkeit, Framestrukturen zu löschen. Überraschenderweise gibt es die.
 "framun.htm" enthält wieder im head-Tag einen Eintrag, der <base target="_top"> oder <base target="_parent"> lautet. Ein Target ist ein Ziel, wer schießt nicht gerne auf "Die da oben" oder die Eltern. Spaß beiseite, wenn hier eine HTML-Datei aufgerufen wird, dann wird sie in ein neues, leeres Browserfenster geladen. Ohne diesen Eintrag würde die im mittleren Link adressierte Indexseite in den Fußbereich unserer Frameseite geladen. Die zulässigen Ziele zu <base target> sind:
  • _blank - das Dokument wird in ein neues, zusätzliches Browserfenster geladen, die alte Seite bleibt erhalten
  • _self - das Dokument wird in das gerade aktive Fenster geladen, hier das Fußfenster
  • _top - das Dokument wird in das Browserfenster geladen, löscht also die Framedarstellung
  • _parent - bei geschachtelten Frames wird das Dokument in das Fenster geladen, das sich eine Verschachtelungsebene höher befindet.
Alternativ zu dieser, auf alle Links der Seite anzuwendenden Zielangabe kann auch hier wieder die Einzeladressierung bei jedem Link erfolgen, man hätte dann anzugeben <a href="..." target="_top">...</a>.
Seiten gegen das Einladen in Frames schützen Um die Gefahr, daß Frameseiten "sich aufwicklen" bzw. daß für den ganzen Bildschirm bestimmte Bilder in Frames geladen werden können, kann man sich der Möglichkeiten von JavaScript bedienen und die gefährdeten Seiten "impfen". Das habe ich hier mit der Index-Seite getan. Der Code lautet:
<script language=JavaScript>
if (top.frames.length!=0)top.location=self.location;
</script>
und er muß im <head>-Teil der zu schützenden Seite stehen.
Framesstruktur mit fester Größe Wenn eine Framestruktur sorgfältig gestaltet wurde, übersteht sie u.U. nicht die Darstellung mit anderen Bildschirm-Auflösungen. Manche Designer begrenzen deshalb die Framestruktur von vornherein auf die mindestens 640*480 vorhandenen Pixel. Vergleichen Sie z.B. die Seiten des "Spiegel", wo man sich auf eine Breite von 800 Pixeln beschränkt, und den rechten Teil des Bildschirms bei höheren Auflösungen ungenutzt läßt. Eleganter ist es, wenn man sich beschränken will, den Nutzbereich mittig zu stellen.
Wie macht man so etwas?
Man legt eine leere Seite, hier "fr1_leer.htm" an, die später einen Rahmen abgeben soll. (Achtung auf Hintergrundfarbe oder Muster!)
die Frameset-Zeilen werden, wie unten zu sehen, angelegt.
Hier der Test.
 
<frameset rows="*,480,*" frameborder=0, border=0>
   <frame src="fr1_leer.htm" scrolling="no">
   <frameset cols="*,640,*" frameborder=0, border=0>
      <frame src="fr1_leer.htm" scrolling="no">
      <frame src="fr1_inn.htm" name="innen" scrolling="no">
      <frame src="fr1_leer.htm" scrolling="no">
   </frameset>
   <frame src="fr1_leer.htm" scrolling="no">
</frameset>		 zuerst drei Reihen definieren
obere Reihe wird Rand
zweite Reihe wird in drei Spalten geteilt
linker Rand
Inhalt der Seite
rechter Rand
fertig Spaltenteilung der mittleren Reihe
unterer Rand
fertig Reihenteilung