HTML / CSS - Praxistutorial 2 - Grundsätzliches
1. Die Abschnitte
2. Anlegen der Strukturelemente
Hier wird sich gegenüber dem ersten Tutorial einiges ändern. Das Schmuckelement fällt diesmal weg und wir gehen einen etwas
anderen Weg. Des Weiteren passen wir unsere Seite für eine höhere Bildschirmauflösung an. Also legt in der urquhart.htm
ein äußeres <div>-Element für den Rahmen an, und weist in der rahmen.css diesem Element eine Breite
von 960 Pixeln zu und richtet es wie gehabt horizontal aus. Wir nennen die Klasse wieder mal rahmen.
Hinweis
Unter dem Punkt "Weitere Möglichkeiten" habe ich euch beim Thema Einschränkung
gezeigt, dass man CSS-Definitionen an HTML-Tags binden kann. Macht das jetzt bitte mal, indem ihr die Klasse rahmen
so definiert.
div.rahmen
3. Festlegung der Standarddefinitionen
Hier muss ich jetzt ein wenig ausholen. Also jeder Browser hat gewisse Standardvorgaben für die Darstellung der jeweiligen HTML-Tags. Darum gibt es auch sehr viele Leute, die den Einsatz eines so genannten Reset CSS propagieren, um die Browser "auf Linie" zu bringen. Ich persönlich halte das für ein wenig übertrieben. Aber eine Anweisung nutze ich immer.
*
{
margin: 0;
padding: 0;
}
So hat man zumindest für alle HTML-Elemente einen einheitlichen Außen- und Innenabstand festgelegt. Und das tragt ihr jetzt
in die html.css ein.
Schriftgrößen
Jetzt arbeiten wir mit relativen Schriftgrößen und nehmen als Einheit em. Ich persönlich habe mir angewöhnt, bei dieser
Vorgehensweise 0.8em als Standardgröße zu nehmen, das lässt sich auch bei einer Monsterauflösung von 1600x1200 (die ich
habe) noch leidlich gut lesen. Also fügt in der html.css im body-Selektor das hier ein.
body
{
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Warum soll man aber mit relativen Schriftgrößen arbeiten. Ganz einfach, man ist viel flexibler. Ich selber habe leider sehr oft die Erfahrung gemacht, dass Designer das nach rein optischen Kriterien beurteilen und sich nie die Mühe machen, Texte mal selber zu lesen. Deren vorgegebenen Schriftgrößen sind eigentlich fast immer viel zu klein. Wenn man dann einen schon etwas älteren Kunden hat und dem das nicht gefallt, so kann man mit einer(!) Angabe die Schriftgrößen insgesamt erhöhen.
Warum nicht als "Wildcard"?
*
{
...
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Nun, em ist eine relative Angabe, die nach unten weiter gereicht wird. Also bekommt zum Beispiel das
<body>-Element eine "Schriftgröße" von 12 Pixeln, ein nachfolgendes <div> dann einen entsprechend
kleineren Wert und die Elemente darin einen noch kleineren. Außerdem kann das Arbeiten mit der "Wildcard" zu Problemen führen.
Wichtig
Durch die Festlegung der Standardschriftgröße auf 0.8em legen wir einen relativen Wert für die browsereigene(!)
Vorgabe fest. Das ist im Moment noch ein wenig verwirrend und außerdem ziemlich problematisch. Darauf gehe ich aber im
vierten Tutorial genauer ein und zeige eine Alternative. Hier geht es nur um die
Auswirkungen.
4. Weitere Größenangaben
Im ersten Tutorial haben wir sehr oft mit absoluten Größenangaben gearbeitet. Jetzt versuchen wir, das so weit wie möglich zu vermeiden. Das erhöht die Flexibilität und erspart uns Tipparbeit.
5. CSS-Anweisungen
Die Tipparbeit, die wir uns bei den Größenangaben sparen, büßen wir bei unseren Stylesheet-Anweisungen leider ein. Diesmal werden wir bei der Benamung größere Sorgfalt an den Tag legen, um möglichen Problemen aus dem Weg zu gehen.
6. Allgemeine Änderungen
Linkliste
Im ersten Tutorial wurden die Links im Hauptmenü einfach aneinander gereiht. Das habe ich zugegebenermaßen ziemlich lange so gehalten, bis man mich überzeugen konnte, das doch bitte schön in einer Liste zu organisieren.
Hintergrundbild
Wie ich schon sagte, verzichten wir diesmal auf ein eigenes Schmuckelement (<div class="schmuck">), das
man normalerweise für Bilder oder Flash-Animationen nutzt. Das bauen wir diesmal in eine zusätzliche Navigation ein.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt