Oppsummering fra forelesning 1bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/Dream... · 2015. 4. 1. · Oppsummering fra forelesning 1 HTML har å gjøre med innhold og struktur

Oppsummering fra forelesning 1HTML 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-prosessenSjekk 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 knkytteran til maskinen man jobber ved. (lagres for eksempel ikke på skolens maskin, ved mangel avbrukerprofiler for studenter).

Lagre HTML-dokumentet (kun a-z, 0-9, - og _ i filnavn).

Utseende: utlegg, skrift, farger(CSS stilark)

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.

Kontroll

For å kontrollere en side som er publisert i dkdm_site: http://bibin.hioa.no/~s123456/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 http://bibin.hioa.no/dkdm/s123456/filnavn.html)

Dreamweaver 2 http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...

1 of 25 01.04.2015 16:26

ID-erEn ID er en entydig "nøkkel" (en unik tekststreng) som er tilordnet et element idokumentet.

ID Har flere bruksmåter i HTMLLenken: punkt 2 i oppskriften sender nettleserendirekte til elementet med ID "punkt2" i nettsiden.

ID-er kan også brukes for å knytte stilarkregler til en enkelt elementforekomst iHTML-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: punkt 2 i oppskriften sender nettleseren direkte tilelementet 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 iCSS Styles-ruten.


2 of 25 01.04.2015 16:26

1. Definisjon av den nye (ennå unavngitte) ID som selektør

2.Definisjon av de faktiske reglene: f.eks. skrifttype, størrelser, farger, luft, osv.

velg selektør

Selector Type - her velgervi ID

Selector Name - Herdefinerer du ID-en, f.eks.'bokmerke1'

Rule Definition - sjekk atregelen skal plasseres iriktig stilark

#bokmerke1 iCSS-syntax

definer regler

velg regelkategori

definer regler innenforkategorien


3 of 25 01.04.2015 16:26

Den nydefinerte IDen vises nå under All Rules i CSS Styles-ruten:

Med Add-properties ruten blir prosessen som følger:

2. Gi egenskapen en verdi

NB (CSS syntaks) IDer har #foran navnet, mens klasser haret punktum foran navnet.

Nederst i ruten vises dereglene som er definert fordenne selektøren.

Nye regler kan knyttes tilselektøren ved å klikke på AddProperty eller velge blyant-knappen nederst i ruten.

Når Add Property velges, visesen alfabetisk liste over muligeegenskaper:

1. Velg En egenskap fra listen


4 of 25 01.04.2015 16:26

Hvis blyant-knappen velges vises CSS Rule Definition vinduet:


5 of 25 01.04.2015 16:26

KlasserMens ID-attributtet brukes kun en gang i et HTML-dokument, kan class-attributtetbrukes mange ganger, koblet til forskjellige elementer.

Vi definerer klassen først (trinn 1 og 2 nedenfor), så kobler vi klassen til et hvilket somhelst elemente (trinn 3)

1. Klassen defineres på forhånd ved hjelp av CSS Styles-ruten. Velg New CSS Rule-knapp i CSS Styles-ruten.

2.Definisjon av de faktiske reglene: f.eks. skrifttype, størrelser, farger, luft, osv.

3. Vi kobler klassen til elementet enten i Properties-ruten. eller ved å venstreklikke elementet og velgeCSS-styles fra menyen.

velg selektør

Selector Type - Class

Selector Name - navn påklassen som skal brukessenere. Du trenger ikkeskrive punktum først.

Rule Definition - hvor skalstilarkregelen lagres?

definer regler

velg regelkategori

definer regler innenforkategorien


6 of 25 01.04.2015 16:26

3.a Bruk av properties-ruten: Properties ruten forholder seg til det nåværende aktive elementet

3.b Plasser markøren i elementet og høyre-klikk. Velg CSS-styles

dvs. hvor i dokumentetmarkøren er i øyeblikket.

