Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1, Version 6 vom 4.1.2010.
Übung 0 , Zum Start eine Einführung ohne jede Voraussetzung

   Willkommen:

Kompozer ist ein Editor für alle, die Webseiten ohne Programmierkenntnisse erstellen wollen. Dieser Kurs1a
erklärt die Benutzung von KompoZer 0.8b1, indem KompoZer und nur KompoZer verwendet wird.

Im Kurs1a wird auch HTML und CSS erklärt, wenn es und nur soweit es berührt wird. Der Kurs1a ist deshalb
kein HTML oder CSS-Kurs, aber ein Webseiten-Produktionskurs für Anfänger in Webseitengestaltung, bzw.
ein KompoZer-Benutzungskurs mit HTML und CSS.

Diese Seite muss zum Bearbeiten mit KompoZer 08b1 geladen sein. Diese Übung 1 kommt so schmucklos
daher, weil alles, was im Kurs zu sehen und eingesetzt wird, vorher eingeführt wird. Da noch nichts besprochen
wurde, erscheint hier nur blanker Text mit einem Zeilenumbruch am Ende jeder Zeile.

   Der Aufbau des Kurses

Der Kurs1a ist linear, also so gedacht, dass alle Übungen hintereinander durchgearbeitet werden. Sprünge sind
nicht vorgesehen. Einmal Erklärtes wird gelegentlich erst öfter, dann seltener wiederholt, so dass Rückverweise
auch entfallen. Begleitet wird das durch eine immerwährende Garantie vom Autor, dass alles funktioniert.
Garantieeinlösung öffentlich per Gästebuch http://www.huscholz.de/cgi-bin/guestbook.php.cgi oder privat per
E-Mail an einsa att huscholz punkt de. Also melde dich ruhig! Das Du ist hier das Internet-Du, also wunder dich
bitte nicht, wie du hier angeredet wirst.

Jede Übung muss zum Bearbeiten mit KompoZer 0.8b1 geladen werden. Also spätestens jetzt den
KompoZer 0.8b1 starten und die Übung, wenn noch nicht geschehen, wie in der Aktionszeile folgt laden:

Aktionszeile:
| Menü 'Datei' | 'Webadresse öffnen' | Im Dialog 'Neue Seite oder Vorlage erstellen' die Webadresse eingeben:
"http://www.elew.de/kurs1a/uebung00.html" | Auswahlliste 'Erstellen in:' auf 'Neuer Tab' setzen | Schaltfläche 'Erstellen'. |

Die Aktionszeile ist ein Element des Kurses. Der Kurs besteht aus Übungen, an deren Ende immer eine
Webseite entsteht. Die Übungen bestehen aus Aufträgen und jeder Auftrag besteht aus Beschreibung und
Aktionszeile. Die Aktionszeile setzt sich aus den einzelnen Schritten zusammen. Jeder Schritt ist mit einem
senkrechten Strich eingekastelt. Im Beispiel oben | Menü 'Datei' | ist ein Schritt, wo das KompoZer-Menü
'Datei' mit der linken Maustaste anzuklicken ist.
Begriffe aus den Menüs und Dialogen sind in einfache Anführungszeichen gesetzt. Im Beispiel ist das das Wort
'Datei', so wie es auch im Menü steht. Eingaben und einzugebende Texte sind in doppelte Anführungszeichen
gesetzt. Im Beispiel ist das die Webadresse, die einzugeben ist.

Wenn du die Aufträge erledigst, versuche, dich immer mehr von den Aktionszeilen zu lösen. Damit kannst du dir
beweisen, dass du KompoZer für einen Auftrag schon beherrscht. Denn selbst gegen Ende des Kurses bleiben
die Aktionszeilen ausführlich und umfassend, obwohl du das dann sicher nicht mehr brauchst. Es kann nämlich
sein, dass der Kurs nach langer Abwesenheit weiter hinten begonnen wird, oder ein Zufallsbesucher sich für
diese Schritte interessiert. Auch dann soll der Kurs1a funktionieren.

   Die Vorgehensweise:

