KompoZer Kurs1a Einheit 2

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3
Kurs-Einheit 2, 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 "Seite 1". Allerdings mit aufgeblähtem Code, wo sogar die Zeilenumbrüche eine Schriftart verpasst bekamen. Das geschieht typischerweise mit WYSIWYG-Editoren. Der Code ist dabei nicht eine Maßanfertigung, sondern kommt von der Stange. Ein Extrem sozusagen und eine Konsequenz dieser Arbeitsweise. Das andere Extrem ist die Gestaltung der Seite im Quelltext, was KompoZer auch ermöglicht. Wer das kann, nimmt aber nicht KompoZer dafür, weil KompoZer bislang einen übersichtlich mit Einrückungen gestalteten Quelltext beim Speichern unübersichtlich zerlegt. Hier im Kurs1a wird mit geteiltem Fenster eine Balance zwischen WYSIWYG-Arbeit und Quelltext-Gestaltung gehalten, mit dickem Übergewicht bei WYSIWYG. 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.

Jede Kurs-Einheit kann nur erarbeitet werden, wenn sie mit KompoZer 0.8b3 geladen wird. Für Besucher, die nur mal per Browser hier hereinschauen, hier ein Link zurück zur Startseite 2, der auch nur im Browser funktioniert. KompoZer soll jetzt in der geteilten Ansicht arbeiten, mit allen Leisten und den Lineals ein- und der Seitenverwaltung ausgeschaltet. Also spätestens jetzt den KompoZer 0.8b3 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/einheit02.html" | Auswahlliste 'Erstellen in:' auf 'Neuer Tab' setzen | Schaltfläche 'Erstellen'. |

Aufträge:

a) Seite sichern

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

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

Im Tab steht "KompoZer Kurs1a Einheit 2". Dorthin gehört der neue Titel der Seite "Seite 2". Der Titel wird geändert und bei der Gelegenheit der Autorenname gewechselt. Der Auftrag a) ist damit erledigt, deshalb jetzt löschen und b) ganz nach oben bringen.

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

b) Lineale verwenden

Diese Einheit enthält Fließtext. Bei der vorigen Kurs-Einheit wurden die Zeilen mit Zeilenumbrüchen kurz gehalten. Hier geht der Text über die ganze Fensterbreite. Erst am Ende eines Absatzes wird mit einem Zeilenumbruch eine neue Zeile erzwungen oder mit zwei ein Abstand erzeugt.
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 Berechnungszeit 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 die Vorgaben hier 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 Einheit 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.)

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.

| 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 | Auftrag c) durch Löschen nach oben ins Bild bringen |

c) Linken Rand per Lineal einstellen

Nach dem Löschen des erledigten Auftrags steht c) jetzt ganz oben. Dabei dann auch das Speichern nicht vergessen.

Schiebe den linken Rand soweit nach innen, dass eine Textbreite von ungefähr 600px ± 20px entsteht. Zeigt das Lineal zwar 600px an, hat aber offensichtlich ein zu breites Rechteck dafür, dann hilf dem 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 die Einfügemarke sich in der Normalansicht befindet. Wird <body> in der Statuszeile linksgeklickt, wird <body> zum äußersten Element rechts, die anderen werden abgeschaltet und alles wurde 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 senkrecht und waagerecht hierfür im Quelltext benutzen.
<body> und </body> kommen als Pärchen nur einmal auf einer Webseite vor. Ende des Hinweises. Die Bildlaufleiste des Quelltextes gehören wieder nach oben und nach links.

| Aktionszeile: entfällt | Dafür aber mal wieder ans Speichern denken |

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>.
(Nach dem Löschen des vorigen, erledigten Auftrags steht die Einfügemarke irgendwo. Damit <body> wieder im Quelltext erscheint, <body> in der Statuszeile linksklicken.) Ruhig mit der komplett markierten Seite weiterarbeiten.
Einfach am Lineal oben ziehen, um die Werte für den linken Abstand und der Breite den 200px, bzw. 600px zu ändern. Der Quelltext unten wird erst aufgefrischt, wenn die Einfügemarke in den Quelltext wechselt und dann wieder oben reingeklickt wird. (Damit im Quelltext <body> wieder ganz oben erscheint, auf den <body>-Tag in der Statuszeile wieder linksklicken.) Der Auftrag e) soll somit zeigen, dass KompoZer eine Ansicht erst aktualisiert, wenn per Mausklick von einer Ansicht in die andere gewechselt wurde und zurück.

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

f) Style im Quelltext editieren und Schrott löschen

Die Werte können von Hand präzise in den Quelltext hineingeschrieben werden. Nicht jedoch in der geteilten Ansicht. Aber das Editieren nicht nur oben in der Normal-Ansicht, sondern auch genauso unten in der Quelltext-Teilansicht ist für die weitere KompoZer-Entwicklung angekündigt und gelingt im Kurs hier bei anderen Aufträgen schon sehr schön in der geteilten Ansicht. Zum Probieren, was geht und was nicht, verführt ja das Vorhandensein von [Strg]+[Z] und [Strg]+[Y].

