Dreamweaver 1

Start Dreamweaver

Dreamweaver MÅ startes slik på Høgskolen:

Start-knapp > EST-bibin > Dreamweaver 8

(Betegnelsen er feil - Dreamweaver-versjonen er egentlig CS4.)

Et svart vindu vises med teksten 'Ikke lukk dette vinduet!'. La vinduet står åpent i bakgrunn. Vinduet lukkes automatisk når du avslutter Dreamweaver.

Splash screen

Ruten nedenfor vises når Dreamweaver starter. Ruten vises også når ingen dokumenter er åpne. De siste dokumentene som du har arbeidet med er listet opp. Det er også mulig å velge Open... for å finne et eksisterende dokument. Vinduet kan også brukes for å opprette et nytt dokument (velg HTML eller CSS fra listen under Create New).

Dreamweaver skjermbilde

Skjermbildet er delt opp i:

• Menyer
• Ruter

Menyer

Står øverst i skjermbildet.

De viktigste valgene fra menyene kan utføres via knapper i rutene. Menylinjen fortsetter slik:

Fra venstre:

• Skal dokumentrute vises - Code, Split eller Design?
• Utvidelser (extensions)
• Nettsteder (sites)
• Designer
• Community help

Ruter

Resten av skjermbildet i Dreamweaver består av ruter i ulike størrelser.

1. Dokument - det her innholdet skrives
2. Properties - under dokumentet, har både HTML- og CSS-modus
3. Insert - brukes for å legge inn tagger
4. CSS - brukes for arbeid med stilark
5. Files - oversikt over filene på ditt nettsted

Definer oppsettet for nettstedet

