Eigene Homepage

Die Sprache der Designer: CSS

Lege jetzt im Editor ein neues Textdokument an und schreibe in die erste Zeile:
/* Style für wega.html */. Dann speicherst Du die Datei als "wega.css". Die Zeichenklammer /* */ bezeichnet in CSS einen Kommentar und alles, was dazwischen steht, wird vom Browser nicht beachtet. Es erleichtert die Fehlersuche, wenn man seine Arbeit auf diese Weise beschreibt. Die Zeichenklammer für einen Kommentar in HTML ist <!-- --> - sowas steht schon in "wega.html".

Es geht weiter mit der ersten Deklaration, mit der für das gesamt Dokument wichtige Grundeinstellungen gemacht werden:

... und speichern. Öffne mal einen neuen Tab im Browser und öffne die "wega.html". Jetzt kannst Du verfolgen, wie sich die Darstellung ändert - nach dem Speichern im Editor "neu laden" im Browser. Im Moment hat sich wahrscheinlich noch nicht viel getan.

• Es gibt für den Firefox ein Addon namens "Auto Reload", das immer dann automatisch neu lädt, wenn irgendwas verändert wurde.

Weiter geht es mit dem Behälter "alles":

Jetzt sollte eine deutliche Änderung zu sehen sein. Falls Du ein breites Browserfenster hast, dann schieb das Fenster mal waagerecht schmaler und breiter: die Autozentrierung von "alles" wird dadurch sichtbar.

• Wichtig: ein selbstbenannter Behälter - in diesem Fall id="alles" - wird in der CSS-Datei gekennzeichnet mit einem #-Zeichen davor! Aber nur, wenn er nur einmal vorkommt. Sollte ein Container mehrfach vorkommen - wie auf dieser Seite die Kästen links (bzw. rechts) class="kasten_links" - dann kommt ein . (Punkt) davor!

Für den nächsten Kasten brauchst Du das Bild rechts - klick mit der rechten Maustaste drauf und "speichern unter" in den passenden Ordner. Du fährst gut, wenn Du einen Ordner "Bilder" anlegst, der dort liegt, wo auch Deine HTML-Datei abgespeichert ist. Dort sollten dann alle Bilder und Grafiken rein. Jetzt geht es weiter mit dem Seitenkopf, in dem das Bild steckt:

Falls die Darstellung des "header" nicht so ist, wie rechts, dann steckt iregendwo ein Schreibfehler drin, die Syntax ist nicht OK oder Du hast vergessen, zu speichern. Weiter geht es mit der Navigation:

In dem Container "nav" gibts verschiedene Elemente, die gezielt gestylt werden müssen:

Das Besondere an diesen Deklarationen: sie gelten nur für die Links im Container "nav", ein Link in einem anderen Container wird weiterhin blau erscheinen und unterstrichen sein, weil das der Standart ist. Beachte: "hier" ist eine Klasse, weswegen "hier" mit einem Punkt hinter das "a" geschrieben wird. Jetzt schnell noch der Rest:

Jetzt sollte alles, so aussehen, wie im Beispielbild. Du solltest jetzt im "article" ein wenig mehr Text einfügen und es muss Fließtext sein! Wenn Du das gemacht hast, dann ziehe nochmal das Browserfenster schmaler und breiter. Die Seite passt sich weitestgehend an, nur das "header"-Bild hat eine bestimmte Breite und kann deswegen nicht bis ganz schmal mithalten.

Das war es für jetzt, hier steckt schon das meiste drin, was man im Alltag braucht. Du solltest jetzt mit der CSS-Datei herumspielen und verschiedene Parameter verändern, dann wird viel schneller klar, was warum passiert.

Ein Tipp noch: "box-shadow" hat 4 Parameter. Der erste ist der Schattenversatz in x-Richtung, der zweite gilt für die senkrechte, der dritte bestimmt die Ausdehnung und der vierte ist schlicht die Farbe. Das gleiche gibts auch als "text-shadow" mit denselben Parametern. Versuche Dich doch mal an der Überschrift "main h2" ...

Zusatzinfo in Sachen Schriftgröße

Es gibt als Größeneinheit das Maß em. 1em entspricht der Fontgröße, die Du bei body angegeben hast. Das heißt: Du musst eine Fontgröße angeben und das in Pixel! Beispiel:

Alles klar? Dann viel Spaß damit ....