bài giảng thiết kế web - chương9 & 10 - css trong dreamweaver

– Ho c Click nút Attach Style Sheet trong Style Panel... Attach Style Sheet New Style Sheet Delete Style... HỊNHă NHăVÀăLIÊNăK TăTRANGă... Hi uăch nhăthu cătínhăc aă nh:.

I NHăD NGăV NăB N

1 Cách nh p gi ng nh các trình so n th o v n b n

khác:

– Ng t đo n: Enter

– Xu ng dòng trong cùng m t đo n: Shift + Enter

2 S d ng thanh công c Properties Inspector đ hi u

ch nh v n b n, b ng cách đánh d u kh i v n b n 

ch n ki u đ nh d ng

3 nhăd ngăfontăch :

Cách 1:T i m c format Ch n các heading, đây là các

đ nh d ng m u, bao g m Font ch , ki u ch , size,

…th ng dùng làm tiêu đ Cách 2: ch n nhóm Font ch :

ra các nhóm Font tu ý b ng cách t i muc Font Ch n Edit Font List

 Font size:

Ch n kh i v n b n:

– Trong m c Size c a Properties Inspector

– Ho c ch n Text Size Size ch trong

Dreamweaver g m 17 Size, trong đó có 8 m c

th hi n b ng s , t 9 đ n 36 và 9 m c th hi n

b ng ch

1 Font Color:

– Ch n kh i v n b n, Click nút Text Color trong

properties inspector ch n màu

– Ho c ch n Text Color

4 Canhăl ăđo năv năb n

– Ch n Text  Align ho c Click công c

Click ch n màu

5 Danhăsáchăd ngăli tăkê:

 T o danh sách d ng li t kê:Ch n Text List

– Unordered List: Chèn Bulletted đ u dòng

– Ordered List: ánh s th t đ u dòng

– Definition list: Danh sách đ nh ngh a

 Thay đ i thu c tính li t kê:

– t d u nháy trong danh sách li t kê

– Ch n Text List Properties

– Ho c click nút List Item trong thanh

properties

– List Type: Ch n ki u danh sách (Bullets ho c

Numbered)

– Start count: S b t d u cho danh sách li t kê

 List item:

– New Style: li t kê nhi u c p

– Reset count to: s b t đ u cho danh sách con

II S ăD NGăCSSă

1 GI IăTHI U:

– Dreamweaver cung c p công c đ t o style m t cách

đ n gi n và nhanh chóng

– CSS (Cascading Style Sheets) c ng là m t d ng

HTML Style Nh ng phong phú h n v thu c tính và

ng d ng M t CSS không nh ng t p h p các đ nh

d ng, mà còn có th giúp đ nh v , vi n khung, đ t màu

n n…

– CSS có th đính kèm trong trang ho c l u riêng thành

m t t p tin ki u CSS ph c v cùng lúc cho nhi u trang

2 T oăCSSăc căb :ăStyle đ c t o trong trang hi n

hành

a) Cáchăt o:

– Ch n Text CSS Styles New…Xu t hi n

h p tho i New CSS Style:

– Ho c Window CSS Style,

m CSS Panel, Click nút New CSS rule

Cilck nút New CSS rule

 Selector type: ch n lo i CSS

 Define in: Ch n This document only: T o style

(d ng internal style), s d ng trong trang hi n hành

 Có 3 lo i style:

– Class: Style d ng l p

• Name : Nh p tên l p, b t đ u b ng d u (.)

– Tag: nh ngh a tag

• Tag: Ch n tên tag

– Advanced: nh d ng các tag riêng bi t

Ch n xong,Click Apply  OK

Trong CSS Panel xu t hi n Style v a t o

b) Cáchăs ăd ngăStyleăc căb :

– Ch n n i dung v n b n c n đ nh d ng

– Trong CSS Style Panel, ch n tên CSS

– Ho c ch n tên style trong Properties inspector

