Ziel: Eine Seite wird zur Vorlage, es wird ein Template erstellt. ( Die Idee ist für einen Beitrag im Nvu-Forum entstanden und wird hier umgesetzt.)

Bemerkungen: Diese Seite hat ein einfaches Layout mit einer festen Breite und untereinander aufgereihten div-Containern txt1, txt2 und txt3, farblich mit #fff, #dfd und #ddf unterschieden. Am Ende steht eine Seite mit dreispaltigem flüssigem Layout zwischen Kopf- und Fußcontainern. Für diejenigen, die diese Seite mit dem Browser betrachen, stehen die weiterführenden Links ▼ganz unten▼. Alle anderen haben zum Durcharbeiten diese Seite mit KompoZer geladen.

Was ist neu und auf welche Weise?

- Das verlinkte ▼ganz unten▼ ist ein interner Verweis und führt zur Unterkante dieser Seite. Hergestellt per Symbol 'Ziel'  Vor den untersten Container dieser Seite wurde der Mauszeiger platziert, mit der Schaltfläche 'Ziel' der Dialog 'Ziel-Eigenschaften' geöffnet und der Zielname "GanzUnten" vor die Linkleiste gesetzt. Damit ist der Anker "GanzUnten" entstanden. Er wird auch im Editiermodus 'Normal' als kleiner Anker angezeigt. Der zugehörige Quelltext lautet:
<a name="GanzUnten"></a>. Um zu diesem Anker springen zu können, ist nur noch der Text "ganz unten" zu verlinken. Dabei wird statt 'Durchsuchen' im Dialog 'Link-Eigenschaften' die Auswahlliste aufgeklappt und der Anker ausgewählt. Ein zweiter Anker "NachOben" kam als Sprungziel für Besucher, die unten angekommen sind, auf die gleiche Art oben links noch dazu. Doppelklicke auf den Link und klappe die Auswahlliste auf. Du siehst die zwei Anker gelistet. Dann Abbrechen.

- Das externe Stylesheet: Bild 2. Da wie in Aufgabe 6 beschrieben, beim Publizieren das externe Stylesheet im selben Verzeichnis wie alle Grafiken landet und die Grafiken nach "img" gehören, ist das Style sheet jetzt auch unter /img zu finden.



- Alle div-Container erhalten den Innenabstand von 2px, es sei denn, ein Inline-Style erzwingt etwas anderes. Aber Inline Styles gibt es hier nicht und die von KompoZer jedes Mal beim Einfügen einer Grafik per Inline-Style eingesetzten Ausmaße werden im Quelltext, sobald sie mir begegnen, per Hand gelöscht. So braucht "padding: 2px;" für keine Regel für div mehr wiederholt zu werden, und umgekehrt gibt es kein div ohne diesen Innenabstand.

- "aussen", "titel" und die anderen sind alles Klassen von div. Diese Klassen können prima per Auswahlliste zugewiesen werden. "div.txt1, div.txt2, div.txt3" enthält alles Gemeinsame dieser drei Klassen. Es könnten "txt4" und "bla5" usw. mit Komma getrennt noch hinzukommen. Als einzelne Regel enthalten "txt1", "txt2" usw. nur das Trennende, das Unterschiedliche, und das ist hier nur eine Hintergrundfarbe. Bitte selbst mit dem CSS Editor ansehen.

Im ersten Teil a) bis f) wird mit der Funktion "Vorlage" experimentiert. Das können alle überspringen oder auf später verschieben, die nicht an dieser Nvu/KompoZer-Einrichtung interessiert sind.
Im zweiten Teil g) bis s) werden die div-Container in einer "Baustelle" erstellt.
Danach wird kurz und bündig in t) bis v) das Ganze Knall und Fall ohne weitere Aufträge zum Studieren als endgültige Vorlage abgerundet. Ansonsten würden wir bis z) nie fertig werden.

a) Zuerst werden ein paar Vorlagen-Untersuchungen angestellt. Aufträge vorläufig bitte nicht löschen.
(Für alle Quereinsteiger, die das hier mit ihrem Browser betrachten und gar nicht anwenden, alle Aufgaben sind dafür gemacht, dass sie mit KompoZer geladen und mit KompoZer erledigt werden. KompoZer ist das Werkzeug, das erlernt wird, indem es Auftrag für Auftrag a) bis z) benutzt wird. KompoZer meint, wenn nicht extra erwähnt Nvu oder KompoZer.)
Es geht los: In den Seiteneigenschaften die Seite als Vorlage deklarieren, Bild 3 :
Menü 'Format' / 'Seitentitel und - einstellungen ...' /


Wichtig ist das Häkchen links in der Mitte.
Speicher die Seite mit Menü Datei / 'Speichern unter..'. KompoZer wechselt den Suffix von "html" zu "mzt".
Nenne die Vorlage "3spalten.mzt". Das hier ist nun eine Vorlage. Diese Seite bitte schließen und die unveränderte Aufgabe 7 frisch laden.
Beim Laden der Vorlage erscheint eine Warnung "Diese Seite ist eine Vorlage".

b) Die geschlossene Vorlage "3spalten.mzt" wird zur Erstellung einer Tochterseite ausprobiert.
Werden neue Seiten unter Benutzung einer Vorlage erstellt, muss dabei die Vorlage immer geschlossen sein.

Nun der Test von 3spalten.mzt.
KompoZer erlaubt mehrere KompoZer-Fenster gleichzeitig.
Nicht für Nvu: Nur nicht ein und dieselbe Seite in mehreren Fenstern.
Gemeinsam: Starte KompoZer ein zweites Mal und ordne beide Fenster nebeneinander an. Auch wenn das überlappt, es soll erreicht werden, dass der Test von hier aus gesteuert werden kann. Ein Ausdrucken der Aufträge wäre weniger umweltfreundlich.
Im leeren KompoZer-Fenster mit Menü 'Datei' / 'Neu' / Dialog 'Neue Seite oder Vorlage erstellen' und Häkchen bei 'Eine neue Seite, basierend ...' / Durchsuchen und 3spalten.mzt finden / 'Erstellen'.
Diese Seite nun als fertige Seite 'Speichern unter...' "3spalten.html", im gleichen Verzeichnis wie die Vorlage, und ein paar Proben veranstalten:
- Irgendwo auf der Seite versuchen, den Text zu ändern. Das geht nicht und in der Statuszeile erscheinen auch nicht die gewohnten tags. Ein Bild löschen geht auch nicht.
- Im CSS Editor Änderungen vornehmen. Setze "div.aussen" auf 400px Breite, damit das zweite KompoZer-Fenster schmaler sein darf. Das geht.
- In den Editiermodus 'HTML-Tags wechseln und auf ein "img" im Editierbereich klicken. Jetzt füllt sich die Statuszeile wie gewohnt. "img" läßt sich rechtsklicken und samt Tag entfernen.
- Im Quelltext änderungen vornehmen. Das geht.
Ergebnis: Die Seite läßt sich eigentlich nicht verändern. Der auf der Vorlage basierenden Tochterseite "3spalten.html" fehlen die editierbaren Bereiche. Zur Not kann zwar noch direkt im Quelltext alles gestaltet werden und deren externes Style sheet ist manipulierbar. Aber das ist nicht der Zweck einer Vorlagen-Anwendung.
Fazit: Geht es darum, eine Musterseite immer wieder zu verwenden und mehrmals unter verschiedenen Namen grundsätzlich zu variieren, benötigt es nicht das Verfahren mit einer Vorlage. Eine Vorlage enthält "unveränderbare" Bereiche und editierbare Teile.

c) Die Seite "3spalten.html" wird gespeichert und geschlossen. Jetzt wird die Vorlage selbst, "3spalten.mzt" im 2. KompoZerfenster geladen. Beim Neuladen mit Menü Datei / Datei öffnen .. muss der Dateityp 'HTML-Vorlagen' oder 'Alle Dateien' eingestellt werden, sonst ist die Vorlage nicht zu finden oder zu sehen.
Die Vorlage benutzt die gleiche CSS-Datei wie 3spalten.html. Damit wurde die Vorlage eigentlich zerstört. Oder gleich mitgeändert, wenn das als Vorteil aufgefasst wird. Es soll hier nur demonstriert werden. Wichtig könnte sein, Vorlagen in eigenen Verzeichnissen zu verwalten. Ändere die Breite von "div.aussen" wieder zurück auf  700px.

In den Auftrag a) der Vorlage klicken und in der Statuszeile den zugehörigen Tag ...
Für KompoZer: ...  'div class="txt2' ...
Für Nvu: ... 'div', das ist beim Reinklicken immer der letzte Tag rechts in der Statuszeile ...
Gemeinsam: rechtsklicken. Im Kontextmenü 'Vorlagen' wählen und 'Editierbar machen' wählen / Im Dialog den optionalen Bereich "Bereich A" nennen. Bild 4. / OK.

