Obligatorisk opg. 3: Lav et CSS.
Download HTML-filen til dette dokument (højreklik og vælg 'gem destination som'), og lav et CSS som giver din side et udseende magen til denne. Du må gerne ændre på farverne, og siden skal selvfølgelig ikke være 100 procent magen til, men du skal vise at du kan forstå konceptet bag css, og at du har gjort en indsats for at nå resultatet.
Meningen med opgaven
Det er ikke meningen, at opgaven skal servere løsningen på et fad. Det er derimod en udfordring med en opfordring til at undersøge og afsøge de muligheder som CSS giver dig til meget specifikt at definere layoutet på et site.
Vær forberedt på, at du for at lave dette design skal prøve dig frem, og at der i dit css skal defineres forskellige kombinerede tilstande af css-selektorerne. Det er altså vigtigt, at du ikke ændrer i html'ens tags, men udelukkende styler dem i dit css for at opnå dette nok så eftertragtede look.
Tips til løsningen
Du kan jo altid finde klar besked om css'ens muligheder på: http://www.w3schools.com/css/css_reference.asp
Baggrundsgrafikken kan du nøjes med at linke til. Du skal skrive følgende URL til baggrunden: http://www.itu.dk/people/ripo/DWDK/F2008/obl_opg_3/grafik/csskan.gif
Sørg for at holde øje med:
- Linieafstande
- At teksten ikke står for tæt på kassers kanter
- At links skiller sig tydeligt ud fra den anden formattering
- Hsk også de forskellige pseudo-klasser, fx
a:hover - At du får defineret de kombinerede tags korrekt
- Om kasserne er flexible eller ej. Dvs. om de er defineret i pixel eller procent.
Fordi de forskellige browsere har forskellige default-indstillinger, så er det en god idé at styre indholdselementers størrelse ved som udgangspunkt at sætte margin og padding til 0, og så arbejde sig videre derfra.
Nogle gange bliver man nødt til at definere classes i sin html-kode, hvis man f.eks. vil have en kasse om en almindelig sætning, som ellers er helt normal.
classes, hvis man vil bruge kassen flere gange i et dokument. En klasse kan både bruges som attribut til et almindeligt tag, f.eks <p class="kasse">eller såkaldte container-tags, f.eks
<div class="kasse">id, et eksempel kunne være: <div id="engangskasse">Har man mange data, som skal stå pænt i lige rækker er en tabel nok uundværlig. Men den må jo også gerne se lidt lækker ud. Et par hints til styling af tekst og baggrundsfarve i tabellen:
- For hele tabellen er der defineret font, tekststørrelse, tekstfarve og baggrundsfarve
- Derudover er der tekststørrelse, tekstfarve og baggrundsfarve defineret for hhv. midterste spalte, midterste række samt den midterste celle.
- Der er også i de enkelte kolonner defineret om teksten er hhv venstre-stillet, centreret eller højrestillet.
| CSS-kode i tabeller | ||
|---|---|---|
| Tabeller | kan | formateres |
| både | som | enkelte celler |
| spalter | og | rækker |
Når du er færdig med opgaven, så skal du sende en mail til 'din'hjælpelærer med links til både html-filen, hvor dit færdige arbejde kan ses og dit css-dokument, der gør alt arbejdet...