KompoZer Kurs1a Übung 2

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1, Version 6 vom 6.1.2010
Übung 2 , Weißer Text auf Dunkelblau im Container
Zurück zur Startseite

Willkommen:

Diese Seite muss zum Bearbeiten mit KompoZer 08b1 geladen sein. Wenn noch nicht geschehen, Kompozer 0.8b1 also starten und die Übung 2 laden. Falls noch nicht vorhanden, per Menü alle Symbolleisten des KompoZers zur Ansicht bringen.

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

Aufträge:

a) Seite sichern

Diese Seite auf der Festplatte speichern, z.B. auf dem USB-Stick unter "F:\kurs1a\ziel02.html". Der Titel der Seite ist "Ziel 2". Der Autor bist du. Falls etwas schief geht, kann mit [Strg]-[z] die letzte Aktion rückgängig gemacht werden, und rückgängig von rückgängig geht mit [Strg]-[y].

| Menü 'Format' | 'Seitentitel und - einstellungen' | Dialog 'Seiteneigenschaften' | Titel: "Ziel 2" | Autor: dein Name | Menü 'Datei' | 'Speichern unter...' | 'Name:' "ziel02.html" | Ort auf der Festplatte aufsuchen, Schaltfläche 'Speichern' |

b) Ein Zeilenumbruch wird in die Quelltext-Teilansicht hinein editiert

Ein Linksklick unten auf das Register 'Teilen' breitet unter der Normalansicht eine weitere Ansicht mit dem Quelltext aus. Schiebe die Trennlinie auf die Hälfte der Bildhöhe für den Quelltext hoch. In der Quelltext-Ansicht steht am Anfang <body>, violett hervorgehoben und ergänzt durch einen Inline Style, wenn in der Statuszeile auf den Tag <body> linksgeklickt wird.
Beim Scrollen im Quelltext unten oder beim Verschieben des Quelltextes mit der Bildlaufleiste ist das <br>-Tag in dieser Übung häufig zu sehen, ebenfalls violett hervorgehoben.
<br> (br vom Englischen break = Umbruch) erzwingt einen Zeilenumbruch. Als Tag kann es keinen Inhalt mit einem Schluss haben und hat daher kein ein Pärchen bildendes schließendes Tag. In der Einführung "Übung 0" konnte aber erlebt werden, dass mit WYSIWYG-Webseitengestaltung durchaus jedes <br> per Inline Style formatiert wurde.

Klicke in die Quelltextansicht. Ziemlich weit oben steht "<br> Ein Linksklick..." usw. Wenn nicht, dann wurde das "Löschen erledigter Aufträge" schlicht vergessen. In diesem Fall jetzt bitte alles oberhalb b) in der Normalansicht entfernen und weiterhin nach jedem Auftrag den nächsten nach oben ins Bild rücken.

Linksklicke in der Quelltext-Ansicht in die Mitte des Wortes "Linksklick" und schreibe einen Zeilenumbruch <br> hinein. Klicke oben irgendwo in die Normalansicht und gehe mit der Bildlaufleiste ganz nach oben. Mitten im Wort "Linksklick" wird umgebrochen und unten ist das neue <br> auch wieder violett hervorgehoben. Dies nur zur Übung, denn das <br> verschwindet mit dem Löschen dieses Auftrags b).

| In der Quelltextanzeige den Mauszeiger zwischen "Links" und "klick" setzen | Den Text "<br>" an der Mauszeiger-Position einfügen | In die Normalansicht klicken | Bildlaufleiste der Normalansicht nach oben schieben |

c) Text in Absatz-Container <div> verpacken

Im nächsten Schritt wird in der Normalansicht der gesamte Text markiert und aus der Auswahlliste für das Absatzformat wird der gesamte Text in einen Container gepackt.

Welche Auswahlliste ist gemeint?
In der 'Format-Symbolliste 1' befindet sich ganz links eine Auswahlliste mit der Anzeige "Normaler Text". Wird die Maus darauf gehalten, zeigt das Tooltip 'Absatzformat auswählen' an. Wird diese Liste aufgeblättert, sind verschiedene Absatzformen und unten 'Generic container (div)' zu sehen.

Hinweis zum div-Container:
In einen solchen Container wird der Text zwischen dem öffnendem <div>-Tag und dem schließendem </div>-Tag eingepackt. Folgen zwei oder mehrere div-Container aufeinander, ergibt sich zwischen ihnen automatisch ein Zeilenumbruch. Der div-Container ist also gut zum Einschließen und Formatieren eines Absatzes geeignet. Der div-Container kann weitere div-Container auch umfassen und einschließen. Ende des Hinweises.

