Ziel:

Die Seite 4a wird durch eine auf Listen beruhende Navigation ergänzt.

Aufgabe:

a) Speicher diese Seite auf der Festplatte und dann noch einmal für die Aufgabe als "seite05a.html".
Für diese Seite wurde das Ergebnis "Seite 4a" übernommen, und der ganze Text hier in den Container ".rechts" eingefügt. Die Aufgabe soll aber als ein unabhängiges Projekt weitergeführt werden. Deshalb bekommt die CSS-Datei, das externe Stylesheet, einen neuen Namen. Andernfalls würden Änderungen im externen Stylesheet auch rückwirkend die Seite 4 verändern. Kopiere die Datei "seite04.css" auf deiner Festplatte und nenne die Kopie "seite05.css". Lösche die erledigten Aufträge, lasse aber alles außerhalb dieses Containers für die Aufgabe stehen.

b) Ändere den Link im header dieser Seite, um das neue externe Stylesheet "seite05.css" richtig einzubinden: Quelltext / Zeile 7 / seite05.css.

c) Ändere mit dem CSS Editor, er zeigt den neuen Dateinamen an, die Textausrichtung in der Regel '.oben' auf zentriert.

d) Für die Navigation, die als Textzeile von der Seite 3 stammt, bietet sich eine unsortierte Liste an. Klicke in die Zeile von "Startseite" bis Gästebuch" oben und markiere den ganzen Absatz durch Linksklick auf den Absatz-Tag unten. Klicke auf den Button 'Unsortierte Liste' in der Format-Symbolleiste in der Mitte oben. Platziere den Mauszeiger hinter das "e" von "Startseite" und drücke die Eingabetaste. Entferne die Leerzeichen vor "Seite 2". Erschien  das Listensymbol, das "bullet", vorher vor der "Startseite", erscheint jetzt wieder eines vor "Seite 2" in der neuen Zeile. Wiederhole das mit den drei weiteren Links.

e) Der Container <div class="aussen"> hat eine feste Höhe. Die Verwendung der Pixelgrößen macht das Layout "fest", im Unterschied zu Größenangaben in Prozent, wo das Layout dann als "flüssig" bezeichnet wird. Die Browser Firefox und Opera halten die Höhe des Aussen-Rahmen bei der Umwandlung der Textlinks in die vertikale Liste weiterhin ein, und schieben das Foto zusammen mit dem Links-Rahmen nach unten hinaus, so wie diesen Text hier rechts von Anfang an. Der Internet Explorer dagegen streckt den Aussen-Rahmen, so dass das Foto im weißen Hintergrund des nun größeren Aussen-Containers bleibt.
KompoZer verhält sich in der Darstellung wie der Firefox.

Durch die Liste wurden beide Spalten nach unten verschoben. Die Liste nimmt fast die ganze Breite des Aussen-Rahmens ein. KompoZer macht auf Wunsch diese Ausdehnung sichtbar: Menü Ansicht / Häkchen bei Bereichskonturen.

f) Ohne Floaten wurden die Listenelemente standardmäßig untereinander angeordnet. Füge mit dem CSS Editor die Regel für alle Elemente li ein:
CSS Editor / Palette für eine neue Regel klicken / Oberste Auswahl 'Style-Regel für Elemententyp' nehmen / Die neue Regel "li" nennen / Schaltfläche 'Style-Regel erstellen' /Register 'Box', Puffer: links / OK.
Die Listenelemente nehmen jetzt nebeneinander nur den benötigten Platz ein.

g) Das Foto rutscht mit seinem Rahmen nach oben, es folgt der Einladung zum Umfließen. Als Aufhebung wird der Zeilenumbruch verwendet.
Klicke in die "Navigation", um in der Statuszeile <ul>, den unsortierte-Liste-Tag linkszuklicken.


Wechsel in den Quelltext und setze gleich hinter den schließenden Tag </ul> , im Bild 2 Zeile 28, zwei Zeilenumbrüch mit zweimal <br>.

h) Sollte der Wunsch bestehen, den Quelltext gefällig anzuordnen, Bild 3, das kannst du vergessen. KompoZer, wie auch schon immer der Vorläufer Nvu,  ändert das wieder zurück.

Noch etwas: Wenn KompoZer mal zickt, der Mauszeiger will partout irgendwo nicht hin, das Layout müsste irgendwie anders aussehen, und tatsächlich, der Browser zeigt es wie erwartet, oder eine Auswahlliste will nicht öffnen, dann alles speichern und KompoZer neu starten. Nach stundenlanger Arbeit ist er dann wieder "frisch". Oder es ist ein Bedienungsfehler.

