Operation Manual

Arbeiten mit div-Tags
Nach oben
div-Tags einfügen und bearbeiten
CSS-Layout-Blöcke
AP-Elemente verwenden
(Nur Creative Cloud-Benutzer): Sieben neue semantische Tags sind verfügbar, wenn Sie „Einfügen“ > „Layoutobjekte“ wählen. Die neuen Tags
sind: Article, Aside, HGroup, Navigation, Section, Header und Footer. Weitere Informationen finden Sie unter Semantische HTML5-Elemente aus
dem Bedienfeld „Einfügen“ einfügen.
div-Tags einfügen und bearbeiten
Sie können Seitenlayouts erstellen, indem Sie div-Tags manuell einfügen und CSS-Positionierungsstile auf sie anwenden. Ein div-Tag dient dazu,
den Inhalt einer Webseite logisch zu unterteilen. Sie können div-Tags verwenden, um Inhaltsblöcke zu zentrieren, Spalteneffekte zu erzeugen,
verschiedene Farbbereiche zu erstellen usw.
Wenn Sie mit der Erstellung von Webseiten mittels div-Tags und Cascading Stylesheets (CSS) nicht vertraut sind, können Sie eine der mit
Dreamweaver ausgelieferten Layoutvorlagen als Grundlage für Ihr CSS-Layout nutzen. Wenn Sie nicht gern mit CSS arbeiten, aber mit der
Nutzung von Tabellen vertraut sind, können Sie auch Tabellen verwenden.
Hinweis: Dreamweaver behandelt alle Div-Tags mit absoluter Position als AP-Elemente (absolut positionierte Elemente), auch wenn Sie diese
nicht mit dem Zeichenwerkzeug für AP-Div-Tags erstellt haben.
Div-Tags einfügen
Mithilfe von div-Tags können Sie CSS-Layoutblöcke erstellen und in Ihrem Dokument platzieren. Dies ist praktisch, wenn das Dokument mit einem
vorhandenen CSS-Stylesheet verknüpft ist, das Positionierungsstile zuweist. Mit Dreamweaver ist es möglich, ein Div-Tag schnell einzufügen und
ihm vorhandene Stile zuzuweisen.
1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das div-Tag einfügen möchten.
2. Führen Sie einen der folgenden Schritte aus:
Wählen Sie „Einfügen“ > „Layout-Objekte“ > „Div-Tag“ aus.
Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Div-Tag einfügen“ .
3. Wählen Sie eine der folgenden Optionen:
Einfügen Ermöglicht die Auswahl der Position für das div-Tag sowie des Tag-Namens, wenn es sich nicht um ein neues Tag handelt.
Klasse Zeigt den Klassenstil an, der dem Tag derzeit zugewiesen ist. Wenn ein Stylesheet angefügt wurde, werden die darin definierte
Klassen in der Liste angezeigt. In diesem Popupmenü können Sie den Stil auswählen, den Sie auf das Tag anwenden möchten.
ID Ermöglicht das Ändern des Namens, mit dem das div-Tag identifiziert wird. Wenn ein Stylesheet angefügt wurde, werden die darin
definierten IDs in der Liste angezeigt. Die IDs von Blöcken, die bereits Bestandteil Ihres Dokuments sind, werden nicht aufgeführt.
Hinweis: In Dreamweaver wird eine Warnmeldung angezeigt, wenn Sie eine ID eingeben, die bereits mit einem anderen Tag in Ihrem
Dokument verknüpft ist.
Neue CSS-Regel Öffnet das Dialogfeld „Neue CSS-Regel“.
4. Klicken Sie auf „OK“.
Das div-Tag wird in Ihrem Dokument als Feld mit Platzhaltertext angezeigt. Wenn Sie den Zeiger über das Feld hinaus bewegen, wird
dieses in Dreamweaver hervorgehoben.
Wenn der div-Tag absolut positioniert ist, wird er zu einem AP-Element. (Nicht absolut positionierte div-Tags können bearbeitet werden.)
Div-Tags bearbeiten
Nachdem Sie ein div-Tag eingefügt haben, können Sie es verändern oder Inhalt hinzufügen.
Hinweis: Absolut positionierte Div-Tags werden zu AP-Elementen.
Wenn Sie Div-Tags Rahmen zuweisen oder die CSS-Layout-Konturen aktivieren, werden diese Tags mit Rahmen angezeigt. („CSS-Layout-
Konturen“ ist standardmäßig im Menü „Ansicht“ > „Visuelle Hilfsmittel“ ausgewählt.) Wenn Sie den Zeiger über ein div-Tag führen, markiert
Dreamweaver das Tag. Sie können die Markierungsfarbe ändern oder die Markierungsfunktion deaktivieren.
Wenn Sie ein div-Tag auswählen, können Sie Regeln für dieses im Bedienfeld „CSS-Stile“ anzeigen und bearbeiten. Sie können dem div-Tag
ferner Inhalte hinzufügen, indem Sie die Einfügemarke im div-Tag positionieren und Inhalt wie bei einer Seite hinzufügen.
247