Wird auf den <body>-Tag in der Statuszeile linksgeklickt, wird der ganzen Text markiert. In der Auswahlliste für das Absatzformat kann ganz unten 'Generic container (div)' dem gesamten Text zugewiesen werden. KompoZer wird dann aktiv und richtet nicht einen, sondern viele Container ein.

| Linksklicken auf <body> in der Statuszeile | Auswahlliste 'Absatzformat auswählen' öffnen und unten Generic container (div)' wählen |

d) Eine KompoZer-Aktion wird revidiert

In der Normalansicht tauchen viele rot gepunktete Rahmen auf, für jeden div-Container einer. Wird in irgendeinen der rot gepunktetetm Rahmen geklickt, steht in der Statuszeile rechts außen nun auch ein <div>-Tag. In der Quelltextansicht steht dann nur der Code für den gewählten Container, beginnend mit dem öffnenden <div> und endend mit dem schließenden </div>.
Das Anzeigen einzelner Elemente in der geteilten Quelltextansicht hebt die Übersichtlichkeit beim Quelltextstudium. Soll der ganze Quelltext zu sehen sein, dann eben in der Statuszeile auf <body> klicken.

Dass viele Container entstanden sind, liegt daran, dass der Text schon viele Absätze durch das <br> enthält, und so wurden, weil alles markiert war, alle Absätze in Container umgepackt. Die Verpackungsaktion bitte wieder rückgängig machen, mit [Strg]-[z]. Auch nach dem Speichern lässt KompoZer das Rückgängigmachen zu. (Nach dem Beseitigen der vielen <div>s ist sicher auch der Auftrag c) wieder da. Dann c) und d) gemeinsam entfernen. Hauptsache alle <div>s sind weg.)

| [Strg]-[z] | Probe mit [Strg]-[y] | Markierung durch Linksklick in die Normalansicht aufheben | Speichern mit [Strg]-[s] | [Strg]-[z] | und Sichern |

e) Ein Inlinestyle wird in der Quelltext-Teilansicht umgebrochen

Nun der zweite Versuch, den Text mit einem Container einzuschließen, aber im Quelltext. Nur wo ist das Ende des <body>-Tags, wenn in der Statuszeile auf <body> geklickt wird und <body> oben erscheint?
Zur besseren Übersichtlichkeit kann der lange <body>-Tag hinter einem Semikolon im Inlinestyle mit der [Enter]-Taste umgebrochen werden, ohne dass das als ein Zeichen im Code gewertet wird. KompoZer setzt solche Umbrüche nach eigenem Gusto in großer Zahl in jeden Quelltext. Sehr zum Ärger von manchem Anwender, der gerne den Quelltext sortiert arrangieren würde.

| In der Quelltextansicht in dem langen <body>-Tag einen Zeilenumbruch einfügen |

f) Ein <div>-Container wird in den Quelltext hinein editiert

Wird hinter dem Tag von <body> mit dem langen Inlinestyle in der Quelltextansicht ein öffnender <div>-Tag angefügt, ensteht ein einzelner Container, der alles umschließt. KompoZer merkt, dass kein schließendes </div> eingetragen wurde, und fügt das von selbst ein.

Alles ist mit einem einzigen rot gepunkteten Rahmen eingeschlossen und in der Statuszeile steht auch rechts das <div>.

Gehe in der Quelltext-Ansicht ganz nach unten. KompoZer hat das schließende </div> eingefügt, weil KompoZer die Code-Fehler, auch unfreiwillige, korrigiert. Hier war das nützlich. Oft nervt das auch, weil KompoZer es zwar gut meint, manchmal aber andere Auffassungen verfolgt, als der Anwender selbst beabsichtigt.

| Ein "<div>" hinter dem <body>-Tag einfügen | Oben in die Normal-Ansicht klicken | In der Quelltextansicht das schließende </div> unten finden |

g) Anzeige des gesamten HTML -Codes in der Teilansicht

Eine Kritik an WYSIWYG-Editoren, die immer wieder geäußert wird, ist, dass unnötiger Ballast codiert wird. Das Erzeugen der vielen <div>-Container per Auswahlliste in Auftrag d) war nicht falsch aber typisch dafür. Auch der Ballast führt zur gleich aussehenden Anzeige. Aber wie im Auftrag f) bietet KompoZer mehr als reine WYSIWYG-Editoren. Der Quelltext steht beim KompoZer auch zum Eingreifen zur Verfügung.

Wird in der Statuszeile auf <html> geklickt, ist zu erkennen, dass das neue <div>-Pärchen unmittelbar vom <body>-Pärchen eingeschlossen wird. Auf <body> folgt unmittelbar das "neue" <div> und vor dem schließenden </body> steht direkt davor das "neue" schließende </div>.

h) Der div-Container wird formatiert.