I skjermbildet ser vi at det står'

' i Tag Selector ogat '

' er aktiv.

'Paragraph' vises i format-listen i Properties-ruten.

valget gjelder det innersteelementet som vises itag-selector

Klasser vises i CSS Styles-ruten, med punktum foranselektør:


7 of 25 01.04.2015 16:26

LenkerLenker (hyperlinks) har helt fra starten vært webens eksistensberettigelse.

De viktigste typer lenker erinterne 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) tilandre websider (til-sider) utenfor fra-sidens web-sted. eksempel: "http://www.vg.vo"

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-sidenligger 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 skalaktiveres.

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 skallenkes til finnes på sammeserver / nettsted, kan manlenke relativt (mappe-knappen til høyre forLink-feltet brukes for å bla degfrem til dokumentet)

Dette gjør det lettere å flyttehele nettsteder, da URLer erkoblet til stedhierarkiet og ikketil et bestemt servernavn.

(b.) Hvis dokumentet finnes påen annen server, lenker manabsolutt: kopier adressen(http://....) fra adressefelt inettleseren og lim den inn iLink-feltet.


8 of 25 01.04.2015 16:26

En alternativ måte å legge på en lenke er å bruke Link-feltet i Properties ruten.

Stiling av lenker: Lenker kan endre utseende basert på lenkens status.

Velg New CSS Rule-knappen fra Insert-ruten.

Merk lenketeksten idokumentet,

(a.) skriv eller lim inn adressendet skal lenkes til

(b.)evt. bruk mappe-knappentil høyre for feltet for å lage enrelativ lenke til en annen avdine sider).

Klikk utenfor feltet når du erferdig.

Selector Type: Compound

Selector Name: f.eks. a:visited

Muligheter:

a:link - ikke besøkt

a:visited - besøkt

a:hover - lenker nårmusepekeren er overdem

Rule Definition: hvor skalregelen lagres

Relevante stilarkregler erText-decoration og Color somfinnes under Type:


9 of 25 01.04.2015 16:26

DW har gode fasiliteter for sideutleggEgendefinerte (engesk: custom) sideutlegg

Ferdigdefinerte sideutlegg å velge blant

Begge disse typene gjør ekstensiv bruk av -inndelingerEgendefinerte utlegg er det designeren som oppretter div'ene

I de ferdige utleggene lages divene av verktøyet, men designeren kan kontrollere de, og leggeegne div'er etter behov.

Egendefinerte sideutleggFor 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.


10 of 25 01.04.2015 16:26

Skriv inn basisinnhold

Vi skriver tekster som skal gi oss "håndtak" til senere å definere våre div'er

Følgende gjøres etter tur for alle områdene: de fire områder med div-tagger.

Området omgitt av div'en vises i DW med stiplet linje:

Sidetopp skal ha en div somstrekker seg over hele vinduetsbredde

de fire menypunktene skalutgjøre venstremenyen somskal venstreflyte

hovedinnholdet skal i sinhelehet plasseres til høyre forvenstremenyen

sidebunnen skal, lik sidetoppenstrekke seg over hele vinduetsbredde.

Marker teksten og velg InsertDiv Tag fra Layout i Insert-ruten:

Velg 'Wrap around selection'fra Insert-listen og skriv inn enID i ID-feltet.

Velg id'er som utrykkerdiv'ens rolle


11 of 25 01.04.2015 16:26

Div-en vises også i Tag Selector nederst i dokument-ruten:

Neste div skal omfatte en liste.

Vi markerer HELE LISTEN, på følgende måte:

Når alle fire områder er merket med div-tagger vil siden i design-modus se slik ut:

Stiling av divene

Innholdet i Tag Selector lesesslik:

innenfor body-tagg har vien div-tagg som har enid-attributt med verdi'sidetopp'.

Innenfor div-en er det enh1-tagg. Dvs:

...

