KompoZer Kurs1a Übung 1

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1 Version 6 vom 5.1.2010
Übung 1, Kastanienfarbener Text auf Silber

Willkommen:

In der Einführung wurde KompoZer wie ein Textverarbeitungsprogramm zum Einfärben und Gestalten von Text verwendet. Entstanden ist eine nach allen Regeln fehlerfreie Seite "Ziel 0". Allerdings mit aufgeblähtem Code, wo sogar die Zeilenumbrüche jeder einzeln eine Schriftart verpasst bekamen. Das geschieht typischerweise mit WYSIWYG-Editoren. Der Code ist ja egal. Ein Extrem sozusagen und eine Seite von KompoZer. Das andere Extrem ist die Gestaltung der Seite in einem "Ich sehe gar nicht, was ich baue"-Modus und die mögliche andere Seite von KompoZer, nämlich das Codieren von Hand in der Quelltext-Ansicht. Wer das kann, nimmt aber nicht KompoZer dafür, weil KompoZer einem den übersichtlich gestalteten Quelltext beim Speichern unübersichtlich zerlegt. Hier im Kurs1a wird mit geteiltem Fenster die Mitte zwischen WYSIWYG-Arbeit und Quelltext-Gestaltung eingehalten. Dazu bietet KompoZer die geteilte Ansicht. Oben in der Normalansicht sehe ich, was ich baue, und unten sehe ich, was der Browser davon zu sehen bekommt.

Diese Seite muss zum Bearbeiten mit KompoZer 08b1 geladen sein. Für Besucher, die nur mal per Browser hier hereinschauen, hier ein Link zurück zur Startseite, der auch nur im Browser funktioniert: Zurück zur Startseite Kurs1a . KompoZer läuft in der geteilten Ansicht mit allen Leisten und den Lineals ein- und der Seitenverwaltung ausgeschaltet. Also spätestens jetzt den KompoZer 0.8b1 starten und die Aufgabe wie folgt laden:

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

Aufträge:

a) Seite sichern

Diese Seite wird unter dem Namen "ziel01.html" auf der Festplatte gespeichert, z.B. auf dem USB-Stick unter "F:\kurs1a\ziel01.html".

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

Im Tab steht "KompoZer Kurs1a Übung 1". Dorthin gehört der neue Titel der Seite "Ziel 1". Der Titel wird geändert und bei der Gelegenheit der Autorenname gewechselt.

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

Der Auftrag a) ist erledigt, deshalb jetzt löschen und b) nach oben bringen.

b) Lineale verwenden

Diese Übung enthält nur Fließtext. Der Text geht über die ganze Fensterbreite. Das obere Lineal zeigt in einem weißen Rechteck die augenblickliche Breite in Pixeln an. Wird das KompoZer-Bildfenster schmaler und wieder breiter, ergießt sich der Fließtext über die jeweilige Breite und das obere Lineal zeigt nach kurzer Berechnung die neue Breite an. Für den nächsten Auftrag wird davon ausgegangen, dass dein KompoZer-Bildfenster eine ausreichende Breite mit mehr als 800px im oberen Lineal hat, sonst einfach per eigenem Faktor reduzieren.

Verkleinere mit der Maus das Rechteck des oberen Lineals an den Seiten. Verringere die Breite am rechten Rand bis etwa 800px übrig bleiben. Dabei ist 805px genau so gut wie 795px. Nur genau 800px ist für diese Übung ungeeignet, weil dann der Auftrag f), die Breite nachzuarbeiten, der noch kommt, sinnlos ist.
Nach kurzer Berechnung erscheint im Lineal die neue Pixel-Breite. Eventuell muss "die Maus kurz loslassen", weil die Berechnung erst nach dem Loslassen einsetzt. Danach mit der Maus einfach nachbessern.
(Das Pixel, Kunstwort aus pictures und element, ist die kleinste Einheit einer Rastergrafik und steht für einen Bildpunkt.)