Die mit KompoZer geladene neue Übung wird zuerst unter einem neuen Namen gespeichert. Dadurch kann mit
dem Original immer unverändert von vorne begonnen werden. Oder nach einer etwaigen Pause wird an der
unterbrochenen Stelle mit der Datei neuen Namens die Übung fortgesetzt. Ist ein Auftrag erledigt, wird der
abgeschlossene Auftrag jedesmal gelöscht und der nächste rückt ganz nach oben.

Und ab hier geht es los:

Auftrag a)     Der Auftrag rückt nach oben

Beschreibung:
Steht ein Auftrag ganz oben, dann können die Aktionen und Eingaben auch gut gelesen werden, wenn sich
Menüs öffnen oder Dialoge. Somit wird vermieden, dass gescrollt werden muss und die Übersicht verloren
geht. Damit das auch jetzt so ist, wird der gesamte Text oberhalb des Auftrags a) mit der Maus markiert und
gelöscht. Danach ist der Auftrag a) erfüllt und wird auch gelöscht. Dadurch rückt b) nach oben. Wird die
Leerzeile über b) auch gelöscht, rückt b) sogar ganz nach oben.

Aktionszeile:
| Den gesamten Text oberhalb des Auftrags a) mit der Maus markieren | Mit der Taste [Entf] löschen | Auftrag a)
ebenfalls entfernen |

b)     Format-Symbolleiste 2

Es ist unnötig, einen Auftrag, eine Beschreibung und eine Aktionszeile als solche auszuweisen. Mit "b) " hat der
Auftrag b) seine Hervorhebung, und was dann folgt, ist immer dasselbe, eine Beschreibung und eine
Aktionszeile. Diese Ankündigungen fallen also gleich wieder ab sofort weg. Die Struktur sollte also klar sein.
In diesem Auftrag wird die 'Format-Symbolleiste 2' aus- und eingeschaltet, um sicherzustellen, dass KompoZer
sie auch bei dir anzeigt. Das Aus- und Einschalten geschieht im Menü 'Ansicht' mit dem Untermenü
'Anzeigen/verstecken' und dem Setzen oder Entfernen des Häkchens bei 'Format-Symbolleiste 2'. Das geht
auch ohne Aktionszeile, aber die gehört immer dazu.

| Menü 'Ansicht' | 'Anzeigen/verstecken' | Häkchen bei 'Format-Symbolleiste 2' entfernen oder setzen, je nach
Vorhandensein | Schauen, was passiert ist | Die vorigen Schritte wiederholen und am Ende das Häkchen gesetzt
lassen |

Der Auftrag b) ist erfüllt, also löschen und c) nach oben rutschen lassen.
 
c) Schriftschnitt fett

Die Überschrift des Auftrages wird hervorgehoben, damit das Einerlei des blanken Textes endlich zu Ende geht.
Hierzu die Überschrift "c) Schriftschnitt fett" mit der Maus markieren und oben in der 'Format-Symbolleiste 2'
die Schaltfläche 'Fett', diejenige mit dem B, linksklicken. Dass die Schaltfläche 'Fett' heißt, ist zu erkennen,
wenn der Mauszeiger etwas länger darauf gehalten wird. Da das nun vorgeführt ist, folgen alle weiteren Aufträge
mit einer fetten Überschrift.

| Mit der Maus "c) Schriftschnitt fett" markieren | Die Schaltfläche 'Fett' linksklicken |

d)  Seite sichern

Diese Seite wird unter dem Namen "ziel00.html" auf der Festplatte gespeichert, z.B. auf dem USB-Stick unter
"F:\kurs1a\ziel00.html". Bei allen Namen, ob für Verzeichnisse, Bilder oder auch Webseiten wie hier dem
"ziel00.html", ist es gängige Praxis, nur Kleinbuchstaben und keine Umlaute, keine Sonder- und keine
Leerzeichen zu verwenden.

| Menü 'Datei' | 'Speichern unter...' | 'Name:' "ziel00.html" | Ort auf der Festplatte aufsuchen, Schaltfläche
'Speichern' |

