Presentation laddar. Vänta.

Presentation laddar. Vänta.

W EBMASTER DAG 9 VT09 Mahmud Al Hakim

Liknande presentationer


En presentation över ämnet: "W EBMASTER DAG 9 VT09 Mahmud Al Hakim"— Presentationens avskrift:

1 W EBMASTER DAG 9 VT09 Mahmud Al Hakim

2 A GENDA – 10.15CSS - Lagerhantering – 10.30Paus 10.30–12.00 Server Side Include (SSI) Flash text och Flash knappar Bibliotek (Library) – 13.00Lunch – Beteenden och Spry Framework Fragment (Snippets) Tillägg (Extensions ) – 14.30Paus – 16.00Vidareutveckling av projektarbete 2 Copyright, Mahmud Al Hakim, 2008

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20 SSI – S ERVER S IDE I NCLUDE SSI är en teknik för att enkelt göra dynamiska sidor genom att kommunicera med webbservern. Informationen som hämtas från webbservern kan t.ex. vara aktuell tid, besöksräknare mm. Det går även att inkludera dokument och bilder som t.ex. en sidfot som ska användas på flera sidor. Filtillägget på sidor som använder SSI måste ändras till.shtml 20 Copyright, Mahmud Al Hakim, 2008

21 SSI - EXEMPEL Visa aktuell datum och tid Infoga ett dokument OBS! om du infogar ett HTML-dokument måste du se till att det inte innehåller element och taggar som bara får förekomma en gång, t.ex. och. 21 Copyright, Mahmud Al Hakim, 2008

22 SSI I D REAMWEAVER 22 Copyright, Mahmud Al Hakim, 2008

23 I NFOGA F LASH TEXT 23 Copyright, Mahmud Al Hakim, 2008

24 I NFOGA F LASH KNAPPAR 24 Copyright, Mahmud Al Hakim, 2008

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

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

27 S KAPA EN NY BIBLIOTEKSPOST 27 Copyright, Mahmud Al Hakim, 2008

28 R EDIGERA EN BIBLIOTEKSPOST 28 Copyright, Mahmud Al Hakim, 2008

29 O BS ! LBI - FILEN SPARAS UNDER L IBRARY 29 Copyright, Mahmud Al Hakim, 2008

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

31 U PPDATERA EN BIBLIOTEKSPOST 31 Copyright, Mahmud Al Hakim, 2008

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

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

34 Övning: Validera ett formulär 34 Copyright, Mahmud Al Hakim, 2008

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

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

37 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”. 37 Copyright, Mahmud Al Hakim, 2008

38 A TT SKAPA KODFRAGMENT 38 Copyright, Mahmud Al Hakim, 2008

39 K ORTKOMMANDON 39 Copyright, Mahmud Al Hakim, 2008

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

41 Ö 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. 41 Copyright, Mahmud Al Hakim, 2008

42 ”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. 42 Copyright, Mahmud Al Hakim, 2008

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

44 E XTENSION M ANAGER (T ILLÄGGSHANTERAREN ) 44 Copyright, Mahmud Al Hakim, 2008

45 L ADDA NER OCH INSTALLERA E XTENSIONS 45 Copyright, Mahmud Al Hakim, 2008

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

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

48 H EMUPPGIFT Utforma en grundmall (template) till en webbplats med hjälp av flera lager (AP-Element). Ange några ändringsbara regioner. Skapa några webbsidor som bygger på mallen. Uppdatera mallen och testa dina sidor i flera webbläsare. 48 Copyright, Mahmud Al Hakim, 2008


Ladda ner ppt "W EBMASTER DAG 9 VT09 Mahmud Al Hakim"

Liknande presentationer


Google-annonser