| Mit dem Mauszeiger auf den rechten Rand des waagerechten Lineals oben gehen | Linke Maustaste festhalten und den Linealrand nach links schieben | Maustaste loslassen und warten, bis KompoZer die neue Breite berechnet hat | Evtl. die Randposition weiter ändern, bis die Bildbreite nahe bei 800px angekommen ist |

Das ist Webseitengestaltung mit WYSIWYG. Mit [Strg]-[z] kann das rückgängig gemacht werden und mit [Strg]-[y] erreichst du dann wieder dein Endergebnis, (Mac: Rückgängig mit "Apfel+z" und rückgängig von rückgängig mit "Shift+Apfel+z".), so dass du diese Aktion voll überblicken kannst.

c) Linken Rand per Lineal einstellen

Schiebe den linken Rand soweit nach innen, dass eine Textbreite von ungefähr 600px plus minus 20px entsteht. Zeigt das Lineal zwar 600px an, hat aber offensichtlich ein zu breites Rechteck dafür, dann hilf KompoZer auf die Sprünge mit einem schnellen Ansichtwechsel per Register unten links auf 'Quelltext' und 'Teilen' zurück.

| Mit dem Mauszeiger auf den linken Rand des waagerechten Lineals oben gehen | Linke Maustaste festhalten und den Linealrand nach rechts schieben | Maustaste loslassen und warten, bis KompoZer die neue Breite berechnet hat | Evtl. die Randposition weiter ändern, bis die Bildbreite etwa 600px beträgt |

d) Fließtext-Breite im Quellcode erkennen

Je nachdem, wo der Mauszeiger in der Normalansicht platziert ist, erscheint in der unteren Quelltextansicht (Die Ansichten sollen geteilt sein) der Code des zugehörigen Elementes. In der Statuszeile ganz unten steht <html> <body> und sicher noch und . In der Reihe ist das äußerste Element rechts, dasjenige, in dem der Mauszeiger sich in der Normalansicht befindet. Wird <body> in der Statuszeile linksgeklickt, wird <body> zum äußersten Element rechts, die anderen werden abgeschaltet und der Mauszeiger befindet sich überall in <body>. Das heißt, mit der Maus wurde alles markiert. In der Quelltextansicht steht nun auch der gesamte Code von <body>.

Die oberste Zeile des Quelltexts lautet vielleicht so:
<body style="margin-left: 191px; width: 599px;"> oder so
<body style="margin-left: 206px; width: 611px;">, jedenfalls nahe an 200px für den Abstand links und nahe an 600px für die Textbreite.

Hinweis zu <body>:
<body....> ist ein HTML-Tag, HTML ist die Auszeichnungssprache mit der diese Webseite erstellt wird und Tag ist auf Deutsch u.a. ein Preisschild (Preisauszeichner) und hier einer der Auszeichner des HTML. <body> leitet als öffnender Tag alle Daten ein, die vom Ausgabemedium dargestellt werden sollen. Am Ende steht dann </body> im Quelltext, als schließender Tag. Dieser ist ganz unten im Quelltext zu sehen. Bildlaufleiste hierfür benutzen.
<body> und </body> kommen als Pärchen nur einmal auf einer Webseite vor. Ende des Hinweises. Die Bildlaufleiste des Quelltextes gehört wieder nach oben.

e) Teilansichten synchronisieren

Als das Lineal oben verschoben wurde, hat KompoZer das style="margin-left: 191px; width: 599px;" mit deinen Zahlen in den body-Tag eingefügt. Vorher war das nur ein öffnender Tag <body>.
Einfach am Lineal oben ziehen, um die Werte für den linken Abstand und der Breite den 200px, bzw. 600px anzunähern. Der Quelltext unten wird aufgefrischt, wenn mit dem Mauszeiger im Quelltext unten etwas markiert und dann wieder oben reingeklickt wird. Damit im Quelltext <body> wieder ganz oben erscheint, auf den <body>-Tag in der Statuszeile wieder linksklicken.

| Breite des Textes links und rechts am Rand des waagerechten Lineals verändern | Mauszeiger in den Quelltext unten setzen | Mauszeiger in die Normalansicht oben setzen | <body>-Tag in der Statuszeile linksklicken | Wiederholen |

f) Style im Quelltext editieren