e) Rückgängig und rückgängig von rückgängig

Der Auftrag e) steht nun oben. Mit [Strg]-[z] kann das rückgängig gemacht werden, falls etwas schief ging.
Rückgängig von Rückgängig geht mit [Strg]-[y].
(Beim Mac gilt für den Widerruf eines Befehls "Apfel+z" und für den Widerruf des Widerrufs "Shift+Apfel+z".)
Beides, [Strg]-[z] und [Strg]-[y] jetzt probieren und mit e) ganz
oben damit wieder aufhören. Danach e) für immer löschen und mit [Strg]-[s] diese Datei "ziel00.html" sichern.

f) Seitenverwaltung ausschalten

Dieser Text wird im großen Fenster von KompoZer betrachtet. Ist links eine Spalte 'Seitenverwaltung' zu sehen,
wird diese mit der Funktionstaste [F9] bis zu einer späteren Übung ausgeblendet. Jetzt die Funktionstaste [F9]
mehrmals mit zwischendurch einer kleinen Atempause für KompoZers benutzen, um sicher zu sein, wovon die
Rede ist. Am Ende die Seitenverwaltung ausblenden und diesen Auftrag löschen.

| [F9] | Den ersten Schritt wiederholen und schauen, was geschieht, am Ende die Seitenverwaltung abschalten |

g) Editier-Symbolleiste

Das KompoZer-Fenster kann auch horizontal geteilt sein. Das Register 'Teilen' steht unten links. Vielleicht ist
unten kein Register 'Teilen' zu sehen. Dann muss diese Symbolleiste erst noch per Häkchen erlaubt werden.
Dieses Häkchen im Menü 'Ansicht', Untermenü 'Anzeigen/verstecken' jetzt testen. Mit Ein- und Ausschalten soll
die Editier-Symbolleiste auffällig werden.

| Menü 'Ansicht' | 'Anzeigen/verstecken' | Häkchen bei 'Editiermodus-Symbolleiste' von vorhanden auf nicht
vorhanden ändern oder umgekehrt | Die beiden Schritte vorher wiederholen und am Ende die 'Editiermodus-
Symbolleiste' eingeschaltet lassen |

h) Register 'Teilen'

Das Fenster soll geteilt werden. Dazu in der 'Editiermodus-Symbolleiste' das Register 'Teilen' anklicken. Der
Begriff Editiermodus wird seit den Anfangstagen von Nvu im Deutschen verwendet, hier im Kurs1a ist das
gemäß KompoZer-Menü ganz oben eine Ansicht und deshalb ist hier von der WYSIWYG-Ansicht die Rede
oder der Quelltext-Ansicht. Die Trennungslinie zwischen den Ansichten mit der Maus bis zur Bildmitte
hochschieben. Zu sehen ist oben die WYSIWYG-Ansicht (what you see is what you get-Ansicht) der Seite und
unten die Quelltext-Ansicht. Im KompoZer-Menü ist das auch registriert.

| In der Editiermodus-Symbolleiste das Register 'Teilen' linksklicken | Die Trennungslinie mit der Maus in die
Mitte hochschieben |

Wer in das Menü 'Ansichten' klickt, sieht 'Normale Ansicht' und 'Teilen' markiert . Wird in diesem Menü auf
'WYSIWYG linksgeklickt, wird dadurch eine eingeschaltete Quelltext-Ansicht ausgeblendet. Per Register
'Teilen' erscheinen beide Ansichten, die Register unten links und rechts davon ergeben die jeweils andere
Ansicht allein. In alle drei Ansichten kann der Mauszeiger hineingesetzt werden, in allen drei Ansichten kann
editiert werden.

| Menü 'Ansicht' | Kontrollieren, welche Menüs markiert sind | Menü 'Ansicht' , das Menü kann so verlassen
werden, bei Irrtum oder wenn, wie hier, nichts weiter zu tun ist |

Auftrag h) ist erledigt. Diesen Auftrag also löschen und dann die Übung mit [Strg]-[s] speichern. Das Löschen
erledigter Aufträge wird in dieser Übung nicht mehr erwähnt.

