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

Ziele:

In einer ersten Begegnung mit KompoZer wird eine Webseite mit Texten in zwei Containern und einem Textlink erstellt.

Vorgehensweise:

Die Aufgabe wird mit ihren Aufträgen a) bis z) in KompoZer durchgenommen. Erledigte Aufträge werden einfach gelöscht und am Ende steht das Ergebnis, eine fertige einfache Webseite. Aufgabe meint eine ganze Seite wie diese hier, an deren Ende eine neue Webseite entstanden ist. Auftrag meint einen Absatz a), b), c) usw. Anleitung meint die Fundstelle in der Cooke/Klose-Anleitung, die mit den Aufgaben hier ergänzt wird.

Aufgabe:

a) Dieser Text wird von dir im großen Fenster von KompoZer betrachtet. (Anleitung - Blatt 7 - 2.4).
Wenn du diesen Text stattdessen mit deinem Browser betrachtest, kannst du nicht die Aufträge mit KompoZer ausführen. Der Text im Browser kann aber als Merkzettel mit dem ursprünglichen gesamten Text dienen, warum nicht.
Lade spätestens jetzt mit KompoZer diese Seite aus dem Internet.
KompoZer Menü 'Datei' / 'Webadresse öffen' / Dialog 'Neue Seite oder Vorlage erstellen' URL eingeben www.elew.de/kurs1/seite02.html/ Schaltfläche 'Erstellen'.

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

c) Diese Seite noch einmal speichern. An gleicher Stelle, als dein Ergebnis 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, heute "seite02a.html" oder auch dein Zwischenergebnis verwerfen und mit "seite??.html" von deiner Festplatte noch einmal beginnen.
KompoZer Menü 'Datei' / 'Speichern unter ...' / "seite02a.html".

d) Den ganzen Kopf dieser Seite bis hierher brauchst du nicht mehr für dein Ergebnis 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 getan (den Text hier drüber gelöscht) und das rote Symbol erinnert daran, dass das Ergebnis noch nicht gesichert ist. Jetzt das Ergebnis sichern, mit dem Tastaturkürzel [Strg]+[S] (die Steuerungstaste Strg festhalten und S tippen.) Im Menü 'Datei' findest du hinter 'Speichern' das passende Tastaturkürzel. Bei vielen anderen Befehlen gibt es auch solche.
Die rote Diskette ist verschwunden. Ein Leerzeichen hier einfügen und sie ist wieder da, [Strg]+[S] und sie ist wieder weg. Simpel aber wichtig. Zwischenergebnisse kann Mensch nicht oft genug sichern und hier wird das nur manchmal wieder erwähnt.

f) Auftrag e) löschen. Das linke Fenster von KompoZer ist die noch leere Seitenverwaltung. Die wird jetzt weggeschaltet. (Anleitung - Blatt 9 - 3.1).
KompoZer 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 über diesem Fenster, an der Breitenangabe mit so-und-soviel px zu erkennen, mit der Maus an der rechten Kante anpacken und nach innen verkleinern bis die Breitenangabe 800px lautet. Hast du jetzt schon ein schmaleres Fenster als 800px, dann nimm zwei Drittel deiner Breite.

h) Bis jetzt hast du im Editiermodus 'Normal' gearbeitet. Die Editiermodus-Symbolleiste unten zeigt die vier Register der Editier-Modi. (Anleitung - Blatt 9 und 10 - Abbildung).
Im Quelltext hat KompoZer deine Linealverschiebung in Code verwandelt. Lies h) ganz zu Ende und wechsel am Ende von h) in den Quelltext und komm nach Erledigung für den nächsten Auftrag wieder hierher in den Editiermodus 'Normal' zurück.
Gehe im Quelltext ganz nach oben, um bei <body> in deinem Quelltext, wahrscheinlich auch bei dir in Zeile 8 nachzusehen. Lösche im Quelltext zwischen den spitzen Klammern von body das style="width: 800px;" wieder aus, bis nur noch <body> übrigbleibt.

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 und damit für den Code style="width: 800px;" gesorgt.)
Du kannst in KompoZer im Editiermodus 'Normal' arbeiten und im Editiermodus 'Quelltext'. Das Wechseln hast du auch schon vorgenommen. Wechsel noch einmal in den Quelltext und speicher dort mit [Strg]-[S]. KompoZer präsentiert nach dem Speichern immer den Editiermodus 'Normal'.
Lösche alles hier drüber inklusive Auftrag i).