klikke på et listepunkt idokument-ruten og

velge ul-taggen i Tag Selector:

Alle div'er vi definerte fremståri DW med stiplet ramme


12 of 25 01.04.2015 16:26

Vi starter med Sidetoppen

Etter å ha klikket OK på forrige bildet (New CSS Rule):

Klikk innenfor div-en og velg iTag Selector.

Div-en blir merket med en helblå linje.

Velg deretter New CSSRule-knappen i CSS Styles-ruten.

ID-en til merkede div foreslåssom selektør

Husk på å be om at regelenlagres lagre i css-filen (nederstpå bildet, kuttet vekk her).

De viktigste valgene våreherforetas i kategorien Box

velg Box-kategorien,

velg clear: both

Det betyr at denne div'en ikkeskal ha noen elementer påsidene.

For oss betyr det at den skal"råde over" toppområdet.

(Så lenge diven ikke har noeover seg, har det egentligingen betydning)


13 of 25 01.04.2015 16:26

Stiling av venstremeny:

Marker div'en som ovenfor

Ny CSS-regel, #meny foreslås.

Stiling av innholds-diven:

Marker div'en som ovenfor

Ny CSS-regel, #innhold foreslås.

Her sier vi at

div-en skal være 200piksler i bredden og at

den skal plasseres tilvenstre og

annet innhold skal "flyte"til høyre for den.

Div'en her skal få envenstremarginsom er minstlike 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;}


14 of 25 01.04.2015 16:26

Margen til venstre for div-en #innhold vises i Dreamweaver slik når div-en er valgt i Tag Selector

For å tvinge div-en 'sidebunn' å komme nederst brukes stilarkregelen Clear som også finnes under Box:

Legg merke til at vi foreløpigikke ha gjort noe medsidebunn-diven ...


15 of 25 01.04.2015 16: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 width-regelen.

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.


16 of 25 01.04.2015 16:26

Bruk av Dreamweavers ferdige sideutleggFor å 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:


17 of 25 01.04.2015 16: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

Liquid design

Bredden på kolonnenedefineres i piksler.

Bredden endres ikke i forholdtil bredden på nettleseren,

dvs. hvis bredden erstørre enn nettleseren måbrukere skrolle til venstreog høyre.

Omvendt hvis nettleserener større enn bredden vildet være tomrom påsidene.

Bredden på kolonnenedefineres i prosent

vil endrer seg i forhold tilbredden på nettleseren.


18 of 25 01.04.2015 16: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-knappfør dokumentet kan opprettes.

Nedenfor vises nedre-høyre delen av menyen.

Det er ikke uvanlig at manønsker flere sider med sammedesign i nettstedet

I dette tilfelle:

Ved design av den første sidenskal man bruke "Create NewFile" alternativet, og lagrestilarket øverst i sittmappehierarki (i vårt tilfelleblir det rett under dkdm_site-mappen)

Ved design av en (evt.) andre(og tredje og fjerde... ) sidemed likt utlegg, velg "Link toexisting File"-alternativet, ogpek til den allerede

På den måten vilstiloppdateringer vi gjør, gjeldealle våre sider, som ofte erønskelig.

Merk: HTML-filen må lagres.Først da kobles stilarkfilenskikkelig til den.


19 of 25 01.04.2015 16:26

Nedenfor vises ferdigutleggsdokumentet i design-modus.

Meningen er å bruke dennesom utgangspunkt, og endreinnholdet samt andre ønskedeegenskaper.

Div-ene er avgrenset medstiplete rammer og fylt medinnhold som kan redigeres.

Innholdet forklareroppbyggingen av siden


20 of 25 01.04.2015 16:26

Dreamweavers sideutleggdokumenter har alltid en div med klassen 'container' som omfatter heleinnholdet i siden. Denne brukes ofte for å bestemme sidens bredde og justering.

Arbeid videre med å erstatte "liksom innholdet" til ekte innhold og endre stilarkregler til ønsket utseende.

