Dreamweaver I

Øvelsesgennemgang den 12. juni 2008Instruktor: Niels Christian Nielsen

nielschrist@gmail.com

Program

Opsamling fra lektien mm.

Præsentation af programmet Dw

Øvelse 1

(Pause)

Forberedelse af træningssite

Øvelse 2

Opsamling fra lektien mm.Når man linker; relative stier og absolutte stier.

En URL-adresse:

http://www.samsonnet.dk/seminar/index.html(http://www.serverplads.dk/mappe/fil)

URL-adressen er en absolut stiangivelse, mens en relativ blot angiver stien indefra en mappe. Til eksempel: hvis man “står” i seminarmappen kan en stiangivelse nøjes med at hedde index.html, hvis man vil linke til den fil.

Begge stiangivelser er brugbare, men fordi vi vil starte med at gemme vores filer på eget drev og senere flytte dem til serverpladsen, skal vi være klar over de forskellige metoder at angive stier på.

Opsamling fra lektien mm.FARVER

Farver kodes efter hexadecimalsystemet:

#RRGGBB (rød, grøn, blå)

Sort: #000000

Hvid: #ffffff

Blå: #0000ff

Grå: #666666

Websafe colors

Angående CCS kodning 1/2

CCS koden kan skrives tre forskellige steder; inline, internal og external

Inline er når koden skrives på selve linjen i html-taggen(i attributten style=”[css-kode]”)

Internal er når koden skrives i samme fil som html-filen(indenfor head-taggen)

External er når koden skrives i en ekstern fil, der bliver 'hentet' i de andre html-filer

(i ekstern fil med endelsen .css, hentes med en enkelt linje indenfor head-taggen)

Opsamling fra lektien mm.

Angående CCS kodning 2/2

Vi går efter at skrive det meste af CSS-koden i den eksterne fil vi laver.

Når CSS-koden skrives kan den defineres til en specifik tag, en tags 'id' eller til en tags 'class', der defineres således i filen:

class: .[classnavnet] .blaafarvepaatekstid: #[idnavnet] #centreretboxtag: [tagnavnet] p

Opsamling fra lektien mm.

Statistik for netsider

Hvilke browsere, opløsning og styresystemer bruger brugerne? Internationale:http://www.w3schools.com/browsers/

Danske:http://www.fdim.dk/?pageid=84

Opsamling fra lektien mm.

Fonte til nettet

med fødder (Bookman old style)uden fødder (Verdana) (god til nettet)

Ved brug af specifik tekst bedst at bruge grafik, da klienter (computere) ikke nødvendigvis kan læse andre end de sædvanlige fonte.

Ulempe: Søgemaskiner har sværere ved at indeksere siden.

Opsamling fra lektien mm.

Præsentation af programmet Dw

OpstartVælg create new html-fil (tryk på html i dialogboksen)

Vælg 'Site > New Site'udfyld med følgende:

Tryk OK

Gem html-fil (File > Save As... [index.html])

Så er vi klar! Skriv løs! Og test siden i en browser (tryk F12)

Præsenter værktøjsbokse: Insert, Properties, CSS, Files + Design vs Code

Klargøring af ekstern CSS-fil

Tryk på ny CSS-definering-knappen:

Frem kommer:

Vælg indstillinger som ovenfor og tryk OK, og gem den nye fil i den relevante mappe.

Præsentation af programmet Dw

Præsentation af programmet Dw

Klargøring af ekstern CSS-fil

I den nyfremkomne dialogboks kan man sætte specifikationerne for stilen

For taggen body kan vivælge fonten Verdana

og evt. et billede sombaggrund

Afslut med tryk på OK

Præsentation af programmet Dw

Videre om CSS

Hvis man fremover vil redigere i stilen, man har defineret, kan man dobbeltklikke på den relevante stil i CSS-værktøjskassen.

Man kan også flytte stile frem og tilbage ved at 'hive' dem med museknappen. (Hvis en stil skal flyttes fra internt html-fil til ekstern CSS-fil)

Præsentation af programmet Dw

Videre om CSS

Hvis man vil lave en ny stil trykker man på samme knap som før, men vælger at definere den i samme eksterne CSS-fil.

Præsentation af programmet Dw

Elementære elementer

Keywords: til søgemaskineoptimering(menu: Insert > HTML > head tags > keywords)

Title: vises i browservinduets faneblad(findes lige under Insert-værktøjskassen)

Øvelse 1

Ved hjælp af nærværende slides:

1. Lav et nyt site, og gem html-filen.

2. Skriv to tekster i html-filen, giv dem via 'class'-stil forskellig baggrundsfarve, font, fontfarve og eventuelt andre spændende defineringer i dialogboksen vist i slide 11(lav 'class'en, marker teksten som skal have class'en, tilføj den i Properties-værktøjskassen > class)

3. Indsæt et billede (Insert-værktøjskassen > Common > Images (vælg et tilfældig billede))

4. Lav to html-filer og få dem til at linke til hinanden i et browservindue(marker en tekst og skriv en relativ adresse i 'Link' i Properties-værktøjskassen)

Program

Opsamling fra lektien mm.

Præsentation af programmet Dw

Øvelse 1

(Pause)

Forberedelse af træningssite

Øvelse 2

Forberedelse af træningssite

AP elementer (div-tag-layers, “absolutte divs”)Tryk på “AP div”

'Træk musen', der hvorkassen skal være, markerkassen og se på mulighederne i Properties

Mulighed for navngivning i kassen (gør det! meget vigtigt for overskuelighed)L (number of pixels from left)T (number of pixels from top)W (number of pixels in width of box)H (number of pixels in height of box)Z-index (specific number, the higher the more 'in front' the box is)

Mulighed for at 'neste' en box i en anden: Hold Ctrl nede og træk boxen over i den anden i værktøjskassen for AP elementer

Forberedelse af træningssite

AP elementer (div-tag-layers, “absolutte divs”)

Dobbeltklik på CSS-stilen for at redigere den.

Gå til 'box'.

Her kan padding og margin sættes.

Øvelse 2Lav boxe (AP elementerne) til træningsitet(ideen er at lave fire sider på sigt, dvs. fire filer plus en CSS-fil, vi laver her en skabelonside vi kalder index.html og kopierer den videre med få ændringer senere.)

A Lav site og gem html-fil som i øvelse 1.5

B Lav boxene- som angivet i skabeloner (vælg en af dem)- læg mærke til at det er 768 og ikke 786 pixels i højden.

C Ekstra- overvej indhold til de forskellige menupunkte, skriv en sigende tekst. Giv menupunktsteksterne en bestemt class.- flyt alle CSS-stile til et ekstern oprettet CSS-fil.