j) Jetzt ein Wort zu <body>. In der Statuszeile ganz unten ist <body>  zu sehen.
<body>  ist ein Tag (Englisch, ausgesprochen täg, auf Deutsch Kennzeichen/Etikett), der den Körper einer Webseite einleitet. Alles, was dein Besucher im Browser sieht, steht als Code im Körper der Webseite, auf <body>  folgend. Ein Tag in der Informatik enthält Daten und teilt mit, wie diese Daten ausgezeichnet werden.
Jetzt ein Wort zum Format Breite. Durch das Verschieben des Lineals hast du die Webseite auf die Breite von 800 Pixeln eingestellt. Der dazu notwendige Style ist in den Tag eingefügt worden. Er ist ein Inline Style. Als Nächstes wird ein anderer Inline Style in eingefügt, einer, der den Text der ganzen Webseite in Farbe setzt.

k) Den <body>-Tag in der Statuszeile rechtsklicken und im Kontextmenü 'Inline Styles' wählen. Das Dialogfenster 'Inline Styles' erscheint. Du kannst das Dialogfenster mit der Maus am blauen bzw. braunen  Balken oben packen und verschieben, damit du das hier weiterhin im Auge behalten kannst.
Register 'Text' oben wählen. Untere Hälfte links 'Farbe' eintragen. Nimm "gold", "green", "red" und du siehst sofort das Ergebnis. (WYSIWYG = Was du siehst ist was du kriegst). Nimm am Ende "blue" und 'OK'.
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 genau wie immer. Speicher auch regelmäßig dein Ergebnis.
Die Webseite soll links zwei blaue Quadrate mit Lorem-ipsum-Text erhalten.
Die Quadrate sollen <div>-Container sein. Innerhalb eines <div>s kann jedes beliebige Element eingesetzt werden. (Anleitung - Blatt 87 - 4.5)

m) 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 Mauszeiger außerhalb des <div> und die Statuszeile enthält nur das <body>-Tag. Klicke in den Container irgendwo und das <div> erscheint wieder. Linksklicke auf das <div> in der Statuszeile und der ganze Container wird ausgewählt. Lösche nicht diesen mit einer roten Linie gekennzeichneten Container, so wie die erledigten Aufträge. Er ist Teil des Ergebnisses.

n) Markiere das <div> durch Linksklick in der Statuszeile und wechsel in den Editiermodus 'Quelltext'. Bei dieser Art und Weise in den Quelltext zu wechseln, ist der <div>-Container im Quelltext auch markiert und leicht zu finden. Komm wieder in den Editiermodus 'Normal' zurück.

o) Im Quelltext war zu sehen, dass der Text von "Markiere" bis zum Punkt eingeschlossen war von zwei Tags, das öffnende <div> und das schließende </div>. Der ganze Container inklusive der beiden Tags ist ein Element.

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 und die folgenden dann auch.
In einer Zeile mit <div></div><div></div><div></div> sind drei Container aneinander. Ein Container wird geöffnet und wieder geschlossen, und das dreimal. Am Ende der Aufgabe stehen zwei Container im Körper von <body> bis </body> hintereinander und ein weiterer innerhalb des zweiten.

p) Setze unter den <div>-Container eine Leerzeile und markiere hier das erste Wort "Setze". Ein Wort ist genug für den zweiten <div>-Container. Wähle wieder in der Auswahlliste 'Absatzformat auswählen' ganz unten 'Generic container <div>. Der Container umschließt nicht nur die Markierung von "Setze", sondern den ganzen Absatz. Das soll so sein. Lösche die Texte aus den div-Containern außer jeweils ein Wort. Etwas soll zum Anklicken übrig bleiben.
Lasse über und unter jedem Container eine Leerzeile und lösche alles außerhalb der Container bis p) einschließlich.

