Rahmen

Layout-Gliederung von Webseiten

Rahmen (frames) zählen schon lange zu den Standard-Verfahren zur Gestaltung von Webseiten. Sie bieten die Möglichkeit, ein Fenster in mehrere Bereiche aufzuteilen: Manche davon (Logo, Navigation) bleiben fix, andere (Inhalt) werden ausgetauscht.
HTML HyperText Markup Language, Einbettung
Live-Demo Die Funktion von Rahmen in einem einfachen Beispiel
Rahmen-HTML Die HTML-Programmierung einfacher Rahmen
HTML 5 Das Ende von Rahmen in der nächsten HTML Version
Spezielle Rahmen-Themen:
Komplex Verschachtelte Rahmen
Rahmen-Profi Spezielle Aspekte der Rahmen-Verwendung
Einbettung von Rahmen in 'gewöhnliche' Webseiten (iframe, object)
Javascript Scripts über die Grenzen von Webseiten hinweg

Live-Demo von Rahmen
Demo mit Mausklick: Verbesserte Version (mit Verweis-Ziel): In einem eigenem Fenster:
Gute Browser bieten bei Rechtsklick in einen Rahmen zusätzliche Möglichkeiten, z.B.
• Anzeige des Quelltextes - Zeigt den HTML-Code der angezeigten Webseite, nicht der Rahmen-Seite !
• Anzeige der Webseite in einem eigenen Fenster.
Im Demo-Fenster befindet sich (unsichtbar) die Rahmen-Webseite 'frame_a.htm'.
♦ Eine Rahmen-(frame)-Seite enthält keinen eigenen Inhalt, sie regelt lediglich die Aufteilung der Seite in Rahmen.
♦ Diese Rahmen-Seite definiert die beiden Rahmen 'links' und 'rechts', mit 35% bzw. 65% Breite. Jeder Rahmen werden mit einer normalen Webseite (z.B. a1.htm, a2.htm, a3.htm) gefüllt.
♦ Sie können mit Mausklick jede der beteiligten Webseiten (Rahmen oder Inhalt) in das Demo-Fenster laden, oder den Rahmen in eigenen Browser-Fenster ansehen.
♦ Die 3 Webseiten sind extrem einfach gehalten und zur leichteren Unterscheidung in unterschiedlichen Farben.
♦ Jede der Webseiten enthält Links auf die anderen Seiten - mit 'gewöhnlichen' Hyperlinks kann sich jede Webseite nur selbst ersetzen.
♦ Laden sie den Rahmen frame_b.htm in das Demo-Fenster: Er unterscheidet sich nur dadurch, dass links eine andere Webseite geladen wird.
Im Demo-Fenster befindet sich (unsichtbar) die Rahmen-Webseite 'frame_b.htm'.
♦ Eine Rahmen-(frame)-Seite enthält keinen eigenen Inhalt, sie regelt lediglich die Aufteilung der Seite in Rahmen.
♦ Diese Rahmen-Seite definiert die beiden Rahmen 'links' und 'rechts', mit 40% bzw. 60% Breite. Jeder Rahmen wird mit einer normalen Webseite gefüllt: Links a4.htm, rechts wahlweise a1.htm,a2.htm,a3.htm.
♦ Die Webseite a4.htm im Rahmen links wird zur Navigation verwendet: Ihre Links haben das Verweisziel target="rechts", daher wird bei Klick auf einen Link der Inhalt des Rahmen rechts ersetzt und nicht die Navigations-Seite selbst.
Im Demo-Fenster befindet sich eine 'normale' Webseite
♦ Derartige Seiten werden benötigt, um Rahmen mit anzeigbarem Inhalt zu füllen.
♦ Jeder Rahmen muss genau eine normale Webseite enthalten. Diese kann jedoch gegen eine andere ausgetauscht werden.

Diese Demonstration zeigt:

♦ Rahmen-(frame)-Technik dient zur Aufteilung eines Fensters in verschiedene Teile = Rahmen.
♦ In jedem Rahmen kann eine beliebige Webseite angezeigt werden.
♦ Die Rahmen-Seite frame_b.htm demonstriert einfache, sinnvolle Anwendung der Rahmen-Technik; Links eine Navigations-Seite, rechts der auswechselbare Inhalt.
♦ Normale Hyperlinks auf einer Webseite bewirken, dass diese Seite durch das Ziel des Links ersetzt wird.
♦ Hyperlinks mit einem Rahmen als Verweisziel bewirken, dass der Inhalt des betreffenden Rahmens durch das Ziel des Links ersetzt wird.

HTML-Programmierung von Rahmen
'Gewöhnliche' HTML-Webseiten enthalten die Elemente head und body
Im body befinden sich Texte, Grafiken usw, die vom Browser angezeigt werden.
Solche Webseiten werden zur 'Füllung' der Wechselrahmen verwendet.
<html>
<head><title>Webseite</title></head>
<body>
Dieser Inhalt wird angezeigt.
</body>
</html>

Rahmen-Seiten

Dieses Beispiel zeigt den HTML-Quellcode einer Rahmen-(frame)-Seite. Der Code ist meistens viel kürzer als der normaler Webseiten: Hier wird kein Inhalt eingetragen, sondern die Aufteilung des Fensters festgelegt:

