Artikel: Dreamweaver und Stylesheets

Positionierung mit Stylesheets und Dreamweaver 4 und MX

Dreamweaver ist auf absolut fixiert. Schon die Darstellung eines relativ positionierten Elements scheitert in Dreamweaver und sobald relative und feste Positionierung ins Spiel kommen, ist Dreamweaver mit seinem Latein absolut am Ende.

So stellen sich diese Seiten in Dreamweaver MX dar – ein Fortschritt, denn in Dreamweaver 4 konnten diese Seiten gar nicht bearbeitet werden.

Dadurch ist Beispiel 6.4 in Dreamweaver kaum noch nachvollziehbar, es sei denn, man verzichtet in einigen Bereichen auf die grafische Darstellung und arbeitet in der Codeansicht.

Das birgt gegenüber der "Handarbeit" immer noch viele Vorteile: Alle Elemente lassen sich in der Codeansicht genauso zuverlässig anlegen wie in der grafischen Ansicht – von der Tabelle über das Einfügen von Bildern bis hin zum Einbinden von Hyperlinks und Ankern.

Über Umwege zu neuen Selektoren

Ob absolut oder relativ oder fest ... Dreamweaver beherrscht das Anlegen von HTML-Selektoren und Klassenselektoren. Pseudolinks gibt es natürlich auch noch. ID-Selektoren und Kontextselektoren können aber nicht ohne weiteres im CSS-Stil-Inspektor angelegt werden. Jeden Versuch, einen ID-Selektor oder einen Kontextselektor wie td p anzulegen, kommentiert Dreamweaver mit: "Klassennamen müssen mit einem alphabetischen Zeichen beginnen ..."

Abhilfe besteht darin, den Selektor in der Codeansicht in das style-Element im Kopf des Dokuments zu schreiben. Dazu muss nur innerhalb des <style>-Tags

#ebene3 { }

deklariert werden.

Schritt für Schritt

Öffnen Sie das Dokument oder legen Sie ein neues Dokument an. Öffnen Sie die CSS-Stile-Palette mit Fenster/CSS-Stile in der Menüleiste.

Klicken Sie mit der rechten Maustaste (Mac: ctrl + Klick) in die Palette, um einen Stil anzulegen.

Wählen Sie "Benutzerdefinierten Stil erstellen (Klasse)" aus.

Mehr ist nicht nötig. Klicken Sie OK, im nächsten Fenster gleich wieder OK – Sie brauchen nichts weiter einzugeben – und dann auf "Fertig". Dreamweaver legt jetzt ein leeres Stylesheet in das <style>-Tag im Kopf des HTML-Dokuments.

Den Stil .unnamed1 können Sie direkt mit einem eigenen Namen, einem ID-Selektor wie "#ebene3" oder einem Kontextselektor wie "td p" überschreiben.

#navigationsleiste p {

}

Damit ist Dreamweaver bereits in der Lage, den Stil auszubauen.

Der Stil wird im CSS-Stile-Inspektor angezeigt (dieser spezielle Stil allerdings nicht – Dreamweaver zeigt HTML-Selektoren nicht im CSS-Stile-Inspektor, sondern nur benutzerdefinierte Klassennamen) und die Eigenschaften können wie gehabt im CSS-Stile-Inspektor erzeugt werden.

Komplexe Kontextselektoren bringen Dreamweaver nicht ins Schleudern. Wenn ihre Bezeichnung manuell angelegt wird, werden sie von Dreamweaver erkannt und können im Stile-Inspektor problemlos bearbeitet werden.

Auch Eigenschaften und Stile, die Dreamweaver nicht anbietet und unterstützt, dürfen in der Stylesheetdatei, global oder direkt in das Tag hinein angelegt werden. Sie bringen weder eine Fehldarstellung mit sich (die einzige Ausnahme bilden die relative und die feste Positionierung) noch werden sie von Dreamweaver verändert.

Dreamweaver und die relative Positionierung

Sobald etwas Routine in der Erstellung von Stylesheets eingezogen ist, gibt es einen Ausweg aus dem Dilemma der relativ positionierten Elemente, die von Dreamweaver nicht korrekt dargestellt werden: Schreiben Sie ein paar einfache Stylesheets für @media print und setzen Sie die Regeln für den Druck als Letztes in das <style>-Tag oder in die externe Stylesheetdatei. Sie können entweder alle relativ positionierten Elemente absolut positionieren oder für eine lineare Darstellung der Inhalte sorgen. Dann können Sie Ihre Seiten in Dreamweaver wieder bearbeiten.

Dreamweaver erkennt @media print nicht und benutzt die Stile für die Darstellung im Dreamweaver-Fenster. In einem modernen Browser haben sie keine Auswirkungen. Wenn die Site online gestellt wird, sollten die Regeln für @media print allerdings gegen "echte" Regeln für den Druck ausgetauscht werden, damit Besucher, die Ihre Seiten drucken, keine bösen Überraschungen erleben.

Stylesheets für Netscape 4

Bei dem Tipp, ein einfaches Stylesheet für Netscape 4 zu erstellen und alle Stile, die für Netscape 4 gefährlich werden, zu importieren, muss man in Dreamweaver Vorsicht walten lassen: Prüfen Sie beim Verknüpfen und Importieren von Stylesheetdateien, wohin Dreamweaver die Tags setzt. Dreamweaver setzt Verknüpfungen schon mal hinter die @import-Regel, so dass Sie die Stile für moderne Browser mit den einfachen Stilen für Netscape überschreiben.

Kopieren Sie die Verknüpfung zum Netscape-Stylesheet einfach in der Codeansicht über das <style>-Tag.