1 of 16 02.04.2015 15:42 Oppsummering fra forelesning 2 Lenker Lenker er, historisk sett, webens første eksistensberettigelse Lenker kan være relative (går til sider innenfor samme nettsted) eller absolutte (går til eksterne nettsider/steder) Lenker kan også stiles, med såkalte pseudo-klasser (a:link, a:visited, a:hover, a:active), som indikerer lenkens status Selektører: Klasser, IDer, tagger og kombinerte Mens klasser (for eksempel.kode) er stilelementer (selektører) som kan anvendes på flere (hvilke som helst) elementer... Er IDer (for eksempel #meny) unike i siden (skal bare brukes på et element). En stil med #ID som selektør gjelder bare ett bestemt element. Kombinerte selektører kan begrense en stil til å gjelde en tagg, bare hvis den er innenfor en bestemt kontekst: Konteksten bestemmes av en kombinasjon av tagger, klasse og/eller IDer. Eksempel: div#container ul li kommer til å stile en listeinnførsel som er innenfor en punktliste, som er innenfor en div med id container DW - utlegg DW legger til rette for at sideutlegg kan enkelt organiseres i stilede div-inndelinger. Det er enkelt å omslutte tekstmengder med diver plassere en (i utgangspunkt tom) div et bestemt sted i siden stile div'er se div'ene i DW-designmodus
2 of 16 02.04.2015 15:42 Bakgrunner Bakgrunner kan i DW kontrolleres for hele skjermbildet (alt av nettsiden som måtte vises samtidig i et nettleservindu) og enkeltelementer DW gjør det relativt enkelt å velge bakgrunner av både farger og bilder. Det går an å velge både farger og bilder som bakgrunn for en nettside Bakgrunn bør velges varsomt, for å ta vare på nettsidens lesbarhet. kontrast er et viktig kriterium Her skal vi se på bakgrunn for hele nettsider, men prinsippene gjelder stort namge andre elementer. Bakgrunner for div'er og hele siden. Et vanlig oppsett er å ha en div innenfor body som omfatter resten av innholdet. I Dreamweavers ferdige sideutlegg har denne div-en class 'container', som ligger rett innenfor body-elementet... <body> <div class="container">... </div> </body> </html> Bakgrunnsfarge for hele siden Div-en til et fixed sideutlegg har følgende stilarkregler: Bredden (med innholdet) er satt til 960px. Det er midstilt i nettleseren ved hjelp av 'margin: auto' (0 betyr at det er ingen margin øverst eller nederst). Bakgrunnen er satt til hvit (#FFFFFF)..container { width: 960px; background: #FFFFFF; margin: 0 auto; /* 0 = øverst nederst auto=sidemarger*/ }
3 of 16 02.04.2015 15:42 For å endre bakgrunnsfarge for hele siden Hvis body allerede har stilarkregler kan body velges fra listen under All Rules: Hvis en bakgrunn er oppgitt som ovenfor kan det endres ved å klikke på blyantknappen. Hvis body ikke finnes i listen, dvs. ingen regler for body er definert, klikk på +-knappen nederst i CSS-ruten,. Velg: Selector Type: Tag Selector Name: body Rule Definition: stilarket reglene skal lagres i Regelen for bakgrunnsfarge finnes under kategorien Background:
4 of 16 02.04.2015 15:42 Med hvit som bakgrunnsfarge for container og #666 (samme som #666666) som bakgrunnsfarge for body vil nettsiden se slik ut: Background-regler kan settes på de alle fleste tagger, ikke bare body. Bruk et bilde som bakgrunn Velg f.eks. body eller 'container' som selektør og legg til en stilarkregel. Selector Type: Tag Selector Name: body Rule Definition: stilarket reglene skal lagres i Regelen for bakgrunnsfarge finnes under kategorien Background: Bakgrunnsbilde velges i feltet Background-image i kategorien Background: Alle bildeformater som brukes sammen med img-tagg kan brukes her. Både relativ- og absoluttadresser til bildefil kan brukes.
5 of 16 02.04.2015 15:42 Nettlesere kan oppfører seg forskjellige på måten de, uten egen formattering viser bakgrunnsbildet noen nettlesere vil da gjenta bildet for å fylle hele siden slik: NB! Bruk av bilde under løpende tekst bør unngås. gjør lesing vanskelig og dermed forringer tilgjengelighet og brukskvaliteten til nettsiden. Background-repeat regelen Background-repeat regelen bør brukes for å bestemme om nettleseren skal gjenta bildet eller ikke. Hvis du vil at bildet skal gjentas velg repeat under Background-repeat. NB! Bruk av bilde under løpende tekst bør unngås. gjør lesing vanskelig og dermed forringer tilgjengelighet og brukskvaliteten til nettsiden.
6 of 16 02.04.2015 15:42 For å unngå at bildet gjentas velg no-repeat under Background-repeat. Resultatet ser du til høyre, Det går an å repetere bildet bortover (repeat-x) og nedover (repeat-y) Background-size regelen Det finnes en ny regel i CSS3 som heter background-size som kan brukes for å tvinge bakgrunnsbilde til å fylle hele bakgrunn. Sett background-repeat til no-repeat og legg inn regel background-size med verdiene 100% 100%. Regelen finnes ikke under kategorien Background, men kan legges inn ved å klikke på Add Property og finne fram i listen. De fleste nye nettlesere har støtte for regelen, se http://www.findmebyip.com /litmus/#css3-properties.
7 of 16 02.04.2015 15:42 plassering av et bilde Hvis bildet ikke gjentas (no-repeat), er det vanlig å plassere bildet. gjøres ved hjelp av Background-position (X) og Background-position (Y). Verdier for X:lefter, center, right Verdier for Y:top, center og bottom Kombinasjonen bestemmer bildets plassering Nøyaktig plassering kan også oppgis i piksler, målt fra øverste venstre hjørne. Tilslutt kan man også bestemme Background-attachment bakgrunnsbildet enten ruller sammen med teksten (scroll) eller sitte fast mens teksten ruller (fixed). Scroll er det mest vanlige.
8 of 16 02.04.2015 15:42 Plassering Det skilles mellom to hovedtyper plasseringsoppførsel til HTML-elementer (css displayregel): inline - starter ikke nye linjer. Eksempler er lenker (a), tegn, osv. Inline elementer ikke høyde og bredde, med untak av bilder. block - nettleseren begynner en ny linje og setter luft over og under blokk-elementer. Eksempler på slike tagger er tabell (table), lister (ul, ol), listepunkter (li), overskrifter (h1-6), avsnitt (p). Kan settes høyde og bredde. Bilder er litt spesielle her, I utgangspunktet inline, men har noen spesielle regler knyttet til seg, for eksempel ved at de har bredde og lengde, som inline elementer stort sett ikke har. Vi kan kontrollere plassering av bilder med hjelp av css. stort sett er box-og positioning-kategoriene relevante her. "Vanlig" plassering i Dreamweaver "Vanlig" plassering av et bilde i DW ser umiddelbart ut slik: Dette er fordi hvis vi tasted 'enter' før plasseringen, blir bildet automatisk plassert slik innenfor en <p><img...></p> tagg. plasserer vi bildet inntil teksten <p><img...> Lorem ipsum...</p>, plasseres bildet som om det var et vanlig tegn. bortover. Bildet bestemmer også høyden på linjen det står i.
9 of 16 02.04.2015 15:42 Direkte kontroll av plassering Plassering kan endres ved å bruke float-regelen (finnes under kategorien Box) i stilark. F.eks. float:left gir følgende resultat: For mer detaljert plassering kan reglene som finnes under kategorien Positioning brukes: Static - elementets vanlige plassering Relative - forkjøvet (+-) i forhold til den statiske positionen Absolutt - x og y coordinater fra venstre-øverste hjørne Fixed - "står stille" mens resten av siden ruller. Statisk plassering: bildets plassering uten forflytning Vi antar at bildet er plassert slik, og at plasseringer som følger nedenfor tar utgangspunkt i denne.
10 of 16 02.04.2015 15:42 Relativ plassering: relativ i forhold til hva den ville vært som static. Forflytning (fra static) bestemmes under "Placement". Top brukes for å flytte den oppover (f.eks. -20px = oppover 20 piksler) eller nedover (f.eks. 20px = nedover 20 piksler). Left brukes for å flytte til venstre (f.eks. -30px) eller til høyre (f.eks. 30px). Absolutt plassering:elementet er plassert i forhold til øverste venstre hjørne av "foreldreelementet" (den første som har en posisjon) eller av nettleseren, slik som bakgrunnsbilder overfor. Når et element har absolute plassering vises en firkant øverst til venstre. Dette kan brukes for å dra elementet til ønsket plassering. Stilarkregler oppdateres automatisk i etterkant. Forflytning (fra øverst venstre i )bestemmes under Placement. Top brukes for å flytte den oppover (f.eks. -20px = oppover 20 piksler) eller nedover (f.eks. 20px = nedover 20 piksler). Left brukes for å flytte til venstre (f.eks. -30px) eller til høyre (f.eks. 30px). Fixed Elementet ( i det tilfelle et bilde) sitter fast, mens resten av siden ruller. (Kan være nyttig om man ønsker at menyen skal synes langs hele dolumentet.)
11 of 16 02.04.2015 15:42 Z-Index Ved bruk av plassering kan vi komme i en situasjon der et element plasseres opp på et annet. For å bestemme hvilket som plasseres øverst brukes z-index. Det elementet som har høyest z-index vises på toppen. Bildet med z-index = 1000 Bildet med z-index = -1000 Overflow Det er mulig under både Positioning og Box å bestemme høyden (height) og bredden (width) av elementer. Men hva skjer hvis det ikke er plass til innholdet innenfor de oppgitte størrelsene? En div med tekst som overskrider dimensjonene Regelmeny for behandling av overflow-situasjoner
12 of 16 02.04.2015 15:42 De forskjellige valgene Visible Dette er det vanlige valget, som i bildet ovenfor. Her er også teksten som er utenfor den angitte blokkstørrelsen synlig. Hidden Det som ikke får plass, skjules. Teksten etter hører ikke scroll Div-en vil alltid vises med et rullefelt uansett størrelsen på innholdet: Dette selv om det måtte være plass til hele innholdet (i motsetning til auto, se lenger ned). Rullefelt vises ikke i Dreamweaver. Redigeringen av innholdet i div-en aktiviseres med en dobbeltklikk. Auto Rullefeltet vises kun når innholdet er større enn størrelse på div-en. Her vil rulleteksten forsvinne hvis siden redigeres og teksten gjøres mindre slik at den inngår i rektangelet.
13 of 16 02.04.2015 15:42 Litt mer om bilder Bilder redigeres stort sett i dertilegnede redigereringsprogrammer Dreamweaver tilbyr noen fasiliteter som muliggjør kjapp redigering av bilder i selve verktøyet. Herunder: utklipping av et bildeutdrag, skalering, endring av oppløsning osv. Når et bilde er aktivt (img-taggen nederst til venstre er klikket på) endres Properties-ruten slik: Noen av opplysninger som vises her er: en liten utgave av bildet størrelsen i kilobyte (K) av bildet, f.eks. 107K - husk store bilder tar lang tid å overføre og kan forsinke visning av siden. størrelsen i piksler - bredden (W) og høyden (H) Src - adressen til bildefil Link - hvis bildet er klikkbart, dvs. fungerer som en lenke til en annen side, vises adressen her Alt - alternativ tekst som vises når bilde ikke kan vises. Husk - gode, meningsfulle tekster hjelper siden å være tilgjengelig for flere og bildet søkbart i Google. Her har vi også mulighet for å koble en ID eller en klasse til bildet.
14 of 16 02.04.2015 15:42 Bildet er for stort - velg ut en del Bildet kan endres i bildebehandlingsprogrammer. I tillegg finnes det en redigeringsmulighet i Dreamweaver. Velg Crop-knappen som finnes til høyre for Edit i Propertiesruten. Vær oppmerksom på at du endrer det opprinnelig bildet og det kan være lurt å ta en kopi først. Dreamweaver viser en advarsel om dette når Crop-knappen velges. NB det er mulig å bruke Edit > Undo for å angre rett etter oppdateringen. Dra i strekene rundt den opplyste firkanten for å velge ut en del av bildet. Bruk Enter (Retur) når redigering er ferdig bildet kan være uskarpt etter operasjonen. Bruk "Resampleknappen.
15 of 16 02.04.2015 15:42 Litt mer om lister Liste-tagger kan velges før eller etter at innholdet skrives i dokumentet. Tupen liste kan også endres Liste-taggene ul, ol, li, dl, dt og dd finnes under Text i Insert-ruten. Relativt lett å kontrollere listens utseende, type punkter, og innrykket av listeelementer. Endre en liste fra en ul til en ol eller omvendt Velg et av listepunktene og deretter velg hele listen (ul eller ol) i Tag Selector: Velg ol-knappen under Text i Insert-ruten for å endre listetypen til "ordnet liste". Liste med flere nivåer? Skriv hele listen enten som ol eller ul. Marker listepunktene som skal være på underlisten og klikk på Text Indent-knappen i Properties-ruten: Ved bruk av properties-ruten, klikk "indent"-knappen De merkede listepunktene gjøres om til en underliste Legg merke til Tag Selector som viser at de merkede listepunkter er nå en liste (ul) innenfor et listepunkt. Dette tilsvarer: <ul> <li>punkt 1 <ul> <li>punkt 1-1</li> <li>punkt 1-2</li> </ul> </li>...
16 of 16 02.04.2015 15:42 Endre utseende på en liste Velg listen det gjelder ved å sette markøren på et listepunkt i listen og deretter velge listen (ul eller ol) i Tag Selector. Evt. bruk en ID eller en klasse hvis stilarkreglene ikke skal gjelde alle lister av typen i dokumentet. Klikk på New CSS Rule-knappen (evt. Edit Rule-knappen hvis det allerede finnes regler for listen). Valgene finnes under kategorien List: Valget none under List-style-type vil fjerne / tallene / bokstavene foran punktene. Resultatet av bruk av Liste-style-Position er slik: Outside er det vanlig presentasjon av listen, mens inside flytter punktmarkeringer innenfor listepunktets innhold. Øvelser Øvelser til Dreamweaver 3. Bildet er tatt av Fabiovenni og er beskyttet av CC BY-SA 2.0 lisensen. Dette verk er lisensiert under en Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0 Unported lisens. Michael Preminger, michael.preminger@hioa.no, 12-3-2013