Hvis vi plasserer musmarkøreni teksten 'Instructions' visesfølgende i Tag Selector:

Dvs. innenfor body-tagg er deten div-tagg med klassen'container' og innenfor den, enny div-tagg med klassen'content'. Innenfor denne erdet en h1-tagg.

Margin og padding kan oppgisslik i stilark:

20px - betyr at alle siderhar denne verdien.

20px 0 20px 0 - verdieroppgis for alle fire sider.TRouBLe - Top, right,bottom, left.

20px 0 - når kun toverdier oppgis betyr detat første verdi gjelder topog bottom, mens andreverdien gjelder right ogleft.

Margin 0 auto betyr attopp og bunn skal detikke være marg. Til høyreog venstre er verdien'auto' som betyr midstilt.


21 of 25 01.04.2015 16:26

Eksempel på endring: Legg til en horisontal navigasjonsmenyunder overskriftsrammen.

Plasser en ny div rett under overskriftsrammen

Skriv en punktliste (en - konstruksjon med noen punkter i) i div'en

Stil punktlisten som et "inline"-element, dvs. Et element som ikke automatisk fårlinkeskifter 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))

Skriv en punktlliste i den nye diven

Finn frem til punktet iHTML-koden der den nyediv-en skal plasseres, etterslutten av "header"-diven

Se etter teksten "end.header"

Klikk "insert div tag"

I påfølgende meny velg "Atinsertion point"

Gi diven en ID.

(tilbake til design visning)

I design visning vises den nyediv-en med teksten 'Contentfor id "meny" Goes Here'.

Forsikre deg om at teksten'Content for id "meny" GoesHere'. i den nye div'en ermarkert. (vises ikke her)

Skriv tre menypunkter på hversin linje (tast enter på sluttenav hvert punkt).

Marker punktene, og gjør deom til en liste (Insert-rute >Text > ul)

Punktene kan synes (svakt)bak den brune vertikaleramme.


22 of 25 01.04.2015 16:26

Vi gjør om den vertikale listen til en horisontal liste

Stiling av selve listen

Plasser markøren et sted ipunktlisten og klikk for åvelge hele punktlisten

Lag en ny stil i CSS-ruten (+nederst i CSS-ruten).

Stilen skal være "Compound"og bare gjelder punktlisterinnenfor #meny innenforcontainer.

Andre lister blir ikke berørt.

List style type none betyr atpunktene at det ikke brukesnoen punktmarkering pålisteelementene, bare selveteksten.

i CSS: .container #meny ul {list-style-type: none; }


23 of 25 01.04.2015 16:26

Stiling av listeinnførslene

Plasser markøren et sted ipunktlisten og klikk for åvelge hele punktlisten

Lag en ny stil i CSS-ruten (+ iCSS-ruten).

Selector Name: .container#meny ul li

Her lager vi regler innen tokategorier:

Block: Listeinnførselenskal være "inline" -legges ikke mellomlinjeskifter.

padding-right: tvingemellomrom mellomlisteinnførslene.


24 of 25 01.04.2015 16:26

Sentrering av hele listen

Sentreringsregelen kan annvendes på enten listen, eller den omsluttende div-en (da denne regelen "arvesned", dvs. blir gjeldende også for elementer innesluttet i elementet regelen er definert for).

ØvelserØvelser til Dreamweaver 2.

Dette verk er lisensieret under en Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0Unported lisens.

Michael Preminger, [email protected], 25-3-2015

plasser markøren på

lag ny regel

velg kategori Block

Text-align: center

I CSS:.container #meny { text-align:center; }

Nedenfor ser du resultatet.


25 of 25 01.04.2015 16:26

Documents

Oppsummering fra forelesning 1bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/Dream... · 2015. 4. 1. · Oppsummering fra forelesning 1 HTML har å gjøre med innhold og struktur