Oppsummering fra forelesning 1

Transkript

1 1 of :26 Oppsummering fra forelesning 1 HTML har å gjøre med innhold og struktur skal strengt tatt bare brukes til slikt. alt annet med css CSS kontrollerer utseende: utlegg, skrift og farger Kontroll utføres best ved å vise sidene i en browser (F12) underveis i design-prosessen Sjekk deretter også at filene er synlige over nettet Innhold og struktur (HTML) File > New - Blank Page og HTML. Husk å endre Title-feltet som står rett over dokument-ruten. Skriv innhold i Design-visningen (Kode-visning for småjusteringer). Enten velger tagg først eller markere innholdet og velger tagg i etterkant. Insert-ruten (knapperaden overfor dokumentet) kan brukes for å velge tagger. Det er lurt å samle de mest brukte tagger i Favorites (se Dreamweaver 1 for oppskrift), men knkytter an til maskinen man jobber ved. (lagres for eksempel ikke på skolens maskin, ved mangel av brukerprofiler for studenter). Lagre HTML-dokumentet (kun a-z, 0-9, - og _ i filnavn). Utseende: utlegg, skrift, farger(css stilark) Kontroll Stilark brukes gjerne over flere sider (helt nettsted), og kan gi et nettsted enhetlig utseende Opprett et stilark (hvis du ikke skal bruke en som du har brukt tidligere). File > New - Blank Page og CSS. Lagre stilarket (kun a-z, 0-9, - og _ i filnavn). Lukk stilarket etter lagring. Klikk på lenke-ikonet i CSS Styles-ruten for å koble HTML-dokumentet til stilarket. Bruk pluss-ikonet i CSS Styles-ruten for å legge til stilarkregler. For å kontrollere en side som er publisert i dkdm_site: /undermappe/filnavn.html) Hvor undermappe avløses av navnet på evt. mappe opprettet under dkdm_site. Husk "/" (for-slash) ikke "\" (backslash) (Adresse for eksamensinnlevering er

2 2 of :26 ID-er En ID er en entydig "nøkkel" (en unik tekststreng) som er tilordnet et element i dokumentet. ID Har flere bruksmåter i HTML Lenken: <a href="oppskrift.html#punkt2">punkt 2 i oppskriften</a> sender nettleseren direkte til elementet med ID "punkt2" i nettsiden. ID-er kan også brukes for å knytte stilarkregler til en enkelt elementforekomst i HTML-dokumentet. ID Entydig nøkkel kan kun brukes én gang i nettsiden. kan ikke begynne med et tall forskjell på store og små bokstaver, dvs. 'Start' og 'start' er ikke det samme unngå norske tegn eller mellomrom Kan f.eks brukes som intern lenke (bokmerke) Lenken: <a href="oppskrift.html#punkt2">punkt 2 i oppskriften</a> sender nettleseren direkte til elementet med ID "punkt2" i nettsiden. Hvordan legger inn en ID? Plassere markøren i taggen som skal få ID-en. Velg ID-en i ID-felt i Properties-ruten. Hvordan koble en stilarkregel til en ny, ennå udefinert ID? Start i CSS-styles ruten Velg New CSS Rule-knapp i CSS Styles-ruten.

3 3 of :26 1. Definisjon av den nye (ennå unavngitte) ID som selektør velg selektør Selector Type - her velger vi ID Selector Name - Her definerer du ID-en, f.eks. 'bokmerke1' Rule Definition - sjekk at regelen skal plasseres i riktig stilark #bokmerke1 i CSS-syntax 2.Definisjon av de faktiske reglene: f.eks. skrifttype, størrelser, farger, luft, osv. definer regler velg regelkategori definer regler innenfor kategorien

