Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1
Übung 11, Das Layout wird ergänzt zu 3 Spalten und "verflüssigt"

Ziel der Übung 11:

Das Layout wird um eine Spalte 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 flüssig.

Vorgehensweise:

Die Regeln für die Container werden ausgetauscht und angepasst.

Aufträge:

a) Diese Datei wird als "ziel11.html" gesichert. Der Titel wird "Ziel 11" lauten und der Autor bist du.

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

b) Die Struktur der Seite soll aus einem Außenrahmen "rahmen" bestehen, der oben einen Container "kopf" umschließt, unter dem die drei Spalten "links", "mitte" und "rechts" sich befinden. Mit diesen Namen werden die betreffenden Klassenselektoren abgelöst. Mit der linken und rechten Spalte wird jetzt begonnen, indem die ID-Selektor "#links" und "#rechts" eingerichtet werden. 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 "#links" ergänzen | Schaltfläche 'Style-Regel erstellen' | 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' | OK |

Eine Klasse wie bei .oben oder .mitte hätte auch bei "rechts" angewendet werden können. Ein Grund, jetzt zu etwas Neuem zu wechseln, ist KompoZer weiter kennen zu lernen. Die Schreibweise der Klasse enthält den Punkt vor dem Namen, bei der individuellen Regel ist es das Doppelkreuz # vor dem Namen.

Hinweis zu Selektoren und ID-Selektoren im Besonderen:

Bisher wurden allgemeine Regeln eingesetzt, auf dieser Seite z.B. "li". Dieses li ist ein Typ-Selektor. Alle Listenelemente werden mit den Styles von li  verbunden.
".navi" ist ein class-Selektor. Die Styles werden mit beliebig vielen und beliebig verschiedenen Elementen verbunden, denen diese Klasse zugewiesen wurde. Wird die Regel zum Beispiel jedoch div.navi genannt, dann folgen nur <div>-Elemente dieser Regel, die diese Klasse haben. Auf ein <p class="navi"> wirken sich dann die Styles von div.navi nicht aus.

Nun ist es jedoch so, dass auch Identifizierer für Scripte benötigt werden. Damit Eindeutigkeit herrscht, darf nur ein Element einer einzelnen HTML-Datei diese ID haben. Der Container "rechts" ist nur einmal vorhanden, "rechts" wird auch nie anderswo hineingeschachtelt, obwohl das mit <divs> ja vorkommt. Also ist die Zuweisung von #rechts zu einem Container auch umgekehrt ein Merkmal für die Einmaligkeit dieses Containers. Bekommt der Rahmen als <div>-Container die Zuweisung <div id="rahmen"> dann folgt er wie bei einer Klasse den in der Regel enthaltenen Styles, genauer gesagt, die in der Regel #rahmen enthaltenen Deklarationen werden auf ihn angewendet.
Da der Rahmen-Container aber identifizierbar ist, er ist ja der einzige mit dem ID-Selektor #rahmen, kann er auch als Ziel mit href="rahmen" für den ins Leere führenden Link in der Navi dienen. Das erspart den aus vorigen Übungen bekannten Anker "top".

c)Die vorhandenen Klassen für "aussen", "oben" und "inhalt" werden umbenannt in #rahmen, #kopf und #mitte, bleiben aber mit den Deklarationen vorlaufig unverändert.

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

d) Zu sehen ist eine Webseite, die über die ganze Fensterbreite geht, ganz wie der Fließtext in der ersten Übung, als im Kurs noch keine Formate erarbeitet worden waren. Außer bei den Links werden die alten Regeln auf dieser Seite nicht mehr angewendet und der Browser eines Besuchers hat somit freie Hand, das Layout und die Schriften nach seinen Standards zu gestalten. Ohne CSS-Angaben wendet ein Browser sein ihm eingebautes Stylesheet an, dass mit dem zur Seite gehörigen Stylesheet ergänzt oder ausgehebelt wird.
Da der "Inhalt" keinen Abstand 'margin-left' mehr hat, kann der Text die Navigation umfließen.

Die Zuweisungen der alten Regeln sind bei den betreffenden Elementen zu entfernen und die neuen Regeln passend zuzuweisen.

| In die Überschrift klicken | In der Statuszeile <div class="oben"> rechtsklicken | Kontextmenü 'Klassen', Häkchen für 'oben' entfernen | Kontextmenü für das nun seiner Klasse entledigte <div> wiederholen | ID | Häkchen bei 'kopf' setzen |

| In den Textkörper klicken | In der Statuszeile <div class="inhalt"> rechtsklicken | Kontextmenü 'Klassen', das Häkchen für 'inhalt' entfernen | Kontextmenü 'ID für dieses <div> und Häkchen bei 'mitte' setzen |

| Irgendwo in die Seite klicken | In der Statuszeile <div class="aussen"> rechtsklicken | Kontextmenü 'Klassen', Häkchen für 'aussen' entfernen | Kontextmenü 'ID' für dieses <div> wiederholen | Häkchen bei 'rahmen' setzen |

Die Container haben die Styles zurück und in der Statuszeile ist bei den divs die Umstellung auch angekommen.