Der Style für <body> soll zu ganz genau style="margin-left: 200px; width: 600px;" im Quelltext überschrieben werden. Der öffnende Tag <body style="margin-left: 191px; width: 599px;"> (etwa) ist oben leicht zu finden. Nur muss bei einem Wechsel in die Quelltextansicht nach oben gescrollt werden. Unterhalb des <body>-Tags (inklusive der Rand-und Breiteneintragung) steht eine Menge Schrott, weil beim Löschen der Aufträge zwar das "What You See" verschwindet, aber Reste vom "What You Get" stehen geblieben sind. Richtig sauber machen kann nur, wer sich auch etwas in HTML bewegen kann. Und nach einer Weile Leben mit KompoZer sollte das jeder können, es bringt einfach bessere Ergebnisse. Schrott für diesen Auftrag ist alles was zwischen <body... > und dem Textbeginn von f), "Die Werte...." sich befindet. Alles leicht im Quelltext zu finden.

Hierzu wird in die Quelltext-Vollansicht gewechselt, der <body>-Tag ganz oben per Bildlaufleiste mit seinen Styles für Rand und Breite gesucht und auf 200px und 600px präzise korrigiert. Dann den Schrott darunter beginnend mit bis "Die Werte..." löschen. Anschließend mit [Strg]+[S] sichern. Bei [Strg]+[S] wechselt KompoZer immer in die Normalansicht. Durch das Löschen gehen auch Farbe und Textformate für f) verloren, deren Angaben sich hinter dem <body>-Tag befanden und weniger schrottig waren. Wo gehobelt wird, fallen Späne.

| 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 | Löschaktion zum Vernichten von - und -Resten | g) nach oben bringen | [Strg]+[S] |

g) Die Farben werden verändert.

In der Quelltextansicht stehen jetzt die präzisen Rand- und Breite-Werte.
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...'. Du nimmst den Dialog 'Seitenfarben und -hintergrund' des Untermenüs zur Verwendung eigener Farben und KompoZer fügt die Formatierung der ganzen Webseite in den <body>-Tag ein. Die Farben für die Links berühren uns noch nicht und bleiben unverändert blau. Die Textfarbe soll im Dialog, der sich beim Anklicken der farbigen Fläche öffnet, "maroon" statt "black" werden und die Hintergrundfarbe "silver" statt "white".

| 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 der Text- und der 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, auch mit den Farben für "alink", "link" und "vlink".

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 für diese Ansicht zwar zerschossen, denn die Tag-Anzeiger brauchen Platz im Layout, aber die Elemente sind nun markiert und einfach zu finden. Zu sehen ist auch der beim Löschen des Auftrags f) wieder übriggebliebene -Tag als neuer Schrott. Etwas, was der WYSIWYG-Autor nie mitbekommt, was auch nicht zu Fehlermeldungen führt, aber dennoch sinnlos ist. In der HTML-Ansicht soll versucht werden, die Tags vor h) beim Löschen des Auftrags h) mit Markieren und dann mit [Backspace] zu entfernen.

| In der Statuszeile rechts in der Auswahlliste die Ansicht 'HTML-Tags' wählen | Auftrag h) inklusive Aktionszeile markieren und mit Backspace soweit wie möglich löschen |

i) "STRONG" wird entfernt

i1) Bei mir ist ein sinnloses "STRONG" hinter dem Anzeiger von "BODY" stehengeblieben. Beim Draufklicken auf den Tag-Anzeiger "STRONG" zeigt die Quelltext-Teilansicht, dass das ein leeres Tag-Pärchen ist. Wird ein Tag-Anzeiger von einem leeren Element linksgeklickt, lässt er sich mit der Löschtaste [Entf] löschen. Also weg mit diesem Pärchen.

| "STRONG" hinter "BODY" linksklicken | [Entf] |

i2) Der Tag-Anzeiger "STRONG" vor der Überschrift von i) lässt sich so auch löschen. Aber das Element ist nicht leer. Probieren und wieder reparieren.

Der Tag lässt sich aber auch entfernen, ohne dass der Inhalt dazwischen verloren geht. In der Statuszeile kann auf dieses rechtsgeklickt werden und ein Kontextmenü erscheint. In diesem Kontextmenü kann der Tag entfernt werden. Damit verschwindet nur die Auszeichnung, die Überschrift bleibt normal erhalten. Das ist der Auftrag i): Die Überschrift in der HTML-Ansicht vom "STRONG" befreien, ohne sie zu verlieren. Danach wieder in die Normal-Ansicht wechseln.

| In der HTML-Ansicht auf den Tag-Anzeiger 'STRONG' vor dem "i)" linksklicken | In der Statuszeile auf das rechts stehende rechtsklicken | 'Tag entfernen' | In die Normal-Ansicht wechseln |

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 kein Textformat besteht, 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', das mit Rechtsklick auf den Tag in der Statuszeile geöffnet wird.
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" schon eingetragen wieder und die Schriftart gehört 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 |

l) Abschluss und Kontrolle auf überflüssige Tags

Da <body> formatiert wurde, gilt mit dieser einmaligen Eintragung das Format für alles, was auf einem Ausgabegerät, Bildschirm und Drucker usw. angezeigt wird.
Mit dem Löschen aller Aufträge bis zu diesem l) einschließlich ist diese Kurs-Einheit 2 beendet. Mit dem Browser kann die Datei betrachtet werden. Zum Vergleich dient die Datei http://www.elew.de/kurs1a/seite02.html. Und die nächste Einheit 3 und die neue Startseite 2 verwenden die bis hierher erreichten KompoZer-Künste. 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.

+ + + Webseite editiert mit KompoZer 0.8b3 + + + Kurs1a Startseite 2 als Beispiel einer Anwendung des Gelernten