1. Dreamweaver II Øvelsesgennemgang den 19. juni 2008 Instruktor: Niels Christian Nielsen [email_address]

2. Program Færdiggøre Ps-øvelse (v/ Anders)‏ Lave menu + klargøre skabelon Øvelse 1 (Pause)‏ Indhold til de forskellige sider Færdiggøre site Øvelse 2

3. Fra Ps til Dw Flyt dine billed-filer lavet i Ps til din billedmappe oprettet i Dw Noter dig pixelsstørrelser, de skal passe med pixelsangivelserne til boxene i Dw

4. Menufunktion med rollover-effekt Menufunktion skal fungere på alle fire html-filer, derfor: - bestem filnavnene nu, de skal bruges i linket. - lav boxe til hvert menupunkt, 'nest' dem til menuboxen (hold Ctrl nede og træk boxen over til menuboxen i AP elements-værktøjskassen). - placer markøren i en menupunktsbox, og tryk på 'rollover image' (Insert > Common > Image > Rolloverimage)‏ - fremkomne dialogboks udfyldes som på billedet og efterfølgende trykkes 'OK'

5. Klarg ø ring af skabelon Indsæt Ps elementer Indsæt enten som baggrundsbillede (a) eller egentlig billede (b)‏ a) editer CSS-stilen for boxen under 'Background' b) placer markøren i boxen, indsæt billede fra Insert-kassen Klargøring af CSS-stile Definer body (font, baggrund, margin: 0px) (editer hvis allerede lavet)‏ Definer p (margin-bottom: 4 pixels)‏ Flytte alle stile til ekstern fil (opret hvis ikke lavet)‏ Oprettelse af html-filer Hav index.html åben (vores skabelon), vælg File > Save As.., gem som allerede bestemte navne i den relevante mappe.

6. Øvelse 1 Lav menufunktion Klargør skabelon Opret alle fire html-filer (tjek om de virker i browseren)‏ Se slidesne her og fra forrige gang (Dw 1)‏

7. Program Færdiggøre Ps-øvelse (v/ Anders)‏ Lave menu + klargøre skabelon Øvelse 1 (Pause)‏ Indhold til de forskellige sider Færdiggøre site Øvelse 2

8. Eksterne applikationer Html + Flash-fil fra youtube.com eller daylimotion.com Kopier embed-htmlkoden ind det rette sted (placer markøren, skift derefter til Code-view, 'sæt ind')‏

9. Eksterne applikationer Lav et link til download af pdf-fil Hent pdf-filen , gem den i den relevante mappe. I Dw: Link til filen som et normalt link (marker teksten som skal fungere som link, i Properties udfyldes Link med den rette relative sti til filen.)‏ Tjek i browseren om det virker. (F12)‏

10. Program Færdiggøre Ps-øvelse (v/ Anders)‏ Lave menu + klargøre skabelon Øvelse 1 (Pause)‏ Indhold til de forskellige sider Færdiggøre site Øvelse 2

11. Nest alle boxe (som ikke allerede er nestet) til wrapper Editer CSS-stilen for wrapper (#wrapper), sæt: Type til relative - under positioning Left til 0 pixels - under positioning (placement) Top til 0 pixels - under positioning (placement)‏ Margin (alle) til auto – under box Width til det bredest e på siden – under box Tjek i browseren om det virker. Centrering af site

12. FTP-upload (File Transfer Protocol)‏ G å i filmenuen til: Site > Manage Sites... Vælg dit site og tryk 'Edit...' under fanebladet 'Advanced' i kategorien 'Remote Info' vælges FTP i 'Acces:' Udfyld som billedet her og tryk 'OK' (og 'Done' i sidste dialogboks)‏ Upload site til serverplads

13. I Files-kassen trykkes p å connect to server-knappen (1)‏ Marker alle filer og mapper og tryk p å upload (2)‏ Skift mellem 'local view' og 'remote view' for at se hvilker filer ligger p å computeren og serveren. (3)‏ N å r filerne er uploaded, tjek adressen XX p å nettet. Upload site til serverplads

14. Øvelse 2 Lav indhold til de forskellige html-filer. en med tekst og embedkoden (videoen)‏ en med tekst og pdf-filen to med tekst og et billede (indsæt billedet før teksten, marker det og sæt 'Align' til 'Right' i 'Properties' for billedet, prøv andre 'Align's)‏ Centrer siden som angivet i slide 11. (man redigerer i den eksterne CSS-fil, s å alle html-filer ændres)‏ Upload sitet via FTP, test sitet via internetadressen.