Operation Manual

Nach oben
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:
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
Dreamweaver erstellt AP-Elemente mithilfe des div-Tags. Wenn Sie ein AP-Element mit dem Werkzeug „AP
Div zeichnen“ erstellen, fügt Dreamweaver ein div-Tag in das Dokument ein und weist ihm einen id-Wert zu
1
2
3
4
5
6
p{
display:block;
}
li{
display:block;
}
296