Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3

Willkommen:

Das Layout wird um eine Spalte rechts erweitert. Die äußeren Spalten bekommen eine feste, die mittlere Spalte eine flexible Breite. Somit kann die Webseite verschieden breite Besucher-Browserfenster ausfüllen. Das Layout wird damit flüssig. Hierzu werden die Regeln für die Container ausgetauscht und angepasst.

Aufträge:

a) Jede neue KompoZer-Arbeit zuerst speichern

Wird mit dem Speichern begonnen, kann KompoZer Grafikadressen und Verweise auf andere Seiten der Homepage sofort und automatisch relativ angeben. Diese Datei wird als "seite11.html" gesichert. Der Titel wird "Seite 11" lauten und der Autor bist du.

| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog 'Seiteneigenschaften', 'Titel:' Seite 11, 'Autor:' Dein Name | OK | Menü 'Datei' | 'Speichern unter' "seite11.html" |

b) Zwei ID-Selektoren werden vorbereitet

Die Struktur der Seite soll aus einem Außenrahmen "rahmen" bestehen, der oben einen Container "kopf" umschließt, unter dem wiederum sich die drei Spalten "links", "mitte" und "rechts" befinden. Ganz unten schließt ein #sockel-Container die Seite ab.
Mit der Einrichtung von "#rechts" und #sockel wird begonnen. Vorläufig bleiben diese Regeln aber leer.

| CSS Editor | Neue Regel erstellen | Dialog 'Neue Style-Regel', Radiobutton 'Individuelle Style-Regel' setzen | In der Eingabezeile das "#" zu "#rechts" ergänzen | Schaltfläche 'Style-Regel erstellen' | Neue Regel erstellen | Dialog 'Neue Style-Regel', Radiobutton 'Individuelle Style-Regel' setzen | In der Eingabezeile das "#" zu "#sockel" ergänzen | Schaltfläche 'Style-Regel erstellen' | OK |

c) Aus drei vorhandenen class-Selektoren werden ID-Selektoren

Innerhalb des Inhalts-Containers kann viel geschehen. Er selbst ist jedoch einmalig und im Stylesheet, intern wie hier in dieser Kurs-Einheit oder extern in einer eigenen CSS-Datei, mit einem ID-Selektor markant markiert.

Zuerst wird der class-Selektor ".inhalt" im CSS-Editor zum ID-Selekor "#mitte" umbenannt. Die Regel bleibt dabei unberührt.

Ebenso ergeht es dem "Oben"-Container. Als Kopf bleibt er einmalig, da passt ein ID. Der Sockel-Container verliert jedoch dabei seine Klasse. Das wird im Hinterkopf vermerkt und später restauriert. Jetzt wird nur aus ".oben" ein "'kopf".

Das Menü befindet sich schon in einer linken Spalte. Somit wird für diese Spalte aus ".navi" das "#links".

| CSS Editor | Die Klasse ".inhalt" wählen | Die Schaltfläche 'Bearbeiten' anklicken, diejenige links oben zwischen den blauen Pfeilen und dem dicken roten x | ".inhalt" mit "#mitte" in der Eingabezeile überschreiben | Die Klasse ".navi" wählen | Die Schaltfläche 'Bearbeiten' anklicken | ".navi" mit "#links" in der Eingabezeile überschreiben | OK |

d) Wiederherstellen der bisherigen Form

Soweit ist noch wenig geschehen, außer das mit dem Verlust der Klassen das Layout verloren ging. Damit den drei Containern auch die Formate erhalten bleiben, wird über das Kontextmenü des jeweiligen <div class=" ???"> in der Statuszeile dreimal die Zuweisung der Klasse aufgelöst und dem Container der ID-Selektor neu zugewiesen.

| Die Einfügemarke in einen der drei Container "oben", "inhalt" und "navi" setzen | In der Statuszeile mit Rechtsklick das Kontextmenü öffnen | Bei 'Klassen' die Zuweisung aufheben | Bei 'ID' die Zuweisung herstellen | Das Ganze für die zwei anderen Container wiederholen |

e) Ordnen der Regeln im Stylesheet

Im Stylesheet lassen sich #rahmen, #kopf, #links, #mitte, #rechts und #sockel untereinander anordnen und verdeutlichen damit auch für später einen schnellen Überblick über die Struktur. Im linken Teil des CSS-Editors können mit den blauen Pfeiltasten die ID-Selektoren wie erwähnt sortiert werden. Als Übung sollen mit "body" angefangen die allgemeinen Regeln alphabetisch sortiert werden. Es wurde schon von Selektoren gesprochen.  Die allgemeinen Regeln sind auch welche. Der Name lautet Typ-Selektor.
Unter allen Typ-Selektoren folgen alphabetisch alle ID-Selektoren und dann alle Klasse-Selektoren. Das ist nur eine Übung. Jeder Autor wird seine eigene Ordnung lieben.

