CSS in Adobe Dreamweaver verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie verwenden Adobe Dreamweaver zum Erstellen und Bearbeiten von Webseiten und möchten die CSS-Möglichkeiten des Programms nutzen.

Lösung

Verwenden Sie die Registerkarte CSS-STILE, um CSS-Stile zu erstellen, zu bearbeiten, zu löschen und zu betrachten (siehe die nächsten beiden Abbildungen).

Abbildung: Eine neue CSS-Datei in Dreamweaver anlegen.

Abbildung: Stildefinitionen in einer CSS-Datei mit Dreamweaver bearbeiten.

Es gibt mehrere Möglichkeiten, mit Stylesheets zu arbeiten:

1. Um Stylesheets in ein beliebiges HTML-Dokument einzubinden, können Sie auch das Icon STYLESHEET ANFÜGEN in der Registerkarte CSS-STILE anklicken (siehe folgende Abbildung).

Abbildung: Die Verwendung von Dreamweavers CSS-Registerkarte zum Einbinden eines externen Stylesheets.

2. Ein neues CSS-Dokument erstellen Sie durch die Auswahl von DATEI ➝ NEU…. Im folgenden Fenster (siehe erste Abbildung) wählen Sie in der zweiten Spalte (EINFACHE SEITE) den Eintrag CSS.
3. Bearbeiten Sie Ihre Webseite wie ein Word-Dokument. Dreamweaver verwaltet im Hintergrund automatisch ein internes Stylesheet mit den nötigen Definitionen.
4. Geben Sie Ihre Stildefinitionen in der geteilten Ansicht bzw. der Codeansicht ein.

Sie können die CSS-Eigenschaften nach Kategorien wie Schrifttyp, Hintergrund und Rahmen geordnet anzeigen lassen. Zudem können die Eigenschaften in einer alphabetischen Liste dargestellt werden.

Diskussion

Wenn Sie dem HTML-Code eines Dokuments in Dreamweaver mit Hilfe der EIGENSCHAFTEN-Palette Stile zuweisen, werden diese automatisch in Form von Definitionen in ein internes Stylesheet eingefügt, anstatt die veralteten font-Tags zu verwenden (siehe die folgende Abbildung). Ältere Versionen von Dreamweaver hätten stattdessen Code wie diesen erzeugt:

Abbildung: Bei der Auswahl von Schrifteigenschaften und Farben erstellt Dreamweaver automatisch die benötigten Stildefinitionen.

In der CSS-Registerkarte können Sie sich außerdem die von Dreamweaver erstellten Stildefinitionen anzeigen lassen (siehe folgende Abbildung).

Abbildung: Eine Ansicht der Stildefinitionen für das gegenwärtige Element in der CSS-Registerkarte von Dreamweaver.

Siehe auch

Die Adobe Dreamweaver-Homepage.