Laborskizze 4  "Einbau von KaZcadeS und Anlegen einer 3-spaltigen Seite mit externem Style Sheet und einer Vorlage   (Stand 11.3.06, überprüft 9.2.08 )

Mit dieser Laborskizze lege ich für dich zum Zugucken eine neue Webseite als Vorlage an. Diese Skizze 4 hier ist für das Browserfenster bestimmt. Gedacht ist, dass sie nicht nur durchgelesen, sondern mit Nvu auch nachvollzogen wird. Als Vereinfachung oder Abkürzung der Skizze greife ich auf ein Muster aus dem Internet zurück.

1. Wie geht es los? Antwort: Zuerst bitte prüfen, ob in deinem Nvu der CSS-Editor CaScadeS oder KaZcadeS am Werkeln ist. Wer KompoZer hat, hat automatisch Kazés KaZcadeS und liest bei 3. weiter.

BILD 1

Wenn du mit Menü  Extras / CSS Editor  den im Bild 1 zu sehenden Dialog bekommst, dann hast du schon den KaZcadeS. Wenn nicht, dann wird jetzt gezeigt, wie er installiert wird. Ansonsten kannst du bei vorhandenem KaZcadeS den Punkt 2. überspringen und direkt bei 3. weiter lesen.

2. Wo bekomme ich KaZcadeS her? Antwort: Das Nvu-Forum-Mitglied Kazé hat den erweiterten CSS-Editor für Windows 32bits, MacOS X und Linux x86 entwickelt und stellt ihn als Nvu-Erweiterung auf dieser Download-Seite zur Verfügung. Klickst du auf das für dein Betriebssystem gedachte Icon, Bild 2, lädst die entsprechende xpi-Datei auf deine Festplatte. 

BILD 2

Starte Nvu und mit Menü / Extras / Erweiterungen / Dialog 'Erweiterungen' / Schaltfläche Installieren / auf der Festplatte die neue KaZcadeS 1.1-xpi-Datei anklicken installierst du die Erweiterung. Nach Beenden von Nvu und Neustart gibt es unter Menü Extras das gleiche Untermenü 'CSS Editor' wie zuvor, und jetzt wird damit KaZcadeS aufgerufen.

3. Muss bei Nvu noch etwas eingestellt sein? Antwort: Ja, denn Nvu lässt dir die Wahl mit oder ohne styles zu arbeiten. Prüfe bitte Menü Extras / Einstellungen / Dialog 'Einstellungen' / Register 'Allgemein' /  und setze, falls noch nicht gesetzt, das Häkchen bei 'CSS-Stile statt HTML-Elementen und -Attributen verwenden'.

4. Wo und wie hole ich mir das CSS-Muster aus dem Internet? Antwort: Auf der Seite "http://www.ibdjohn.com/csstemplate/" gibt es in Englisch den CSS-Template Generator für ein 3-spaltiges Muster. Auf der Generator-Seite mache ich gar nichts, nicht mal lesen, außer auf die Schaltfläche 'Generate Page' zu klicken. Du willst natürlich gleich mehr, deshalb habe ich dir in Bild 3 das Wesentliche mit deutschem Text ergänzt. Damit kannst du ein- , zwei- oder 3-spaltige Layouts mit Kopfleiste darüber nach eigenem Geschmack erzeugen. Von da an brauchst du auch diese Vorlage hier nicht mehr, aber eventuell doch für alles andere mit Nvu.

BILD 3

Erzeuge die amerikanische Musterseite ohne an den Einstellungen etwas vorzunehmen, damit wir beide denselben Code generieren. Speicher bitte die neue Seite "http://www.ibdjohn.com/csstemplate/cssout.php" mit deinem Browser in deinem Übungsverzeichnis als "cssout.php.htm" und lade sie dann mit Nvu. Wenn alles geklappt hat, dann findest du unter Menü Extras / CSS Editor /  den KaZcadeS mit dem internen style sheet. Klicke auf das Plus und die Regeln werden aufgelistet. Bild 4.

BILD 4

