Kurs 1a Version 7, Webseitengestaltung mit KompoZer 0.8b3
Einheit 4 , Textstrukturierung mit Absatzformaten und CSS

Willkommen:

Die in der KompoZer-Format-Symbolleiste1-Auswahlliste für die Absatzformate angebotenen Absätze werden angewendet. Da die mit CSS bisher verwendeten Inline Styles zu allgemeinen Regeln werden, kommt erstmals der CSS-Editor zum EInsatz.

Wie immer wird auch diese mit KompoZer geladene neue Einheit zuerst unter einem neuem Namen gespeichert. (seit04.html).
Ist ein Auftrag erledigt, wird er gelöscht und der nächste rückt höher. Dieses Mal befindet sich der Text der fertigen Seite zwar wie bisher ganz unten. Zur Bearbeitung wird er aber in eine neue Spalte bewegt.

Der Text stammt von wikisource. (Solch ein Link funktioniert nicht im KompoZer, auch nicht in der Vorschau-Ansicht. Zum Testen von Verweisen, wie auch von Scripten muss die Seite mit einem Browser geladen werden. Der Browser kann von KompoZer aus mit dem Bearbeitungssymbol 'Vorschau' gleich mit der in KompoZer bearbeiteten Seite gestartet werden.)

Die Kurs-Einheit 4 kann nur erarbeitet werden, wenn sie mit KompoZer 08b3 geladen wird. Wenn noch nicht geschehen, Kompozer 0.8b3 also starten und die Einheit 4 von der Webadresse http://www.elew.de/kurs1a/einheit04.html laden. Falls nicht alle Symbolleisten zu sehen sind, per Menü 'Ansicht' alle auswählen. Während der ganzen Aufgabe wird mit der geteilten Ansicht gearbeitet, ein Fünftel der Fensterhöhe für den Quelltext soll aber reichen.

Aufträge:

a) Seite sichern

Diese Seite auf der Festplatte speichern, z.B. auf dem USB-Stick unter "F:\kurs1a\seite04.html". Der Titel der Seite ist "Seite 4". Der Autor bist du.

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

b) Die Seite kommt in einen Gesamtcontainer

Zur Zeit stehen die Aufträge in diesem formatierten Container mit grüner Schrift auf Weiß. Daran schließt sich ganz unten ein weiterer Container an, bei dem nur die weiße Schrift formatiert ist.
Beide Container sollen in Auftrag c) nebeneinander angeordnet werden. Dazu werden beide Container von einem gemeinsamen <div> </div> umschlossen. In der Normalansicht sind beide Container am rot gepunktetem Rahmen zu erkennen.

Wird auf <div> in der Statuszeile linksgeklickt, ist in der Quelltext-Teilansicht der öffnende Tag des oberen Containers zu sehen. Vor diesem ersten <div> wird per Hand ein weiteres <div> eingefügt. Den Rest mit dem schließenden </div>-Tag ergänzt KompoZer selber im Rahmen seiner eingebauten Fehlerverfolgung, sobald in die Normalansicht geklickt wird. Ein neuer roter Rahmen ist zu sehen. In der Statuszeile stehen nun zwei <div> hintereinander. Wird in das rechte <div> in der Statuszeile geklickt, wird der Container mit den Aufträgen markiert. Das ober Lineal zeigt dessen Breite mit 700px an. Wird in das linke <div> geklickt, wird der alles umschließende Container markiert. Alle Tags rechts davon werden in der Statuszeile abgeschaltet. Was gewählt ist, steht in der Statuszeile immer ganz rechts. Das Lineal oben zeigt die Breite des äußeren Containers.

| Auf <div> in der Statuszeile klicken | In der Quelltext-Teilansicht vor dem ersten <div> ein weiteres "<div>" einfügen | In die Normalansicht klicken | In der Normalansicht nach oben scrollen |

c) Der untere Container schwebt nach oben

Bei der jetzigen Darstellung dieser Kurs-Einheit hat ein Browser die Aufgabe, die beiden Container innerhalb des großen untereinander anzuordnen. Da der zweite Container keine Wünsche bezüglich Seitenabstand und Breite mitbekommen hat, wird er unten über die ganze Breite abgebildet. KompoZer macht das als WYSIWYG-Darsteller genauso. Gibt aber der hiesige Container mit CSS das übriggebliebene Bildfenster rechts frei, kann der zweite Container nach oben schweben. Die Freigabe zum Schweben kann beim hiesigen "Auftrags-Container" mit dem Inlinestyle "float: left;" im Register 'Box' bei 'Puffer:' mit einem "Links" eingebaut werden.

