KompoZer Kurs1a Einheit 3

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3
Kurs-Einheit 3, Weißer Text auf Dunkelblau im Container dank CSS

Willkommen:

Der silberne Hintergrund muss ja nicht sein. So wie diese Seite hier jetzt aussieht, lässt sich schon ein Text im Internet präsentieren. Kommen die Links von ganz unten nach oben, ist die 08/15 Textseite nach zwei Kurseinheiten erreicht. Die Webseite am Ende der Kurseinheit sieht da eher ungewöhnlich und nicht besser aus. Es geht aber mehr um das Arbeiten mit KompoZer als um guten Geschmack. Den bringst du selbst auf mit deinen eigenen Varianten.

Die Kurs-Einheit 3 kann nur erarbeitet werden, wenn sie mit KompoZer 08b3 geladen wird. Wenn noch nicht geschehen, Kompozer 0.8b3 also starten und die Einheit 3 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/einheit03.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\seite03.html". Der Titel der Seite ist "Seite 3". 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: "Seite 3" | Autor: dein Name | Menü 'Datei' | 'Speichern unter...' | 'Name:' "seite03.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 nicht, einfach in der Statuszeile auf den Tag <body> linksklicken.
Beim Scrollen im Quelltext unten oder beim Verschieben des Quelltextes mit der Bildlaufleiste ist das <br>-Tag in dieser Einheit 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 "Einheit 1" konnte aber erlebt werden, dass mit WYSIWYG-Webseitengestaltung durchaus jedes <br> per Inline Style formatiert wurde.

Klicke in die Quelltextansicht. Ziemlich weit oben steht im Code "<br> Ein Linksklick unten..." usw. Wenn nicht, dann wurde das "Löschen erledigter Aufträge", also Auftrag a) in diesem Fall samt Titel, schlicht vergessen. In diesem Fall jetzt bitte alles oberhalb b) in der Normalansicht entfernen und weiterhin nach jedem erledigten Auftrag immer den nächsten Auftrag 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). Das mögliche Editieren in der Quelltext-Teilansicht ist ein toller Vorteil von KompoZer und erst seit Herbst 2009 vorhanden. An weiteren Verbesserungen dieser Eigenschaft wird gearbeitet. In der vorigen Einheit wurde der Rand und die Breite in der Quelltext-Vollansicht editiert. Das geht im März 2010 bei der Beta 0.8b3 noch nicht in der Quelltext-Teilansicht. Der Kurs1a bevorzugt, wenn immer möglich, die Teilansicht.

| 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 einen Absatz-Container <div> verpacken

Im nächsten Schritt wird in der Normalansicht der gesamte Text markiert und aus der Auswahlliste wird für diese Markierung das Absatzformat <div>-Container ausgewählt. Damit soll die gesamte Seite in einen Container gepackt werden.

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. KompoZer zeigt mit den Hilfslinien diese vielen Container an. Zum Aufheben der Markierung irgendwo in die Normalansicht klicken. Nach oben scrollen.

| 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 öffnenden <body>-Tags, wenn in der Statuszeile auf <body> geklickt wird und <body> oben erscheint? Waagerecht lässt sich das Ende des Tags mit der Bildlaufleiste heranholen.
Zur besseren Übersichtlichkeit kann aber auch der lange <body>-Tag hinter einem Semikolon im Inlinestyle, bei mir hinter dem von "sans-serif" mit der [Enter]-Taste umgebrochen werden. Die Eingabetaste wird nicht als Zeichen im Code gewertet. 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. Auch dass der vom Nutzer mit Einrückungen und Umbrüchen ordentlich ausgerichtete Code von KompoZer nicht mehr zerhackt wird, ist als Verbesserung angekündigt. (Feb. 2010). Schrott hat sich bestimmt auch wieder angesammelt. Das Löschen der Aufträge hat die HTML-Elemente <span style="font-weight: bold;"></span> leer zurückgelassen. Mit <span> wurden die Überschriften fett hervorgehoben. Auch diese Pärchen mal wieder entfernen. Wahlweise in der Quelltext-Teilansicht, das geht gut, wenn Mensch weiß, was er tut, oder in der HTML-Ansicht. Das <span>-Pärchen für die Überschrift vom Auftrag e) kann bleiben. Es ist ja noch in Gebrauch.

