KompoZer für Fortgeschrittene

Style-Regeln für HTML-Kästchen - Teil 1

Ziele

Erstellen von Style-Regeln

Als erstes wollen wir dem 'wrapper' eine Hintergrundfarbe zuweisen. Dafür erstellen wir eine Style-Regel, indem wir auf den Button Button für den CSS Editor klicken. Dann öffnet sich folgendes Menü:

Screenshot: Eine Style-Regel erstellen

Hier wählst du "Individuelle Style-Regel" und schreibst in die Zeile darunter "#wrapper".
Achtung! Hier nicht auf OK drücken, sondern auf Style-Regel erstellen.
Dann erscheint ein neues Fenster.

Screenshot: Einstellungen für Style-Regeln

Hier kannst du Einstellungen für das Kästchen 'wrapper' tätigen. Um die Farbe zu verändern, gehe auf den Reiter Hintergrund. Klicke in der ersten Zeile auf das graue Rechteck für "Hintergrundfarbe" und wähle dir eine Farbe aus.
Anschließend bestätigst du mit OK.

Zurück im WYSIWYG-Modus sehen wir aber noch keine Änderung. Das liegt daran, dass wir das Kästchen noch nicht benannt haben bzw. ihm noch keine Regel zugeordnet haben.


Benennung von HTML-Kästchen

Klicke nun in das Kästchen 'wrapper'. Dann siehst du unter den Editiermodi diese Leiste: Screenshot: div in Fußleiste auswählen. Wenn du nun mit der rechten Maustaste auf <div> klickst, erscheint ein Menü. Dort wählst du ID und wrapper.

Jetzt hat sich die Farbe des Rahmens angepasst.

Screenshot: ID zuweisen

Dein Dokument sieht nun so aus:

Screenshot: Benannte HTML-Kästchen

  • Führe die Arbeitsschritte für 'wrapper' aus.
  • Anschließend wiederholst du dein Vorgehen und weist den restlichen HTML-Kästchen die Regeln 'header', 'menu', 'menu_left', 'content' und 'footer' zu.
    Verwende dabei unterschiedliche Hintergrundfarben!
Computer-Eule

Dein Dokument sollte nun so ähnlich aussehen:
Screenshot: HTML-Kästchen mit Hintergrundfarbe

Als nächstes passt du die Größe der Container im Kapitel Style-Regeln - Teil 2 an.

Pfeil weiter