Operation Manual

175
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Layout-Hintergründe Zeigt vorübergehend zugewiesene Hintergrundfarben für einzelne CSS-Layout-Blö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-Layout-Blöcken aktivieren, weist jedem
CSS-Layout-Block Dreamweaver 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-Layout-Blöcken erleichtern.
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“.