Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

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

Liknende presentasjoner


Presentasjon om: "Webpublisering - HiO - Kirsten Ribu - 20041 Mer om stiler og stilark. Layout. Litt Design Webpublisering 13.09.2004."— Utskrift av presentasjonen:

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

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

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

4 Webpublisering - HiO - Kirsten Ribu - 20044 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

5 Webpublisering - HiO - Kirsten Ribu - 20045 Mappestruktur

6 Webpublisering - HiO - Kirsten Ribu - 20046 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’.

7 Webpublisering - HiO - Kirsten Ribu - 20047 Eksempel

8 Webpublisering - HiO - Kirsten Ribu - 20048 Mer om selektorer

9 Webpublisering - HiO - Kirsten Ribu - 20049 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}

10 Webpublisering - HiO - Kirsten Ribu - 200410 Eksempel Selektoren body definerer standarden i dokumentet, og i dette tilfelle er det skrift- utseende, -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; font- weight: bold

11 Webpublisering - HiO - Kirsten Ribu - 200411 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 ( ) til å ha tekstorganisering med jevn venstre- og høyre-marg, 1,5 linjeavstand og innrykk av 1. linje i avsnitt ( ) med 10pt. Selektoren div h1 omdefinerer tekstjusteringen til å være sentrert for overskrifter ( ) innenfor blokker ( ).

12 Webpublisering - HiO - Kirsten Ribu - 200412 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

13 Webpublisering - HiO - Kirsten Ribu - 200413 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.’ Nyheter

14 Webpublisering - HiO - Kirsten Ribu - 200414 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

15 Webpublisering - HiO - Kirsten Ribu - 200415 -taggen En stildefinisjon er knyttet direkte til en (X)HTML-tag eller indirekte med et class- eller id-attributt. I noen situasjoner er det ønskelig å anvende stiler på tegnnivå (f.eks. enkeltord), og det er mulig ved hjelp av -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}

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

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

18 Webpublisering - HiO - Kirsten Ribu - 200418 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

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

20 Webpublisering - HiO - Kirsten Ribu - 200420 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.

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

22 Webpublisering - HiO - Kirsten Ribu - 200422 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

23 Webpublisering - HiO - Kirsten Ribu - 200423 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.

24 Webpublisering - HiO - Kirsten Ribu - 200424 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.

25 Webpublisering - HiO - Kirsten Ribu - 200425 Drop-down menyer

26 Webpublisering - HiO - Kirsten Ribu - 200426 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.

27 Webpublisering - HiO - Kirsten Ribu - 200427 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

28 Webpublisering - HiO - Kirsten Ribu - 200428 Eksempel: HiO

29 Webpublisering - HiO - Kirsten Ribu - 200429 Skrekkeksempler www.webpagesthatsuck.com http://www.nacd.org/

30 Webpublisering - HiO - Kirsten Ribu - 200430 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

31 Webpublisering - HiO - Kirsten Ribu - 200431 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.

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

33 Webpublisering - HiO - Kirsten Ribu - 200433 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)

34 Webpublisering - HiO - Kirsten Ribu - 200434 Forts. Begrens bruken av animasjon Forsiktig med lyd Video krever ressurser Organiser feltene ryddig Ikke lag overfylte skjermbilder http://www.tmbg.com/froMain.html

35 Webpublisering - HiO - Kirsten Ribu - 200435 Tekst/bakgrunnsfarger

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

37 Webpublisering - HiO - Kirsten Ribu - 200437 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

38 Webpublisering - HiO - Kirsten Ribu - 200438 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

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


Laste ned ppt "Webpublisering - HiO - Kirsten Ribu - 20041 Mer om stiler og stilark. Layout. Litt Design Webpublisering 13.09.2004."

Liknende presentasjoner


Annonser fra Google