4 4 of :26 Den nydefinerte IDen vises nå under All Rules i CSS Styles-ruten: NB (CSS syntaks) IDer har # foran navnet, mens klasser har et punktum foran navnet. Nederst i ruten vises de reglene som er definert for denne selektøren. Nye regler kan knyttes til selektøren ved å klikke på Add Property eller velge blyantknappen nederst i ruten. Når Add Property velges, vises en alfabetisk liste over mulige egenskaper: Med Add-properties ruten blir prosessen som følger: 1. Velg En egenskap fra listen 2. Gi egenskapen en verdi

5 5 of :26 Hvis blyant-knappen velges vises CSS Rule Definition vinduet:

6 6 of :26 Klasser Mens ID-attributtet brukes kun en gang i et HTML-dokument, kan class-attributtet brukes mange ganger, koblet til forskjellige elementer. Vi definerer klassen først (trinn 1 og 2 nedenfor), så kobler vi klassen til et hvilket som helst elemente (trinn 3) 1. Klassen defineres på forhånd ved hjelp av CSS Styles-ruten. Velg New CSS Rule-knapp i CSS Stylesruten. velg selektør Selector Type - Class Selector Name - navn på klassen som skal brukes senere. Du trenger ikke skrive punktum først. Rule Definition - hvor skal stilarkregelen lagres? 2.Definisjon av de faktiske reglene: f.eks. skrifttype, størrelser, farger, luft, osv. definer regler velg regelkategori definer regler innenfor kategorien 3. Vi kobler klassen til elementet enten i Properties-ruten. eller ved å venstreklikke elementet og velge CSS-styles fra menyen.

7 7 of :26 3.a Bruk av properties-ruten: Properties ruten forholder seg til det nåværende aktive elementet dvs. hvor i dokumentet markøren er i øyeblikket. I skjermbildet ser vi at det står '<body><p>' i Tag Selector og at '<p>' er aktiv. 'Paragraph' vises i formatlisten i Properties-ruten. 3.b Plasser markøren i elementet og høyre-klikk. Velg CSS-styles valget gjelder det innerste elementet som vises i tag-selector Klasser vises i CSS Stylesruten, med punktum foran selektør:

8 8 of :26 Lenker Lenker (hyperlinks) har helt fra starten vært webens eksistensberettigelse. De viktigste typer lenker er interne lenker (også kalt bokmerker), som åpner websiden på et bestemt sted angitt av en ID absolutte lenker - angis ved en fullstendig URL. Brukes til å kobler websiden (fra-siden) til andre websider (til-sider) utenfor fra-sidens web-sted. eksempel: " relative lenker - angis ved en plassering som er relativ til til fra-sidens plassering. Eksempel "../nabo-mappen/tilside.html" lenker til en side som liger i en nabomappe til mappen fra-siden ligger i. Lenker stiles ofte "dynamisk" basert på deres status: om de er urørt om de allerede er blitt besøkt om mus-markøren er på lenketeksten aktive lenker (i det de klikkes på). Legge inn en lenke: start ved å markere ankerteksten (teksten som skal klikkes på når lenken skal aktiveres. Merk teksten som skal være lenketeksten (også kalt ankerteksten). Husk ingen 'klikk her', 'les mer'! Velg lenke-knappen (Hyperlink) som finnes under Common i Insert-ruten: Følgende vindu vises: (a.) Hvis dokumentet det skal lenkes til finnes på samme server / nettsted, kan man lenke relativt (mappeknappen til høyre for Link-feltet brukes for å bla deg frem til dokumentet) Dette gjør det lettere å flytte hele nettsteder, da URLer er koblet til stedhierarkiet og ikke til et bestemt servernavn. (b.) Hvis dokumentet finnes på en annen server, lenker man absolutt: kopier adressen ( fra adressefelt i nettleseren og lim den inn i Link-feltet.

