CSS-Ebenen:
Es werden <div> und <span> Tags verwendet. Diese Tags werden vom Internet Explorer und vom Netscape ab Version 4.0 unterstützt

Layer:
Es werden die Tags <layer> und <ilayer> eingesetzt. Wird nur von Netscape unterstützt!

Welches Tag verwendet werden soll ist unter Voreinstellungen / Ebenen einstellbar. Die Einstellung "<div>" ist zweckmäßig, wenn Browser ab Version 4.xx die Zielbrowser sein sollen. Ansonsten muß eine Browserweiche eingebaut werden und für den IE und den Netscape jeweils eine Version entwickelt werden - für den IE mit <div> und für den Netscape mit <layer>.

Die Browser der 3. Generation unterstützen keine Layer oder Div-Container. Zwecks Kompatibilität mit Ihnen kann jedoch eine mit Ebenen erstellte Seite in eine Tabelle umgewandelt werden. Voraussetzung dafür ist, dass sich die Ebenen nicht überlappen.

Positionierung

Die Positionierung von Layern geschieht über die x- und y-Koordinaten. Die Stapelreihenfolge wird über den z-Index festgelegt – wird interessant bei sich überlappenden Ebenen. Die Ebene mit der höheren Nummer liegt oberhalb von denen mit einer niedrigen Nummer.

Erstellen von Ebenen

Achtung: Wenn die Layoutansicht ausgewählt ist, ist die Einfügemöglichkeit für Ebenen deaktiviert!

Für jede eingefügte Ebene wird im Dokumentfenster oben links ein Ebenensymbol angelegt. Es gehört zu den unsichtbaren Elementen und kann im Menü Ansicht /Visuelle Hilfsmittel / Unsichtbare Elemente aktiviert bzw. deaktiviert werden. Diese Symbole verschieben u. U. andere Bildschirminhalte. Das passiert aber nur scheinbar, im Browserfenster ist alles richtig positioniert.

Verschachtelte Ebenen

Ebenen können verschachtelt werden: Eine Ebene wird in eine schon angelegte Ebene eingefügt. Dazu aktiviert man das Kästchen in den Voreinstellungen (s. o.). Man platziert den Einfügepunkt der Maus in eine vorhandene Ebene und ruft das Menü Einfügen/Ebene auf oder man aktiviert in der Objektpalette den Ebenenschalter, klickt in eine vorhandene Ebene und zeichnet dort hinein die neue Ebene.

Ebenenpalette

Wenn man mit Ebenen arbeitet, sollte man die Ebenenpalette verwenden. Sie erleichtert es einem sehr, die Übersicht zu behalten, verschachtelte Ebenen zu verwalten, Sichtbarkeit oder Unsichtbarkeit festzulegen u. v. m.

Überlappungen verhindern

Wenn man auf alle Fälle verhindern möchte, das sich Ebenen überlappen (z. B. weil man sie später in eine Tabelle konvertieren möchte), setzt man ein Häkchen in dem Ebenenfenster oben neben “Überlappungen verhindern”.

Das Auge

„Auge geöffnet“ bedeutet, die Sichtbarkeit ist vorhanden, „Auge geschlossen“ heißt, die Ebene ist unsichtbar und gar kein Auge, das keine Angaben zu Sichtbarkeit gemacht wurden. Das Auge ändert sein Aussehen, wenn man es anklickt

Name

Ebenen erhalten standardmäßig die Namen “layer1”, “layer2” etc. Man kann eigene Namen vergeben (wie im Explorer zweimal draufklicken): sehr sinnvoll, wenn man viele Ebenen auf einer Seite hat und notwendig, wenn man die Layer über JavaScript steuern möchte. Der Name einer Ebene kann auch im Eigenschaftsinspector festgelegt werden.

“Z”-index

Indexangabe für die Reihenfolge

Ebeneneigenschaften

Bei Verwendung von CSS-Ebenen:

Falls man das <layer>-Tag verwendet, sieht der Eigenschaftsinspector etwas anders aus.

Bearbeiten von Ebenen

Ebenen aneinander ausrichten

Ebenen können aneinander ausgerichtet werden. Dabei ist immer die zuletzt ausgewählte Ebene maßgeblich. Man markiert mehrere Ebenen, zuletzt die, an der ausgerichtet werden soll. Im Menü Modifizieren wählt man Ausrichten aus und dann eine der folgenden Optionen:

Ein gutes Hilfsmittel zum Ausrichten ist das Gitternetz.
Man findet es unter dem Menü Ansicht / Raster.

