Wofür eigentlich Layer?

[BC_S@M]

Wofür sind Layer da? Und was für Vorteile bringen sie?Was kann man damit alles machen?

[the0bone]

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.

[Flixxtoras]

CSS Layer - Grundlagen
Bisher verschlossene Welten tun sich dem Web-Designer mit Layern (auch als Ebenen bezeichnet) auf. Ein Layer ist nichts weiter als eine frei verschiebbare Rahmenkonstruktion. Um diesen Rahmen zu beschreiben, verwendet man CSS.

Der Clou daran, ein Layer kann jedes andere aus HTML bekannte Element enthalten. Layer können ineinander geschoben (verschachtelt) werden. Mit Javascript ist es sogar möglich sie zu animieren. Auf diese Weise erhalten Web-Seiten eine dynamische Komponente, man spricht dann von DHTML (dynamisches HTML), welches allerdings noch weitere Techniken erfordert.

Im Zusammenspiel mit einem geeigneten Editor können Layer nicht nur sehr einfach erstellt werden, man kann sie frei auf der Arbeitsfläche bewegen und ist nicht mehr an die engen Beschränkungen von Tabellen und BlindGIFs gebunden. Das geht mühelos und auf das Pixel genau.

Aller Vorzüge zum Trotz, im praktischen Einsatz findet man Layer selten. Der Grund ist wieder einmal bei den Browsern zu suchen, die erst seit der Generation 4 überhaupt etwas mit dieser Technik anfangen können. Das bedeutet, der konsequente Einsatz von Layern schließt Besucher aus, eine Sache, die man sich für gewöhnlich nicht wird leisten wollen. Dennoch ist es möglich, Layer für spezielle Zwecke und in einer Art Mischtechnik auch heute schon einzusetzen.

Was sind Layer eigentlich?
Das Prinzip ist schnell zu durchschauen. Werfen Sie einmal einen Blick auf diesen Code:

<div id="Layer1" style="position:absolute; width:200px; height:100px; z-index:1"></div>

Ein Layer ist nichts weiter als die codierte Beschreibung eines Rahmens. Eine leere Hülle, von der man in einem Browser noch nichts erkennen kann. Der HTML-Tag <div>, es ließe sich auch <p> oder <span> verwenden, wird mit einigen CSS-Anweisungen angereichert. Ein Layer bekommt eine ID (Idendifikation), anhand derer er später angesteuert werden kann. Wir kommen noch darauf zurück. Des weiteren eine Angabe für die Breite (width:200px) und die Höhe (height:100px) sowie einen Z-Index, die Stapelreihenfolge der Layer.

Die Bemaßung
Standardwerte für Position und Größe werden in der Regel in Pixel (px) angegeben. Sie können auch folgende Maßeinheiten festlegen: pc (Pica), pt (Punkt), in (Inch), mm (Millimeter), cm (Zentimeter) oder % (Prozentsatz vom Wert des übergeordneten Elements).
Layer mit Hintergrundfarbe und Rahmen.

Ohne Hintergrundfarbe oder Rahmen ist nichts im Browser zu sehen. Aber das lässt sich rasch mit background : color ändern.
Jetzt ist endlich auch etwas im Browser zu erkennen:

Quelle: Dr Web