Ziel der Übung 12:
Die Seite wird minimalastisch auf Grautöne umgestellt. Graue
Schrift auf Weiß ist eh weit verbreitet. Ganz unten soll ein Container
querrüber die Seite abschließen.
Vorgehensweise:
Die Deklarationen im Stylesheet werden auf einMinimum
zusammengestrichen. Abschließend wird der Sockel eingefügt.
Aufträge:
a) Diese Übung wird mit dem Titel "Ziel 12" und deinem Namen als
Autor unter dem Dateinamen "ziel12.html" für die folgenden
Veränderungen gespeichert.
| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog
'Seiteneigenschaften', 'Titel:' Ziel 12, 'Autor:' Dein Name | OK | Menü
'Datei' | 'Speichern unter' "ziel12.html" |
b) Anzunehmen ist , dass je weniger das in dieser Übung entstehende
Modell an Formaten enthält, es um so leichter als Ausgangspunkt für
verschiedene Designs genommen werden kann. Zuerst werden die Farben
entfernt, nur für :hover und .dieseseite wird #abc genommen. Bei der
hexadezimalen Farbangabe ist es gestattet, aus #aabbcc dieses #abc zu
machen. Je eine hexadezimale Ziffer 0 bis f reicht bei Rot Grün Blau,
wenn sie doppelt vorkommt.
| CSS Editor | Regel a:hover wählen | Register 'Allgemein' ,
Deklaration ändern zu background-color: #abc; | Regel li wählen |
Register 'Allgemein' , Deklaration ändern auf border-bottom: 0.1em
solid #abc; margin-bottom: 0.3em; margin-left: -2.5em; list-style-type:
none; | Regel .dieseseite | Hintergrundfarbe in #abc ändern | Regel
#rahmen | Deklaration wechseln zu width: 75%; font-family:
Arial,Helvetica,sans-serif; color: #444; margin-right: auto;
margin-left: auto; | Regel #kopf ändern zu nur noch border-bottom:
0.1em solid #abc; | Regel #links | Nur width: 8em; float: left; stehen
lassen | Regel #rechts | Nur width: 8em; float: right; stehen lassen |
Regel .navi | Auf font-size: 0.9em; reduzieren | OK |
Das Layout wird auch als Handtuch-Layout bezeichnet. Es erscheint als Streifen in der Mitte jeder möglichen Bildbreite.
KompoZer ändert die Eingabe #abc ungefragt in #aabbcc. Das macht ein
Browser auch. In einem mit einem anderen Editor bearbeiteten Stylesheet
darf die Kürzung aber so stehen.
c) Die Seite sieht schon fast genial aus, wenn hier gilt, dass je
einfacher um so genialer ist. Stören die rot gepunkteten Hilfslinien in der Normalansicht,
kann die Vorschauansicht (Register rechts unten in der Statuszeile)
benutzt werden.
Stört nur noch, wie so oft, die
Werbung. Die Container mit Werbung bekommen ihre eigene Klasse .notiz.
Die Zuordnung zu .navi muss dann noch aufgehoben werden und die Klasse
.notiz zugeordnet werden.
| CSS Editor | Neue Regel .notiz erstellen | Die Dekalration für .notiz
darf sein: border: 0.1em solid #aabbcc; padding: 0.2em; margin-top:
0.5em; font-size: 0.7em; text-align: justify; | OK |
Für einen Container wäre ein Weg zur Klassenänderung:
| In denContainer linksklicken | In der Statuszeile das <div
class="navi" rechtsklicken | Kontextmenü 'Klassen' | Häkchen bei "navi"
entfernen | In der Statuszeile das <div> wieder rechtsklicken |
Kontextmenü 'Klassen' | Häkchen bei "notiz" setzen | In die
Vorschauansicht klicken |
Nun kann in die Rahmen beliebig langer Text kopiert werden. Für das
Ergebnis wurde links der "Lorem"-Text ganz unten auf dieser Seite vom
Anfang bis zum dritten Punkt gewählt. Für den obersten Kasten links
wurde der Rest dieses Textes genommen und für die beiden restlichen
Kästen die unterste Zeile.
d) In den "Notizen" wird das Überschriften-Format <h4> entfernt.
Dieser absatzbildende Tag lässt sich leicht auswählen, wenn dieAnsicht 'HTML-Tags' in der Statuszeile rechts unten ausgewählt wird.
| 'HTML-Tags' mit der Auswahlliste rechts in der Statuszeile einstellen
| Zum Markieren auf die (wenn vorhanden) gelbe H4-Markierung klicken |
In der Statuszeile auf <4> rechtsklicken | Kontextmenü 'Tag
entfernen | Wiederholen bis keine H4-Markierungen auftreten |
'Vorschau' mit der Auswahlliste rechts in der Statuszeile einstellen |
e) Da gab es auch im Container in der Mitte ein absatzerzeugendes
<h4>. Um den durch <h4> erzeugten Abstand auszugeleichen,
erhielt der Container ein negatives margin-top. Das kann nun in
margin-top: 0.5em wie bei .notiz geändert werden. Der Blocksatz ging
mit <h4> auch verloren, auf den nicht verzichtet werden soll.
Bei der Gelegenheit wird die Symmetrie der Spalten aufgehoben. Statt
den CSS Editor zu verlassen, um ihn im nächsten Auftrag wieder zu
öfffen, wird das gleich miterledigt: Die Breite der rechten Spalte soll
14em betragen. In der Reihenfolge steht das auch in der folgenden
Aktionszeile. Denn nun wird sichtbar, dass margin-right auf etwa 18.2em
erhöht werden muss.Weil für schmale Bildfenster nun die Mitte etwas eingeklemmt wirkt, wird auch noch die Breite von #rahmen auf 85% erhöht.
| CSS Editor | Regel '#mitte' auswählen | Die Deklaration auf
margin-right: 11em; font-size: 0.8em; margin-left: 11em; margin-top:
0.5em; text-align: justify; ändern. | Regel "#rechts" | Breite zu 14em
verändern | Regel '#mitte' | margin-right auf 18em erhöhen | Regel
#rahmen | Breite auf 85% erhöhen | OK |
f) Zur Vorbereitung des Sockels, aber hier mehr wegen des Umgangs mit
KompoZer, wird ein Container <div
id="sockel">FUSS</div> ganz unten in den Quelltext
eingefügt.
| In der Statuszeile auf <div#rahmen> linksklicken | In der
geteilten Ansicht im Quelltext ganz nach unten scrollen | Vor dem
letzten </div> den Code des neuen Containers <div
id="sockel">FUSS</div> einfügen | In die Normalansicht klicken
|
g) Das Wort "FUSS" erscheint unterhalb der mittleren Spalte. Im
Quelltext folgt dieser Container auch auf dessen Code. Der neue
Container soll aber unterhalb der jeweils längsten Spalte sich über die
ganze Seite ausbreiten. Zum Studium des Verhaltens wird ein Inline
Style verwendet. Es geht um die Aufhebung des Umfließens, Schwebens
oder Floatens. Der Sockel erhält hierfür die Inline Styles clear:
both; padding-top: 0.5em; color: #abc;
| In das Wort "FUSS" klicken" | In der Statuszeile auf
<div#sockel> rechtsklicken | Inline Styles | Register 'Box' ,
'Aufhebung:' beides und 'Innenabstand: Oben:' 0.5em | Register 'Text' ,
'Schriftgröße' 0.8em und 'Farbe:' #abc | OK |
h) Zum Testen der Sockelposition, ob das mit verschieden langen Spalten
auch klappt, einfach bei der kürzersten Spalten soviele [Enter]
zugeben, bis sie die längste ist. Die [Enter] gehen mit [Strg]-[Z]
leicht wieder raus. Bei zu vielen [Strg]-[Z] hilft wiederum [Strg]-[Y].
i) Abschließend werden die Inline Styles extrahiert und ins interne Stylesheet verlagert.
| In der Statuszeile <div#sockel> rechtsklicken | Inline Styles |
'Extrahieren und allgemeinen Style anlegen' | Radiobutton 'nur dieses
Element' ist schon gesetzt, Der Name "sockel" ist schon bekannt | OK |
Damit ist das erste Dutzend Übungen abgeschlossen. Das Ziel der Übung
12 findet sich zum Vergleich hier:
http://www.elew.de/kurs1a/ziel12.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.