Der Name ist sinnfrei, zeigt aber, dass Leerzeichen nicht gelten. Nun hat der BereichA einen Reiter mit einer kleinen Markierung zum Löschen, wenn dieser Bereich in der Tochterseite später nicht gebraucht und einfach gelöscht wird.
Linksklicke in den Bereich "BereichA" und linksklicke in den zugehörigen Tag in der Statuszeile.
Nicht für Nvu: Dort ist nun der neue ID-Selektor zu sehen.
Gemeinsam: Ein Blick in den Quelltext zeigt den neuen ID-Selektor "BereichA" und das nach W3C-Standard unzulässige "editable". Die Vorlage nun speichern und schließen.

d) Die Vorlage muss geschlossen sein. Eine neue Seite "3spalten.html" mit Hilfe der Vorlage erstellen und mit 'Speichern unter...' die vorhandene Seite ersetzen.
Der Bereich "BereichA" lässt sich auf der Tochterseite ändern. Nur dieser Bereich, so soll das sein. Mit der kleinen Markierung im Reiter den Bereich nun löschen. Gibt es keine kleine Markierung rechts im Reiter, dann hast du den Bereich nicht als optional eingerichtet. (Das Häkchen im Bild 4). Die Seite wieder schließen.
Dafür nun bei die Vorlageladen und zusätzlich den Auftrag b) als einen wiederholbaren (Nvu: repeatable) BereichB und den Auftrag c) als einen verschiebbaren (Nvu: movable) BereichC editierbar machen. Die Vorlage speichern und schließen.

e) "3spalten.html" neu erstellen auf Basis der Vorlage und mit den drei neuen Bereichen speichern.

Jede Seite kann im KompoZer per Menü 'Extras' / 'Quelltext überprüfen' auf W3C-Konformität überprüft werden. Nur nicht die auf der Festplatte natürlich. Der augenblickliche Stand der Aufgabe 7 kann aber stellvertretend im Internet mit dem Browser bei dieser Adresse geprüft werden: http://validator.w3.org/check?uri=www.elew.de/kurs1/3spalten.html und versagt.

Dennoch, KompoZer erzeugt auch bei den Tochterseiten validen Code.

Aber nur wenn das hier folgt:
"3spalten.html" öffnen / Menü 'Bearbeiten' / 'Von der Vorlage trennen'. Dann sind die erwähnten Attribute editable usw. entfernt.

Mit dem Browser das hier ansehen: http://validator.w3.org/check?uri=www.elew.de/kurs1/3splt.html.

Tochterseiten, abgetrennt oder nicht, verändern sich nicht nachträglich, wenn an der Muttervorlage Änderungen vorgenommen werden. Wird aber die gleiche CSS-Datei verwendet, stehen jedoch alle Änderungen von dort der ganzen Familie zur Verfügung.

f) Bitte die CSS-Datei als Kopie mit dem Namen erg07.css erstellen und im hiesigen Quelltext auf die neue CSS-Datei verlinken. Dann die Aufgabe als erg07.html speichern. Über dem obersten Container wird in h) die neue Baustelle eingerichtet. Die gesamte Seite bis hierher einschließlich Überschrift und Auftrag f) kann gelöscht werden. Alles markieren und durch ein [Enter] ersetzen. Das zweite KompoZer-Fenster wird nicht mehr benötigt.

g) Den oder die Anker entfernen mit Anklicken und dann per Rechtsklick in der Statuszeile auf <a> und Kontextmenü 'Tag entfernen'. Die "Baustelle" kann oben links im Container "aussen" eröffnet werden. Siehe Bild 5 als Bildschirmkopie im Verhältnis 1:1 mit extra Rand und daher mit etwas Überbreite.
Bild 5. Fehlt die Leerzeile über g), kann im Quelltext ein <br> vor dem <div> mit g) eingefügt werden.
Beim Bau einer Webseite ist es hilfreich, die Container mit ihren Konturen sichtbar zu machen. Da eine Regel für alle div vorhanden ist, wird diese per CSS-Editor mit den Begrenzungen 'solid 1px #006600' im CSS-Editor unter Register 'Begrenzungen' erweitert.

Der Container "aussen" behält seinen doppelten Rahmen, nur wenn im externen Style sheet die Klasse "aussen" gelöscht würde, würde auch außen herum der grüne Rahmen erscheinen.
KompoZer: Wechsel in den Editiermodus 'Vorschau', damit die gepunkteten Linien verschwinden.
Nvu: Wenn wie bei Bild 5 die grauen Bereichskonturen eingeschaltet sind, dann schalte sie im Menü 'Ansicht' ab.
Gemeinsam: Bilder und Aufträge jetzt immer gleich nach Erledigung containerweise löschen. Jetzt.

