Einheit 8 Deutschlandfunk Tagesschau Wikipedia Kurs-Startseite

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3

Kurs-Einheit 8 , Navigationscontainer mit Textlinks

Willkommen

Die Seite soll mit drei <div>-Containern innerhalb des äußeren Rahmens strukturiert werden. Die Navigation kommt in einen dieser drei Container und mit diesem nach rechts auf die Seite. Neue Regeln für die Container werden erstellt und eingesetzt. Auf Unterseiten für eine Homepage wird verzichtet. Dadurch wird die Einheit kürzer und geht schneller vorbei. Es entfällt damit die Notwendigkeit für ein externes Stylesheet. Das wurde vom letzten Ergebnis wieder in den Header kopiert und mutierte somit per Hand zum internen Stylesheet. Für die Arbeit mit dem CSS-Editor ergibt das keinen Unterschied. Das ist nicht zum Nachahmen gedacht, der Unterschied soll aber noch einmal erwähnt werden:
Auf das externe Stylesheet verlinkt im Header diese Zeile:

<link rel="stylesheet" href="seite07.css" type="text/css">

Wird "seite07.css" in den Header dieser Einheit eingefügt, gehört das zwischen den öffnenden Tag
<style type="text/css"> und den schließenden Tag </style>, wie im Quelltext dieser Seite nun zu sehen.

Um trotz fehlender Unterseiten ab jetzt dennoch eine kleine Navigation zu behalten, werden beliebige externe Seiten im Menü verlinkt, wie oben in der Normalansicht zu sehen.

Aufträge:

a) Die Einheit schon mal als Ergebnis sichern

Von der Normal-Ansicht ein Fünftel für die Quelltextansicht abteilen.
Diese Einheit mit dem Titel "Seite 7" unter deinem Autorennamen speichern.
|Menü 'Format' | 'Seitentitel und -einstellungen' | Titel: Seite 8 | Autor: Du | OK | [Strg]-[S] |

b) Eine Überschrift in einen Container einpacken

Die hier folgende <h1>-Überschrift "EINE WINZIGE..." wird per Auswahlliste 'Absatzformat auswählen' in einen <div>-Container gesetzt. Damit verliert sie den Überschrift-Charakter samt Großbuchstaben-Transformation. Das wird mit einem weiteren Klick in die Auswahlliste auf <h1> wieder korrigiert. In der Statuszeile steht das neue <div> vor dem restaurierten <h1>. Durch Löschen den neuen Container unter die Navi manövrieren.
| Irgendwo in die Überschrift linksklicken | Die Auswahlliste 'Absatzformat auswählen' zeigt <h1> mit 'Überschrift 1' an. In dieser Liste unten 'Generic container <div>' wählen | In der Auswahlliste 'Überschrift 1' wählen |

Eine winzige Webseite mit Navigation rechts

c) Ein neuer ID-Selektor

Im internen Stylesheet steht die allgemeine Regel <div>. Mit dem Einpacken in einen Container wurde die Überschrift automatisch von  dieser allgemeinen Regel "div" formatiert. Der doppelte Rahmen steht rechts über. Da die Regel für alle <div> einen Abstand links von 5em (margin-left: 5em;) und eine Breite von 50em (width: 50em;) enthält, muss das so sein. Firefox, Opera und IE8 stellen diesen Überstand alle so dar, wie der KompoZer auch.

Die Überschrift erhält für den Container ab jetzt eine eigene Regel. Die neue Regel soll "#oben" heißen. Oben kommt nur einmal auf der Seite vor und da passt es, die neue Regel zu einem ID-Selektor zu machen. "#oben" soll das folgende Paket an Styles enthalten:

background-color: #669999;
padding-top: 0.4em;
padding-bottom: 0.4em;
| Das Regelpaket in die Zwischenablage übernehmen | Mit [F11] den CSS-Editor öffnen | Im Dialog 'CSS Stylesheets' links oben die Palette anklicken | Im Dialog 'Neue Style-Regel' in die Eingabezeile "#oben" ohne Anführungszeichen schreiben | Ein Klick auf 'Style-Regel erstellen' | Im Register 'Allgemein' das Stylepaket aus der Zwischenablage als Ganzes einfügen | OK |

d) Der ID-Selektor wird angewendet

Das Löschen der erledigten Aufträge hat geklappt, wenn die Navi oben noch steht und die Überschrift im violetten Rahmen darunter.
Weise dem Überschriften-Container per Auswahlliste die neue Regel "#oben" zu.
| Linksklick irgendwo in die Überschrift | Rechtsklick auf das <div> in der Statuszeile | 'Klasse' wählen | Den ID-Selektor "oben" der Überschrift zuweisen |

e) Entfernen der Regel "div"

Die blaue Schrift auf dunklem Untergrund erscheint sofort, aber noch immer regiert die allgemeine Regel für alle <div> mit Breite und Rahmen. Die allgemeine Regel div wird gelöscht.
| CSS-Editor starten, z.B. mit [F11] | Auf der linken Seite div auswählen | Mit dem roten Kreuz oben die Regel div löschen | OK |

f) #oben gehört nach oben