Die Werte können von Hand präzise in den Quelltext hineingeschrieben werden. Der Style für <body> soll zu ganz genau style="margin-left: 200px; width: 600px;" im Quelltext überschrieben werden.
Hierzu wird in die Quelltext-Vollansicht gewechselt, der <body>-Tag oben mit seinen Styles für Rand und Breite gesucht und korrigiert. Anschließend mit [Strg]+[s] sichern. Bei [Strg]+[s] wechselt KompoZer immer in die Normalansicht. Somit geht es dann hier gleich richtig weiter mit g). Wenn alle erledigten Aufträge wie vorgesehen immer gelöscht wurden, dann steht auch dieser Absatz oben im Quelltext hinter <body> und die Aktionszeile ist leicht zu finden.

| Register 'Quelltext' unten links | In der Quelltextansicht die Pixel-Werte für 'margin-left' und 'width' jeweils markieren und mit den Werten 200, bzw. 600 überschreiben | [Strg]+[s] |

g) Die Farben werden verändert.

Der <body>-Tag bekommt weitere Styles. Für die aktuelle Seite kann für die Farbe von Text und Hintergrund das Menü 'Format' benutzt werden, mit dem Untermenü 'Seitenfarben und -hintergrund...'. Die Textfarbe soll kastanienbraun, Englisch "maroon" werden und die Hintergrundfarbe "silver", was im Dialog "black" und "white" ersetzt.

| Menü 'Format' | 'Seitenfarben und -hintergrund...' | Dialog 'Seitenfarben und -hintergrund...' | Radiobutton 'Eigene Farben verwenden' setzen | Bei 'Normaler Text:' in das schwarze Farbwahlfeld linksklicken und im Dialog 'Textfarbe' rechts unten oberhalb vom OK bei 'Name:' die Farbe "maroon" eintragen. | OK | Bei 'Hintergrund:' in das weiße Farbwahlkästchen linksklicken und den Farbnamen "silver" eintragen. | OK | OK |

h) Die "HTML-Tags"-Ansicht

Durch die Benutzung des Untermenüs 'Seitenfarben und -hintergrund' wurden zentral für die ganze Seite fünf Farben festgelegt, neben Textfarbe und Hintergrundfarbe auch die für die Linkarten. Hierzu ergänzt KompoZer den <body>-Tag, wie in der Quelltextansicht zu sehen ist, wenn in der Statuszeile auf den <body>-Tag linksgeklickt wird. Mit der Hintergrundfarbe klappt es. Aber die Textfarbe "color: maroon;" kommt nicht zur Geltung.
Von der "Übung 0" stammt noch der dem <body> folgende -Tag, der mit der Textfarbe "color: blue;" im Augenblick noch das letzte Wort hat und die blaue Textfarbe bestimmt.

Wird mit der Auswahlliste rechts unten von der Normalansicht in die Ansicht 'HTML-Tags' gewechselt, zeigt KompoZer von jedem Element das öffnende Tag an. Damit wird der Seitenaufbau zwar zerschossen, denn die Tag-Anzeiger brauchen Platz, aber die Elemente sind nun markiert und einfach zu finden. Zu sehen sind auch die vom Löschen der Aufträge übriggebliebenen -Tags. Etwas, was der WYSIWYG-Webseitenbauer nie mitbekommt, nicht zu Fehlermeldungen führt, aber dennoch sinnlos ist. In der HTML-Ansicht können diese überzähligen -Tags beim Löschen des Auftrags h) gut mit [Backspace] entfernt werden. Vor dem i)-Auftrag sind die nicht leeren Elementen vor dem Löschen auf diese Art und Weise geschützt.

| In der Statuszeile rechts in der Auswahlliste die Ansicht 'HTML-Tags' wählen |

i) wird entfernt