| CSS-Editor | "body", "a", "a:hover", "h1" bis "h5" und "li" untereinander mit den blauen Pfeil-Auf und -Ab anordnen | "#rahmen" bis "#sockel anordnen | Mit ".hier" und ".zeile" die Ordnung der linken Seite im CSS-Editor beenden | OK |

f) "Einquetschen" eines neuen div-Containers in der Quelltext-Teilansicht

Die Container haben die Styles und damit die vorgesehenen Formate zurück und in der Statuszeile ist bei den divs die Umstellung auch mit den ID-Selektoren zu erkennen.
Ein neuer div-Container wird im Quelltext gleich hinter den Kopf-Container gesetzt. Das Editieren in der Quelltext-Teilansicht und die Auswahl einzelner oder zusammengesetzter Elemente zur Anzeige durch Setzen der Einfügemarke platziert den KompoZer an die Spitze der freien Webeditoren. Das ist seit Herbst 2009 seit der 0.8 erstmals möglich und funktioniert mit jeder Version besser. Hier nun das "Einquetschen" eines Elementes:

Wird in der Statuszeile <div>#rahmen> linksgeklickt, erscheint im Quelltext oben das öffnende Tag dieses Containers, gefolgt vom Code des "Kopf"-Containers. Dahinter wird <div id="rechts">RECHTS</div> eingefügt und in die Normalansicht geklickt. Der neue Container ohne eine Deklaration ordnet sich sofort als nächstes Blockelement unter dem Kopf an. Erhält der zugehörige ID-Selektor die Dekaration float: right;, schrumpft der Container rechts auf den Platzbedarf seines Inhalts zusammen.

| In der Statuszeile <div #rahmen> linksklicken | In der Quelltextansicht hinter den schließenden Tag von #kopf dies hier einfügen:  <div id="rechts">RECHTS</div> | In die Normalansicht klicken | Im CSS-Editor beim ID-Selektor "#rechts" im Register 'Allgemein' ein "float: right;" eintragen | OK |

g) Die Mitte fügt sich ein

Der "Links"-Container enthält die Navigation. Seine Breite (width) und seine Innenabstände (padding) werden mit Kopieren und Einfügen im Register 'Allgemein' auch auf den ID-Selektor #rechts übertragen. Die Symmetrie wird vervollständigt, wenn die Mitte auch den Außenabstand links genauso rechts erhält. Im Register 'Allgemein' kommt bei #mitte zu margin-left: 8.5em; ein margin-right: 8.5em; dazu.

| CSS-Editor | #links auswählen | Die Styles für padding und width in die Zwischenablage kopieren | #rechts auswählen | Im Register 'Allgemein' die Styles hinzufügen | #mitte auwählen | Im Register 'Allgemein' das margin-right: 8.5em; hinzufügen | OK | [Strg]-[S] |

h) Das Layout wird flexibel

Der Rahmen verliert seine feste Breite und erhält die Bildbreite 90%. Die beiden äußeren Spalten haben eine feste Breite und die Mitte erhält alles, was von der Rahmenbreite übrige bleibt. Damit ist das Layout in der Lage, sich allen Fensterbreiten der Besucherbrowser anzupassen. Wird die Fensterbreite zu klein, ragt der Text-Container mit seiner festen Breite rechts heraus. Alle anderen Container außer ".navi" passen sich der Breite an.

| CSS-Editor | #rahmen auswählen | Im Register 'Box' die Breite auf 90% ändern | OK |

i) Die Seite links und rechts mit Notiz-Platzhaltern füllen

Große Portale zeigen oft nur Teile von Meldungen, dafür jedoch eine ganze Menge an Meldungen auf einer Seite. Wer den Meldungen nachgehen will, klickt dann auf einen Verweis wie z.B. "mehr". Für diese Webseite wird auf solche Teilmeldungen mit dem Verweis auf "mehr" verzichtet. Für die linke und rechte Spalte werden aber Platzhalter für so etwas als Prinzip angelegt. Die Platzhalter sind fünf "Notiz"-Container

Hierzu wird in der Statuszeile auf <div#links> linksgeklickt, was leicht ist, wenn die Einfügemarke dort auch hineingesetzt wird. Vor dem schließenden Tag </div> kann in der Quelltext-Teilansicht zweimal  "<div>Notiz</div>" eingefügt werden. Ein Speichern gleich danach lässt in der Normalansicht die neuen Notiz-Container rot gepunktet eingerahmt erscheinen. Das wird dreimal auch bei der linken Spalte wiederholt. Einfach in der Quelltext-Teilansicht das Wort "RECHTS" mit dreimal <div>Notiz</div> überschreiben.

| Einfügemarke irgendwo in die linke Spalte setzen | In der Statuszeile auf <div#links> linksklicken | In der Quelltext-Teilansicht vor den schließenden Tag zweimal "<div>Notiz</div>" einfügen | [Strg]+[S] | Einfügemarke irgendwo in die rechte Spalte setzen | In der Statuszeile auf <div#rechts> linksklicken | In der Quelltext-Teilansicht das Wort "RECHTS" durch dreimal "<div>Notiz</div>" ersetzen | [Strg]+[S]