– N u lo i tag đ nh d ng riêng bi t thì đ i t ng s

d ng style ph i có tên đ nh danh ID

3 T oăm tăt pătinăCSS:ăT p tin ki u CSS là m t t p tin

ph tr cho webSite, n m trong th m c root c a Site a) Cách t o:

– Text CSS Styles New

– Trong h p tho i New CSS Style

– Selector Type: Ch n lo i style

– Define in: Ch n New Style Sheet file OK

– H p tho i yêu c u l u t p tin CSS, có ph n m r ng

Ch n xong,Click Apply  OK

Trong CSS Panel xu t hi n t p tin Style v a t o

b) Ápăd ngăCSSăt ăt pătinăCSS:

– M trang HTML c n s d ng t p tin CSS

– Ch n Text CSS Style Attach Style Sheet

– Ho c Click nút Attach Style Sheet trong Style

Panel

– Ch n t p tin CSS c n k t n i, Click nút

Browse…

– Link: Ch liên k t v i t p tin CSS đ s d ng

– Import : Chép t p tin CSS vào trang

4 Hi uăch nhăm tăCSS:

– Click ph i tr n tên CSS trong CSS Style Panel

– Click nút Delete CSS Style trong CSS Style Panel

– Ho c Click chu t ph i, ch n Delete

Attach Style Sheet

New Style Sheet

Delete Style

III HỊNHă NHăVÀăLIÊNăK TăTRANGă

2 Hi uăch nhăthu cătínhăc aă nh:

– Link: a ch URL n i c n liên k t đ n

– Edit: Chuy n qua Macromedia Fire Works hi u

– Map : b ng đ liên k t nh

– VSpace, Hspace: Kho ng cách trên, d i, trái,

ph i gi a ph n n i dung v n b n đ n nh

– Target: Khung ch a trang liên k t đ n

– Low Src: tên t p tin nh ph có đ phân gi i

3 Chènăkhungă nh:

– Trong thi t k , nhi u lúc c n d phòng tr c cho

nh trang trí, nh ng ch a có nh thích h p, ta có th chèn tr c m t khung nh v i kích th c xác đ nh

đ gi ch

– Ch n InsertImage Objects Image Placeholder

– Xu t hi n h p tho i Image Placeholder

– Nh p tên, kích th c, màu cho khung nh

3 Chènă nhăvàoăkhungă nh:

– Double click vào khung c n chèn nh

– Xu t hi n h p tho i Select Image Source, ch n t p

tin nh c n chèn vào khung

4 Insert Rollover Image: Khi đ a chu t vào hình s đ i

sang hình khác

a) Insert  Image ObjectsRollover Image, Xu t hi n

h p tho i Rolloveer Image

 Hi u ch nh thu c tính c a Flash: ch n hình flash

hi u ch nh thu c tính trong thanh properties inspector

• Ch n Commands  Create Web Photo album

• Xu t hi n h p tho i Create Web Photo Album

• Nh p các thông s  click OK, ch k t qu , xu t

hi n thông báo Album đã đ c t o

• Trong Site Panel xu t hi n thêm các folder:

– Folder Thumbnail: ch a các file JPG

– Folder Page ch a các file HTM cho m i Image

t ng ng (trang con)

– T p tin Index.htm trong Folder ch a Website, đây

là t p tin Album chính

– M t p tin Index.htm và di chuy n gi a các trang

b ng các Hyperlink: Next Previous, Home

9 T oăLibraryăItem:

a) Kháiăni m: Library ch a các thành ph n c a trang

nh hình nh, v n b n … có nhu c u s d ng l i

ho c c n c p nh t th ng xuyên Các thành ph n

này g i là Library Items

b) Cáchăt o: Trong Assets Panel, Click nút Library,

Ch n thành ph n mu n t o Library Item và th c

hi n m t trong các cách sau

– Drag chu t kéo thành ph n đ c ch n th vào

khung Library t tên

– Click nút New Library Item và đ t tên

