Operation Manual

Nach oben
CSS-Layout Box-Modell Zeigt das Box-Modell (d. h. Auffüllung 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.
Konturen von CSS-Layout-Blöcken anzeigen
Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „CSS-Layout-Konturen“ aus.
Hintergründe von CSS-Layout-Blöcken anzeigen
Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „CSS-Layout-Hintergründe“ aus.
Box-Modelle von CSS-Layout-Blöcken anzeigen
Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „CSS-Layout-Box-Modell“ aus.
Sie können auch durch Klicken auf die Schaltfläche „Visuelle Hilfsmittel“ in der Dokumentsymbolleiste auf Optionen für die visuellen Hilfsmittel für
von CSS-Layout-Blöcke zugreifen.
Visuelle Hilfsmittel für CSS-Layout-Blöcke mit Elementen verwenden, die keine CSS-Layout-Blöcke sind
Mithilfe eines Entwurfszeit-Stylesheets können Sie die Hintergründe, die Rahmen oder das Box-Modell von Elementen anzeigen, die
normalerweise nicht als CSS-Layout-Blöcke angesehen werden. Dazu müssen Sie zunächst ein Entwurfszeit-Stylesheet erstellen, das dem
entsprechenden Seitenelement das display:block-Attribut zuweist.
1. Erstellen Sie ein externes CSS-Stylesheet, indem Sie „Datei“ > „Neu“, in der Spalte „Kategorie“ die Option „Einfache Seite“ und in der Spalte
„Einfache Seite“ die Option „CSS“ auswählen und auf „Erstellen“ klicken.
2. Erstellen Sie in dem neuen Stylesheet Regeln, die das display:block-Attribut den Seitenelementen zuweisen, die als CSS-Layout-Blöcke
angezeigt werden sollen.
Wenn Sie beispielsweise eine Hintergrundfarbe für Absätze anzeigen und Elemente auflisten möchten, können Sie ein Stylesheet mit
folgenden Regeln erstellen:
p{
display:block;
}
li{
display:block;
}
3. Speichern Sie die Datei.
4. Öffnen Sie die Seite, ab der Sie die neuen Stile anhängen möchten, in der Entwurfsansicht.
5. Wählen Sie „Formatieren“ > „CSS-Stile“ > „Entwurfsphase“ aus.
6. Klicken Sie im Dialogfeld „Entwurfszeit-Stylesheets“ auf das Pluszeichen oberhalb des Textfelds „Nur während Entwurfszeit anzeigen“,
wählen Sie das eben erstellte Stylesheet aus und klicken Sie auf „OK“.
7. Klicken Sie auf „OK“, um das Dialogfeld „Entwurfszeit-Stylesheets“ zu schließen.
Das Stylesheet wird an das Dokument angehängt. Wenn Sie mit dem vorstehenden Beispiel ein Stylesheet erstellt hätte, würden alle
Absätze und Listenelemente mit dem display:block-Attribut formatiert, sodass Sie die visuellen Hilfsmittel für CSS-Layout-Blöcke für Absätze
und Listenelemente aktivieren oder deaktivieren könnten.
AP-Elemente verwenden
AP-Elemente in Dreamweaver
Ein AP-Element (absolut positioniertes Element) ist ein HTML-Seitenelement – ein div-Tag oder ein beliebiges anderes Tag –, dem eine absolute
Position zugewiesen wurde. AP-Elemente können Text, Bilder oder beliebigen anderen Inhalt enthalten, den Sie in den body-Bereich eines HTML-
Dokuments einfügen können.
In Dreamweaver können Sie AP-Elemente zur Seitenlayouterstellung verwenden. Sie haben die Möglichkeit, AP-Elemente vor- und hintereinander
zu platzieren, einige AP-Elemente auszublenden und andere zu zeigen und AP-Elemente auf dem Bildschirm zu verschieben. Beispielsweise kann
vor ein AP-Element, in das ein Hintergrundbild eingefügt wurde, ein zweites AP-Element gesetzt werden, das Text mit transparentem Hintergrund
enthält.
AP-Elemente sind in der Regel absolut positionierte Div-Tags. (Dieser AP-Elementtyp wird von Dreamweaver standardmäßig eingefügt.) Beachten
Sie jedoch, dass Sie jedes HTML Element (beispielsweise ein Bild) als AP-Element klassifizieren können, indem Sie ihm eine absolute Position
zuweisen. Alle AP-Elemente (nicht nur absolut positionierte Div-Tags) werden im Bedienfeld „AP-Elemente“ angezeigt.
HTML-Code für AP-Div-Elemente
249