i) Drei Varianten von WYSIWYG

Die WYSIWYG-Ansicht hat ihrerseits noch drei Varianten. Du siehst die Auswahlliste in der 'Editiermodus-
Symbolleiste' ganz rechts unten. Vorläufig bleiben wir in 'Normal'. Beim Aufblättern der Auswahl ist
'HTML-Tags' zu sehen. Das wird später verwendet, wenn Tags erklärt und geläufig sind. 'Vorschau' nimmt
Hilfslinien weg, mehr nicht.

Mit der Vorschau-Ansicht ist WYSIWYG auch wirklich WYSIWYG und ohne Hilflslinien, aber keine Vorführung
der "Mechaniken" von "What you get". Eine richtige Vorführung deiner Webseite mit funktionierenden Sprüngen
auf andere Seiten gibt es nicht im KompoZer, sondern nur mit einem Browser. Dazu hat KompoZer ganz oben in
der 'Bearbeitungs-Symbolleiste' das Schaltsymbol 'Vorschau' mit der Bedeutung Vorführung. Mit diesem Symbol
wird dein Browser gestartet, und der zeigt dann die Seite auch mit  funktionierenden Links, soweit vorhanden.

Stelle die Auswahlliste auf 'Normal'. Statt WYSIWYG-Ansicht ist ab jetzt einfach von Normal-Ansicht die Rede.

| Editiermodus-Symbolleiste| Auswahlliste rechts, 'Normal' |

j) Seite mit neuem Titel sichern

Zu sehen ist oben ein Tab mit "KompoZer Kurs1a Startseite" Links im Tab kann noch eine rote Diskette als
Warnung stehen, dass deine Arbeit noch nicht gespeichert ist. Nach dem Speichern ist die rote Diskette weg,
nach einer Änderung der Seite ist sie wieder da.

Füge in diese Zeile irgendwo hier ein Leerzeichen ein, und die rote Warndiskette ist zu sehen. Speicher mit
[Strg]+[s] und die Diskette verschwindet.

| Leerzeichen einfügen | Diskette entdecken | [Strg]+[s] |

Die Datei ist gesichert, die rote kleine Diskette ist weg.

Nun ist diese Seite mit all den erledigten und gelöschten Aufträgen a) bis i) inzwischen ja schon ein
Teil-Ergebnis. Deshalb wird der Titel über das Menü 'Format', Untermenü 'Seitentitel und -
einstellungen' auf "Ziel 0" geändert.

| Menü 'Format' | 'Seitentitel und - einstellungen' | Dialog 'Seiteneigenschaften' | Titel: "Ziel 0" | Autor: dein Name |
Beschreibung: "Formatierter Text" | OK| [Strg]+[s] |

Im Tab oben steht nun "Ziel 0". Sind mehrere Seiten geladen, sind in der Normal-Ansicht alle geöffneten Seiten
an ihren Titeln in den Tabs zu erkennen.

k) Schriftart Helvetica, Arial

Jetzt folgt nach dem einfetten der Auftragsüberschriften eine weitere "WYSIWYG"-Webseitenerstellung ohne
Code-Bearbeitung. Dazu wurde diese Übung 0 erfunden. Mit KompoZer lässt sich das aber verbessern.
Warum und Wie erklärt dann die Übung 1. Mit dem Blick auf den Quelltext bist du seit Auftrag h) ja schon
vertraut.
Im Menü 'Format' ist das erste Untermenü die 'Schriftart'. Die erste Auswahl davon wird auf die gesamte Seite
angewendet. Per Menü 'Bearbeiten' wird alles markiert und dann die Schriftart der ganzen Seite zugewiesen.

| Menü 'Bearbeiten' | 'Alles markieren' | Menü 'Format' | 'Schriftart' | 'Helvetica, Arial' |

l) Quelltext synchronisieren