| In die Normalansicht des "Auftrags-Containers" klicken | Kontextmenü des <div> rechts in der Statuszeile | 'Inline-Styles' | Register 'Box' | 'Puffer:' Links | OK |

d) Die linke Spalte wird mit ihrer Breite auf 50% verflüssigt

Gibt es bei dir neben den 700px der Kurs-Einheit noch genügend Platz, befindet sich der zweite Container jetzt schon oben rechts. Wenn nicht, sorgst du gleich dafür.
Wird das KompoZerfenster schmaler gemacht, richtet sich der Fließtext, wie bei jedem Besucher der Seite, auch im verbleibenden Rest ein. Rutscht die Fensterbreite weiter zusammen, nutzt der zweite Container unten, was zur Verfügung steht, während die Aufträge mit der Breite von 700px bestehen bleiben und nur noch mit waagerechter Bildlaufleiste gelesen werden können. Die feste Breite von 700px wird jetzt aufgegeben, und stattdessen werden 50% im Register 'Box' als Inlinestyle für den hiesigen Container verwendet. Dann teilen sich beide Spalten das Fenster, egal wie groß die zur Verfügung stehende Gesamtbreite ist. Wird das KompoZerfenster jedoch zu schmal, reicht die Containerbreite nicht für die Tabelle in Auftrag k). Deshalb steht im Inlinestyle als Neuestes die Mindestbreite von 500px.

| In die Normalansicht des "Einheitscontainers" klicken | Kontextmenü des <div> rechts in der Statuszeile | 'Inline-Styles' | Register 'Box' | 'Breite:' 50% | OK |

e) <h1> wird eingesetzt

Rechts wird die Überschrift "Aufläufe und verschiedenartige Gerichte von Macaroni und Nudeln." mit einem Zeilenumbruch abgeschlossen. Damit ist das schon ein Absatz Wird aus der Auswahlliste 'Absatzformat auswählen' dieser Zeile die "Überschrift 1" zugewiesen, ist es egal, ob der Mauszeiger irgendwo in die Zeile gesetzt oder die ganze Zeile markiert wurde. KompoZer setzt alles aus der Zeile zwischen das <h1> und das </h1> und entfernt den Zeilenumbruch <br>. In die Art und Weise, wie <h1> und die anderen <h>s von KompoZer und vom Browser des Besuchers umgesetzt werden, soll erst später mit CSS eingegriffen werden.

| Mauszeiger in "Aufläufe und verschiedenartige Gerichte von Macaroni und Nudeln." setzen | Aus der Auswahlliste 'Absatzformat auswählen' die 'Überschrift 1' nehmen |

f) <h2> bis <h6> werden eingesetzt

Der Beispieltext wurde mit einigen <br> in mehrere einzelne Absätze umgebrochen. Für den Einsatz der verschiedenen Überschriftenebenen wird nach jedem <br> die Überschriftart gewechselt. Hier die Wunschliste für die Auszeichnung: Links der Anfang des Absatzes und rechts davon die Wunschüberschrift mit <h2> bis <h6>. Die Einfügemarke in den Absatz-Anfang setzen und <h,,> zuweisen. Um die Wunschliste mit den Rezepten auf gleicher Höhe im Auge zu behalten, habe ich am Ende ein paar Leerzeilen in die Liste gesetzt.

A. Aufläufe. - Überschrift 2
1. Im Allgemeinen. - Überschrift 3
Form der Schüssel. - Überschrift 4
Die Form zu den... - Überschrift 5
Hitze und Backen. - Überschrift 4
Die Hitze darf weder zu stark... - Überschrift 5
Die Form mit einer Serviette zu umlegen. - Überschrift 4
Der Auflauf wird nicht... - Überschrift 5
2. Sago-Auflauf. - Überschrift 3
1/2 Pfund Sago... - Überschrift 5
Für 10 Personen. - Überschrift 6
3. Reis-Auflauf. - Überschrift 3
1/2 Pfund Reis, ... - Überschrift 5
Für 10-12 Personen. - Überschrift 6