9 9 of :26 En alternativ måte å legge på en lenke er å bruke Link-feltet i Properties ruten. Merk lenketeksten i dokumentet, (a.) skriv eller lim inn adressen det skal lenkes til (b.)evt. bruk mappe-knappen til høyre for feltet for å lage en relativ lenke til en annen av dine sider). Klikk utenfor feltet når du er ferdig. Stiling av lenker: Lenker kan endre utseende basert på lenkens status. Velg New CSS Rule-knappen fra Insert-ruten. Selector Type: Compound Selector Name: f.eks. a:visited Muligheter: a:link - ikke besøkt a:visited - besøkt a:hover - lenker når musepekeren er over dem Rule Definition: hvor skal regelen lagres Relevante stilarkregler er Text-decoration og Color som finnes under Type:

10 10 of :26 DW har gode fasiliteter for sideutlegg Egendefinerte (engesk: custom) sideutlegg Ferdigdefinerte sideutlegg å velge blant Begge disse typene gjør ekstensiv bruk av <div>-inndelinger Egendefinerte utlegg er det designeren som oppretter div'ene I de ferdige utleggene lages divene av verktøyet, men designeren kan kontrollere de, og legge egne div'er etter behov. Egendefinerte sideutlegg For lage en side med egendefinert utlegg gjøres følgende: finn ut hvilke inndelinger du trenger skriv inn basis innholdet for inndelingene, plasser div'er rundt disse stiler div'ene etter behov Redigerer (og stil) innholdet videre mens du utvikler siden. Finn ut hvilke inndelinger vi trenger Vi regner med at vi trenger fire inndelinger Sidetopp, venstremeny, innhold og sidebunn.

11 11 of :26 Skriv inn basisinnhold Vi skriver tekster som skal gi oss "håndtak" til senere å definere våre div'er Sidetopp skal ha en div som strekker seg over hele vinduets bredde de fire menypunktene skal utgjøre venstremenyen som skal venstreflyte hovedinnholdet skal i sin helehet plasseres til høyre for venstremenyen sidebunnen skal, lik sidetoppen strekke seg over hele vinduets bredde. Følgende gjøres etter tur for alle områdene: de fire områder med div-tagger. Marker teksten og velg Insert Div Tag fra Layout i Insertruten: Velg 'Wrap around selection' fra Insert-listen og skriv inn en ID i ID-feltet. Velg id'er som utrykker div'ens rolle Området omgitt av div'en vises i DW med stiplet linje:

12 12 of :26 Div-en vises også i Tag Selector nederst i dokument-ruten: Innholdet i Tag Selector leses slik: innenfor body-tagg har vi en div-tagg som har en id-attributt med verdi 'sidetopp'. Innenfor div-en er det en h1-tagg. Dvs: <body> <div id="sidetopp"> <h1>... Neste div skal omfatte en liste. Vi markerer HELE LISTEN, på følgende måte: klikke på et listepunkt i dokument-ruten og velge ul-taggen i Tag Selector: Når alle fire områder er merket med div-tagger vil siden i design-modus se slik ut: Alle div'er vi definerte fremstår i DW med stiplet ramme Stiling av divene

13 13 of :26 Vi starter med Sidetoppen Klikk innenfor div-en og velg i Tag Selector. Div-en blir merket med en hel blå linje. Velg deretter New CSS Rule-knappen i CSS Stylesruten. ID-en til merkede div foreslås som selektør Husk på å be om at regelen lagres lagre i css-filen (nederst på bildet, kuttet vekk her). De viktigste valgene våre herforetas i kategorien Box Etter å ha klikket OK på forrige bildet (New CSS Rule): velg Box-kategorien, velg clear: both Det betyr at denne div'en ikke skal ha noen elementer på sidene. For oss betyr det at den skal "råde over" toppområdet. (Så lenge diven ikke har noe over seg, har det egentlig ingen betydning)

