Mer om stiler og stilark. Layout. Litt Design

Transkript

1 Mer om stiler og stilark. Layout. Litt Design Webpublisering Webpublisering - HiO - Kirsten Ribu

2 I dag Struktur på hjemmesiden Mer om stiler Stiler og layout Litt om design og farger på sidene Webpublisering - HiO - Kirsten Ribu

3 Strukturering av websider Mapper Filer Webpublisering - HiO - Kirsten Ribu

4 Organisering av filene Lag mapper for ulike elementer: feks HTML der legger du alle html filene Legg bilder i en mappe (kall den for eksempel bilder ) Link til bildet blir således /bilder/bilde_av_meg.jpg sti: mappe/fil Webpublisering - HiO - Kirsten Ribu

5 Mappestruktur Webpublisering - HiO - Kirsten Ribu

6 Din hjemmeside Hovedsiden er index.html Lag en mappe for hvert fag: feks Programmering, Webpublisering, Matematikk. Inne i mappen Webpublisering ligger alle filene som hører til faget, gjerne organisert i mapper Bilder, HTML, Lenker, Ukeoppgaver. Webpublisering - HiO - Kirsten Ribu

7 Eksempel Webpublisering - HiO - Kirsten Ribu

8 Mer om selektorer Webpublisering - HiO - Kirsten Ribu

9 Stiltyper for skriftutseende Dette er de viktigste skrifttypene som går på utseende av skriften: body {font-family: "verdana", fantasy, serif; font-size: 12pt; font-style: normal; font-weight: normal} h1 {font-size: 150%; color: red; font-style: italic; font-weight: bold; text-decoration: underline} Webpublisering - HiO - Kirsten Ribu

10 Eksempel Selektoren body definerer standarden i dokumentet, og i dette tilfelle er det skriftutseende, -størrelse, -stil og -tykkelse. Skriftutseende har 3 alternativer, og de er nevnt i prioritert rekkefølge: verdana", fantasy, serif; Selektoren h1 omdefinerer noen av disse stiltypene med andre stilverdier font-size: 200%; font-style: italic; fontweight: bold Webpublisering - HiO - Kirsten Ribu

11 Stiltyper for tekstorganisering De viktigste skrifttypene som går på tekstorganisering: div {text-align: justify; line-height: 150%; text-indent: 10pt} div h1 {text-align: center} Selektoren div definerer standarden for alle blokker (<div>) til å ha tekstorganisering med jevn venstreog høyre-marg, 1,5 linjeavstand og innrykk av 1. linje i avsnitt (<p>) med 10pt. Selektoren div h1 omdefinerer tekstjusteringen til å være sentrert for overskrifter (<h1>) innenfor blokker (<div>). Webpublisering - HiO - Kirsten Ribu

12 Selektorer som klasse eller ID Du kan gi HTML elementene et unikt navn, eller et klasse-navn. For å lage en klasse skriver du.klassenavn (punktum + klassenavn, uten mellomrom!) Eksempel:.nyheter Webpublisering - HiO - Kirsten Ribu

13 Velg elementer basert på klasser Eks:.nyheter{color:red;} virker på alle elementene i klassen nyheter h1.nyheter{color:red;} virker bare på h1 elementene i klassen nyheter I åpningstaggen skriver du class= nyheter, der navnet identifiserer klassen av elementer i klassen nyheter. <div class = nyheter >Nyheter </div> Webpublisering - HiO - Kirsten Ribu

14 Unike elementer: ID Defineres på samme måte som for klassen, men skrives #id et unikt navn. I åpningstaggen skrives id= navn. Navnet er unikt. Feks: #farge <div id = farge > Webpublisering - HiO - Kirsten Ribu

15 <span>-taggen En stildefinisjon er knyttet direkte til en (X)HTML-tag eller indirekte med et classeller id-attributt. I noen situasjoner er det ønskelig å anvende stiler på tegnnivå (f.eks. enkeltord), og det er mulig ved hjelp av <span>-taggen. Nedenfor er det definert en klasse "viktig" som f.eks. kan være rød farge og fet type:.viktig {color: red; font-weight: bold} Webpublisering - HiO - Kirsten Ribu

16 Forts. For å anvende dette på et viktig ord, er det bare å omslutte ordet med <span class="viktig"> og </span>. <span class="viktig"> viktig </span>. PS. For dere som kan litt (X)HTML fra før, så er <span>-taggen arvtageren til <font>-taggen, som nå er borte i XHTML. Webpublisering - HiO - Kirsten Ribu