i) Durch den zweiten Zeilenumbruch ist der standardmäßige Platz der linken Spalte wieder links. Das Umfließen wurde aufgehoben.
Klicke auf "Startseite". In der Statuszeile erscheint von rechts nach links der <a>-Tag für den Hyperlink, ein <li>-Tag und ein <ul>-Tag. Wechsel in den Editiermodus 'HTML-Tags'.
Zu sehen sind alle öffnenden <li>s und <a>s gemeinsam.
Wechsel in den Editiermodus 'Vorschau'.

j) Die "bullets" sollen weg und ein gewisser Abstand zueinander soll eingehalten werden:
CSS Editor/ Regel li anklicken / Register 'Listen' / Listentyp (Stil): Schauen, was es so gibt, dann "kein" wählen / Register 'Box', Außenabstand Rechts: 5px / OK

k) Klicke hinter die "4" von "Seite 4" und füge mit der Eingabetaste eine Leerzeile ein und schreibe "Seite 5" an diese Stelle.
KompoZer hat kein <br> eingefügt, sondern die Liste mit einem neuen Listenelement erweitert. Im Unterschied zu den anderen Listenelementen ist da noch kein Link.

j)  Markiere zum Verlinken "Seite 5" und öffne den Dialog mit [Strg]+L]. Schreibe als Linkadresse nur das Gatterzeichen #. Das ist ein Anker ohne Namen und ergibt einen "Verweis nach Nirgends". Der Besucher ist ja auf Seite 5. Das Menü hat zur Vermeidung von Verwirrung immer gleiche Anordnung und gleiches Aussehen. Da muss dieser sinnlose Verweis in Kauf genommen werden. Aber ein neues Laden der vorhandenen Seite muss nicht sein. Deshalb das #, das erlaubt, auch "Seite 5" wie die anderen Links erscheinen zu lassen. Das ergibt ein einheitlich wirkendes Menü.

k) Überschreibe "Gästebuch" mit "Seite 6" und verlinke das auch nach "#".
Wechsel in den Editiermodus 'Normal

l) Erzeuge die Regel "a:hover", die gilt dann für alle Links, die die Maus berührt, mit der Textfarbe "color: #990000;" und der Hintergrundfarbe "background-color: #cccccc;"

Falls die Anleitung wie gewohnt noch erforderlich ist, dann markiere von hier...
CSS-Editor mit F11 öffnen / Palettensymbol oben links für eine neue Regel anklicken / in das Eingabefeld "a:hover" schreiben, der CSS-Editor markiert selbst passenderweise 'Erweiterte individuelle Style-Regel' / Schaltfläche 'Style-Regel erstellen' / Register 'Text, Farbe: #990000 / Register 'Hintergrund' Farbe: #cccccc / OK
... bis hier.
 
m) Erzeuge die Regel a für alle Links, die die standardmäßige Unterstreichung entfernt: Im Register 'Text' das Häkchen setzen bei Textattribute: keine / Register 'Box' Innenabstand oben und unten: 1px, rechts und links: 5px / OK

n) Für das ebenmäßige Aussehen des Menüs wird dieses Style-Paket für die Regel li vorgeschlagen:
border: 1px solid #999999;
float: left;
list-style-type: none;
height: 20px;
margin-right: 5px;
Den CSS Editor hierzu öffnen, Klick auf li und im Register 'Allgemein' obige Styles aus der Zwischenablage einfügen. Der CSS Editor hat in dem ersten Style drei Zeilen zusammengefasst, Breite, Stil und Farbe. Float: left reiht das Menü waagerecht auf. List-style-type: none nimmt die Bullets weg.

Damit  ist die Webseite fertig. Alle Texte oben und bis "(Ende des Textes zum Löschen.)" löschen. Den "Mit-diesem-Beispiel-Text" als bleibenden Inhalt der rechten Spalte stehen lassen. Das Ergebnis zum Vergleichen ist Seite 5a.
(Ende des Textes zum Löschen.)
Mit diesem Beispiel wurde erreicht:

Ein Layout mit der festen Breite von 900px (Rahmen von <div class="aussen">) enthält

- über die ganze Breite einen Container ".oben" mit 70px Höhe,
- darunter ein Menü mit einer ungeordneten Liste
- eine Spalte mit links 400px Breite des Fotos und
- eine Spalte  rechts mit der Breite 480 px.

Das feste Layout ist gut für eine bestimmte Bildschirmbreite, bei kleinerem Fenster jedoch treten Scrollbalken auf, und bei größerer Bildbreite wirkt das Layout ziemlich verloren. Das Layout sollte daher besser von "fest" (Größen in Pixeln) auf "flüssig" (Größen in Prozent) umgestellt werden.

Die Webseite enthält zwischen <body> und </body> keine Formatierungen.