Layer (Schichten) sind ein Sprachelement von HTML, das Netscape mit der Version 4.0 seines Browsers einführte. Mit Hilfe der beiden HTML-Elemente, die dazugehören, ist es möglich, beliebige Bereiche einer HTML-Datei als exakt positionierte Bereiche auszuzeichnen. So können Sie zum Beispiel eine Überschrift, eine Grafik und erklärenden Text dazu als Layer definieren. Diese definierte Einheit lassen Sie 100 Pixel von links und 50 Pixel von oben - gemessen am Anzeigefenster des Browsers - beginnen. Für die gesamte Einheit definieren Sie eine maximale Breite, zum Beispiel 200 Pixel.
In HTML allein haben die Layer jedoch nicht allzuviel Bedeutung, sieht man
einmal von der Möglichkeit der absoluten Positionierung von Elementen ab.
Der eigentliche Zweck der Layer ist es, die HTML-Grundlage für 
Dynamisches
HTML nach dem Modell von Netscape zu bilden. Bei diesem Modell lassen sich Layer-Bereiche mit Hilfe von 
JavaScript
auf vielfältige Weise verändern. So können Layer-Bereiche über
den Bildschirm wandern, auf-/zuklappen, anderen Inhalt annehmen usw.
Sie können beliebig viele Layer innerhalb einer HTML-Datei definieren. Layer können sich dabei auch überlappen. Wenn Sie beispielsweise zwei Überschriften mit anschließender Grafik und erklärendem Text zu je einem Layer zusammenfassen, können beide Layer die gleichen Pixelpositionen erhalten. Mit Hilfe von JavaScript können Sie dann dynamisch einen der Layer ausschalten und den anderen einschalten. Sie können aber auch beide Layer gleichzeitig anzeigen und bestimmen, welcher über dem anderen liegen soll.
Layer können eigene Hintergrundfarben und sogar eigene Hintergrundbilder (Wallpapers) haben. Dadurch ergeben sich viele zusätzliche Gestaltungsmöglichkeiten beim Verteilen von Farben und Formen am Bildschirm.
Wenn Sie eine GIF-Grafik mit transparentem Hintergrund als eigenen Layer definieren, können Sie diese Grafik über oder unter Texte oder andere Grafiken legen und dadurch interessante Effekte erzeugen.
Das einzige Problem mit den Layern ist: sie kamen zu spät. Das W3-Konsortium hatte sich bereits darauf eingeschossen, die Möglichkeit des absoluten Positionierens nicht in HTML, sondern in den Stylesheets zu verankern. In den HTML-Sprachstandard 4.0 fanden die hier vorgestellten Elemente deshalb keinen Einlass. Angesichts der Tatsache, dass die neuen CSS-Eigenschaften zum Positionieren von Elementen offizieller Standard sind und sowohl von Netscape als auch vom Internet Explorer interpretiert werden, ist die Layer-Technik in HTML ins Abseits geraten. Wegen der starken Verknüpfung zwischen Layer-Technik und Dynamischem HTML nach Netscape 4.x werden sie an dieser Stelle jedoch noch beschrieben.
  |
