I denne oppgaven skulle vi lære å bruke grids til å lage en nettside.  Vi skulle først skisse 6 analoge eller digitale skisser og teste ut symmetrisk-, asymmetrisk layout og en kombinasjon av begge.  En av skissene skulle velges og det skulle lages en wireframe og deretter skulle siden lages i Dreamweaver.

Jeg skisset først, men fant så ut at jeg måtte vite mer om hvordan grid systems for web fungerte.  Så jeg lette litt på internet og kom over et gridsystem som var kalt “960 Grid System”.  960 Grid System er utarbeidet av Nathan Smith og er basert på 12, 16 eller 24 kolonner.  Jeg åpnet Photoshop og lastet ned 24 grid systemet og satt igang med wireframen.  Det gikk greit og jeg brukte slice til å lagre de forskjellige boxene for web.  Alt gikk greit til jeg skulle lage siden i Dreamweaver, men der fikk jeg ikke CSS kodene som kom med 960 Grid systemet.  Så jeg sloss med dette i 2-3 dager før jeg ga opp og begynte på nytt.  Det var likevel ikke helt bortkastet, for Nathan Smith har regnet ut hvor bred hver kolonne er med 5px marg på  hver side. Så når jeg laget siden var det bare å bruke de målene. Dermed slapp jeg å regne ut hvor lang hver box måtte være for å få alt til å gå opp i riktig bredde.

Jeg forkastet den første siden jeg laget, for den ble altfor tung og kompakt.  I en av HTML/CSS bøkene jeg har fant jeg en god løsning på layout med grid, der siden blir laget med boxer i forskjellig bredde, noen for tekst/bilder og noen blanke.  Deretter kunne jeg lage et background image for #container elementet der det ser ut som om layouten er laget med kolonner i forskjellig bredde.  Istedenfor å slice hver enkelt bit fra photoshop importerte jeg bakgrunns bilde helt.  Så når tekst og bilder var lagt på plass, ser det ut som om det er laget med kolonner.

Layouten er en blandig av symmetrisk og asymmetrisk.  Det er det som appelerer mest til meg, og det gjør det enklere å jobbe med bilder og tekst som er vanskelig å skalere slik at boksene blir like på høyre og venstre side av siden.

Jeg fant at det å jobbe med grids var veldig enkelt i forhold til å jobbe med plassering av de forskjellige boksene og kolonnene.  Alt jeg behøvde å gjøre, var å bruke Nathan Smiths mål, legge boksene i rader fra venstre mot høyre, bruke Clear both og så legge neste rad.  Videre fant jeg ut at det å være uhyggelig nøyaktig med wireframen er viktig.  For å gjøre det enklere å plassere bilde og tekst i samme boksen, er det lettere å lage en boks for bildet og en boks for teksten og plassere dem tett vedsiden av hverandre.  Dermed ser det ut som en boks med bilde og tekst.

For å lage en luftigere layout med whitespace og god plassering av ting og tang, brukte jeg  det gyldne snitt for å regne ut bredden på venstre “colonnen” og “content area”.  Tallene passet jo ikke helt, men da tilpasset jeg det bare til den bredden som var nærmest i mål i 960 grids.

Siden jeg har laget har en fast bredde på 960 px.  Det hadde jo vært en fordel om den var flytende.  Jeg rakk ikke å gjøre det med denne siden, men jeg har lest meg frem til at dersom jeg regner alt om til em verdier, vil siden være flytende, og jeg kan bruke de samme målene og bare dele dem på 16 px, som er standard størrelse på fonten installert.  Da får jeg alle verdiene i em.  Men, det får vente til neste uke.

Her er linken til siden:

http://elevarbeid.webstudent.no/dmk1_nettstudier/anne_nygard/web2/html/uke-27/uke-27-3.html

 

 

Advertisements