kostenlose Tutorials von handschigl Media

HTML lernen - Frames - Normale Frames

Sie kennen diese Websites bestimmt auch. Sie haben oben und/oder links eine Navigation und wenn man darauf klickt, wird nur im eigentlichen Inhaltsteil der Website etwas neues geladen und nicht die komplette Website.

Oder haben Sie sich schon gefragt, wie aufwändig und unkomfortabel HTML eigentlich ist, weil Sie auf jeder Seite Ihrer Website die komplette Navigation, den Kopf der Website und anderes erneut programmieren oder heinkopieren müssen? Aber nicht nur das. Möchten Sie einmal einen Navigationspunkt Ihrer Website ändern, müssen Sie das in zig-Dateien machen, da Sie ja die Navigation in jede Seite eingebaut haben.

Aus diesem Grund gibt es so genannte Frames.

Frames erlauben Ihnen das Erstellen einer Website aus mehreren Websites.

Achtung: Suchmaschinen, wie Google mögen Frames überhaupt nicht. Der Grund dafür ist, dass der eigentliche Inhalt der Website nicht dort steht, wo er erwartet wird. Die Suchmaschine muss zuerst den Frames folgen, um den eigentlichen Inhalt zu finden und benötigt ausgedrückt so mehr "Power". Außerdem fehlen eventuell wichtige Seitenelemente (z.B. die Navigation oder der eigentliche Inhalt), wenn Surfer über Google auf eine Seite mit Frames geführt werden. Solange Sie nur HTML und keine serverseitige Scriptsprache können, müssen Sie Frames verwenden, sofern Sie nicht jedes Mal die komplette Navigation bzw. den kompletten Header neu programmieren möchten. Möchten Sie mit Ihrer Website in den Suchmaschinen präsent sein und auch wirklich gefunden werden, so sollten Sie auf Frames verzichten und jede Seite Ihrer Website mit dem Grundgerüst versehen.

Der frameset-Tag

Der frameset-Tag stellt das Grundgerüst des Frames dar. Er legt fest, wie viele Frames auf der Website enthalten sind, wie groß diese sind und welche Anordnung vorliegen soll.

Da die Seite, die das Frameset enthält, keinen eigentlichen Inhalt mehr haben kann, wird hier der body-Code mit allen seinen Inhalten herausgelassen. Stattdessen wird dort der frameset-code platziert. Da die Erklärung des Aufbaus eines Framesets mit Frames extrem kompliziert ist, zeigen wir Ihnen hier einige Beispiel-Codes und beschreiben, was diese besagen.

Beispiel 1:
<frameset rows="100,*" frameborder="1" border="1">
 <frame name="oben" frameborder="1" src="oben.html" scrolling="yes" noresize>
 <frame name="unten" frameborder="1" src="unten.html" scrolling="auto" noresize>
</frameset>
Hier sehen Sie ein Frameset bestehend aus zwei horizontalen Frames, z.B. für den Seitenkopf mit Navigation und darunter der eigentliche Seiteninhalt.

Dass es sich um zwei horizontale Frames handelt, sehen wir an dem Attribut rows für Zeilen. Dieses Attribut legt die Anzahl der "Zeilen" und die Größe dieser fest. Somit ist der obere Frame 100 Pixel hoch, während der untere Frame eine variable Höhe erhält. Dafür steht der Stern.

Hinweis: Es ist ratsam, dass Sie den Stern für mindestens einen Frame verwenden, da sich die Bilschirmauflösung von Surfer zu Surfer ändert. Würden Sie in dem Beispiel oben z.B. angeben, dass der zweite Frame 1000 Pixel hoch sein soll, so könnten Surfer mit einer niedrigeren Bildschirmauflösung nur einen Teil der Website sehen, während andere Surfer mit einer hohen Auflösung unten im freien Ruam einen hässlichen grauen Bereich sehen.

Die Attribute frameborder und border geben die Breite der Framelinien an. Sollen die Linien verschwinden, müssen Sie allen drei Attributen den Wert 0 zuweisen.

Im Attribut src steht die jeweilige HTML-Datei, die im Frame angezeigt werden soll. Bei der Angabe dieses Attributwertes sollte auf korrekte Dateipfade geachtet werden, die bereits in einem frühren Kaptiel behandelt wurden. Andernfalls kann es passieren, dass die Frames eine Fehlermeldunga anstatt der gewünschten Website anzeigen. Sollte dies der Fall sein, müssen Sie den Dateipfad überprüfen.

Wie Sie sehen, hat auch jeder Frame das name-Attribut. Dieses Attribut sollte auf jeden Fall verwendet werden. Es enthält einen beliebigen Namen.

Achtung: Achten Sie darauf, dass der Name innerhalb eines Framesets nur einmal verwendet wird! Außerdem muss der Name mit einem Buchstaben beginnen und darf anschließend nur Buchstaben, Zahlen, Bindestriche (-), Unterstriche (_), Punkte (.) oder Doppelpunkte (:) enthalten. Es dürfen keine Leerzeichen oder Umlaute verwendet werden!

Das Attribut scrolling bestimmt, ob der Browser im jeweiligen Frame Scrollbalken immer anzeigen soll (yes), nie anzeigen soll (no) oder nur bei Bedarf anzeigen soll (auto). auto ist die Standardeinstellung, wenn nichts anderes angegeben wurde.

Verwenden Sie das Attribut noresize, wenn Sie nicht möchten, dass der Betrachter Ihrer Website, die Frames größer oder kleiner machen kann. Sollten Sie die Framelinien ausgeblendet haben, ist diedses Attribut unnötig. Bitte beachten Sie, dass dieses Attribut keinen Attributwert hat!


Beispiel 2:
<frameset cols="*,*" frameborder="1" border="1">
           <frame name="links" src="links.html">
           <frame name="rechts" src="rechts.html">
         </frameset>
Hier haben wir nun eine Frameset bestehend aus zwei vertikalen Frames, die beide gleich groß sind.

Sehen Sie sich das Frameset genauer an, sehen Sie dieses mal das Attribut cols anstelle von rows. cols steht hier für Spalten.

Alle anderen Attribute sind bereits bekannt.


Beispiel 3:
<frameset rows="*" cols="90,*" frameborder="1" border="1">
 <frame name="links" src="links.html">
 <frameset rows="90,*" frameborder="1" border="1">
   <frame name="oben" src="oben.html">
   <frame name="main" src="http://www.andere-seite.de/main.html">
 </frameset>
</frameset>
Dieses Beispiel zeigt nun eine Kombination aus horizontalen und vertikalen Frames. Zunächst wurde ein Frameseit aus zwei vertikalen Frames angelegt. Anstelle des zweiten bzw. rechten Frames, steht nun wieder ein Frameset mit zwei horizontalen Frames. Dieses unterteilt den zweiten/rechten Frame in zwei weitere Frames.

Außerdem sehen Sie hier, dass der Frame mit dem Namen main eine andere, externe Website enthält. Dies soll Ihnen zeigen, dass sich die Inhalte eines Frames nicht auf die eigene Website beschränken, sondern Sie auch andere Websites in Ihre Frames ingerieren können.