Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1
Übung 9, Das Menü kommt nach links
Willkommen
Der Container für das Menü schwebte in der letzten Übung per
Style-Regel nach rechts. (float: right;). Dadurch konnte der Container
für den Text links davon nach oben nachrücken. Schwebt das Menü nach
links, gibt es ein Problem, aber das wird sofort behoben.
Aufträge:
a) Sichern der Übung
Diese Datei wird als "ziel09.html" gesichert. Der Titel wird "Ziel
9" lauten und der Autor bist du.
| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog
'Seiteneigenschaften', 'Titel:' Ziel 9, 'Autor:' Dein Name | OK | Menü
'Datei' | 'Speichern unter' "ziel09.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
stehen, ohne Zeilenumbrüche <br>.
| Den Text der neuen Überschrift aus b) in die Zwischenablage
kopieren
| Die aktuelle Überschrift mit der Maus komplett markieren | Menü
'Bearbeiten' | 'Einfügen ohne Formatierung' | Fenster in Normalansicht
und
Quelltext teilen | In der Statuszeile <div class="oben">
linksklicken, damit im Quellext der Code des oben-Containers
erscheint | Eventuelle übriggebliebene Zeilenumbrüche <br> aus
dem Container im Quelltext entfernen und eventuell verlorengegangenes
<h1> ergänzen | Irgendwo in die Normalansicht
klicken |
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 aber der Text den Platz einnehmen , der
rechts soeben frei wurde und links die Spalte für weitere
Container anderen Inhalts frei gelassen werden.
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.
| 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 "ziel09.html". Bei der Gelegenheit hole dir auch
gleich für später 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 eine Überprüfung dort schneller und
sicherer.
| 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 Übung 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 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.
| 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. Lorem ipsum wurde durch etwas anderes ersetzt. Aber ganz
unten ist noch ein Container "oben". 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 dort zwei Links, die Zeilenumbrüche bewirken.
In der vorigen Übung 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. Das ist auch beim Menü in dieser Übung
erhalten geblieben. Bleibt also die allgemeine Regel "a", dann soll das
mit einer extra Klasse für a geändert werden. Den Links ist schon die
Klasse ".zeile" zugeordnet. Da fehlt nur noch, die Regel ".zeile" zu erzeugen: Mit
background-color: #ddffdd;
display: inline;
erhalten die Links die Farbe von ".hier". Das "inline" unterdrückt den
Absatz mit eigenem Zeilenumbruch, womit die Fußzeile ohne selbige
erscheint.
Damit ist die Seite fertig. 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/ziel09.html.
Die folgenden Übungen sind noch nicht auf Auftragsüberschriften und
hervorgehobene Aktionszeilen umgestellt und überschneiden sich im
Inhalt. Einfach mit Übung 12 und 13 weitermachen.
| 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:' #dfd | 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.