Dreamweaver fortsättning DAG 2 VT09 Mahmud Al Hakim

2 A GENDA 9.00 – 10.15CSS - Lagerhantering – 10.30Paus 10.30–12.00 Flash text och Flash knappar Bibliotek (Library) – 13.00Lunch – Beteenden och Spry Framework Fragment (Snippets) Tillägg (Extensions ) – 14.30Paus – 16.00Mer om Dreamweaver mallar Copyright, Mahmud Al Hakim, 2009

3 L AGER (AP- ELEMENT ) Ett lager i Dreamweaver är oftast ett AP-element AP-element står för ”Absolut Positionerat element”. Ett AP-element är en div-tagg som har tilldelats en absolut position. Ett lager kan innehålla text, bilder eller annat innehåll. Lager används för att utforma webbsidor. Lager kan placeras framför och bakom varandra. Du kan dölja vissa lager och visa andra samt flytta lager över skärmen. Du kan placera en bakgrundsbild i ett lager. Copyright, Mahmud Al Hakim, 2009

4 I NFOGA D IV - TAGGAR Copyright, Mahmud Al Hakim, 2009

5 F ORMATERA D IV - TAGGAR MED CSS Copyright, Mahmud Al Hakim, 2009

6 I NFOGA ETT LAGER (A P -D IV ) Tips: Ctrl-dra (Windows) om du vill rita flera lager i följd. Copyright, Mahmud Al Hakim, 2009

7 P ANELEN AP- ELEMENT OCH CSS- FORMAT Copyright, Mahmud Al Hakim, 2009

8 B YTA NAMN PÅ ETT LAGER Dubbelklicka och skriv ett nytt namn Copyright, Mahmud Al Hakim, 2009

9 L AGRETS EGENSKAPER CSS-P-element: En identifierare för Lagret som används t.ex. av CSS och JavaScript. V: Vänster, T: Topp, B: Bredd, H: Höjd Z-Index: Lagrets ordning i förhållande till andra Lager när de överlappar varandra Tips: Klicka på frågetecknet för mer information. Copyright, Mahmud Al Hakim, 2009

10 Ä NDRA BAKGRUNDSFÄRG OCH BAKGRUNDSBILD I ETT LAGER Copyright, Mahmud Al Hakim, 2009

11 V ISA OCH DÖLJA LAGER Copyright, Mahmud Al Hakim, 2009

12 Ö VERLAPPADE LAGER OCH Z-I NDEX Copyright, Mahmud Al Hakim, 2009

13 O RDNA FLERA LAGER Markera flera lager med Skift + Klicka Copyright, Mahmud Al Hakim, 2009

14 S TÖDRASTER (G RID ) Copyright, Mahmud Al Hakim, 2009

15 S TÖDLINJER Copyright, Mahmud Al Hakim, 2009

16 V ISA CSS- LAGERBAKGRUNDER Copyright, Mahmud Al Hakim, 2009

17 Ö VNING S KAPA FÖLJANDE LAYOUT M. H. A. TRE LAGER Copyright, Mahmud Al Hakim, 2009

18 C ENTRERA AP-E LEMENT (Ö VERKRUS ) Infoga ett Huvud-AP-Element och ange följande egenskaper Lägg till följande egenskap margin-left: -300px; (minus halva bredden) Copyright, Mahmud Al Hakim, 2009

19 C ENTRERA AP-E LEMENT Infoga nya AP-element innanför Huvud-AP-Elementet. Tips: Håll ner ALT för att få nya lager innuti huvudlagret. Ladda ner källkoden från Copyright, Mahmud Al Hakim, 2009

20 I NFOGA F LASH TEXT Copyright, Mahmud Al Hakim, 2009

21 I NFOGA F LASH KNAPPAR Copyright, Mahmud Al Hakim, 2009

22 B IBLIOTEK (L IBRARY ) Ett bibliotek är en särskild Dreamweaver-fil som innehåller en samling enskilda resurser eller kopior av resurser som du kan placera på dina webbsidor. Resurserna i ett bibliotek kallas biblioteksposter. Poster som du kan spara i ett bibliotek är bland annat bilder, tabeller, ljud och Flash-filer. Du kan automatiskt uppdatera alla sidor som använder en bibliotekspost när du redigerar posten. Tips: Bibliotek i Dreamweaver liknar funktionen " sidhuvud och sidfot " i MS Word. Copyright, Mahmud Al Hakim, 2009

23 E XEMPEL PÅ EN BIBLIOTEKSPOST Anta att du skapar en webbplats för ett företag som vill att en sidfot ska visas på varje sida. Du kan skapa en bibliotekspost som innehåller denna sidfot och använda biblioteksposten på varje sida. Om denna sidfot ändras kan du ändra biblioteksposten och automatiskt uppdatera varje sida där den används. OBS! För länkade poster som t.ex. bilder sparar biblioteket endast en referens till posten. Den ursprungliga filen måste ligga kvar på den angivna platsen för att biblioteksposten ska fungera ordentligt. Copyright, Mahmud Al Hakim, 2009

24 S KAPA EN NY BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2009

25 R EDIGERA EN BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2009

26 O BS ! LBI - FILEN SPARAS UNDER L IBRARY Copyright, Mahmud Al Hakim, 2009

27 I NFOGA EN BIBLIOTEKSPOST Drag och släpp eller ”Infoga” Copyright, Mahmud Al Hakim, 2009

28 U PPDATERA EN BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2009

29 Beteenden Ett beteende är en kombination av en händelse och en åtgärd (JavaScript funktion) som sätts igång när händelsen inträffar. Beteendekod är ett JavaScript som körs på klienten. Det betyder att koden körs i webbläsaren och inte på servern. Copyright, Mahmud Al Hakim, 2009