Wird ein Tag-Anzeiger linksgeklickt, wird mit dieser Tat das ganze Element markiert. Beim Löschen zum Beispiel entgeht dann einem nichts. In der Statuszeile steht bei einem Linksklick oben auf das erste dann auch unten das betreffende ganz rechts als letztes in der Reihe und fett hervorgehoben.
In der Statuszeile kann auf dieses rechtsgeklickt werden und ein Kontextmenü erscheint. In diesem Kontextmenü kann der Tag entfernt werden. Würde die [Entf]-Taste benutzt werden, würde das ganze Element verschwinden. So aber verschwindet nur die Auszeichnung, die Schrift wird wie im <body>-Tag festgelegt endlich kastanienfarben.
Damit kann nun in die Normalansicht zurückgeschaltet werden.

| In der HTML-Ansicht auf den Tag-Anzeiger 'SMALL' linksklicken | In der Statuszeile auf das rechts stehende rechtsklicken | 'Tag entfernen' | Überzählige In der Statuszeile rechts in der Auswahlliste die Ansicht 'Normal' wählen |

k) Inline Styles

Wenn ein Tag wie <body> durch <body styles="....;"> erweitert wird, dann wird ein Inline-Style verwendet. Mit solch einem Inline-Style wird CSS eingesetzt. CSS ausgeschrieben lautet Cascading Style Sheets und das sind verschachtelbare Design-Dateien. Mit CSS wird Design vom Inhalt der Webseite getrennt. Die kleinste Design-Angabe ist ein Style. Tritt diese Design-Angabe im HTML-Tag auf, dann ist das ein Inline-Style.

Da nun entfernt wurde und fehlt, bietet es sich an, das als Design-Angabe dem Inline-Style von <body> drauf zu packen. Damit wird auch der Forderung nachgekommen, Formate mit CSS festzulegen und vom HTML zu trennen. Hierzu findet sich im Kontextmenü von <body> das Untermenü 'Inline-Styles'. Im sich öffnenden Dialog gibt es das Register 'Text', wo die Schriftgröße "klein" ausgewählt werden kann. In diesem Register findet sich die Farbe "maroon" wieder und die Schriftart von all den s gehört auch gleich dort unter 'vordefiniert' mit 'Arial, Helvetica, sans-serif' dazu. Damit der Flattersatz ( die Zeilen haben alle eine unterschiedliche Länge) aufhört, wird auch noch als Text-Ausrichtung 'Blocksatz' ausgewählt. Während im Dialog die CCS-Eingaben stattfinden, lassen sich die Auswirkungen in der Normalansicht sofort beobachten. Achte mal im Moment der Eingabe von 'Blocksatz' darauf.

| <body> in der Statuszeile rechtsklicken | Kontextmenü 'Inline-Styles' | Dialog, Register 'Text' | 'Schriftgröße.' mit "klein" auswählen | 'Schriftart:' auf 'vordefinert.' auf 'Arial, Helvetica, sans-serif' festlegen | 'Ausrichtung:' Auswahl auf 'Blocksatz' setzen | OK |

Da <body> formatiert wurde, gilt das Format mit einer Eintragung für alles, was auf einem Ausgabegerät, Bildschirm und Drucker usw. angezeigt wird.
Mit dem Löschen aller Aufträge bis zu diesem k) einschließlich ist diese Übung 1 erfüllt. Mit dem Browser kann die Datei betrachtet werden. Zum Vergleich dient die Datei http://www.elew.de/kurs1a/ziel01.html. Und die nächste Übung 2 verwendet bis auf den silbernen Hintergrund die bis hierher erreichten KompoZer-Künste. Aber einen habe ich noch:

l) Kontrolle auf überflüssige Tags

In der HTML-Ansicht sind vielleicht vor der Überschrift noch ein paar überflüssige -Tags zu sehen. Überflüssig ist zum Beispiel , wo zwischem dem öffnenden und schließenden Tag alles rausgelöscht wurde. Zu erkennen ist so etwas in der geteilten Ansicht, wenn der Tag-Anzeiger linksgeklickt wird und unten der zugehörige Code erscheint. Dann in der Statuszeile diesen Tag rechtsklicken und per Kontextmenü entfernen. Das war's. Danke fürs Mitmachen.

Kastanienfarbiger Text auf silbernem Grund, 600px breit
(von http://la.wikisource.org/wiki/Lorem_ipsum)

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.