Web-design og CSS

Dag 1 i emnet hierarki og webdesign. Uke 44, 2011

1. Lag et stilark (CSS)

Gjør som i forrige leksjon; opprett et nytt TextEdit-dokument. Velg “Konverter til ren tekst (Shift+Cmd+T)” fra “Format” i menylinjen øverst. Lagre som “stilark.css” og velg .css framfor .txt. Og lagre i samme mappe som HTML-dokumentet.

Denne gangen kopierer og limer inn kun disse to linjene øverst i dokumentet:

@charset "UTF-8";
/* CSS Document */
CSS Firefox

2. Kople stilarket til HTML-dokumentet

Marker, kopier og lim inn linja nedenfor – rett under <title>-taggen i HTML-dokumentet ditt:

<link href="stilark.css" rel="stylesheet" type="text/css" media="all" />

Da vil det se sånn ut:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Red Hot Chilipepper</title>
<link href="stilark.css" rel="stylesheet" type="text/css" media="all" />
</head>

3. Nå kan vi begynne på layoutet

Alt vi nå fører inn på stilarket vil påvirke utseendet på HTML-dokumentet vårt. Vi har fortalt hvilkte stilark vi vil bruke: "stilark.css", vi har forklart hva det er: "stylesheet" og at det gjelder alle medietyper (sjerm, mobil, print osv): media="all".

Det første vi ønsker oss er et felt med en fast bredde som rommer alle tesktlinjene. Og som ligger midtstilt i vinduet – uansett hvor skjerm brukeren har. Til det bruker vi en DIV-tag. Skriv i CSS-arket (eller Copy & Paste), fra linje 3:

#wrapper {
width: 750px;
margin-right: auto;
margin-left: auto;
}

#{} er selve CSS-"taggen". # står for DIV, wrapper er et valgt navn. Også må vi ha {} (Shift+Alt+8 og Shift+Alt+9) samt semikolon etter hver deklarasjon. Det vi nå har sagt er at bredden på DIV'en vår skal være 750px og at nettleseren skal autoutfylle det som er igjen av plass på hver side – altså midtstille.

magCSS består av en benevnelse; et navn vi finner på – eller en eksisterende tag <p>, <body> osv. De eksisternede taggene kan med dette få nye egenskaper, og vi kan lage våre egne tagger. Disse deles i tre grupper:
DIV – som alltid har # før navnet. Disse kan brukes bare én gang per dokument.
CLASS – som alltid har . før navnet. Disse kan brukes flere ganger. Og kan både brukes som Block-element og Inline-element. Den tredje:
COMPOUND er en sammenstilling hvor vi tillemper egenskaper for en bestemt tagg i en bestemt DIV elle CLASS. På den måten kan vi f.eks ha forskjellige brødtekster og forskjellige farger på overskrifter.

For å skrive { og } -parantesene bruker du Shift+Alt+8 og Shift+Alt+9

4. Å bruke DIV'en vår i HTML-dokumentet

Nå skjer det ingenting før vi bruker denne nye DIV'en i HTML-dokumentet. Nå må vi sette inn denne taggen mellom <body> og den første overskriften <h1>:

<div id="wrapper">

Og så må vi huske å avslutte den rett før </body>:

</div>

I HTML er det litt nøye med at man begynner å avslutter tagger omtrent som russiske babushka-dukker – i lag utenpå hverandre.

Her er en versjon av HTML-dokumentet så langt>>

Babushka

5. Vi endrer like godt fonten for brødtekst

Det er flere måter å gjøre dette på. For å gjøre det tydelig i denne øvelsen endrer vi deklarasjon bare for taggen <p>. Men vi kunne også sette font i <body> eller i #wrapper. Legg til i stilarket:

p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 160%;
}

Nå er vi ikke så glad i all luften mellom avsnittene så vi tar like godt bort alle margins i denne CSS-regelen:

p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 160%;
margin: 0px;
}

Her er en versjon av HTML-dokumentet så langt >>

Fonteksempler

magNår vi deklarerer en font-family så pleier vi å ramse opp minst tre alternativer; har ikke brukeren Trebuchet MS, så kanskje Arial eller Helvetica eller en annen Sans-Serif.

100 % betyr 1:1 av standard fontstørrelse. Siden brukeren kan endre dette, er det tryggest å bruke %. Standard størrelse er imidlertid litt stort, og linjeavstanden litt tett så 80 % over 160 % linjeavstand er et godt utgangspunkt. I denne sammenhengen kan vi bare bruke 10, 20, 30 % osv.

6. Også er det overskriftenes tur …

Også er er det altfor mye luft under overskriften – mens vi trenger som regel luft før. Så da prøver vi oss med dette:

h1,h2 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin-top: 12px;
margin-bottom: 0px;
}

Det er ikke noe i veien for å lage flere regler for samme tagg, så vi følger opp med egne regler for farger:

h2 {
color: #666666;
}
h1 {
color: #B4120D;
}

Her er en versjon av HTML-dokumentet så langt >>

Screendump

7. Et eksempel på “Class”

Class' er en fullstedig egendefinert regel som kan være et avvik i forhold til standard egeneskaper for en tagg. Nå som vi har tatt bort luften over avsnitt trenger vi en annen avsnittsmakering. Hva med innrykk? Det er jo tross alt den vanligste formen for avsnittsmarkering. Legg til denne regelen i stilarket ditt:

.innrykk {
text-indent: 24px;
}

Gjør denne endringen i det nest siste avsnittet:

<p class="innrykk">

Sånn at hele avsnittet ser sånn ut:

<p class="innrykk">Capsaicin brukes i smerteforskning til å drepe nerveender. Chili har den positive bieffekt at den kan være bakteriedrepende. </p>

Her er en versjon av HTML-dokumentet så langt >>

magLegg merke til at vi har tre typer av regler:
#DIV – som markeres i CSS-stilarket med et #foran.

.Class – som markeres i CSS-stilarket med et (punktum) foran.

Tagg <body>, <p> osv. som ikke markeres.

Når vi viser til disse reglene i HTML-strukturen bruker vi ikke markeringene # og . – men bare navnene vi har gitt reglene, men vi skriver jo inn om det er en div eller class.

Standard-tagger trenger ingen presisering – de er jo det de er …

8. En siste ting; hyperlinker

Dette er ikke en CSS-greie, men en HTML-greie. Men hva er vel en nettside uten? La oss lenke ordet Mexico i første avsnitt til Wikipedias oppslag om landet. Skriv desse taggene rundt ordet:

<a href="http://no.wikipedia.org/wiki/Mexico">
Mexico</a>

Test siden din. I taggen før ordet; A er forkortelse for Anchor, HREF for hyper-referance, nettadressen må stå i anførsler og </a> marker slutten for hyperlenken. Alt må på plass for at det skal virke …

Her er det endelige dokumentet >>

Pique

9. Last opp nettsiden til fronter

Nå har vi desverre ikke noe web-server som du kan laste opp til. Men du kan i det minste laste opp til fronter – og se hvordan det tar seg ut. På fronter, der du fant lenka til denne oppgaven finner du også en lenke til leveringsmappe. Bruk Last opp > “Flere filer” og marker HTML- og CSS-dokumentene samt chili.jpg. Fjern markeringen for “Åpne i nytt vindu”.

Screendump

10. Du er nå en fullbefaren web-vever!

Åpne siden din i en ny fane, kopier hele den lange web-adressen og klikk på W3C-knappen til høyre, lim i nn i “Adress”-feltet, og klikk på Check. Hvis du har gjort alt riktig får du grønt. OK?

W3 Validated