17 Stiltyper for farger og bakgrunn Dette er de viktigste skrifttypene som går på farger og bakgrunn body {color: #0000ff; backgroundcolor: #fffcbf; background-image: url(bakgrunn.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: 30px} Webpublisering - HiO - Kirsten Ribu

18 Forklaring De to første stiltypene definerer dokumentets tekstfarge og bakgrunnsfarge. De 4 siste stiltypene definerer et bakgrunnsbilde som skal repeteres vertikalt (i y-retningen), og som skal ligge 30 piksler fra venstre kant. Områder som ikke er dekket av bakgrunnsbildet får bakgrunnsfargen. Eksempel Webpublisering - HiO - Kirsten Ribu

19 Stiltyper for layout Layout omfatter marger, rammer, luft innenfor blokker, blokkstørrelser og "flytende objekter": div.bx {margin: 20px; width: 200px; borderwidth: thick; border-color: red; borderstyle: groove; padding: 10px; float: left} Selektoren div.bx inneholder stildefinisjoner for blokker av typen <div class="bx">. Webpublisering - HiO - Kirsten Ribu

20 Forklaring En slik blokk skal ha en margavstand (avstand til andre objekter) på 20 piksler i alle retninger, og blokken skal være 200 piksler bred. Den skal ha tykk rød ramme i stilen "groove". Luften mellom rammen og innholdet (padding) skal være 10 piksler. Den skal legges til venstre slik at andre objekter (vanligvis tekst) kan "flyte" rundt blokken til høyre. Webpublisering - HiO - Kirsten Ribu

21 Design og brukergrensesnitt Kort innføring Webpublisering - HiO - Kirsten Ribu

22 Brukergrensesnitt Alle produkter har et brukergrensesnitt Eks: Pantemanskinen i butikken: Lys lyd, bevelgelse Bil: menneske/maskin grensesnittet PC: Mer enn skjermbildet: mus, tastatur, og skjerm med diverse knapper for lys og lydkontroll Webpublisering - HiO - Kirsten Ribu

23 Brukerens rolle Utfordringer: å kjenne brukeren og dennes oppførsel I alle systemer er det brukeren som avgjør hvorvidt et system er en suksess eller ikke. Webpublisering - HiO - Kirsten Ribu

24 Menybasert GUI Brukeren utfører oppgaver ved å velge fra menyer Menyene består som oftest av tekst, men det er også mulig å ha grafikkmenyer eller en kombinasjon av tekst og grafikk. Ved design av tekstmenyer er det viktig at man bruker terminologi som er kjent for brukeren. Teksten til menyvalg bør være vært knyttet til den tjenesten som tilbys. Det er også viktig at terminologi blir benyttet på en konsistentmåte gjennom alle menyene til et system. Webpublisering - HiO - Kirsten Ribu

25 Drop-down menyer Webpublisering - HiO - Kirsten Ribu

26 Vanlige feil Dårlig navigering Hvor er jeg? Hvordan kommer jeg tilbake? Tekst er tekst og linker er linker. Tekst er ikke understreket, linkene er det Glemmer å teste i ulike browsere For mange detaljer på sidene Ulike fonter. Bruk stilark! Bilder som tekst er OK, men ikke bruk ulike fonter. Bilder som ser ut som linker, men ikke er det. Webpublisering - HiO - Kirsten Ribu

27 Hvordan navigere? Bruk enkle menyer som er konstant synlig og tilgjengelig i skjermbildet. Menyvalg blir markert etter hvert som brukeren forflytter seg mellom dem. Til dette formål kan det benyttes farger /understreking Webpublisering - HiO - Kirsten Ribu

28 Eksempel: HiO Webpublisering - HiO - Kirsten Ribu

29 Skrekkeksempler Webpublisering - HiO - Kirsten Ribu

30 Storyboards Brukes til å planlegge navigering mellom sidene Storyboards brukes av design-team for å kommunisere ideer om struktur og navigering Brukes ikke til å kommunisere med kunder Webpublisering - HiO - Kirsten Ribu

31 Eksempel Storyboardsrepresenterer handlingssekvenser som brukeren gjør for å utføre en handling. Dette storyboardet viser hvordan en bruker anvender en brukerveiledning for å finne informasjon om et gitt emne. Webpublisering - HiO - Kirsten Ribu

32 Sitemap Site-mapsviser systemets struktur (navigering). Brukes av designteamet for å strukturere systemet og skjermbildene. Webpublisering - HiO - Kirsten Ribu

33 Tommelfingerregler om fargebruk Vær konsistent i bruk av farger. Samme farge på de ulike skjermbildene = gjenkjennelse Sørg for at det er kontrast mellom tekst og bakgrunnen Unngå å kombinere farget tekst med sterkt farget bakgrunn Bruk sterke farger med stor forsiktighet Get it right in Black and White (8% av alle menn er fargeblinde) Webpublisering - HiO - Kirsten Ribu

34 Forts. Begrens bruken av animasjon Forsiktig med lyd Video krever ressurser Organiser feltene ryddig Ikke lag overfylte skjermbilder Webpublisering - HiO - Kirsten Ribu

35 Tekst/bakgrunnsfarger Webpublisering - HiO - Kirsten Ribu

36 Kontraster: Mørk på lys og lys på mørk Webpublisering - HiO - Kirsten Ribu

37 Om farger generelt Antall farger i et skjermbilde bør begrenses til 4 pr. skjermbilde 7 for et system som et hele. Farger kan utnyttes i informasjon: F.eks. farge på overtrukne konti Farger kan hjelpe til med å gruppere objekter som hører sammen Webpublisering - HiO - Kirsten Ribu

38 Oppgaver Uke 38 Du skal anvende klasser med stildefinisjoner: Lag en ny side der du bruker div (blokker). Lek deg med farger og bakgrunner på siden. Definer stiler innenfor ulike blokker ved hjelp av klasser. Bruk også det du har lært til nå: definer stiler for lister og linker. Tekst: Forklar hva et stilark er, og hvorfor det brukes. Finn eksempler på gode websider du liker, og forklar hvorfor de er gode. Skriv litt om deg selv, hva slags bakgrunn du har og hvorfor du har valgt datafag på Høgskolen i Oslo Webpublisering - HiO - Kirsten Ribu

39 Neste gang Tjenester i Internett. Protokoller: HTTP FTP SMTP Webpublisering - HiO - Kirsten Ribu