Arbeiten mit Ebenen bzw. AP-Elementen in Dreamweaver

Um eine Ebene zu erstellen, klicke ich in der Symbolleiste auf das Register Layout und dann auf das Symbol AP Div zeichnen (kann je nach Version auch anders heißen). Mit der Maus zeichnet ihr dann die Ebene in der später ungefähr benötigten Größe in das Dokumentfenster.

Wir empfehlen:
Dreamweaver-Video-Training

Neu angelegte Ebenen werden in Dreamweaver ausschließlich mit CSS definiert. Eine Ebene schaut dabei im Quellcode z.B. so aus:

#Ebenen1 {

position:absolute;

left:691px;

top:20px;

width:265px;

height:90px;

z-index:1;

}

<div id=“Ebenen1″>

<div align=“center“>Ebene die frei positionierbar ist!</div>

</div>

 

Ebenen erstellen und einstellen – Ebenen anlegen

Um eine Ebene zu erstellen, klicke ich in der Symbolleiste auf das Register Layout und dann auf das Symbol AP Div zeichnen (kann je nach Version auch anders heißen). Mit der Maus zeichnet ihr dann die Ebene in der später ungefähr benötigten Größe in das Dokumentfenster.

 

Wenn ich in den Voreinstellungen die Ankerpunkte für Ebenen aktiviert habe, werden jetzt zusätzlich zur Ebene kleine Platzhalter angezeigt. Aktive, markierte Ebenen werden in den Platzhaltern blau hinterlegt. Wenn ich aber eine Ebene auf unsichtbar schalte, sind sie die einzige Möglichkeit, die Ebene anzuwählen.

 

In meiner Abbildung habe ich 3 verschiedene Ebenen erstellt. Alle lassen sich anfassen und von der Größe ändern. Mit dem Fenster AP-Elemente können alle vorhandenen Ebenen übersichtlich verwaltet werden.


Wie in meinem Beispiel zu sehen, wird für jede Ebene automatisch eine ID angelegt (fortlaufende Nummer). Außerdem legt Dreamweaver für jede Ebene auch einen eigenen CSS-Code an.

 

Hinweis: Möchte man eine Ebene löschen, so kann dies mit einem Klick auf die Entferntaste ausgeführt werden. Jedoch wird dabei der CSS-Code, der ganz oben im Dokument von Dreamweaver angelegt wurde, nicht automatisch mit gelöscht. Bitte somit darauf achten, dass dies per Hand mit gelöscht wird, weil sonst das Dokument immer größer und vom Code unübersichtlicher wird.


Positionsangaben:

Die exakte Position von links (L) und von oben (O) kann in Pixel oder Prozent eingetragen werden.

Abmessungen:

Breite (B) und Höhe (H) sind ebenfalls in Pixel oder Prozent anzugeben.

Um ein exaktes Layout zu erreichen, empfiehlt es sich, diese Einstellungen von Hand zu korrigieren, nachdem man die Ebenen mit der Maus auf ihre ungefähre Position geschoben hat.

Negative Werte sind ebenfalls möglich. So kann man beispielsweise eine Ebene mit einem JavaScript von außen in das Browserfenster fahren lassen

Ebenensichtbarkeit:

Eine Ebene kann als sichtbar (visible) oder unsichtbar (hidden) eingestellt werden. Zusätzlich gibt es die Option inherit. Sie bewirkt, dass die Ebene die Eigenschaften des Elternobjektes übernimmt. Ebenen können auch ineinander verschachtelt werden.

Würde nun die übergeordnete Ebene unsichtbar werden, würde sich diese Eigenschaft auch auf die untergeordnete vererben, wenn deren Sichtbarkeit auf inherit gesetzt ist.

Ebenenreihenfolge:

Der Z-Index gibt Aufschluss über die Ebenenreihenfolge im Dokument. Auch eine Einstellung auto ist möglich.

Bilder und Farben:

