Ladda ner presentationen
Presentation laddar. Vänta.
1
Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se
Webmaster DAG 9 VT09 Mahmud Al Hakim
2
Agenda 9.00 – 10.15 CSS - Lagerhantering 10.15 – 10.30 Paus
10.30–12.00 Server Side Include (SSI) Flash text och Flash knappar Bibliotek (Library) 12.00 – 13.00 Lunch 13.00 – 14.15 Beteenden och Spry Framework Fragment (Snippets) Tillägg (Extensions ) 14.15 – 14.30 14.30 – 16.00 Vidareutveckling av projektarbete Copyright, Mahmud Al Hakim, 2008 2
3
Lager (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, 2008
4
Infoga Div-taggar Copyright, Mahmud Al Hakim, 2008
5
Formatera Div-taggar med CSS
Copyright, Mahmud Al Hakim, 2008
6
Infoga ett lager (Ap-Div)
Copyright, Mahmud Al Hakim, 2008 Tips: Ctrl-dra (Windows) om du vill rita flera lager i följd.
7
Panelen AP-element och CSS-format
Copyright, Mahmud Al Hakim, 2008
8
Dubbelklicka och skriv ett nytt namn
Byta namn på ett lager Copyright, Mahmud Al Hakim, 2008 Dubbelklicka och skriv ett nytt namn
9
Lagrets egenskaper Copyright, Mahmud Al Hakim, 2008 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.
10
Ändra bakgrundsfärg och bakgrundsbild i ett lager
Copyright, Mahmud Al Hakim, 2008
11
Visa och dölja lager Copyright, Mahmud Al Hakim, 2008
12
Överlappade lager och Z-Index
Copyright, Mahmud Al Hakim, 2008
13
Markera flera lager med
Ordna flera lager Copyright, Mahmud Al Hakim, 2008 Markera flera lager med Skift + Klicka
14
Stödraster (Grid) Copyright, Mahmud Al Hakim, 2008
15
Stödlinjer Copyright, Mahmud Al Hakim, 2008
16
Visa CSS-lagerbakgrunder
Copyright, Mahmud Al Hakim, 2008
17
Övning Skapa följande layout m.h.a. tre lager
Copyright, Mahmud Al Hakim, 2008
18
Centrera AP-Element (Ö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, 2008
19
Centrera AP-Element 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, 2008
20
SSI – Server Side Include
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 Copyright, Mahmud Al Hakim, 2008
21
SSI - exempel Visa aktuell datum och tid <!--#echo var="DATE_LOCAL"--> Infoga ett dokument <!--#include file=”sidfot.html" --> 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. <HTML> och <BODY>. Copyright, Mahmud Al Hakim, 2008
22
SSI i Dreamweaver Copyright, Mahmud Al Hakim, 2008
23
Infoga Flash text Copyright, Mahmud Al Hakim, 2008
24
Infoga Flash knappar Copyright, Mahmud Al Hakim, 2008
25
Bibliotek (Library) 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, 2008
26
Exempel 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, 2008
27
Skapa en ny bibliotekspost
Copyright, Mahmud Al Hakim, 2008
28
Redigera en bibliotekspost
Copyright, Mahmud Al Hakim, 2008
29
Obs! lbi-filen sparas under Library
Copyright, Mahmud Al Hakim, 2008
30
Infoga en bibliotekspost
Copyright, Mahmud Al Hakim, 2008 Drag och släpp eller ”Infoga”
31
Uppdatera en bibliotekspost
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. Copyright, Mahmud Al Hakim, 2008
33
Övning: Öppna webbläsarfönster
Detta är en Null Link Skriv # eller Javascript:; Copyright, Mahmud Al Hakim, 2008
34
Övning: Validera ett formulär
Copyright, Mahmud Al Hakim, 2008
35
Spry 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, 2008
36
Widgeten Textfält för validering
Copyright, Mahmud Al Hakim, 2008 Tips Klicka på frågetecknet för mer info.
37
Fragment (Snippets) 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, 2008
38
Att skapa kodfragment Copyright, Mahmud Al Hakim, 2008
39
Kortkommandon Copyright, Mahmud Al Hakim, 2008
40
Skapa kortkommando till dina Fragment och exportera uppsättning som HTML
Copyright, Mahmud Al Hakim, 2008
41
Övning: Använd DW-Fragment
Skapa en ny JavaScript fil. Spara som print.js Infoga ”Skriv ut sida” som finns under JavaScript – webbläsarfunktioner. Copyright, Mahmud Al Hakim, 2008
42
”Skriv ut sida” fort. Skapa et nytt HTML-dokument.
Copyright, Mahmud Al Hakim, 2008 Skapa et nytt HTML-dokument. Infoga JavaScript filen ”print.js” Infoga en knapp och ändra attributet value till ”Skriv ut”. Lägg till ett beteende: Välj händelsen ”onClick” från listan och skriv funktionens namn och parenteser till höger. Testa knappen i en webbläsare.
43
Tillägg (Extensions) 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, 2008
44
Extension Manager (Tilläggshanteraren)
Copyright, Mahmud Al Hakim, 2008
45
Ladda ner och installera Extensions
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 Copyright, Mahmud Al Hakim, 2008
47
Övning Ladda ner och installera ”Calendar Object”
Copyright, Mahmud Al Hakim, 2008
48
Hemuppgift 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. Copyright, Mahmud Al Hakim, 2008
Liknande presentationer