5. Wie erhalte ich ein externes Style Sheet? Antwort: Klicke auf die Überschrift "Internes Stylesheet", und die Schaltfläche 'Stylesheet exportieren und auf externes Stylesheet umstellen' erscheint. Diese hat für eine Schaltfläche relativ viel Text, doch löst du ja auch zwei Sachen gleichzeitig aus. Erstens, die Regeln werden aus dem Quelltext entfernt und in eine ASCII- bzw. reine Textdatei geschrieben. Das ist das Exportieren. Zweitens wird, nachdem du beim Speichern der Textdatei dir einen Namen für diese ausgedacht hast, genau dieser Name in deiner Webseite verlinkt. Das ist das Umstellen.

Ich nehme für die Vorlage den Namen "vorlage3sp.html" und deshalb für das externe style sheet "vorlage3sp.css". Den Suffix "css" solltest du auch nehmen, dann ist immer klar, das ist eine CSS-Datei, ein externes style sheet. Wenn du Unterverzeichnisse liebst und ein Unterverzeichnis "css" verwendest, dann muss das auf dem Server im Internet später deiner Festplatte entsprechen. Speicherst du die Datei "vorlage3sp.css" im Unterverzeichnis, dann zeigt der CSS-Editor (KaZcadeS) unter 'Sheets und Regeln' das externe style sheet mit 'css/vorlage3sp.css' ansonsten nur mit dem Dateinamen. Die amerikanische Vorlage schreibt aber hierzu in der Mitte [Both files (style.css and index.html) must be in the same folder (directory)], dass sowohl die html-, als auch die CSS-Datei im selben Verzeichnis stehen müssen.

6. Wie speichere ich die Seite als Vorlage? Antwort: Du merkst, ich will zu einem schnellen Ende kommen. Die Änderung der Vorlage für eigene Zwecke führe ich dann in der Laborskizze 5 vor. Also,
der CSS-Editor wird geschlossen und dann Menü Format / Seitentitel und -einstellungen... / Dialog 'Seiteneigenschaften' und dann trägst du einen Titel "Vorlage mit 3-spaltigem CSS-Layout" ein und setzt das Häkchen für 'Diese Seite ist eine Vorlage'. Den Rest füllst du aus nach Belieben. Den Dialog schließen. Jetzt noch abspeichern mit Menü Datei / Speichern unter "vorlage3sp.mzt". Durch das soeben gesetzte Häkchen erscheint automatisch als Datei-Typ die HTML-Vorlage mit dem Suffix 'mzt'. Achte auf das 'mzt' und falls es fehlt, speicher eventuell noch einmal.
Wenn du online arbeitest, Nvu hat kein Problem, eine mzt-Vorlage hoch zu laden, zu publizieren.

7. Und wie lade ich die Vorlage?  Antwort: Mit Menü Datei / Datei öffnen... wählst du im Dialog unten den Dateityp 'HTML-Vorlage' und durchsuchst deine Festplatte und wählst die Vorlage aus. Nach dem Laden kannst du sie sofort als vorläufig fertige html-Datei unter anderem Namen an anderer Stelle wieder speichern. Hast du bei Punkt 6. unter Seiteneigenschaften das Häkchen für Vorlage gesetzt, nimmst du es vor dem Speichern als HTML-Datei wieder raus. Menü Format / 'Seitentitel und -einstellungen' / Häkchen raus. Als ehemalige Vorlage hat die neue Seite ihr stylesheet wiederum intern. Baue deine erste Seite fertig und wandele erst dann das interne style sheet wie bei Punkt 5. in ein externes um.
Wenn du online arbeitest, dann nimmst du zum Runterladen der Vorlage nicht 'Webadresse öffnen' sondern auch 'Datei öffnen...' mit dem Dateityp 'HTML-Vorlage' und setzt die URL statt der Festplatten-Adresse ein.

Viel Spaß noch und Danke, dass du bis hierher gelesen hast. Falls die Amerikaner ihren CSS-Generator verlegen, abändern oder gar ausschalten, dann geht das Ganze nicht mehr. Maile mir dann bitte.

Gibt's noch was?  Alles kein Problem, ich müsste es nur es wissen. Guck mal ins Gästebuch:  http://www.huscholz.de/cgi-bin/guestbook.php.cgi
Und hier werden alle weiteren Laborskizzen angekündigt: http://www.elew.de/kurs1/skizzen.html

Danke, dass du bis hierher gekommen bist.

huscholz