Webseitengestaltung mit Nvu/KompoZer
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
- Aufgabe 1 -

Willkommen:

Diese schlichte Seite folgt wie alle Seiten im Kurs1 dem Prinzip, nichts zu verwenden, was nicht im Kurs1 erklärt wird oder wurde. Deshalb gibt es hier noch keine Farbe und keine Bilder, jedoch Links und absatzweisen Fließtext, wie sie jedem Internetbesucher vertraut sind. Was es aber gibt, ist Hilfe bei Nichtfunktionieren. Hierzu einfach eine E-Mail an "kurs1 att huscholz punkt de" richten, oder falls kein E-Mailkontakt gewünscht, einen Kommentar in den aktuellen Blog zum Kurs1a mit Betreff "Zum Kurs1" eintragen. Je konkreter die Frage sich auf a), b), c) usw. bezieht, desto besser kann der Kurs1 repariert und die Zahl der Garantiefälle verringert werden. Diese Seite muss zum Bearbeiten mit Nvu oder KompoZer geladen sein. Für Besucher, die nur mal gucken, hier zwei Links, die nur im Browser funktionieren [Zurück zur Startseite] [Zur Aufgabe 2].

Ziel der Aufgabe 1:

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

Vorgehensweise:

Die Aufgabe 1 wird mit ihren Aufträgen a) bis y) mit Nvu oder KompoZer geladen und bearbeitet. 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 entsteht. Auftrag meint einen Absatz a), b), c) usw. Die beiden Webeditoren Nvu und KompoZer werden ab jetzt gemeinsam KompoZer genannt.

Aufträge:

a) Dieser Text wird von dir im großen Fenster von KompoZer betrachtet.
Wenn du diesen Text stattdessen mit deinem Browser geladen hast, kannst du nicht die Aufträge ausführen. Der Text im Browser kann aber nebenher als Merkzettel für dich mit dem ursprünglichen gesamten Text der Aufgabe 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 http://www.elew.de/kurs1/aufg01.html Schaltfläche 'Erstellen'.

b) Diese Seite mit KompoZer auf deiner Festplatte speichern. Z.B. auf dem USB-Stick unter "F:\kurs1\aufg01.html".
Alle Grafiken des Kurses sind oder kommen in ein Unterverzeichnis "img". Beim USB-Stick also nach "F:\kurs1\img\". Lege dieses Unterverzeichnis "img" an.
Hinweis: Fehlen dir einmal im Kurs1 die Bilder, findet dein Browser sie unter www.elew.de/kurs1/img/.

Also, falls noch nicht geschehen: KompoZer Menü 'Datei' / 'Speichern unter...'.

c) Diese Seite noch einmal speichern. An gleicher Stelle, als dein Ergebnis mit dem Namen "erg01.html". Diese doppelte Speicherei soll im ganzen Kurs beibehalten werden. Dadurch kannst du immer die Aufgabe unterbrechen und mit deinem Zwischergebnis "erg??.html" weiter arbeiten, heute mit "erg01.html". Oder du kannst auch dein Zwischenergebnis verwerfen und mit "aufg??.html" von deiner Festplatte noch einmal beginnen, heute wäre das mit "aufg01.html".
Hinweis: Wenn bei diesem erprobten Kurs1 zum Beispiel die abgebildete Befehlsfolge aufgerufen, bzw. abgearbeitet wird und im Menü Format der folgende Befehl Seitentitel und -einstellungen sich nicht beutzen lässt, weil er ausgegraut ist, dann liegt das am KompoZer. Nicht traurig sein, einfach die Arbeit speichern, KompoZer schließen und neu starten. Kommt ja immer seltener vor und wird nur der Frustvorbeugung hier erwähnt.

KompoZer Menü Format / Seitentitel und -einstellungen / Dialogfenster 'Seiteneigenschaften' Titel: "Ergebnis 1" eintragen OK / Menü Datei / Speichern unter ... / "erg01.html".  Der Dateiname "erg01.html ist im Verzeichnis zu sehen, der Titel "Ergebnis 1" erscheint im oberen Balken des Programmfensters und bei KompoZer oben im Seitenregister. Suchmaschinen werten den Titel als etwas Markantes aus.

