Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim

En presentation över ämnet: "Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim"— Presentationens avskrift:

1 Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se

2 2 A GENDA 9.00 – 10.15 Introduktion Platshantering och FTP 10.15 – 10.30Paus 10.30–12.00 Introduktion till CSS CSS i Dreamweaver 12.00 – 13.00Lunch 13.00 – 14.15CSS Mallar och Layouter 14.15 – 14.30Paus 14.30 – 16.00Dreamweaver Mallar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

3 3 ATT SKAPA EN PLATS (WEBBPLATS) En plats i Dreamweaver, är filer och mappar som motsvarar en webbplats på en server. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

4 4 Ö VNING : S KAPA EN WEBBPLATS Skapa en ny webbplats i Dreamweaver Ange webbplatsens titel. T.ex. DW-Test Webbplatsens root ska vara ”dag1” 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). Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

5 5 F ILÖVERFÖRING MED FTP FTP (File Transfer Protocol) Ett av de tidigaste populära filöverföringsprotokollen för Internet. Några välkända FTP Klienter FileZilla: http://filezilla-project.org/http://filezilla-project.org/ FireFTP: http://fireftp.mozdev.org/http://fireftp.mozdev.org/ WinSCP: http://winscp.net/http://winscp.net/ Dreamweaver har en inbyggd FTP-funktion. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

6 6 Ö VNING : FTP VIA F ILE Z ILLA Starta FileZilla Anslut dig till följande FTP-server ftp.hakimdata.se Användarnamn: guest@hakimdata.se Lösenord: guest Skapa en mapp med ditt namn på servern. Ladda upp inlämningsuppgiften i din mapp Surfa till http://hakimdata.se/guesthttp://hakimdata.se/guest Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

7 7 Ö VNING : FTP VIA F IRE FTP Starta FireFox Klicka på Verktyg FireFTP Välj ”Create an account…” Mata in Host och Login (obs! spara ej lösenordet) Installeras separat! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

8 8 FTP i Dreamweaver CS3 8 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

9 9 Visa lokala platser och fjärrplatser 9 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

10 10 S TILMALLAR - CSS CSS står för ”Cascading Style Sheets” CSS används för att få bättre kontroll över utseendet på webbsidor. CSS level 1(1996-1999) CSS level 2 (2004) CSS level 3 under utveckling Läs mer på http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/ CSS 2 referens finns här: http://www.w3schools.com/css/css_reference.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

11 11 V ARFÖR CSS? Med CSS skiljer man mellan innehåll och utseende. En CSS-mall styr innehållets utseende. Man får renare HTML-dokument som är lättare att felsöka. I HTML-dokument koncentrerar du dig på innehållet och i CSS-dokument på utseendet. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

12 12 S KAPA EN CSS-R EGEL selektor { Egenskap: värde;... } p { font-family: Arial; font-size: 18pt; color: red } Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

13 13 K OPPLA IHOP CSS OCH HTML Lägg stilmallen i dokumenthuvudet med Style-taggen CSS p {font-family:Arial; font-size:40pt; color:red} Min första CSS-mall Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

14 14 CSS- KLASSER Du kan dela in dina regler i olika klasser. Detta underlättar strukturering av webbsidan. Med klasser specificerar man en regel som kan återanvändas. Klasser ger möjlighet att skapa ett enhetligt utseende! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

15 15 S KAPA EN CSS- KLASS.b {font-family:Garamond; color:blue} Min första CSS-mall OBS! Klassnamn får inte påbörjas med en siffra Observera punkten Här används klassen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

16 16 S KAPA EN ID- REGEL ID-regler kan används istället för klasser #a { color:red } En Rubrik # istället för punkt id istället för klass Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

17 17 K LASS OCH ID. V ILKEN REGEL GÄLLER ?.a { color:blue} #a { color:red } En Rubrik Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

18 18 /* CSS- KOMMENTARER */ /* En kommentar kan placeras var som helst i koden vilket gör det lättare att senare förstå vad som var tanken bakom en viss kod */ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

