Dreamweaver

Først tegnet jeg opp noen enkle skisser på hvordan jeg ville at nettsiden skulle se ut.

Nettsiden boken kan leses på har jeg kodet i dreamweaver. Siden er 1200px bred og 820px høy. Dette er en relativt bred side, den fungerer veldig bra på skolemac’en, og er ikke for bred til den bærbare pc’en min som har en noe smalere skjerm.

Når jeg eksporterte boken min ut fra indesign som en swf-fil fikk jeg blant annet med en html-fil man kan bruke for å åpne boken i nettleseren. Denne html-filen har jeg kodet inn under “les boka” linken på nettsiden, dermed dukker boken opp på denne siden og det er mulig å bla og lese i den der. Jeg har kodet hmtl-filen slik at boken har en liten grå ramme rundt seg. Uten denne grå rammen kan det se ut som om boken er kuttet når man blar i den. Denne grå rammen var opprinnelig ganske stor da jeg åpnet hmtl-filen etter å ha eksportert den ut sammen med swf-filen fra indesign. Etter å ha gjort den grå rammen mindre, plasserte jeg html-filen sine koder inn i en div-tag på “les boka” siden i dreamweaver og sørget ved hjelp av css-stylesheetet for at boken ble midtstilt på siden. Under er et bilde fra dreamweaver der jeg jobber med å kode inn html-filen, samt et bilde av boken på nettsiden.

Navigasjonsbaren/menyen har jeg laget ved hjelp av photoshop. Den består i hovedsak av 3 bilder, et for hver link/knapp. For å få en roll-over effekt, linken blir lysere når du tar musepekeren over og forblir lys når du er på siden, har jeg laget 3 nesten helt like “link-bilder” som danner “enda en” navigasjonsbar, den eneste forskjellen er at denne navigasjonsbaren har en mye lysere farge. Dermed endte jeg opp med et mørkt og et lyst bilde til hver av linkene.

Når dette var gjort kunne jeg i dreamweaver velge å sette inn link-bildene som roll-over bilder og dermed fungerer menyen slik at linken blir lysere når du tar musepekeren over den. For at linken skulle forbli lys på den siden du er inne på, satt jeg ikke inn et roll-over bilde for den gjeldene siden. Der brukte jeg kun det lyse bildet av linken.

Her er noen screenshots fra de tre linkene på nettsiden.