Webseitengestaltung mit KompoZer und der Cooke/Klose-Anleitung
unter Windows für Firefox ab 2, Opera ab 9 und Internet Explorer ab 6
- Seite 2 -

Ziele: In einer ersten Begegnung mit KompoZer wird eine Webseite mit Text und einem Textlink erstellt.

Erklärung: Da es keine Vorkenntnise in der Websseitengestaltung gibt, muss diese Seite ihre eigene Herstellung mit KompoZer plausibel machen.

Vorgehensweise: Die Aufgabe wird mit ihren Aufträgen: a) bis z) in KompoZer durchgenommen und am Ende gibt es das Ergebnis, eine Webseite mit Text und Textlink.

Aufgabe:
a) Dieser Text wird von dir im großen Fenster von KompoZer betrachtet. (Anleitung - Blatt 7 - 2.4).
Wenn du diesen Text stattdessen im Browser betrachtest, kannst du nicht die Aufträge ausführen. Der Text im Browser hilft aber als Merkzettel, wenn in KompoZer mal die Übersicht verloren geht.
Starte dann bitte KompoZer und lade diese Seite mit
Menü Datei / Webadresse öffen / Dialog ‚Neue Seite oder Vorlage erstellen’ URL eingeben www.elew.de/kurs1/seite02.html / Schaltfläche ‚Erstellen’.

b) Diese Seite auf deiner Festplatte speichern. Z.B. auf dem USB-Stick unter F:\kurs1\seite02.html. (Anleitung - Blatt 8 - 2.5).
Menü Datei / Speichern.

c) Diese Seite noch einmal speichern, an gleicher Stelle, als deine erste Webseite aus diesem Kurs1 mit dem Namen seite02a.html. Diese doppelte Speicherei soll im ganzen Kurs beibehalten werden. Dadurch kannst du immer die Aufgabe unterbrechen und mit deinem Zwischergebnis seite??a.html weiter arbeiten, oder auch dein Ergebnis verwerfen und mit seite??.html von deiner Festplatte noch einmal beginnen.
Menü Datei / Speichern unter ... / seite02a.html.

d) Den ganzen Kopf dieser Seite bis hierher brauchst du nicht mehr für dein Ergebnis seite02a.html und kannst das alles, einschließlich Auftrag d) hier, markieren und löschen.

e) Im Seitenregister hier senkrecht drüber steht KompoZer-Kurs1 Seite 2. Davor ist links eine rote Diskette zu sehen. Du hast etwas mit KompoZer produziert (den Text hier drüber gelöscht) und das rote Symbol erinnert daran, dass das Ergebnis noch nicht gesichert ist. Jetzt das Ergebnis wieder sichern, mit dem Tastaturkürzel [Strg]+[S] (die Steuerungstaste Strg festhalten und S tippen.) Im Menü Datei steht hinter 'Speichern' das passende Tastaturkürzel, wie bei vielen anderen Befehlen auch.
Die rote Diskette ist verschwunden. - Ein Leerzeichen eingeben und sie ist wieder da - [Strg]+[S] und sie ist wieder weg. Lächerlich, aber Zwischenergebnisse kann Mensch nicht oft genug sichern und hier wird das nie wieder erwähnt.

f) Auftrag e) löschen. Das Fenster links von KompoZer ist die noch leere Seitenverwaltung. Die wird jetzt weggeschaltet. (Anleitung - Blatt 9 - 3.1).
Menü Ansicht / Anzeigen-Verstecken /Seitenverwaltung oder Funktionstaste [F9].
Der Editierbereich wird breiter. Der hier vorhandene Fließtext nimmt sofort die volle Fensterbreite ein.

g)  Die Textbreite soll mit 800 Pixeln Breite festgelegt werden. (Anleitung - Blatt 19 - 3.4.3.1) Das Lineal rechts oben mit der Maus nach innen verkleinern bis die Breitenangabe 800px lautet.