| Den Mauszeiger in die Zeile "A. Aufläufe." setzen | Aus der Auswahlliste 'Absatzformat auswählen' die 'Überschrift 2' nehmen | Den Mauszeiger in den nächsten Absatz setzen und gemäß Liste mit der passenden Überschriftebene auszeichnen | Den vorigen Schritt bis ans Ende der Liste wiederholen |

Wird in der Statuszeile auf das zugehörige <div> geklickt, kann in der Quelltext-Teilansicht geprüft werden, ob alle <br> entfernt sind. Alle Überschriftebenen erzeugen ihren eigenen Abstand zum nächsten Absatz.

g) Der "Rezept"-Container erhält Inlinestyles

Im Kontrast zu der Hintergrundfarbe #99dd99 von <body> bekommt der Hintergrund der Rezepte ein Grau mit Grünstich. Grau wäre #ccc mit gleichen Anteilen von R,G und B. Die neu eingesetzte Hintergrundfarbe für den Container rechts erhält für das Grün etwas mehr an Licht und sei #cec. Die Schrift erhält die Farbe der Aufträge mit #363. Da der Container mit der Kurs-Einheit andere Inhalte hat und später ohnehin weggelöscht sein wird, und der äußere Container gar keine Styles mitbringt, soll der "Rezept"-Container mit eigenen Styles unabhängig von den anderen werden. Die Schriftgröße ist 1em und die Schriftart bleibt "Arial, Helvetica, sans-serif". Hier ist die komplette Regel zum Kopieren in das Register 'Allgemein':

padding: 10px;
font-family: Arial,Helvetica,sans-serif;
color: #363;
font-size: 1em;
background-color: #cec;
text-align: justify;
width: 90%;

| Die gesamte Regel in die Zwischenablage kopieren | In die Rezepte klicken | In der Statuszeile das rechte <div> rechtsklicken | Kontextmenü 'Inline-Styles' | Register 'Allgemein' | Die gesamte Regel einfügen | OK |

Hinweis zu em: em ist eine relative Größenangabe für Längeneinheiten, so wie px auch. px richtet sich nach dem Bildschirm, em nach dem Font. em stammt der Herkunft nach von der Druckereitechnik und variiert mit dem Font. Die Angabe 1em ergibt eine Bildschirmwiedergabe wie bei gar keiner Angabe. Standard für gar keine Angabe ist heutzutage 16px, ansonsten das, was der Besucher selbst als Standard eingestellt hat. Der Kurs1a ist KompoZer-, nicht HTML- oder CSS-Kurs. Aber Stolpern soll auch nicht vorkommen, deshalb immer wieder solche Hinweise. Falls doch etwas zu erklären dir besser erscheint, bitte mitteilen und ich eröffne dann eine "Stolperstein-Wegräum-Seite. Zurück zu em: Bildschirme bekommen immer mehr Pixel je Flächeneinheit, Touchscreens und Laptops auch, das iPhone hat 144dpi. Da wird die mit px gepixelte Seite kleiner als von dir geplant. Wo immer möglich werde ich also px vermeiden. Ende des Hinweises. Inzwischen ist der rechte Container mit 90% vom Rest der Breite noch schmaler.

h) <h5> wird formatiert

<h5> wird öfter als die anderen verwendet, deshalb wird es jetzt vorgezogen und einer von den <h5>-Absätzen von dir ausgewählt. Die Darstellung erscheint bei allen Überschriftebenen fett ausgezeichnet. Deshalb wird für <h5> als Schriftschnitt ausdrücklich "normal" verwendet. Damit die Überschriften deutlich größer sein können, aber bloß nicht so groß wie zur Zeit, wird <h5> kleiner gemacht und erhält eine Schriftgröße von 0.8em. Damit das aber dennoch kein Augenfeuer wird, wird die Zeilenhöhe für <h5> auf 1.4em gesetzt. Bei der Eingabe in das Register 'Text' kann schon die Auswirkung beobachtet werden. Da kann auch der eigene Geschmack zum Tragen kommen. Also ruhig mit den Werten hier experimentieren.

| In einen der <h5>-Absätze klicken | Kontextmenü für 'Inline-Styles' für das <h5> ganz rechts | Register 'Text' | 'Schriftgröße:' 0.8em | 'Zeilenhöhe:' 1.4em | 'Schriftschnitt:' "normal" | OK |

i) Eine allgemeine Regel

