Eine neue Stylesheetdefinition kann man über das Plus-Symbol unten im CSS-Stile Fenster erzeugen. Hierbei kann man auswählen ob der Stil nur für das Dokument oder innerhalb einer extern ausgelagerten Stylesheetdatei definiert werden soll.
Die exterene Stylesheetdatei kann man dann mit allen Dokumenten verknüpfen. Im CSS-Stile Fenster klicke unten auf das Kettensymbol um eine externe Stylesheetdatei mit dem Html-Dokument zu verknüpfen. Dabei kann man auch den Medientyp angeben. So kann eine Stylesheetdatei für Bildschirmausgabe definiert werden und eine andere für die Ausgabe im Druck. Diese Ansichte kann man sich in Dreamweaver auch anzeigen lassen mit Ansicht/ Stilwiedergabe/... Über Ansicht/ Symbolleisten/ Stilwiedergabe kann man schnell zwischen den verschiedenen Ansichten wechseln.
Um einen schon definierten Stil in eine externe Stylesheetdatei zu verschieben, markiere diesen und wähle mit rechter Maustaste "CSS-Regeln verschieben". Man kann die Stile auch im CSS-Stile Fenster verschieben. In älteren Versionen konnte man lokal definierte Stile über Datei exportieren in einer externen Datei speichern.
Es ist sinnvoll sich ein paar Stylesheetdateien anzulegen, beispielsweise für Schrift, Layout und Formularelemente. Bei selbst vergebenen Namen sollten die Namen sinnvoll sein und nicht etwa die Formatierung beschreiben, denn diese kann sich ändern. "info" ist somit ein sinnvollerer Name als "verdanaklein".
Selektor{
Eigenschaftbezeichner: Wert;
Eigenschaftsbezeichner: Wert;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
Selektoren bestimmen wie ein Bereich selektiert und die Eigenschaften auf diesen Bereich angewendet werden. Es gibt folgende Arten:
| Selektor | Syntax | Zuweisung | Beschreibung |
|---|---|---|---|
| Klassen-Selektoren | .stilname { Eigenschaft:Wert; } |
<span class="stilname">bla</span> | Ein Punkt wird vor dem selbstvergebenen Namen vorangestellt (Unix-Namensregel beachten). In Dreamweaver ist es nicht nötig den Punkt zu schreiben. Klassen werden einem bestimmten Tag zugewiesen. |
| table.stilname{ Eigenschaft:Wert; } |
<table class="stilname></table> | Klassen können auch für bestimmte Tags vergeben werden. | |
| table.stilname td{ Eigenschaft:Wert; } |
<table class="stilname></table> | In diesem Beispiel definiert man die Eigenschaften einer Tabellenzelle innerhalb der Klasse, welche einer Tabelle zugewiesen wird. | |
| Tag-Selektoren | body, td, th{ |
Html Tags mit Ausnahme von nicht zu schließenden Tags <br> können Stile zugewiesen werden. Sie werden automatisch zugewiesen. Will man die Eigenschaften auf mehrere Tags anwenden werden diese mit Kommata getrennt aufgeführt | |
| ID- Selektoren | #stilname{ Eigenschaft:Wert; } |
<div id="stilname">bla</div> | Jedem Element kann man einen ID Selektor zuweisen. Vor dem selbstvergebenen Stilnamen wird ein Gatterzeichen gesetzt. |
| Kontext- Selektoren | a:hover{ Eigenschaft:Wert; } |
Kontext Selektoren wirken auf bestimmte Eigenschaften eines Elements, wie beispielsweise bestimmte Zustände von Links. Es gibt aber noch mehr Kontext Selektoren, als die Linkselektoren, die man sich in Dreamweaver aussuchen kann. | |
| #stilname a:link{ Eigenschaft:Wert; } |
<a href="home.htm" id="stilname">linktext</a> | Hier wird ID-Selektor und Kontextselektor miteinander verbunden. Selbstverständlich ist das auch mit Tag-Selektoren möglich. | |
#stilname p, #stilname td, #stilname th{ |
<p id="stilname">bla bla</p> | Hier werden mehrere Tag Selektoren mit einem ID-Selektor verknüpft, |
Über die Registerkarte Layout kann man Div Tags einfügen. Gibt man keine weiteren Angaben an, wird das Div-Tag an der Stelle eingefügt, an der sich der Cursor befindet. Befindet sich der Cursor innerhalb eines Div-Tags so erstellt man ein verschachteltes Div-Tag. Markiert man einen Bereich und erstellt dann ein Div-Tag so wird der Bereich von dem Div-Tag umschlossen.
Die Kombination von Div-Elementen mit CSS ermöglichen eine pixelgenaue Aufteilung der Seite. Über die Eigenschaft Position: absolute und weitere Angaben wie width und hight etc erstellt man ein Seitenlayout. In der Registerkarte Layout kann man über den Button AP-Elemente die Rahmen aufziehen, die dazugehörigen CSS-Definitionen erstellt Dreamweaver automatisch. Sie werden absolut positioniert. In früheren Versionen hießen AP-Elemente Ebenen oder Layer. Auch die Bezeichnungen CSS-P-Element oder AP-Div bedeuten das gleiche.
Im Fenster Ap-Elemente werden die Ap-Elemente aufgeführt. Die Option "Überlappung verhindern" sollte aktiviert sein.
Ziehen Sie die Ap-Elemente mit gedrückter Maustaste auf. Verwenden Sie Hilflinien, die sie sich aus den Linealen auf die Bühne ziehen können. Verschieben Sie die Ap-Elemente an dem Anfasser oben links. Skalieren Sie die Ap-Elemente an den weiteren Anfassern. Stellen Sie die Größen und Positionierungen im Eigenschaftenfenster ein. Dort können Sie auch die Namen und weitere Optionen einstellen. Wenn Sie ein Ap-Element mit der Entf-Taste löschen, sollten Sie auch den dazugehörigen CSS-Stil im CSS-Stile Fenster löschen.
Verschachtelte AP-Elemente
Ap Elemente lassen sich verschachten. Diese Option stellt man unter Bearbeiten/ Voreinstellungen / Ap-Elemente ein. Außerdem sollte im Fenster AP-Elemente die Option Überlappung verhindern deaktiviert sein. Die Verschachtelung findet nur statt, wenn man innerhalb eines vorhandenen Ap-Elements ein weiteres zeichnet. Im Fenster Ap-Elemente kann man die Elemente verschieben und somit auch aus einer Verschachtelung lösen, indem man aus der hierachischen Baumstruktur herausschiebt. Verschiebt man in diesem Fenster ein AP-Element mit gedrückter Strg Taste auf ein anderes Ap-Element so wird es als untergeordnetes Element in dieses verschachtelt. Stellt man im Eigenschaftenfenster die Eigenschaft visible (Sichtbarkeit) auf inherit, so wird die Sichtbarkeit des übergeordneten Elternelements übernommen.
Beispiel statisch relativ
Beispiel Boxmodell
Beispiel absolut verschachtelt
Beispiel fixed
Das Thema bei Selfhtml
Mit width bestimmt man die Weite eines Elements, mit hight die Höhe.Erlaubt sind numerische Angaben. Außerdem kann man min-width oder max-width (bzw. hight), einen minimalen oder maxmalen Wert definieren.
Hat man Weite oder Höhe definiert, kann man mit der Eigenschaft overflow bestimmen, was passieren soll, wenn der Inhalt größer ist als die angegeben Werte für Weite oder Höhe.
hidden, der Bereich wird nicht angezeigt
visible der Bereich wird angezeigt
scroll es enstehen Scrollleisten
auto der Browser entscheidet, was passieren soll, so können auch Scrollleisten entstehen
Mit der Eigenschaft float kann man bestimmen, ob der nachfolgende Inhalt das Element umfließt. Mögliche Wert sind:
left
right
none
Erst ab CSS2.1 ist es nicht mehr nötig die Eigenschaft width zu definieren. Man kann die Eigenschaft float auch einsetzen, um div-Tags nebeneinander zu setzen. Außerdem kann man über die Eigenschaft clear die float Eigenschaft verhindern.
Beispiel