Copyright, Mahmud Al Hakim, 2008 1 Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim

En presentation över ämnet: "Copyright, Mahmud Al Hakim, 2008 1 Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim"— Presentationens avskrift:

1 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 1 Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se Dreamweaver 8 fortsättningskurs 1 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

2 2 Agenda 12.30 – 13.30 Ramar Navigeringsfält 13.30 – 13.45Rast 13.45 – 14.45Lager (AP-element) 2 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

3 3 Repetition Skapa en ny Site Skapa en sidfot med hjälp av en bibliotekspost och formatera den med CSS. Skapa en mall och infoga biblioteksposten i mallen. Skapa en webbsida som bygger på mallen. Uppdatera sidfoten och spara. Vad händer?!

4 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 4 Ramar 4 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

5 5 Skapa ramuppsättning Metod 1: via ”New Document” 5 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

6 6 Skapa ramuppsättning Metod 2: via verktygsfältet Insert 6 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

7 7 Skapa ramuppsättning Metod 3: via Modify - Frameset 7 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

8 8 Panelen Frames 8 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

9 9 Spara ramuppsättning och ramar Markera ramupp- sättningen för att få detta alternativ 9 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

10 10 Egenskapskontrollen 10 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

11 11 Övning: Skapa en webbplats enligt följande ramuppsättning

12 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 12 Infoga Navigeringsfält 12 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

13 13 Modifiera Navigeringsfält Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 13

14 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 14 DIV och SPAN DIV och SPAN är "containerelement”. DIV och SPAN används till att omsluta ett område som ska formateras. DIV upptar hela området som ska formateras. SPAN formaterar ett område lika stort som innehållet. 14 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

15 15 Övning: DIV och SPAN.border { border: medium double rgb(255,0,0)} en div container en span container 15 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

16 16 Infoga Div-taggar

17 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 17 Formatera Div-taggar med CSS

18 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 18 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. 18 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

19 19 Infoga ett lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 19 Tips: Ctrl-dra (Windows) om du vill rita flera lager i följd.

20 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 20 Lagrets egenskaper Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 20 Layer ID: En identifierare för Lagret som används t.ex. av CSS och JavaScript. L: Left, T: Top, W: Width, H: Height 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.

21 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 21 Panelen Layers och CSS Styles Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 21

22 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 22 Ordna flera lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 22 Markera flera lager med Skift+Klick

23 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 23 Grid (rutnätet) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 23

24 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 24 Överlappade lager och Z-Index Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 24

25 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 25 Övning: Skapa följande layout m.h.a. tre lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 25

26 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 26 Hemuppgifter Utforma en grundmall (template) till din webbplats med hjälp av flera lager. Formatera med CSS. Ange några ändringsbara regioner. Skapa några webbsidor som bygger på mallen. Uppdatera mallen och testa dina sidor i flera webbläsare.