Benutzerhandbuch Abbrechen

Arbeiten mit div-Tags

 

 

Sie können div-Tags verwenden, um Inhaltsblöcke zu zentrieren, Spalteneffekte zu erzeugen, verschiedene Farbbereiche zu erstellen u. v. a. m.

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 kein CSS verwenden möchten, aber mit der Nutzung von Tabellen vertraut sind, können Sie auch Tabellen verwenden.

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“ > „HTML“ > „Div“.

    • Klicken Sie in der Kategorie „HTML“ des Bedienfelds „Einfügen“ auf „Div“.

  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, sofern 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 definierten 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 im CSS Designer Regeln dafür anzeigen und bearbeiten. Sie können auch Inhalte in das div-Tag einfügen, indem Sie die Einfügemarke in das div-Tag setzen und die Inhalte dann ebenso wie bei einer Seite hinzufügen.

  1. Führen Sie einen der folgenden Schritte aus, um das div-Tag auszuwählen:
    • Klicken Sie auf den Rahmen des div-Tags.
    Hinweis:

    Die Markierung zeigt den Rahmen an.

    • Klicken Sie in das div-Tag und drücken Sie zweimal Strg+A (Windows) bzw. Befehl+A (Mac).

    • Klicken Sie in das div-Tag und wählen Sie im Tag-Selektor, der sich unten im Dokumentfenster befindet, das div-Tag aus.

  2. Wählen Sie ggf. „Fenster“ > „CSS Designer“, um das Bedienfeld „CSS Designer“ zu öffnen.

    Die auf das div-Tag angewendeten Regeln werden im Bedienfeld angezeigt.

  3. Bearbeiten Sie die Regeln nach Bedarf.

Markierungsfarbe von div-Tags ändern

Wenn Sie den Zeiger in der Entwurfsansicht über die Kante eines div-Tags führen, hebt Dreamweaver die Tag-Rahmen hervor. Sie können die Markierungsfunktion nach Bedarf aktivieren oder deaktivieren oder die Markierungsfarbe im Dialogfeld „Voreinstellungen“ ändern.

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).
  2. Wählen Sie in der Liste links die Kategorie „Markierung“.
  3. 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 mit dem Farbwähler eine Markierungsfarbe aus (oder geben im Textfeld den Hexadezimalwert für die Markierungsfarbe ein).

    • Um die Markierung von div-Tags zu aktivieren bzw. zu deaktivieren, aktivieren bzw. deaktivieren Sie für Mouse-Over das Kontrollkästchen „Anzeigen“.

    Hinweis:

    Diese Optionen wirken sich auf alle Objekte aus, beispielsweise auf Tabellen, die in Dreamweaver hervorgehoben werden, wenn Sie den Zeiger darüber bewegen.

CSS-Layout-Blöcke

In der Entwurfsansicht können Sie CSS-Layout-Blöcke visualisieren. Ein CSS-Layout-Block ist ein HTML-Seitenelement, das Sie an einer beliebigen Stelle auf der Seite positionieren können. Genauer gesagt ist ein CSS-Layout-Block entweder ein div-Tag ohne display:inline oder ein anderes Seitenelement, das die CSS-Deklaration display:block, position:absolute oder position:relative enthält. Im Folgenden finden Sie einige Beispiele von Elementen, die in Dreamweaver als CSS-Layoutblöcke gelten:

  • Ein div-Tag

  • Ein Bild, dem eine absolute oder relative Position zugewiesen wurde

  • Ein a-Tag, dem der Stil display:block zugewiesen wurde

  • Ein Absatz, dem eine absolute oder relative Position zugewiesen wurde

Hinweis:

Damit CSS-Layoutblöcke visuell gerendert werden können, dürfen Sie keine Inline-Elemente (d. h. Elemente, deren Code in einer Textzeile enthalten ist) und auch keine einfachen Blockelemente (z. B. Absätze) enthalten.

Dreamweaver bietet eine Auswahl an visuellen Hilfsmitteln zum Anzeigen von CSS-Layoutblöcken. Sie können beim Entwerfen z. B. Konturen, Hintergründe oder das Box-Modell für CSS-Layout-Blöcke aktivieren. Sie können außerdem die QuickInfo anzeigen, die Eigenschaften zu einem ausgewählten CSS-Layout-Block anzeigt, indem Sie mit der Maus auf den Layout-Block zeigen.

Die folgende Liste mit visuellen Hilfsmitteln für CSS-Layoutblöcke beschreibt, welche Elemente für jeden Layoutblock von Dreamweaver gerendert werden:

CSS-Layoutkonturen:

Zeigt die Konturen aller CSS-Layoutblöcke auf der Seite an.

CSS-Layouthintergründe:

Zeigt vorübergehend zugewiesene Hintergrundfarben für einzelne CSS-Layoutblöcke an und blendet andere Hintergrundfarben oder Bilder aus, die normalerweise auf der Seite angezeigt werden.

Wenn Sie das visuelle Hilfsmittel zum Anzeigen der Hintergründe von CSS-Layoutblöcken aktivieren, weist Dreamweaver jedem CSS-Layoutblock automatisch eine separate Hintergrundfarbe zu. (Dreamweaver wählt die Farben anhand eines Algorithmus aus, d. h., Sie haben keine Möglichkeit, die Farben selbst zuzuweisen.) Die zugewiesenen Farben sind visuell auffällig und sollen Ihnen die Unterscheidung zwischen CSS-Layoutblöcken erleichtern.

CSS-Layout-Boxmodell:

Zeigt das Boxmodell (d. h. Auffüllung und Ränder) des ausgewählten CSS-Layoutblocks 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ählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Visuelle Hilfsmittel“.

Sie können „CSS-Layout-Hintergründe“, „CSS-Layout-Boxmodell“ und „CSS-Layout-Konturen“ aktivieren oder deaktivieren.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?