HTML-Dateien selbst erstellen
	Dokumentation: HTML
		Layer - variable Schichten

Layer definieren und positionieren

Allgemeines zu Layern
Fest positionierte Layer definieren
Fließende Layer definieren
Anzeigebereich von Layern beschneiden
Layer verschachteln

Allgemeines zu Layern

Layer (Schichten) sind ein neues Sprachelement von HTML, das Netscape mit der Version 4.0 seines Browsers einführt. Dieses Sprachelement ist ein Zugeständnis an Screen-Designer, die sich am Multimedia-Standard von CD-ROMs orientieren und die entsprechenden Möglichkeiten auch im WWW-Format HTML verwirklicht sehen wollen. Layer werden jedoch bislang nur von Netscape ab V4.0 interpretiert. Bei ihrem Einsatz im WWW ist deshalb Vorsicht angebracht.

Mit Hilfe von Layern können Sie beliebige Teile einer HTML-Datei als zusammengehörige Einheiten definieren. Diese Einheiten können Sie mit genauen Pixelangaben frei am Bildschirm positionieren und mit Hilfe von JavaScript dynamisch behandeln. 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. Ferner können Sie entscheiden, ob die Layer-Einheit angezeigt werden soll oder nicht. Mit Hilfe von JavaScript können Sie die Anzeige der Layer-Einheit nachträglich ein- oder ausschalten.

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. Außerdem können Sie festlegen, daß ein Layer "durchsichtig" sein soll oder nicht.

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.

Es gibt festpositionierte und fließende Layer. Fest positionierte Layer haben absolute Pixelkoordinaten und erscheinen genau an der festgelegten Stelle am Bildschirm. Fließende Layer erscheinen innerhalb der HTML-Datei einfach an der Stelle, an der sie definiert werden.

Beachten Sie:

Zum Redaktionsschluß dieses Dokuments stand dem Autor nur die noch nicht ganz ausgereifte Dokumentation von Netscape zur Verfügung. Zum Testen stand nur die Beta-1-Version von Netscape 4.0 zur Verfügung. Diese Version unterstützte nur fest positionierte Layer, keine fließenden Layer. Es kann sein, daß nicht alle Informationen in diesem Kapitel korrekt sind. Das Kapitel wird angepaßt, wenn die Layer-Technik ausgereift ist.

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 name="Beispiel" left=300 top=250 width=150>
<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 (width = Breite). Elemente innerhalb des Layers werden dann so umgebrochen, daß die angegebene Breite eingehalten wird.

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:

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.

Eine Höhe für den Layer-Bereich können Sie nicht angeben (war in Netscape 4.0 Beta 1 noch nicht vorgesehen, jedoch geplant - dafür soll die Angabe height= dienen). Die Höhe ergibt sich ansonsten automatisch durch den Inhalt, also die Elemente, die innerhalb des Layers definiert werden. Zum Redaktionsschluß dieses Dokuments war kein Scrollen bei Inhalten möglich, die länger waren als die Höhe des Anzeigefensters. Das heißt, weitere Inhalte waren nicht anzeigbar.

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.

Tip:

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.

Fließende Layer positionieren

Anzeigebeispiel: So sieht's aus

Sie können innerhalb des Körpers einer HTML-Datei (siehe Grundgerüst einer HTML-Datei) fließende Layer definieren. Solche Layer beginnen relativ an der Stelle, an der sie innerhalb der HTML-Datei stehen. Für fließende Layer können Sie wie für fest positionierte Layer eine obere linke Ecke definieren. Die Angaben gelten jedoch nicht absolut bezogen auf das Anzeigefenster, sondern relativ zum vorhergehenden Element, also zum Beispiel zum voranstehenden Textabsatz. Außerdem können Sie eine bestimmte Breite erzwingen.

Beispiel:

<ilayer name="Beispiel" left=30 top=20 width=150>
<h1>Eine &Uuml;berschrift</h1>
<img src="datei.gif" alt="Ein Bild">
</ilayer>

Erläuterung:

Mit <ilayer ...> leiten Sie die Definition eines Layer-Bereichs innerhalb einer HTML-Datei ein (ilayer = inflow layer = fließende Schicht). Mit der Angabe name= können Sie einen Namen für den definierten Bereich vergeben.

Mit der Angabe left= bestimmen Sie einen Abstand zum Element links des Layers (left = links). Wenn der Layer ganz normal im Fließtext definiert wird, ist das der Abstand zum linken Rand des Anzeigefensters - Sie definieren dadurch also einen Absatzeinzug. Wenn der Layer beispielsweise innerhalb einer Tabellenzelle definiert wird, ist es der Abstand zum linken Zellenrand.

Mit top= bestimmen Sie den Abstand des Layer-Bereichs zum vorhergehenden Element (top = oben). Wenn das vorhergehende Element zum Beispiel ein normaler Textabsatz ist, definieren Sie auf diese Weise einen Abstand zu dem Absatz.

Mit width= können Sie eine Anzeigebreite für den Layer-Bereich erzwingen (width = Breite). Elemente innerhalb des Layers werden dann so umgebrochen, daß die angegebene Breite eingehalten wird.

Zwischen dem einleitenden <ilayer ...> und dem erforderlichen, abschließenden </ilayer> können Sie beliebige andere Elemente einer HTML-Datei notieren.

Beachten Sie:

Fließende Layer erzeugen keinen neuen Absatz. Wenn Sie beispielsweise Absatzabstände mit Hilfe von fließenden Layern erzwingen wollen, müssen Sie zuvor eine

Absatzschaltung einfügen. Dies hat jedoch auch Vorteile. 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 1:

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

Beispiel 2:

<ilayer name="Beispiel" width=200 clip="200,400">
<h1>Eine &Uuml;berschrift</h1>
<img src="datei.gif" alt="Ein Bild">
</ilayer>

Erläuterung:

Mit der Angabe 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 verschachteln

Sie können innerhalb von Layer-Bereichen andere Layer definieren. Positionsangaben in Layern innerhalb von Layern beziehen sich relativ auf die Position des übergeordneten Layers.

Beispiel:

<layer name="Container" clip="10,10,600,400">
  <layer top=100 left=100>
     <img src="bild1.gif">
  </layer>
  <layer top=200 left=200>
  <img src="bild2.gif">
  </layer>
  <layer top=200 left=200>
     <img src="bild3.gif">
  </layer>
</layer>

Erläuterung:

Innerhalb eines Layers können Sie wie im Beispiel andere Layer definieren. Die Positionsangaben left= und top= des inneren Layers beziehen sich dabei nicht auf die Ränder des Anzeigefensters, sondern auf die linke obere Ecke des übergeordneten Layers, die ebenfalls mit left= und top= festgelegt wurde.

Hinweis:

Mit Netscape 4.0 beta 1 war dieses Verhalten noch nicht korrekt nachvollziehbar.

Blättern:

Mime-Typen für Dateiformate Hintergundfarben / Hintergrundbilder für Layer

HTML-Dateien selbst erstellen

Dokumentation: HTML

Layer - variable Schichten

Stefan Münz, s.muenz@euromail.com

	Blättern:
Mime-Typen für Dateiformate			Hintergundfarben / Hintergrundbilder für Layer