19 19 CSS PANELEN - CSS-FORMAT Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

20 20 SKAPA EN CSS-REGEL VIA CSS-PANELEN Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

21 21 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 CSS-REGELDEFINITION Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

22 22 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

23 23 ANVÄND CSS-KLASSER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

24 24 AUTOMATISKA STILAR För varje ny textformatering skapas en ny stil automatiskt! Suverän funktion eller hur Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

25 25 DÖP OM STIL Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

26 26 EN EXTERN CSS-MALL Spara alla CSS-regler i en fil med filändelsen CSS t.ex. style.css Koppla CSS-filen via taggen link i dokumenthuvudet. Ex. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

27 27 FLYTTA CSS-REGLER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

28 28 KOPPLA TILL EN EXTERN FORMATMALL Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

29 29 REDIGERA OCH TA BORT Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

30 30 P SEUDO - KLASSER FÖR LÄNKAR a:link {color: red} a:visited{color: blue} a:hover {color: green} a:active {color: yellow} Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

31 31 PSEUDO-KLASSER FÖR LÄNKAR Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

32 32 CSS-FORMATMALLAR Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

33 33 CSS-LAYOUTER – (32 st. i DW CS3) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

34 34 FASTA LAYOUTER (ANGES I PIXLAR) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

35 35 FLYTANDE LAYOUTER (ANGES I PROCENT) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

36 36 ELASTISKA LAYOUTER (ANGES I EM d.v.s. RELATV TILL ANDRA ELEMENT) Tips: http://www.webdesignskolan.com/css/css.htm#enheter http://www.webdesignskolan.com/css/css.htm#enheter http://www.w3schools.com/css/css_units.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

37 37 HYBRID LAYOUTER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

38 38 CSS TABLE GALLERY http://icant.co.uk/csstablegallery http://icant.co.uk/csstablegallery Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

39 39 www.csszengarden.com Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Tips: http://sv.wikipedia.org/wiki/CSS_Zen_Gardenhttp://sv.wikipedia.org/wiki/CSS_Zen_Garden Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

40 40 FREE CSS TEMPLATES www.freecsstemplates.org www.freecsstemplates.org Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

41 41 Dreamweaver Mallar (Templates) Med mallar 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. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

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

43 43 Steg 1: Skapa en ny plats Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

44 44 Steg 2: Skapa en ny HTML-mall Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

45 45 Steg 3: Ange ändringsbara områden Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

46 46 Steg 4: Spara mallen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

47 47 Mallens filändelse är dwt ( D ream W eaver T emplate) Observera filnamnstillägget dwt Observera mappen Templates Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

48 48 Steg 5: Skapa sidor som bygger på mallen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

49 49 En mallövning Skapa en mall till en ny plats Ange ett ändringsbart område Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

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

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

52 52 Öppna mallen och gör några ändringar. Spara mallen och observera dialogrutan ”Uppdatera mallfiler” Spara alla sidor och granska i en webbläsare! Ändringarna appliceras på alla sidor i platsen! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

53 53 O PEN S OURCE W EB D ESIGN HTTP :// WWW. OSWD. ORG HTTP :// WWW. OSWD. ORG Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

54 54 Ö VNING : L ADDA NER ”R OUNDED _2” HTTP :// WWW. OSWD. ORG / DESIGN / PREVIEW / ID /3686/ HTTP :// WWW. OSWD. ORG / DESIGN / PREVIEW / ID /3686/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

55 55 P ACKA UPP OCH SKAPA EN PLATS Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

56 56 S PARA SOM MALL OCH ANGE ÄNDRINGSBARA REGIONER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

57 57 S KAPA NÅGRA SIDOR SOM BYGGER PÅ MALLEN Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

58 58 Tips: Kontrollera länkar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

59 59 Tips: Kontrollera kompatibilitet Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

60 60 Tips: Validera webbplatsen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009

61 61 Tips: Skapa rapporter Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2009