zur Startseite vom TP

Hinweis

Dieses Tutorial ist mittlerweile veraltet.

Vorwort

Dreamweaver bietet schon eine Menge an vorgefertigten CSS-Stilen. Machen wir einmal zwei einfache Formatierungen.

1

Um CSS-Stile überhaupt erstellen zu können, muss zumindest eine Datei offen sein. Erstellen Sie nun eine neue leere Datei. Im Menü Text findet man die Rubrik CSS-Stile, mit Klick auf Neuer Stil öffnet sich folgendes Fenster. 

Geben Sie im Feld Name einmal text1 ein. Alle anderen Einstellungen übernehmen Sie wie im Bild. Damit wird nur für diese eine Datei ein Stil definiert, wie man CSS auslagert und mehr im nächsten Teil. Klicken Sie nun auf OK, es öffnet sich das Fenster mit den vorgefertigten Stilen.

2

Stellen Sie nun einmal die Schriftart und Größe wie im Bild ein. Weitere Kategorien und Möglichkeiten interessieren uns für die ersten CSS-Schritte noch nicht, Sie müssen erst die Grundlagen der Erstellung von Stilen verstehen. Klicken Sie dann OK. Sie haben nun einen Stil definiert den Sie bestimmten HTML-Abschnitten im Dokument gleich zuweisen werden.

3

Nun machen Sie von Schritt 1 an dasselbe nocheinmal. Als Name vergeben Sie jetzt text2 und als Schriftart wieder Arial doch nun Größe 14. Wenn Sie nun einmal ins Menü Text/CSS-Stil gehen, sehen Sie Ihre zwei definierten Stile. 

Wir werden nun die Stile auf verschiedene Weise anwenden.

4

Schreiben Sie einmal zwei normale Sätze untereinander in das Dokument, zwischen den Sätzen drücken Sie die Entertaste, so das ein Absatz entsteht. Markieren Sie dann den ersten Text von Anfang bis Ende, gehen ins Menü Text und wählen dort unter CSS-Stile Ihren text1 aus. Für den zweiten Text wählen Sie text2.

Anmerkung: Für zusammenhängenden Text, also ohne Absatz, reicht es den Cursor einfach irgendwo in den Text zu setzen um dafür den Stile auswählen zu können, Sie brauchen also nicht unbedingt den gesamten Text markieren. Drücken Sie F12. Der erste Satz sollte nun in Arial Größe 10 sein und der zweite Arial/Größe 14.

5

Nun löschen Sie den gesamten Text und fügen einen Layer ein (Einfügen Ebene). Der Layer hat links oben nach dem Einfügen ein kleines Kästchen, klicken Sie es kurz an, damit markieren Sie den Layer. Bei markiertem Layer wählen Sie nun wieder unter CSS-Stile ihren text1. Schreiben Sie jetzt mehrere Zeilen Text, zwischendurch mit Absätzen (Entertaste drücken). Sämtlicher Text wird nun mit Arial/Größe 10 formatiert. Im Layer können Sie auch einzelne Textpassagen markieren und text2 zuweisen.

Zusammenfassung

Sie können sowohl einzelnen Textpassagen (markieren) oder gesamten HTML-Elementen (Layer, Tabellen usw.) CSS-Formatierungen zuweisen.

Der Vorteil von CSS:
Es spart enorm viel HTML Code (z.B.unzählige Fonttags entfallen)

Der Nachteil:
Einige Browser haben unterschiedliche Meinungen über die interpretation von CSS (Netscape/Internetexplorer. Nicht alles wird auch immer richtig angezeigt, aber dies betrifft einige spezielle Formatierungen, einfache Textstile sind da nicht das Problem.

Weitere Tutorials