Dreamweaver 8
fortsättningskurs
Lektion 3
Ramar, Navigeringsfält, Lager
Mahmud Al Hakim
[email protected]
www.hakimdata.se
1
Copyright, www.hakimdata.se, Mahmud Al
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Hakim, [email protected], 2008
Agenda
12.30 – 13.30
Ramar
Navigeringsfält
13.30 – 13.45
Rast
13.45 – 14.45
Lager (AP-element)
2
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
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?!
3
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Ramar
4
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Skapa ramuppsättning
Metod 1: via ”New Document”
5
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Skapa ramuppsättning
Metod 2: via verktygsfältet Insert
6
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Skapa ramuppsättning
Metod 3: via Modify - Frameset
7
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Panelen Frames
8
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Spara ramuppsättning och ramar
Markera
ramuppsättningen för
att få detta
alternativ
9
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Egenskapskontrollen
10
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Övning: Skapa en webbplats enligt följande ramuppsättning
11
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Infoga Navigeringsfält
12
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Modifiera Navigeringsfält
13
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
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, [email protected], 2008
Övning: DIV och SPAN
<style>
.border { border: medium double rgb(255,0,0)}
</style>
<body>
<div class="border" >en div container</div>
<span class="border" >en span container</span>
</body>
15
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Infoga Div-taggar
16
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Formatera Div-taggar med CSS
17
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
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, [email protected], 2008
Infoga ett lager
Tips: Ctrl-dra (Windows) om du vill rita flera lager i följd.
19
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Lagrets egenskaper
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.
20
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Panelen Layers och CSS Styles
21
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Ordna flera lager
Markera flera
lager med
Skift+Klick
22
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Grid (rutnätet)
23
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Överlappade lager och Z-Index
24
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
Övning: Skapa följande layout m.h.a. tre lager
25
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
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.
26
Copyright, www.hakimdata.se, Mahmud Al Hakim, [email protected], 2008
