Tailieu TKWeb

THIT K WEB
ThS. Thi Kim Phng
Lu hnh ni b
2010
MC LC
CHNG 1 KHI QUT CHUNG V INTERNET...........................................................4
CHNG 2 CC BC THIT K WEB..........................................................................7
2.1 MC TIU CA WEBSITE CN THIT K................................................................8
2.2 CHIN LC THIT K...............................................................................................9
2.3 THIT K GIAO DIN...................................................................................................9
CHNG 3 HTML CN BN.............................................................................................18
3.1 CC TH NH DNG CU TRC D LIU..........................................................19
3.1.1 HTML......................................................................................................................19
3.1.2 HEAD......................................................................................................................19
3.1.3 TITLE......................................................................................................................19
3.1.4 BODY......................................................................................................................19
3.2 CC TH NH DNG KHI.....................................................................................20
3.2.1 TH P.......................................................................................................................20
3.2.2 CC TH NH DNG MC H1/H2/H3/H4/H5/H6.....................................20
3.2.3 TH XUNG DNG BR.......................................................................................21
3.2.4 TH PRE.................................................................................................................21
3.3 CC TH NH DNG DANH SCH........................................................................21
3.3.1 DANH SCH THNG THNG.........................................................................21
3.4 CC TH NH DNG K T...................................................................................22
3.4.1 CC TH NH DNG IN K T.......................................................................22
3.4.2 CN L VN BN TRONG TRANG WEB.........................................................23
3.4.3 CC K T C BIT.........................................................................................24
3.4.4 S DNG MU SC TRONG THIT K CC TRANG WEB.........................24
3.4.5 CHN KIU CH CHO VN BN.....................................................................26
3.4.6 KHI NIM VN BN SIU LIN KT............................................................26
3.4.7 A CH TNG I...........................................................................................27
3.4.8 KT NI MAILTO..................................................................................................28
3.4.9 V MT NG THNG NM NGANG..........................................................28
3.5 CC TH CHN M THANH, HNH NH................................................................29
3.5.1 GII THIU............................................................................................................29
3.5.2 A M THANH VO MT TI LIU HTML.................................................30
3.5.3 CHN MT HNH NH, MT ON VIDEO VO TI LIU HTML............30
3.6 CC TH NH DNG BNG BIU.........................................................................31
CHNG 4 CSS (Cascading Style Sheets)..........................................................................46
4.1 KHI NIM CSS...........................................................................................................47
4.1.1 CSS l g?.................................................................................................................47
4.1.2 Ti sao CSS?............................................................................................................47
4.1.3 Hc CSS cn nhng g?...........................................................................................47
4.1.4 C php CSS............................................................................................................48
4.1.5 n v CSS..............................................................................................................49
4.1.6 V tr t CSS...........................................................................................................50
4.1.7 S u tin.................................................................................................................52
4.2 MT S C TNH C BN V CSS.......................................................................54
4.2.1 Thuc tnh Border trong CSS..................................................................................54
4.2.2 Thuc tnh Font trong CSS......................................................................................56
4.2.3 Thuc tnh List trong CSS.......................................................................................58
4.2.4 Thuc tnh Text trong CSS.......................................................................................59
4.2.5 Thuc tnh Padding trong CSS................................................................................60
4.2.6 Thuc tnh Background trong CSS..........................................................................60
4.2.7 Thuc tnh Margin trong CSS..................................................................................61
CHNG 5 THIT K WEB DNG FORM V JAVASCRIPT.....................................69
5.1 HTML FORM.................................................................................................................70
5.1.1 TO FORM.............................................................................................................70
5.1.2 TO MT DANH SCH LA CHN..................................................................70
5.1.3 TO HP SON THO VN BN......................................................................71
5.2 CN BN V NGN NG JAVASCRIPT..................................................................71
5.2.1 Tng quan Java Script..............................................................................................71
5.2.2 S kin trong html v java script.............................................................................73
CHNG 6 THIT K WEB S DNG DREAMWEAVER..........................................95
6.1 NH DNG WEBPAGE..............................................................................................97
6.2 TABLE............................................................................................................................97
6.3 FORM.............................................................................................................................99
6.4 LAYER..........................................................................................................................102
6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU...............104
6.6 B SUNG MULTIMEDIA CHO TRANG WEB (M THANH, PHIM NH)..........107
6.7 FRAMESET..................................................................................................................109
6.8 CASCADE STYLE SHEET- TEMPLATE...................................................................111
CHNG 7 NG K V QUN L WEBSITE..........................................................126
7.1 NG K HOST.........................................................................................................127
7.2 THIT K MT S WEBSITE MU........................................................................128
Ti liu tham kho
Mn Thit k Web
CHNG 1
KHI QUT CHUNG V INTERNET
Tm tt
Mc tiu
Cc mc chnh
Kt thc bi hc ny - Khi nim mng Internet

cung cp hc vin kin - Cc dch v c bn : www, ftp,
thc v mng Internet
email,
Trang 4
Bi tp
bt buc
Bi tp
lm thm
Ti liu tham kho
Mn Thit k Web
Mng l mt nhm cc my tnh kt ni vi nhau. Internet l mng ca cc mng. Giao thc

TCP/IP (Transmission Control Protocol/Internet Protocol) cung cp vic kt ni tt c cc
my tnh trn th gii.
Hnh 1.1: Internet

World Wide Web l mt tp con ca Internet. N bt u nh l n nghin cu cp quc
gia ti phng nghin cu CERN Thy S. Ngy nay, n cung cp thng tin cho ngi dng
trn ton th gii.
WWW hot ng da trn 3 c ch a cc ti nguyn c gi tr n vi ngi dng.
l:
o Giao thc: Ngi dng tun theo cc giao thc ny truy cp ti nguyn trn Web.
HyperText Transfer Protocol(HTTP) l giao thc c WWW s dng.
o a ch: WWW tun theo mt cch thc t tn thng nht truy cp vo cc ti

nguyn trn Web. URL c s dng nhn dng cc trang v cc ti nguyn trn
Web.
o HTML: Ngn ng nh du siu vn bn (HTML) c s dng to cc ti liu c

th truy cp trn Web. Ti liu HTML c to ra bng cch s dng cc th v cc
phn t ca HTML. File c lu trn Web server vi ui .htm hoc .html.
Khi bn s dng trnh duyt yu cu mt s thng tin no , Web server s p ng cc
yu cu . N gi thng tin c yu cu n trnh duyt di dng cc trang web. Trnh
duyt nh dng thng tin do my ch gi v v hin thi chng.
Trang 5
Ti liu tham kho
Mn Thit k Web
Hnh 1.2: Trnh duyt yu cu n my ch
Hnh 1.3: Mt s trnh duyt ph dng
Trang 6
Ti liu tham kho
Mn Thit k Web
CHNG 2
CC BC THIT K WEB
Tm tt
Mc tiu
Cc mc chnh
Bi tp
bt buc
Bi tp
lm thm
Kt thc bi hc ny 2.1 Mc tiu ca website
Da vo bi tp Da vo bi tp
cung cp hc vin kin cn thit k
trong
thc v cc bc khi 2.2 Chin lc thit k
Chng 2.
thit k mt Website
2.3 Thit k giao din
Trang 7
phn
cui trong
phn
Chng 2.
cui
Ti liu tham kho
Mn Thit k Web
2.1 MC TIU CA WEBSITE CN THIT K

Phc tho mc tiu, tng s gip bn s khng ch hc c lm th no to mt
website m cn to ra s thnh cng v mt ti chnh trong khi cung cp ni dung gi tr v
i mi ti cc khch hng ca bn.
Bc 1: Ni dung trang web ca bn l g?
Bn c th ngh v cu hi ny qu nhiu ti mc bn c th c c cu tr li rt r rng.
Nhng chc nng v cm nhn v trang web phi ph hp vi ni dung. B cc v chc nng
ca trang web d thc hin hn khi bn hiu tng tng v ni dung trang web ca mnh.
Bc 2: Hy ch trng vo b cc v tnh thit thc ca trang web
Hy u tin thanh ton cho bt k nhng gi hosting (lu tr website) hoc cc chin dch
qung co, cng nh c mt ci nhn tng th v ni dung trang web s l g v c th hin
nh th no. iu g s l tng chnh trn trang web ca bn? N s c tho lun nh
th no? Bn c th chn b sung cho ch ca mnh qua nhng bi bo, cc blog, hot nh,
hnh nh hoc l s kt hp ca tt c nhng ci ny.N c phi l nh dng ph hp m bn
mun s dng cho ni dung trang web khng? Bn c th to mt website nh th no s
thu ht c c gi theo mong i ca mnh?
Bc 3: Hy tm mt dch v hosting c th cung cp tt c tnh nng m bn cn
T nhng iu ni trn, bn nn c mt danh sch y cc chc nng bn cn nh:
mu th in t, kho st v bnh chn, th vin nh, thng tin phi ng nhp, cc blog v c
nhng tnh nng khc. Hy nghin cu k cc gi hosting v tm ly mt gi cho hng cho
mi th bn cn. Nu bn khng chc chn lm th no to mt website th hy tm kim
mt my ch c h thng h tr vng chc, hoc nh h tr k thut chnh thc hoc cc din
n tch cc.
Bc 4: ng bt c ai truy cp vo trang web ca bn khi n cha thc s sn sng
Mi ngi ght iu hng truy cp ti mt trang xut hin banner ang trin khai. Thng
thng, mt trang ang trin khai th khng bao gi hon tt v n gn nh b b qun. Bi
hu ht mi ngi khng tr li nhn khi cc trang ang trin khai na d n c
hon tt.
Bc 5: Hy m bo trang web ca bn c truy cp nhiu khi n thc s sn sng.
Bn khng ch cn ngh xem lm th no thit k website tt nht, m cn lm th no
tip th c mt website ti c gi theo mong i ca mnh. Hy hoch nh lm th no
bn s s dng nhng c hi tip th min ph chng hn nh cc din n, cc lin kt tng
h cng nh c c cc blogger n vi trang web ca bn. Hy to thm mt k hoch na
cho cc chng trnh qung co c thanh ton m chnh chng s gip duy tr ngn sch
cho bn.
Trang 8
Ti liu tham kho
Mn Thit k Web
2.2 CHIN LC THIT K

Bt c iu g bn ang c gng tin hnh thit k website, cho d nu l qung co cho
cng ty hay bn sn phm th mc tiu chnh vn l ginh c lu lng truy cp
Khi thit k mt trang web mi cho cng ty, d website ln hay nh th iu quan trng l
khin mi ngi lun tr li vi trang web ca bn. Quan im ca mi ngi v mt website
hiu qu c s khc nhau. Mt s ngi c th quan trng v giao din web trong khi nhng
ngi khc li quan tm n s tin ch nhiu hn. Nu bn c th p ng c nhng tiu
ch sau th trang web ca bn tht c s vt tri trong rng website.
Giao din website
Khng ai mun nhn mt website c giao din km thu ht nhng nu n qu sc s th cng
khin khch truy cp ri b. Vic tm thy mt s hi ho tt gia chng l cha kho c
bn thit k website hiu qu. Mu sc c th c s dng th hin cm xc tnh cm
ca con ngi cng nh c th khuyn khch h mua hng. Cc nh thit k web chuyn
nghip s dng tm l mu nhm truyn ti nhng li thng ip khc nhau ti ngi
dng. Mt bn thit k ng nn qu phc tp hay kh hiu v cng nn ph hp vi loi
hnh kinh doanh cng nh sn phm hoc dch v m bn mi cho.
Mc ch trang web
Trc khi pht trin mt trang web bn cn phi t ra cc mc tiu v hy t hi bn thn
rng bn mun mi ngi c c li ch nh th no t trang web ca bn. Ni dung ca
website nn lun c cp nht. Rt d nhn thy khi website cha c cp nht. iu ny
c phn nh khng hay v cng ty bi v trang ch nh l bn tm tt chung ni dung
website. Bn cng cn c mt ni dung website phn nh c mc tiu chnh v nhng g
bn ang c gng lm.
Tnh tin ch
Internet cung cp v vn thng tin nn kh ginh c s ch ca mi ngi cng nh gi
h trn trang web ca bn. Mt trong nhng iu khin ngi truy cp hay ri b nht l tin
ch ngho nn. Mt trang web cn c n gin v d s dng. iu hng nn d dng truy
cp ti c mi trang trn website. Khch truy cp s khng bao gi phi kch chut nhiu
hn 4 ln vo mt trang c th. Mt quy tc chung ca hu ht cc chuyn gia thit k web
l khng nn khch truy cp nhp chut qu 2 ln khi truy cp ti bt k trang no trn
website. Cu trc iu hng phc tp s nhanh chng lm mt khch truy cp v h s ri b
nu h khng th tm thy nhng iu m h ang tm kim. Bn hy nh n mt iu na l
cc nh cung cp dch v ca bn.
2.3 THIT K GIAO DIN
Bn gp rt nhiu trang web p v gi y bn mun thit k mt trang web ring
cho mnh. Bn cng c cht khiu v thm m v cng bit i cht v vic thit k web,
nhng bn cha bao gi tng t mnh thit k ra mt trang web hon chnh
Trang 9
Ti liu tham kho
Mn Thit k Web
i tm cm hng v hnh thnh tng (phn 1)

Bn gp rt nhiu trang web p v gi y bn mun thit k mt trang web ring cho
mnh. Bn cng c cht khiu v thm m v cng bit i cht v vic thit k web, nhng
bn cha bao gi tng t mnh thit k ra mt trang web hon chnh. my ln bn ngi
trc my tnh, quyt nh s lm cho mnh mt trang web - ri c my ting sau vn cha
lm c g? Bn tht s chng bit phi bt u t u c
Trong mi vic, bc u tin bao gi cng l bc kh nht. iu cng ng vi nu bn
cha c kinh nghim v khng bit g nhiu v nhng vic m mnh s lm. Trong bi vit
ny s gip bn tr li mt mt cu hi rt hay thng gp nhng ngi mi bt u lm
thit k web l lm th no ly cm hng v tng ca nhng trang web thit k p m
bn thch to ra thit k ring cho mnh m khng ri vo tnh hung sao chp thit k ca
h?
Tuy nhin, phi ni trc, nu bn hi vng c xong bi vit ny s gip bn thit k c
mt trang web hon chnh th ti e rng s lm bn tht vng. Trong bi vit, ti s gi nh
rng cc bn c kin thc v vit m cho web cng nh s dng tng i thnh tho
mt phn mm ha no . iu bn cn ch l mt hng i bt u - v t hi vng t
nhng kinh nghim ca mnh s gip cho cc bn c c mt hng i ng.
Vy bc u tin s l g? Bc u tin tuy kh ngh ra, nhng thng li l bc d
nht v chng my ngc nhin mt khi bn bit v n:
Bc 1: Tm ngun cm hng
Qu trnh ny trong thut ng ca dn thit k gi l get inspired. Vic c c cm hng l
mt iu rt quan trng trong nhng ngnh ngh thut lin quan n qu trnh sng to. Trong
m nhc, ngun cm hng c th l t mt cm xc cht n trong mt bui chiu; Trong th,
n c th bt ngun t mt cnh quang thin nhin. Cn trong thit k, ngun cm hng n
t nhng thit k khc. Chnh v vy, khng ging nh trong th v nhc vic tm c
ngun cm hng thng n mt cch ngu nhin v c phn may mn, trong thit k, bn c
th t mnh i tm ngun cm hng. Hy vo cc trang su tm v gii thiu cc thit k p
nh CSSBeauty, CSS Vault, Design Shake v bn s thy c rt nhiu thit k rt p t khp
ni trn th gii. Mt vi iu ng ch :
Hy chp v lu li mn hnh ca cc trang web m bn thch vo mt th mc trn

my tnh. Cc trang gallery thng hnh nh thu nh v thng khng c my tc
dng trong vic gip bn thy c ci p ca thit k. Vic lu li hnh nh
phn gii thc khng nhng s em li cho bn s chi tit m cn gip bn xem li
nhng thit k ny d dng hn v sau m khng cn phi m trnh duyt ra.
bc ny, bn khng cn phi ngh v thit k tng lai ca mnh m hy c vic

do quanh mt vng v thng thc nhng thit k ca ngi khc. Tuy nhin, bn
cn xc nh r trang web m mnh s thit k l thuc phn mc no. C rt nhiu
thit k p, nhng khng phi thit k no cng ph hp vi mc ch ca bn. V d
nh phong cch thit k ca mt trang web doanh nghip s khng ph hp vi mt
trang blog c nhn. Vic xc nh r ngay t u s gip bn b qua rt nhanh nhng
Trang 10
Ti liu tham kho
Mn Thit k Web
thit k khng ph hp (nhng gallery trn thng c n hng trm thit k, vic
ngi xem ht tng ci l khng th).
Nu bn xc nh rng mnh ang thit k giao din cho blog, bn s d dng b qua nhng
thit k nh bn phi, trong khi dnh nhiu ch hn n nhng thit k cho php nhiu
khng gian hin th bi vit nh trong hnh bn tri.
ng ngi qu lu xem cng mt lc. Hy dnh thi gian lm vic khc, hm

sau xem tip. L do l thng th mt khi xem qu lu, cng v sau bn s cng cm
thy mt mi v khi dng nh mi thit k u tr nn nhm nhm ging nh
nhau - mc d nu bn xem n ngay t lc u th bn li thy n p. V vy, s l l
tng nu mi ngy bn ch xem vi ba thit k v l l do ti sao bn nn c thi
quen su tm thit k p mi ngy - n lc cn th c sn nhng thit k m
bn thch. Nu bn xc nh mnh s i theo ngh thit k web, l mt thi quen
nn hc.
Vy khi no th bn nn dng li? Khi no th bn bit rng mnh tm c ngun cm

hng? Rt kh tr li c cu hi ny. S c nhng lc m bn bt gp mt trang web qu
p m bn ch mun dng li v bt tay ngay vo vic thit k mt trang web tng t.
Nhng tr khi bn mun sao chp nguyn xi thit k ca h (m nh vy th chng gi l
thit k), cm hng t mt thit k nh vy s khng gip bn c th lm nn thit k
ca ring mnh - mc d bn c th chc chn l thit k s ng vai tr rt quan trng nh
hng n thit k ca bn. Vy nn, li khuyn ca ti l hy ch dng li khi:
Bn c c t nht 10 - 20 thit k m bn cm thy p v ph hp vi trang web

