IDE
Først måtte jeg finne ut hvordan siden skulle se ut, og hva den skulle handle om. Jeg hadde mange ideer, hjemmelagede produkter, interiørprodukter og til sist øredobber. Det ble den siste jeg falt for. Jeg tok masse bilder ute i naturen, og etterpå tenkte jeg igjennom hvordan siden skulle se ut.
PLANLEGGING
Jeg har nå lært, noe som jeg burde starta med for lenge siden, og det er at jeg burde tegne opp de forskjellige sitene jeg har tenkt å lage, og skrive opp størrelsesforholdene. Dette gjorde jeg ikke i denne oppgaven, og det angrer jeg på, da det hadde gjort det mye lettere for meg å konstruere etterpå. Det eneste jeg hadde en klar tanke på var hvit bakgrunn. Og slik startet det, med en hvit #body, en hvit #wrapper og et hvitt #maincontent.
HEADER/LOGO
Når jeg startet på fremsiden ville jeg finne et navn, og en farge på headeren/logoen. Jeg er glad i nynorsk, og svitjer mellom bokmål og nynorsk hele tiden. Denne siden ville jeg at skulle være nynorsk. Og tittelen ble noe så lettvint som "Øyra". Samtidig kom søsteren min med ideen om "Prikken Over I`en", og dette fikk jeg også plutselig lyst til å ta med. Jeg rotet meg igjennom fontene på "dafont.com" og fant utrolig mange kule fonter:
Ført prøvde jeg gul, som jeg alltid favoriserer.
Men for det første forsvanten den litt i skjæret til hvitt, og for det andre ble den aldri den riktige fargen i forhold til det bildet jeg hadde tenkt å benytte meg av som framsidebilde til nettsiden.
Jeg prøvde derfor å redigere fargen på de øredobbene som skulle befinne seg på framsiden, og sourca deretter fargen øredobbene fikk når jeg ble fornøyd. Denne fargen ble gammelblå, og så slik ut.
Til slutt kombinerte jeg teksten "ØYRA" med teksten "Prikken over ien" på mange forskjellige måter før jeg midtstilte begge tekstene og la "Prikken over ien" linjert over "Øyra". I tilleg reduserte jeg opasiteten på "Øyra" så den ikke skulle virke så fremtredene, og forbli uforstyrrende. Headeren ble seende slik ut:
KATEGORTEKSTENE
Til alle kategoritekstene valgte jeg samme font som til "prikken over ien", samtidig som jeg brukte en ny mer lesende tekst til der hvor jeg trengte mer tekst, og "øyra"-fonten brukte jeg noen steder som en slags overskrift.
Kategoritekstene måtte jeg også lage i photoshop, slik som jeg gjorde med alle tekstene for å sikre meg samme design når det åpnes i det mange forskjellige nettlesere. Ulempen her, er at teksten ikke blir søkbar i browser. Men jeg bryr meg mer om design enn søkbarheten, og valgte derfor å lage de i photoshop. Hver kategori-tekst skifter til sidens blåfarge når du beveger musen over. Dette kalles for rolloverbilde. I photoshop måtte jeg derfor lage hver kategori i sort, før jeg i tilleg lagde hver kategori i blått.
For å legge dette som rollover i Adobe Dreamweaver gjorde jeg slik:
Jeg markerte med piltasten i boksen hvor jeg ville ha rolloverbildet som vist her:
Deretter gikk jeg under insert-common, og valgte "rollover-image" under "image", som vist her:
Så forandret jeg "image name" til noe jeg kunne gjenkjenne i senere tid og lastet opp (1.) bildet med sort tekst som skulle vises i vanlig modus, så lastet jeg opp (2.) bildet med blå tekst som skulle vises når jeg strøk pila over, og til slutt (3.) trykket jeg "ok", som vist her:
Skjermen ble seende slik ut, og jeg kunne trykke meg inn på "live" som vist her for sjekke hvordan det ble seende ut:
KATEGORISITENE
Kategorisitene kopierte jeg opp fra framsiden. Etterpå linket jeg alle kategoriene til alle sidene, og lagret dem på nytt som "save as" for å slippe å linke mellom alle sidene på alle sidene.
"Dobbane", selve kategorisiden fikk en sidebar med øredobb-kategorier som førte deg til hver øredobbkategori. Jeg ville ha en informasjonstekst hvor hver kategori slik at man skulle skjønne at man befant seg på forskjellige siter, samtidig som jeg satte inn bilder tilsvarende kategorien.
Samme måte å sette opp overskrift og tekst brukte jeg på "Om Okk", og "Kontakt".
Informasjonsteksten til "Om Okk" ble seende slik ut:
BILDENE
Alle bildene ble redigert og skalert i photoshop slik at de passet til sidene. Jeg hadde målt opp at i øredobb-kategoriene måtte hver bilde-boks romme 470 px i bredden, og 313 px i høyden. I tilleg målte jeg opp et overbilde for hver øredobb-kategori som måtte være 980 px for i bredden å nå endene av #wrapper. Dette for å få et helhetlig utrykk gjennom hele nettleseropplevelsen.
Bildene er tatt av meg ute i naturen. Jeg er spesielt fornøyd med kategorien "Blom" som er øredobber plassert rundt på en kubæsj. Dette skal jeg gjøre mer.
STYLE-SHEET
Først fant jeg frem til alle css-reglene mine i høyre hjørne, jeg merket alle, og la dem inn i ett eget stylesheet jeg navnga "css_oppgave7_framsida.css". For å samle de på et eget stylesheet trykket jeg på symbolet som viser en lenke. Dette er vist i bilder her:
Så kom det til min kjempemistakelse. Jeg har ikke benyttet meg så veldig mye av stylesheet. Bare prøvd det ut en gang. Og nå måtte jeg benytte meg av dette fenomenet på alle sidene mine, og koble dem sammen. Jeg hadde totalt 12 siter til slutt, og det var ingen lur idè å mikse til med et stylesheet kombinert over alle sidene på slutten av oppgaven. Da skjedde det mye rart. Det som skjedde var at jeg fikk 12 css-regel-kopier av "body", "wrapper" og "maincontent" i tillieg til at alle "tekstboksene" hvor jeg hadde skrevet om innholdet til hver øredobb-kategori forsvant inn i en smørje som gjorde at alle de ble like. Det praktiske ved det, var at gjorde jeg en forandring på den ene, skjedde forandringen på alle. Og i vanlige sammenhenger er jo dette veldig greit. Men nå forsvant alle mine tekstbokser inn i en tekstboks om "blom". Jeg satt veldig lenge for å ordne opp i dette problemet, og for å være ærlig så vet jeg ikke helt hvordan jeg har fikset det. Men en ting vet jeg, at neste gang, da skal Malen Erichsen lage style-sheets fra starten av!
Jeg har nå forstått at et stylesheet er ment for å samle alle css-reglene du trenger på et sted, slik at du enkelt kan bruke dem på alle dine sider uten å måtte kopiere og styre mellom mapper og siter og "save as". Tror jeg.
CSS3
CSS er en forkortelse for "Cascading Style Sheets". Et webbasert språk som brukes for å beskrive utseende og formateringen av en nettside. CSS regler bruker vi til å bygge opp sidene, og CSS3 er rett og slett nyere måter å bygge opp på, og andre ting som kan gjøres.
I min oppgave gjorde jeg fremside-bildet litt gjennomsiktbart ved bruk av CSS3. Jeg gikk inn i formateringen på fotografiet og reduserte opasiteten til 0.6. Enkelt og greit, når man vet hva man ser etter, og hvordan man skal gjøre det.
KONKLUSJON
Jeg er veldig fornøyd med min nettside denne gangen. Og jeg føler jeg har fått til det jeg ønsket. Jeg forstår mer av hvordan ting vil bli når det kommer i browser, og at dette ikke nødvendigvis stemmer med hvordan jeg har gjort det i Dreamweaver. Det er som regel enkle forklaringer på dette.
Jeg er godt fornøyd med det enkle subtile, og jeg føler at nettsidens struktur og oppbygging gjør den lett å forstå og enkel å manøvrere.
Websiden jeg konstruerte finner du her:
Ingen kommentarer:
Legg inn en kommentar