KompoZer für Fortgeschrittene

Einführung

Aussicht

In den folgenden Kapiteln werdet ihr lernen eure Seite etwas ansprechender zu gestalten als mit Tabellen.
Am Ende wird eure Seite so aussehen:

Layout einer gewöhnlichen Internetseite

Natürlich kannst du einzelne dieser Elemente weglassen. Zum Beispiel entscheidet man sich normalerweise für eine der beiden Menü-Varianten. Zur Vollständigkeit werden hier jedoch beide vorgeführt.

Vorbereitungen

Dafür musst du erst einmal die Symbolleiste anpassen. Klicke mit der rechten Maustaste in die Symbolleiste und wähle Symbolleiste anpassen.

Screenshot: angepasste Symbolleiste in KompoZer

Du wählst das Rahmensymbol Button Rahmen aus und ziehst es in die Symbolleiste. Jetzt kannst du auf die Rahmenerstellung schneller zugreifen.

  • Passe deine Symbolleiste wie eben beschrieben an.
  • Erstelle im Ordner webseiten einen neuen Unterordner 'css'. In diesem wirst du die HTML-Dokumente für Fortgeschrittene speichern.
  • Erstelle in KompoZer ein neues leeres HTML-Dokument und speichere es im Ordner css unter 'style_aufbau.html' mit dem Titel "Webseiten mit Style".
Computer-Eule

Der Container div

Was ist in KompoZer ein sogenannter Rahmen? Es ist ein Strukturelemente, ein HTML-Kästchen (engl. container) mit den Tags <div></div>.
Ein Kästchen fügst du in KompoZer mit dem Button Button Rahmen hinzu. Dann siehst du einen gestrichelten, rot umrandeten Breich. Für diesen kannst du nun ganz individuelle Eigenschaften setzen z.B. unterschiedliche Hintergrundfarben.


CSS

Experten-Eule

CSS (engl. Cascade Style Sheet) ist eine Sprache, um den "style" der Elemente eurer Seite zu verändern. In den folgenden Kapiteln wirst du lernen, was du mit dem CSS-Editor von KompoZer Button für den CSS Editor alles verändern kannst. Dein Ziel wird es sein, deine Seite wie in dem Screenshot oben gestalten zu können.


Checkliste:
  • Du hast die Symbolleiste angepasst, sodass die Buttons für Rahmen/HTML-Kästchen und den CSS Editor sichtbar sind.
  • Du hast den neuen Unterordner 'css' in webseiten erstellt.
  • In diesem Ordner hast du ein neues leeres HTML-Dokument mit den Titel "Webseiten mit Style" unter 'style_aufbau.html' gespeichert.

Wenn du interessiert bist, geht es für dich mit dem Erstellen von HTML-Kästchen weiter.

Pfeil weiter