Dreamweaver 2
1 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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)
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)
01.04.2015 16:26
Dreamweaver 2
2 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
3 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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
01.04.2015 16:26
Dreamweaver 2
4 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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
01.04.2015 16:26
Dreamweaver 2
5 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
Hvis blyant-knappen velges vises CSS Rule Definition vinduet:
01.04.2015 16:26
Dreamweaver 2
6 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
7 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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:
01.04.2015 16:26
Dreamweaver 2
8 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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: "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-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
(http://....) fra adressefelt i
nettleseren og lim den inn i
Link-feltet.
01.04.2015 16:26
Dreamweaver 2
9 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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:
01.04.2015 16:26
Dreamweaver 2
10 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
11 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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:
01.04.2015 16:26
Dreamweaver 2
12 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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
01.04.2015 16:26
Dreamweaver 2
13 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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)
01.04.2015 16:26
Dreamweaver 2
14 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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;
}
01.04.2015 16:26
Dreamweaver 2
15 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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:
01.04.2015 16:26
Dreamweaver 2
16 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
17 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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:
01.04.2015 16:26
Dreamweaver 2
18 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
19 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
20 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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
01.04.2015 16:26
Dreamweaver 2
21 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
22 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
23 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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; }
01.04.2015 16:26
Dreamweaver 2
24 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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.
01.04.2015 16:26
Dreamweaver 2
25 of 25
http://bibin.hioa.no/~michaelp/Web-publisering/dkdm/dw2/dreamwea...
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, [email protected], 25-3-2015
01.04.2015 16:26