d) Die neue Regel #rechts wird dazugenommen und ein <div id="rahmen">-Container dafür im Quelltext gleich hinter den Kopf gesetzt.

| 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 |

Ohne Deklaration ordnet sich der neue Container als nächstes Blockelement unter dem "Kopf" an.

e) Der Container links umschließt die Navigation. Dazu ist im Quelltext der "navi-Container zu identifizieren, damit vor ihm <div id="links"> und nach ihm </div> eingefügt werden kann.

| In der Statuszeile <div#rahmen> linksklicken | Im Quelltext vor <div class="navi"> ein <div id="links"> einfügen | Vor <div id="mitte"> einen schließenden Tag </div> einfügen | In die Normalansicht klicken | [Strg]-[S] |

f) Ehe "rechts" an den vorgesehenen Platz rückt, sollen die anderen Breiten neu verteilt werden. Der Rahmen bekommt 95% der vom Besucher zur Verfügung gestellten Fensterbreite.

| CSS Editor | Bei der Gelegenheit die ID-Selektoren einmal nach der Reihenfolge sortieren, #rahmen zuerst, gefolgt von #kopf", dann #links, #mitte und #rechts | #rahmen wählen | Register 'Box', 'Breite:' 95% | OK |

Im Browser, wie auch bei KompoZer, nimmt der Rahmen fast die Bildbreite ein (95%). Das Rahmenlayout ist nun schon verflüssigt. 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.

g) Die Klasse .navi wird auf den Hintergrund reduziert, dafür bekommt #links seine Deklaration.

| CSS Editor | Regel .navi wählen | Register 'Allgemein' | Alle Styles löschen und nur background-color: #eeddff; stehen lassen | Regel #links wählen | Register 'Box', 'Breite:' 8em, 'Puffer:' Links, 'Außenabstand: Unten:' 1em | OK |

h) Die linke Spalte kann nun nach unten den nächsten "navi-"Container erhalten, z.B. für einen Hinweis zum eigenen Internetauftritt. Auch noch weitere. An dieser Stelle reicht noch einer als Beispiel mit drei Zeilen mit "Werbung, Werbung, Werbung" als Platzhalter aus.

| In die Navi klicken | In der Statuszeile <div class="navi"> linksklicken | An den Quelltext dieses Containers diesen Code anfügen:<div class="navi">Werbung<br>Werbung<br>Werbung</div> | Speichern |

Die Gestaltung einer Webseite durch Codieren im Quelltext ist nun nicht ganz im Sinne der Erfinder von WYSIWYG-Editoren. Aber KompoZer ist ja nicht nur solch einer. Die Ergänzung mit der Quelltextansicht im geteilten Fenster seit der Beta 0.8 erlaubt das parallele Benutzen je nach Zweck und Vorliebe. Ein großer Vorteil.

h) Die mittlere Spalte soll die Hintergrundfarbe und die Breite verlieren. Die Außenabstände werden nachjustiert, womit der Zweck für die Innenabstände entfällt.

| CSS Editor | Die Regel #mitte auswählen | Register 'Allgemein' | Die Deklaration für #mitte  lautet : font-size: 0.8em; margin-left: 11em; margin-right: 11em; | OK |

i) Die Fensterbreite kann variiert werden und der Textcontainer reagiert darauf. Der Außenabstand rechts ist für den rechten Container, der nun noch an seinen Platz gerückt werden soll. Die Deklaration soll die gleiche sein wie links, nur dass mit float: rechts; der Container an den rechten Rand rückt.

| CSS Editor | Regel #rechts wählen | Register 'Allgemein' | Die Deklaration float: right; width: 8em; eingeben | OK |

j) Damit die rechte Spalte etwas Inhalt erhält, einfach den Werbung-Container mehrmals hineinsetzen.

| In den Text "Werbung" klicken | In der Statuszeile <div class="navi"> linksklicken | Menü 'Bearbeiten', 'Kopieren' | Zwischen R und E vom Text "RECHTS" klicken | Menü 'Bearbeiten" 'Einfügen' | Beliebig die Einfügemarke zwischen die Buchstaben von "RECHTS" setzen und das Einfügen wiederholen | Die Buchstaben von "RECHTS" entfernen |

Ein <br> oberhalb von der rechten Spalte sorgt für Abstand, wenn das als Basteln nicht durchgeht, sorgt ein Style mit Außenabstand oben von 1em dafür. Die Überschrift muss noch geändert werden, und vor allem gehören Inhalte auf die Seite.
Für den Code verzichte ich auf Rechte. Darf jeder ohne Quellangabe verwenden.
Die Container habe ich mit KompoZer solange manipuliert, bis das Layout stand, ohne bei anderen Autoren nach Beispielen zu suchen. Der Dank geht also an KompoZer, vielleicht mal Kaze auf http://kompozer.net/ was überweisen.
Du hast fertig, wenn nur noch der "Lorem"-Text in diesem Container übrig bleibt.
Aber etwas war angekündigt und ist hier nicht mehr erschienen: Auf der Lösung ist der interne Link auf den ID-Selektor #rahmen bei der Schaltfläche ohne Ziel zu sehen.

Lorem ipsum dolor sit amet, consectetuer 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 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.