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

CHNGăIX:
SăDNGăCSSăTRONGăDREAMWEAVER
CHNGăIX:
NHăDNGăVNăBN
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:
– Chn vn bn:
 Chn nhóm Font trên Font menu ca
Properties Inspector
 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, mt
Font chính và các Font d phòng. Có th to
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
• Selector: Nhp #IDName (bt đu bng du #)
– Chn xong,Click OK  Ca s CSS Style
definition :
• Khung category: Chn nhóm đnh dng
• Khung style: chn các đnh dng
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
.CSS
– Ca s CSS Style definition :
• Khung category: Chn nhóm đnh dng
• Khung style: chn các đnh dng ging style cc
b
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
– Chn Edit, thc hin hiu chnh
5. 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á
– 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ă
TRONG DREAMWEAVER
1. Chènănhăvàoătrang:
a) nh trong th mc Images ca Site:
– 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
vào trang
b) nh ngoài Site:
– Chn Insert  Image
– Xut hin hp thoi Select Image Source
– Chn tp tin nh cn chènOK
2. Hiuăchnhăthucătínhăcaănh:
– Chn nh đã chèn
– Window Properties
– Image: tên nh
– W (Width), H (Height):  rng và chiu cao ca
nh, tính bng Pixel
– Src: đng dn tng đ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ê
chut vào nh
– Link: a ch URL ni cn liên kt đn
– Edit: Chuyn qua Macromedia Fire Works hiu
chnh nh
– Crop: Ct xén nh
– Brightness/Contrast: Chnh đ sáng ti ca nh
– Sharpen: Chnh đ sc nét cho nh

– Resample:Lu li kích thc đã điu chnh
– Optimize in Fireworks: chuyn qua Macromedia
FireWoks đ hiu chnh

– 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
thp, làm nh thay th khi ch hin th nh
chính trên trình duyt
– Border: đng vin nh
– Align: canh l trái, phi, gia…
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