Lektion 1 Webbplatsens layout Mahmud Al Hakim Dreamweaver 8 fortsättningskurs 1 Copyright, Mahmud.

En presentation över ämnet: "Lektion 1 Webbplatsens layout Mahmud Al Hakim Dreamweaver 8 fortsättningskurs 1 Copyright, Mahmud."— Presentationens avskrift:

1 Lektion 1 Webbplatsens layout Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se Dreamweaver 8 fortsättningskurs 1 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

2 Agenda Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 2 12.30 – 13.30 Introduktion Platshantering och FTP Felsökning 13.30 – 13.45Rast 13.45 – 14.45Dreamweaver Mallar (Templates)

3 Kursplanering Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 3 LektionDatumInnehåll 12008-04-14 Platshantering och FTP Felsökning Dreamweaver Mallar (Templates) 22008-04-21 Flash-knappar, roll-over bilder Java Applets CSS-mallar Bibliotek 32008-04-28 Ramar Navigeringsfält, Animerade menyer Lager (Layers) 42008-05-05 Formulär, Validering Extensions 52008-05-12 JavaScript Beteenden (Behaviors) Snippets

4 Referenslitteratur 1 Dreamweaver 8 Help, Macromedia 2005 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 4

5 Referenslitteratur 2 Webdesignskolan.com (Dreamweaverskolan) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 5

6 Referenslitteratur 3 Dreamweaver 8 Bible Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 6

7 Referenslitteratur 4 Dreamweaver 8 All-in-One Desk Reference For Dummies Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 7

8 Skolans datorer Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 8 Intel Core 2 Duo (2 GHz), 1 GB minne Grafik: Radeon X1600 256 MB 17" WSXGA brightview CD/DVD brännare, USB 2 (4st), FireWire 400 (1st) Inbyggd WLAN upp till 20 Mbit/s HDD 100 GB - Allt sparas lokalt på datorn och kopieras över till nätverket vid lektionens slut. Tips: Spara en kopia på ett USB-minne. Kortläsare: Digital-, MultiMediaCard-, Memory Stick-, Stick Pro- eller Stick Duo-, Smart Media- och SD-minneskort Observera att du inte är garanterad samma dator vid varje kurstillfälle.

9 Platshantering Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 9

10 Övning: Skapa en webbplats (Site) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 10 Skapa en ny webbplats (Site) i Dreamweaver Ange en titel (t.ex. DW8) Webbplatsens root ska vara public_html Webbplatsens bildmapp ska vara ”images” och ska ligga direkt under rooten. Alla interna länkar ska vara relativa till dokumentet. Använd skriftlägeskänsliga länkar (case-sensitive links). Skapa en webbsida och spara den som index.html

11 Att överföra filer till webbserver med FTP Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 11

12 Expandera FTP-klienten Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 12

13 Övning: Publicera via FTP Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 13 Publicera webbplatsen till ”din” FTP-server! Öppna den publicerade webbplatsen via en webbläsare. Om du inte har något FTP server använd följande ftp.hakimdata.se Konto: guest@hakimdata.seguest@hakimdata.se Lösenord: guest (obs! kontot är begränsad till max 10MB)

14 Övning: Visa HTML-kod och Panelen History Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 14 Skapa en ny webbsida. Klicka på ”Split” i verktygsfältet ”Document”. Skriv ditt namn och klicka på retur. Skriv gatuadress och klicka på Shift+Retur Skriv postadressen och klicka på Retur Undersök HTML-koden!

15 Panelen History Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 15

16 Övning: Skapa följande Site 16 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

17 Kontrollera länkar 17 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

18 Kontrollera kompatibilitet Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 18

19 Validera webbplatsen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 19

20 Skapa rapporter Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 20

21 Templates (mallar) Med mallar (templates) menas webbsidor som är mer eller mindre formaterade och som ligger till grund för dina webbsidor. Med mallar kan du styra delar av webbplatsens utseende på ett enkelt sätt. Mallarna innehåller instruktioner om hur delarna ska formateras. Du kan antingen använda mallar som redan finns i Dreamweaver, ladda ner mallar eller skapa egna. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 21

22 Använd befintliga DW-mallar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 22

23 Ladda ner Dreamweaver mallar från www.adobe.com Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 23 http://www.adobe.com/products/dreamweaver/download/templates/

24 Sök efter flera DW mallar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 24

25 Dreamweaver-templates.org Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 25

26 Att skapa egna DW-mallar Steg 1: Skapa en mall Steg 2: Ange ändringsbara områden Steg 3: Spara mallen Steg 4: Skapa sidor som bygger på mallen. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 26

27 Steg 1: Skapa en mall Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 27

28 Steg 2 Ange ändringsbara områden Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 28

29 Steg 3: Spara mallen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 29 Observera filnamnstillägget dwt

30 Steg 4 Skapa en sida som bygger på mallen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 30

31 En mallövning Steg 1. Skapa en mall till en ny site Steg 2. Ange ett ändringsbart område Steg 3. Spara som en_mall.dwt Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 31 Ett ändringsbart område

32 Steg 4. Skapa en sida som bygger på mallen Spara som index.html Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 32

33 Skapa en ny sida som bygger på mallen Spara som kontakt.html Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 33

34 Öppna mallen och gör några ändringar. Spara mallen och observera dialogrutan ”Update Template Files” Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 34

35 Spara alla sidor och granska i en webbläsare! Ändringarna appliceras på alla sidor i siten! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 35 Mallar är ett kraftfullt verktyg i Dreamweaver eller hur!