– Ch n Modify  Library Add Object to

Library và đ t tên

c) Nh păLibraryăItemăvàoătrangăm i:

– t d u nháy vào n i mu n nh p Library Item

– Kéo Library Item t Assets Panel th vào document

Window

d) Hi uăch nhăLibraryăItem:

– Ch n Library Item trong khung LibraryEdit

– Xu t hi n h p tho i cho phép hi u ch nh library Item

– Click Save c p nh t t t c trang Web có s d ng

Library trong site

– Có th c p nh t b ng cách ch n Modify Library

Update pages: c p nh t t t c nh ng trang có s d ng Library Item

a) TáchăLibraryăItemătrongăDocumentăkh iă

Library:

– Ch n Library Item trong trang Web hi n hành

– Click nút Detach from Original trên Properties

Inspector

f) T oăl iăLibraryăItemăb ngăm tălibraryăđangă

s ăd ngătrongătrang

– Có th dùng m t Library trong trang đ t o l i

m t Library Item, n u Library Item b m t

– Ch n Library trên trang Web hi n hành

– Click nút Recreate trên Properties Inspector

IV LIÊNăK TăTRANGăTRONGă

DREAMWEAVER

1 Gi iăthi u: M t liên k t n i t trang ngu n đ n trang đích

g m 2 thành ph n:

– i t ng đ c ch n làm nút liên k t:Text,

Image,Button Trong Dreamweaver cung c p thêm m t

s đ i t ng đ c bi t làm nút liên k t nh Flash Text, Flash Button, Navigation bar, Rollover Images…

– a ch URL c a trang c n liên k t đ n3 lo i liên k t

• Liên k t n i

• Liên k t ngo i

• Liên k t Email

2 Cácăd ngăliênăk t:

a) D ng liên k t vòng:Là d ng liên k t n i đuôi nhau,

trang1 liên k t đ n trang 2,…trang n liên k t đ n trang 1, đ m b o ng i xem có th xem t t c các trang, nh ng b t l i là ph i duy t h t m t vòng

a) D ng liên k t đ y đ : T i m i trang đ u t o liên k t

đ y đ đ n t t c các trang còn l i, đây là d ng liên

k t trong site có đ phân c p th p

a) D ng liên k t cây phân c p:Trong các Site l n, m c

đ quan trong c a t ng trang đ c phân c p theo t ng

m c, v i trang g c là trang ch , m c 1 là nhóm ch

đ chính, m c 2 là nhóm ch đ con, m c 3 là trang

ch a các thông tin chi ti t,… d ng này t n t i liên

k t gi a các trang cùng m c (Same Level), liên k t v

m c trên (Parent Level), liên k t v m c d i (Child level)

d) Liên k t ti n nghi: Ngoài các d ng liên k t trên,

đ thu n ti n cho ng i xem khi l t trang, có th

t o thêm m t s liên k t ph , nh liên k t đ n

đi m d ng (Bookmark)

e) Liên k t trang ch : Trang ch th ng ch a các

nút liên k t đ n các trang con, do đó c n ph i t o

li k t t trang con tr v trang ch

3 Cáchăt o:

– M trang ngu n

– Ch n Insert  Hyperlink

• Text: n i dung v n b n làm nút liên k t

• Link: a ch URL c a trang c n liên k t đ n

• Target: Khung ch a trang đích

• Title: Câu ghi chú khi chu t ch m vào nút

• Access Key: Khi xem trang, nh n t h p phím

Alt + Ký t nh p đ ch n nút và nh n Enter đ liên k t

• Tab Index: trình t ch n nút khi nh n phím Tab

4 Liênăk tăđi măd ngă(NamedăAnchor)

a) T oăliênăk tăđi măd ngăcùngătrang:

i v i các trang Web dài, ho c trang có nhi u m c, thì nên t o các đi m d ng Cách t o g m 2 b c:

 tătênăchoăđi măd ng: Trong Document window,

