Introduksjon
Velkommen til Webdesign 2. Formålet med kurset er å gjøre deltagerne i stand til å opprette en komplett website med dynamisk innhold. Dette innebærer å jobbe mot en webserver, bruke dynamikk på serversiden og lagre innhold i en database. Vi vil i kurset bruke verktøyet Adobe Dreamweaver til mye av arbeidet med å lage websidene og bruke Microsoft Internet Information Server (IIS) som webserver. Vi vil også bruke Microsoft Sharepoint, som er en publiserings- og samarbeidsløsning på web.
Kurset er bygd opp slik at vi tar for oss de mest grunnleggende teknologiene først, før vi går over til å bruke det mer avanserte, slik som Sharepoint.
Kurset forutsetter at deltagerne har kunnskaper tilsvarende kurset Webdesign og Publisering På Internett, hvilket betyr at du kan å lage websider, kjenner designprinsippene for en website, samt er kjent med publisering til webserver og bruk av dynamikk på serversiden.
Vi bruker relativt mye tid på verktøyene i dette kurset. Teorien som gjennomgås, samt erfaringen du får når du bruker verktøyene gjør at du også blir i stand til å benytte andre tilsvarende verktøy senere.
Repetisjon av prinsipper for webdesign
I dette kurset tar lærestoffet i all hovedsak for seg teknikker og verktøy for å lage en website. Det forutsettes at prinsippene for webdesign er kjent og brukes aktivt i øvingene. Vi vil kort oppsummere de viktigste prinsippene for webdesign og oppfordrer deg til å repetere dette stoffet dersom du føler det er nødvendig.
Konsept
Et godt konsept er det som skiller en website fra en annen. Det å lage en side som er litt mere enn en side med en rekke knapper på venstre side er utfordringen. En hjemmesides konsept er sammensatt av flere elementer:
- målgruppe
- visuell stil
- bedriftsprofil
- navigasjonsstruktur
- formater og visuelt språk
- brukergrensesnitt
- innhold
- website identitet
Struktur og navigasjon
Det er viktig å ha en logisk og ryddig struktur av innholdet i en web-site. Det gjør navigasjonen av innholdet mer forståelig og gjør innholdet mer oversiktlig. Dårlig struktur er noe mange hjemmesider sliter med. Brukeren må greie å navigere seg til det han vil, i tillegg til å vite hvor han er og hvordan man skal komme seg tilbake. Du har sikkert selv opplevd å være på en website og hatt problemer med å finne den informasjonen du vil ha. Da er det ikke du som er dum, men det er strukturen av hjemmesiden som er for dårlig. Det er flere vesentlige faktorer å ta hensyn til for å bygge en god struktur:
- Mål med hjemmeside
- Målgruppe og bruker
- Innhold og format
Layout
En hjemmesides layout er hvordan man deler den opp i forskjellige elementer. Layouten er kanskje den mest viktige delen av designet til en web-site. Hvis den ikke fungerer, faller alt sammen. Når du lager layout må du hensyn til disse tingene:
- Skissering
- Mal
- Format
- Tekniske begrensninger
- Menyer
- Innhold
- Grafisk profil
- Estetikk og komposisjon
Typografi
Typografi er kunsten å bruke skrift til å kommunisere. Til forskjell fra litteratur som bruker språket til å kommunisere, så bruker typografi selve mediet; skriften. Hva kan du gjøre med typografi? Du kan:
- kommunisere verdier og assosiasjoner
- gjøre teksten mer leselig og mer motiverende å lese
Hva er en bokstav? En bokstav er et symbol som representerer en lyd. Ved å legge sammen noen bokstaver har vi et ord, som er en gruppe med lyder. Er det noe forskjell mellom et bilde av en bil og selve ordet bil? Egentlig ikke. Begge er symboler, som for deg representerer noe så grunnleggende som en boks med hjul som flytter deg fra et sted til et annet. Personer har forskjellige assosiasjoner til ordet bil. Noen ser for seg en rød sportsbil, mens andre ser for seg en lilla folkevogn. Derfor kan ord representere abstrakte verdier og assosiasjoner.
Når en bedrift bestemmer seg for et navn for seg selv, så er det ofte at de går for et navn som gir de riktige assosiasjoner. For eksempel "StereoKing". De som står bak navnet velger det kanskje fordi de mener det gir inntrykk av at de er kongen av stereoanlegg, for eksempel fordi de har et stort og bra utvalg. Potensielle kunder kan på sin side synes at ordet King er litt klisjeaktig og dermed få assosiasjoner til billige produkter. Stereo er relativt entydig og gir assosiasjoner til at de driver med stereoanlegg og lyd.
Skrifttyper
Det finnes tusenvis av skrifttyper (fonter) som man kan bruke til logoer, brødtekst (innholdstekst), plakater, brosjyrer osv. De er hovedsaklig laget over lang tid av grafiske designere og designbyråer verden over. Det finnes skrifttyper på Internett som er gratis og det finnes skrifttyper som man må kjøpe lisens for å bruke.
Helt siden Johann Gutenberg oppfant trykkpressa, har det blitt utviklet skrifttyper. Mange forskjellige stiler har blitt laget i årenes løp til forskjellig bruk, f.eks til bøker, postere, dekorasjon, veiskilt, og nå til websider. De er oppdelt i forskjellige grupper:
- Klassikere (serif)
Klassiske skrifttyper har seriffer. Seriffer er små streker eller forsterkninger av endene av bokstavene. Fordelen med serifer er at de gjør det lettere for øyet å identifisere bokstavene og ordene. Dette gjelder spesielt i lengre tekster, slik som det du nå sitter og leser.
Noen vanlig brukte klassikere er Times, Palatino og Georgia.
Eksempel: Mest sannsynlig er all tekst på denne siden i serif, denne skal uansett være det.
- Moderne (sans-serif)
Moderne skrifttyper er videreutvikling av de klassiske, uten seriffene (sans-serif). De var i utgangspunktet ment til bruk for større tekst, f.eks. skilt og postere. Disse skrifttypene egner seg godt til overskrifter og andre formål hvor man har relativt stor skrift og et kort og konsist budskap. På websider blir sans-serif skrifttyper også brukt mye til brødtekst.
Noen vanlig brukte moderne skrifttyper er Arial, Helvetica og Verdana.
Eksempel: Denne teksten er i sans-serif
Grafikk, bildebruk og visuell stil
Grafikk, bilder og illustrasjoner er en viktig del av en hjemmeside. Bruken av disse kan fascinere, gjøre brukeren nysgjerrig, skape følelser og fange brukerens oppmerksomheten raskere enn med bruk av tekst. Med bruk av disse virkemidlene kan man kommunisere - hvem man er, hva man står for, hva man jobber med og hvem man vil nå (målgruppen).
Farger
Farger er en viktig del av det visuelle designet. Foruten det å gi abstrakte og subtile assosiasjoner, så kan farger brukes å skape orden og oversikt over innholdet og menyer. Farger er kanskje det mest brukte virkemiddelet i visuelle kulturelementer som f.eks. bilde-kunst, tegneserier, tv, film, emballasje, klær, produkter og hår. Forskjellige fargekombinasjoner er moteriktige i forskjellige tider. Du husker kanskje brune og oransje veggpapir i syttiåra? Eller kræsj-pink og neongule skijakker i åttiåra? Så hva med 90-åra i bruntoner, svart og grått? Det kan hende at du er helt uenig om at disse fargene representerte disse periodene. Det kan være i sammenheng med hva du hadde på deg da, hvor gammel du var og hvor du bodde osv. Hva som er pene, stilige og spennende farger er vel subjektivt.
Verktøy som brukes i kurset
I kurset bruker vi flere verktøy som det forutsettes at du har tilgang på. Skolen tilbyr muligheter for å få tilgang til disse verktøyene, se mer informasjon om dette i fagrommet.
Adobe Dreamweaver
Adobe Dreamweaver, tidligere Macromedia Dreamweaver, er et verktøy for å på en enkel måte lage både enkle og avanserte websider. Vi bruker Dreamweaver CS5 i vårt matriell, men det meste er overførbart også til andre versjoner av programmet. Det er ikke mulig å bruke andre tilsvarende verktøy slik som Microsoft Frontpage.
Microsoft Internet Information Server (IIS)
Microsoft Internet Information Server (IIS) er Microsoft sin webserver og følger med de fleste Windows versjoner. Dersom du kjører Windows Vista Home Basic har du ikke mulighet til å kjøre IIS på egen maskin. Vi bruker IIS i våre eksempler, og spesielt når det gjelder stoff om dynamikk på serversiden er det vanskelig å gjennomføre dette med bruk av en annen webserver.
Microsoft Sharepoint
Microsoft Sharepoint er en avansert publiserings- og samarbeidsløsning som vi bruker i flere av kursets leksjoner. Vi tilbyr mulighet for å bruke Sharepoint på server hos oss.
Introduksjon til Adobe Dreamweaver
For å komme i gang med Adobe Dreamweaver har vi laget en introduksjonsvideo som tar for seg grunnleggende prinsipper og viser hvordan man lager en enkel webside.
Gi oss tilbakemelding!
Savner du noe? Synes du gjennomgangen av et emne var dårlig? Var noe spesielt bra?
Vi vil vite det! Kontakt oss og gi oss tilbakemelding. Vi bruker din tilbakemelding til å gjøre Webteknikker enda bedre.