KompoZer für Fortgeschrittene

Externes Stylesheet

Ziele

  • Du exportierst dein erstelltes Stylesheet.
  • Du integrierst dein exportiertes Stylesheet in andere HTML-Dokumente.

Vorbereitung

Damit nichts schief geht, solltest du dein HTML-Dokument unter anderem Namen noch einmal abspeichern.
Das Umstellen auf ein externes Stylesheet funktioniert leider nicht immer fehlerfrei.

Speichere dein Dokument noch einmal unter dem Namen 'style_aufbau_extern.html'.
Du kannst es später wieder umbenennen und das Dokument mit dem internen Stylesheet löschen. Aber erst wenn alles fehlerfrei funktioniert hat.

Computer-Eule

Auf ein externes Stylesheet umstellen

Du klickst wieder den Button Button für CSS Editor, um den CSS Editor zu öffnen. Dort klickst du auf "Internes Stylesheet", dann öffnet sich folgendes Menü:

Screenshot: Exportieren des Stylesheets

Hier klickst du auf "Stylesheet exportieren und auf externes Stylesheet umstellen"
Dann erscheint folgendes Fenster:

Screenshot: Auswahl eines Speicherorts

Du speicherst das externe Stylesheet im Ordner 'css' unter dem Namen "style.css".

Zurück im WYSIWYG-Modus sehen wir keine Änderung. Wenn du die Seitenverwaltung geöffnet hast und dir den Ordner 'css' anzeigen lässt, siehst du jedoch 'style.css'.


Das externe Stylesheet in andere HTML-Dokumente integrieren

Öffne das HTML-Dokument mit welchem du dein stylesheet erstellt hast. Wechsle in den Quelltext-Modus, dort findest du die blau markierte Zeile. Diese kopierst du (Strg + C).

Screenshot: zu kopierende Zeile im Quelltext

Öffne das Dokument, in das du den Style übertragen möchtest. Hier gehst du auch in den Quelltext-Modus. Suche die Stelle, die du im Bild rechts siehst. Füge dort ebenfalls eine Leerzeile wie rechts ein und dann die vorher kopierte Zeile (Strg + V).

Screenshot: zu kopierte Zeile im Quelltext

Zurück im WYSIWYG-Modus, musst du noch die Kästchen erstellen und sie wieder benennen. Dann sollte diese Seite genauso aussehen, wie die vorherige.

  • Exportiere dein erstelltes Stylesheet wie oben beschrieben.
  • Erstelle ein weiteres HTML-Dokument.
  • Integriere auch in dieses Dokument dein exportiertes Stylesheet und erstelle die gleichen HTML-Kästchen, wie in deinem ersten Dokument.
Computer-Eule

Deine Dokumente sollten nun gleich aussehen bzw. der Style sollte übertragen sein.


Du weißt nun wie du ein einheitliches Layout für deine Homepage erstellst.
Viel Erfolg! Lass deiner Kreativität freien Lauf.

Party-Eule