đ t d u nháy t i v trí s làm đi m d ng

 Ch n Insert  Named Anchor (Ctrl+Alt+A)

ho c Click nút Insert Named Anchor trong b ng Common c a thanh Insert

 Trong h p tho i Insert Anchor: Nh p tên cho

Anchor (không th a kho ng tr ng, không có ký

t l )

 T oăliênăk tăđi măd ng:

 Trong Document Windows, ch n m t đo n v n b n

ho c m t hình đ t o link đ n đi m d ng

 N u đi m d ng n m cùng trang thì t i ô link nh p

#tên Anchor

b) T oăliênăk tăđi măd ngăc aătrangăkhác:

Thao tác t o liên k t đ n đi m d ng trang khác gi ng

nh liên k t đ n trang khác, nh ng t i m c link ph i ch

ra đi m d ng nào Theo c u trúc:<Tênăt pătin>#<Tênă

đi măd ng>

5 Hi uăch nhăliênăk t:

– Ch n nút liên k t c n thay đ i

– Ch n menu Modify Change Link…

– H p tho i Select file cho phép ch n t p tin trang c n

– Ch n Modify Remove Link Ho c xoá tên trang

liên k t trong ô link c a Properties Inspector

7 B năđ ă nhăliênăk tă:

– Khi ch n nh làm liên k t, thì có m t s nh kích th c

l n, th ng chia nh nh đó ra thành nhi u vùng m i vùng liên k t đ n m t trang Web khác, d ng này g i là

b n đ nh liên k t

 Nh ngăthu năti năkhiăs ăd ngăb năđ ă nhăliênăk t:

– Giúp t o nhanh các liên k t

– Hình nh tr c quan, d liên t ng đ n trang t ng ng

– Giúp b c c các liên k t nhanh, không chi m nhi u khu

v c nút trên trang Web

a) Cáchăt o:

– Chèn nh vào trang, click ch n nh

– Trong Properties inspector, hi n th công c Map

b) Hi uăch nhăb năđ ăliênăk t:

– Di chuy n vùng liên k t

– Click ch n công c đ ch n vùng c n di chuy n

– Drag chu t kéo đ n v trí m i

c) Thayăđ iăkíchăth căvùngăliênăk t

– Ch n vùng liên k t

– Click vào m t trong các nút ch n c a vùng liên k t

– Drag chu t đ thay đ i kích th c

d) Xoáăvùngăliênăk t

– Ch n vùng liên k t

– Nh n Delete

8 Chènănútăbi năđ iăhình:

Tr c h t ph i có 2 t p tin nh, n1.gif màu cam, n2.gif màu xanh trong folder Images c a Site

– t d u nháy t i v trí c n chèn nút đ ng

– Ch n Insert  Image Objects Rollover Image

H p tho i Insert Rollover Image:

• Image Name: Nh p tên nh

• Original Image: tên t p tin nh g c đ i di n khi

hi n th (ví d n1.gif)

• Rollover Image : tên t p tin nh hi n th khi rê

chu t vào (ví d n2.gif )

• Alternate Text: câu ghi chú kèm theo

• When Click, go to URL: a ch c a trang liên

k t đ n

9 Chènăh ăth ngănútăbi năđ iăhình:

– Dreamweaver có th giúp b n cùng m t lúc chèn

vào c m t h th ng nút bi n hình

– Ch n Insert Image Objects Navigation bar

10 Chèn nút Flash:

ch ng trình có th s d ng d li u qua l i v i nhau r t thu n ti n, do đó có th dùng các nút Flash đ c thi t k

s n đ làm nút liên k t trong Dreamweaver

Ch n InsertMedia Flash Button

11 Chèn nút Flash Text:

– Insert  Media  Flash Text

– H p tho i Insert Flash Text, nh p vào các thông

• Link: a ch trang Web liên k t đ n

• Target: Tên khung trang

• Bg Color: màu n n c a v n b n nút