Bài giảng Thiết kế Web: Chương 9, 10 - Từ Thị Xuân Hiền

Chương này trang bị cho người học những hiểu biết về định dạng văn bản và cách sử dụng CSS trong Dreamweaver. Các nội dung chính được trình bày trong chương này gồm có: Định dạng văn bản, sử dụng CSS, hình ảnh và liên kết trang trong Dreamweaver, liên kết trang trong Dreamweaver. Mời các bạn cùng tham khảo.

Trang 2

I Đ NH D NG VĂN B N Đ 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 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: EnterNg t đo n: Enterắắ ạạ

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

Enter

1 S d ng thanh công c Properties Inspector đ 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 ả

b n ả  ch n ki u đ nh d ng ch n ki u đ nh d ngọọ ểể ịị ạạ

Trang 3

3 Đ nh d ng font ch :Đ nh d ng font ch :ị ị ạ ạ ữ ữ

Cách 1:T i m c format Ch n các heading, đây là các :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, ị ạ ẫ ồ ữ ể ữ

 Ho c ch n menu Text Ho c ch n menu Text ặặ ọọ  Font. Trong

Dreamweaver, ki u Font ch để ữ ược đ nh ị

thành t ng nhóm, m i nhóm g m nhi u font, ừ ỗ ồ ề

Trang 5

 Font size:

Ch n kh i văn b n:ọ ố ả

– Trong m c Size c a Properties InspectorTrong m c Size c a Properties Inspectorụụ ủủ

– Ho c ch n TextHo c ch n Textặặ ọọ  Size. Size ch trong Size. Size ch trong ữữ

– Ch n kh i văn b n, Click nút Text Color Ch n kh i văn b n, Click nút Text Color ọọ ốố ảả

trong properties inspector ch n màu ch n màu ọọ

– Ho c ch n TextHo c ch n Textặặ ọọ  Color

Trang 6

4 Canh l đo n văn b nCanh l đo n văn b nề ề ạ ạ ả ả

Click ch n màuọ

Trang 7

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

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

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

– Ordered List: Đánh s th t đ u dòngOrdered List: Đánh s th t đ u dòngố ứ ự ầố ứ ự ầ

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

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

– Đ t d u nháy trong danh sách li t kêĐ t d u nháy trong danh sách li t kêặ ấặ ấ ệệ

– Ch n TextCh n Textọọ  List Properties

– Ho c click nút List Item trong thanh Ho c click nút List Item trong thanh ặặ

properties

Trang 8

