SELFHTML/Quickbar  HTML  Layer - positionierbare Elemente

	Layer definieren und positionieren
	Allgemeines zu Layern  Layer definieren  Inline-Layer definieren  Anzeigebereich von Layern beschneiden  Layer mit Inhalt aus anderer Datei  Layer verschachteln

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-Tags, 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 zu bilden. Beim  Dynamischen Positionieren, dem Ansatz für Dynamisches HTML nach Netscape, 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 faszinierende 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  CSS Style-Sheets zu verankern. Auch für ein HTML-Tag, das vor allem für das Behandeln mit JavaScript gedacht ist, zeigte man dort wenig Verständnis. In den HTML-Sprachstandard 4.0 fanden die hier vorgestellten Befehle deshalb keinen Einlaß. Angesichts der Tatsache, daß die neuen  CSS-Befehle zum Positionieren von Elementen offizieller Standard sind und sowohl von Netscape als auch vom MS Internet Explorer interpretiert werden, ist die Layer-Technik in HTML ins Abseits geraten. Wegen der starken Verknüpfung zwischen Layer-Technik und Dynamischem HTML ist dadurch freilich auch der gesamte Netscape-Ansatz für Dynamisches HTML wackelig geworden.

Fest positionierte Layer definieren

Anzeigebeispiel: So sieht's aus

Sie können innerhalb des Körpers einer HTML-Datei (siehe  Grundgerüst 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:

<layer id="Beispiel" left=300 top=250 width=150 height=400>
<h1>Eine &Uuml;berschrift</h1>
<img src="datei.gif" alt="Ein Bild">
</layer>

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.

Mit der Angabe 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, daß die angegebene Breite eingehalten wird.

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

Zwischen dem einleitenden <layer ...> und dem erforderlichen, 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 WWW-Browsers eingebettet ist.

Beachten Sie:

Neben den Angaben zu left= und top= gibt es auch noch die ähnlichen Angaben pagex= (wirkt im Normalfall wie left=) und pagey= (wirkt im Normalfall wie top=). Der Unterschied ist, daß left= und top= sich genaugenommen am Dokumentrand orientieren und nicht am Fensterrand. Der Unterschied macht sich dann bemerkbar, wenn Sie  Layer verschachteln. Dort wird der Unterschied der Atrribute näher beschrieben.

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.

Wenn Layer nichts anderes enthalten als  GIF-Grafiken mit transparentem Hintergrund, können Sie diese Grafiken mit Hilfe der Layer beliebig übereinanderschichten und dadurch interessante Effekte erzeugen.

Inline-Layer definieren

Anzeigebeispiel: So sieht's aus

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:

Das ist <ilayer>Layer-Text</ilayer> mitten im Text.

Erläuterung:

Mit <ilayer ...> leiten Sie die Definition eines Inline-Layer-Bereichs ein (ilayer = inline layer). Mit der Angabe name= können Sie einen Namen für den definierten Bereich vergeben.

So wie im obigen Beispiel definiert, bewirkt ein <ilayer>-Bereich rein gar nichts. Erst durch Angaben zu Hintergrundfarben und Hintergrundbild lassen sich dabei interessante Effekte erzielen.

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:
Dieses <ilayer top=3>Wort</ilayer> erscheint um genau 3 Pixel tiefer als der übrige Text

Anzeigebereich von Layern beschneiden

Anzeigebeispiel: So sieht's aus

Sie können einen Bereich erzwingen, innerhalb dessen der Inhalt eines Layers angezeigt werden muß. 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, daß der Inhalt eines Layers wie durch ein Fenster gesehen erscheint, wobei beim Blick durch das Fenster nur ein Ausschnitt des Inhalts sichtbar ist.

Beispiel:

<layer name="Beispiel" left=30 top=20 width=260 clip="20,30,200,300">
<h1>Eine &Uuml;berschrift</h1>
<img src="datei.gif" alt="Ein Bild">
</layer>

Erläuterung:

Mit dem Attribut clip= können Sie einen Anzeigebereich erzwingen (clip = Ausschnitt). Hinter dem Istgleichzeichen notieren Sie zwei oder vier Zahlenwerte zum Bestimmen des gewünschten Bereichs. Die Angabe muß in Anführungszeichen stehen. 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, daß die Breite auch eingehalten wird, wenn der Inhalt des Layers breiter ist, können Sie mit clip="200,Höhe" erzwingen, daß die Breite eingehalten wird.

Layer mit Inhalt aus anderer Datei

Anzeigebeispiel: So sieht's aus

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

Beispiel:

<layer src="news.htm" top=150 left=200</layer>

Erläuterung:

Mit dem Attribut src= können Sie eine andere HTML-Datei in einen Layer einbinden. 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 verschachteln

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

Beispiel 1:

<layer top=100 left=100>
  <layer top=100 left=100>
     <img src="bild1.gif">
  </layer>
</layer>

Beispiel 2:

<layer top=100 left=100>
  <layer pagey=100 pagex=100>
     <img src="bild1.gif">
  </layer>
</layer>

Erläuterung:

Innerhalb eines Layers können Sie andere Layer definieren.

Wichtig ist dabei die unterschiedliche Wirkung der Positionsangaben. Im obigen Beispiel 1 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.

Ganz anders dagegen im obigen Beispiel 2. Dort erhält der innere Layer die Angaben pagey=100 und pagex=100 (pagex = page x = Seite x-Wert, pagey = page y = Seite y-Wert). Diese Angaben bewirken, daß als Bezugspunkt das Anzeigefenster und nicht der übergeordnete Layer verwendet wird. Im obigen Beispiel 2 hat das zur Folge, daß der äußere und der innere Layer genau an der gleichen Position beginnen. Da der äußere Layer im Beispiel keinen anderen Inhalt als den inneren Layer hat, ist am Bildschirm nur der innere Layer zu sehen.

weiter:	Hintergrund von Layern
zurück:	Mime-Typen für Dateiformate

SELFHTML/Quickbar  HTML  Layer - positionierbare Elemente

© 1998  Stefan Münz, muenz@csi.com