ca mnh
C t nht mt trang thit k m n khin bn ch mun copy nguyn xi ca n v (d

rng mc ch ca bn khng phi l nh vy)
Khi , bn c th bt u chuyn sang bc th 2:
Trang 11
Ti liu tham kho
Mn Thit k Web
Bc 2: nh hnh tng
Sau khi chn c khong 10-20 thit k trong bc 1 v bc u c ci cm hng
quyt nh s thit k cho ring mnh mt trang web, bn s cn phi nh hnh tng cho
trang web ca mnh. Hy ngi duyt li nhng nh chp trang web m bn lu vo my
trong bc 1:
Cch tt nht trong qu trnh ny l dng tnh nng Slideshow ca phn mm qun l
nh (v d nh Picasa) v n s ch hin th mt nh trn ton mn hnh (gip bn b
phn tn) cng nh n cho php bn nhanh chng chuyn qua nhng hnh khc.
Xem giao din ton mn hnh s dng tnh nng slideshow ca Picasa gip bn trnh b phn
tn.
Ghi ch xung mt mnh giy nh nhng im m bn thch v mt thit k m bn

ngh rng mnh mun c trong thit k ca mnh. iu rt quan trng l bn hy
n tng ch khng phi chi tit ca thit k. iu c ngha l bn nn ghi li
tng s dng my lm hnh nh u trang v c cui trang to cm gic v khng
gian, nhng bn khng nn copy hnh nh m h s dng. Nhng g bn cn :
cch s dng mu sc, hnh thc b cc, cch sp xp ni dung, v thm ch cch cch
m h lm vin cho hnh nh, Nhng g bn khng nn : trang web s dng
hnh nh c th g, mu sc c th cho tiu ca bi vit,
Trang 12
Ti liu tham kho
Mn Thit k Web
Bn thy g t mt trong nhng thit k ban u ca trang web All Womens Talk? Mt vi
im cn ghi li: cch s dng mu n v cch h chn mu th hin ni dung n tnh ca
trang web. Bn cng c th ghi li cch m h t ch ca bi vit ngay trc tiu ca
bi vit v lm ni bt n bng cch t mu nn cho n. Ci cch m h chia din tch trang
web thnh 2 na - mt lit k nhng bi vit chnh v bn kia hin th danh sch cc bi
ni bt v danh sch phn mc. Nhng g bn khng nn chp li: hnh nh bng hoa h s
dng trong hu nh tt c cc thnh phn trn trang web.
Sau bc ny, bn s c mt tng tng i r rng (t ra l khng m h khng xc nh
nh trc) v trang web ca mnh. Trang web s c thit k n gin v sch s hay l n s
s dng nhiu hnh nh ha? Bn s s dng nhiu mu sc to cm gic ti tr hay s
chn tng mu n l m sang trng? Trang web s c b cc 3 ct hay 2 ct? Bn thm ch
s xc nh c nhng cu hi tng i chi tit nh liu mnh s s dng hnh nh vector
hay s s dng nh chp lm trang tr?
ng qu lo lng v vic liu bn c ang copy thit k ca ngi khc hay khng. Min l
bn khng c nh v bn c t nht 10 - 20 thit k tham kho th ti m bo khi bt
u i vo thit k bn s khng gp phi trng hp bn copy thit k ca ngi khc. Bn
s ngc nhin khi sang bc 4, khi m bn bt u xy dng mu cho thit k ca mnh,
nhng tng ban u m bn ghi chp li bc ny s t bin i thnh thit k ca ring
bn.
Kt thc (Phn 1)
Tt nhin, khng phi c l thit k p th nht thit n s ph hp vi ni dung ca bn.
Trong bi k tip, t s tho lun v vic kt hp gia ni dung v thit k, cng nh mt vi
kinh nghim trong vic bt u xy dng mu (prototype) cho thit k ca mnh.
Trang 13
Ti liu tham kho
Mn Thit k Web
Xy dng khung ni dung (Phn 2)
Nhc li
Trc khi bt u, s khng l tha nhc li nhng g chng ta c c t nhng bc
trc .
Cm hng
bc 1 - sau khi xem nhng thit k ca ngi khc, bn bt u c c ci hng
xy dng mt trang web cho ring mnh. Mt ln na khng th khng nhc li tm quan
trng ca cm hng. Cm hng khng th t nhin xut hin ch v bn xc nh rng
mnh cn c mt trang web ring, mc d chnh l l do khin bn i tm cm hng.
Khng ging nh trong cc lnh vc ngh thut khc bn vn khng bit c khi no th cm
hng s n vi mnh, trong thit k bn hon ton c th thc hin qu trnh gi l i tm
cm hng m ti m t trn.
Cm hng l g? l mt s thi thc m mt khi cm nhn c n, bn ch mun bt
tay vo lm ngay v c nh ng c g lm gin on qu trnh . Mt khi bn c c
ci gi l cm hng th mi th dng nh u t nhin xut hin - nh n c sn t
trc vy. Bn hon ton c th nh mt ci cm hng ca mnh mt cch nhanh chng v iu ny rt thng hay xy ra nu nh bn b gin on gia bc 1 v bc 2 v thm
ch i khi l gia qu trnh thit k chi tit. Ti s ni thm v iu ny sau, nhng iu
quan trng bn nn nh l bn hon ton c th tm li c n vi mt cht thi gian tm xa
n ri quay li bc 1.
tng
T nhng trang web m bn xem, bc u bn ghi nhn nhng im m mnh mun
thit k ca mnh th hin. Mc d bn c th khng nhn ra, chnh trong qu trnh xem v
chn lc nhng im nhn m bn thch t nhng thit k ca ngi khc, bn t mnh
khm ph chnh mnh. Ti sao bn thch v ghi li ci cch phi mu m trang
AllWomenTalks s dng? Ti c th t tin khng nh rng bn l mt c gi vi mt tm
hn lng mn, n tnh v thm ch thch s u m.
Bc 3: Xy dng khung ni dung
Trang 14
Ti liu tham kho
Mn Thit k Web
Th no gi l xy dng khung ni dung? l qu trnh i tm cu tr li cho cu hi - nu

nhn t xa, b cc trang web ca bn s trng nh th no. Thut ng trong thit k thng
gi qu trnh ny l prototyping - tc xy dng m hnh mu. Mt bc hnh c th thay vn
li gii thch - y l ci gi l khung ni dung.
Mc ch ca vic thit k khung giao din khng phi l to ra giao din - bn n gin l
to mt m hnh th ca giao din. Bn khng cn quan tm v mu sc. Bn cng khng
cn quan tm v nhng biu tng c th c s dng l g. Ni tm li, bn khng phi
quan tm v nhng chi tit nh ca thit k m ch cn tp trung vo bc tranh tng th ca
trang web (tng tng nu bn ng cch xa mn hnh 5 mt v nhn trang web ca mnh s
nh th no - chc chn bn s khng thy c th ni dung m ch thy b cc ca n).
Nu theo ng bi bn, vic thit k khung ni dung i hi bn phi tri qua mt qu trnh
phn tch v tm hiu rt chi tit v ni dung v tng tc thc t vi ngi dng - nh ci
cch m 37 Signals gii thiu v qu trnh h thit k mt mu hin th thng tin n gin ca
h thng. Tuy nhin, vic p dng mt qu trnh khoa hc nh vy c l l khng ph hp
vi phn ln nhng trang web nh v i khi khin ngi thit k mi bt u rt nn v c
xu hng b qua khi khng thy c hiu qu trc tip ca n. Vy nn ti s tm tt n
thnh 2 bc chnh:
Xc nh v phn loi ni dung s xut hin. V d nh nu l mt trang blog th

thng s c nhng i tng chnh sau: Tiu , danh sch cc phn mc, ct ni
dung bi vit, cc lin kt bn b. Tu theo mc ch c th, bn c th c thm nhng
i tng ni dung khc - v d nh nhng phn hi gn y nht, ct ghi chp nhanh,
Sp xp nhng i tng ni dung ny theo tng khi.
Trang 15
Ti liu tham kho
Mn Thit k Web
Mt trong nhng quyt nh quan trng nht m bn s phi la chn trong bc ny chnh l
v b cc trnh by thng tin - trang web s c chia lm 1 ct, 2 ct hay 3 ct (ph bin vi
cc trang ni dung). Kinh nghim ca ti cho thy rng dng nh tt c cc thit k trang
web ni dung u bt u t quyt nh la chn s ct trnh by ni dung v n s nh
hng rt nhiu n nhng quyt nh c th sau . Thng thng th thng tin ny s c
hnh thnh t 2 bc trc - nhng nu bn c sn tng t trc v b cc giao din
th bn vn c th hon ton thc hin n trc. gip cc bn c thm thng tin trc khi
la chn - c bit l nu bn thit k cho blog ca mnh - bn c th th tr li cu hi Bn
c sn nhiu ni dung cha?
Nu bn ch mi bt u vit m chn cho mnh mt giao din 3 ct s khin trang web ca
bn tr nn trng tri. Trong tnh hung , c l bn nn th tm mt thit k n gin 2 ct
trong thi gian tch lu ni dung - v n khi c tng i nhiu nhng bi vit th bn c
th chuyn sang giao din 3 ct. Thc t l nu bn thit k blog th nn cc k hn ch vic
s dng giao din 3 ct ngay c khi c nhiu ni dung. Vi phn gii ca mn hnh
Vit Nam phn ln ch gii hn 1024 x 768, bn thng s ch c ti a l 950px b rng
cho 3 ct. Trong blog, ct ni dung chnh thng s chim t nht mt na b rng - tc bn
s ch cn khong 400px cho 2 ct ni dung cn li sau khi tr i cc khong cch canh l
da cc ct v vi 2 cnh ca ca s trnh duyt. Bn c th s nht c tiu cc danh
mc v vi lin kt ngn mt trong 2 ct , nhng chc chn phn cn li s khng
a cc ni dung ln.
Trang 16
Ti liu tham kho
Mn Thit k Web
Cc trang ch bo ch (nh VietnamNet) c th s dng giao din 3 ct bi h ch cn a

tiu ngn ca cc bn tin trong mi ct - nhng iu khng p dng c vi nhng
trang blog.
kt thc, sau y l mt vi kinh nghim c th gip bn trong qu trnh ny:
Khng dng phn mm v. giai on ny, bn cn c kh nng v v xo tht

nhanh chuyn ho v th nghim nhng tng ny sinh trong qu trnh ny. S
dng phn mm d n gin v d s dng n my cng s i hi bn phi thc
hin nhiu thao tc k thut.
Bn c th s dng bt ch, mt cc ty v vi t giy - nhng tt nht theo ti vn l

c mt tm bng v vi cy bt lng mu khc nhau. Khng ch vic xo v v li trn
bng d hn rt nhiu so vi trn giy, ti c cm gic rng khi bn ang ng v v
trn bng, kh nng sng to ca bn s c tng cng.
Nhng thnh phn duy nht m bn cn v c l s ch l nhng hnh ch nht. Bn

biu din danh sch phn mc bng mt ci hp, ct ni dung bng mt ci hp khc
cao v to hn,
Hy nhng bng v ca bn xut hin trc mt bn vi ngy. iu ny d thc

hin nu bn c mt tm bng v - ch cn bn khng xo th mi ngy d ang lm
vic khc bn cng s thy n - v i khi trong nhng lc khng tp trung nh vy
bn s c c nhng tng chnh sa ng gi.
Mc d ch l bn v khung th, nhn t xa bn phi cm thy c ci giao din v

hi lng vi n. Nu nhn vo b cc m bn cm thy cn hi kh chu th chng
t n cha t tiu chun v b cc. Nn nh, mc d giao din thc t, ngi dng
s khng ch thy ni dung nh nhng ci hp - nhng trong tim thc ca b no ni dung s c th hin nh nhng ci hp v n ng mt phn rt quan trng
trong nhn thc ca ngi dng v giao din h quyt nh c thch n hay khng.
Ni chung l nhng quyt nh m bn la chn bc ny mc d rt chung chung nhng

s c nh hng rt ln mt khi bn bt u chuyn sang qu trnh thit k chi tit. Nhng
bn mi bt u lm quen vi vic thit k thng d dng b qua bc ny bi thy n
khng cn thit, nhng s tht l nu bn lm tt n, nhng quyt nh c a ra trong
bc ny s gip bn gim rt nhiu thi gian sp xp v chnh sa trong qu trnh thit k
chi tit. Cn nu bn c nh pht trin theo hng thit k giao din ngi dng (web
hay ng dng phn mm) th c l y l mt qu trnh bt buc d bn c mun hay khng hy thc hnh vi nhng thit k nh v n gin tch lu kinh nghim cho mnh.
BI THC HNH CHNG 2

1. Hy thit k khung mu cho nhng website trong n.
2. Hy thit k khung mu cho website thng mi.
3. Hy thit k khung mu cho website gii tr.
4. Hy thit k khung mu cho blog.
Trang 17
Ti liu tham kho
Mn Thit k Web
CHNG 3
HTML CN BN
Tm tt
Mc tiu
Cc mc chnh
Bi tp
bt buc
Bi tp
lm thm
Kt thc bi hc ny cung
3.1 Cc th nh dng cu trc d liu
Da vo bi
Da vo bi
cp hc vin kin thc v
3.2 Cc th nh dng khi
tp trong
tp trong
cc th HTML cn bn 3.3 Cc th nh dng danh sch
phn cui
phn cui
trong vic thit k giao 3.4 Cc th nh dng k t
Chng 3.
Chng 3.
din Web
3.5 Cc th chn m thanh, hnh nh

3.6 Cc th nh dng bng biu
Mc tiu Cc mc chnh Bi tp bt Bi tp lm
buc thm
Trang 18
Ti liu tham kho
Mn Thit k Web
3.1 CC TH NH DNG CU TRC D LIU

3.1.1 HTML
Cp th ny c s dng xc nhn mt ti liu l ti liu HTML, tc l n c s dng cc
th HTML trnh by. Ton b ni dung ca ti liu c t gia cp th ny.
C php:
<HTML>
... Ton b ni ca ti liu c t y
</HTML>
Trnh duyt s xem cc ti liu khng s dng th <HTML> nh nhng tp tin vn bn bnh
thng.
3.1.2 HEAD
Th HEAD c dng xc nh phn m u cho ti liu.
C php:
<HEAD>
... Phn m u (HEADER) ca ti liu c t y

</HEAD>
3.1.3 TITLE
Cp th ny ch c th s dng trong phn m u ca ti liu, tc l n phi nm trong th
phm vi gii hn bi cp th <HEAD>.
C php:
<TITLE>Tiu ca ti liu</TITLE>
3.1.4 BODY
Th ny c s dng xc nh phn ni dung chnh ca ti liu - phn thn (body) ca ti
liu. Trong phn thn c th cha cc thng tin nh dng nht nh t nh nn cho ti
liu, mu nn, mu vn bn siu lin kt, t l cho trang ti liu... Nhng thng tin ny c
t phn tham s ca th.
C php:
<BODY>
.... phn ni dung ca ti liu c t y
</BODY>
Trn y l c php c bn ca th BODY, tuy nhin bt u t HTML 3.2 th c nhiu thuc

tnh c s dng trong th BODY. Sau y l cc thuc tnh chnh:
Trang 19
Ti liu tham kho
Mn Thit k Web
BACKGROUND=
t mt nh no lm nh nn (background) cho
vn bn. Gi tr ca tham s ny (phn sau du
bng) l URL ca file nh. Nu kch thc nh nh
hn ca s trnh duyt th ton b mn hnh ca s
trnh duyt s c lt kn bng nhiu nh.
BGCOLOR=
t mu nn cho trang khi hin th. Nu c hai tham

s BACKGROUND v BGCOLOR cng c gi tr th
trnh duyt s hin th mu nn trc, sau mi ti
nh ln pha trn.
TEXT=
Xc nh mu ch ca vn bn, k c cc mc.
ALINK=,VLINK=,LINK=
Xc nh mu sc cho cc siu lin kt trong vn

bn. Tng ng, alink (active link) l lin kt ang
c kch hot - tc l khi c kch chut ln;
vlink (visited link) ch lin kt tng c kch
hot;
Nh vy mt ti liu HTML c bn c cu trc nh sau:

<HTML>
<HEAD>
<TITLE>Tiu ca ti liu</TITLE>
</HEAD>
<BODY Cc tham s nu c>
... Ni dung ca ti liu
</BODY>
</HTML>
3.2 CC TH NH DNG KHI

3.2.1 TH P
Th <P> c s dng nh dng mt on vn bn.
C php:
<P>Ni dung on vn bn</P>
3.2.2 CC TH NH DNG MC H1/H2/H3/H4/H5/H6

HTML h tr 6 mc mc. Ch rng mc ch l cc ch dn nh dng v mt logic,
tc l mi trnh duyt s th hin mc di mt khun dng thch hp. C th trnh duyt
ny l font ch 14 point nhng sang trnh duyt khc l font ch 20 point. mc cp 1 l
cao nht v gim dn n cp 6. Thng thng vn bn mc cp 5 hay cp 6 thng c
kch thc nh hn vn bn thng thng.
Di y l cc th dng nh dng vn bn dng mc:
Trang 20
Ti liu tham kho
Mn Thit k Web
<H1> ... </H1>
nh dng mc cp 1
<H2> ... </H2>
nh dng mc cp 2
<H3> ... </H3>
nh dng mc cp 3
<H4> ... </H4>
nh dng mc cp 4
<H5> ... </H5>
nh dng mc cp 5
<H6> ... </H6>
nh dng mc cp 6
3.2.3 TH XUNG DNG BR

Th ny khng c th kt thc tng ng ( </BR>), n c tc dng chuyn sang dng mi.
Lu , ni dung vn bn trong ti liu HTML s c trnh duyt Web th hin lin tc, cc
khong trng lin nhau, cc k t tab, k t xung dng u c coi nh mt khong trng.
xung dng trong ti liu, bn phi s dng th <BR>
3.2.4 TH PRE
gii hn on vn bn c nh dng sn bn c th s dng th <PRE>. Vn bn
gia hai th ny s c th hin ging ht nh khi chng c nh vo, v d du xung
dng trong on vn bn gii hn bi th <PRE> s c ngha chuyn sang dng mi (trnh
duyt s khng coi chng nh du cch)
C php:
<PRE>Vn bn c nh dng</PRE>
3.3 CC TH NH DNG DANH SCH

3.3.1 DANH SCH THNG THNG
C php:
<UL>
<LI> Mc th nht
<LI> Mc th hai
</UL>
C 4 kiu danh sch:

`
Danh sch khng sp xp ( hay khng nh s) <UL>
Danh sch c sp xp (hay c nh s) < OL>, mi mc trong danh sch c

sp xp th t.
Danh sch thc n <MENU>
Danh sch phn cp <DIR>
Trang 21
Ti liu tham kho
Mn Thit k Web
Vi nhiu trnh duyt, danh sch phn cp v danh sch thc n ging danh sch khng
nh s, c th dng ln vi nhau. Vi th OL ta c c php sau:
<OL TYPE=1/a/A/i/I>
<LI>Muc thu nhat
<LI>Muc thu hai
<LI>Muc thu ba
</OL>
trong :
TYPE =1
Cc mc c sp xp theo th t 1, 2, 3...
=a
Cc mc c sp xp theo th t a, b, c...
=A
Cc mc c sp xp theo th t A, B, C...
=i
Cc mc c sp xp theo th t i, ii, iii...
=I
Cc mc c sp xp theo th t I, II, III...
Ngoi ra cn thuc tnh START= xc nh gi tr khi u cho danh sch.

Th < LI > c thuc tnh TYPE= xc nh k hiu u dng (bullet) ng trc mi mc
trong danh sch. Thuc tnh ny c th nhn cc gi tr : disc (chm trn m); circle (vng
trn); square (hnh vung).
3.4 CC TH NH DNG K T
3.4.1 CC TH NH DNG IN K T
Sau y l cc th c s dng quy nh cc thuc tnh nh in nghing, in m, gch
chn... cho cc k t, vn bn khi c th hin trn trnh duyt.
<B> ... </B>

<STRONG> ... </STRONG>
In ch m
<I> ... </I>

<EM> ... </EM>
In ch nghing
<U> ... </U>
In ch gch chn
<DFN>
nh du on vn bn gia hai th ny l
nh ngha ca mt t. Chng thng c in
nghing hoc th hin qua mt kiu c bit
no .
<S> ... </S>
In ch b gch ngang.
<STRIKE> ... </STRIKE>

<BIG> ... </BIG>
In ch ln hn bnh thng bng cch tng

kch thc font hin thi ln mt. Vic s dng
cc th <BIG>lng nhau to ra hiu ng ch
tng dn. Tuy nhin i vi mi trnh duyt c
Trang 22
Ti liu tham kho
Mn Thit k Web
gii hn v kch thc i vi mi font ch,

vt qu gii hn ny, cc th <BIG> s
khng c ngha.
<SMALL> ... </SMALL>
In ch nh hn bnh thng bng cch gim

kch thc font hin thi i mt. Vic s dng
cc th <SMALL>lng nhau to ra hiu ng
ch gim dn. Tuy nhin i vi mi trnh
duyt c gii hn v kch thc i vi mi
font ch, vt qu gii hn ny, cc th
<SMALL> s khng c ngha.
<SUP> ... </SUP>
nh dng ch s trn (SuperScript)
<SUB> ... </SUB>
nh dng ch s di (SubScript)
<BASEFONT>
nh ngha kch thc font ch c s dng

cho n ht vn bn. Th ny ch c mt tham
s size= xc nh c ch. Th <BASEFONT>
khng c th kt thc.
<FONT> ... </FONT>
Chn kiu ch hin th. Trong th ny c th

t hai tham s size= hoc color= xc nh c
ch v mu sc on vn bn nm gia hai
th. Kch thc c th l tuyt i (nhn gi tr
t 1 n 7) hoc tng i (+2,-4...) so vi
font ch hin ti.
3.4.2 CN L VN BN TRONG TRANG WEB

Trong trnh by trang Web ca mnh cc bn lun phi ch n vic cn l cc vn bn
trang Web c c mt b cc p. Mt s cc th nh dng nh P, Hn, IMG... u c tham
s ALIGN cho php bn cn l cc vn bn nm trong phm vi gii hn bi ca cc th .
Cc gi tr cho tham s ALIGN:
LEFT
Cn l tri
CENTER
Cn gia trang
RIGHT
Cn l phi
Ngoi ra, chng ta c th s dng th CENTER cn gia trang mt khi vn bn.

C php:
<CENTER>Vn bn s c cn gia trang</CENTER>
Trang 23
Ti liu tham kho
Mn Thit k Web
3.4.3 CC K T C BIT
K t & c s dng ch chui k t i sau c xem l mt thc th duy nht. K t ;
c s dng tch cc k t trong mt t.
K t
M ASCII
Tn chui
<
>
&
&#060
&#062
&#038
&lt
&gt
&amp
3.4.4 S DNG MU SC TRONG THIT K CC TRANG WEB

Mt mu c tng hp t ba thnh phn mu chnh, l: (Red), Xanh l cy (Green),
Xanh nc bin (Blue). Trong HTML mt gi tr mu l mt s nguyn dng hexa (h m c
s 16) c nh dng nh sau:
#RRGGBB
trong :
RR - l gi tr mu .
GG - l gi tr mu Xanh l cy.
BB - l gi tr mu Xanh nc bin.
Mu sc c th c xc nh qua thuc tnh bgcolor= hay color=. Sau du bng c th l gi
tr RGB hay tn ting Anh ca mu. Vi tn ting Anh, ta ch c th ch ra 16 mu trong khi
vi gi tr RGB ta c th ch ti 256 mu.
Sau y l mt s gi tr mu c bn:
Mu sc
Gi tr
Tn ting Anh
#FF0000
RED
sm
#8B0000
DARKRED
Xanh l cy
#00FF00
GREEN
Xanh nht
#90EE90
LIGHTGREEN
Xanh nc bin
#0000FF
BLUE
Vng
#FFFF00
YELLOW
Vng nht
#FFFFE0
LIGHTYELLOW
Trng
#FFFFFF
WHITE
en
#000000
BLACK
Xm
#808080
GRAY
Nu
#A52A2A
Trang 24
BROWN
Ti liu tham kho
Mn Thit k Web
Tm
#FF00FF
MAGENTA
Tm nht
#EE82EE
VIOLET
Hng
#FFC0CB
PINK
Da cam
#FFA500
ORANGE
Mu ng phc hi qun
#000080
NAVY
#4169E1
ROYALBLUE
#7FFFD4
AQUAMARINE
C php:
<BODY
LINK
= color
ALINK
= color
VLINK
= color
BACKGROUND
= url
BGCOLOR
= color
TEXT
= color
TOPMARGIN
= pixels
RIGHTMARGIN
= pixels
LEFTMARGIN
= pixels
>
.... phn ni dung ca ti liu c t y
</BODY>
Sau y l ngha cc tham s ca th BODY:

Cc tham s
ngha
LINK
Ch nh mu ca vn bn siu lin kt
ALINK
Ch nh mu ca vn bn siu lin kt ang ang chn
VLINK
Ch nh mu ca vn bn siu lin kt tng m
BACKGROUND
Ch nh a ch ca nh dng lm nn
BGCOLOR
Ch nh mu nn
TEXT
Ch nh mu ca vn bn trong ti liu
SCROLL
YES/NO - Xc nh c hay khng thanh cun
TOPMARGIN
L trn
RIGHTMARGIN
L phi
LEFTMARGIN
L tri
Trang 25
Ti liu tham kho
Mn Thit k Web
3.4.5 CHN KIU CH CHO VN BN

C php:
<FONT
FACE
COLOR
SIZE
...
= font-name
= color
=n>
</FONT>
3.4.6 KHI NIM VN BN SIU LIN KT
Vn bn siu lin kt hay cn gi l siu vn bn l mt t, mt cm t hay mt cu trn trang
Web c dng lin kt ti mt trang Web khc. Siu vn bn l mi trng trong cha
cc lin kt (link) ca cc thng tin. Do WWW cu thnh t nhiu h thng khc nhau, cn
phi c mt quy tc t tn thng nht cho tt c cc vn bn trn Web. Quy tc t tn l
URL (Universal Resource Locator).
Dch v
Cng
Tn file
http://www.hugo.com.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001
Tn min
ng dn
Cc tham s,
bin, truy vn
V d v URL
Cc thnh phn ca URL c minh ho hnh trn.
Dch v: L thnh phn bt buc ca URL. N xc nh cch thc trnh duyt ca my
khch lin lc vi my phc v nh th no nhn d liu. C nhiu dch v nh http,
wais, ftp, gopher, telnet.

Tn h thng : L thnh phn bt buc ca URL. C th l tn min y ca my
phc v hoc ch l mt phn tn y trng hp ny xy ra khi vn bn c yu cu
vn nm trn min ca bn. Tuy nhin nn s dng ng dn y .
Cng : Khng l thnh phn bt buc ca URL. Cng l a ch socket ca mng dnh cho
mt giao thc c th. Giao thc http ngm nh ni vi cng 8080.
ng dn th mc : L thnh phn bt buc ca URL. Phi ch ra ng dn ti file
yu cu khi kt ni vi bt k h thng no. C th ng dn trong URL khc vi ng dn
thc s trong h thng my phc v. Tuy nhin c th rt gn ng dn bng cch t bit
danh (alias). Cc th mc trong ng dn cch nhau bi du gch cho (/).
Tn file : Khng l thnh phn bt buc ca URL. Thng thng my phc v c cu
hnh sao cho nu khng ch ra tn file th s tr v file ngm nh trn th mc c yu cu.
Trang 26
Ti liu tham kho
Mn Thit k Web
File ny thng c tn l index.html, index.htm, default.html hay default.htm. Nu cng

khng c cc file ny th thng kt qu tr v l danh sch lit k cc file hay th mc con
trong th mc c yu cu
Cc tham s : Khng l thnh phn bt buc ca URL. Nu URL l yu cu tm kim trn
mt c s d liu th truy vn s gn vo URL, chnh l on m ng sau du chm hi
(?). URL cng c th tr li thng tin c thu thp t form. Trong trng hp du thng (#)
xut hin on m ng sau l tn ca mt v tr (location) trong file c ch ra.
to ra mt siu vn bn chng ta s dng th <A>.
C php:
<A
HREF
NAME
TABINDEX
TITLE
TARGET
= url
= name
=n
= title
= _blank / _self
>
... siu vn bn
</A>
ngha cc tham s:
HREF
a ch ca trang Web c lin kt, l mt

URL no .
NAME
t tn cho v tr t th.
TABLEINDEX
Th t di chuyn khi n phm Tab
TITLE
Vn bn hin th khi di chut trn siu lin

kt.
TARGET
M trang Web c lin trong mt ca s

mi (_blank) hoc trong ca s hin ti
(_self), trong mt frame (tn frame).
3.4.7 A CH TNG I
URL c trnh by trn l URL tuyt i. Ngoi ra cn c URL tng i hay cn gi l
URL khng y . a ch tng i s dng s khc bit tng i gia vn bn hin thi
v vn bn cn tham chiu ti. Cc thnh phn trong URL c ngn cch bng k t ngn
cch (k t gch cho /). to ra URL tng i, u tin phi s dng k t ngn cch.
URL y hin ti s c s dng to nn URL y mi. Nguyn tc l cc thnh
phn bn tri du ngn cch ca URL hin ti c gi nguyn, cc thnh phn bn phi c
thay th bng thnh phn URL tng i. Ch rng trnh duyt khng gi URL tng i,
n b sung vo URL c s xc nh trc thnh phn URL tng i xc nh sau thuc
Trang 27
Ti liu tham kho
Mn Thit k Web
tnh href=. K t u tin sau du bng s xc nh cc thnh phn no ca URL hin ti s

tham gia to nn URL mi.
V d, nu URL y l: http://www.hugo.com.vn/HTML/index.htm th:
Du hai chm (:) ch dch v gi nguyn nhng thay i phn cn li. V d

://www.fpt.com/ s ti trang ch ca my phc v www.fpt.com vi cng dch v http.
Du gch cho (/) ch dch v v my phc v gi nguyn nhng ton b ng

dn thay i. V d /Javascript/index.htm s ti file index.htm ca th mc Javascript
trn my phc v www.hugo.com.vn.
Khng c du phn cch ch c tn file l thay i. V d index1.htm s ti file

index1.htm trong th mc HTML ca my phc v hugo.com.vn.
Du thng (#): ch dch v, my phuc v, ng dn v c tn file gi nguyn, ch

thay i v tr trong file.
Do ng dn c xem l n v c lp nn c th s dng phng php ng dn tng

i nh trong UNIX hay MS-DOS (tc l . ch th mc hin ti cn .. ch th mc cha ca
th mc hin ti).
URL c s c th c xc nh bng th <BASE>.
3.4.8 KT NI MAILTO
Nu t thuc tnh href= ca th <a> gi tr mailto:address@domain th khi kch hot kt ni
s kch hot chc nng th in t ca trnh duyt.
<ADDRESS>
Trang WEB ny c
<A href=mailto:webmaster@hugo.com.vn >
WEBMASTER
<\A> bo tr
<\ADDRESS>
3.4.9 V MT NG THNG NM NGANG

C php:
<HR
ALIGN
COLOR
NOSHADE
SIZE
WIDTH
= LEFT / CENTER / RIGHT

= color
=n
= width
>
ngha cc tham s:
ALIGN
Cn l (cn tri, cn phi, cn gia)
COLOR
t mu cho ng thng
NOSHADE
Khng c bng
Trang 28
Ti liu tham kho
Mn Thit k Web
SIZE
dy ca ng thng
WIDTH
Chiu di (tnh theo pixel hoc % ca b rng ca s

trnh duyt).
Th ny ging nh th BR, n cng khng c th kt thc tng ng.

3.5 CC TH CHN M THANH, HNH NH
3.5.1 GII THIU
Lin kt vi file a phng tin cng tng t nh lin kt bnh thng. Tuy vy phi t tn
ng cho file a phng tin. Phn m rng ca file phi cho bit kiu ca file.
KIU
Image/GIF
PHN M
RNG
.gif
M T
Vit tt ca Graphics Interchange Format. Khun
dng ny xut hin khi mi ngi c nhu cu trao i
nh trn nhiu h thng khc nhau. N c s dng
trn tt c cc h thng h tr giao din ho. nh
dng GIF l nh dng chun cho mi trnh duyt
WEB. Nhc im ca n l ch th hin c 256
mu.
M rng ca chun ny l GIF89, c thm nhiu
chc nng cho cc ng dng c bit nh lm nh
nn trong sut - tc l nh c th ni bng cch lm
mu nn ging vi mu nn ca trnh duyt.
Image/JPEG
.jpeg
Vit tt ca Joint Photographic Expert Group. L

khun dng nh khc nhng c thm kh nng
nn.u im ni bt ca khun dng ny l lu tr
c hng triu mu v nn cao nn kch thc
file nh nh hn v thi gian download nhanh hn.
N l c s cho khun dng MPEG. Tt c cc trnh
duyt u c kh nng xem nh JPEG.
Image/TIFF
.tiff
Vit tt ca Tagged Image File Format. c

Microsoft thit k qut nh t my qut cng nh
to cc n phm.
Text/HTML
.HTML, .htm
PostScript
.eps, .ps
c to ra hin th v in cc vn bn c cht
lng cao.
Adobe Acrobat
.pdf
Vit tt ca Portable Document Format. Acrobat cng

s dng cc siu lin kt ngay trong vn bn cng
ging nh HTML. T phin bn 2.0, cc sn phm
ca Acrobat cho php lin kt gia nhiu vn bn. u
im ln nht ca n l kh nng WYSISYG.
Video/MPEG
.mpeg
Vit tt ca Motion Picture Expert Group, l nh dng

dnh cho cc loi phim (video). y l khun dng
thng dng nht dnh cho phim trn WEB.
Video/AVI
.avi
L khun dng phim do Microsoft a ra.

Trang 29
Ti liu tham kho
Mn Thit k Web
Video/QuickTime
.mov
Do Apple Computer a ra, chun video ny c

cho l c nhiu u im hn MPEG v AVI. Mc d
c tch hp vo nhiu trnh duyt nhng vn
cha ph bin bng hai loi nh dng trn.
Sound/AU
.au
Sound/MIDI
.mid
L khun dng dnh cho m nhc in t ht sc

thng dng c nhiu trnh duyt trn cc h thng
khc nhau h tr. File Midi c tng hp s ho
trc tip t my tnh.
Sound/RealAudio
.ram
nh dng audio theo dng. Mt bt tin khi s dng

cc nh dng khc l file m thanh thng c kch
thc ln - do vy thi gian ti xung lu, Tri li
audio dng bt u chi ngay khi ti c mt phn
file trong khi vn ti v cc phn khc.Mc d file
theo nh dng ny khng nh hn so vi cc nh
dng khc song chnh kh nng dng khin nh
dng ny ph hp vi kh nng chi ngay lp tc.
VRML
.vrml
Vit tt ca Virtual Reality Modeling Language. Cc

file theo nh dng ny cng ging nh HTML. Tuy
nhin do trnh duyt c th hin th c ca s 3
chiu nn ngi xem c th cm nhn c cm
gic ba chiu.
3.5.2 A M THANH VO MT TI LIU HTML

C php:
<BGSOUND
SRC = url
LOOP = n
>
Th ny khng c th kt thc tng ng (</BGSOUND>). chi lp li v hn cn ch

nh LOOP = -1 hoc LOOP = INFINITE. Th BGSOUND phi c t trong phn
m u (tc l nm trong cp th HEAD).
3.5.3 CHN MT HNH NH, MT ON VIDEO VO TI LIU HTML
chn mt file nh (.jpg, .gif, .bmp) hoc video (.mpg, .avi) vo ti liu HTML, bn c th
s dng th IMG.
C php:
<IMG
ALIGN
= TOP/MIDDLE/BOTTOM
ALT
= text
BORDER
=n
Trang 30
Ti liu tham kho
Mn Thit k Web
SRC
= url
WIDTH
= width
HEIGHT
= height
HSPACE
= vspace
VSPACE
= hspace
TITLE
= title
DYNSRC
= url
START= FILEOPEN/MOUSEOVER
LOOP
=n
>
Trong :
ALIGN = TOP/ MIDDLE/
BOTTOM/ LEFT/ RIGHT
Cn hng vn bn bao quanh nh
ALT = text
Ch nh vn bn s c hin th nu chc nng

show picture ca browser b tt i hay hin th
thay th cho nh trn nhng trnh duyt khng c
kh nng hin th ho. Vn bn ny cn c
gi l nhn ca nh. i vi trnh duyt c kh
nng h tr ho, dng vn bn ny s hin ln
khi di chut qua nh hay c hin th trong vng
ca nh nu nh cha c ti v ht. Ch
phi t vn bn trong hai du nhy kp nu
triong vn bn cha du cch hay cc k t c
bit - trong trng hp ngc li c th b du
nhy kp.
BORDER = n
t kch thc ng vin c v quanh nh

(tnh theo pixel).
SRC = url
a ch ca file nh cn chn vo ti liu.
WIDTH/HEIGHT
Ch nh kch thc ca nh c hin th.
HSPACE/VSPACE
Ch nh khong trng xung quanh hnh nh (tnh

theo pixel) theo bn pha trn, di, tri, phi.
TITLE = title
Vn bn s hin th khi con chut tr trn nh
DYNSRC = url
a ch ca file video.
START =
FILEOPEN/MOUSEOVER
Ch nh file video s c chi khi ti liu c

m hay khi tr con chut vo n. C th kt hp
c hai gi tr ny nhng phi phn cch chng
bi du phy.
LOOP = n/INFINITE
Ch nh s ln chi. Nu LOOP = INFINITE th

file video s c chi v hn ln.
3.6 CC TH NH DNG BNG BIU

Sau y l cc th to bng chnh:
Trang 31
Ti liu tham kho
Mn Thit k Web
<TABLE> ... </TABLE>
nh ngha mt bng
<TR> ... </TR>
nh ngha mt hng trong bng
<TD> ... </TD>
nh ngha mt trong hng
<TH> ... </TH>
nh ngha cha tiu ca ct
<CAPTION> ... </CAPTION>
Tiu ca bng
C php:
<TABLE
ALIGN
BORDER
=n
BORDERCOLOR
= color
BORDERCOLORDARK
= color
BORDERCOLORLIGHT
= color
BACKGROUND
= url
BGCOLOR
= color
CELLSPACING
= spacing
CELLPADDING
= pading
>
<CAPTION>Tiu ca bng biu</CAPTION>
... nh ngha cc dng
<TR
ALIGN = LEFT/CENTER/RIGHT
VALIGN = TOP/MIDDLE/BOTTOM>
... nh ngha cc trong dng
<TD
ALIGN
VALIGN
= TOP / MIDDLE / BOTTOM
BORDERCOLOR
= color
BORDERCOLORDARK
= color
BORDERCOLORLIGHT
= color
BACKBROUND
= url
BGCOLOR
= color
COLSPAN
=n
ROWSPAN
=n
>
... Ni dung ca
</TD>
...
</TR>
...
</TABLE>
Trang 32
Ti liu tham kho
Mn Thit k Web
ngha cc tham s:
ALIGN / VALIGN
Cn l cho bng v ni dung trong mi .
BORDER
Kch thc ng k chia trong bng, c o

theo pixel. Gi tr 0 c ngha l khng xc nh l,
gia cc trong bng ch c mt khong trng nh
phn bit. Nu ch border th ngm nh
border=1. Vi nhng bng c cu trc phc tp, nn
t l ngi xem c th phn bit r cc dng v
ct.
BORDERCOLOR
Mu ng k
BORDERCOLORDARK
Mu pha ti v pha sng cho ng k ni.
BORDERCOLORLIGHT
BACKGROUND
a ch ti tp nh dng lm nn cho bng
BGCOLOR
Mu nn
CELLSPACING
Khong cch gia cc trong bng
CELLPADDING
Khong cch gia ni dung v ng k trong mi

ca bng.
COLSPAN
Ch nh s ko di trong bao nhiu ct
ROWSPAN
Ch nh s ko di trong bao nhiu hng
BI THC HNH CHNG 3

Cc bc trong chng ny c trnh by rt chi tit, y v r rng. Bn s hiu r hn nhng
ni dung trong bi l thuyt v cch s dng cng c. Hy thc hin theo cc bc di y mt cch
cn thn.
1. To th mc HTML-Examples trong a D:\ v lu tt c cc file .htm ch trong th mc ny.
(Nu khng c a D, hy to trong a C:\)
2. Chy chng trnh Notepad bng cch kch vo nt Start v chn Accessories.
3. G on m vo ti liu
4. Kch vo File chn Save As
5. Lu file vi ui .htm trong th mc D:\HTML-Examples.
6. Chy Internet Explorer.
7. Kch vo File Open, chn Browse v chn file t th mc D:\HTML-Examples
Trang 33
Ti liu tham kho
Mn Thit k Web
BI TP 1
1/ To trang web Headings.htm (s dng Tag Hn, t Heading1 n Heading6)
2/ To trang web HeadingCenter.htm (Phi hp cc Tag)
3/ To trang web Alignment.htm (Phi hp cc Tag)
Trang 34
Ti liu tham kho
Mn Thit k Web
4/ To trang web Emphasis.htm
5/
Trang 35
Ti liu tham kho
Mn Thit k Web
6/
BI TP 2 (Link)
1/ To tp tin links2.htm : to cc Hyperlink di chuyn n cc trang htm va to

trn.
Trang 36
Ti liu tham kho
Mn Thit k Web
2/ To tp tin Search.htm xy dng trang Web sau
http://www.google.com for Google

http://www.altavista.com for Altavista
http://www.Yahoo.com for Yahoo
3/ S dng cc tag hc to 1 trang Web cho ring bn (MySite.htm)

Ni dung: T gii thiu v Cc trang Web a thch (to cc HyperLink)
4/ To trang Web sau (InternalLink)
Trang 37
Ti liu tham kho
Mn Thit k Web
BI TP 3 (Image)
1/ Image1.htm
2/ Image2.htm
Hng dn: thm vo dng lnh
<body background = images/background.gif>
Trang 38
Ti liu tham kho
Mn Thit k Web
BI TP 4 (Bullete)
1/ Unordered.htm.
2/ Ordered.htm.
3/ Definition.htm
dl
dt
dd
Trang 39
Ti liu tham kho
Mn Thit k Web
4/ Horizontal.htm
5/
Trang 40
Ti liu tham kho
Mn Thit k Web
BI TP 5 (Table)
1/ Table1.htm
2/ Table2.htm (Tables with images and links)

<html>
<head>
<title>Exercise :: Tables2</title>
<head>
<body >
<table width="75%" border="1" cellspacing="2" cellpadding="0"
align="center">
<tr>
<th>Files from Session 2</th>
</tr>
<tr>
<td><a href="/headings.htm">headings exercise</a></td>
<td>images.htm</td>
<td>unordered.htm</td>
</tr>
<tr>
<td><a href="/headingscentered.htm">center align exercise</a></td>
<td>images2.htm</td>
<td>ordered.htm</td>
</tr>
Trang 41
Ti liu tham kho
Mn Thit k Web
<tr>
<td><a href="/emphasis.htm">emphasis exercise</a></td>
<td> </td>
<td>definition.htm</td>
</tr>
<tr>
<td><a href="/links.htm">links exercise 1</a></td>
<td> </td>
<td>table1.htm</td>
</tr>
<tr>
<td><a href="/links2.htm">links exercise 2</a></td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Trang 42
Ti liu tham kho
Mn Thit k Web
Dng cc th HTML thit k cc trang web sau:

1/ Tourist1.htm
2/ Tourist2.htm
Trang 43
Ti liu tham kho
Mn Thit k Web
3/ vinair.htm
4/ oto.htm
Trang 44
Ti liu tham kho
Mn Thit k Web
5) Dulich.htm
Trang 45
Ti liu tham kho
Mn Thit k Web
CHNG 4
CSS (Cascading Style Sheets)
c mc chnh Bi tp bt Bi tp lm
Tm tt
Mc tiu
Cc mc chnh
Bi tp
bt buc
Bi tp
lm thm
4.1 Khi nim v CSS
Da vo bi tp Da vo bi
cp hc vin kin thc v
4.2 Mt s c tnh c bn v CSS
trong phn cui tp trong phn
to CSS trong vic thit k
Chng 4.
giao din Web
cui Chng
4.
buc thm
Trang 46
Ti liu tham kho
Mn Thit k Web
4.1 KHI NIM CSS

4.1.1 CSS l g?
Trong lnh vc xy dng, chng ta c trang tr ni tht; trong lnh vc thm m - lm p,
chng ta c k thut make-up; cn trong lnh vc thit k web chng ta c CSS. y ch l
mt nh ngha giu hnh nh nhng cng thc t thi. Cn CSS (Cascading Style Sheets tm
dch l t mu theo Style Sheets) l mt ngn ng quy nh cch trnh by cho cc ti liu vit
bng HTML, XHTML, XML, SVG, hay UML,
4.1.2 Ti sao CSS?
Chng ta bit qua HTML trong chng trc th cng bit HTML h tr mt s thuc tnh
nh dng c bn cho text, picture, table, nhng n khng tht s phong ph v chnh xc
nh nhau trn mi h thng. CSS cung cp cho bn hng trm thuc tnh trnh by dnh cho
cc i tng vi s sng to cao trong kt hp cc thuc tnh gip mang li hiu qu. Ngoi
ra, hin ti CSS c h tr bi tt c cc trnh duyt, nn bn hon ton c th t tin trang
web ca mnh c th hin th hu nh nh nhau d trn mt h thng s dng Windows,
Linux hay trn mt my Mac min l bn ang s dng mt phin bn trnh duyt mi nht.
S dng cc m nh dng trc tip trong HTML tn hao nhiu thi gian thit k cng nh
dung lng lu tr trn a cng. Trong khi CSS a ra phng thc t mu gip p
dng mt khun mu chun t mt file CSS ngoi. N tht s c hiu qu ng b khi bn
to mt website c hng trm trang hay c khi bn mun thay i mt thuc tnh trnh by
no . Hy th tng tng bn c mt website vi hng trm trang v bn mun thay i
font ch hay mu ch cho mt thnh phn no . tht s s l mt cng vic bun chn
v tn nhiu thi gian. Nhng vi vic s dng CSS vic l hon ton n gin.
Ngoi ra, CSS cn cho php bn p t nhng kiu trnh by thch hp hn cho cc phng
tin khc nhau nh mn hnh my tnh, my in, in thoi,
CSS c cp nht lin tc mang li cc trnh by phc tp v tinh vi hn.
4.1.3 Hc CSS cn nhng g?
Tht s khng c mt iu kin g c quy nh khi hc CSS. Nhng mt kha cnh no
th mt s chun b cho mt cuc hnh trnh d l d nht vn khng tha v t nht n s
gip bn lm tt hn. Hnh trang th nht m bn nn c l mt kin thc v HTML, n
khng tht s cn thit nu bn ch dng CSS trnh by cho mt trang HTML c sn (nh
lm skin cho blog chng hn), nhng bn vn cn bit ngha mt s th HTML, n s c ch
khi bn vit CSS. Tuy nhin, nu bn mun t thit k, trnh by mt trang web ca ring
mnh th ty theo quy m trang web, bn cn phi hc thm c HTML, XHMTL, Javascript
v mt s ngn ng lp trnh web khc. Hnh trang th hai chnh l mt trnh son tho vn
bn bn c th vit m CSS. y, ti khuyn bn nn s dng mt trnh son tho n
gin nh Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac.
N s gip bn chc chn code l ca bn v khng c bt k mt s can thip no t chng
trnh nh khi dng DreamWeaver, FrontPage, Golive, Hnh trang th ba ca bn chnh l
mt phin bn mi nht ca trnh duyt m bn thng dng. V mt iu na m ti mun
ngh l cc bn hy dnh mt t thi gian thc hnh CSS sau bi hc n s tht s c
ch cho bn. Thc hnh chng nhng gip bn vn dng nhun nhuyn cc bi hc m cn c
Trang 47
Ti liu tham kho
Mn Thit k Web
tc dng gii thch ngc li nhng l thuyt m bn cha hiu. By gi nu bn tht s

chun b chng ta hy chuyn qua phn tip theo tht s bc chn vo th gii CSS.
4.1.4 C php CSS
tm hiu c php CSS chng ta hy th xem mt v d sau. V d: nh mu nn cho
mt trang web l xanh nht (light cyan) chng ta dng code sau:
+ Trong HTML: <body bgcolor=#00BFF3>
+ Trong CSS: body { background-color:#00BFF3; }
Nhn qua v d trn t nhiu chng ta cng thy c mi tng ng gia cc thuc tnh
trong HTML v CSS cho nn nu bn bit qua HTML th cng s rt d dng tip thu CSS.
l mt cht li th ca cu chuyn hnh trnh m ti ni trn. Nhng khng sao c,
by gi hy nhn vo v d ca chng ta v cc bn xem n c ging vi cu trc sau khng
nh.
C php CSS c bn:
Selector { property:value; }
Trong :
+ Selector: Cc i tng m chng ta s p dng cc thuc tnh trnh by. N l cc tag
HTML, class hay id (chng ta s hc v 2 thnh phn ny phn sau).
V d: body, h2, p, img, #title, #content, .username,
Trong CSS ngoi vit tn selector theo tn tag, class, id. Chng ta cn c th vit tn
selector theo phn cp nh ch cc nh trong #entry, chng ta vit selector l #entry
img, nh vy th cc thuc tnh ch nh s ch p dng ring cho cc nh nm trong #entry.
Khi vit tn cho class, i khi s c nhiu thnh phn c cng class , v d nh th
img v th a cng c class tn vistors nhng y li l hai i tng khc nhau, 1 ci l nh
ca ngi thm, 1 ci l lin kt ti trang ngi thm. Nn nu khi vit CSS ta ghi l
.visitors { width:50 } th s nh hng ti c hai thnh phn. Nn trong trng hp ny, nu
bn c dng CSS ch ring phn nh th ch nn ghi l img .visitors thi.
Mt li vit tn selector na l da trn tn cc thuc tnh c trong HTML. V d
trong HTML ta c on m nh vy: <input name=Search type=Text value=Key
Word>. p dng thuc tnh CSS cho ring tm kim ny chng ta s dng selector
input[name=Search].
Ngoi vic vit tn selector c th, chng ta cng c th dng mt selector i din
nh * { color:red } s tc ng n tt c cc thnh phn c trn trang web lm cho chng
c text mu .
+ Property: Chnh l cc thuc tnh quy nh cch trnh by. V d: background-color, fontfamily, color, padding, margin,
Mi thuc tnh CSS phi c gn mt gi tr. Nu c nhiu hn mt thuc tnh cho
mt selector th chng ta phi dng mt du ; (chm phy) phn cch cc thuc tnh. Tt
c cc thuc tnh trong mt selector s c t trong mt cp ngoc nhn sau selector.
V d: body { background:#FFF; color:#FF0000; font-size:14pt }
d c hn, bn nn vit mi thuc tnh CSS mt dng. Tuy nhin, n s lm
tng dung lng lu tr CSS ca bn.
Trang 48
Ti liu tham kho
Mn Thit k Web
V d: body {
background:#FFF;
color:#FF0000;
font-size:14pt
}
i vi mt trang web c nhiu thnh phn c cng mt s thuc tnh, chng ta c th
thc hin gom gn li nh sau:
h1 { color:#0000FF;
text-transform:uppercase }
h2 { color:#0000FF;
text-transform:uppercase; }
h3 { color:#0000FF;
h1, h2, h3 { color:#0000FF;
+ Value: Gi tr ca thuc tnh. Nh v d trn value chnh l #FFF dng nh mu trng
cho nn trang.
i vi mt gi tr c khong trng, bn nn t tt c trong mt du ngoc kp. V
d: font-family:Times New Roman.
i vi cc gi tr l n v o, khng nn t mt khong cch gia s o vi n v
ca n. V d: width:100 px. N s lm CSS ca bn b v hiu trn Mozilla/Firefox hay
Netscape.
Ch thch trong CSS:
Cng nh nhiu ngn ng web khc. Trong CSS, chng ta cng c th vit ch thch cho
cc on code d dng tm, sa cha trong nhng ln cp nht sau. Ch thch trong CSS
c vit nh sau /* Ni dung ch thch */
V d:
/* Mu ch cho trang web */
body {
color:red
}
4.1.5 n v CSS
Trong CSS2 h tr cc loi n v l n v o chiu di v n v o gc, thi gian, cng
m thanh v mu sc. Tuy nhin, s dng ph bin nht vn l n v o chiu di v mu
sc. Sau y l bng lit k cc n v chiu di v mu sc dng trong CSS.
n v chiu di
Trang 49
Ti liu tham kho
Mn Thit k Web
N V
M T
Phn trm
ex
1 ex bng chiu cao ca ch x in thng ca font

hin hnh. Do , n v ny khng nhng ph thuc
trn kch c font ch m cn ph thuc loi font ch
v cng 1 c 14px nhng chiu cao ch x ca font
Times v font Tohama l khc nhau.
in
Inch (1 inch = 2.54 cm)
cm
Centimeter
mm
Millimeter
em
1 em tng ng kch thc font hin hnh, nu

font hin hnh c kch c 14px th 1 em = 14 px. y
l mt n v rt hu ch trong vic hin th trang web.
pt
Point (1 pt = 1/72 inch)
pc
Pica (1 pc = 12 pt)
px
Pixels (im nh trn mn hnh my tnh)
n v mu sc
N V
M T
Color-name
Tn mu ting Anh. V d: black, white, red, green,

blue, cyan, magenta,
RGB (r,g,b)
Mu RGB vi 3 gi tr R, G, B c tr t 0 255 kt
hp vi nhau to ra v s mu.
RGB (%r,%g,%b)
Mu RGB vi 3 gi tr R, G, B c tr t 0 100% kt
hp.
Hexadecimal RGB
M mu RGB dng h thp lc. V d: #FFFFFF:

trng, #000000: en, #FF00FF: ti.
4.1.6 V tr t CSS
trn chng ta tm hiu v c php vit CSS, nhng cn t n u trong ti liu
HTML? Trong phn ny, ti xin gii thiu vi cc bn v vn ny. Chng ta c ba cch
khc nhau nhng CSS vo trong mt ti liu HTML
+ Cch 1: Ni tuyn (kiu thuc tnh).
y l mt phng php nguyn thy nht nhng CSS vo mt ti liu HTML bng
cch nhng vo tng th HTML mun p dng. V d nhin trong trng hp ny chng ta s
khng cn selector trong c php. Lu : Nu bn mun p dng nhiu thuc tnh cho nhiu
th HTML khc nhau th khng nn dng cch ny. v d sau chng ta s tin hnh nh
nn mu trng cho trang v mu ch xanh l cho on vn bn nh sau:
Trang 50
Ti liu tham kho
Mn Thit k Web
<html>
<head>
<title>V d</title>
</head>
<body style=background-color=#FFF;>
<p style=color:green>^_^ Welcome To My Blog ^_^</p>
</body>
</html>
+ Cch 2: Bn trong (th style)
Tht ra nu nhn k chng ta cng nhn ra y ch l mt phng cch thay th cch th
nht bng cch rt tt c cc thuc tnh CSS vo trong th style ( tin cho cng tc bo tr,
sa cha). Cng v d lm trang web c mu nn trng, on vn bn ch xanh l, chng ta s
th hin nh sau:
<html>
<head>
<title>V d</title>
<style type=text/css>
body { background-color:#FFF }
p { color:#00FF00 }
</style>
</head>
<body>
<p>^_^ Welcome To My Blog ^_^</p>
</body>
</html>
Lu : Th style nn t trong th head.
i vi nhng trnh duyt c, khng th nhn ra th <style>. Theo mc nh, th khi mt trnh
duyt khng nhn ra mt th th n s hin ra phn ni dung cha trong th. Nh v d trn,
nu trnh duyt khng h tr th style th 2 dng CSS: body {background-color:#FFF } p
{ color:#00FF00 } s hin ra trn trnh duyt. trnh tnh trng ny, bn nn a vo thm
du  sau khi code CSS. Nh v d trn s vit li l:
<style type=text/css>

</style>
Trang 51
Ti liu tham kho
Mn Thit k Web
+ Cch 3: Bn ngoi (lin kt vi mt file CSS bn ngoi)

Tng t nh cch 2 nhng thay v t tt c cc m CSS trong th style chng ta s
a chng vo trong mt file CSS (c phn m rng .css) bn ngoi v lin kt n vo trang
web bng thuc tnh href trong th link.
y l cch lm c khuyn co, n c bit hu ch cho vic ng b hay bo tr mt
website ln s dng cng mt kiu mu, ch cn thay i ni dung 1 file CSS, tt c cc trang
web s c cp nht ngay lp tc. Cc v d trong sch ny cng c trnh by theo kiu
ny.
No by gi chng ta hy m Notepad ln v th thc hin theo v d sau.
u tin chng ta s to ra mt file vidu.html c ni dung nh sau:
<html>
<head>
<title>V d</title>
<link rel=stylesheet type=text/css href=style.css />
</head>
<body>
<p>^_^ Welcome To My Blog ^_^</p>
</body>
</html>
Sau hy to mt file style.css vi ni dung:
body {
background-color:#FFF
}
p{
color:#00FF00
}
Hy t 2 file ny vo cng mt th mc, m file vidu.html trong trnh duyt ca bn v xem
thnh qu.
Lu :
lu 1 file vi 1 ui khc .txt trong Notepad chng ta chn Save as type l All
Files. C th chn Encoding l UTF-8, nu bn ch thch CSS bng ting Vit.
Trong CSS chng ta cn c th s dng thuc tnh @import nhp mt file CSS vo
CSS hin hnh. C php: @import url(link).
4.1.7 S u tin
Trc khi thc thi CSS cho mt trang web. Trnh duyt s c ton b CSS m trang web c
th c p dng, bao gm: CSS mc nh ca trnh duyt, file CSS bn ngoi lin kt vo
trang web, CSS nhng trong th <style> v cc CSS ni tuyn. Sau , trnh duyt s tng
Trang 52
Ti liu tham kho
Mn Thit k Web
hp ton b CSS ny vo mt CSS o, v nu c cc thuc tnh CSS ging nhau th thuc tnh
CSS no nm sau s c u tin s dng. Theo nguyn tc trnh duyt ca bn s u tin
cho cc CSS ni tuyn > CSS bn trong > CSS bn ngoi > CSS mc nh ca trnh duyt.
V d: Trong mt trang web c lin kt ti file style.css c ni dung nh sau:
p{
color:#333;
text-align:left;
width:500px
}
trong th <style> gia th <head> cng c mt on CSS lin quan:
p{
background-color:#FF00FF;
text-align:right;
width:100%;
height:150px
}
trong phn ni dung trang web cng c s dng CSS ni tuyn:
p { style=height:200px; text-align:center; border:1px solid #FF0000; color:#000 }
Khi thc thi CSS trnh duyt s c ht tt c cc ngun cha style ri s tng hp li vo mt
CSS o v nu c s trng lp cc thuc tnh CSS th n s ly thuc tnh CSS c mc u tin
cao hn. Nh v d trn chng ta s thy CSS cui cng m phn t p nhn c l:
p{
width:100%;
height:200px;
text-align:center;
border:1px solid #FF0000;
color:#000
}
Vy c cch no thay i u tin cho mt thuc tnh no ? Tht ra th trong CSS
c sn mt thuc tnh gip chng ta thc hin iu ny, chnh l thuc tnh !important. Ch
cn bn t thuc tnh ny sau mt thuc tnh no theo c php selector { property:value !
important } th trnh duyt s hiu y l mt thuc tnh c u tin. By gi, chng ta cng
xt li v d trn nhng c t thm mt s thuc tnh !important vo xem kt qu nh th no
nh.
Trang 53
Ti liu tham kho
Mn Thit k Web
p{
width:500px;
color:#333; !important
text-align:left; !important
}
p{
text-align:right;
width:100%;
height:150px !important
}
p { style=height:200px; text-align:center; border:1px solid #FF0000; color:#000 }

Phn CSS s tc ng ln thuc tnh p l:
p{
width:100%;
height:150px; !important
text-align:left; !important
border:1px solid #FF0000;
color:#333 !important
}
Lu : Cng mt thuc tnh cho mt selector th nu c hai thuc tnh u t !important th
ci sau c ly.
4.2 MT S C TNH C BN V CSS
4.2.1 Thuc tnh Border trong CSS
Thuc tnh Border cho php bn ch nh kiu cch, mu sc v rng ca ng bao ca
mt thnh phn. Trong HTML chng ta s dng bng to ra cc ng bao xung quanh
mt vn bn, nhng vi cc thuc tnh Border trong CSS chng ta c th to cc ng bao
vi hiu ng p v n c th ng dng cho phn t bt k.
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Trang 54
Ti liu tham kho
Mn Thit k Web
Thuc tnh
border
M t
V d
Mt thuc tnh thit lp border-width
NN
IE
W3C
4.0
4.0
CSS1
6.0
4.0
CSS1
6.0
4.0
CSS2
6.0
4.0
CSS2
4.0
4.0
CSS1
6.0
4.0
CSS1
6.0
4.0
CSS1
6.0
4.0
CSS2
6.0
4.0
CSS2
4.0
4.0
CSS1
6.0
4.0
CSS1
6.0
4.0
CSS2
6.0
4.0
CSS2
4.0
4.0
CSS1
cho ton b c 4 ng bao border-style

trong mt khai bo.
border-bottom
border-color
Mt thuc tnh thit lp border-bottom-width

cho ng bao y trong border-style
mt khai bo.
border-color
border-bottom-
Thit lp mu sc ca ng border-color
color
bao y
border-bottom-style Thit lp kiu
cch
ca border-style
ng bao y.
border-bottom-
Thit lp rng ca ng thin
width
bao y
medium
thick
length
border-color
Thit lp mu sc ca bn color
ng bao, c th t mu
t mt n bn.
border-left
Mt thuc tnh thit lp border-left-width

cho ng bao tri trong mt border-style
khai bo.
border-left-color
border-color
bao tri.
border-left-style
Thit lp kiu
cch
ca border-style
ng bao tri.
border-left-width

bao tri.
medium
thick
length
border-right
Mt thuc tnh thit lp border-right-width

cho ng bao phi trong border-style
mt khai bo.
border-right-color
border-color
bao phi.
border-right-style
Thit lp kiu
cch
ca border-style
ng bao phi.
border-right-width

bao phi.
medium
Trang 55
Ti liu tham kho
Mn Thit k Web
thick
length
border-style
Thit lp kiu cch ca c none
6.0
4.0
CSS1
6.0
4.0
CSS1
6.0
4.0
CSS2
6.0
4.0
CSS2
4.0
4.0
CSS1
4.0
4.0
CSS1
bn ng bao, c th t hidden
c kiu t mt n bn.
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top
Mt thuc tnh thit lp border-top-width

cho ng bao nh trong border-style
mt khai bo.
border-top-color
border-color
bao nh.
border-top-style
Thit lp kiu
cch
ca border-style
ng bao nh.
border-top-width

bao nh
medium
thick
length
border-width
Mt thuc tnh tc hnh thin

thit
lp
rng
ca
medium
bn ng bao trong mt thick

khai bo, c th c t mt length
n bn gi tr.
4.2.2 Thuc tnh Font trong CSS

Thuc tnh Font cho php bn thay i font ch, m, kch c v kiu cch font ch ca
vn bn.
Cc Lu - Mo hu ch
Cc font ch th c xc nh bi tn ca chng trong CSS1. Lu rng nu mt trnh duyt
khng h tr thuc tnh font c ch nh th n s s dng font mc nh.
Thuc tnh
font
M t
Gi tr
Mt thuc tnh nh thit font-style

lp tt c thuc tnh cho mt font-variant
Trang 56
NN
4.0
IE
W3C
4.0
CSS1
Ti liu tham kho
Mn Thit k Web
font trong mt khai bo.
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family
Mt danh sch u tin ca family-name

cc h font cho mt thnh generic-family
phn.
4.0
3.0
CSS1
font-size
Thit lp kch c cho mt xx-small

font ch.
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
4.0
3.0
CSS1
font-stretch
Nhng rt gn hoc m normal

rng ca font.
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style
Thit lp kiu cch ca font. normal

italic
oblique
4.0
4.0
CSS1
font-variant
Hin th vn bn trong mt normal

font ch HOA NH hoc small-caps
mt font ch thng.
6.0
4.0
CSS1
Trang 57
CSS2
Ti liu tham kho

font-weight
Mn Thit k Web
Thit lp trng lng ca normal
font.
bold
bolder
lighter
100
200
300
400
500
600
700
4.0
4.0
CSS1
800
900
4.2.3 Thuc tnh List trong CSS

Thuc tnh List cho php bn thay i gia cc im nh du mc danh sch khc nhau, thit
lp mt nh nh mt im nh du mc danhsch v thit lp ni t im nh du mc
danh sch.
Thuc tnh
M t
Gi tr
NN IE
W3C
list-style
Mt thuc tnh ngn gn thit

lp cho ton b thuc tnh ca
danh sch trong mt khai bo
list-style-type
list-style-position
list-style-image
6.0 4.0 CSS1
list-style-image
Thit lp mt nh nh mt im
nh du mc danh sch.
none
url
6.0 4.0 CSS1
list-style-position
t mt im nh du mc danh inside
sch trong danh sch.
outside
6.0 4.0 CSS1
list-style-type
Thit lp kiu ca im nh du none

mc danh sch.
disc
circle
square
decimal
decimal-leadingzero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
4.0 4.0 CSS1
marker-offset
auto
length
Trang 58
CSS2
Ti liu tham kho
Mn Thit k Web
4.2.4 Thuc tnh Text trong CSS

Thuc tnh Text cho php bn kim sot din mo ca vn bn. N cng c th thay i mu
ca vn bn, tng hoc gim khong cch gia cc k t trong mt vn bn, cn chnh mt
vn bn, trang tr cho vn bn, tht dng u tin v nhiu hiu ng khc.
Thuc tnh
M t
Gi tr kh d
color
Thit lp mu cho ch
direction
Thit lp hng cho ch
letter-spacing
color
W3C
3.0
CSS1
CSS2
rtl
6.0
4.0
CSS1
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
5.5
CSS1
6.0
6.0
CSS1
length
left
text-align
4.0
IE
ltr
Tng hoc gim khong trng gia normal

cc k t
NN
Cn chnh vn bn trong mt thnh right

phn
center
justify
none
underline
text-decoration
Thm trang tr cho vn bn
overline
line-through
blink
text-indent
Tht dng u vn bn trong mt length

thnh phn
%
none
text-shadow
color
length
none
text-transform
Kim sot k t trong mt thnh phn
capitalize
uppercase
lowercase
white-space
word-spacing
Thit lp bao nhiu khong trng

trong mt thnh phn
normal
pre
nowrap
Tng hoc gim khong trng gia normal

cc t
length
4.2.5 Thuc tnh Padding trong CSS

Thuc tnh Padding xc nh khong trng gia phn t ng bao v ni dung. Khng cho
php cc gi tr m. Khong trng m ca nh, phi, di v tri c th c thay i mt
Trang 59
Ti liu tham kho
Mn Thit k Web
cch c lp s dng cc thuc tnh ring bit. Mt thuc tnh khong m ngn gn th cng
c to ra kim sot nhiu cnh cng lc.
Thuc tnh
padding
M t
Gi tr kh d
Mt thuc tnh ngn gn thit lp padding-top
NN
IE
W3C
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
4.0
CSS1
tt c cc khong m ch vi mt ln padding-right
khai bo.
padding-bottom
padding-left
padding-bottom
Thit lp khong m ti y ca mt length

phn t.
padding-left
Thit lp khong m pha tri ca length

mt phn t.
padding-right
padding-top
Thit lp khong m pha phi ca length

mt phn t.
Thit lp khong m trn nh ca
length
mt phn t.
4.2.6 Thuc tnh Background trong CSS

Thuc tnh nn cho php bn kim sot mu nn ca mt thnh phn, thit lp mt nh nh
nn trong vn bn, lp li mt nh nn theo chiu dc hoc chiu ngang v v tr ca mt nh
trn mt trang.
Thuc tnh
M t
Gi tr kh d
background-color
background-image
background-repeat
background-attachment
background-position
NN
IE
W3C
6.0
4.0
CSS1
background
Mt thuc tnh ngn gn

thit lp tt c cc
thuc tnh nn trong mt
khai bo.
backgroundattachment
Thit lp liu mt nh c scroll

ng c nh mt ch fixed
hay cun theo phn vn
bn cn li ca trang.
6.0
4.0
CSS1
background-color
Thit lp mu nn ca color-rgb
mt phn t
color-hex
color-name
transparent
4.0
4.0
CSS1
background-image
Thit lp mt nh nh url
nn ca trang.
none
4.0
4.0
CSS1
background-position
Thit lp im xut pht top left

ca mt nh nn
top center
top right
center left
6.0
4.0
CSS1
Trang 60
Ti liu tham kho
Mn Thit k Web
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat
Thit lp cch mt nh repeat

s c lp li nh th repeat-x
no.
repeat-y
no-repeat
4.0
4.0
CSS1
4.2.7 Thuc tnh Margin trong CSS

Thuc tnh cn l xc nh khong trng xung quanh cc phn t. N c th s dng c gi tr
m gi ln ni dung. Cc thuc tnh cn l nh, phi, y v tri c th c thay i mt
cch c lp s dng cc thuc tnh ring r. Mt thuc tnh cn l nhanh c th c dng
thay i tt c cc l mt ln.
Lu v trnh duyt: Netscape v IE thit lp mc nh l cho th body l 8px. Trnh duyt
Opera khng thit lp! thay th, Opera p dng mt khong m l 8px, v th nu mt
ngi mun cn chnh l cho ton b mt trang v hin th mt cch ng n trong Opera,
th khong m cho body cng phi c thit lp.
Thuc tnh
margin
M t
Gi tr kh d
Mt thuc tnh nhanh margin-top

thit lp thuc tnh cho l margin-right
trong mt khai bo.
margin-bottom
NN
IE
W3C
4.0
4.0
CSS1
4.0
4.0
CSS1
margin-left
margin-bottom
Thit lp l y ca mt auto
phn t.
length
%
margin-left
Thit lp l tri ca mt
phn t.
auto
length
%
4.0
4.0
CSS1
margin-right
Thit lp l phi ca mt
phn t.
auto
length
%
4.0
4.0
CSS1
margin-top
Thit lp l nh ca mt
auto
length
%
6.0
4.0
CSS1
phn t.
BI THC HNH CHNG 4
Trang 61
Ti liu tham kho
Mn Thit k Web
Bi tp 1
<html>
<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 {
color: blue;
font-size: 48px;
}
</style>
</head>
<body>
<h1>48 Pixel und Rot!</h1>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Ta mun lm cho on vn
c mu sc v kch thc th ta s lm nh sau:
h1 {
color: red;
font-size: 48px;
}
Bi tp 2
<html>
<head>
body { background-color: yellow }
h1 { background-color: #00ff00 }
h2 { background-color: transparent }
p { background-color: rgb(250,0,255) }
</style>
</head>
<body>
<h1>This is header 1</h1>
<p>This is a paragraph</p>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to mt hnh nn v t
mu cho ch ta lm nh sau:
body {
background-color: yellow
}
h1 {
Trang 62
Ti liu tham kho
Mn Thit k Web
background-color: #00ff00
}
h2 {
background-color: transparent
}
p {
background-color: rgb(250,0,255)
}
Bi tp 3
<html>
<head>
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
<span class="highlight">This is a text.</span>
</p>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to hightlight cho on
text ta lm nh sau:
span.highlight
{
background-color:yellow
}
Trang 63
Ti liu tham kho
Mn Thit k Web
Bi tp 4
<html>
<head>
h1 { font-size-adjust: 0.50 }
p { font-size-adjust: 0.60 }
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to font cho ch ta lm
nh sau:
p { font-size-adjust: 0.60 }
Bi tp 5
<html>
<head>
p{
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to ng vin ta lm
nh sau:
p {
}
p {
border: medium double rgb(250,0,255)

border-bottom: medium solid #ff0000
}
p {
border-right: medium solid #ff0000
}
Trang 64
Ti liu tham kho
Mn Thit k Web
Bi tp 6
<html>
<head>
p{
border: red solid thin;
outline: green dotted thick
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to ng vin ngoi
ca on text ta lm nh sau:
p {
border: red solid thin;
outline: green dotted thick
}
Bi tp 7
<html>
<head>
p.topmargin { margin-top: 5cm }
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun canh l cho on text
lm nh sau:
p.topmargin
{
margin-top: 5cm
}
Trang 65
Ti liu tham kho
Mn Thit k Web
Bi tp 8
<html>
<head>
ul.disc { list-style-type: disc }
ul.circle { list-style-type: circle }
ul.square { list-style-type: square }
ul.none { list-style-type: none }
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to mt list ta lm nh
sau:
ul.disc{
list-style-type:
}
ul.circle{
list-style-type:
}
ul.square{
list-style-type:
}
ul.none{
list-style-type:
}
disc
circle
square
none
Trang 66
Ti liu tham kho
Mn Thit k Web
Bi tp 9
<html>
<head>
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
To css
y l cch vit CSS bng cch nhng css trc tip vo HTML. Mun to border dng th
<table> ta lm nh sau:
table
{
border-collapse: separate;
empty-cells: show
}
Bi tp 10
Hy to trang Web c menu nh sau (to tp tin hormenu.css)
Trang 67
Ti liu tham kho
Mn Thit k Web
Bi tp 11
Hy to trang Web c cc tab nh sau:
Trang 68
Ti liu tham kho
Mn Thit k Web
CHNG 5
THIT K WEB DNG FORM V JAVASCRIPT
Tm tt
Mc tiu
Cc mc chnh
Bi tp
bt buc
Bi tp
lm thm
5.1 HTML form
cp hc vin kin thc v
5.2 Cn bn v ngn ng Javascript
cc th HTML nng cao
Chng 5.
trong vic thit k giao
cui
5.
din Web nh: form, danh

sch la chn, check box,
hp son tho vn bn
Trang 69
Chng
Ti liu tham kho
Mn Thit k Web
5.1 HTML FORM

Cc HTML Form c th c cc hp vn bn, hp danh sch la chn, nt bm, nt chn...
5.1.1 TO FORM
to ra mt form trong ti liu HTML, chng ta s dng th FORM vi c php nh sau:
C php:
<FORM
ACTION
= ulr
METHOD
= GET | POST
NAME
= name
TARGET
= frame_name | _blank | _self
>

<INPUT ...>
<INPUT ...>
</FORM>
Trong
ACTION
a ch s gi d liu ti khi form c submit (c th l a ch

ti mt chng trnh CGI, mt trang ASP...).
METHOD
Phng thc gi d liu.
NAME
Tn ca form.
TARGET
Ch nh ca s s hin th kt qu sau khi gi d liu t form

n server.
t cc i tng iu khin (nh hp vn bn, kim tra, nt bm...) vo trang Web

C php th INPUT:
<INPUT
ALIGN = LEFT | CENTER | RIGHT
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD |
RADIO | RESET | SUBMIT | TEXT
VALUE = value
>
5.1.2 TO MT DANH SCH LA CHN

C php:
<SELECT NAME="tn danh sch" SIZE="chiu cao">

Trang 70
Ti liu tham kho
Mn Thit k Web
<OPTION VALUE=value1 SELECTED> Tn mc chn th nht

<OPTION VALUE=value2> Tn mc chn th hai

</SELECT>
5.1.3 TO HP SON THO VN BN

C php:
<TEXTAREA
COLS=s ct
ROWS=s hng
NAME=tn
>
Vn bn ban u
</TEXTAREA>
5.2 CN BN V NGN NG JAVASCRIPT

Ngn ng Script l mt ngn ng lp trnh nhm b sung tnh nng ng ca trang Web
(Dynamic HTML). Ngn ng ny gip gim x l cho Server thay v dng CGI script ti
Server th ta dng Java script ti Client. Cc ngn ng script thng dng nh: javascript
(NetScape), jscript (Microsoft), VBScript (Microsoft). VBScript c li th trong mi
trng Windows, dng cho cc ActiveX control v rt ging VB. VBScript cng l ngn
ng dng cho Server, n phi hp vi nhng i tng Server to ra nhng trang Web
ng t Server (v d nh ASP).
5.2.1 Tng quan Java Script
Khi cn thit k mt trang Web ng nh my tnh tay (Calculators), hin th gi (Display
time), hin th trng thi thng tin phn hi(Feedback), gii tr trn web (Entertainment) th
ta dng cc ngn ng script ny, l Java Script.
C php:
Gn ging nh cc ngn ng lp trnh khc nh Pascal, C++, Java
Khai bo v dng bin
var x = 7
var y,z = "19"
var lk = "lucky"
5 + x // gi tr l 12
lk + z // gi tr l "lucky19"
lk + x // gi tr l "lucky7"
x + z // gi tr l 26
Java script t ng chuyn kiu cho ph hp v t gn gi tr ban u l 0 khi ta khai bo bin.
Trang 71
Ti liu tham kho
Mn Thit k Web
Cc loi d liu trong Java Script
S nh -5, 0 hoc 3.3333

Chui nh "Click Here" hoc "JavaScript"
Gi tr logic nh: true hoc false
JavaScript element xem nh l mt hm hoc mt i tng
Gi tr null
Cc hng
H thp phn 123, -3434

H 8(octal): 017
H 16(hexadecimal): 0x12EF5
Kiu d liu s trong java script dng 32 bit
Chui
Khi to, php ton trn chui

\t tab
\n return
\b backspace
i kiu
stringthing + numberthing= string

numberthing + stringthing= number
Cc php ton: +, -, *, /, %, ++, --, = =, !=, <, <=, >, >=,
Cc v d
x = 4 + y;
y = 5.5 - z;
z = 10 / w;
w = 1.4e5 * v;
n = -m;
y = ++x;
z = x++;
if (x = 3) { }
(x < 17) && buttonPressed && (z == "Meta")
(x < 17) || buttonPressed || (z == "Meta")
(x < 25) && beaupage()
(x - 3.0) < epsilon || (3.0 - x) < epsilon
Ch thch
/* */
//
Trong html 
Trang 72
Ti liu tham kho
Mn Thit k Web
Cu trc iu khin
if (iu kin) { cu lnh}
if (iu kin) { cu lnh} else {cu lnh}
Cu trc While:
while (iu kin) { cu lnh}
5.2.2 S kin trong html v java script

Cc tc ng thng thng ln trang web l:
Chn mt lin kt.
Di chuyn n trang trc hoc trang sau trong cc trang duyt.
M mt trang Web mi dng chc nng New Window.
Thot khi trnh duyt web.
Cc s kin thng gp i vi cc i tng l:
Di chuyn chut
Thay i trng thi.
Chn on m java script trong html:
<SCRIPT LANGUAGE="LangName" [SRC="URL"]>

<SCRIPT LANGUAGE="JavaScript" SRC="jscode/click.js"> </SCRIPT>
n ni dung source i:
<SCRIPT LANGUAGE="JavaScript">
<!-function dontclickme()
alert("Ban da click chuot");
return(false);
}

</SCRIPT>
Mt trang Web hon chnh dng code Jaca Script: v d to mt nt Chao, khi click vo
nt ny xut hin thng bo Chao cac ban
<HTML>
<HEAD>
<TITLE>Chao ban</TITLE>
<!-function dontclickme() {
alert("Chao cac ban");
}

</SCRIPT>
</HEAD>
<BODY>
Trang 73
Ti liu tham kho
Mn Thit k Web
<FORM>
<INPUT TYPE="button" NAME="chao" VALUE="Chao!"
onClick="dontclickme()">
</FORM>
</BODY>
</HTML>
Ta c th vit lnh Java script trc tip vo s kin:

<HTML>
<HEAD>
<TITLE>Chao ban</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="chao" VALUE="Chao!"
onClick="alert('Chao cac ban');">
</FORM>
</BODY>
</HTML>
Bt s kin ca List: v d kim tra s thay i gi tr listbox dng hm onChange()

<HTML>
<HEAD>
<TITLE>Su kien List</TITLE>
<!-function Thongbao(str) {
alert(str);
}

</SCRIPT>
</HEAD>
<BODY>
<SELECT NAME="Ten" onChange="Thongbao('Co su thay doi')">
<OPTION SELECTED>Lan</OPTION>
<OPTION>Cuc</OPTION>
<OPTION>Hong</OPTION>
</SELECT>
</BODY>
</HTML>
Bt s kin ca document (dng khi cn gi hm lc trang Web va m hoc khi ng trang Web):
<BODY onLoad="loadfunc()" onUnload="unloadfunc()">
Trang 74
Ti liu tham kho
Mn Thit k Web
BI THC HNH CHNG 5

1/ To Form cha hp vn bn
M code HTML tham kho

<html>
<head>
<title>Text Fields</title>
</head>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
2/ To Form cha nt radio
Trang 75
Ti liu tham kho
Mn Thit k Web

<html>
<head>
<title>Nut radio</title>
</head>
<body>
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
</body>
</html>
3/ To Form cha checkbox

<html>
<head>
<title>Check Box</title>
</head>
<body>
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
</body>
</html>
Trang 76
Ti liu tham kho
Mn Thit k Web
4/ To form cha danh sch la chn

<html>
<head>
<title>Drop Down List</title>
</head>
<body>
<form action="">
cars:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
5/ To form cha hp son tho vn bn
Trang 77
Ti liu tham kho
Mn Thit k Web

<html>
<head>
<title>Text Area</title>
</head>
<body>
<form action="">
<p> kin ca c gi: </p>
<textarea rows="10" cols="30">
G kin vo ny. </textarea>
</form>
</body>
</html>
6/ To form cha nt nhn

<html>
<head>
<title>Button</title>
</head>
<body>
<form action="">
<input type="button" value="Send...">
</form>
</body>
</html>
Trang 78
Ti liu tham kho
Mn Thit k Web
7/ To Form sau

<html>
<head>
<title>title goes here</title>
</head>
<body>
<form action="mailto:ngkimthu@hcm.vnn.vn" method="POST" enctype="text/plain"><br>
Your first name: <input type="text" name = "first" size="15" maxlength="60"><br>
Your student ID number: <input type="text" name = "ID"size="15" maxlength="60"><br>
<p>What age bracket are you in:<br>
<input type="radio" name="age" value="118">1 to 18 years<br>
<input type="radio" name="age" value="1925">19 to25 years<br>
<input type="radio" name="age" value="2540"> 25 to40 years<br>
<input type="radio" name="age" value="40"> Over 40<br>
</p>
<p>The best time for me to read email is <br>
Trang 79
Ti liu tham kho
Mn Thit k Web
<input type="checkbox" name="time" value="Morn">Morning <br>

<input type="checkbox" name="time" value="Afte"> Afternoon<br>
<input type="checkbox" name="time" value="Nigh"> Night<br>
<input type="checkbox" name="time" value="Mid">Midnight to dawn<br>
</p>
<br> <input type="image" src="images/submit.gif" alt="Submit!">
<br> <input type="reset" value ="clear your answers and start again.">
</form>
</body>
</html>
8/ To Form sau
9/ To Website cha Form sau
Trang 80
Ti liu tham kho
Mn Thit k Web
BI TP JAVASCRIPTS
Phn 1: Bi tp v d mu
Cu 1: y l v d s dng cc tag trong html
<html>
<head>
<title>Cau 1</title>
</head>
<body>
<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>
</body>
</html>
Cu 2: y l v d s dng bin trong JS

<html>
<head>
</head>
<body>
var name="QUOC PHUONG";
document.write("<b>"+name+"</b>");
document.write("<br>");
name="05TH1A";
document.write(name);
</script>
</body>
</html>
Cu 3: y l v d s dng Textbox v Chng trnh con

<html>
<head>
</head>
Trang 81
Ti liu tham kho
Mn Thit k Web
<body>
function chay(){
var a;
a=window.document.cau3.T1.value;
alert(" so ban vua nhap la: "+a);
}
</script>
</head>
<body>
<form name=cau3>
<input type=text name=T1>
<input type=button name=c value="chay thu" onclick="chay()">
</form>
</body>
</html>
Cu 4: V d s dng cu lnh IF
<html>
<head>
</head>
<body>
function chay(){
var a;
a=window.document.cau4.T1.value*1;
if ((a%2)==0) { alert(a+ " la so chan ");}
else {alert(a+" la so le ");}
}
</script>
</head>
<body>
<form name=cau4>
<input type=text name=T1>
<input type=button name=c value="chay thu" onclick="chay()">
</form>
</body>
</html>
Trang 82
Ti liu tham kho
Mn Thit k Web
Cu 5: V d s dng i tng ngy thng nm trong JS

<html>
<body>
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else{
document.write("<b>Hello World!</b>");
}
</script>
<p>day la vi du su dung cau lenh if..else if...else .</p>
</body>
</html>
Cu 6: V d s dng cu lnh switch

<html>
<body>
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Friday");
break;
case 6:
document.write("Saturday");
break;
case 0:
document.write("Sunday");
break;
default:
document.write("Chuc dau tuan vui ve!");
}
</script>
</body>
</html>
Trang 83
Ti liu tham kho
Mn Thit k Web
Cu 7: V d s dng confirm
<html>
<head>
function disp_confirm()
{
var r=confirm("Press a button");
if (r==true) {
document.write("You pressed OK!");
}
else {
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()" value="Display a confirm box" />
</body>
</html>
Cu 8: V d s dng prompt
<html>
<head>
function disp_prompt()
{
var name=prompt("VUI LONG NHAP TEN CUA BAN","LE THANH LAM");
if (name!=null && name!="")
{
document.write("XIN CHAO " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" />
</body>
</html>
Trang 84
Ti liu tham kho
Mn Thit k Web
Cu 9: V d s dng kiu String

<html>
<body>
var str="Hello world!";
document.write(str.indexOf("Hello") + "<br />");
document.write(str.indexOf("World") + "<br />");
document.write(str.indexOf("world")+ "<br />");
document.write(str.toUpperCase()+ "<br />");
document.write(str.length+ "<br />");
document.write(str.replace("w","W") + "<br />");
</script>
</body>
</html>
Cu 10: V d s dng kiu ARRAY

<html>
<body>
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
Cu 11: V d s dng kiu thit lp thi gian

<html>
<head>
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
Trang 85
Ti liu tham kho
Mn Thit k Web
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>
Cu 12: V d khc v cch s dng thit lp thi gian

<html>
<head>
function timedText()
{
var t1=setTimeout("window.document.lam.txt.value='2 seconds!'",2000);
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000);
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000);
}
</script>
</head>
<body>
<form name=lam>
<input type="button" value="Display timed text!" onClick="timedText()">
<input type="text" id="txt">
</form>
</body>
</html>
Cu 13: ng h
<html>
<head>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
Trang 86
Ti liu tham kho
Mn Thit k Web
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10) {
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Cu 14: Hiu ng nh
<html>
<head>
function mouseOver()
{
document.b1.src ="a.gif";
}
function mouseOut()
{
document.b1.src ="b.gif";
}
</script>
</head>
<body>
<a href="http://www.dayhoctructuyen.com" target="_blank">
<img border="0" alt="Chao ban" src="a.gif" name="b1" width="206" height="106"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>
Cu 15: S dng Select option

Trang 87
Ti liu tham kho
Mn Thit k Web
<html>
<head>
<script language="JavaScript">
var phone=new Array();
phone["lam"] ="090540468";
phone["duc"] ="0905274747";
phone["thinh"] ="0904909086";
phone["hien"] ="0905146560";
phone["daotao"] ="05113519929";
function disphone(thephone,entry)
{
var num=thephone[entry];
window.document.myform.numbox.value=num;
}
</script>
</head>
<body>
<form name ="myform">
<select onChange="disphone(phone,this.options[this.selectedIndex].value);">
<option value="lam"> L Thanh Lm
<option value="duc"> Nguyn inh minh c
<option value="thinh"> Trn Vn thnh
<option value="hien"> Th Hin
<option value="daotao"> Phng o to
</select>
<input type="text" name="numbox" value="" disabled >
</form>
</body>
</html>
Phn 2: Bi tp t lm
Bi 1:
Vit chng trnh nhp vo 2 s m(dng), n(ct) (dng hm prompt nhp). Sau xut ra
trang Web mt Table theo dng sau:
V d (m=3,n=4)
11
12
13
14
21
22
23
24
31
32
33
34
Bi 2:
Trang 88
Ti liu tham kho
Mn Thit k Web
Vit chng trnh nhp vo M s SV, H tn, Lp (dng hm prompt nhp) Sau hin
th thng tin va nhp vo ra bng theo dng sau:
Bi 3:
Vit chng trnh nhp vo s 3 s m, n , p (dng hm prompt). Sau to ra mt Form gm
c m phn t Text , n nhm radio mi nhm c 2 ty chn cc nt radio c gi tr ln lt l
1->2*n , v 1 Dropdown menu(Listbox) c p ty chn mi option c gi tr ln lt l 1->p
vText ca option l Text1 ->Textp.
(Lu l cc phn t trn Form phi c tn khc nhau.)
Bi 4:
Vit chng trnh to mt Form nh sau:
Sau nhp liu vo Form khi bm nt Nhap(button), ri hin th kt qu ra dng nh sau:

ly d liu trng H tn hin th vo YourName, Mt khu vo YourPWD
Bi 5:
Trang 89
Ti liu tham kho
Mn Thit k Web
Yu cu nh bi 4 nhng kim tra d liu cc trng phi khng rng v trng Password c
t nht 6 k t nu trng nokhng tha yu cu th hin th thng bo v a con tr v
yu cu ngi s dng nhp li d liu.
Bi 6 :
Yu cu nh bi 4 nhng thm iu kin nh sau khi Form Load ln th con tr t trong
trng UserName v nt Nhap ch khng cho php chn . Khi ngi s dng ri khi
trng UserName nu kim tra trng ny khng rng th nt Nhap c sng ln (cho php
chn)
Bi 7: Thit k trang nh sau:
Bm vo nt Play th chng trnh thay i hnh thay i mt cch ngu nhin (2 giy i 1
hnh) Bm stop th dng li
Bi 8:
Thit k trang nh sau. Khi ngi s dng nhp vo trng s lng v ri khi trng ny
th Tng thnh tin s c cp nht (lu nu nhp vo khng phi l s th thng bo yu
cu nhp li)
Bi 9:
Trang 90
Ti liu tham kho
Mn Thit k Web
Cho trang Web sau
Trong n gm cc ty chn sau:

Mua vo, Bn ra l trng textbox
Loi xe l Dropdown Menu gm cc option
Text
Value
Toyota
../images/mer2.jpg
KIA
../images/otoa1.jpg
Ford
../images/t2.jpg
Cp nht cho: gm 2 ty chn ln lt c gi tr l 1 , 0 mc nh khng c chn nt no.

Update, State l nt button.
Yu cu x l:
1) Khi trang load ln th con tr nhp liu trong trng Mua vo v nt State ch
khng cho php chn.
2) Khi di chuyn con tr ra khi trng Mua vo nu nh gi tr trng ny l s v
khng rng th nt State sng ln.
3) Khi Click vo mc chn hnh qung co th s th hin hnh bn vng bn.
4) Khi bm vo nt Update v nu nt radio Vng c chn th cp d liu Bng tin
th trng trong mc Vng cn ngc li th cp nht mc USD tng ng vi
trng Mua vo ca ct Mua vo v trng Bn ra ca ct Bn ra (Dng inner
cp nht)
Bi 10:
Trang 91
Ti liu tham kho
Mn Thit k Web
Cho trang web sau:
Yu cu: (T thm cc option trong Listbox v t gi tr trong radio)

Hy nhp d liu trn Form sau bm Dang ky th d liu s hin th vo cc ct tng ng
a,b,c,d .(Lu l d liu trc vn cn) dng:
Bi 11:
Thit k Form nh sau:
Vit chng trnh x l theo yu cu sau:

Trang 92
Ti liu tham kho
Mn Thit k Web
1. Khi trang load ln th nt Nhap ch m v con tr nhp liu h tn.

2. Khi ri khi trng Lp nu trng h tn v lp khc rng th nt Nhap sng ln.
3. Bm nt Nhap th d liu hin th vo bng Danh Sach Sinh Vien bn di v
nt Nhap li m
Bi 12:
To mt biu mu mua hng trc tuyn nh hnh v sau:
Hnh 1
-
Hy thc hin vic kim tra d liu nh sau:

o Nu ngi s dng khng in thng tin vo cc trng: H v tn m, Tn, a
ch, Thnh ph
o S in thoi phi in theo mu: (034) 344-5555
o Nu ngi s dng cha check vo : Chn vo y nu a ch ca bn khc
vi a ch in trong email th text bn di s b m i. Khi ngi s dng
check vo th s hin ra bn di cho php a a ch vo.
Trang 93
Ti liu tham kho
Mn Thit k Web
o Khi ngi s dng nhn chut vo in a ch th dng ch: Hy in a ch

giao hng vo y nu khc trn s t ng c xa i.
o Kim tra thi gian ht hiu lc (01/99)
-
Sau khi cc d liu c in ng. Nu ngi s dng nhn vo nt ng th

m mt ca s mi vi cc thng tin in vo nh hnh v 2.
Hnh 2
o Nu ngi s dng nhn Cancel th chuyn li form mua hng vi yu cu focus
vo H v tn m.
o Nu ngi s dng nhn OK th thng bo nh hnh 3 hin ra.
Hnh 3
Trang 94
Ti liu tham kho
Mn Thit k Web
CHNG 6
THIT K WEB S DNG DREAMWEAVER
Tm tt
Mc tiu
Cc mc chnh
Bi tp
bt buc
Bi tp
lm thm
6.1 nh dng Webpage
cp hc vin kin thc v
6.2 Table
cch s dng phn mm
6.3 Form
Chng 6.
DreamWaver trong vic h 6.4 Layer
cui
6.
tr thit k mt Website
6.5 Flash button, flash text, rollover
nhanh chng v p
images, jump menu

6.6 B sung multimedia cho trang
web (m thanh, phim nh)
6.7 Frameset
6.8 Cascade style sheet- template
Gii thiu
Trang 95
Chng
Ti liu tham kho
Mn Thit k Web
Dreamweaver MX l mt cng c thit k web chuyn nghip, phn ct li ca n l

HTML.
Dreamweaver MX l mt cng c trc quan, trong c th b sung Javascript, biu mu,

bng biu v nhiu loi i tng khc m khng cn vit mt on m no.
Dreamweaver MX c th thit k bng ch Design view hoc Code view hoc Code
and Design.
Ci t
Dreamweaver MX 2004 l mt chng trnh trong b Macromedia MX, bn nn ci t

trn my trn b Macromedia MX
Sau khi ci t, khi ng Draemvaerver MX: Start Programs Macromedia

Macromedia Dreamweaver MX 2004
Mn hnh Dreamweaver
1. Insert Bar: Gm cc chc nng tin ch dng chn cc i tng vo trang web
Common: Chn cc i tng: Image, Flash, Date, Template,
Layout: Cha cc cng c trnh by trang, gm 3 ch : Standard,

Expended, Layout
Forms: Cha cc cng c to Form
Text: Dng nh dng vn bn
HTML: cha cc cng c to trang web bng code view
2. Document Toolbar: Cha cc nt cho php xem trang web dng Design hay dng Code
Show code view: Xem dng trang HTML
Show Design view: Xem trang dng thit k, s dng cc cng c ca Dreamwerver
Show code and design view: Chia ca s lm 2 phn: phn trn dng code view, phn
di dng Design view
Title: tiu ca trang Web
Preview/Debug in Browser:Xem kt qu trang web thng qua trnh duyt web
Document Window: Ca s dng to v hiu chnh trang Web
3. Properties Inspector: Hin th cc thuc tnh ca cc i tng ang c chn, ng thi

cho php chnh sa cc thuc tnh
4. Panel groups: nhm cc Panel cho php qun l cc i tng trong trang Web
Bt / tt cc thanh Panel: Chn menu Window Chn thanh Panel tng ng
M rng cc thanh Panel: Click vo mi tn gc tri ca mi Panel
5. Status bar: Thanh trng thi, nm di y ca Document Window, hin th Tag Selector,
Window size, Document size v Download time.
6.1 NH DNG WEBPAGE

To mi Website
Trang 96
Ti liu tham kho
Mn Thit k Web
Trong Document Window, chn Site Manage sitesNew Site xut hin hp
thoi Site Definition Chn Tab Advance, trong mc Local info:
Site name: t tn WebSite
Local Root Folder: Khai bo ng dn ca folder lu tr Website trn a cng bng

cch
o Nhp ng dn hoc
o Click vo biu tng Folder, Ch ng dn n folder lu website
Default Images folder: khai bo ng dn n th mc cha cc hnh nh ca Website,

th mc ny phi nm trong Local root Folder khai bo trn, tt c cc hnh nh trong
trang web mc nh c lu trong th mc ny
Kim tra website to
Mt website sau khi to thnh cng th trong site panel phi

c nhnh th mc nh sau trong cc biu tng file/folder
c mu xanh
M mt site to
Cch 1: Click vo menu hin th tn Site trn Toolbar ca

Site Panel, chn tn Site mun m
Cch 2: Chn menu Site Manage Sites Chn tn Site

mun m Done
Hiu chnh Site
Chn menu Site Manage Sites
Chn tn Site cn hiu chnh Click nt Edit
Xut hin hp thoi Site Definition thc hin hiu chnh OK Done
6.2 TABLE
Cch k bng: Insert/Table, hoc click nt Table.
Rows: s dng cn chn.
Columns: s ct cn chn.
Width: chiu rng ca bng theo s im pixels hoc phn trm
Border: dy ca ng vin bng.
Cell Padding: khang cch ni dung v bin .
Cell Spacing: khong cch gia cc .
Trang 97
Ti liu tham kho
Mn Thit k Web
Hiu chnh bng
Chn thm dng, ct vo bng:

o t du nhy ti v tr cn chn
o Modify Table Insert row/Insert column
Ct mi mc nh chn vo bn tri du nhy
Dng mi mc nh chn vo bn trn du nhy
Xo dng, ct, bng

o Chn dng, ct, bng cn xa
o Edit/Cut. (Ctrl +X) hoc nhn delete
Ni cc trong bng:
o Chn cc cn ni
o Modify Table Merge Cells.
Tch cc trong bng:

o Chn cn tch
o ModifyTable Splits Cell
Split Cell into Columns: tch thnh nhiu theo ct.
Split Cell into Rows: tch thnh nhiu theo dng.
Number of columns, Rows: xc nh s cn tch theo ct, dng.
Thuc tnh ca bng
Chn table m Properties inspector.

Trang 98
Ti liu tham kho
Mn Thit k Web
o Rows, Cols : s dng, s ct.

o W, H : chiu rng, chiu cao ca bng.
o Cellpad : khong cch vn bn n trong bng.
o Cellspace : khong cch gia cc trong bng.
o Align : canh l bng, phi, tri, gia.
o Border : dy nt ng vin bng.
o Bg color : mu nn ca bng.
o Bg image : nh nn bng.
o Brdr color : mu ng vin bng.
6.3 FORM
TO FORM
Chn menu Insert/ Form.
ng khun vin khng lin nt mu i din cho gii hn trong form. Mi thnh
phn ca form u phi nm trong khun vin ny.
Trong form cn thit phi c 2 nt c bit SUBMIT v RESET
CC I TNG TRN FORM
C 2 cch chn cc i tng vo form
Cch 1:Chn tab form trn Insert Panel.
Cch 2:Chn menu Insert FormChn i tng
1. TEXT FIELD: Hp vn bn
Cch to:
t con tr trong ng vin form.
Chn thc n Insert Form Text field

Trang 99
Ti liu tham kho
Mn Thit k Web
Thuc tnh caTextfield :
Chart Width : S k t cho chiu di .
Max Chars : S k t nhiu nht c th nhn.
Init Value : Ni dung khi to ca nhp liu.
Single Line : nhp liu mt dng.
Multi line : nhp liu nhiu dng.
Password : nhp cc loi mt m, khi nhp tng k t nhp c thay bng du *.
2. RADIO BUTTON
Trong 1 nhm cc nt chn ch c chn 1 ty chn. Cc nt radio thuc cng nhm

phi c cng tn nhm (Group), nhng khc nhau v gi tr(value).
Cch to:
t du nhy ti v tr mun chn
Chn Insert Form radio Button
Thc tnh ca Radio button:
Checked value : Gi tr tng nt n trong nhm.
Initial State : trng thi ban u ca nt.
Checked: Nt c chn.
Unchecked: Nt cha c chn.
3. RADIO GROUP: To mt nhm nt radio
Cch to:
Chn InsertFormRadio
Thc tnh ca Radio group:
Name: Nhp tn nhm
du +: thm nt, du -: xo nt.
Label l tn nhn nt.
Value l gi tr gi v cho ch web.
Layout Using: B cc ang s dng
Line break: Cc nt xung dng
Table: Cc nt nm trong mt bng.
4. CHECKBOX: To mt nhm cc ty chn, cho php chn nhiu ty chn cng mt lc hoc
khng chn g c.
Cch to:
Chn Insert Form Objects Checkbox.
Hoc click nt Checkbox trn thanh cng c

Trang 100
Ti liu tham kho
Mn Thit k Web
5. LIST/ MENU (Dropdown menu)
Chn menu Insert/ Form object/ List/ Menu.
Trong thanh properties :
Mc Type:
o Menu : Dropdown menu
o List: Listbox
Click nt List Values: Nhp nhn v gi tr cho List/Menu

o + thm mc, - xo mc chn.
6. TEXTAREA: TextArea dng nhp cc thng tin, d liu di gm nhiu dng, thng dng
cho cc ghi ch, kin, cm ngh, thc mc ca ngi duyt web.
Chn menu InsertForm object Textarea.
TextArea Properties:
Text field : tn nhp liu nhiu dng.

Trang 101
Ti liu tham kho
Mn Thit k Web
Char Width : S k t cho chiu di .
Num lines : S dng cn hin th.
Wrap : Vn bn t xung dng.
Init Value : Gi tr khi to ca
7. FILE FIELD
Gi km tp tin:Trong form, ngoi cc thng tin ngn gn m ngi tham quan c th nhp
trc tip, nu h mun gi mt on vn bn nhiu dng, hay mt hnh nh minh ha th ta
nn chn thm file field.y l thnh phn form gip gi km mt tp tin theo cc thng tin
nhp.
Chn menu InsertForm objectsFile field
8. BUTTON
Chn menu Insert Form objectButton.

Cc thuc tnh ca Button:
Button name: tn button
Value: Gn nhn trn button.
Action:
o Submit form.: nt submit
o Reset form: nt reset
o None: button do ngi s dng gn action do ngi s sng t to
9. IMAGE FIELD
Chn menu InsertImage field

Hoc click nt Image field trn thanh cng c
Image field properties:
ImageField:
o Submit chn nh lm nt submit
o Reset chn nh lm nt reset.
6.4 LAYER
Gii thiu
Layer l mt thnh phn mi trong thit k Web, n c th cha ni dung vn bn, hnh
nh xp chng ln nhau, ni trn trang v chuyn ng rt linh hot
Layer thng c s dng thit k trang c cc hiu ng c bit nh ch ri, nh bay,
im bt li ca Layer l khng hin th trn cc trnh duyt c nh IE4.0, Nestcape 4.0
Cch to Layer trn trang

C th to Layer bng mt trong cc cch sau:
Trang 102
Ti liu tham kho
Mn Thit k Web
Cch 1:
Chn Standard Mode
Click nt Draw Layer, drag chut v Layer
Cch 2:
Chn menu Insert Layout Objects Chn Layer
Hiu chnh Layer
Chn layer, Layer c chn s xut hin 8 Handle xung quanh
Thay i kch thc ca Layer:
Chn Layer cn hiu chnh kch thc
Click chut vo mt trong cc Handle, Drag chut thay i kch thc
Hoc nhp thng s trc tip vo Properties Inspector
Chn ni dung vo Layer:
Nu ni dung l vn bn th nhp trc tip vo Layer
Nu ni dung l hnh nh th drag chut chn hnh trong th mc Image th vo Layer

(hoc chn Insert Image)
Xp chng cc Layer:
Khi cn hin th nhiu nh trn trang, nhng khng ch, ta c th xp chng ln nhau,
sau cho xut hin tng lp mt hoc cho tng lp Layer bay ra khi mn hnh, iu
ny c th thc hin c khi kt hp Layer, Timeline v Behaviors
Th t cc Layer:
Mi lp Layer u c thuc tnh Z-Index hin th th t ca cc lp Layer, lp Layer sau

s che khut lp Layer trc
Nu n c cng to , c th thay i trnh t cc lp layer bng cch:

o Chn Lp Layer cn thay i th t
o Trong Properties Inspector, nhp th t mi trong mc Z-index
n hin mt Layer:
Khi khng mun xem Layer no th n Layer bng mt trong cc cch sau:
o Trong Properties Inspector, ti thuc tnh Vis: chn Hidden.
o Hoc m Layer Panel.
Trang 103
Ti liu tham kho
Mn Thit k Web
6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU

Chn Flash
Insert Media Flash
Chn tp tin kiu .swf
Ti v tr chn xut hin biu tng Flash
Hiu chnh thuc tnh ca Flash: chn hnh flash hiu chnh thuc tnh trong thanh
properties inspector
Chn nt Flash
Macromedia Dreamweaver v Macromedia Flash l mt b chng trnh c th s dng d
liu qua li vi nhau rt thun tin, do c th dng cc nt Flash c thit k sn lm
nt lin kt trong Dreamweaver
Cch to:
Chn InsertMedia Flash Button

o Sample: V d mu nt Flash
o Style: danh sch tn cc nt mu Flash
o Button Text: vn bn trn nt Flash
o Font: kiu ch, Size: C ch
o Link: a ch lin kt n
o Target: Tn khung trang lin kt
o Bg: Mu nn
Chn nt Flash Text
Insert Media Flash Text

Trang 104
Ti liu tham kho
Mn Thit k Web
Hp thoi Insert Flash Text, nhp vo cc thng s:

o Font, Size: Font v c ch
o Color: mu ch
o Rollover Color: Mu ch thay i chi r chut qua nt
o Text : Ni dung vn bn lm nt
o Link: a ch trang Web lin kt n
o Target: Tn khung trang
o Bg Color: mu nn ca vn bn nt
Chn nt bin i hnh (Rollover Image)
Trc ht phi c 2 tp tin nh, n1.gif mu cam, n2.gif mu xanh trong folder Images ca
Site.
t du nhy ti v tr cn chn nt ng
Insert Image ObjectsRollover Image, xut hin hp thoi Rollover Image
o Original Image: nh gc
o Rollover Image: nh khi r chut vo
o Alternate Text: cu ghi ch km theo
o When Click, go to URL: a ch ca trang lin kt n
nh nn trang
nh nn l nh t ng lp y trang Web. Khi thit k, bn nn chn nhng mu nn tht

nht, ch sm hoc nn tht sm, ch mu sng
nh nn vi s Kb cng nh th trang hin th cng nhanh
Cch to nh nn:
t tr trong trang
Chn Modify Page Properties

o Bacground Images : nhp ng dn n tp tin nh lm nn
o Repeat: Chn kiu lp
Jump Menu
Trang 105
Ti liu tham kho
Mn Thit k Web
Chc nng:
Cng c xp gn danh sch cc lin kt li trn mt dng, khi cn chn lin kt no, ngi
tham quan th danh sch lin kt xung, ri chn trong s . Cch ny gip nhng trang web
c qu nhiu lin kt c th thu hp din tch, to thng thong cho web hn. i khi vic
chn lin kt ny rt nhy, n s nhy nhanh n cc trang lin kt, khc phc, ta c th
chn thm nt GO k bn. Chn lin kt trong danh sch xong phi nhn nt GO xc nhn.
Cch to:
Chn thc n Insert Form Objects Jump Menu.
Hp thoi insert Jump Menu
Text: t nhn cho jum menu
When selected, go To URL : Nhp tn trang lin kt Kt qu s xut hin trn Menu
Items.
Du + hoc thm hoc xo mt Menu Item.
Mi tn ln hoc xung thay i trnh t cc Menu Items.
Menu items: danh sch cc menu c nhp trong text.
Open URL In: Target ca khung chnh hin th trang.
Menu name: Tn ca Jum Menu.
Select Frist Item After URL Change: Chn Item u tin sau khi lin kt.
Insert Go Button After Menu: chn thm nt GO.
Trang 106
Ti liu tham kho
Mn Thit k Web
Hiu chnh Jump Menu
Khc vi cc thnh phn khc ca form, khi cn hiu chnh tn Menu Item, hay lin kt
tng ng, ta khng xem Properties Inspector m phi m Behaviors.
Chn Jump Menu.
Chn menu Window Behaviors xut hin Design Panel ca Behaviors.
Double click vo tn Action: Jump Menu.
Hp thoi Jump menu xut hin cho php hiu chnh.
Kim tra lin kt ca Jump Menu:
kim tra lin kt ca Jump Menu, ta cn xem trang trong trnh duyt, ri n vo tn
Menu Item trong Jump Menu lin kt i.
File Preview in browser, hoc F12.
Click vo dng Menu Item, tn trang lin kt n.
6.6 B SUNG MULTIMEDIA CHO TRANG WEB (M THANH, PHIM NH)

Chn nh vo trang
nh trong th mc Images ca Site:
t du nhy ti v tr cn chn nh
Drag chut ko tp tin nh trong Site Panel th vo trang
nh ngoi Site:
Chn Insert Image
Xut hin hp thoi Select Image Source
Chn tp tin nh cn chnOK
Hiu chnh thuc tnh ca nh:
Chn nh chn
Window Properties
Trang 107
Ti liu tham kho
Mn Thit k Web
Image: tn nh
W (Width), H (Height): rng v chiu cao ca nh, tnh bng Pixel
Src: ng dn tng i n tp tin nh
Alt: cu thng bo xut hin trn trnh duyt khi r chut vo nh
Link: a ch URL ni cn lin kt n
Edit: Chuyn qua Macromedia Fire Works hiu chnh nh
Crop: Ct xn nh
Brightness/Contrast: Chnh sng ti ca nh
Sharpen: Chnh sc nt cho nh
Resample:Lu li kch thc iu chnh
Optimize in Fireworks: chuyn qua Macromedia FireWoks hiu chnh
Map : bng lin kt nh
VSpace, Hspace: Khong cch trn, di, tri, phi gia phn ni dung vn bn n nh
Target: Khung cha trang lin kt n
Low Src: tn tp tin nh ph c phn gii thp, lm nh thay th khi ch hin th nh

chnh trn trnh duyt
Border: ng vin nh
Align: canh l tri, phi, gia
Chn khung nh
Trong thit k, nhiu lc cn d phng trc cho nh trang tr, nhng cha c nh thch hp,
ta c th chn trc mt khung nh vi kch thc xc nh gi ch.
Chn InsertImage Objects Image Placeholder
Xut hin hp thoi Image Placeholder.
Nhp tn, kch thc, mu cho khung nh.
Trang 108
Ti liu tham kho
Mn Thit k Web
Chn nh vo khung nh
Double click vo khung cn chn nh.
Xut hin hp thoi Select Image Source, chn tp tin nh cn chn vo khung.
To Web Photo album
Chc nng: To b su tp cc hnh nh hay cun Album gip ngi s dng qun l v chn
xem tng hnh mt cch nhanh nht
Cch to: thc hin chc nng ny cn phi ci t Macromedia Fireworks v mt th
mc cha cc hnh photo.
Chn Commands Create Web Photo Album
Xut hin hp thoi Create Web Photo Album
Nhp cc thng s click OK, ch kt qu, xut hin thng bo Album c to.
Trong Site Panel xut hin thm cc folder:

o Folder Thumbnail: cha cc file JPG
o Folder Page cha cc file .HTM cho mi Image tng ng (trang con)
o Tp tin Index.htm trong Folder cha Website, y l tp tin Album chnh
o M tp tin Index.htm v di chuyn gia cc trang bng cc Hyperlink: Next
Previous, Home.
6.7 FRAMESET
Trang khung (frameset)
L trang HTML c bit. Trang khung khng mang ni dung, khng c th <BODY>.
Trang khung chia vin khung cho trang web.
Mun to trang khung ta phi xc nh r cc yu cu sau:

o S khung (frame) trong mt trang khung (frameset)
o Tn cho tng khung c th.
o Cc tp tin HTML lm ni dung cho tng khung.
Cch to frameset v lin kt trang
Dreamweaver to sn mt s dng trang khung chun, ta c th chn v s dng chng

mt cch d dng. Nu khng c khung nh thch, ta c th chn trang khung gn ging
nht ri t hiu chnh hay thit k li.
Cch to:
Trang 109
Ti liu tham kho
Mn Thit k Web
Chn thc n File/ New
Chn Frameset Chn dng trang khung trong khung Framesets
Xem mu trang khung bn ct Preview, click Create.
M frames Panel:
Frames Panel gip ta thao tc vi tng khung mt.
Windows Frames.
Hoc nhn phm Shift + F2.
Thao tc trn Frames Panel:

Tu thuc vo thao tc trn Frames Panel m Properties Inspector tng ng cung cp thng
tin ph hp
Click vo gia khung, hay tn khung trong Frames panel chn khung cn lm vic,
hiu chnh nh i tn khung, di ni dung tp tin khung, thanh cun, mu nn.
Click ng vin ngoi cng chn c trang khung, click vo ng vin gia khung trn,
khung di chn dng khung. Click ng vin gia khung tri, phi chn c ct
khung. Sau thao tc chn l thay i mi quan h gia 2 khung, thng l kch thc, t l
khung, ng vin khung.
Hiu chnh trang khung
Chia khung
Chn tn khung trong Frame Panel cn chia.
Chn thc n Modify Frameset.
Chn Split Frame Left/ Right / Up / Down chia mt khung thnh 2 khung theo
mun.
Xo khung
a tr chut n bin khung cn xo.

Trang 110
Ti liu tham kho
Mn Thit k Web
Ko bin khung ra khi mn hnh, hoc ko sang hng bin ca khung cha.
Hiu chnh thuc tnh trang khung
Thay i kch thc khung:
t con tr chm vo bin khung.
Drag chut v ko bin n v tr mi.
Thay i tn khung :
Chn khung cn i tn.
Nhp tn mi trong Frame Name.
Thay i ni dung i din trong khung:
t tr trong khung cn i ni dung.
Nhp tn tp tin .html mi vo Site Panel.
Hoc click Browse to file tm tp tin thay th..
Thay i bin cho khung:
Margin Width.
Margin hight
Thay i kch thc khi xem:
Chn No Resize, khng cho php thay i kch thc trc khi duyt trang khung.
Hin th thanh cun: Ti mc Scroll
Yes: lun lun hin thanh cun.
No: khng hin th thanh cun, d trang ni dung di nhiu dng.
Auto: Thanh cun t xut hin khi ni dung di hn trang.
Default: Tu thuc vo ci t mc nh.
Khng vin nt ng khung:
Border =No: khng c ng vin
Border = yes: c ng vin
Width : Chn kch thc nt vin
Border Color: T mu vin khung
Lu trang khung:
Lu c khung trang:
o Chn vin ngoi cng trang khung trong Frame Panel.
o File Save Frameset As t tn trang khung.
o Chn File Save Frameset: cp nht thng tin
Lu trang i din khung :

Trang 111
Ti liu tham kho
Mn Thit k Web
o t con tr vo khung cn lu.

o FileSave Frameset As.
o Nu ch cn cp nht thng tin ni dung trong khung th chn FileSave Frameset
6.8 CASCADE STYLE SHEET- TEMPLATE
Gii thiu:
Dreamweaver cung cp cng c to style mt cch n gin

v nhanh chng.
CSS (Cascading Style Sheets) cng l mt dng HTML Style.

Nhng phong ph hn v thuc tnh v ng dng. Mt CSS
khng nhng tp hp cc nh dng, m cn c th gip nh v,
vin khung, t mu nn
CSS c th nh km trong trang hoc lu ring thnh mt tp tin

kiu CSS phc v cng lc cho nhiu trang
To CSS cc b: Style c to trong trang hin hnh

Cch to:
Chn Text CSS Styles NewXut hin hp thoi New CSS Style.
Hoc Window CSS Style, m CSS Panel, Click nt New CSS rule
o Selector type: chn loi CSS
o Define in: Chn This document only: To style (dng internal style), s dng trong
trang hin hnh.
C 3 loi style:
Class: Style dng lp

o Name : Nhp tn lp, bt u bng du (.)
Tag: nh ngha tag

o Tag: Chn tn tag
Advanced: nh dng cc tag ring bit

o Selector: Nhp #IDName (bt u bng du #)
Chn xong, Click OK Ca s CSS Style definition :

o Khung category: Chn nhm nh dng
Trang 112
Ti liu tham kho
Mn Thit k Web
o Khung style: chn cc nh dng
Chn xong, Click Apply OK
Trong CSS Panel xut hin Style va to
Cch s dng Style cc b:
Chn ni dung vn bn cn nh dng
Trong CSS Style Panel, chn tn CSS
Hoc chn tn style trong Properties inspector
Nu loi tag nh dng ring bit th i tng s dng style phi c tn nh danh ID
To mt tp tin CSS: Tp tin kiu .CSS l mt tp tin ph tr cho webSite, nm trong th

mc root ca Site.
Cch to:
Text CSS Styles New
Trong hp thoi New CSS Style

o Selector Type: Chn loi style
o Define in: Chn New Style Sheet file OK
Trang 113
Ti liu tham kho
Mn Thit k Web
Hp thoi yu cu lu tp tin CSS, c phn m rng .CSS
Ca s CSS Style definition :

o Khung category: Chn nhm nh dng
o Khung style: chn cc nh dng ging style cc b
Chn xong, Click Apply OK
Trong CSS Panel xut hin tp tin Style va to
p dng CSS t tp tin CSS:
M trang HTML cn s dng tp tin CSS
Chn Text CSS Style Attach Style Sheet.
Hoc Click nt Attach Style Sheet trong Style Panel.
Chn tp tin CSS cn kt ni, Click nt Browse
Link: Ch lin kt vi tp tin CSS s dng
Import : Chp tp tin CSS vo trang
Hiu chnh mt CSS:
Click phi trn tn CSS trong CSS Style Panel
Chn Edit, thc hin hiu chnh
Xo mt CSS Styles:
Khi xo mt CSS Style th nhng ni dung p dng CSS Style b xo s tr v trng thi
ban u
Chn CSS Style cn xo
Click nt Delete CSS Style trong CSS Style Panel
Hoc Click chut phi, chn Delete
Trang 114
Ti liu tham kho
Attach Style
Sheet
Mn Thit k Web
Delete Style
New Style Sheet
BI THC HNH CHNG 6

Hng dn s dng Dreamweaver
1. To mi trong Dreamweaver
Nhn File New
Chn HTML
Trang 115
Ti liu tham kho
Mn Thit k Web
2. Giao din chnh lm vic ca Dreamweaver

Ch thch:
1:................................................................................. lm vic
trn code (code)
2: ........... lm vic trn giao din v trn code cng lc trn 02 vng
lin nhau
3: ......................................................................lm vic trn giao
din (design)
4: ................................................................................. lm vic vi
bng (table)
5: ......................................................................... lm vic vi hnh
nh (image)
6: .......................................................................... Ni dung Title
ca trang web
Trang 116
Ti liu tham kho
Mn Thit k Web
3. Lu file trong Dreamweaver

Vo menu File , chn Save..
Ch thch:
1: chn ng dn a lu bi
2: g tn file cn lu
3: ui tp tin u tin. Nu chng ta khng g phn m rng cho tp
tin th ly ui u tin l .htm
V d: g tn index.html -> lu file vi ng tn index.html
g tn index -> t ng lu file vi tn index.htm
4. Lm vic vi bng (table)

Trang 117
Ti liu tham kho
Mn Thit k Web
To mi bng: Vo menu Insert -> Table
5. Hnh nh trong Dreamweaver

Chn hnh nh: vo menu Insert ->Image
Trang 118
Ti liu tham kho
Mn Thit k Web
Ch thch:
01: ............................................................................ cao, rng
ca hnh(V,H)
02: ....................................................................................... ng
dn ca hnh
03: ......................................................................................... ghi
ch trong hnh
04: .................................................................................... phc hi
kch c hnh
05: ........................................................................................... ch
canh hnh
06: ...................................................................................... ng
vin ca hnh
07: ......................................................................... ch canh ch
so vi hnh
08: ............................................................... s dng hnh nh lm
bng link
09: ..................................................................... khong cch b
cao so vi ch
10: ................................................................. khong cch b
ngang so vi ch
11: ...................................................................................dng hnh
lm lin kt
Thuc tnh ca trang ( thuc tnh ca th body)
Trang 119
Ti liu tham kho
Mn Thit k Web
Dng Dreamweaver thit k cc website sau

Bi 1:
Trang 120
Ti liu tham kho
Mn Thit k Web
Bi 2:
Bi 3:
Trang 121
Ti liu tham kho
Mn Thit k Web
Bi 4:
a) To 2 tp tin HTML nh hnh 4.1 v hnh 4.2 sau
Hnh 4.1
Hnh 4.2
b) To cc im hotspot trn tp tin hnh world.gif ti v tr xung quanh khu vc nc n

trong tp tin World.htm. Lin kt cc hotspot n tp tin India.htm cha bn chi tit nc
n .
Hng dn
A) World.htm:
Trang 122
Ti liu tham kho
Mn Thit k Web
1. Chn Insert | Image hoc nhn nt Insert Image trong Objects Panel. Hp thoi sau
xut hin.
2. Chn hnh world.gif v nhn Select. Hnh c chn vo trong ti liu.

3. lu file, ta nhn File | Save v g World.htm trong mc file name.
4. Lp li cc bc trn to tp tin India.htm v chn hnh India.gif vo.
B)
1. Chn hnh World.gif. Trong Property Inspector, bn s nhn thy mc Map.
2. Trong mc Map, c t tn cho Hotspot.

3. Chn cng c Polygon Hotspot Tool v v mt hotspot trn India nh hnh sau.
4. Khi chng ta cho hotspot l mt nh, Property Inspector thay i nh hnh.
Trang 123
Ti liu tham kho
Mn Thit k Web
5. Cho hotspot lin kt n tp tin India.htm hoc click vo biu tng folder v chn v
tr cha tp tin sau g INDIA vo hp Alt dng ch thch khi bn di chuyn trn
khu vc bn nc n s hin ch INDIA.
Bi 5:
Bi 6:
Trang 124
Ti liu tham kho
Mn Thit k Web
Bi 7:
Bi 8:
Trang 125
Ti liu tham kho
Mn Thit k Web
Bi 9:
Trang Gioithieu.htm
Trang 126
Ti liu tham kho
Mn Thit k Web
Trang LienHe.htm
Bi 10:
Trang 127
Ti liu tham kho
Mn Thit k Web
CHNG 7
NG K V QUN L WEBSITE
Tm tt
Mc tiu
Cc mc chnh
Bi tp
bt buc
Bi tp
lm thm
Kt thc bi hc ny 7.1 ng k Host
Da vo bi tp Da vo bi tp
cung cp hc vin bit
trong phn cui trong phn cui
7.2 Thit k Website mu
cch ng k host v a
Chng 7.
Website ln trn mng

Internet
Trang 128
Chng 7.
Ti liu tham kho
Mn Thit k Web
7.1 NG K HOST
1. Vo a ch http://www.freeservers.com ng k website min ph vi a ch truy cp c
dng http://<yourname>.freeservers.com
2. G vo a ch m bn d nh ng k ti yourname. Sau click Go. Mn hnh tip

theo s hin ra, bn chn mc cui cng 100% Free Hosting Option v click vo SignUp
3. Sau bn hy in vo cc thng tin lin quan cn thit nh H tn, mt khu, email,

Cui cng g vo ARTK chc rng bn ng vi cc qui nh ca FreeServers khi
cung cp dch v min ph ny.
Trang 129
Ti liu tham kho
Mn Thit k Web
4. Nu ng k thnh cng, mn hnh sau s hin ra cung cp cho bn mt s la chn khi

xy dng website ca mnh.
7.2 THIT K MT S WEBSITE MU

1. Thit k website theo mu sau (http://greetings.yahoo.com)
Trang 130
Ti liu tham kho
Mn Thit k Web
2. Thit k website theo mu sau (http://www.flowers.com)
3. Thit k website theo mu sau (http://shopping.yahoo.com)
Trang 131
Ti liu tham kho
Mn Thit k Web
4. Thit k website theo mu sau (http://www.is-edu.hcmuns.edu.vn)
Trang 132
Ti liu tham kho
Mn Thit k Web
5. Thit k website theo mu sau (http://www.bttvn.com )
Vi mi trang web xem hy ch cc vn sau:

- Cch b tr cc bng (table)
- Cch s dng font ch
- Cch chn vo cc hnh nh trang tr
- Cch nh ngha cc thuc tnh nh mu ch, mu nn, ...
- Phn tnh (khng thay i) mi khi click vo cc hyperlink chuyn qua mt ni dung
mi
T cc trang web trn, hy t thit k cc trang cho website ca mnh.
Trang 133

Tailieu TKWeb

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tailieu TKWeb

Uploaded by

Copyright:

Available Formats

THIT K WEB

ThS. Thi Kim Phng

Ti liu tham kho

Kt thc bi hc ny - Khi nim mng Internet

Ti liu tham kho

Mng l mt nhm cc my tnh kt ni vi nhau. Internet l mng ca cc mng. Giao thc

Hnh 1.1: Internet

o a ch: WWW tun theo mt cch thc t tn thng nht truy cp vo cc ti

o HTML: Ngn ng nh du siu vn bn (HTML) c s dng to cc ti liu c

Ti liu tham kho

Hnh 1.2: Trnh duyt yu cu n my ch

Hnh 1.3: Mt s trnh duyt ph dng

Ti liu tham kho

Kt thc bi hc ny 2.1 Mc tiu ca website

cung cp hc vin kin cn thit k

thc v cc bc khi 2.2 Chin lc thit k

2.3 Thit k giao din

Ti liu tham kho

2.1 MC TIU CA WEBSITE CN THIT K

Ti liu tham kho

2.2 CHIN LC THIT K

Ti liu tham kho

i tm cm hng v hnh thnh tng (phn 1)

Hy chp v lu li mn hnh ca cc trang web m bn thch vo mt th mc trn

bc ny, bn khng cn phi ngh v thit k tng lai ca mnh m hy c vic

Ti liu tham kho

ng ngi qu lu xem cng mt lc. Hy dnh thi gian lm vic khc, hm

Vy khi no th bn nn dng li? Khi no th bn bit rng mnh tm c ngun cm

Bn c c t nht 10 - 20 thit k m bn cm thy p v ph hp vi trang web

C t nht mt trang thit k m n khin bn ch mun copy nguyn xi ca n v (d

Khi , bn c th bt u chuyn sang bc th 2:

Ti liu tham kho

Ghi ch xung mt mnh giy nh nhng im m bn thch v mt thit k m bn

Ti liu tham kho

Ti liu tham kho

Xy dng khung ni dung (Phn 2)

Ti liu tham kho

Th no gi l xy dng khung ni dung? l qu trnh i tm cu tr li cho cu hi - nu

Xc nh v phn loi ni dung s xut hin. V d nh nu l mt trang blog th

Sp xp nhng i tng ni dung ny theo tng khi.

Ti liu tham kho

Ti liu tham kho

Cc trang ch bo ch (nh VietnamNet) c th s dng giao din 3 ct bi h ch cn a

Khng dng phn mm v. giai on ny, bn cn c kh nng v v xo tht

Bn c th s dng bt ch, mt cc ty v vi t giy - nhng tt nht theo ti vn l

Nhng thnh phn duy nht m bn cn v c l s ch l nhng hnh ch nht. Bn

Hy nhng bng v ca bn xut hin trc mt bn vi ngy. iu ny d thc

Mc d ch l bn v khung th, nhn t xa bn phi cm thy c ci giao din v

Ni chung l nhng quyt nh m bn la chn bc ny mc d rt chung chung nhng

BI THC HNH CHNG 2

Ti liu tham kho

3.1 Cc th nh dng cu trc d liu

cp hc vin kin thc v

3.2 Cc th nh dng khi

cc th HTML cn bn 3.3 Cc th nh dng danh sch

trong vic thit k giao 3.4 Cc th nh dng k t

3.5 Cc th chn m thanh, hnh nh

Ti liu tham kho

3.1 CC TH NH DNG CU TRC D LIU

... Phn m u (HEADER) ca ti liu c t y

Trn y l c php c bn ca th BODY, tuy nhin bt u t HTML 3.2 th c nhiu thuc

Ti liu tham kho

t mu nn cho trang khi hin th. Nu c hai tham