– List Type: Ch n ki u danh sách (Bullets List Type: Ch n ki u danh sách (Bullets ọọ ểể

Trang 9

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

ứ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…ề

màu n n…ề– CSS có th đính kèm trong trang ho c l u riêng 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ề

Trang 10

2 T o CSS c c b : T o CSS c c b : ạ ạ ụ ụ ộ ộ Style đStyle đượ ạượ ạc t o trong trang hi n c t o trong trang hi n ệệ

m CSS Panel, ở

Click nút New CSS rule

Cilck nút New CSS rule

Trang 11

 Selector type: ch n lo i CSS: ch n lo i CSSọọ ạạ

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

(d ng internal style), s d ng trong trang hi n ạ ử ụ ệ

hành

Trang 12

 Có 3 lo i style:Có 3 lo i style:ạạ

– Class: Style d ng l p Style d ng l pạạ ớớ

• Name : Nh p tên l p, b t đ u b ng d u ( : Nh p tên l p, b t đ u b ng d u (ậậ ớớ ắ ầắ ầ ằằ ấấ .)

– Tag: Đ nh nghĩa tag Đ nh nghĩa tagịị

• Tag: Ch n tên tag: Ch n tên tagọọ

– Advanced: Đ nh d ng các tag riêng bi t : Đ nh d ng các tag riêng bi t ịị ạạ ệệ

• Selector: Nh p #IDName (b t đ u b ng d u #): Nh p #IDName (b t đ u b ng d u #)ậậ ắ ầắ ầ ằằ ấấ

– Ch n xong,Click OK Ch n xong,Click OK ọọ  C a s CSS Style C a s CSS Style ử ổử ổ

definition :

• Khung category: Ch n nhóm đ nh d ng Khung category: Ch n nhóm đ nh d ng ọọ ịị ạạ

• Khung style: ch n các đ nh d ngKhung style: ch n các đ nh d ngọọ ịị ạạ

Trang 13

Ch n xong,Click Apply ọ  OK

Trong CSS Panel xu t hi n Style v a t oấ ệ ừ ạ

Trang 14

b) Cách s d ng Style c c bCách s d ng Style c c bử ụ ử ụ ụ ụ ộ ộ:

– Ch n n i dung văn b n c n đ nh d ngCh n n i dung văn b n c n đ nh d ngọọ ộộ ảả ầầ ịị ạạ

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

– Ho c ch n tên style trong Properties inspectorHo c ch n tên style trong Properties inspectorặặ ọọ

– N u lo i tag đ nh d ng riêng bi t thì đ i tN u lo i tag đ nh d ng riêng bi t thì đ i tếế ạạ ịị ạạ ệệ ố ượố ượng ng

s d ng style ph i có tên đ nh danh IDử ụ ả ị

Trang 15

3 T o m t t p tin CSS: T o m t t p tin CSS: ạ ạ ộ ậ ộ ậ T p tin ki u .CSS là m t t p 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 ot oạ ạ :

– Text CSS Styles New

– Trong h p tho i New CSS StyleTrong h p tho i New CSS Styleộộ ạạ

– Selector Type: Ch n lo i styleSelector Type: Ch n lo i styleọọ ạạ

– Define in: Ch n New Style Sheet fileDefine 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 H p tho i yêu c u l u t p tin CSS, có ph n m ộộ ạạ ầ ư ậầ ư ậ ầầ ởở

r ng .CSSộ

r ng .CSSộ– C a s CSS Style definition : C a s CSS Style definition : ử ổử ổ

• Khung category: Ch n nhóm đ nh d ng Khung category: Ch n nhóm đ nh d ng ọọ ịị ạạ

• Khung style: ch n các đ nh d ng gi ng style Khung style: ch n các đ nh d ng gi ng style ọọ ịị ạạ ốố

c c bụ ộ

Trang 16

Ch n xong,Click Apply ọ  OK

Trong CSS Panel xu t hi n t p tin Style v a t oấ ệ ậ ừ ạ

Trang 17

b) Áp d ng CSS t t p tin CSSÁp d ng CSS t t p tin CSSụ ụ ừ ậ ừ ậ :

– M trang HTML c n s d ng t p tin CSSM trang HTML c n s d ng t p tin CSSởở ầ ử ụầ ử ụ ậậ

– Ch n TextCh n Textọọ  CSS Style Attach Style Sheet

Trang 18

4 Hi u ch nh m t CSS:Hi u ch nh m t CSS:ệ ệ ỉ ỉ ộ ộ

– Click ph i tr n tên CSS trong CSS Style PanelClick ph i tr n tên CSS trong CSS Style Panelả ệả ệ– Ch n Edit, th c hi n hi u ch nhCh n Edit, th c hi n hi u ch nhọọ ựự ệệ ệệ ỉỉ

4 Xoá m t CSS Styles:Xoá m t CSS Styles:ộ ộ

Khi xoá m t CSS Style thì nh ng n i dung áp d ng ộ ữ ộ ụ

CSS Style b xoá s tr v tr ng thái ban đ uị ẽ ở ề ạ ầ

– Ch n CSS Style c n xoáCh n CSS Style c n xoáọọ ầầ

– Click nút Delete CSS Style trong CSS Style Panel– Ho c Click chu t ph i, ch n DeleteHo c Click chu t ph i, ch n Deleteặặ ộộ ảả ọọ

Trang 19

New Style Sheet

Delete Style

Trang 20

III HÌNH NH VÀ LIÊN K T TRANG HÌNH NH VÀ LIÊN K T TRANG Ả Ả Ế Ế

TRONG DREAMWEAVER

1 Chèn nh vào trang:Chèn nh vào trang:ả ả

a) ẢẢnh trong th m c Images c a Site:nh trong th m c Images c a Site:ư ụư ụ ủủ

– Đ t d u nháy t i v trí c n chèn nhĐ t d u nháy t i v trí c n chèn nhặ ấặ ấ ạ ịạ ị ầầ ảả

– Drag chu t kéo t p tin nh trong Site Panel th Drag chu t kéo t p tin nh trong Site Panel th ộộ ậậ ảả ảả

vào tranga) ẢẢnh ngoài Site:nh ngoài Site:

– Ch n Insert Ch n Insert ọọ  Image

– Xu t hi n h p tho i Select Image SourceXu t hi n h p tho i Select Image Sourceấấ ệệ ộộ ạạ

– Ch n t p tin nh c n chènCh n t p tin nh c n chènọ ậọ ậ ảả ầầ OK

Trang 21

2 Hi u ch nh thu c tính c a nh:Hi u ch nh thu c tính c a nh:ệ ệ ỉ ỉ ộ ộ ủ ả ủ ả