h) Bis jetzt hast du im Editiermodus 'Normal gearbeitet. Die zweite Symbolleiste von unten zeigt die vier Register der Editier-Modi. (Anleitung - Blatt 9 und 10 -Abbildung). Im Quelltext hat KompoZer deine Linealverschiebung in Code verwandelt. Wechsel bitte in den Quelltext und und komm nach Erledigung wieder hierher in den Editiermodus 'Normal' zurück.
Gehe im Quelltext ganz nach oben, um nach <body style="width: 800px;"> zu sehen. Lösche im Quelltext den inline style wieder aus bis <body> übrigbleibt. Als Merkzettel kann das Browserfenster mit www.elew/kurs1/seit02.html dienen.

i) Du kannst im Quelltext von Hand codieren (du hast gelöscht) oder mit den Hilfsmitteln von KompoZer ohne Codieren auskommen. (Du hast das Lineal verschoben.)
Lösche alles hier drüber inklusive Auftrag i).

j) Bei <body style="width: 800px;"> ist alles nach style inklusive dem Wort style ein inline style von body.
Die beste Methode zum Einsetzen von inline styles soll gezeigt werden mit dem Einfärben des <body> in Schwarz und des Textes in Gelb. (Anleitung - Blatt 54 - 3.12)
In der Statuszeile, das ist die unterste Symbolleiste ist <body> zu sehen. <body> ist ein tag (Englisch, ausgesprochen täg, auf Deutsch Kennzeichen/Etikett), das den Körper einer Webseite einleitet. Erhält <body> die Hintergrundfarbe Schwarz, dann ist die ganze gruselige Webseite, ihr ganzer Körper schwarz. Das passiert jetzt. Aber vorher wird die Textfarbe des ganzen Körpers <body> geändert, damit du noch was lesen kannst.
<body> in der Statuszeile rechtsklicken und im Kontextmenü Inline styles wählen. Das Dialogfenster 'Inline Styles erscheint. Register Text oben wählen. Untere Hälfte links 'Farbe'  eintragen. Nimm "gold", green", blue" und du siehst sofort das Ergebnis. (WYSIWYG = Was du siehst ist was du kriegst). Nimm am Ende "red" und 'OK'.

k) Sei neugierig und sieh dir im Quelltext den neuen inline style für <body> an und komme wieder in den Modus 'Normal zurück'.

l) Lösche alles oben weg bis hierher.
Jetzt wird <body> schwarz. In der Statuszeile auf den tag <body> rechtsklicken und im Kontextmenü Inline styles wählen. Im Dialogfenster 'Inline Styles' das Register 'Hintergrund' wählen und als Farbe "black" eintragen. Dann das OK.
Zur Übung und wegen der besseren Lesbarkeit bitte den Inline Style von <body> auf die Textfarbe Weiß ändern:
<body> in der Statuszeile rechtsklicken und im Kontextmenü Inline styles wählen. Im Dialogfenster 'Inline Styles das Register Text wählen. Untere Hälfte links 'Farbe'  "white" eintragen.OK.

m) Die Webseite soll ganzseitig schwarz bleiben und auch die Textfarbe bleibt einheitlich weiß. Am Ende soll links oben und rechts unten ein weißes Quadrat etwas Text enthalten.
Die Quadrate sollen <div>-Container sein. Innerhalb eines <div>s kann jedes beliebige Element eingesetzt werden. (Anleitung - Blatt 87 - 4.5)

Markiere diese Zeile hier mit der Maus von "Markiere" bis zum Punkt am Ende.
Gehe zur Format-Symbolleiste, wo die Auswahlliste links "Normaler Text" anzeigt. Diese Auswahlliste hat den Namen 'Absatzformat auswählen'. Dieser Name wird durch einen tooltip angezeigt, wenn die Maus über der Liste etwas länger verweilt. Klicke in die Auswahlliste hinein.