30 Övning: Öppna webbläsarfönster Detta är en Null Link Skriv # eller Javascript:; Copyright, Mahmud Al Hakim, 2009

31 Övning: Validera ett formulär Copyright, Mahmud Al Hakim, 2009

32 S PRY FRAMEWORK Spry framework är ett JavaScript-bibliotek som ger webbdesigners möjlighet att bygga webbsidor som erbjuder besökarna en större upplevelse. Spry framework är utformade så att koden är enkel och lätt att använda för dem som har grundläggande kunskaper i HTML, CSS och JavaScript. En Spry-widget är ett sidelement som ger en större användarupplevelse genom aktivering av åtgärder från användaren. T.ex. widgeten Textfält för validering Copyright, Mahmud Al Hakim, 2009

33 W IDGETEN T EXTFÄLT FÖR VALIDERING Tips Klicka på frågetecknet för mer info. Copyright, Mahmud Al Hakim, 2009

34 F RAGMENT (S NIPPETS ) Med fragment (Snippets ) kan du spara innehåll för att snabbt kunna återanvända det. Du kan skapa, infoga eller redigera fragment av HTML, JavaScript, PHP med flera. Några fördefinierade fragment som du kan använda som utgångspunkt finns tillgängliga under panelen ”Filer– Fragment”. Copyright, Mahmud Al Hakim, 2009

35 A TT SKAPA KODFRAGMENT Copyright, Mahmud Al Hakim, 2009

36 K ORTKOMMANDON Copyright, Mahmud Al Hakim, 2009

37 S KAPA KORTKOMMANDO TILL DINA F RAGMENT OCH EXPORTERA UPPSÄTTNING SOM HTML Copyright, Mahmud Al Hakim, 2009

38 Ö VNING : A NVÄND DW-F RAGMENT 1. Skapa en ny JavaScript fil. Spara som print.js 2. Infoga ”Skriv ut sida” som finns under JavaScript – webbläsarfunktioner. Copyright, Mahmud Al Hakim, 2009

39 ”S KRIV UT SIDA ” FORT. 3. Skapa et nytt HTML-dokument. 4. Infoga JavaScript filen ”print.js” 5. Infoga en knapp och ändra attributet value till ”Skriv ut”. 6. Lägg till ett beteende: Välj händelsen ”onClick” från listan och skriv funktionens namn och parenteser till höger. 7. Testa knappen i en webbläsare. Copyright, Mahmud Al Hakim, 2009

40 T ILLÄGG (E XTENSIONS ) Extensions (Tillägg) är nya funktioner som du enkelt kan lägga till i Dreamweaver. Det finns t.ex. tillägg som gör att du kan formatera om tabeller, infoga kalender eller skapa fina CSS-Menyer. Extensions kan laddas ner från Adobe Exchange Extensions har filändelsen mxp Copyright, Mahmud Al Hakim, 2009

41 E XTENSION M ANAGER (T ILLÄGGSHANTERAREN ) Copyright, Mahmud Al Hakim, 2009

42 L ADDA NER OCH INSTALLERA E XTENSIONS Copyright, Mahmud Al Hakim, 2009

43 Ö VNING Ladda ner följande Extension från Adobes hemsida ”Free Menu Blue Style” Skapa en enkel meny med hjälp av det nya verktyget. Byt färger och teckensitt via CSS-Panelen Copyright, Mahmud Al Hakim, 2009

44 Ö VNING L ADDA NER OCH INSTALLERA ”C ALENDAR O BJECT ” Copyright, Mahmud Al Hakim, 2009

45 MALLAR - Ö VNING 1. Ladda ner mallen ”one zest” från 2. Packa upp (extrahera) Zip- filen på en lämplig plats. Copyright, Mahmud Al Hakim, 2009

46 S KAPA EN NY D REAMWEAVER P LATS OBS! Lokal rotmappen pekar på den nedladdade mallen Copyright, Mahmud Al Hakim, 2009

47 U NDERSÖK M ALLEN Flyttta alla bilder till images Undersök index.html i Design- och kodläget. Undersök CSS-reglerna. Copyright, Mahmud Al Hakim, 2009

48 S PARA INDEX. HTML SOM MALL Copyright, Mahmud Al Hakim, 2009

49 A NGE EN ÄNDRINGSBAR REGION Markera div.content och ange den som ändringsbar region. Copyright, Mahmud Al Hakim, 2009

50 S KAPA NÅGRA SIDOR FRÅN MALLEN OBS! Skapa en ny index.html från mallen. Det är helt okej att skriva över den gamla! Copyright, Mahmud Al Hakim, 2009

51 R EDIGERA MALLEN OCH UPPDATERA ALLA SIDOR Copyright, Mahmud Al Hakim, 2009

52 L ADDA UPP WEBBPLATSEN TILL WEBBSERVERN VIA FTP. Copyright, Mahmud Al Hakim, 2009

53 S URFA TILL WEBBPLATSEN ”LIVE!” Copyright, Mahmud Al Hakim, 2009

54 T IPS ! G OOGLE M APS Copyright, Mahmud Al Hakim, 2009

55 T IPS ! G OOGLE A NPASSAD SÖKNING Copyright, Mahmud Al Hakim, 2009

56 S KAPA EN ANPASSAD SÖKMOTOR Copyright, Mahmud Al Hakim, 2009

57 T IPS ! B ÄDDA IN V IDEO FRÅN Y OUTUBE Copyright, Mahmud Al Hakim, 2009