| In der Quelltextansicht in dem langen <body>-Tag einen Zeilenumbruch einfügen | Leere <span>-Elemente löschen |

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 ( direkt hinter ".....vlink="#990099">" und auf einer neuen Zeile), ensteht ein einzelner Container, der alles umschließt. KompoZer merkt sofort beim Zurückklicken in die Normal-Ansicht,, dass kein schließendes </div> von dir eingetragen wurde, und fügt das korrigierend selbst am Ende der Seite ein.

Wird nach dem Eimtragegn des <div> in die Normalansicht geklickt, ist 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 und erneutes Umbrechen

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 doch 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>. Der soben geteilte Inline-Style von <body> wurde sicher auch bei dir inzwischen von KompoZer neu arrangiert.

| In der Statuszeile das <html> wählen | In der geteilten Quelltextansicht das Pärchen aus <div> und </div> finden |

h) Der div-Container wird formatiert.

Der <div>-Container erhält per Kontextmenü und Inlinestyles im Register 'Box' eine Breite von 600px, einem linken Außenabstand von 150px, vier Innenabstände von 10px. Im Register 'Text' lässt sich die bekannte vordefinierte Schriftart festlegen, diesmal weiß im Blocksatz und in der Größe "klein". Im Register 'Hintergrund' lässt sich blau einstellen und im Register 'Begrenzungen' ein weißer 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 ein volles Blau. Das "blue" vom Kursanfang hat #0000ff und das Beimischen von Rot und Grün trifft sicher besser 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 Hintergrund abheben, noch eine Hintergrundfarbe für <body> wählen. Gleichzeitig wird <body> von den Styles bereinigt, für die der Container seine eigenen 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. Das Material liegt meistens unten, z.B, die Überschrift "Weißer Text auf blauem Grund, 600px breit". 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) holen. 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 bis hinunter zu einzelnen Buchstaben. 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.

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 in der Quelltext-Teilansicht 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 ab jetzt nicht löschen.

k) <h1> erhält Inline Styles

Ohne ein ergänzendes Format ist es dem Ausgabegerät des Besuchers überlassen, wie <h1> präsentiert wird. Vorschlag: Passend zum "font-size: small;" der Kurs-Einheit bietet sich hier "font-size: normal;" an. 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 vorhanden. Sie können auf einem Streich mit 5 Containern verpackt werden. Das geht, weil jeder Zeilenumbruch <br> von KompoZer als Ende des Absatzes und als Ende eines Containers gewertet wird. Zwischen den Absätzen sind jetzt noch jeweils zwei <br>. Durch die Zuweisung des "Generic container (div)" aus der Auswahlliste wird jeweils ein <br> von KompoZer für das <div> verwertet.

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

m) Regel für <a> im Ganzen kopieren und einfügen

Die Links unterhalb von "Lorem..." sollen im Schnellverfahren eine CSS-Regel mit der Hintergrundfarbe von <body> erhalten. Dazu gehört dann auch die weiße Schriftfarbe, das Unterdrücken einer Unterstreichung und rundum Innenabstand.
Der folgende Absatz kann in die Zwischenablage übernommen werden.

background-color: #000033;
color: white;
text-decoration: none;
padding: 3px;

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. Das ist dann für den zweiten Link zu wiederholen.
Mit dem Löschen aller Aufträge ist diese Kurs-Einheit 2 erfüllt. Mit dem Browser kann die Datei betrachtet werden. Zum Vergleich dient die Datei http://www.elew.de/kurs1a/seite03.html. Wer sich auskennt, kann in der HTML-Ansicht eventuelle verwaiste <span>-Tags löschen.

| Styles in die Zwischenablage übernehmen | Den Mauszeiger in den Link setzen | Kontextmenü für <a> mit Rechtsklick auf das <a> in der Statuszeile öffnen | Den Inhalt der Zwischenablage in den Dialog, Register 'Allgemein' einfügen | OK | Einmal als Ganzes wiederholen |

Mit dem Löschen aller Aufträge ist diese Einheit 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

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.

+ Webseite editiert mit KompoZer 0.8b3 + Kurs1a Startseite 3 als Beispiel einer Anwendung