Mer om stiler og stilark. Layout. Litt Design Webpublisering 13.09.2004 Webpublisering - HiO - Kirsten Ribu - 2004 1
I dag Struktur på hjemmesiden Mer om stiler Stiler og layout Litt om design og farger på sidene Webpublisering - HiO - Kirsten Ribu - 2004 2
Strukturering av websider Mapper Filer Webpublisering - HiO - Kirsten Ribu - 2004 3
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 - 2004 4
Mappestruktur Webpublisering - HiO - Kirsten Ribu - 2004 5
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 - 2004 6
Eksempel Webpublisering - HiO - Kirsten Ribu - 2004 7
Mer om selektorer Webpublisering - HiO - Kirsten Ribu - 2004 8
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 - 2004 9
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 - 2004 10
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 - 2004 11
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 - 2004 12
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 - 2004 13
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 - 2004 14
<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 - 2004 15
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 - 2004 16
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 - 2004 17
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 - 2004 18
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 - 2004 19
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 - 2004 20
Design og brukergrensesnitt Kort innføring Webpublisering - HiO - Kirsten Ribu - 2004 21
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 - 2004 22
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 - 2004 23
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 - 2004 24
Drop-down menyer Webpublisering - HiO - Kirsten Ribu - 2004 25
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 - 2004 26
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 - 2004 27
Eksempel: HiO Webpublisering - HiO - Kirsten Ribu - 2004 28
Skrekkeksempler www.webpagesthatsuck.com http://www.nacd.org/ Webpublisering - HiO - Kirsten Ribu - 2004 29
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 - 2004 30
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 - 2004 31
Sitemap Site-mapsviser systemets struktur (navigering). Brukes av designteamet for å strukturere systemet og skjermbildene. Webpublisering - HiO - Kirsten Ribu - 2004 32
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 - 2004 33
Forts. Begrens bruken av animasjon Forsiktig med lyd Video krever ressurser Organiser feltene ryddig Ikke lag overfylte skjermbilder http://www.tmbg.com/fromain.html Webpublisering - HiO - Kirsten Ribu - 2004 34
Tekst/bakgrunnsfarger Webpublisering - HiO - Kirsten Ribu - 2004 35
Kontraster: Mørk på lys og lys på mørk Webpublisering - HiO - Kirsten Ribu - 2004 36
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 - 2004 37
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 - 2004 38
Neste gang Tjenester i Internett. Protokoller: HTTP FTP SMTP Webpublisering - HiO - Kirsten Ribu - 2004 39