Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3
Kurs-Einheit 10, Das Menü kommt nach links
Willkommen
Der Container für das Menü wurde in der letzten Einheit per
Style-Regel rechts angeordnet. (float: right;). Dadurch konnte der Container
für den Text links davon nach oben nachrücken. Wird das Menü jetzt nach
links verlagert, muss der "Text"-Container neu formatiert werden.
Aufträge:
a) Sichern der Einheit
Diese Datei wird als "seite10.html" gesichert. Der Titel wird "Seite 10" lauten und der Autor bist du.
| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog
'Seiteneigenschaften', 'Titel:' Seite 10, 'Autor:' Dein Name | OK | Menü
'Datei' | 'Speichern unter' "Seite10.html" |
b) Eine neue Überschrift
Die Überschrift
im "oben"-Container soll "Miniseite mit 2 Spalten und Sockel" lauten.
Beim Anklicken von <div class="oben"> in der Statuszeile soll in
der geteilten Ansicht nur die <h1>-Überschrift im "oben"-Container
zu sehen sein, ohne Zeilenumbrüche <br>.
Editieren in der geteilten Quelltextansicht: | Den Text der neuen Überschrift aus b) in die Zwischenablage
kopieren
| Fenster in Normalansicht
und
Quelltext teilen | In der Statuszeile <div class="oben">
linksklicken, damit im Quellext der Code des oben-Containers
erscheint | Den Quelltext des "oben"-Containers zu
"<div class="oben"><h1>Miniseite mit 2 Spalten und
Sockel</h1></div>" ändern | Irgendwo in die Normalansicht
klicken | Alles über Auftrag c) löschen | Speichern |
c) Seitenwechsel für das Menü
Im CSS-Editor wird bei ".navi" im Register 'Box' aus 'Puffer:'
links ein 'Puffer:' rechts. Aus dem float: left; wird das float:
right;.
Das bedeutet, wenn das Schweben nicht ausdrücklich aufgehoben wird,
dürfen nachfolgende Elemente rechts an der Navigation vorbei, solange Platz
dafür vorhanden ist, nachrücken.
| CSS-Editor öffnen | Regel navi wählen | Register 'Box' |
''Puffer:' Links | OK |
d) Der "inhalt" rückt nach rechts
Das Umschließen des Menüs, wie es jetzt
der Text-Container macht, kann genau das
gewünschte
Layout sein. Kommen später dann noch weitere Verweise in das Menü,
passt sich etwas tiefer das
Umfließen dem immer wieder an. Es ist nur noch die Breite des
Textcontainers
"inhalt" zu korrigieren.
Hier soll der Text nicht nur den Platz einnehmen, der
rechts soeben frei wurde. Er soll auch links nicht das Menü umfließen, sondern darunter die Spalte für weitere
"navi"-Container frei lassen.
Die Lösung: Der Textcontainer bekommt einen Außenabstand links mit der
navi-Breite von 7.5em plus der Breite der beiden navi-Innenabstände
links und rechts von zusammen 1 em. Damit der "inhalt" die restliche
Breite komplett einnimmt, wird seine eigene Breite im CSS-Editor
gelöscht und unbestimmt gelassen.
| CSS-Editor | Regel '.inhalt' | Register 'Box' | 'Außenabstand
Links:'
8.5em | 'Breite:' löschen | OK |
e) Ein Foto kommt hinzu
Lade mit dem Browser mein Foto ufer.jpg von der Seite http://www.elew.de/kurs1a/ufer.jpg
und speicher es auf der Festplatte in das Verzeichnis von "seite10.html".
Bei der Gelegenheit hole dir auch
gleich für Auftrag h) unter der gleichen Adresse die Grafik
http://www.elew.de/kurs1a/bg01.png.
Platziere den Mauszeiger unter diesen Auftrag und füge dort das Foto direkt vor dem f)
ein. KompoZer ergänzt jede eingefügte Grafik mit einem Style für width
und height. Wegen der Verbannung aller Styles in das Stylesheet wird
das in der Quelltext-Teilansicht gelöscht. Erscheint nach dem
Einfügen des Fotos eine Adresse "src=" mit Angaben zum eigenen
Laufwerk, ist das Bild, auch wenn es hochgeladen wurde, nie für einen
Besucher der Webseite erreichbar. Im Dialog 'Grafik-Eigenschaften kann
das Häkchen bei 'URL relativ zur Seitenadresse' gesetzt werden. Da aber
der Quelltext im Blick liegt, ist die Kontrolle dort nebenbei möglich.
| Bearbeitungssymbol 'Grafik' | Im Dialog 'Grafik-Eigenschaften',
Register 'Adresse', mit Durchsuchen das Foto auf der Festplatte finden
| Öffnen | 'Alternativtext:' "Ufer" | OK | Das Bild anklicken | In der Quelltext-Teilansicht
den Style für Breite und Höhe löschen und prüfen, ob die Adresse
src="ufer.jpg" heißt und nicht eine Angabe zum Festplattenverzeichnis
enthält. Ansonsten entsprechend kürzen | In die Normalansicht klicken |
f) EIne allgemeine Regel für img
Am Ende der Einheit soll ein Blindtext das Bild umfließen. Dafür
floatet das Foto nach rechts. Wie öfter auf der Seite, kommt dann noch
ein Innenabstand rundherum von 0.5em dazu. Da <img> nur einmal
vorkommt, reicht eine allgemeine Regel "img", die
padding: 0.5em;
float: right;
enthält.
| CSS-Editor | Eine neue Regel erstellen | Im Dialog 'Neue
Style-Regel' ein "img" eintragen | Schaltfläche 'Style-Regel
erstellen' | Register 'Box' | 'Puffer:' Rechts | 'Innenabstand:'
viermal jeweils 0.5em eintragen | OK |
g) Eine Grafik für body
Das gleichförmige Blaugrau des Hintergrundes von <body> wird
in der allgemeinen Regel "body" von der Grafik "bg01.png" mit
einem Verlauf von Weiß nach Grau abgelöst. Im CSS-Editor im Register
'Hintergrund' kann die Adresse von "bg01.jpg" mit Durchsuchen bestimmt
werden. Weil jetzt eine Grafik den Hintergrund tönt, wird die
Farbangabe gelöscht. Mit Kacheln ist die Wiederholung
gemeint. Wird kein Kacheln gewünscht, ist die Grafik nur einmal zu
sehen. Mit Position kann die Lage gewünscht werden. Bei diesem Auftrag
macht es einen Unterschied, ob der Verlauf oben, in der Mitte oder
unten eingestellt wird. Zum Kennenlernen der Schreibweise wird bei
Kacheln "horizontal" und bei Position "Links" und "Oben" gewählt und die Regel
dann im Register
'Allgemein' betrachtet.
Mir wurde mitgeteilt, dass KompoZer auch nach mehrmaligem Neustart die Adresse "background-image:
url(bg01.png);" partout nicht annehmen will. Das kann dann mit einem
Eintrag von Hand im Register 'Allgemein' auch erzwungen werden. Die Regel für body zum Kopieren und Einfügen:
background-image: url(bg01.png);
background-position: left top;
background-repeat: repeat-x;
| CSS-Editor | 'body' wählen | Register 'Hintegrund' | 'Bild:' mit
Durchsuchen als "bg01.png" eintragen | 'Kacheln' horizontal |
'Position:' Links und Mitte | 'Farbe:' entfernen | Register 'Allgemein'
| Das sind die drei Styles, die eventuell von Hand ergänzt werden
können: background-repeat: repeat-x; background-position: left top; background-image: url(bg01.png); | OK |
h) Die Links der Fußzeile
Nach diesem Auftrag h) ist die Seite fertig und deshalb folgt dem Auftrag h) der
Blindtext. Das bisherige "Lorem ipsum" wurde durch etwas anderes ("Ich bin ein Blindtext...") ersetzt.
Aber ganz
unten ist noch ein Container "oben" von mir angehängt worden. Die Klasse ".oben" kann immer
wieder verwendet werden, wenn die Regel nützlich ist. Der Name ist beliebig und
diente ja bisher einer gewissen Orientierung, aber jetzt ist er Schall
und Rauch.
Zu sehen sind im untern "Oben" zwei Links, die Zeilenumbrüche bewirken.
In der vorigen Einheit war genau das mit "display: block; für die Links
eingeführt worden, damit im Menü auch ein Anklicken auf der Farbe des
Listenelementes möglich ist. Viele Profiseiten haben das nicht, dort muss die Maus zur Linkbenutzung den Text berühren.
Die
allgemeine Regel hat auch zur Folge, dass die Verweise bei
Mausberührung mit Weiß auf Weiß im untern "Oben" unsichtbar werden.
Im Fuß-Container (mit dem Klasse-Namen "oben") soll die allgemeine
Regel aufgehoben werden. Mit einer extra Klasse für a namens ".zeile"
gibt es einen farbigen Hintergrund für das "weiße hovern" und die
Aufhebung des Zeilenumbruchs:
background-color: #ccccff;
display: inline;
Damit geht die Kurs-Einheit 10 jetzt zu Ende. Die neue Klasse ".zeile"
ist den Links im Fuß schon mitgegeben. Eventuell warten überflüssige
<h5></h5>-Pärchen im Quelltext auf das Löschen, oder
<br>s. Das kommt vor, weil die Aufträge ja nach dem Erledigen
gelöscht werden und Reste übrig bleiben können. Übrig bleiben sollten
Titel und Sockel, das Menü und der das Foto umfließenden Blindtext.
Die Vergleichsseite steht auf http://www.elew.de/kurs1a/seite10.html.
Eine Startseite als Beispiel des Gelernten gibt es seit der Einheit 5
erstmals auch wieder: http://www.elew.de/kurs1a/start10.html.
Für start10.html wurde das interne Stylesheet von hier übernommen. Die allgemeine Regel
für hr stammt von start05.html und enthält statt der Hintergrundfarbe
eine Begrenzung. Die allgemeinen Regeln h4 und hr ziehen den folgenden
Absatz mit negativem Außenabstand hoch.
| CSS-Editor | Eine neue Regel erstellen | Im Dialog 'Neue
Style-Regel' ein ".zeile" eintragen | Schaltfläche 'Style-Regel
erstellen' | Register 'Box' | 'Anzeige:' inline | Register
'Hintergrund:'| 'Farbe:' #ccf | OK | Alle Reste löschen, bis "Ich bin ein Blindtext.." ganz oben steht |
Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich
begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht
keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft
wird man gar nicht erst gelesen. Aber bin ich deshalb ein schlechter
Text? Ich weiss, dass ich nie die Chance haben werde, im Stern zu
erscheinen. Aber bin ich darum weniger wichtig? Ich bin blind! Aber ich
bin gerne Text. Und sollten Sie mich jetzt tatsächlich zu Ende lesen,
dann habe ich etwas geschafft, was den meisten "normalen" Texten nicht
gelingt. (Gefunden über einen Link "Blindtextsammlung" bei Wikipedia "Blindtext").
Also schön, Guido Heffels, nachfolgend meine Textempfehlung für das
Blindtextbuch. Sie mögen denken, aus welchem Anlass es unbedingt eine
solche poesiealbumhafte Antiquität sein muss, und genau das sollen Sie
ja auch. Wenn Sie den Text lange genug mit Fleiss bestaunen, können Sie
die Nuss knacken. Denn wenn mein Gag auch nicht mit schnellem Auge zu
entdecken ist - eine geduldige Seele muss die Lösung doch finden. Wenn
Sie es geschafft haben, dann klingeln Sie mich doch bitte noch einmal
an, denn ich muss Ihnen dann noch die Headline zum Text nachsenden. Das
möchte ich momentan nicht, weil dann das bescheidene Geheimnis dieses
Blindtextes schon jetzt offenläge. Viel Spass wünscht Rainer Baginski.
PS: Eine einzige Hilfe gebe ich: Das Begleittextchen hat's nicht. Sie
haben's nicht. Ich - typisch Baginski - habe es. Finden Sie es.