h) Der Mauszeiger "sitzt" links oben in der Ecke oberhalb des grünen Rahmens von diesem h) hier.
Wähle in der Auswahlliste für das Absatzformat (die Auswahlliste direkt unter der öffnen-Schaltfläche) den 'Generic container (div)' aus. Nun sitzt auch der Mauszeiger in einem grünen Rahmen. Die Baustelle ist eröffnet.

i) Schreibe in neuen Container in 5 Zeilen untereinander A B C D E hinein. Der Bereich wächst mit und seine Pixel-Größe wird in den beiden Linealen angezeigt. Bild 6.

j) Ziehe die untere Kante des linken Lineals auf etwa 300px runter und schiebe die obere danach um 20px runter, so dass etwa 280px die Höhe des Containers wird. Näherungsweise reicht, die genaue Pixelangabe lässt sich im Quelltext immer noch herstellen. Schiebe das waagerechte Lineal links um 100px nach rechts und dann die rechte Kante um 100px nach links, so dass die Breite jetzt um 200px mit etwa 490px schmaler ist als vorher. Links und rechts bleibt ein 100px breiter Rand. Das Ganze ergibt ein festes Layout mit Scrollbalken bei kleiner werdenden Browserfenstern, aber darum geht es ja gar nicht.

k) Markiere die 4 Zeilen B bis E ohne das A und wähle wieder in der Auswahlliste für das Absatzformat 'Generic container (div)' aus.

l) Wechsel in den Editiermodus 'Quelltext' und sieh dir dort das "A bis E" an. Es ist leicht oben zu finden.
Du hast mit deiner Maus per Auswahlliste öffnende tags <div> vor deine Buchstaben und das schließende Tag </div> jeweils dahinter von KompoZer einsetzen lassen. Dabei wurden die vorher vorhandenen Zeilenumbrüche <br> überschrieben. Der erste Container hat per Maus und Lineal seine ungefähren Abstände nach oben und links erhalten. Jetzt lassen sich die Pixelangabe auch editieren und nachträglich präzise verändern. (margin-top: 20px; margin-left: 100px) und Höhe und Breite (height: 280px; width: 494px).
Der erste Container enthält das A und einen Zeilenumbruch <br>. Ausserdem umfasst er noch 4 weitere Container mit je einem Buchstaben. [Strg]+[S] zum Speichern und zum Wechseln zurück in den Editiermodus 'Vorschau'.

m) Klicke an das B. Unten in der Statusleiste siehst du <body> <div class="aussen"> <div> <div>.
(Nvu: <body> <div> <div> <div>). Linksklicke in das rechte <div> und der Container mit dem B wird in Gänze markiert. Schiebe dessen Breite auf 100px nach links zusammen. Mit dem B zeichnet sich schon die linke Spalte ab.

n) Damit B und C auf gleicher Höhe schweben, werden sie gefloatet (to float, Englisch = treiben, schweben, flößen, in Umlauf setzen):
Linksklicke an das B und rechtsklicke in der Statuszeile auf das zugehörige div. Per Kontextmenü kommst du über Inline Styles und über das Register Box zu Puffer. Wähle Puffer: Links. Sofort schwebt Container C hoch an den Container B. OK. Bild 7.

o) Füge hinter dem C diesen Text in den C-Container ein:

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Mit diesem Text wird der Container B umrundet, sobald dessen untere Kante erreicht ist. Damit die senkrechte Linie eingehalten wird, erhält der Container C links einen Außenabstand mit der Breite von B plus padding, insgesamt 106px: In den Container C linksklicken / in der Statuszeile auf das div rechtsklicken / Kontextmenü 'Inline Styles' / Register 'Box' / Außenabstand (Nvu: Raender) Links: 106px / OK.

p) Der Container D wird die rechte Spalte ergeben. Als Breite wird er wie der Container B die 100px erhalten und floaten werden die anderen Container rechts von ihm:
An das D linksklicken. Per Kontextmenü  Inline Styles / im Register 'Box' wähle "Puffer: Rechts" und die Breite 100px / OK.
Da dieser Container im Quelltext nach dem Container C und vor dem Container E kommt, leitet er nur E um sich herum.