14 14 of :26 Stiling av venstremeny: Marker div'en som ovenfor Ny CSS-regel, #meny foreslås. Her sier vi at div-en skal være 200 piksler i bredden og at den skal plasseres til venstre og annet innhold skal "flyte" til høyre for den. Stiling av innholds-diven: Marker div'en som ovenfor Ny CSS-regel, #innhold foreslås. Div'en her skal få en venstremarginsom er minst like stor som bredden på menyen Hak vekk "Same for all" skriv et tall større enn 200 i "left"-elementet. Dette tilsvarer i CSS-syntaks: #innhold { margin-left: 220px; }

15 15 of :26 Margen til venstre for div-en #innhold vises i Dreamweaver slik når div-en er valgt i Tag Selector Legg merke til at vi foreløpig ikke ha gjort noe med sidebunn-diven... For å tvinge div-en 'sidebunn' å komme nederst brukes stilarkregelen Clear som også finnes under Box:

16 16 of :26 Litt om boks-modellen Boksmodellen som brukes i stilark kan illustreres slik: I tillegg til margin, border og padding som vises i tegningen, kan bredden bestemmes vha widthregelen. Width bestemmer bredden av området som er farget grått i tegningen. NB. den virkelige bredden av et element er summen av width, margin, padding og border-width. Div-en som har id 'innhold' flyttes til høyre for menyen ved å legge til en venstremarg Padding vises i DW som et gråskravert felt.

17 17 of :26 Bruk av Dreamweavers ferdige sideutlegg For å bruke DWs ferdigdefinerte utlegg: finn ut ønsket utlegg på siden velg utlegget som står nærmest det utlegget Et utlegg kan være: enten "fixed" (fast bredde målt i piksler eller et annet lengdmål) eller "liquid", hvor breddene angis i prosenter Foreta justeringer i din side etter behov Vi antar at vi har funnet en design som passer våre behov, som ligner på siden vi designet ovenfor. Velg New... fra File-meny. Hvis HTML velges under Page Type vises en liste over ferdige sideutlegg:

18 18 of :26 Avhengig av hvilket design vi velger, får vi en illustrasjon av valgt meny En illustrasjon av siden vises. Her brukes ulike symboler for å vise de ulike valg. Fixed design Bredden på kolonnene defineres i piksler. Bredden endres ikke i forhold til bredden på nettleseren, dvs. hvis bredden er større enn nettleseren må brukere skrolle til venstre og høyre. Omvendt hvis nettleseren er større enn bredden vil det være tomrom på sidene. Liquid design Bredden på kolonnene defineres i prosent vil endrer seg i forhold til bredden på nettleseren.

19 19 of :26 plassering av stilarket Designet er basert på ferdigdefinerte stilark (med masse kommentarer) som dreamweaver lagrer på ønsket sted Hvis Create New File er valgt, får du opp et vindu for å angi navnet på stilarket og plasseringen. Hvis 'Link to existing file' er valgt fra Layout CSS-listen må stilarket kobles ved hjelp av lenke-knapp før dokumentet kan opprettes. Nedenfor vises nedre-høyre delen av menyen. Det er ikke uvanlig at man ønsker flere sider med samme design i nettstedet I dette tilfelle: Ved design av den første siden skal man bruke "Create New File" alternativet, og lagre stilarket øverst i sitt mappehierarki (i vårt tilfelle blir det rett under dkdm_sitemappen) Ved design av en (evt.) andre (og tredje og fjerde... ) side med likt utlegg, velg "Link to existing File"-alternativet, og pek til den allerede På den måten vil stiloppdateringer vi gjør, gjelde alle våre sider, som ofte er ønskelig. Merk: HTML-filen må lagres. Først da kobles stilarkfilen skikkelig til den.

20 20 of :26 Nedenfor vises ferdigutleggsdokumentet i design-modus. Meningen er å bruke denne som utgangspunkt, og endre innholdet samt andre ønskede egenskaper. Div-ene er avgrenset med stiplete rammer og fylt med innhold som kan redigeres. Innholdet forklarer oppbyggingen av siden

