KompoZer für Fortgeschrittene

Style-Regeln für Elementtypen

Ziele

Was sind Elementtypen?

Elementtypen in KompoZer sind Absatzformate wie "Normaler Text", "Absatz", "Überschrift 1", "Überschrift 2" ... wie du sie in der Symbolleiste findest. Attribute all dieser Elemente kannst du mit CSS verändern.
Beispielsweise kannst du festlegen, dass Bilder einen roten Rahmen haben sollen, oder dass Text gelb als Hintergrundfarbe haben soll (siehe Kopfzeile im Lernpfad ;) )

In diesem Kapitel wirst du die Schriftart aller großen Überschriften (1) ändern.

Screenshot: Auswählen eines Elements

Erstelle in der ersten Zeile des Kästchens 'content' eine Überschrift, indem du im Dropdown-Menü in der Symbolleiste "Überschrift 1" auswählst.

Computer-Eule

Screenshot: einfache Überschrift

Tipp-Eule

Du solltest Überschriften nicht dadurch hervorheben, dass du die Schrift manuell vergrößerst und den Button für fett benutzt. Es ist vorteilhaft, die Überschriften als "Überschrift 1", "Überschrift 2", ... zu markieren. Dann kannst du alle Überschriften in einem Dokument auf einmal mit CSS verändern.

Style-Regeln für Elementtypen erstellen

Eine Regel für "Überschrift 1" erstellen wir, indem wir auf den Button Button für CSS Editor klicken. Dann öffnet sich folgendes Menü:

Screenshot: Style-Regeln für Elementtyp

Hier wählst du "Style-Regel für Elementtyp" und schreibst in die Zeile darunter "h1".
Achtung! Hier nicht auf OK drücken, sondern auf Style-Regel erstellen.
Dann erscheint nachfolgendes Fenster:

Screenshot: Einstellungen

Hier kannst du Einstellungen für das Element 'h1' (Überschrift 1) tätigen. Um die Schriftart zu verändern, gehe auf den Reiter Text. Klicke auf "Benutzerdefiniert" und wähle dir eine Schriftart z.B. calibri aus.
Stelle im Dropdown-Menü "Case" auf Grossbuchstaben um.
Anschließend bestätigst du mit OK.

Screenshot: formatierte Überschrift

Zurück im WYSIWYG-Modus sehen wir, dass sich die Überschrift verändert hat.


Führe die Arbeitsschritte für die Überschrift 'h1' aus. Fällt dir der Unterschied auf?

Computer-Eule

Dein Dokument sollte nun aussehen wir im obigen Bild.

(evtl. nur mit farbiger Kopf/Fußzeile, je nachdem ob du das Zusatzkapitel Hintergrundbild gelesen hast.

Was tust du, wenn du das Design in jedem deiner HTML-Dokumente haben willst?
Wie du dein Stylesheet für mehrere Dokumente verwenden kannst, erfährst du im Kapitel Externes Stylesheet.

Pfeil weiter