For de som er kjent med utvikling av nettsider, vet de at man vanligvis ikke starter med HTML-strukturen. I stedet tar man et grafikkprogram og designer layoutet til siden der. (De som jobber i et byrå, får da layoutet fra grafikeren eller kunden). Deretter er oppgaven å bygge selve siden fra dette layoutet. Det er akkurat det vi skal se på nå.
I forbindelse med å bygge opp layouter vil de to begrepene Slicing og Dicing stadig dukke opp. Dette betyr egentlig bare at man tar malen eller designet, skjærer det opp i grafikkprogrammet sitt, og setter det deretter sammen igjen ved hjelp av HTML.
Riktig grafikkprogram
Så, alle har sine preferanser når det gjelder hvilken programvare de foretrekker å bruke. Dette gjelder også for grafikkprogrammer. Når det gjelder profesjonell webdesign, ser dette imidlertid annerledes ut. Der brukes nesten utelukkende Photoshop. Faktisk ligger de fleste designforslagene som PSD-filer. Og nettopp dette PSD-formatet kan ikke åpnes eller redigeres i alle programmer.
Hvis du ikke har Photoshop, er du imidlertid ikke helt på bar bakke. Et mulig alternativ er GIMP. Du kan laste ned programmet gratis fra siden http://www.gimp.org/. Jeg vil vise deg de grunnleggende trinnene for å lage et layout ved hjelp av GIMP. Dette fungerer ganske likt i Photoshop også.
Lag ditt eget layout
Først må du tenke på de grunnleggende designaspektene:
• Hvor bredt skal layoutet være?
• Hvor mange kolonner skal det være?
Lag deretter arbeidsflaten via Fil>Ny og velg størrelsen. Selv om layoutet jeg lager vil være "fullskjerm", vil den faktiske innholdsbredden være 1000 piksler. Jeg angir høyden til 887 piksler. (Hvor høyden på nettsiden senere uansett vil avhenge av innholdet).
Bekreft informasjonen ved å trykke OK. Nå er arbeidsflaten klar og kan fylles med innhold. (For å holde oversikten jobber jeg i designfasen med en grå bakgrunn. Denne vil ikke være synlig på nettsiden senere).
Et veldig typisk element som hører hjemme på nettsiden er logoen, som vanligvis er en grafikk. For å legge den til i layoutet, åpner du Fil>Åpne og velger logoen din i formatene PNG, GIF eller JPEG. Bekreft valget med å trykke på Åpne. Deretter trykker du Ctrl+C for å kopiere logoen til utklippstavlen. Bytt deretter til selve webdesignet og trykk der Ctrl+V. Logoet vil ikke være på riktig sted ennå. Ved å bruke Flytte-verktøy kan du imidlertid enkelt flytte det til riktig posisjon.
Hvis bildet ikke lar seg flytte, må du først aktivere laget. Du finner de aktuelle innstillingene under Vindu>Dokkbare dialogbokser>Lag.
For bedre oppdeling bør du vise Hjelpelinjer. For å gjøre dette, klikker med musen på Linjal og drar den til ønsket posisjon mens du holder nede den venstre museknappen.
Du kan trekke så mange hjelpelinjer du ønsker, som du kan justere elementene på nettsiden etter.
Lag nå et nytt lag. Dette laget skal inneholde den øverste menyen.
Som navn kan du bruke Top-Meny. Opprett laget med OK. Åpne Rektangleverktøyet og dra over området der navigeringen skal plasseres.
I det gjeldende eksempelet antar jeg at bakgrunnen på den øvre menyen vil få en fargeovergang. For å oppnå dette klikker jeg på Lag fargeovergang: Fyll utvalg med fargeovergang.
Fargeovergangen skal gå fra grå til svart. Du kan justere de aktuelle fargene via Fargefeltene. Jeg setter fargeovergangstypen til FG til BG, den går altså fra forgrunns- til bakgrunnsfarge. Hold nå nede Ctrl-tasten og dra en linje fra topp til bunn i det valgte området. Når du slipper venstre museknapp, vil området ha den ønskede fargeovergangen.
Prinsipielt har du nå to alternativer:
• Du lar området for navigeringen være som det er.
• Du legger til de individuelle menyelementene for å tydeligere kunne se hvilke skrifter osv. du bruker allerede i designfasen.
Hvilket av disse to alternativene du velger, er selvfølgelig opp til deg. Men hvis du for eksempel ønsker å presentere layoutet for kundene dine, vil jeg absolutt anbefale å inkludere menyelementene. Mange kunder har nemlig generelt utfordringer med å visualisere.
Begynn med å velge en skrifttype. I GIMP finner du de relevante innstillingene under Vindu>Dokkbare dialogbokser>Skrifter.
I løpet av denne serien ble skriftproblematikken i forhold til CSS og HTML allerede diskutert. Til syvende og sist kan du som webdesigner teoretisk sett angi hvilken som helst skrifttype. Om den imidlertid er tilgjengelig på besøkendes datamaskiner og dermed kan vises, vet du ikke. Resultatene kan derfor være vanskelige å kontrollere – spesielt hvis du bruker veldig eksotiske skrifttyper. Jeg vil adressere dette aspektet igjen senere i denne serien når det gjelder skrifttypene på eksempelnettsiden. For det foreløpige layoutet velger jeg uansett følgende innstillinger:
• Verdana bold
• 20 piksler
• Hvit skriftfarge
Dere kan på denne måten legge til de enkelte menyvalgene. Det beste er å kopiere laget der det første menyvalget er inkludert, og lime det inn som et nytt lag. Deretter kan dere tilpasse teksten på laget. På denne måten lager dere den øverste menyen.
Den øverste menyen skal ha en hover-effekt. Når man da beveger musepekeren over de enkelte menyvalgene, vil bakgrunnsfargen endres. Denne effekten bør selvfølgelig også visualiseres i utkastet. For å gjøre dette, velger man ønsket hover-farge og kopierer et av de eksisterende menylagene. Man tilordner fargen til dette laget. I dette tilfellet er jeg ut fra at det skal være en blå fargenyanse. Deretter limes teksten til menyvalget inn. På denne måten får man allerede en følelse av hvordan menyen vil se ut til slutt.
