Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim

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

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

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, Mahmud Al Hakim, 2009

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: FireFTP: WinSCP: Dreamweaver har en inbyggd FTP-funktion. Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

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

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, Mahmud Al Hakim, 2009

8 FTP i Dreamweaver CS3 8 Copyright, Mahmud Al Hakim, 2009

9 Visa lokala platser och fjärrplatser 9 Copyright, Mahmud Al Hakim, 2009

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( ) CSS level 2 (2004) CSS level 3 under utveckling Läs mer på CSS 2 referens finns här: Copyright, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

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

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, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

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

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, Mahmud Al Hakim, 2009

19 CSS PANELEN - CSS-FORMAT Copyright, Mahmud Al Hakim, 2009

20 SKAPA EN CSS-REGEL VIA CSS-PANELEN Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

21 Copyright, Mahmud Al Hakim, 2008 CSS-REGELDEFINITION Copyright, Mahmud Al Hakim, 2009

22 Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

23 ANVÄND CSS-KLASSER Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

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

25 DÖP OM STIL Copyright, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

27 FLYTTA CSS-REGLER Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

28 KOPPLA TILL EN EXTERN FORMATMALL Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

29 REDIGERA OCH TA BORT Copyright, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

31 PSEUDO-KLASSER FÖR LÄNKAR Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

32 CSS-FORMATMALLAR Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

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

34 FASTA LAYOUTER (ANGES I PIXLAR) Copyright, Mahmud Al Hakim, 2009

35 FLYTANDE LAYOUTER (ANGES I PROCENT) Copyright, Mahmud Al Hakim, 2009

36 ELASTISKA LAYOUTER (ANGES I EM d.v.s. RELATV TILL ANDRA ELEMENT) Tips: Copyright, Mahmud Al Hakim, 2009

37 HYBRID LAYOUTER Copyright, Mahmud Al Hakim, 2009

38 CSS TABLE GALLERY Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

39 Copyright, Mahmud Al Hakim, 2008 Tips: Copyright, Mahmud Al Hakim, 2009

40 FREE CSS TEMPLATES Copyright, Mahmud Al Hakim, 2008Copyright, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

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, Mahmud Al Hakim, 2009

43 Steg 1: Skapa en ny plats Copyright, Mahmud Al Hakim, 2009

44 Steg 2: Skapa en ny HTML-mall Copyright, Mahmud Al Hakim, 2009

45 Steg 3: Ange ändringsbara områden Copyright, Mahmud Al Hakim, 2009

46 Steg 4: Spara mallen Copyright, Mahmud Al Hakim, 2009

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

48 Steg 5: Skapa sidor som bygger på mallen Copyright, Mahmud Al Hakim, 2009

49 En mallövning Skapa en mall till en ny plats Ange ett ändringsbart område Copyright, Mahmud Al Hakim, 2009

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

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

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, Mahmud Al Hakim, 2009

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

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, Mahmud Al Hakim, 2009

55 P ACKA UPP OCH SKAPA EN PLATS Copyright, Mahmud Al Hakim, 2009

56 S PARA SOM MALL OCH ANGE ÄNDRINGSBARA REGIONER Copyright, Mahmud Al Hakim, 2009

57 S KAPA NÅGRA SIDOR SOM BYGGER PÅ MALLEN Copyright, Mahmud Al Hakim, 2009

58 Tips: Kontrollera länkar Copyright, Mahmud Al Hakim, 2009

59 Tips: Kontrollera kompatibilitet Copyright, Mahmud Al Hakim, 2009

60 Tips: Validera webbplatsen Copyright, Mahmud Al Hakim, 2009

61 Tips: Skapa rapporter Copyright, Mahmud Al Hakim, 2009