Wähle ganz unten 'Generic container (div)'. Die Zeile ist noch immer markiert und unten in der Statuszeile taucht ein neuer tag auf, das <div>. Klicke hier drauf, in diese Textzeile hier, dann ist der Cursor außerhalb des <div> und die Statuszeile enthält nur das <body>. Klicke in den Container irgendwo und das <div> erscheint wieder. Linksklicke auf das <div> in der Statuszeile und der ganze Container wird ausgewählt.

n) Markiere das <div> durch Linksklick in der Statuszeile und wechsel in den Editiermodus 'Quelltext'. Mit dieser Methode ist der <div>-Container im Quelltext auch hervorgehoben und leicht zu finden.
Komm wieder in den Editiermodus 'Normal' zurück.

o) Im Quelltext war zu sehen, das der Text von Markiere bis zum Punkt eingeschlossen war von zwei tags, das öffnende <div> und das schließende </div>. In einer Quelltextzeile mit <div><div><div></div></div></div> sind drei Container ineinander. Dreimal wird ein Container geöffnet, ehe der innerste dann geschlossen wird. In einer Zeile mit <div></div><div></div><div></div> sind drei Container aneinander. Ein Container wird geöffent und wieder geschlossen, und das dreimal.
Zwischen <div> und </div> hat dann noch, wie schon gesagt, jedes beliebige Element Platz, auch mehrere <div>s.
Setze über das <div>, das den Text "Markiere...." enthält, einen Zeilenumbruch mit [Enter] und lösche alles darüber bis zu "...- 4.5)" weg. Über dem <div> bleibt dann eine Leerzeile.

p) Setze unter den <div>-Container eine Leerzeile und markiere  darunter "Gehe zur". Zwei Wörter, das reicht für das zweite <div>. Wähle wieder in der Auswahlliste 'Absatzformat auswählen' ganz unten 'Generic container <div>. Der Container umschließt nicht nur die Markierung, sondern den ganzen Absatz. Das soll so sein. Lösche aus diesem Container alle Wörter außer "Gehe". Etwas soll zum Anklicken zu sehen sein.
Lösche im anderen Container alles außer "Mark". Lasse über und unter jedem Container eine Leerzeile und lösch alles außerhalb der Container bis p) einschließlich. Die Webseite nimmt Form an.

q) Markiere den "Mark"-Container und rechtsklicke auf <div> in der Statuszeile. Wähle im Kontextmenü 'Inline styles' und im Dialogfenster 'Inline Styles' das Register 'Box'.
Trage ein oder wähle durch Aufblättern aus: Position: absolut, Breite: 300px, Höhe: 300px, Offsets links: 50px, Offsets unten: 50px, um den Container 50 Pixel von oben und von links absolut anzuordnen,
Innenabstand alle vier Richtungen: 10px, um den Text innen um 10 Pixel vom Rand fernzuhalten. Während der Eingabe sind die Änderungen schon zu beobachten. Kein OK, es geht mit dem Register 'Begrenzungen' weiter.

r) Register 'Begrenzungen wählen'. Das Häkchen für 'Alle vier Seiten...' erlaubt, mit einer Angabe für oben alle vier Seiten festzulegen. Das soll geschehen mit:
Oben: solid, Breite: 1px und Farbe: white. Abschließend OK.
Lösche jetzt nicht, denn der zweite Container erhält die gleichen inline styles, mit Ausnahme der Offsets.

s) Markiere den "Gehe"-Container und erzeuge die gleichen inline styles wie in o) und p), wähle aber die Offsets Rechts: 50px und Unten: 50px anstelle von Oben und Links.
Lösche alle Aufträge bis s) einschließlich.

t) Hier steht ein Lorem-ipsum Text für den "Mark"-Container:
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

Kopiere den dort hinein und richte den Text mit dem button 'Im Blocksatz ausrichten' in der Format-Symbolleiste 2 (Anleitung - Blatt 9 - Bild) aus.

u) Hier steht ein Lorem-ipsum Text für den "Gehe"-Container:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Kopiere den dort hinein und richte den Text mit dem button 'Im Blocksatz ausrichten' in der Format-Symbolleiste 2 aus.
Lösche alle Aufträge einschließlich u).