Der Containber D wird örtlich verschoben, damit B und C auch von ihm gefloatet werden. Und zwar im Quelltext an die zweite Stelle vor dem B hinter das A. Wechsel in den Quelltext und verschiebe das Element entsprechend. Das Ergebnis zeigt Bild 9.

q) Der Container C erhält jetzt auch zur rechten Seite hin den Abstand von 106px.
In den Container C linksklicken / in der Statuszeile auf das div rechtsklicken / Kontextmenü 'Inline Styles' / Register 'Box' / Außenabstand (Nvu: Raender) Rechts: 106px / OK.

r) Das Menü ganz unten bitte markieren, per Menü 'Bearbeiten' ausschneiden und dann per Menü 'Bearbeiten' / 'Einfügen ohne Formatierung' damit das B im B-Container überschreiben. Der Link nach "Nach oben" wird gelöscht.

s) Das Menü ragt über das E hinaus. Wäre nicht gefloatet worden, wäre der E-Container immer noch ganz unten. Deshalb wird für E und alles was danach folgt das Floaten aufgehoben:
In den Container E linksklicken / in der Statuszeile auf das div rechtsklicken / Kontextmenü 'Inline Styles' / Register 'Box' / Aufhebung: (Nvu: Clear) Links / OK.

t) Grundsätzlich sollten die Inline Styles in eine externe CSS-Datei ausgelagert werden. Im Quelltext stehen sie jetzt noch bei den einzelnen Containern. Per Copy und Paste können sie bei den entsprechenden Regeln .oben, .links, .mitte, .rechts und .unten eingefügt und nachgebessert werden. Für solche Abkürzungen ist KompoZer aber nicht gemacht. Ordentlich zu geht es mit dem Umwandeln per Maus zu internen Styles und danach folgt per Maus das Auslagern. Beispiel Container E: Markieren und per Rechtsklick in der Statuszeile und Kontextmenü 'Inline Styles' / 'Extrahieren und allgemeinen Style anlegen. Der Dialog ist bei Nvu - Bild 11- in Englisch, sieht aber bei KompoZer identisch aus.



Mit "unten" erhält Container E seine Klasse. Mit dem Häkchen bei "des gleichen Elemententyps" erhält die Regel den Namen div.unten. Damit kann die Klasse nur für divs angewendet werden. Ohne Häkchen entfällt das div im Regel-Namen und steht dann verschiedenen tags zur Verfügung.
Gefunden im Quelltext wird das interne Style sheet am Ende des headers vor dem schließenden Tag </header>. Zum Verändern per Maus ist jetzt der CSS-Editor zuständig. Über das Kontextmenü von Inline Styles sind die Regeln nicht mehr erreichbar.
Mit dem CSS-Editor wird aus dem internen ein externes Style sheet. Um das vorhandene nicht zu überschreiben, kann mit einem neuen Namen eine weitere CSS-Datei angelegt werden. Im Quelltext wird diese dann auch verlinkt.
Das wird jetzt nicht weiter ausgeführt, damit die Aufgabe zum Ende kommt.

u) Das fertige Ergebnis enthält:
- die neue CSS-Datei erg07.css. ( download von http://www.elew.de/kurs1/erg07.html )
- mit den Klassen für A - E namens "oben", "links", "mitte", "rechts" und "unten" und
- mit einem Außenrahmen, de 90% des Bildschirms einnimmt, so dass das Layout flüssig wird.

Der Container A hatte bisher die Funktion alles zu umrahmen. Er erhält die Klasse "oben" und den schließenden Tag gleich hinten dran.
Die Mitte erhält alles, was an Breite von "links" und "rechts" übrig gelassen wird.-
Die grünen Hilfsrahmen um jeden Container kommen weg.
Farbe, Foto, ein paar Texte ergänzen die Aufgabe 7, damit es was zu sehen gibt.
Die Navigation erhält die Art der vorigen Aufgaben.

Soweit das Ergebnis als HTML-Datei erg07.html

v) Soll aus dem vom Internet heruntergeladenen Muster eine Vorlage werden, dann wie gehabt vorgehen. Vorlagen lassen sich nur von der Festplatte laden und nur von dort (geschlossen) zum Erstellen neuer Seite nutzen.

Falls du Varianten hast, freue ich mich darüber unter "vorschlag at huscholz punkt de". Vielleicht lohnt sich eine Sammlung? Einen Vorschlag gibt es schon als Ergebnis 07a von Horst Schneider.

Start Aufgabe1 Aufgabe2 Aufgabe3 Aufgabe4 Aufgabe5 Aufgabe6 Aufgabe7 Aufgabe8 ▲Nach oben▲