j) Die Platzhalter werden formatiert

Zur Erinnerung, wie ehemals im Kurs noch mit Inline-Styles gearbeitet wurde, wird bei einem Notiz-Container mit dessen Inline-Styles experimentiert. Um besser den Container-Rahmen sehen zu können, wird in der geteilten Ansicht mit der 'Vorschau' gearbeitet.

Erwünscht ist ein silberner Rahmen mit 1px Stärke, einem Innenabstand rundherum von 0.1em, eine Schriftgröße "klein" und einem Außenabstand unten von 0.5em. Sobald das Ergebnis gefällt, wird aus den Inlinestyles die Deklaration der Klasse ".notiz". Danach braucht nur noch jedem Notiz-Container via Statuszeile und Kontextmenü dieser Klassen-Selektor zugewiesen zu werden.

| Für die obere Ansicht 'Vorschau' wählen | In ein Wort "Notiz" klicken | In der Statuszeile das zugehörige <div> rechtsklicken | Im Kontextmenü 'Inline-Styles' wählen | Im Register 'Begrenzungen' ein Häkchen bei 'Alle vier Seiten verwenden den gleichen Rahmenstil' setzen und die Einstellungen vornehmen: 'Oben:' solid, 'Breite:' 1px und 'Farbe:' silver | Im Register 'Box' den 'Außenabstand: Unten' mit 0.5em und alle Innenabstände mit 0.1em festlegen | Im Register 'Text' die 'Schriftgröße:' klein wählen | OK | Wieder in der Statuszeile auf das zugehörige <div> rechtsklicken | Kontextmenü 'Inline-Styles' | Schaltfläche 'Extrahieren und allgemeinen Style anlegen' | Im Dialog  Radiobutton für 'alle Elemente' setzen, Häkchen bei 'der Klasse:' setzen und als Namen "notiz" eintragen | OK | Allen restlichen Notiz-Containern die neue Klasse ".notiz" zuweisen |

k) Der Sockel wird den Notizen angepasst

Zuerst wird dem untersten Container die nicht mehr existierende Klasse ".oben" genommen. Dann erhält der Sockel die Zuweisung zu "#sockel". Damit der Container sich unten anordnet und nicht eventuell zu schweben anfängt, wird alles Schweben bei #sockel im Register 'Box' mit der 'Aufhebung:' "beides" verhindert. Die Begrenzung wird von .notiz übernommen: "border: 1px solid silver;". Die Textausrichtung ist mittig. Damit der silberne Rahmen mit denen von Notiz fluchtet, werden die Außenabstände links und rechts auf 0.5em eingestellt.

| In die Fußzeile klicken | Kontextmenü von <divclass="oben"> | Bei 'Klassen' die Zuweisung zu ".oben" entfernen und bei ID zu "#sockel" setzen | CSS-Editor | #sockel wählen | Register 'Box' | 'Aufhebung:' beides und Außenabstände für rechts und links mit 0.5em festlegen | Register 'Text' | 'Ausrichtung:' Zentriert | Register 'Allgemein' | Den Style "border: 1px solid silver;" zu den anderen hinzufügen | OK |

l) Die Seite wird fertiggestellt

In den "Kopf" kommt ausschließlich die <h1>-Überschrift "3-Spalten-Layout mit Kopf und Sockel". Die Aufträge sind alle gelöscht. Übrig bleibt in der "Mitte" der Blindtext "Schuhmacher und Schütze" von der im Menü verlinkten Seite mit Blindtexten. Deine Seite baue bitte selbst aus. Mein Beispiel enthält in den Notizen weitere Blindtexte mit einem Anfang als Anreißer, gefolgt von "mehr" als Verweis auf die jeweilige Quelle. Die rechte Spalte habe ich breiter als hier gewählt. Zu sehen unter http://www.elew.de/kurs1a/seite11.html.

Schuhmacher und Schütze (1039 Zeichen). Blindtextbeispiel von der im Menü verlinkten Seite:

Ein Holzschuhmacher und ein Bogenschütze mit Brot- beziehungsweise Wassersack durchschritten eine Saccharose-Pfütze. Zwar war sie gottlos, aber zäh wie Lack. Der Schütze sprach: "Wir müssen sie entwässern. Nur so wird sie zu gutem Scheuersand. Jedoch kann ich sie schwerlich trockenbessern. Mein Sack enthält den falschen Gegenstand." Der Holzschuhmacher sprach: "Oh, ich vermute, du willst mein sittsam frommes Beutelbrot - auf dass es zuckernd sich zu Tode blute und selbstvergessen stirbt den Opfertod." "Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm. Der ärgste Tempelräuber ist gerechter. Mein Brot, verdammt, ist heilig. Und kein Schwamm!" So zogen sie denn lauthals schreiend weiter, teils sakrosankt, teils niedersäbelnd schroff. Noch heute singen sie dem Anstaltsleiter das Lied vom Pfützlein mit dem Zuckerstoff.