Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Layer definieren und positionieren

Informationsseite

nach unten Allgemeines zu Layern
nach unten Layer definieren
nach unten Inline-Layer definieren
nach unten Anzeigebereich von Layern beschneiden
nach unten Layer mit Inhalt aus anderer Datei
nach unten Layer verschachteln
nach unten Hintergrundfarbe für Layer
nach unten Hintergrundbild (Wallpaper) für Layer

 nach unten 

Allgemeines zu Layern

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 Seite Dynamisches HTML nach dem Modell von Netscape zu bilden. Bei diesem Modell lassen sich Layer-Bereiche mit Hilfe von Kapitel 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 Kapitel Stylesheets zu verankern. In den HTML-Sprachstandard 4.0 fanden die hier vorgestellten Elemente deshalb keinen Einlass. Angesichts der Tatsache, dass die neuen Seite 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.

nach obennach unten

Netscape 4.0 Layer definieren

Sie 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.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Layer definieren</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.png" width="68" height="68" border="0"
         alt="Was der Mond alles mit ansehen mu&szlig;">
  </p>

</layer>

</body>
</html>

Erläuterung:

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 umbrochen, 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 Seite layers ansprechen. Neben id wird bei Layern auch die Angabe name für diesen Zweck interpretiert.

Beachten Sie:

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 nach unten 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.

nach obennach unten

Netscape 4.0 Inline-Layer definieren

Inline-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.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Inline-Layer definieren</title>
</head>
<body>

<p>Das ist <ilayer bgcolor="#FFEECC" top="3">Layer-Text</ilayer> mitten im
Text. Das Wort &quot;Layer-Text&quot; ist dabei in einen Inline-Layer
eingebunden und hat eine Hintergrundfarbe erhalten. Au&szlig;erdem wurde
der Inline-Layer 3 Pixel tiefer dargestellt als der normale Text.</p>

</body>
</html>

Erläuterung:

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.

nach obennach unten

Netscape 4.0 Anzeigebereich von Layern beschneiden

Sie 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.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Anzeigebereich von Layern beschneiden</title>
</head>
<body>

<h1>Halbmond</h1>

<layer top="100" left="150" clip="0,0,68,34">
  <img src="bild.png" width="68" height="68" border="0" alt="Mond">
</layer>

</body>
</html>

Erläuterung:

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.

nach obennach unten

Netscape 4.0 Layer mit Inhalt aus anderer Datei

Es ist möglich, innerhalb eines Layers eine andere HTML-Datei anzuzeigen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Anzeigebereich von Layern beschneiden</title>
</head>
<body>

<h1>SELFHTML im Layer</h1>

<layer top="80" left="40" src="../../../index.htm"></layer>

</body>
</html>

Erläuterung:

Mit dem Attribut src können Sie eine andere HTML-Datei in einen Layer einbinden. Dabei gelten die Regeln zum Seite 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.

nach obennach unten

Netscape 4.0 Layer verschachteln

Sie können innerhalb von Layer-Bereichen andere Layer definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Layer verschachteln</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>

Erläuterung:

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.

nach obennach unten

Netscape 4.0 Hintergrundfarbe für Layer

Sie können für jeden definierten fest positionierten oder fließenden Layer eine eigene Hintergrundfarbe definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Hintergrundfarbe für Layer</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>

Erläuterung:

Mit dem Attribut bgcolor im einleitenden Tag von <layer> oder <ilayer> bestimmen Sie die Hintergrundfarbe (bgcolor = background color = Hintergrundfarbe). Dabei gelten die Regeln zum Seite Definieren von Farben in HTML.

Beachten Sie:

Wenn Sie eine Hintergrundfarbe für einen Layer definieren, sollten Sie für Text, der in den Layern erscheint, eine kontrastierende Schriftfarbe wählen.

nach obennach unten

Netscape 4.0 Hintergrundbild (Wallpaper) für Layer

Sie können für jeden definierten fest positionierten oder fließenden Layer ein eigenes Hintergrundmuster (Wallpaper) definieren. Das funktioniert genauso wie bei Seite Hintergrundbildern (Wallpapers) für den gesamten Dateikörper.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Hintergrundbild für  Layer</title>
</head>
<body background="back1.jpg">

<layer top="0" left="0" width="400" height="300" background="back2.png">
  <h1>Bunte Zeiten</h1>
</layer>

</body>
</html>

Erläuterung:

Durch die Angabe von background im einleitenden Layer-Tag können Sie ein Hintergrundbild für den Layer bestimmen (background = Hintergrund). Dabei gelten die Regeln zum Seite Referenzieren in HTML.

Beachten Sie:

Innerhalb dieses Dokuments finden Sie im Abschnitt über typische Grafiksorten für Web-Seiten ein paar typische Seite Hintergrundbilder.

Netscape interpretiert auch Seite animierte GIF-Grafiken als Hintergrundbilder.

 nach oben
weiter Seite Layer anordnen und kontrollieren
zurück Seite Multimedia einbinden (Netscape herkömmlich)
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/layer/definieren.htm