Setze im Dokumentfenster die Einfügemarke
da, wo das div-Tag erscheinen soll.
Zuletzt aktualisiert am
25. September 2023
Sie können div-Tags verwenden, um Inhaltsblöcke zu zentrieren, Spalteneffekte zu erzeugen, verschiedene Farbbereiche zu erstellen u. v. a. m.
Du kannst Seitenlayouts anlegen, indem du manuell div-Tags einfügst und CSS-Positionierungsstile darauf anwendest. Ein div-Tag ist ein Tag, das logische Unterteilungen innerhalb des Inhalts einer Web-Seite definiert. Du kannst div-Tags verwenden, um Inhaltsblöcke zu zentrieren, Spalteneffekte zu erstellen, verschiedene Farbflächen zu erstellen und vieles mehr.
Wenn du nicht vertraut bist mit der Verwendung von div-Tags und Cascading Style Sheets (CSS) zum Erstellen von Web-Seiten, kannst du ein CSS-Layout basierend auf einem der vordefinierten Layouts erstellen, die mit Dreamweaver geliefert werden. Wenn du dich nicht wohl dabei fühlst, mit CSS zu arbeiten, aber mit der Verwendung von Tabellen vertraut bist, kannst du auch versuchen, Tabellen zu verwenden.
div-Tags einfügen
Du kannst div-Tags verwenden, um CSS-Layoutblöcke zu erstellen und sie in deinem Dokument zu positionieren.Das ist nützlich, wenn du ein vorhandenes CSS-Stylesheet mit Positionierungsstilen hast, das mit deinem dokument verknüpft ist. Dreamweaver ermöglicht es dir, schnell ein div-Tag einzufügen und vorhandene Stile darauf anzuwenden.
Führen Sie einen der folgenden Schritte aus:
Wähle Einfügen > HTML > Div aus.
Klicke in der HTML-Kategorie des Einfügen-Bedienfelds auf Div.
Wählen Sie eine der folgenden Optionen:
Einfügen:
Ermöglicht es dir, die Position des div-Tags und den Tagnamen auszuwählen, wenn es sich nicht um ein neues Tag handelt.
Klasse:
Zeigt den Klassenstil an, der dem Tag derzeit zugewiesen ist. Wenn du ein Stylesheet angehängt hast, werden die in diesem Stylesheet definierten Klassen in der Liste angezeigt. Verwende dieses Popup-Menü, um den Stil auszuwählen, den du auf den Tag anwenden möchtest.
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. IDs für Blöcke, die bereits in deinem Dokument vorhanden sind, werden nicht aufgelistet.
Anmerkung
Dreamweaver warnt dich, wenn du dieselbe ID wie ein anderer Tag in deinem Dokument eingibst.
Neue CSS-Regel:
Öffnet das Dialogfeld „Neue CSS-Regel“.
Klicken Sie auf „OK“.
Das div-Tag wird in Ihrem Dokument als Feld mit Platzhaltertext angezeigt. Wenn du den Mauszeiger über den Rand der Box bewegst, hebt Dreamweaver diese hervor.
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 du einen div-Tag eingefügt hast, kannst du ihn manipulieren oder Inhalte hinzufügen.
Anmerkung
Div-Tags, die absolut positioniert sind, 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 im CSS Designer Regeln dafür 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.
Führen Sie einen der folgenden Schritte aus, um das div-Tag auszuwählen:
- Klicke auf den Rahmen des Div-Tags.
Anmerkung
Suchen Sie die Markierung, damit Sie den Rahmen sehen können.
Klicken Sie in das div-Tag und drücken Sie zweimal Strg+A (Windows) oder Befehl+A (Macintosh).
Klicken Sie in das div-Tag und wählen Sie das div-Tag im Tag-Selektor unten im Dokumentfenster aus.
Wähle Fenster > CSS Designer, um das CSS Designer-Bedienfeld zu öffnen, falls es nicht bereits geöffnet ist.
Regeln, die auf das div-Tag angewendet werden, erscheinen im Panel.
Bearbeiten Sie die Regeln nach Bedarf.
Hervorhebungsfarbe von Div-Tags ändern
Wenn du den Zeiger über den Rand eines div-Tags in der Entwurfsansicht bewegst, hebt Dreamweaver die Rahmen des Tags hervor.Du kannst die Hervorhebung nach Bedarf aktivieren oder deaktivieren oder die Hervorhebungsfarbe im Voreinstellungen-Dialogfeld ändern.
Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).
Wählen Sie in der Liste links die Kategorie „Markierung“.
Führen Sie einen der folgenden Schritte aus und klicken Sie auf „OK“.
Um die Markierungsfarbe für div-Tags zu ändern, klicken Sie in das Farbfeld „Mouse-Over“ und wählen Sie mit dem Farbwähler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert für die Markierungsfarbe im Textfeld ein).
Um die Markierung von div-Tags zu aktivieren bzw. zu deaktivieren, aktivieren bzw. deaktivieren Sie das Kontrollkästchen „Anzeigen“ für „Mouse-Over“.
Anmerkung
Diese Optionen wirken sich auf alle Objekte aus, z. B. Tabellen, die Dreamweaver hervorhebt, wenn du den Zeiger über sie bewegst.
CSS-Layout-Blöcke
Du kannst CSS-Layout-Blöcke visualisieren, während du in der Entwurfsansicht arbeitest.Ein CSS-Layout-Block ist ein HTML-Seitenelement, das du überall auf der Seite positionieren kannst.Genauer gesagt ist ein CSS-Layout-Block entweder ein div-Tag ohne display:inline oder ein anderes Seitenelement, das die CSS-Deklarationen display:block, position:absolute oder position:relative enthält.Im Folgenden findest du einige Beispiele für Elemente, die in Dreamweaver als CSS-Layout-Blöcke betrachtet werden:
Ein div-Tag
Ein Bild mit einer absoluten oder relativen Position, die ihm zugewiesen wurde
Ein a-Tag mit dem zugewiesenen display:block-Stil
Ein Absatz mit einer absoluten oder relativen Position
Anmerkung
Für die visuelle Darstellung umfassen CSS-Layout-Blöcke keine Inline-Elemente (d. h. Elemente, deren Code innerhalb einer Textzeile steht) oder einfache Blockelemente wie Absätze.
Dreamweaver bietet verschiedene visuelle Hilfen für die Anzeige von CSS-Layout-Blöcken.Du kannst beispielsweise Konturen, Hintergründe und das Boxmodell für CSS-Layout-Blöcke aktivieren, während du entwirfst.Du kannst auch Tooltips anzeigen, die Eigenschaften für einen ausgewählten CSS-Layout-Block zeigen, wenn du den Mauszeiger über den Layout-Block bewegst.
Die folgende Liste der visuellen Hilfen für CSS-Layout-Blöcke beschreibt, was Dreamweaver für jede als sichtbar darstellt:
CSS-Layoutkonturen:
Zeigt die Konturen aller CSS-Layout-Blöcke auf der Seite an.
CSS-Layouthintergründe:
Zeigt temporär zugewiesene Hintergrundfarben für einzelne CSS-Layout-Blöcke an und blendet andere Hintergrundfarben oder -bilder aus, die normalerweise auf der Seite erscheinen.
Wenn du die visuelle Hilfe zur Anzeige von CSS-Layout-Block-Hintergründen aktivierst, weist Dreamweaver automatisch jedem CSS-Layout-Block eine eigene Hintergrundfarbe zu.(Dreamweaver wählt die Farben mithilfe eines algorithmischen Prozesses aus – du kannst die Farben nicht selbst zuweisen.)Die zugewiesenen Farben sind visuell unterscheidbar und sollen dir helfen, zwischen CSS-Layout-Blöcken zu unterscheiden.
CSS-Layout-Boxmodell:
Zeigt das Boxmodell (d. h. Innenabstand und Ränder) des ausgewählten CSS-Layout-Blocks an.
CSS-Layout-Blöcke anzeigen
Sie können die visuellen Hilfsmittel für CSS-Layoutblöcke nach Bedarf aktivieren oder deaktivieren. Um alle CSS-Layout-Blöcke anzuzeigen, wähle Ansicht > Optionen für Entwurfsansicht > Visuelle Hilfen.
Du kannst CSS-Layout-Hintergründe, CSS-Layout-Boxmodell und CSS-Layout-Konturen aktivieren oder deaktivieren.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