– Src: đSrc: đườường d n tng d n tẫ ươẫ ương đ i đ n t p tin nhng đ i đ n t p tin nhố ế ậố ế ậ ảả

– Alt: câu thông báo xu t hi n trên trình duy t khi rê Alt: câu thông báo xu t hi n trên trình duy t khi rê ấấ ệệ ệệ

chu t vào nhộ ả

Trang 22

– Link: Đ a ch URL n i c n liên k t đ nLink: Đ a ch URL n i c n liên k t đ nịị ỉỉ ơ ầơ ầ ế ếế ế

– Edit: Chuy n qua Macromedia Fire Works hi u Edit: Chuy n qua Macromedia Fire Works hi u ểể ệệ

ch nh nhỉ ả

– Crop: C t xén nhCrop: C t xén nhắắ ảả

– Brightness/Contrast: Ch nh đ sáng t i c a nhBrightness/Contrast: Ch nh đ sáng t i c a nhỉỉ ộộ ố ủ ảố ủ ả

– Sharpen: Ch nh đ s c nét cho nhSharpen: Ch nh đ s c nét cho nhỉỉ ộ ắộ ắ ảả

– Resample:L u l i kích thResample:L u l i kích thư ạư ạ ướước đã đi u ch nh c đã đi u ch nh ềề ỉỉ

– Optimize in Fireworks: chuy n qua Macromedia Optimize in Fireworks: chuy n qua Macromedia ểể

FireWoks đ hi u ch nh ể ệ ỉ

Trang 23

– Map : b ng đ liên k t nhMap : b ng đ liên k t nhảả ồồ ế ảế ả– VSpace, Hspace: Kho ng cách trên, dVSpace, Hspace: Kho ng cách trên, dảả ướưới, i,

trái, ph i gi a ph n n i dung văn b n đ n ả ữ ầ ộ ả ế

nh

ảnh

ả

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

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

th p, làm nh thay th khi ch hi n th nh ấ ả ế ờ ể ị ả

chính trên trình duy tệ

– Border: đBorder: đườường vi n nhng vi n nhề ảề ả

– Align: canh l trái, ph i, gi a…Align: canh l trái, ph i, gi a…ềề ảả ữữ

Trang 24

3 Chèn khung nh:Chèn khung nh:ả ả

– Trong thi t k , nhi u lúc c n d phòng trTrong thi t k , nhi u lúc c n d phòng trế ếế ế ềề ầầ ựự ướước cho c cho

nh trang trí, nh ng ch a có nh thích h p, ta có

ả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ị ể ữ ổ

đ nh đ gi chị ể ữ ổ– Ch n InsertCh n Insertọọ Image Objects Image Placeholder

– Xu t hi n h p tho i Image PlaceholderXu t hi n h p tho i Image Placeholderấấ ệệ ộộ ạạ

– Nh p tên, kích thNh p tên, kích thậậ ướước, màu cho khung nhc, màu cho khung nhảả

Trang 26

– Original Image: nh g cOriginal Image: nh g cảả ốố– Rollover Image: nh khi rê chu t vàoRollover Image: nh khi rê chu t vàoảả ộộ

5 Chèn Flash:

– Insert  Media  Flash

– Ch n t p tin ki u .swfCh n t p tin ki u .swfọ ậọ ậ ểể

– T i v trí chèn xu t hi n bi u tT i v trí chèn xu t hi n bi u tạ ịạ ị ấấ ệệ ể ượể ượng Flahs ng Flahs

 Hi u ch nh thu c tính c a Flash: ch n hình 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 hi u ch nh thu c tính trong thanh ệệ ỉỉ ộộproperties inspector

Trang 27

6 Ả Ảnh n n trangnh n n trangề ề

– ẢẢnh n n là nhh t đ ng l p đ y trang Web. Khi nh n n là nhh t đ ng l p đ y trang Web. Khi ềề ảả ự ộự ộ ợợ ầầ

thi t k , b n nên ch n nh ng m u n n th t nh t, ế ế ạ ọ ữ ẫ ề ậ ạ

ch s m ho c n n th t s m, ch màu sáng ữ ậ ặ ề ậ ậ ữ

ch s m ho c n n th t s m, ch màu sáng ữ ậ ặ ề ậ ậ ữ– ẢẢnh n n v i s Kb càng nh thì trang hi n th càng nh n n v i s Kb càng nh thì trang hi n th càng ềề ớ ốớ ố ỏỏ ểể ịị

nhanh

