Bi 3 : S dng CSS + JavascriptMn : Lp trnh v Thit k Web 1
KHOA CNG NGH THNG TIN I HC KHOA HC T NHIN 2007 Authored by: Trn
Duy Hong - Tran Duy Hoang
Bi 3 : S dng CSS + JavascriptMn : Lp trnh v Thit k Web 1 1. Li
ch khi s dng CSS trong thit k web:Hy thit k trang web v cc bng Thi
kha biu ca 1 trng i hc: TKB ca Khoa CNTT:Tit 1 Tit 2 Tit 3 Tit 4 Th
2 TKWeb 1 HH CSDL Th 3 TK CSDL LTT Th 4 TKWeb 1 HH CSDL Th 5 LTT TK
CSDL HH Th 6 TKWeb 1 Th 7 CSDL LTT CN TK CSDL TKWeb 1
TKB ca khoa Ha, khoa L, khoa Ton, khoa Sinh, Vi v d trn, ta cn
nh dng vn bn nhiu ni. Khi c nhu cu thay i nh dng (VD: thay mu sc
cho tng mn khc nhau) th phi tn nhiu cng sc v thi gian. Trc nhu cu
vy, ta cn to ra cc mu nh dng chung (cho tng mn) ri p dng cc mu nh
dng cho tng mn hc. Khi c nhu cu thay i, ta ch cn thay i trn mu. Do
cc nh dng c nh ngha trong tp tin css, nn phn m HTML ca trang web c
thu gn li nhiu, gip cho vic kim sot m HTML c d dng hn.
2. CSS (Cascading Style Sheet):L mt dng ti liu cha cc thng tin v
cc mu nh dng m ti liu thng tin ny c th c nhiu trang web s dng. Cc
mu ny dng nh ngha cch thc hin th (ng k khung, khong cch gia cc dng,
) v nh dng (mu ch, kiu ch, mu nn, ) ca phn ni dung ca trang web. Ch
: C mt s trnh duyt khng h tr CSS. Cc loi CSS: (gm 3 loi)Loi Format
Inline CSS Embeded nh ngha C php V d nh dng bnh thng. c nh ngha
ngay ti th HTML cn nh dng. Phm vi s dng: Ti th HTML c nh ngha. C
php, VD (Xem thm trong trang 2 Bi 3 - HDTH). c nh ngha bn trong th
. Phm vi s dng: Trong file .htm nh ngha. C php, VD (Xem thm trong
trang 3 Bi 3 - HDTH). u tin 1 2
Bi 3 : S d ng CSS + Javascript | 9/26/2007
3
1
Linked
c nh ngha trong 1 file .css ring l. Phm vi s dng: p dng cho cc
trang web lin kt n file .css ny. y l dng css c s dng nhiu nht. C
php, VD (Xem phn tip theo)
4
Ch : Nu cng mt ni dung trn trang web m s dng nhiu kiu nh dng th
ni dung s p dng nh dng c u tin cao nht.
Bi 3 : S d ng CSS + Javascript | 9/26/2007
2
3. CSS dng Linked:y l loi css c s dng nhiu nht. N dng nh ngha cc
mu nh dng v lu trong mt file ring l (c phn m rng .css). Ch nhng
trang web cn s dng cc mu th s lin kt n file css c cha mu .C php :C
php .Selector1 { Property1: Value; Property2: Value; } .Selector2 {
Property1: Value; Property2: Value; } Gii thch Selector: + Tn th
HTML (nu mu ny nh dng cho th). + Tn mu mi do ngi dng nh ngha (cc tn
ny khng c trng lp nhau trong cng mt file css). V d VD1: nh ngha mu
cho th HTML p { color : #008000; font-weight : bold } VD2: nh ngha
mu mi .Mau1 { color : #008000; font-weight : bold }
-
Cch nh ngha css trong Dreamweaver Bc 1: To file css mi hoc m
file css c sn chn thm mu nh dng mi.
Bi 3 : S d ng CSS + Javascript | 9/26/2007
File New Basic page Chn CSS
3
-
Bc 2: nh ngha mu nh dng mi.
Chn Menu Window - CSS Style Chn nt Add
Class : nh ngha mt mu nh dng mi (c th p dng cho bt k th Tag no)
Tag : nh ngha li mu nh dng cho 1 Tag nht nh Advanced : nh ngha mu
nh dng cho nhng Taq c ID nht nh. Name : tn ca nh dng.Bi 3 : S d ng
CSS + Javascript | 9/26/2007
4
Nhp cc thng tin nh dng.
Kt qu ta c mt nh ngha mu mi.
-
Bc 3: nh ngha thm cc mu mi nu cn (quay li bc 2). Bc 4: Lu file
css (File Save).
Bi 3 : S d ng CSS + Javascript | 9/26/2007
5
Lin kt (link) file css vo file web .htm t Dreamweaver:
Ch : Phn ny ch thc hin khi file css cha tng c lin kt vo file
web.htm. Nu file css lin kt vo file web htm, ta b qua bc ny.Bc 1: M
trang web.htm cn to lin kt n file .css Bc 2: To lin kt. T menu Text
CSS Style Attach Style Sheet Chn file .css cn lin kt. p dng Mu nh
dng trong file css cho n i dung trang web:
(p dng cho nh dng trong bng Thi kha biu)Tit 1 Tit 2 Tit 3 Tit 4
Th 2 TKWeb 1 HH CSDL Th 3 TK CSDL LTT Th 4 TKWeb 1 HH CSDL Th 5 LTT
TK CSDL HH Th 6 TKWeb 1 Th 7 CSDL LTT CN TK CSDL TKWeb 1
-
Bc 1: Chn trn bng cn p dng mu Mau1 trong file formatTable.css Bc
2: Chn cell cn nh dng. Vo ca s Property chn style : style1 Bc 3: T
ca s Modify Style, chn tn mu cn p dng trong danh sch Class Ok
Bi 3 : S d ng CSS + Javascript | 9/26/2007
-
Bc 4: Kin tra li kt qu p dng mu. Chn va mi p dng mu, chuyn qua
ch Code.
6
Bng so snh m lnh HTML cho 1dng trong thi kha biu:
Khng s dng css, ch s dng nh dng bnh thng
S dng CSS linked
Bi 3 : S d ng CSS + Javascript | 9/26/2007
7
4. Bi tpBi tp 1 :
Hon thnh bi v d Thi kha biuBi tp 2 :
Lm highline menu cho trang web (kt hp Java script) Tham kho on m
lnh sau. HightLight MENU function HightLight(what, onoff) { var
className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu');
what.className = className; } Khoa CNTT - Truong DHKHTN
W3Schools
Bi tp 3 : S dng CSS cho tt c trang web lm.
T chc th mc lu file css. Mi loi nh dng (VD: nh dng cho table, nh
dng cho font, nh dng cho paragraph, nh dng border cho hnh, .) lu
trong mt file css ring.
Bi 3 : S d ng CSS + Javascript | 9/26/2007
8
