Webseitengestaltung
mit KompoZer und der Cooke/Klose-Anleitung
unter Windows für Firefox ab 2, Opera ab 9 und Internet Explorer ab 6 und Ubuntu für Firefox ab 2 unf 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. (Bild 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. 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 - im
Bild 1 an der Breitenangabe mit 1217px 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, Bild 2) 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, Bild 3, 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ß