Kopiere den Auftrag q) in jeden der beiden Container, denn sonst sind die Vorgaben vielleicht nicht mehr in Reichweite deines Bildfensters.

q) Klicke in den Container und rechtsklicke auf <div> in der Statuszeile. Wähle im Kontextmenü 'Inline Styles' und im Dialogfenster 'Inline Styles' das Register 'Text'. Das Dialogfenster lässt sich am oberen Balken verschieben, so dass du das Folgende weiterhin lesen kannst.
Trage als Schriftgröße: 10pt ein. Wähle das Register 'Box'. Trage ein oder wähle durch Aufblättern aus: Breite: 300px und Höhe: 300px für die Größe,
Innenabstand für alle vier Richtungen: 10px, um den Text innen um 10 Pixel vom Rand fernzuhalten.
Während der Eingabe sind die Änderungen schon zu beobachten. OK. Wiederhole das für den zweiten Container.

r) Ersetze den erledigten Auftrag q) im oberen und unteren <div>-Container durch den Text der Vorschläge hier:

Rechtsklicke wieder in der Statuszeile in den zugehörigen <div>-Tag, wähle 'Inline Styles' und dann das Register 'Begrenzungen'. Das Häkchen für 'Alle vier Seiten...' erlaubt, mit nur einer Angabe für oben alle vier Begrenzungen an den vier Seiten festzulegen. Das soll geschehen mit:
Oben: solid, Breite: 1px und Farbe: blue. Abschließend OK. Wiederhole das für den anderen Container.

s) Lösche alle Aufträge bis s) einsschließlich und die Texte in den Containern. Löscht du zuviel, machst du den Fehler mit [Strg]+[Z] rückgängig.

t) Hier steht ein "Lorem-ipsum"-Text für den oberen 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 diesen Text dort hinein. Lass den Mauszeiger wo er im Text des Containers gerade steht und richte den Text mit dem button 'Im Blocksatz ausrichten' in der Format-Symbolleiste 2 im Blocksatz aus. (Anleitung - Blatt 9 - Bild) aus. Lösche  t).

u) Hier steht ein "Lorem-ipsum"-Text für den unteren 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.

Füge diesen ein und richte den Text wieder mit dem button 'Im Blocksatz ausrichten' in der Format-Symbolleiste 2 im Blocksatz aus.
Lösche alle Aufträge einschließlich u).

v) Statt des Lorem-ipsum Textes könnte auch der Scherz stehen: " Diese Webseite ist das Ende des Internets. Du hast das Ende im Internet erreicht, weil es von hier aus nicht mehr weiter geht!".
Klar, es gibt noch keinen Link aus der jetzt erstellten Webseite heraus. Das muss noch ergänzt werden.
Speicher diese Seite als Zielseite "seite03.html" ab. Nur als Beispiel ist seite03.html vorläufig diejenige, zu der diese hier weiterleitet. Du erkennst die Zielseite später beim Probieren am halbfertigen Aussehen.
Speicher diese Seite, die jetzt einen neuen Namen hat, zur Fortsetzung der Aufträge als die altbekannte "seite02a.html" ab und überschreibe damit die vorhandene gleiche Datei.

w) Du bist wieder in "seite02a.html". Lösche alle Aufträge bis zu dieser Zeile einschließlich.
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 neue "Weiter"-Container ist perfekt markiert. Diese Markierung beibehalten.

y) Dort wird ein Link auf Seite 3 eingefügt. Menü Einfügen / Link (Das wird oft gebraucht, Tastaturkürzel [Ctrl]-[L] für das nächste Mal merken.)
Im Dialogfenster 'Link-Eigenschaften steht schon der Link-Text ausgefüllt als oberster Eintrag drin.
Mit dem kleinen Ordnersymbol rechts außen bei 'Link-Adresse' das Verzeichnis durchsuchen und die von dir gespeicherte "seite03.html" anklicken und 'Öffnen'. Dann OK.

z) Diese Seite zu Ende lesen und dann alles bis auf die beiden Quadrate 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. 

Glückwunsch zu der Seite. Zum Vergleich gibt es im Kurs1 im Internet auch die Seite seite02a.html, so wie sie sein sollte.
Weiter geht es mit Seite 3. Viel Spaß