d) Den ganzen Kopf dieser Seite bis hierher brauchst du nicht mehr für dein Ergebnis und kannst das alles, von der obersten Zeile bis einschließlich Auftrag d) hier, markieren und löschen. Dadurch rückt jetzt e) und dann jedesmal der aktuelle Auftrag ins Sichtfeld.

e) Im Seitenregister hier senkrecht drüber steht Ergebnis 1. 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. 'Speichern' ist ausgegraut und nicht verfügbar, du hast gerade gespeichert. Aber 'Ctrl+S' ist rechts davon zu sehen. Bei vielen anderen Befehlen gibt es auch solche Tastaturkürzel.
Die rote Diskette ist verschwunden. Ein Leerzeichen hier einfügen (tu es, jetzt!) 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 immer seltener erwähnt.

f) Auftrag e) löschen. Das linke Fenster von KompoZer ist die Seitenverwaltung. Die wird jetzt weggeschaltet oder zugeschaltet, je nachdem, ob sie zu sehen ist oder nicht.

KompoZer Menü 'Ansicht' / 'Anzeigen-Verstecken' / 'Seitenverwaltung' oder Funktionstaste [F9]. Mit [F9] ein- und ausschalten, schließlich ausschalten.
Der Editierbereich wird breiter. Der hier vorhandene Fließtext nimmt sofort die volle Fensterbreite ein.
f) ist mit dem Ausprobieren von [F9] jetzt erledigt, also den erledigten Auftrag wieder löschen.

g) Die Textbreite soll mit 800 Pixeln Breite festgelegt werden. Das Lineal über diesem Fenster, an der Breitenangabe mit so-und-soviel px unter dem Seitenregister zu erkennen, mit der Maus an der rechten Kante anpacken und nach innen verkleinern bis die Breitenangabe 800px lautet. Hast du von Anfang an ein schmaleres Fenster als 800px, dann nimm zwei Drittel deiner Breite.
Der Fließtext ist jetzt schmaler angeordnet, g) ist erledigt, also löschen, damit h) nach oben rückt. Damit ist die Lösscherei des Erledigten genug geübt und wird nur noch gelegentlich für Quereinsteiger erwähnt.

h) Bis jetzt hast du im Editiermodus 'Normal' gearbeitet. Die Editiermodus-Symbolleiste unten zeigt die vier Register der Editier-Modi.
Im Quelltext hat KompoZer deine Linealverschiebung in Code verwandelt. Lies h) ganz zu Ende und wechsel am Ende von h) in den Quelltext und speicher nach Erledigung von h) den Quelltext mit [Strg]-[s]. Das bringt dich automatisch 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, du hast die Textbreite zurück geändert) 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 verläßt nach dem Speichern immer den Editiermodus 'Quelltext'.

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 eingefügt, einer, der den Text der ganzen Webseite in Farbe setzt.

k) Den <body>-tag in der Statuszeile rechtsklicken. Nvu-Benutzer beachten das "Nur für Nvu" und übergehen das "Nur für KompoZer" und umgekehrt.

Nur für Nvu: Im Kontextmenü 'Inline styles' wählen. Im Unterkontextmenü rechts raus die 'Texteigenschaften' wählen. Der Dialog 'Text properties' 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. Oben rechts eine 'Farbe' eintragen. Nimm "gold", "green", "red" und du siehst sofort das Ergebnis. (WYSIWYG = Was du siehst ist was du kriegst). Weiter mit Gemeinsam.

Nur für KompoZer: Den <body>-Tag in der Statuszeile rechtsklicken. Im Kontextmenü 'Inline Styles' wählen. Der Dialog '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 eine 'Farbe' eintragen.

Gemeinsam:  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. Sei wagemutig und editiere im Quelltext das 'blue' und komme wieder hieher in den Modus 'Normal' zurück, um das Editierte zu sehen'.  Am Ende arbeite mit 'blue' weiter.

l) Lösche nicht nur das Erledigte oben weg bis hierher, sondern speicher auch regelmäßig dein Ergebnis. Bei roter Diskette oben  links einfach mal ein [Strg]-[S] benutzen.
Die Webseite soll links zwei blaue Quadrate mit Lorem-ipsum-Text erhalten.
Das Ergebnis kannst du mit deinem Browser vorweg nehmen: http://www.elew.de/kurs1/erg01.html oder auch als neue Seite mit Nvu oder KompoZer laden. Hierzu gebe ich keine "Menü Datei / Webadresse ... usw."-Zeile mehr an.