♦ An Stelle des <body>-Elements befindet sich ein <frameset>-Element. Das Attribut cols bedeutet Aufteilung in senkrechte Spalten - hier mit 35% und 65% der Breite. 		HTML-Quellcode der Datei 'frame_b.htm'
<html>
<head><title>Rahmen</title></head>
<frameset cols="35%,65%">
<frame src='a4.htm' name='links' />
<frame src='a1.htm' name='rechts' />
</frameset>
</html>
♦ Innerhalb des <frameset>-Elements befinden sich<frame>-Elemente, jedes davon legt die Details eines einzelnen Rahmens fest.

♦ Damit das Beispiel funktioniert, werden mindestens 3 Dateien benötigt: Die Rahmen-Seite frame_b.htm und die beiden normalen Webseiten a4.htm und a1.htm
Im normalen Betrieb wird der Inhalt eines Rahmens (rechts) ausgetauscht, dazu werden dann weitere Webseiten benötigt. 		♦ Das erste <frame>-Element definiert einen Rahmen mit dem Namen links, in den anfangs die normale Webseite a4.htm geladen wird. Sie wird als Navigations-Seite verwendet, d.h. ihre Hyperlinks erhalten als Ziel den Namen des rechten Rahmens.

♦ Das zweite <frame>-Element definiert einen Rahmen mit dem Namen rechts, in den anfangs die normale Webseite a1.htm geladen wird. Diese Seite soll auswechselbar sein, z.B. gegen die Seiten a2.htm oder a3.htm.

♦ In der Rahmen-Seite findet sich kein Hinweis darauf, ob und wie der Inhalt der Rahmen gewechselt wird. Diese Funktion liegt ausschließlich in den geladenen Webseiten.

<frameset>

Dieses HTML-Element dient in Rahmen-(frame)-Seiten zur Definition der Fenster-Aufteilung:
Rechts je ein Beispiel für die Aufteilung in vertikale Spalten oder in horizontale Reihen.
Hier werden zur Aufteilung relative Maße in % der gesamten Breite bzw. Höhe verwendet.
<frameset cols="40%,60%">
<frame src='a.htm' name='f1' />
<frame src='b.htm' name='f2' />
</frameset>


 

 
<frameset rows="33%,66%">
<frame src='a.htm' name='f1' />
<frame src='b.htm' name='f2' />
</frameset>
 

 
Fixe Dimension:
Bei Verwendung von Spalten wird meistens links eine Navigations-Webseite fixer Breite eingesetzt. Der * an Stelle der Breiten-Angabe bedeutet 'gesamter Rest'.
Bei Einteilung in Reihen wird oben eine Seite mit Logo und Navigation eingesetzt. Sehen sie rechts, wie die fixe Höhe eingestellt und der Rest an den unteren Rahmen zugeteilt wird.

♦ Beispiele für komplexe Rahmen
<frameset cols="150px,*">
<frame src='a.htm' name='f1' />
<frame src='b.htm' name='f2' />
</frameset>


 

 
<frameset rows="100px,*">
<frame src='a.htm' name='f1' />
<frame src='b.htm' name='f2' />
</frameset>
 

 

<frame>

Jedes <frameset>-Element muss genau so viele <frame>-Elemente enthalten, wie mit dem Attribut cols bzw. rows festgelegt wurden.
Ein <frame>-Element definiert die Attribute für einen einzelnen Rahmen: Sie sollten mindestens den Namen des Rahmens und die Startseite festlegen.
♦ Details zum <frame>-Element auf der Seite Rahmen-Profi.

Verschachtelung

Jeder <frame> kann an Stelle einer gewöhnlichen Webseite einen weiteren <frameset> enthalten. Auf diese Weise lassen sich beliebig komplizierte Layouts aufbauen. In der Praxis beschränkt man sich auf 1-2 <frameset>s. Dabei kombiniert man am besten je einen <frameset> mit Zeilen und mit Spalten.
• Das Beispiel rechts zeigt eine häufig verwendete Anordnung:
Oben ein Logo-Rahmen, links die Navigation, rechts der auswechselbare Inhalt.
<frameset rows=100px,*">
<frame src='a.htm' name='f1' />
<frameset cols="100px,*">
<frame src='b.htm' name='f2' />
<frame src='c.htm' name='f3' />
</frameset>
</frameset

♦ Details zu verschachtelten Rahmen (nested frames)
 


 

 

Keine Rahmen in HTML 5
● Die Elemente <frameset> und <frame> werden aus der nächsten Version HTML 5 ersatzlos entfernt.
Als Begründung wird angegeben, dass damit die Verwendbarkeit (usabilty) von Webseiten eingeschränkt wird. 		Tatsächlich werden diese Elemente oft nicht sinnvoll sondern zu unsauberen Manipulationen eingesetzt.
An Stelle der Aufteilung in verschiedene Rahmen-Webseiten verwendet man besser einzelne Webseiten, in welche allerdings zahlreiche unterschiedliche Objekte eingebettet werden können.

● Einbettung

Das Element <iframe> kann weiter verwendet werden. Dieses Element wird zusammen mit mehreren bekannten und neuen Elementen zur Einbettung von Objekten in Webseiten verwendet, die in Zukunft größere Bedeutung haben wird.
Zur Einbettung dienen u.a. die Elemente <audio>, <canvas>, <embed>, <iframe>, <img>, <object>, <video>

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   HTML