Layer definierenSie können innerhalb des Körpers einer HTML-Datei fest positionierte Layer definieren. Solche Layer haben eine definierte obere linke Ecke im Anzeigefenster. Außerdem können Sie eine bestimmte Breite erzwingen.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body> <layer id="Beispiel_ID" name="Beispielname" top="150" left="250" width="300"> <h1>Irgendwo auf Ihrem Bildschirm ...</h1> <p>Alles, was Sie hier sehen, ist in einen Layer integriert. Auch das folgende Bild:</p> <p><img src="bild.gif" width="68" height="68" border="0" alt="Was der Mond alles mit ansehen muß"></p> </layer> </body> </html>
Mit <layer> leiten Sie die Definition eines Layer-Bereichs innerhalb einer HTML-Datei ein (layer = Schicht). Mit der Angabe name= können Sie einen Namen für den definierten Bereich vergeben. Zwischen dem einleitenden <layer>-Tag und dem abschließenden </layer> können Sie beliebige andere Elemente einer HTML-Datei notieren, also zum Beispiel Überschriften, Textabsätze, Tabellen, Grafik- oder Multimedia-Referenzen, Verweise usw. Alle Elemente, die Sie innerhalb eines Layers definieren, verhalten sich entsprechend der Eigenschaften, die Sie für den entsprechenden Layer definieren. Den Layer selbst müssen Sie sich dabei vorstellen wie ein eigenes Anzeigefenster ohne sichtbare Umrandungen, das in das normale Anzeigefenster des Web-Browsers eingebettet ist.
Mit dem Attribut left bestimmen Sie die Anzahl Pixel vom linken Rand des Anzeigefensters, mit top die Anzahl Pixel vom oberen Rand des Anzeigefensters (left = links, top = oben). Mit width können Sie eine Anzeigebreite für den Layer-Bereich erzwingen, mit height die Höhe (width = Breite, height = Höhe). Elemente innerhalb des Layers werden dann so umgebrochen, dass die angegebene Breite eingehalten wird.
Mit dem Attribut id können Sie einen Namen für den Layer-Bereich vergeben. Unter diesem Namen können Sie den Layer in JavaScript mit Hilfe des Objekts layers ansprechen. Neben id wird bei Layern auch die Angabe name für diesen Zweck interpretiert.
Wenn Sie mit Layern arbeiten und diese absolut im Anzeigebereich positionieren, wird es in den meisten Fällen sinnvoll sein, innerhalb einer HTML-Datei alle anzuzeigenden Elemente innerhalb von fest positionierten Layern zu notieren. Denn andernfalls gerät Ihnen die Anzeige leicht außer Kontrolle.
Wenn es der Inhalt erfordert, werden Angaben zur Breite außer Kraft gesetzt. Wenn beispielsweise eine Grafik oder eine Tabelle mehr Platz in Anspruch nimmt als die angegebene Breite, wird die Grafik bzw. die Tabelle in jedem Fall in voller Breite angezeigt. Dies können Sie allerdings verhindern - siehe Anzeigebereich von Layern beschneiden.
Die Angaben zu linker und oberer Ecke sowie zur Breite sind zwar in den meisten Fällen erwünscht, jedoch nicht zwingend erforderlich. Wenn Sie keine Angaben dazu machen, beginnt der Layer einfach oben links, so wie das erste Element im Dateikörper der HTML-Datei.
| |
Inline-Layer definierenInline-Layer beginnen relativ an der Stelle, an der sie innerhalb der HTML-Datei stehen. Solche Layer erzeugen keinen eigenen Absatz im Fließtext. Ansonsten können sie aber alle Eigenschaften von Layern haben, also beispielsweise eine eigene Hintergrundfarbe.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body> <p>Das ist <ilayer bgcolor="#FFEECC" top="3">Layer-Text</ilayer> mitten im Text. Das Wort "Layer-Text" ist dabei in einen Inline-Layer eingebunden und hat eine Hintergrundfarbe erhalten. Außerdem wurde der Inline-Layer 3 Pixel tiefer dargestellt als der normale Text.</p> </body> </html>
Mit <ilayer> leiten Sie die Definition eines Inline-Layer-Bereichs ein, mit </ilayer> schließen Sie sie ab (ilayer = inline layer).
Sie können auch Attribute wie top oder left auf einen <ilayer>-Bereich anwenden. Die Angaben werden dann jedoch nicht als Werte gemessen vom Fensterrand interpretiert, sondern als Werte gemessen von der normalen Position des Inline-Layers. So können Sie beispielsweise mitten in einem Text eine Anweisung notieren wie:
<ilayer top="3">Wort</ilayer>. Dann erscheint dieses eine Wort um genau 3 Pixel tiefer als der übrige Text.
Auch die Attribute id und name sind bei Inline-Layern erlaubt.
| |
Anzeigebereich von Layern beschneidenSie können einen Bereich erzwingen, innerhalb dessen der Inhalt eines Layers angezeigt werden muss. Wenn der Inhalt mehr Platz in Anspruch nimmt (z.B. weil eine Grafik breiter ist), wird er abgeschnitten. Mit diesem Merkmal können Sie Effekte erzeugen, dass der Inhalt eines Layers wie durch ein Fenster gesehen erscheint, wobei beim Blick durch das Fenster nur ein Ausschnitt des Inhalts sichtbar ist.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body> <h1>Halbmond</h1> <layer top="100" left="150" clip="0,0,68,34"> <img src="bild.gif" width="68" height="68" border="0" alt="Mond"> </layer> </body> </html>
Mit dem Attribut clip können Sie einen Anzeigebereich erzwingen (clip = Ausschnitt). Als Wert notieren Sie zwei oder vier Zahlenwerte zum Bestimmen des gewünschten Bereichs. Trennen Sie die Zahlenwerte durch Kommata.
Wenn Sie vier Zahlenwerte angeben, bedeuten die Zahlen die Koordinaten des gewünschten Rechtecks (in dieser Reihenfolge):
clip="Pixel für links, Pixel für oben, Pixel für rechts, Pixel für unten"
und zwar relativ zur oberen linken Ecke des Layers. Wenn also im ersten der obigen Beispiele etwa durch left="30" und top="20" eine absolute obere linke Ecke für den Layer definiert wird, so bedeutet etwa die erste Angaben bei clip - 20 - so viel wie: der erzwungene Anzeigebereich beginnt 20 Pixel links vom linken Rand des Layers (der bei 30 Pixeln liegt), absolut gesehen also bei 50 Pixeln.
Wenn Sie zwei Zahlenwerte angeben, bedeuten die Zahlen die Breite und Höhe des gewünschten Rechtecks (in dieser Reihenfolge):
clip="Pixel für Breite, Pixel für Höhe"
und zwar beginnend bei der oberen linken Ecke des Layers. Wenn Sie etwa wie im zweiten der obigen Beispiele mit width eine bestimmte Breite des Layers erzwingen und sicherstellen wollen, dass die Breite auch eingehalten wird, wenn der Inhalt des Layers breiter ist, können Sie mit clip="200,[Höhe]" erzwingen, dass die Breite eingehalten wird.
| |
Layer mit Inhalt aus anderer DateiEs ist möglich, innerhalb eines Layers eine andere HTML-Datei anzuzeigen.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body> <h1>SELFHTML im Layer</h1> <layer top="80" left="40" src="../../../index.htm"></layer> </body> </html>
Mit dem Attribut src können Sie eine andere HTML-Datei in einen Layer einbinden. Dabei gelten die Regeln zum Referenzieren in HTML. Die Datei nimmt dabei den üblichen Raum im Anzeigefenster ein, beginnend bei den angegebenen Positionen zu top und left. Angaben zu width und height werden nur eingehalten, wenn der Inhalt der Datei in Breite und Höhe weniger Platz in Anspruch nimmt.
| |
Layer verschachtelnSie können innerhalb von Layer-Bereichen andere Layer definieren.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body> <layer top="100" left="100" bgcolor="#FF99FF"> <h1>Die Macht</h1> <layer pagex="80" left="40" bgcolor="#99FFFF"> <h1>kommt aus der Nacht</h1> </layer> </layer> </body> </html>
Wichtig ist dabei die unterschiedliche Wirkung der Positionsangaben. Im obigen Beispiel erhält der innere Layer die gleichen Angaben zu left und top wie der äußere Layer. Der äußere Layer ist dabei der Bezugspunkt für die Startposition des inneren Layers, nicht das Anzeigefenster! Der innere Layer beginnt im Beispiel also 100 Pixel von oben und 100 Pixel von links, gemessen an der linken oberen Ecke des äußeren Layers.
Es gibt jedoch auch die Möglichkeit, einen inneren Layer absolut zu positionieren. Dazu stehen die zusätzlichen Attribute pagey=100 und pagex=100 (pagex = page x = Seite x-Wert, pagey = page y = Seite y-Wert). Diese Angaben bewirken, dass als Bezugspunkt das Anzeigefenster und nicht der übergeordnete Layer verwendet wird.
| |
Hintergrundfarbe für LayerSie können für jeden definierten fest positionierten oder fließenden Layer eine eigene Hintergrundfarbe definieren.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body> <layer top="0" left="0" width="50" height="40" bgcolor="#000000"></layer> <layer top="0" left="50" width="50" height="40" bgcolor="#000033"></layer> <layer top="0" left="100" width="50" height="40" bgcolor="#000066"></layer> <layer top="0" left="150" width="50" height="40" bgcolor="#000099"></layer> <layer top="0" left="200" width="50" height="40" bgcolor="#0000CC"></layer> <layer top="0" left="250" width="50" height="40" bgcolor="#0000FF"></layer> </body> </html>
Mit dem Attribut bgcolor im einleitenden Tag von <layer> oder <ilayer> bestimmen Sie die Hintergrundfarbe (bgcolor = background color = Hintergrundfarbe). Dabei gelten die Regeln zum Definieren von Farben in HTML.
Wenn Sie eine Hintergrundfarbe für einen Layer definieren, sollten Sie für Text, der in den Layern erscheint, eine kontrastierende Schriftfarbe wählen.
| |
Hintergrundbild (Wallpaper) für LayerSie können für jeden definierten fest positionierten oder fließenden Layer ein eigenes Hintergrundmuster (Wallpaper) definieren. Das funktioniert genauso wie bei Hintergrundbildern (Wallpapers) für den gesamten Dateikörper.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Text des Titels</title> </head> <body background="back1.jpg"> <layer top="0" left="0" width="400" height="300" background="back2.gif"> <h1>Bunte Zeiten</h1> </layer> </body> </html>
Durch die Angabe background= im einleitenden Layer-Tag können Sie ein Hintergrundbild für den Layer bestimmen (background = Hintergrund). Dabei gelten die Regeln zum Referenzieren in HTML.
Innerhalb dieses Dokuments finden Sie im Abschnitt über typische Grafiksorten für Web-Seiten ein paar typische Hintergrundbilder.
Netscape interpretiert auch animierte GIF-Grafiken als Hintergrundbilder.
|
| |
 |
Layer anordnen und kontrollieren
|
 |
Multimedia einbinden (Netscape herkömmlich)
|
 SELFHTML/Navigationshilfen HTML/XHTML Layer (Netscape) |
|
© 2005 Impressum