Markiere die komplette Überschrift "Eine winzige..." per Linksklick in der Statuszeile und verschiebe sie mit der Maus während du in die graue Fläche hälst nach oben links vor die Navigation. Klickst du auf <body> in der Statuszeile, erkennst du im Quelltext, dass auf <body> und dem Rahmen-Container der Oben-Container direkt folgt.
| In die Überschrift "Eine winzige..." klicken | In der Statuszeile auf <div#oben> klicken, um garantiert den ganzen Container zu markieren | Den oben-Container vor das Menü (das Ü) schieben |

g) Eine Navigation in einen Container einpacken und den Quelltext säubern

Die Navigation wird in ihren eigenen Container eingeschlossen. Anschließend wird die Zeile durch Zeilenumbrüche zerlegt. Die fünf Links kommen jeder in eine eigene Zeile und bilden ein senkrecht angeordnetes Menü. In der Quelltextansicht wird der Code des neuen Containers angezeigt, wenn in der Statuszeile auf das zugehörige <div> geklickt wird. Dieser Code kann dort gesäubert werden. Jedes Element erhält seine eigene Zeile, bis auf die <br>-Zeilenumbrüche, die hinter jedem Link stehen bleiben. Tauchen im Code "&nbsp;" auf, sind das geschützte Leerzeichen, die in diesem Container wie auch andere Leerzeichen nicht mehr gebraucht und entfernt werden.
Für Nvu-Kenner und Kenner früherer Versionen von KompoZer ist interessant, dass KompoZer diese Gestaltung des Quelltextes nicht mehr anrührt. Nach einem Speichern und Neuladen sind diese von Hand angebrachten Zeilenanordnungen im Code weiterhin vorhanden. Ein Fortschritt, wenn auch noch nicht für den gesamten Quelltext gültig.
| Alle fünf Links "Einheit 8" bis "Kurs-Startseite" mit der Maus markieren | In der Auswahlliste für das Absatzformat den 'Generic container <div>' den fünf Links zuweisen | Hinter jedem Link die Eingabetaste drücken | In der Statuszeile den Container auswählen | In der Quelltextansicht nach <div> und allen <a href...../a><br> einen Zeilenumbruch setzen und alle Leerzeichen entfernen |

h) Ein Klassenselektor für das Menü

Der neue Navi-Container soll per CSS bei der Breite "8em" seine Texte zentriert ausrichten und weiterhin mit 'Puffer:' Rechts sich rechts anordnen und die nachfolgenden Elemente links von sich hochschweben lassen. Die Regel lautet ".navi", ist also ein Klassen-Selektor. Steht die Regel, wird sie dem Navi-Container zugewiesen.
| CSS-Editor öffnen | Dialog 'Neue Style-Regel' mit Klick auf die Palette öffnen | Eintrag ".navi" | Schaltfläche 'Style-Regel erstellen' | Register 'Box' | 'Breite:' 8em | 'Puffer:' Rechts | Register 'Text' | 'Ausrichtung:' Zentriert" | OK | In die Navigation linksklicken | In der Statuszeile auf das <div> rechtsklicken | 'Klassen' | 'navi' anklicken |

i) Ein Container fehlt noch

Der "Lorem-Text" ganz unten in dieser Einheit wird in den Container "Inhalt" gesteckt. Für den Container wird die Klasse ".inhalt" erstellt und ihm zugewiesen. Die Regel ".inhalt" soll nur die Breite "41em" enthalten.

(Anmerkung: Bei mir geht das, wo ich das schreibe, mit dem 'Generic container (div)' gerade nicht, weil die Auswahlliste ausgegraut ist. KompoZer zickt in diesem Moment mal wieder. Also sichere ich und schließe "Seite 8". Aber das reicht nicht, die Auswahlliste bleibt ausgegraut, also beende ich auch KompoZer, starte KompoZer neu und  lade wieder "seite08.html und nun ist es i.O.)
| In den unteren "Lorem-Teil" mit der Maus linksklicken | Den "Lorem-Teil" in einem 'Generic container (div)' einschließen  | CSS-Editor | Dialog 'Neue Style-Regel' | Eintrag ".inhalt" | Schaltfläche 'Style-Regel erstellen' | Register 'Box' | 'Breite:' 41em | OK | In den "Lorem-Text" klicken | In der Statuszeile "<div>" rechtsklicken | 'Klassen' | Häkchen bei "inhalt" |

j) Fertigstellen der Seite

Die erledigten Aufträge und anderere Reste sind zu löschen. Damit hast du alle Aufträge erfüllt. Den Link "Einheit 8" ersetze ich in meinem Muster durch "Google News" und verlinke entsprechend. Zwischen dem "oben-Container" und dem "navi-Container lasse ich ein <br> stehen, damit das Menü etwas tiefer kommt. Eleganter wäre, in die Regel ein margin-top: 1em; einzufügen. Zwei verwaiste Pärchen <h5></h5> sind beim Löschen der Aufträge noch erhalten geblieben und werden bei Durchsicht des Quelltextes unten in der Teilansicht entfernt. Diese Webseite lässt sich ohne Weiteres komplett in der Quelltext-Teilansicht editieren und der Quelltext behält auch nach mehrmaligem Schließen und Laden die Verteilung auf ein Element je Zeile. Beachtlich, denn bei den Vorversionen ging das nicht.
Das Muster ist zu sehen bei http://www.elew.de/kurs1a/seite08.html.
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.