6 Cách t o nh n n:Cách t o nh n n:ạ ả ạ ả ề ề

– Đ t tr trong trangĐ t tr trong trangặ ỏặ ỏ

– ch n Modifych n Modifyọọ Page Properties

– Bacground Images : nh p đBacground Images : nh p đậậ ườường d n đ n t p ng d n đ n t p ẫẫ ế ậế ậ

tin nh làm n nả ề

– Repeat: Ch n ki u l pRepeat: Ch n ki u l pọọ ể ặể ặ

Trang 28

8 T o Web Photo album:T o Web Photo album:ạ ạ

– Ch c năngCh c năngứ ứ : T o b s u t p các hình nh hay : T o b s u t p các hình nh hay ạạ ộ ư ậộ ư ậ ảả

cu n Album giúp ngố ườ ử ụi s d ng qu n lý và ch n ả ọ

xem t ng hình m t cách nhanh nh từ ộ ấ

xem t ng hình m t cách nhanh nh từ ộ ấ– Cách t oCách t oạ ạ : Đ th c hi n ch c năng này c n ph i : Đ th c hi n ch c năng này c n ph i ể ựể ự ệệ ứứ ầầ ảả

cài đ t Macromedia Fireworks và m t th m c ặ ộ ư ụ

ch a các hình photoứ

• Ch n Commands Ch n Commands ọọ  Create Web Photo album

• Xu t hi n h p tho i Create Web Photo AlbumXu t hi n h p tho i Create Web Photo Albumấấ ệệ ộộ ạạ

• Nh p các thông sNh p các thông sậậ ốố click OK, ch k t qu , 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:Trong Site Panel xu t hi n thêm các folder:ấấ ệệ

Trang 29

– Folder Thumbnail: ch a các file JPGFolder Thumbnail: ch a các file JPGứứ

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

tương ng (trang con)ứ

tương ng (trang con)ứ– T p tin Index.htm trong Folder ch a Website, đây T p tin Index.htm trong Folder ch a Website, đây ậậ ứứ

là t p tin Album chínhậ

là t p tin Album chínhậ– M t p tin Index.htm và di chuy n gi a các trang M t p tin Index.htm và di chuy n gi a các trang ở ậở ậ ểể ữữ

b ng các Hyperlink: Next Previous, Homeằ

Trang 30

9 T o Library Item:T o Library Item:ạ ạ

a) Khái ni mKhái ni mệ ệ : Library ch a các thành ph n c a : 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

– Drag chu t kéo thành ph n đDrag chu t kéo thành ph n độộ ầầ ượược ch n th vào c ch n th vào ọọ ảả

khung Library Đ t tên Đ t tênặặ

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

– Ch n Modify Ch n Modify ọọ  Library Add Object to

Trang 31

c) Nh p Library Item vào trang m iNh p Library Item vào trang m iậ ậ ớ ớ :

– Đ t d u nháy vào n i mu n nh p Library ItemĐ 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 Kéo Library Item t Assets Panel th vào document ừừ ảả

Window

d) Hi u ch nh Library ItemHi u ch nh Library Itemệ ệ ỉ ỉ :

– Ch n Library Item trong khung LibraryCh n Library Item trong khung Libraryọọ Edit

– Xu t hi n h p tho i cho phép hi u ch nh library Xu t hi n h p tho i cho phép hi u ch nh library ấấ ệệ ộộ ạạ ệệ ỉỉ

Trang 32

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

Library:

– Ch n Library Item trong trang Web hi n hànhCh n Library Item trong trang Web hi n hànhọọ ệệ– Click nút Detach from Original trên Properties

Inspectorf) T o l i Library Item b ng m t library đang T o l i Library Item b ng m t library đang ạ ạ ạ ạ ằ ằ ộ ộ

– Click nút Recreate trên Properties Inspector

Trang 33

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

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Đ a ch URL c a trang c n liên k t đ n3 lo i liên k tịị ỉỉ ủủ ầầ ế ếế ế ạạ ếế

• Liên k t n iLiên k t n iế ộế ộ

• Liên k t ngo iLiên k t ngo iếế ạạ

• Liên k t EmailLiên k t Emailếế

Trang 34

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

a) D ng liên k t vòng D ng liên k t vòng ạ ạ ế ế :Là d ng liên k t n i đuôi nhau, :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 đ D ng liên k t đ y đ ạ ạ ế ầ ế ầ ủ ủ: T i m i trang đ u t o liên : 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à ế ầ ủ ế ấ ả ạ

Định dạng
Số trang	47
Dung lượng	0,91 MB