„Am Raster ausrichten“ aktiviert den Magneten, so das die Ebenen automatisch an der nächstgelegenen Einrastposition angeordnet werden. Das Raster lässt sich bearbeiten.

Reihenfolge ändern

Am besten im Eigenschaftsinspector!

Die Ebene mit der höchsten Index-Nummer liegt zuoberst, die mit der kleinsten zuunterst. Durch Ändern des Indexwertes lassen sich Ebenen an anderer Stelle in der Reihenfolge einordnen.

In der Ebenenpalette werden Ebenen nach der Reihenfolge aufgelistet und zwar steht die oberste an erster Stelle, dann die zweitoberste an zweiter usw.. Auch hier kann man die Reihenfolge durch Verschieben ändern.

Konvertierung der Ebenen zu Tabellen

Empfehlenswert für leichtere Tabellengestaltung, da die Positionierung mit Ebenen einfacher ist als mit Tabellen! Im Menü Modifizieren ruft man den Menüpunkt Konvertieren auf, dann erscheint folgendes Dialogfenster:

Höchste Genauigkeit

Für jede Ebene wird eine Tabellenzelle erstellt (und weitere, wenn es erforderlich ist)

Kleinstes: Leerzellen ausblenden

Innerhalb der Vorgabe in Pixel werden die Kanten der Ebenen ausgerichtet. Dadurch wird die Anzahl der Zellen der neuen Tabelle reduziert.

Durchsichtige Gifs verwenden

Wenn dieser Punkt angekreuzt wird, erzeugt Dreamweaver automatisch transparente Gifs in der letzten Zeile der Tabelle um die Zellbreiten festzustellen.

Auf Seite zentrieren

Tabelle wird auf der Seite zentriert, wenn diese Option angekreuzt ist. Ansonsten wird die Tabelle links ausgerichtet.

Kompatibilität mit 3.0-Browsern

Im Menü Datei “Konvertieren” aufrufen. Es öffnet sich ein kleines Dialogfenster:

Für 3.0 – Browser sollte beides ankreuzt werden.

Bevor man konvertiert, sollten alle Arbeiten an der Seite beendet sein. Nach dem Konvertieren wird das Ergebnis in einem neuen Dokumentfenster angezeigt.

Verhaltensweisen von Ebenen

Die am häufigsten eingesetzten Verhaltensweisen von Ebenen sind Bewegung und Ein- und Ausblenden von Ebenen

Ebenen ziehen

Eine Einsatzmöglichkeit ist bei der Verwendung interaktiver Elemente auf einer Seite z. B. Puzzles oder Schiebereglern gegeben.

Diese Fenster werden benötigt:

Zuerst müssen die Ebenen angelegt werden und die Inhalte eingefügt werden. Es ist besonders in komplexen Szenarien sinnvoll, aussagekräftige Namen für die einzelnen Ebenen zu vergeben. Die Ebenen werden vor dem Einfügen der Verhaltensweisen so angeordnet, dass sie sich in ihrer Zielposition befinden.

Nachdem eine der Ebenen aktiviert – nicht markiert!!! – ist, im Verhaltensweiseninspector das Pluszeichen anklicken: es öffnet sich folgendes Menü:

Es macht keinen Sinn, die Browser ab 3.0 zu verwenden, die können noch nicht genug JavaScript, daher müssen die Ereignisse für Browser ab 4.0 verwendet werden. Wenn man die Zielbrowser festgelegt hat und die erste Ebene aktiviert ist, klickt man auf “Ebene ziehen”. Es öffnet sich folgendes Fenster:

So geht’s:

Ebenen ein- und ausblenden

Beispiel: puzzle_end_onmouseover.html

Sehr gut geeignet um interaktiv Informationen zu übermitteln.

Beispiel: Wenn man mit der Maus über einen Layer fährt (onmouseover), wird ein anderer Layer sichtbar (oder unsichtbar), wenn man mit der Maus aus dem Layer herausfährt, wird der Ausgangszustand wiederhergestellt. Hier muß man eine Verhaltensweise (sichtbar/unsichtbar) mit verschiedenen Ereignissen (onmouseover/onmouseout) kombinieren. Die Verhaltensweisen müssen für jeden Layer einzeln festgelegt werden – ausgehend von dem Layer, dessen Aktionen das Verhalten bestimmen soll. So sieht's dann im Verhaltensinspector für den steuernden Layer aus:

Im Kapitel Zeitleisten sind noch mehr Infos zum Thema Verhaltensweisen und Ebenen zu finden...