Mit Blick auf den Quelltext ist zu erkennen, dass KompoZer eine Fleißarbeit ausgeführt hat. Die Font-Familie
wurde bei allen Absätzen und Zeilenumbrüchen eingefügt. Das kann auch mit [Strg]+[z] rückgängig gemacht
werden. Rückgängig von rückgängig geht auch. Aber die Reaktion bleibt im Quelltext aus. Zu erwarten ist, dass
KompoZer das noch eingebaut bekommen wird. Bis dahin kann von Hand die Synchronisation erzwungen
werden: Einfach nach einer Änderung mit [Strg]+[z] z.B. oder [Strg]+[y] in der Normalansicht in den Quelltext
unten klicken und dann wieder in die Normalansicht. Da im Quelltext auch geändert werden kann, erfolgt die
Synchronisation dann umgekehrt. Einfach in die Normalansicht klicken und dann wieder in den Quelltext.

| Rückgängig machen der Schriftartzuweisung mit [Strg]+[z] | Unten in den Quelltext klicken | In die
Normalansicht klicken | [Strg]+[y] | Unten in den Quelltext klicken | In die Normalansicht klicken |

m) Kleinere Schriftgröße

Im Menü 'Bearbeiten' steht neben dem Untermenü von 'Alles markieren' wie so oft in den Menüs ein Tastatur-
Kürzel, hier [Strg]+[A]. Der geübte Benutzer weiß, dass es das große und das kleine "A" sein kann.  Mit diesem
Tastaturkürzel alles markieren und die Schriftgröße mit der Schaltfläche  'Kleinere Schriftgröße' um eine
Stufe verkleinern. Die Schaltfläche ist die mit dem kleineren A und dem Abwärtspfeil, zweite links von 'Fett'.

| In die Normalansicht klicken | [Strg]+[a] | Schaltfläche  'Kleinere Schriftgröße' |

n) Blaue Schrift

Mit der Schaltfläche 'Textfarbe auswählen', vierte von links von 'Fett' aus gesehen, wird ein Dialogfenster mit
einer Farbpalette geöffnet. Unter 'Name:',  unten rechts oberhalb von 'Abbrechen', wird "blue" eingetragen. Im
Dialog ist dann zu sehen, dass die Farbanteile für Rot und Grün gleich Null sind, was in der hexadezimalen Form
mit #0000FF notiert wird, zweimal nichts mit 00 und einmal Maximalwert mit FF. Mit 'OK' wird das bestätigt.

| In die Normalansicht klicken | [Strg]+[a] | Schaltfläche  'Textfarbe auswählen' | Unter 'Name:' "blue" eintragen |
OK |

o) Link aus der Seite heraus

Von der Webseite http://la.wikisource.org/wiki/Lorem_ipsum wurde der Text unten übernommen, der den
Inhalt der ersten fertigen Webseite bildet. Damit ein Besucher von der Seite aus weiterkommt, erhält die Seite
noch einen Link auf die Wikipediaquelle. Hierzu wird die Webadresse mit der Maus vom "http" bis zum "ipsum"
einschließlich markiert und mit dem Tastaturkürzel [Strg]+[L] wird der Dialog 'Link-Eigenschaften' aufgerufen.
Da der Link schon markiert ist, hat KompoZer ihn schon erfasst und es muss nur noch mit OK bestätigt werden.
Der Auftrag o) wird gelöscht aber der Link soll dabei zur Weiterverwendung erhalten bleiben.

| "http://la.wikisource.org/wiki/Lorem_ipsum" markieren | [Strg]+[L] | OK |

p) Abschluss Übung 0

Wenn dieser letzte Auftrag verschwunden ist, bleibt nur noch das fertige Beispiel übrig. Und das soll so
aussehen: Ganz oben steht die fette Überschrift. Darunter steht die Klammer "(von  )". Hinter "von" wird der Link
von oben mit der Maus hineingeschoben und etwaige Leerzeilen oberhalb der Überschrift gelöscht. Fertig. Zum
Vergleich dient die Seite http://www.elew.de/kurs1a/ziel00.html. Danke sehr!

Irgendein blauer Fließtext als Beispielseite
(von  )

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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.

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 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.