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