Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1, Version 6 vom 7.1.09
Übung 3 , Textstrukturierung mit Absatzformaten

Zurück zur Startseite

Willkommen:

Die in der KompoZer-Format-Symbolleiste1-Auswahlliste für die Absatzformate angebotenen Absätze werden nun angewendet. Wie immer wird auch diese mit KompoZer geladene neue Übung zuerst unter einem neuem Namen gespeichert. (ziel03.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 wird ein Browser per Schaltfläche 'Vorschau' mit der in KompoZer bearbeiteten Seite geladen.)

Diese Seite muss zur Weiterarbeit mit KompoZer 08b1 geladen sein. Wenn noch nicht geschehen, Kompozer 0.8b1 also starten und die Übung 3 von der Webadresse http://www.elew.de/kurs1a/uebung03.html laden. Falls nicht alle Symbolleisten zu sehen sind, per Menü alle zur Ansicht bringen. Während der ganzen Aufgabe wird mit der geteilten Ansicht gearbeitet, ein Fünftel der Fensterhöhe für den Quelltext sollte aber reichen.

Aufträge:

a) Seite sichern

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

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

b) Die Seite kommt in einen Gesamtcontainer

Zur Zeit stehen die Aufträge in einem formatierten Container. Daran schließt sich unten ein weiterer Container an, bei dem nur die Schrift formatiert ist. Beide 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 per Linksklick auf <body> in der Statuszeile oben in der Normalansicht alles markiert, ist in der Quelltext-Teilansicht der Code des oberen Containers gleich hinter dem <body>-Tag 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.

| Auf <body> in der Statuszeile klicken | In der Quelltext-Teilansicht vor dem ersten <div> ein "<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 Übung 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 Container mit dem Inlinestyle "float: left;" im Register 'Box' bei 'Puffer:' mit einem "Links" eingebaut werden.

| In die Normalansicht des "Übungscontainers" 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 720px der Übung noch genügend Platz, befindet sich der zweite Container jetzt schon oben rechts. Wenn nicht, sorgst du gleich dafür.
Wird das KompoZerfenster nach links zusammmengeschoben, 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 der Übungstext auf der Breite von 700px besteht und nur noch mit waagerechter Bildlaufleiste gelesen werden kann. Die feste Breite von 700px wird 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 die Mindestbreite von 500px.

| In die Normalansicht des "Übungscontainers" 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 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:

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 #000033 von <body> bekommt der Hintergrund der Rezepte ein Grau mit Blaustich. Grau wäre #ccc mit gleichen Anteilen von R,G und B. Die neu eingesetzte Hintergrundfarbe ist #ccf. Dazu passt dann für die Schrift die Farbe von <body> #003. Da der Container mit der Übung andere Inhalte hat 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: #000033;
font-size: 1em;
background-color: #ccccff;
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 Drucktechnik 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.

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 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 mächtig 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". Wer jetzt dort aus <h5> ein <h3> macht, wird nicht viel sehen, weil 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> analysieren |

k) Weitere allgemeine Regeln

Da nun ein Stylesheet existiert, kann der CSS-Editor verwendet werden. Er hat eine eigene Schaltfläche in der Bearbeitungssymbolleiste, die mit CSS bezeichnete Palette. Er kann auch per Menü 'Extras' geöffnet werden, oder mit dem Tastaturkürzel [F11]. Beim Öffnen werden im Dialog links die Regeln angezeigt, und eine für <h5> gibt es schon. Rechts öffnet sich, wenn links das <h5> gewählt wird, die von 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 verkleinert werden.)

Damit ist das Zusammenklicken der Regeln für die anderen <h>s einfach.
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. Hier nun in der Schriftart Courier eine Tabelle. Tabellen hatten wir nicht bisher im Kurs, deshalb hier der Workaround mit einer Schrift mit "fixed spacing".
Tabelle mit Formatvorschlägen für <h1> bis <h6>, spaltenweise
für <h1> bis <h6> "in einem Aufwasch" 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 entspechende <h..> einsetzen | Werte aus der Tabelle übertragen | Ohne OK mit dem Schritt 2 fortsetzen und Dialog 'Neue Style-Regel' öffnen | usw. bis alle <h,,>-Regeln eingegeben sind | OK |

Damit ist die Übung 3 fast beendet. Zu sehen war beim Löschen der Aufträge, wie der "Rezept"-Container unterhalb des "Übungs-Containers diesen mehr und mehr "umfloatete". Dass die linke Spalte in der Länge bestehen bleibt, kommt in einer der nächsten Übungen. Jetzt schrumpft der linke Container zu einer Schaltfläche, wenn in seinem Inlinestyle die Breite von 50% und die Mindestbreite gelöscht werden. Nur der Link soll erhalten bleiben

Zum Vergleich dient die Datei http://www.elew.de/kurs1a/ziel03.html. Zurück zur Startseite

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1, Version 6 vom 7.1.09 Übung 3 , Textstrukturierung mit Absatzformaten

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1, Version 6 vom 7.1.09
Übung 3 , Textstrukturierung mit Absatzformaten