21 21 of :26 Dreamweavers sideutleggdokumenter har alltid en div med klassen 'container' som omfatter hele innholdet i siden. Denne brukes ofte for å bestemme sidens bredde og justering. Hvis vi plasserer musmarkøren i teksten 'Instructions' vises følgende i Tag Selector: Dvs. innenfor body-tagg er det en div-tagg med klassen 'container' og innenfor den, en ny div-tagg med klassen 'content'. Innenfor denne er det en h1-tagg. Margin og padding kan oppgis slik i stilark: 20px - betyr at alle sider har denne verdien. 20px 0 20px 0 - verdier oppgis for alle fire sider. TRouBLe - Top, right, bottom, left. 20px 0 - når kun to verdier oppgis betyr det at første verdi gjelder top og bottom, mens andre verdien gjelder right og left. Margin 0 auto betyr at topp og bunn skal det ikke være marg. Til høyre og venstre er verdien 'auto' som betyr midstilt. Arbeid videre med å erstatte "liksom innholdet" til ekte innhold og endre stilarkregler til ønsket utseende.

22 22 of :26 Eksempel på endring: Legg til en horisontal navigasjonsmeny under overskriftsrammen. Plasser en ny div rett under overskriftsrammen Skriv en punktliste (en <ul> <li> - konstruksjon med noen punkter i) i div'en Stil punktlisten som et "inline"-element, dvs. Et element som ikke automatisk får linkeskifter over og under. Vi starter en div, og inn i den en "rå" (vanlig vertikal) punktliste. Plasser en ny div rett under overskriftsrammen (her bruker vi, untaksvis, Code-view (kodevisning)) Finn frem til punktet i HTML-koden der den nye div-en skal plasseres, etter slutten av "header"-diven Se etter teksten "end.header" Klikk "insert div tag" I påfølgende meny velg "At insertion point" Gi diven en ID. (tilbake til design visning) I design visning vises den nye div-en med teksten 'Content for id "meny" Goes Here'. Skriv en punktlliste i den nye diven Forsikre deg om at teksten 'Content for id "meny" Goes Here'. i den nye div'en er markert. (vises ikke her) Skriv tre menypunkter på hver sin linje (tast enter på slutten av hvert punkt). Marker punktene, og gjør de om til en liste (Insert-rute > Text > ul) Punktene kan synes (svakt) bak den brune vertikale ramme.

23 23 of :26 Vi gjør om den vertikale listen til en horisontal liste Stiling av selve listen Plasser markøren et sted i punktlisten og klikk <ul> for å velge hele punktlisten Lag en ny stil i CSS-ruten (+ nederst i CSS-ruten). Stilen skal være "Compound" og bare gjelder punktlister innenfor #meny innenfor container. Andre lister blir ikke berørt. List style type none betyr at punktene at det ikke brukes noen punktmarkering på listeelementene, bare selve teksten. i CSS:.container #meny ul { list-style-type: none; }

24 24 of :26 Stiling av listeinnførslene Plasser markøren et sted i punktlisten og klikk <li> for å velge hele punktlisten Lag en ny stil i CSS-ruten (+ i CSS-ruten). Selector Name:.container #meny ul li Her lager vi regler innen to kategorier: Block: Listeinnførselen skal være "inline" - legges ikke mellom linjeskifter. padding-right: tvinge mellomrom mellom listeinnførslene.

25 25 of :26 Sentrering av hele listen Sentreringsregelen kan annvendes på enten listen, eller den omsluttende div-en (da denne regelen "arves ned", dvs. blir gjeldende også for elementer innesluttet i elementet regelen er definert for). plasser markøren på <div#meny> lag ny regel velg kategori Block Text-align: center I CSS:.container #meny { text-align: center; } Nedenfor ser du resultatet. Øvelser Øvelser til Dreamweaver 2. Dette verk er lisensieret under en Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0 Unported lisens. Michael Preminger, michaelp@hioa.no,