v) Die Webseite stellt das Ende des Internets dar. Statt des Lorem-ipsum Textes könnte auch der Scherz stehen: " Das ist das Ende des Internets. Von hier geht es nicht weiter!".
Es gibt noch keinen Link aus der erstellten Webseite heraus. Das muss noch ergänzt werden.
Speicher diese Seite ab und dann als seite03.html noch einmal. Seite03.html ist vorläufig die Sprungsdresse, die aus dieser Seite heraus führt. Du erkennst sie später an dem schrottigen Aussehen. Schließe dann die seite03.html und hole dir die aktuelle seite02a.html zurück.

w) Du bist wieder in seite02a.html.
Setze 5 Leerzeilen unter den Text im "Duis autem"-Container und schreibe: "Weiter mit Seite 3". Das richtest du mit dem button 'Rechts ausrichten' oben in der Format-Symbolleiste 2 dann rechts aus.

x) In die "Weiter mit Zeile 3"-Zeile klicken. Da ist ein <div> im <div> von KompoZer erzeugt worden, damit das Rechtsausrichten möglich wird. Der tag steht in der Statuszeile als letzter. Auf diesen Linksklicken und der ganze Container ist perfekt markiert. Diese Markierung beibehalten.

y) Dort wird ein Link auf Seite 3 eingefügt. Menü Einfügen / Link ( [Ctrl]-[L] für das nächste Mal merken, das wird oft gebraucht. ) Im Dialogfenster 'Link-Eigenschaften steht schon der Link-Text ausgefüllt drin.
Mit dem kleinen Ordnersymbol rechts außen bei 'Link-Adresse' das Verzeichnis durchsuchen und die seite03.html anklicken und 'Öffnen'. Dann OK. Den Textlink mit den beiden buttons 'Textfarbe auswählen' und 'Fett' in der Format-Symbolleiste 2 fett und gelb einstellen..

z) Jetzt noch den Lorem ipsum-Container nach oben holen. Oder zuerst einmal auf die Seite packen, um den Rest noch zu lesen.
KompoZer bietet für diese absolut positionierten Container ein Handgriff zum Verschieben an.
In den Container klicken und wenn der Mauszeiger zum Verschiebnkreuz wechselt einfach schieben.
Nach dem Lesen aber die inline styles Offsets auf oben und links 50px für das Lorem ipsum und
auf rechts und unten auf 50px für den Duis autem festlegen.

Alle restlichen Aufträge und Texte bis auf den Glückwunsch löschen und dann noch einmal speichern. Die Webseite ist fertig.

Hinweis: Der Link funktioniert nicht in KompoZer, oder besser, soll nicht in KompoZer funktionieren,
auch nicht im Editiermodus 'Vorschau' Jeder Test muss im Browser vorgenommen werden.
Zum testen immer oben in der Bearbeitungs-Symbolleiste auf den button 'Vorschau' klicken und damit die Seite im Browser starten.

Ergebnis: Eine schwarze Seite. Links oben könnte der Zweck erläutert und rechts unten der Kontakt angegeben sein.
Das Geübte bis hierher war:
- Webseite zur Bearbeitung laden,
- Webseite speichern und unter anderem Namen speichern,
- Inline styles verwenden
- <body> insgesamt schwarz färben, 
- alle Texte weiß färben,
- zwei weiße Quadrate um die Texte setzen,
- zwei Quadrate absolut ausrichten,
-zwei Quadrate in der Größe und im Abstand fixieren,
- Texte in einen <div>-Container setzen,
- Texte färben und fett setzen,
- einen Textlink setzen.

Etwas anderes hat dieser Auftrag auch nicht verwendet.

Besonderheit: Die Rahmen nehmen immer die Ecken ein, egal wie groß das Browserfenster des Besuchers eingestellt wird.

Glückwunsch zu der Seite. Zum Vergleich gibt es im Kurs1 auch die Seite seite02a.html, so wie sie sein sollte.