Ebenen können genau wie Tabellen Hintergrundbilder und Hintergrundfarben erhalten.

 

Standardmäßig wird bei viel Text genau die Ebene voll befüllt:

 

Jedoch gibt es in Dreamweaver die Möglichkeit, Ränder einzugeben:

 

Scrollbare Bereiche für Ebenen einstellen

Immer wieder sehe ich bei verschiedenen Webseiten scrollbare Bereiche. Diese können sehr aufwendig mit umfangreichem JavaScript erstellt werden, mit iframes oder aber eben mit Ebenen.

In meinem Beispiel sieht man einen Scrollbalken für die ausgewählte Ebene. Der Überlauf wird hierzu auf scroll gesetzt und die nicht in die vorgegebene Größe der Ebene passenden Inhalte werden abgeschnitten.

 

Dank CSS können auch die Scrollbalken verändert werden. Jedoch geht das nur im Internet Explorer. In den anderen Browsern wie z. B. Firefox oder Opera geht das leider nicht.

 

Überlappungen von Ebenen lassen sich übringens ganz einfach verhindern, indem die Option bei AP-Elemente (Menü>Fenster>AP-Elemente) Überlappungen verhindern aktiviert wird. Übrigens hieß diese Palette vor CS3 noch Ebenen und nicht AP-Elemente.

 

Ebenen in Tabellen umwandeln

Eine schöne Möglichkeit bei der Arbeit mit Ebenen ist es, das Layout mit Ebenen zu erstellen und diese dann anschließend in Tabellen zu konvertieren. Seit es den Layoutmodus für Tabellen in Dreamweaver 8 gibt, hat dieses Feature zwar mehr oder weniger an Bedeutung verloren, jedoch möchte ich dies trotzdem kurz erwähnen.

Wenn gewährleistet ist, dass die Ebenen keine Überlappungen aufweisen, kann ich über Menü>Modifizieren>Konvertieren>Ebenen in Tabellen aus dem Ebenenlayout ein Tabellenlayout erstellen.


Wenn ich beim Erstellen der Ebenen die neue Funktion für Hilfslinien nutzen, kann ich mit dieser Methode ein sehr exaktes Layout erreichen.

 

Ebenen verschachteln

In den Standardvoreinstellungen werden Ebenen in Schichten übereinander gelegt. Durch Änderungen in diesen Einstellungen kann ich Ebenen auch ineinander verschachteln, wobei die Position der einzelnen Ebenen dann vom jeweils übergeordneten Elternobjekt abhängig ist. Wenn sich die Position des Elternobjektes verschiebt, verschieben sich alle innen liegenden Ebenen ebenfalls. Menü>Voreinstellungen>AP-Elemente>Verschachteln, wenn in einem AP-Div erstellt.

 

Sobald jetzt eine Ebene innerhalb einer Ebene erstellt wird, sieht man in der AP-Elemente-Palette eine kleine Baumstruktur:


Damit dies jedoch überhaupt erst möglich ist, muss unbedingt die Option Überlappungen verhindern in der Palette deaktiviert werden.

 

Ebenen und JavaScript

Klasse ist die Funktion Ebenen ein- und ausblenden und Ebenen ziehen, die Dreamweaver in der Verhaltenpalette anbietet. Zu diesen gelange ich, indem ich in der Bedienfeldgruppe Verhalten auf das Pluszeichen klicke. Ich kann jetzt jeder beliebigen Schaltfläche, jeder Image-Map oder jedem Hyperlink die Aktion Ebenen einblenden/ausblenden zuweisen.

Wenn ich jetzt diesen JavaScript auf einen Link setzen möchte, so ist es erst erforderlich, den Text wie im Beispiel-Bild in einen Link umzuwandeln. Dazu genügt es, den Text zu markieren und im Hyperlink-Feld eine # einzutragen. Danach gehe ich auf Verhalten, klicke auf das Plus-Zeichen und füge dann die Option Elemente ein- /ausblenden hinzu.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training