<h5> kommt fünfmal zum Einsatz. Damit es hier immer der gleichen Regel folgt, wird der Inlinestyle des einen <h5>-Absatzes verallgemeinert und aus dem Tag entfernt. Dazu gleich die Praxis, weil die einfacher ist, als eine vorangestellte wortreiche Erklärung. Der Dialog für die Inline-Styles des soeben formatierten <h5>, zu erkennen am größeren Zeilenabstand, enthält auch im Register 'Allgemein' eine Schaltfläche 'Extrahieren und allgemeinen Style anlegen'. Und das ist es, die Schaltfläche sagt schon alles. Wird auf die Schaltfläche geklickt, öffnet sich ein weiterer Dialog gleichen Namens. Da alle <h5> die Formatierung bekommen sollen, ist der Radiobutton 'alle Elemente' zu setzen, und ein Häkchen bei 'des gleichen Elemententyps' ist schon da. Bei OK mal aufpassen, weil, schwups, mit dem OK alle <h5> genau wissen, wie sie auszusehen haben.

| In den formatierten <h5>-Absatz klicken | Kontextmenü für 'Inline-Styles' | Register 'Allgemein' | Schaltfläche 'Extrahieren und allgemeinen Style anlegen' | Radiobutton 'alle Elemente' setzen | Ein Häkchen bei 'des gleichen Elemententyps' setzen | OK |

j) Das Versteck der allgemeinen Regel

Wird in einen der <h5>-Absätze geklickt, um den Code in der geteilten Quelltextansicht zu sehen, erkennt Mensch, dass es keinen Inline-Style für <h5> gibt. Auch bei dem Absatz nicht, wo er erfunden wurde. Aber irgendwo muss die Regel ja versteckt sein. Und so kommt die Überschrift dieses Auftrags zu ihrem komischen Text. Hätte ich geschrieben "j) Das interne Stylesheet", hätte vielleicht der eine oder andere jetzt den Kurs beendet. Also wird jetzt das Versteck gefunden.

Der gesamte Code der Webseite besteht aus dem "header" und dem "body". "Body" ist alles was angezeigt und ausgegeben wird. Header ist der Teil mit "Steuerungsanweisungen" für den Browser und vorzüglich zum Verstecken geeignet.

Damit im Quelltext auch der Header zu sehen ist, einfach in der Statuszeile auf <html> linksklicken.
Die Trennlinie über dem Quelltext darf ruhig hoch geschoben und im Quelltext nach unten gescrollt werden. Vor dem schließenden Tag </head> steht jetzt zwischen den Tags <style> und </style> das interne Stylesheet vom Typ "text/css" mit der soeben extrahierten Regel "h5" für ab jetzt alle <h5>s.

"h5" ist die allgemeine CSS-Regel im Stylesheet und <h5> ist das Element "Überschrift" im HTML-Code. Jeder Browser, der "h5" findet, wendet dies automatisch auf alle <h5> an. Das kann für ein spezielles Element <h5> verhindert werden, wenn dieses einen eigenen Inlinestyle im öffnenden Tag besitzt.

Wer jetzt im internen Stylesheet dort aus "h5" ein "h3" macht, wird bei den <h3>s nicht viel sehen, weil bei den Rezepten die <h3>s nur einzeilige Überschriften sind, hat aber erfasst, was passiert. Der Browser (und KompoZer bildet ja mit seinem WYSIWYG den Browser ab) sieht, dass allgemeine Regeln im internen Stylesheet vorhanden sind und wendet die auf alle Elemente des gleichen Elemententyps an.

| In der Statuszeile auf <html> klicken | Im Quelltext das schließende Tag </head> suchen | Vor dem </head> den Inhalt von <style type="text/css"> bis </style> ansehen |

k) Weitere allgemeine Regeln

Da nun ein Stylesheet existiert, kann der CSS-Editor verwendet werden. Er hat ein eigenes Bearbeitungssymbol in der Bearbeitungssymbolleiste, die mit CSS bezeichnete Palette. Er kann auch per Menü 'Extras' geöffnet werden, oder mit dem Tastaturkürzel [F11]. Bitte probieren und den CSS-Eidotr öffnen.

Beim Öffnen werden im Dialog links die Regeln angezeigt, und für "h5" gibt es schon eine Regel. Rechts öffnet sich, wenn links das "h5" gewählt wird, die von dem Dialog mit den Inlinestyles bekannte Auswahl an Registern.