Der <div>-Container erhält per Kontextmenü und Inlinestyles: Breite 600px, linker Außenabstand 150px, vier Innenabstände von 10px, die bekannte vordefinierte Schriftart, diesmal weiß im Blocksatz und in der Größe "klein", einen blauen Hintergrund und einen weißen Rahmen mit 1px Rahmenstärke. Der blaue Hintergrund wird in hexadezimaler Form #3366ff eingetragen. Ist Schwarz #000000 mit Null für RGB und Weiß #ffffff mit voller Leuchtkraft für Rot Grün und Blau, dann hat #3366ff ein schwaches Rot, ein etwas stärkeres Grün und volles Blau. Das "blue" vom Kursanfang hat #0000ff und das Beimischen von Rot und Grün trifft sicher den Geschmack von vielen.

| Mit einem Rechtsklick auf das <div> in der Statuszeile das Kontextmenü öffnen | Inline-Styles | Im Dialogfenster Register 'Box' wählen | 'Breite:' 600px | 'Außenabstand Links:' 150px | 'Innenabstand:' alle vier auf "10px" setzen | Register 'Hintergrund' | 'Farbe:' #3366FF | Register 'Text | Radiobutton 'vordefiniert:' auf "Arial, Helvetica, sans-serif" setzen | 'Schriftgröße:' in der Auswahlliste "klein" wählen | 'Farbe:' "white" schreiben | 'Ausrichtung:' in der Liste auf "Blocksatz" stellen | Register 'Begrenzungen' | Häkchen bei 'Alle vier Seiten verwenden....' | 'Stil:' in der Liste "solid" wählen, 'Breite:' 1px eintragen, 'Farbe:' "white" schreiben | OK | Irgendwo in die Normalansicht klicken, um die Markierung aufzuheben |

i) <body> wird umformatiert

Damit der weiße Rand und der Container sich vom weißen Hintergrund abheben, noch eine Hintergrundfarbe für <body> wählen. Gleichzeitig wird <body> von den Styles bereinigt, für die der das Ganze umgebende Container selbst welche besitzt. Wird mit dem Kontextmenü von <body> der Dialog für die Inlinestyles geöffnet, erscheint das Register 'Allgemein' mit allen Regeln in Klartext. Alle diese Regeln können in einem Aufwasch markiert und gelöscht werden. Natürlich lassen sie sich auch dort editieren. Sind alle Regeln weg, kommt eine neue für einen Hintergrund mit #000033 dazu. Bei CSS ist es möglich, statt #000033 auch #003 zu schreiben. Kompozer macht daraus #000033. So steht #36F auch für #3366ff.
Der Container hat einen weißen Rand, der mit den roten Rahmenpunkten kollidiert. In der Vorschauansicht gibt es keinen roten Rahmen.

| Rechtsklick auf den <body>-Tag in der Statuszeile | Inline-Styles | Im Dialogfenster im Register 'Allgemein' alle Regeln löschen | Register 'Hintergrund' | 'Farbe:' "#003" schreiben | OK | In die Normalansicht klicken | Rechts in der Editier-Symbolleiste die Ansicht 'Vorschau' wählen, um die rote Container-Markierung abzuschalten |

j) Das <span> der Überschrift wird durch <h1> ersetzt

j.1) DIe Werkstatt des Kurses liegt immer am oberen Bildrand. Damit die Überschrift von unten her hierher auf die Werkbank kommt, die ganze Zeile "Weißer Text auf blauem Grund, 600px breit" von unten über das j) setzen. Die ganze Überschrift lässt sich perfekt markieren und dann ausschneiden, wenn in der Statuszeile das zugehörige <span> linksgeklickt wird. Nach dem Ausschneiden lässt es sich in einer eigenen Zeile über dem Auftrag j) einfügen.

| Überschrift "Weißer Text auf blauem Grund, 600px breit" anklicken (weiter unten) | In der Statuszeile <span> linksklicken | Menü 'Bearbeiten' | 'Ausschneiden' | Ganz oben im Bild den Mauszeiger platzieren | Menü 'Bearbeiten | 'Einfügen' | | Zeilenumbruch hinter die Zeile mit [Enter] setzen |

j.2) Die Überschrift der fertigen Webseite wurde mit einem <span>-Tag fett gesetzt. <span> erzeugt keinen Zeilenumbruch und eignet sich daher gut zum Formatieren von Teilen innerhalb einer Zeile. Für Überschriften kommen aber besser die in der Auswahlliste 'Absatzformat auswählen' gelisteten Überschriftebenen <h1> bis <h6> in Frage. Jede dieser Überschriften bildet einen Absatz mit Zeilenumbruch. Mit <h1> bis <h6> werden in HTML schon immer Dokumente gegliedert ausgezeichnet. (h für Englisch=heading). <h1> wird außerdem von manchen Suchmaschinen ausgewertet, wenn schon etwas in <h1> daherkommt, muss es wohl etwas Wichtiges sein.