Dreamweaver-publisering krever at du har laget et passord (http://bibin.hio.no/sftp/) først.

Når du starter Dreamweaver for første gang vises følgende vindu:

Klikk på Manage Sites...-knappen for å gå videre. Følgende vindu vises:

Velg Edit-knappen:

Under Local Info bruker du mappeikonet til høyre for Local root folder-feltet for å bla deg frem til en mappe som ligger på H:. I feltet HTTP address skal studentnummeret endres.

Gå deretter til Remote Info:

I Host directory-feltet skal studentnummer oppdateres. Fyll ut ditt studentnummer i feltet Login og passordet som du opprettet tidligere i Password-feltet. Klikk på Test-knappen for å teste om det er mulig å få kontakt med Bibin.

Det vil kanskje vises et vindu der du må godkjenne at det kobles til Bibin.

Hvis alt er OK vil følgende vindu vises:

Lagre endringer og klikk OK på denne meldingen:

Opprett et nytt nettsted

Hvis du må opprette et nytt nettsted på et senere tidspunkt kan dette gjøres slik: (Se også skjermbilder overfor)

Velg New Site fra Site-menyen.

Velg fanekortet Advanced.

Category - Local Info:

• Site name - dette er navnet for nettstedet som brukes internt i Dreamweaver. Det vises ikke på nettet.
• Local root folder - må være på H:, hvor den lokale kopien av filene skal lagres
• HTTP address: http://bibin.hio.no/dkdm/s12345 (12345 byttes ut med studentnummer)

Category - Remote Info:

Først må du velge FTP fra listen over Access-metoder. Deretter:

• FTP host: bibin.hio.no
• Host directory: /var/www/bibin/dkdm/s12345/ (12345 byttes ut med eget studentnummer)
• Login: s12345 (12345 byttes ut med studentnummer)
• Passord: passordet du opprettet overfor
• Use Secure FTP: viktig at dette er haket av

Forholdet mellom local (PC på skolen eller hjemme) og remote (Bibin) kan oppsummeres slik:

Put (kopiere fil fra local til remote) og Get (kopiere fil fra remote til local) brukes for å oppdatere nettstedet. Dermed gjør Dreamweaver oppgavene som vi har tidligere brukt FileZilla til.

Hvilken DTD brukes?

DTDen (Document type definition) legges inn automatisk ved opprettelse av nye nettsider. Hvilken som brukes kan du se ved å ta opp Code eller Split-modus (se punktet Code eller Design nedenfor). DTD står øverst i HTML-koden.

Alternativt kan du velge Page Properties (CTRL+J) fra Modify-menyen.

For å velge hvilken DTD som brukes som standard når nye nettsider opprettes velg Preferences (CTRL+U) fra Edit-menyen:

Opprett en ny nettside

Velg New... fra File-menyen (Ctrl+N)

• Blank Page
• Page Type: HTML
• Layout: <none>

Klikk Create-knappen for å opprette nettsiden.

Dette kan også velges fra Splash Screen som er vist overfor. Velg HTML under Create New.

Legg inn nettsidens tittel

Dvs. oppdater HTML title-tagg.

Dette kan du skrive inn rett overfor dokumentet i feltet som er merket Title. Tast enter (retur) for å forsette på innholdet i siden etter at du har fylt inn tittelen.

Code eller Design?

Dokumentruten har to visninger:

• Code - HTML-tagger og stilarkregler
• Design - nettleservisning

Knappene rett over dokumentruten kan brukes for å bestemme hvilken visning som er aktiv:

• Code - kun tagger / regler
• Split - dokumentrute er delt i to mellom tagger / regler og nettleservisning
• Design - kun nettleservisning

Hvis du gjør en endring i tagger / regler må du klikke på Refresh-knappen som vises i CSS- eller Properties-ruten for å oppdatere disse rutene.

Legg inn en overskrift

Dette kan gjøres på flere måter.

Bruk av Properties-ruten

Pass på at Properties-ruten er i HTML-modus. Velg deretter Heading 1 fra Format og skriv inn overskriften.

Bruk av Insert-ruten

Velg Text fra menyen og Heading 1 og skriv inn overskriften.

Merk teksten

Det er også mulig å skrive overskriften først, deretter merke teksten og velg Heading 1 enten fra Properties- eller Insert-ruten.

Legg inn et avsnitt med tekst

Dreamweaver er vanligvis i avsnitt-modus. Hvordan vet vi det?

Se rett under dokumentet. Tag selector viser at vi er i en p-tagg som er innenfor body-taggen. Properties-ruten viser også at det aktive formatet er Paragraph.

Insert-ruten

Menyvalget Hide labels / Show labels i Insert-ruten brukes for å vise eller skjule teksten ved siden av ikonene. Fordelen med å skjule teksten er at det er plass til flere ikoner.

F.eks. Her er Common-elementene med tekstene:

Kun 6 valg vises. Når Hide labels er valgt ser ruten slik ut:

Alle 15 valg vises. Usikker hva ikonet betyr? Lar du musepekeren hvile over ikonet vil teksten vises.

Taggene som brukes ofte kan samles i Favorites. Høyreklikk i Insert-ruten og velg Customize Favorites... fra menyen som vises.

Hva som skal plasseres i favoritter velges fra listen til venstre. Bruk >>-knappen for å kopiere valget til Favorittene. Pil-opp og pil-ned kan brukes for å endre rekkefølgen.

Lagrer nettsiden

Hurtigtasten Ctrl+S kan brukes for å lagre dokumentet. Filer som ikke er lagret er merket med stjerne.

I skjermdumpen under har jeg to nettsider åpne - dw0.html og dw1.html. Endringer i filen dw1.html er ikke lagret.

Under filnavn vises Source Code. Her er det mulig å se HTML kodene som ligger bak siden. Det er også mulig å se og endre stilarket som er knyttet til nettsiden (dw.css).

Publiser nettsiden til nettstedet

Nettsidene redigeres lokalt enten på PCens harddisk eller på lokalnettet. For at andre skal se filene må de publiseres på et nettsted (Site).

For å kopiere nettsiden - og andre tilknyttet filer, f.eks. stilark og bilder - til nettstedet kan File Management-knappen (pil opp og ned) brukes. Velg Put fra menyen som vises for å kopiere filen fra din lokalkopi til nettstedet.

Se på nettsiden

Bruk adressen: http://bibin.hio.no/dkdm/s12345/fil.html

Bytt s12345 med studentnummeret ditt.

Bytt fil.html med navnet på nettsiden din.

Jobber hjemmefra

Dreamweaver gjør jobben som FileZilla har gjort for oss tidligere.

Oppgaver

1. Opprett nettstedet ditt (site).
2. Opprett en ny nettside. Legg inn en overskrift og litt tekst. Husk å endre tittelen.
3. Overfør nettsiden til nettstedet ditt på Bibin.
4. Se på filen i en nettleser.

Åpner en eksisterende nettside

Dette kan gjøres fra Splash Screen som vises når Dreamweaver startes eller når ingen dokumenter er åpne for redigering.

Alternativt kan Open brukes fra File-menyen.

En tredje alternativ er å brukes Files-ruten for å åpne en nettside. Finn frem til filen og dobbelt klikk på filnavnet.

Opprett et nytt stilark

Velg New fra File-menyen.

• Blank Page
• Page Type: CSS
• Layout: <none>

Lagrer det tomme stilarket slik at den senere kan kobles til HTML-side(ne) dine.

Kobler stilarket til nettsiden

Mens du har nettsiden din åpen i dokument-ruten, velg lenke-knapp nederst i CSS-ruten.

Det siste stilarket som var i bruk vil bli foreslått. Andre stilark vises i listen (pil ned til høyre i feltet i File/URL-feltet). Det er også mulig å lete deg fram filen vha Browse-knappen.

Stilarkets filnavn vises nå over dokumentet.

Code- eller Split-visningen kan brukes for å se eller redigere stilarkreglene. Klikk på navnet på stilarket (f.eks. dw.css i eksempelet overfor) for å vise reglene.

Endrer farger på overskriften

Velg New CSS Rule-knapp i CSS-ruten.

Følgende vindu vises:

Her velger du selektøren, dvs. hvilken tagg, id, klasse, osv. regelen skal gjelde. For å endre alle h1-overskrifter velg Tag i den første menyen. Hvilken tagg som vises under Selector Name er avhengig av hvilken tagg som er aktiv i siden. Taggen kan evt. velges fra listen som vises når pil ned-knappen til høyre i feltet brukes.

Stilarket du har koblet til HTML-filen foreslås som stedet der regelen skal skrives.

Etter at selektøren er valgt vises et vindu med muligheter for å definere reglene for selektøren. Reglene er delt opp i 8 kategorier (Type, Background, Block, ...).

I eksempelet overfor endres color-regelen. Velg regelen og velg OK-knappen for å aktivisere.

Resultatet av dette vil være en ny regel i stilarket dw.css som ser slik ut:

h1 { color: #966; }

NB #966 er en hurtigmåte å skrive #996666.

Endrer eller slette stilarkregler

I CSS-ruten vises de selektørene som har regler. Velg elementen fra listen og velg enten Edit Rule- eller Delete CSS Rule-knappen. Å dobbelklikke på en selektør vil også åpne redigeringsvinduet.

Legg inn bilder

Velg Insert-ruten og deretter Common fra menyen. Velg Image-knappen.

Følgende vindu vises:

Her er det mulig å velge en fil fra harddisken / lokalnettet (øverst) eller skriv inn en URL (nederst).

Etter at bildefilen er valgt vises et nytt vindu der alternativtekst (alt-attributtet) skrive inn.

Alternativteksten kan endres ved hjelp av Properties-rute som ser slik ut når bildet er aktivt:

Her er det også mulig å knytte en klasse eller en id til bildet. Merk at størrelsen på bildet også vises både i piksler og i kilobyte.

Når du publiserer nettsiden til nettstedet vil bildene som er knyttet til nettsiden automatisk overføres sammen med nettsiden.

Stilark og bilder

Skal reglene gjelder alle bilder, kun noen bilder eller et enkelt bilde? Dvs. skal regelen gjelde taggen img, en klasse eller en id?

Alle bilder - velg Tag under Selector Type og finn frem til img-tagg i listen. Tips! skriv starten av taggets navn for å hoppe dit i listen.

Noen bilder - velg Class som Selector Type. Skriv inn navnet på klassen i feltet Selector Name. Gå videre og legg til reglene. I etterkant kan du klikke på bildet i nettsiden. Klassen skal nå finnes i listen over klasser i Class-feltet i Properties-ruten.

Kun ett bilde - klikk på bildet og skriv inn en id i ID-feltet i Properties-ruten. Velg deretter New CSS Rule-knapp i CSS-ruten. Velg ID som Selector Type og skriv inn id-en i Selector Name.

Aktuelle regler for bilder er f.eks. float og padding som finnes under Category Box:

Legg inn lenker

Markere lenketeksten og velg Insert-ruten. Velg deretter Hyperlink-knappen fra Common.

Lenken kan være enten absolutt eller relativ. Lim inn adressen (URL) til nettsiden det skal lenkes til eller bla deg fram til filen.

Target brukes for å åpne lenken i et nytt vindu / fanekort. Dette attributtet skal ikke brukes lenge. Det heller ikke anbefales å åpne lenker i nye vinduer pga brukervennlighet.

Access key - skriv inn en bokstav. Dette aktiviseres i ulike nettleser:

• Firefox ALT + SHIFT + bokstaven
• Internet Explorer: ALT + bokstaven, etterfulgt av ENTER
• Opera: SHIFT+ESC + bokstaven

Tab index - skriv inn et tall. Dette angir tab-rekkefølgen.

Oppgaver

1. Opprett et stilark.
2. Koble stilarket til din nettside.
3. Endre stilen på din nettside, f.eks. farger, skrifttyper, ... osv.
4. Legg inn et bilde.
5. Legg inn en liste.
6. Se på nettsiden i en nettleser.
7. Som alltid: valider nettsiden (http://validator.w3.org/).

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