m) Bei den Quadraten kommst du mit <div>-Containern in Berührung. <div> ist wieder ein tag. Mit Nvu oder KompoZer holst du dir das per Maus in der Auswahlliste ab.

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'.
Hinweis: Nach längerer Arbeit mit Nvu oder KompoZer kann es zum Hängenbleiben kommen. Zu erkennen daran, dass zum Beispiel die Auswahlliste zwar "Normaler Text" anzeigt, sich aber nicht beim Anklicken öffnet. Manche KompoZer-Benutzer erleben so etwas nie, einige aber haben ihren Frust bei mir per E-Mail ausgelassen, als ob der Kurs Schuld hätte. Später im Kurs gehe ich darauf ein, erwähne das aber jetzt anlässlich einer Überarbeitung gleich: Hängt die Datei, die Datei sichern, wenn es noch geht, schließen und neu laden. Hilft das nicht, dann hängt KompoZer. Dann KompoZer schließen und neu laden. (Ist doch wenig Aufwand, für ein ansonsten gutes und kostenloses Programm!)

Der Name 'Absatzformat auswählen' wird durch einen tooltip angezeigt, wenn die Maus über der Liste etwas länger verweilt. Klicke in die Auswahlliste hinein. Die Zeile mit "Markiere" ist immer noch markiert. Wähle nun in der Auswahlliste ganz unten 'Generic container (div)'. Unten in der Statuszeile taucht der neue tag auf, das <div>.
Klicke hier drauf, ja hier,  in diese Textzeile, dann ist der Mauszeiger außerhalb des neuen <div> und die Statuszeile unten enthält nur das <body>-tag. Linksklicke in den neuen <div>-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 neuen Container, so wie die erledigten Aufträge bisher. Er ist Teil des kommenden Ergebnisses. Lösche aber den restlichen Text von m) bis hierher einschließlich und später die erledigten Aufträge, ohne den Container zu erfassen.

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, dem öffnenden <div> und dem schließenden </div>. Der ganze Container inklusive der beiden tags ist ein Element. Und Container ist dieses Element, weil zwischen <div> und </div> jedes beliebige Element eingesetzt werden kann.

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 1 stehen zwei Container im Körper von <body> bis </body> hintereinander und ein weiterer innerhalb des zweiten.

Nur für Nvu: Menü Ansicht / Bereichskonturen wählen, wenn das Häkchen noch nicht gesetzt ist.

p) Lösche alles hier drüber außer dem Container. Lasse unter dem <div>-Container eine Leerzeile stehen und markiere hier das Wort "Wort". 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 "Wort", sondern den ganzen Absatz. Das soll so sein. Lösche die Texte aus den div-Containern außer jeweils einem Wort. Etwas soll zum Anklicken übrig bleiben. Wenn du über den Punkt hinaus löscht und der Container zerstört wird, mit [Strg]-[Z] kannst du das rückgängig machen. Lösche besser vom Punkt aus nach links mit Backspace.

Lasse unter jedem Container eine Leerzeile und lösche alles außerhalb der Container bis p) einschließlich.

Kopiere den Auftrag q) für Nvu oder für KompoZer, je nachdem welches Programm du benutzt, in beide Container und bearbeite q) in diesen Containern.

q) Nur für Nvu:
 Klicke in den Container hier irgendwo hinein und rechtsklicke auf <div> in der Statuszeile. Wähle im Kontextmenü 'Inline styles' und davon dann die 'Texteigenschaften'. Den Dialog 'Text properties' kannst du am oberen Balken verschieben, so dass du das Folgende weiterhin lesen kannst. Trage als Schriftgröße: 10pt ein. OK. Rechtsklicke in der Statuszeile wieder <div> und wähle 'Inline styles' und dann 'Box-Eigenschaften'. Trage im Dialaog 'Box properties' ein: Breite: 300px und Höhe: 300px für die Größe, für die Abstände, gemeint sind die Innenabstände, für alle vier Richtungen: 10px, um den Text innen allseits um 10 Pixel vom Rand fernzuhalten. OK.
