Oppgave 2 - fagformidling i Web- og informasjonsdesign

Til denne oppgaven i faget Web- og informasjonsdesign i studiet  Digital Mediedesign ved Høgskolen i Telemark har jeg valgt å ta utgangspunkt i Oppgave 3 i dette faget. I denne oppgaven skulle vi lage et nettside som besto av minst fire sider. Jeg valgte da å lage en nettside om mine hjemsted.

Som verktøy har jeg brukt Adobe Dreamweaver. I dette programmet foretrekker jeg å bruke en visning der man ser bilde av nettsiden og kodene samtidig slik vist under.

Når man skal lage opp en nettside i Dreamweaver er det viktig å ha et oversiktlig mappesystem. Jeg startet derfor med å lage en mappe for oppgaven der alt innhold til denne sidenblir lagret, og lagde så 3 undermapper til Bilder, CSS-regler og Sites.

Jeg lagde først en indexside ved å høyreklikke på oppgavemappen og velge «new file» Denne kalte jeg «indexoppgave3.html». Denne siden er inngangsporten til denne nettsiden. De andre sidene lager jeg på tilsvarende måte, men da inne i undermappen "Sites"

Det er lurt ikke å bruke mellomrom mellom ordene når du gir nettsiden navn, dvs. ikke bruke «index oppgave 3.html», slik at man ikke får andre tegn med i nettadressen. 

Når en skal bygge opp en nettside er det viktig å plassere innholdet i "divers". Dette for at de ulike elementene skal holde seg på plass.

En wrapper er en "diver" som holder innholdet på plass på siden. Jeg starter derfor med å sette inn denne diveren ved å bruke funksjonen Insert -> div i panelet på høyre side. Man kan også bruke hovedmenyen. Da får jeg opp et vindu som ser slik ut.

Som dere ser velger jeg i dette vinduet under Insert: «After start of tag», deretter skriver jeg «body» i neste felt, og under feltet ID skriver jeg «wrapper».

 

Videre trykker jeg på boksen «New CSS Rule», og velger bare «ok» i vinduet som åpner seg.

Da får jeg opp et tredje vindu. Siden vi nå lager en wrapper, heter det "CSS Rule definition for #Wrapper". I dette velger jeg «box» i listen på venstre side, og setter inn de verdiene jeg ønsker for denne diveren. For wrapperen valgte jeg verdier som vist under. Til slutt trykker man ok i alle de tre vinduene.

I starten glemte jeg å sette verdiene i paddingen til auto for høyre og venstre, noe som førte til at innholdet på siden ikke ble midtstilt. Dette justerte jeg i etterkant i CSS designeren.

Deretter satte jeg med tilsvarende metode inn divere for "header", "MainContent" og "footer" som vist i bildene under. Til alle disse tre diverne valgte jeg auto i bredde og i høyde satte jeg "headeren" til 100 px, "footeren" til 60px, og "MainContent" varierende høyde på de ulike sidene alt etter innhold.

Det er også lurt å lage divere inne i de ulike elementene slik at innholdet kommer der du vil. Inne i diveren MainContent lagde jeg tre bokser. Når man setter inn bokser eller bilder i en diver, er det viktig at man på forhånd har regnet ut hvilke størrelser man må ha på de ulike elementene for at siden skal få det utseendet man ønsker. For eksempel om bredden på wrapperen er 960 px, kan ikke totalbredden på de andre diverne overstige dette tallet. 

I min oppgave satte jeg også inn fire linkebokser i headeren. I starten brukte jeg samme fremgangsmåte som beskrevet tidligere. Men i vinduet for Insert Div, skrev jeg "linker" inn i feltet Class. Dette fordi jeg ønsker å bruke CSS reglen flere ganger. Dersom man bruker feltet "ID", kan koden brukes kun en gang. Det finnes derfor på en side kun en "wrapper", "header" etc. . 

I CSS designer kan man for øvrig i etterkant endre de ulike diverne slik man ønsker. 

Etter at jeg har fått laget alle diverne i ønskede størrelser og plasseringer, endret jeg bakgrunnsbilder og farger slik at jeg fikk det utseendet på nettsiden jeg ville ha. Jeg valgte å bruke tre ulike farger som går igjen i tekst og bakgrunner. Jeg valgte jordnære farger slik at de ikke skulle ta for mye oppmerksomhet fra bildene.

Headeren til de ulike sidene lagde jeg i Adobe Illustrator. Dette fordi jeg har større muligheter til å variere type skrift og plassering av denne i Illustrator enn i Dreamweaver.

Når man setter inn bilder er det viktig at filene ikke er for store. Det er mulig å justere størrelsen på bildene under "properties", men det anbefales å tilpasse bildene på forhånd,

Det er også mulig å endre utseendet på linker under page properties, som man  finner rett under linkefeltet i properties.

På en av mine sider hoppet linkene, og selv om jeg endret kodene slik at de var nøyaktig lik de andre sidene, fortsatte de å hoppe, Jeg fjernet også linkene en gang og satte inn nye, for å se om det hjalp, men fikk det ikke til. Forhåpentligvis finner jeg ut av det underveis i læringsprosessen, Jeg har jo så vidt startet...

Her er en link til det (så langt) ferdige resultatet, Mitt hjemsted