j.3) Wird in der Statuszeile auf das augenblicklich vorhandene <span> der Überschrift "Weißer Text.." rechtsgeklickt, läßt sich im Untermenü des Kontextmenüs der Tag auswechseln. Nach dem auswählen von 'Tag ändern' sofort in der Statuszeile den nun ohne spitze Klammern markierten "span-Tag" mit "h1" überschreiben und die Eingabetaste betätigen. In der Quelltextansicht wird das Element mit der neuen Auszeichnung angezeigt. <br>s innerhalb <h1> und </h1> sind nicht eingeplant und können entfernt werden.

| In der Normalansicht in die Überschrift "Weißer Text..." linksklicken | In der Statuszeile für <span> das Kontextmenü öffnen | 'Tag ändern' | "h1" über das markierte span schreiben und [Enter] |

Beim Löschen der Aufträge die <h1>-Zeile nicht löschen.

k) <h1> erhält Inline Styles

Ohne ein ergänzendes Format ist dem Ausgabegerät des Besuchers überlassen, wie <h1> präsentiert wird. Passend zum "font-size: small;" der Übung bietet sich hier "font-size: normal;" an. Hat KompoZer das "klein" der Schriftgröße in ein "small" übertragen, wird aus "normal" jetzt ein "medium". Bei der Gelegenheit passt auch, die Überschrift per Inline Styles mit der Ausrichtung "zentriert" in die Mitte zu setzen.

| In der Normalansicht in die Überschrift "Weißer Text..." linksklicken | Kontextmenü für <h1> in der Statuszeile öffnen | 'Inline Styles' | Register 'Text' | 'Schriftgröße:' normal auswählen | 'Ausrichtung:' Zentriert | OK |

l) <div> in <div>

<div>-Container lassen sich aneinandereihen, sie können auch verschachtelt werden. Der äußere Container erhält für jeden der Absätze im "Lorem.."-Text einen eigenen Container. Wird in einen Absatz linksgeklickt, lässt sich ein <div> per Auswahlliste 'Absatzformat auswählen' leicht anbringen. Fünf Absätze sind in im "Lorem.."-Text vorgesehen. Zwischen diesen sind jeweils zwei <br>. Durch die Zuweisung des "Generic container (div)" aus der Auswahlliste mit einem Streich, weil alles markiert ist, wird jeweils ein <br> von KompoZer mit <div> ausgewechselt.

| Ganz unten von "Lorem ipsum.." bis "...facilisis" alles markieren | Auswahlliste "Absatzformat auswählen' | 'Generic container (div)' |

m) Regel für <a> kopieren

Der Link zurück zur Startseite weiter unten oberhalb von "Lorem..." besteht aus <a href="...>Zurück zur Startseite</a>. Dem <a href.. soll im Schnellverfahren eine CSS-Regel übergestülpt werden. Der folgende Absatz kann in die Zwischenablage übernommen werden.

margin: 5px;
padding: 2px;
background-color: #000033;
color: white;
text-decoration: none;

Wird nun per Kontextmenü der Dialog der Inline Styles für den Anker-Tag geöffnet, lassen sich die Styles im Register 'Allgemein' gemeinsam einfügen. 'OK' schließt dann diese Formatierung ab.

| Styles in die Zwischenablage übernehmen | Den Mauszeiger in den Link setzen | Kontextmenü für <a> | Den Inhalt der Zwischenablage in den Dialog, Register 'Allgemein' einfügen | OK |

n) Ein <div> inklusive Inline Styles mit nur einem Klick

Wohin die "Schaltfläche" mit dem Link gehört, ist Ansichtssache. Für diese Übung gehört sie nach rechts. Wird der Link angeklickt und in der Symbolleiste 2 auf die Schaltfläche 'Rechts ausrichten', die fünfte rechts vom fetten B, geklickt, baut KompoZer um den Link herum einen <div>-Container mit passsender CSS-Regel. Das Ergebnis als Code kann überprüft werden, wenn in den Link geklickt wird, in der Statuszeile aber nicht das <a> linksgeklickt wird, sondern davor das <div>, welches das <a> umschließt. Zum Betrachten kann mit der Eingabetaste im Quelltext ein Zeilenumbruch eingefügt werden. Das stört nicht.

| Link auswählen | Schaltfläche 'Rechts ausrichten' betätigen |

Mit dem Löschen aller Aufträge ist diese Übung 2 erfüllt. Mit dem Browser kann die Datei betrachtet werden. Zum Vergleich dient die Datei http://www.elew.de/kurs1a/ziel02.html. Wer sich auskennt, kann in der HTML-Ansicht eventuelle verwaiste <span>-Tags löschen.

Weißer Text auf blauem Grund, 600px breit
Zurück zur Startseite

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.