Rechtsklicke in der Statuszeile wieder <div> und wähle 'Inline styles' und dann 'Randeigenschaften'. Das Häkchen für 'Alle vier Seiten.verwenden..' im Dialog 'Borderproperties' erlaubt, mit der einen Angabe für oben alle vier Begrenzungen an den vier Seiten festzulegen. Das soll geschehen, indem du für Oben aufblätterst:
Stil: solid, Breite: 1px (0px zuerst in der Auswahlliste nehmen und dann Pfeil daneben aufwärts, das geht mit der Maus alleine), Farbe: blue (per Tastatur). Abschließend OK. Während der Eingabe sind die Änderungen schon zu beobachten.
Wiederhole das für den zweiten Container.

q) Nur für KompoZer:
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'. Der Dialog 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 Breite: 300px und Höhe: 300px für die Größe, den Innenabstand für alle vier Richtungen: 10px, um den Text allseits innen um 10 Pixel vom Rand fernzuhalten. Wähle das Register 'Begrenzungen'. Das Häkchen für 'Alle vier Seiten.verwenden..' erlaubt, mit der einen Angabe für oben alle vier Begrenzungen an den vier Seiten festzulegen. Das soll geschehen, indem du für Oben aufblätterst:
Stil: solid, Breite: 1px (0px zuerst in der Auswahlliste nehmen und dann Pfeil daneben aufwärts, das geht mit der Maus alleine), Farbe: blue (per Tastatur). Abschließend OK. Während der Eingabe sind die Änderungen schon zu beobachten.
Wiederhole das für den anderen Container.

r) Lösche alle Aufträge bis r) einsschließlich und auch die Texte in den Containern bis auf ein letztes einzelnes beliebiges Wort. Löscht du zuviel, z.B. den ganzen Container gleich mit, machst du die Löschung mit [Strg]+[Z] rückgängig.

s) 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. Lösche  s).

t) Hier steht ein "Duis-autum"-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.

Kopiere diesen Text in den zweiten Container 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 t).

u) 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, der Scherz würde gelten, denn es gibt noch keinen Link aus der jetzt erstellten Webseite heraus. Das muss noch ergänzt werden.

Speicher diese Seite, so unfertig sie auch ist, als die Zielseite für einen Sprung mit dem Dateinamen "aufg02.html" ab. Bis du im Kurs die richtige Aufgabe 2 abspeicherst, reicht dieses vorläufige Beispiel. Wird der Sprung im Browser ausgeführt, erkennst du diese Zielseite am halbfertigen Aussehen.

Vergessen wir nun diese Zielseite und setzen die Aufgabe fort. Deshalb noch einmal diese Seite speichern, als die altbekannte Seite "erg01.html". Damit überschreibst du die vorhandene Datei und bist wieder mitten drin in der Aufgabe.

v) Du bist wieder in "erg01.html". Lösche alle Aufträge bis zu dieser Zeile einschließlich.
Setze 5 Leerzeilen direkt unter den Text in den "Duis autem"-Container und schreibe: "Weiter mit Aufgabe 2". Das richtest du mit dem button 'Rechts ausrichten' oben in der Format-Symbolleiste 2 dann rechts aus.

w) In die "Weiter mit Aufgabe 2"-Zeile klicken. In der Statuszeile erkennst du, da ist per Mausklick ein <div> im <div> von KompoZer erzeugt worden, damit das Rechtsausrichten möglich wird. Der neue <div>-tag steht in der Statuszeile als letzter. Auf diesen Linksklicken und der ganze neue "Weiter"-Container ist perfekt markiert. Diese Markierung beibehalten.

x) Bei dieser Markierung wird eine Sprungadresse, ein Link auf Aufgabe 2 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.

Für KompoZer: Mit dem kleinen Ordnersymbol rechts außen bei 'Link-Adresse'...

Für Nvu: Per Schaltfläche 'Durchsuchen....

Gemeinsam: das Verzeichnis durchsuchen und die von dir gespeicherte "aufg02.html" anklicken und 'Öffnen'. Dann OK.

y) 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. Im Browser gilt der Test als gelungen, wenn von der Ergebnisseite auf die vorläufige Aufgabe 2 verzweigt wird.

Glückwunsch zu der Seite. Zum Vergleich gibt es im Kurs1 im Internet auch die Seite Ergebnis 01, so wie sie sein sollte.
Weiter geht es im Internet mit der echten Aufgabe 2. Viel Spaß