Inlinestyles erreicht Mensch über das Kontextmenü, Stylesheets über den CSS-Editor. (Die untere Quelltextansicht darf wieder Platz machen und nach dem Schließen des CSS-Editors mit OK wieder auf ein Fünftel verkleinert werden.)

Damit ist das Zusammenklicken der Regeln für die anderen <h>s für die komplette Webseite einfach und wird in einem Rutsch erledigt.

Der CSS-Editor ist geöffnet. Z.B. mit [F11]. Wird links oben auf die Palette geklickt, erscheint der Dialog 'Neue Style-Regel'. In der Auswahlliste kann "h1" eingestellt werden. Ein Klick auf die Schaltfläche 'Style-Regel erstellen' öffnet für "h1" die bekannten Register.

Für alle Regeln "h1" bis "h6", "h5" ist ja schon fertig, ist der eine oder andere Wert zum Eintragen im Register 'Text' angegeben.

Hier nun in der Schriftart Courier dafür eine Tabelle. (Tabellen hatten wir nicht bisher im Kurs, deshalb hier der Workaround mit einer Schrift mit "fixed spacing". Fixed spacing ist für jeden Buchstaben und jede Leerstelle die gleiche Breite.) (Hier mitten im Auftrag soweit löschen, dass die Tabelle ganz nachoben kommt.)
Tabelle mit Formatvorschlägen für "h1" bis "h6",
spaltenweise für "h1" bis "h6" zu übernehmen.

                <h1>     <h2>      <h3>     <h4>       <h6>
_____________________________________________________________
Schriftgröße    1.2em    1.1em     1.1em    0.9em     0.9em
Zeilenhöhe      ---       ---       ---      ---       ---
Schriftschnitt ---       ---      Normal    Fett     Normal
Schriftstil     ---       ---       ---    ---      Kursiv
Case     Grossbuchstaben --- --- ---       ---
Ausrichtung   Zentriert   ---       ---    ---       ---
Textattribute   --- Unterstrichen ---    ---       ---
(weiter ohne OK)kein OK    kein OK kein OK kein OK   OK
(aber mit..) neue Regel neue Regel neue Regel neue Regel
_______________________________________________________________________

| CSS-Editor öffnen (Palette in der Bearbeitungssymbolleiste| 'Neue Style-Regel'-Dialog öffnen mit Klick auf die Palette oben links im CSS-Editor | Per Auswahlliste in die Eingabezeile das entsprechende "h,," einsetzen | Schaltfläche 'Style-Regel erstellen', die neue allgemeine Regel "h,," taucht links auf | Werte aus der Tabelle im Register 'Text' übertragen | Ohne OK mit dem nächsten "h,," fortsetzen und Dialog 'Neue Style-Regel' öffnen | usw. bis alle "h,,"-Regeln eingegeben sind | OK |

l) Abschluss

Damit ist die Einheit 3 fast beendet. Meine Aufträge bekommen wie l) hier als Überschrift jetzt nicht mehr den Inlinestyle mit "Fett", sondern einfach die Zuordnung zu einer allgemeinen Regel "h,," für die Überschrift als Absatz mit dem Element <h,,>.

Zu sehen war beim Löschen der Aufträge, wie der "Rezept"-Container unterhalb des "Einheits-Containers diesen mehr und mehr "umfloatete". Dass die linke Spalte in der Breite bis unten bestehen bleibt, kommt in einer der nächsten Einheiten. Jetzt sollen der äußere und der linke Container komplett entfernt werden. Das geht mit Hilfe der HTML-Ansicht oder im Quelltext, wenn HTML schon durchschaut wird. Am Ende gibt es nur den Container mit den Rezepten.
Zum Vergleich dient die Datei http://www.elew.de/kurs1a/seite04.html.

Kurs 1a Version 7, Webseitengestaltung mit KompoZer 0.8b3 Einheit 4 , Textstrukturierung mit Absatzformaten und CSS

l) Abschluss

+ + + Webseite erstellt mit KompoZer 0.8b3 + + + Kurs1a Startseite 4 als Beispiel einer Anwendung + + +

Kurs 1a Version 7, Webseitengestaltung mit KompoZer 0.8b3
Einheit 4 , Textstrukturierung mit Absatzformaten und CSS