zur Startseite vom TP

Hinweis

Vorwort

Im ersten Teil haben Sie gelernt wie man einfache Textformatierungen für eine einzelne Datei definiert. Das ist aber noch nicht die wahre Stärke von CSS. So richtig interessant wird es erst, wenn man eine einzelne Styleanweisung für alle Dateien, egal wie viele es sind verwendet.

Das ist nur möglich wenn die einzelnen Anweisungen in eine externe Datei geschrieben werden.

1

Erstellen Sie wieder ein neues Dokument und speichern Sie die Datei. Klicken Sie im Menü: Text/CSS-Stile/Neuer Stil. Nun müssen Sie nicht wie im ersten Teil bei Definieren in Nur dieses Dokument nehmen, sondern Neue Stylesheet-Datei. Alles andere machen Sie wie im Teil 1.

Abb.1

2

Nach dem OK öffnet sich folgendes Fenster. Hier vergeben Sie einen Namen für die Datei (bitte .css mit angeben!) und suchen sich den Ordner wo Sie diese speichern möchten. Sinnvollerweise speichern Sie Dateien immer dort, wo sich auch das dazugehörige Projekt befindet, also zumindest im Stammordner der Site (siehe auch Site einrichten).

Abb.2

3

Nach dem Klick auf Speichern können Sie wieder ganz normal die Formatierungen wählen (Arial/Größe 10).

Abb.3

4

Gehen Sie nochmal im Menü Text/CSS-Stile auf Neuer Stil. Nun schauen Sie bei Definieren in: Sie sehen dort jetzt Ihre bereits angelegte externe Stylesheet-Datei. Wenn Sie text2 ebenfalls in dieser definieren möchten, brauchen Sie nur die Datei auswählen. Dreamweaver zeigt dort alle bereits angelegten Dateien eines Projektes an. Definieren Sie wieder text2 mit Arial/Größe 14.

Abb.4

5

Ihre Stile können Sie nach dem OK nun ganz normal wie im Bild auswählen 

Abb.5

Eine Besonderheit gibt es aber noch, das Einbinden dieser Stile in weitere Dateien.

6

Erstellen Sie wieder ein neues Dokument und speichern dieses, lassen Sie das erste aber offen. Klicken Sie im Menü Text, diesmal auf Stylesheet anfügen.

Abb.6

Es öffnet sich folgendes Fenster. Hier wählen Sie die vorher angelegte Datei einfach aus, DW erstellt den richtigen Verweis zur Datei automatisch. Wenn Sie vor der Auswahl der Datei das Dokument nicht speichern, weist Sie DW darauf hin, dass Sie dies tun müssen, damit der Pfad zur Datei korrekt erstellt wird. Brechen Sie in diesem Fall einfach ab, speichern die Datei und wählen die externe CSS nochmal aus.

Abb.7

7

Sie können nun wieder normal im Menü Text die Stile für diese Datei auswählen.

Zusammenfassung: Im ersten Teil haben Sie nur für ein einzelnes Dokument Stile erstellt. Im zweiten Teil haben Sie Stile einmal erstellt, die Sie mit Stylesheet anfügen in jede Datei Ihres Projektes einsetzen können.

CSS Workshop Teilbereiche