Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG I:
I.1. CC KHI NIM C BN:

GII THIU V WEB

Internet l mt mng my tnh ton cu trong cc my truy n th!ng v"i nh#u theo mt ng!n ng$ chung l T%&'(&. Intranet l mng c)c b *h!ng n+i vo (nternet v cch truy n th!ng c,# ch-ng c.ng theo ng!n ng$ chung l T%&'(&. M hnh Client/Server0 l m! hnh *hch/ch,. 1erver ch2# ti nguy3n 45ng chung cho nhi u my *hch6%lient7 nh8 cc t9: tin; ti li<u; my in= >u i?m c,# m! hnh ny l tit *i<m v th@i gi#n; ti chnh; 4A BuCn trD h< th+ng=%ch hot ng c,# m! hnh ny l my 1erver E tr#ng thi hot ng6FG'FG7 v ch@ y3u cu tH :h# %lient. Khi %lient y3u cu th my 1erver : 2ng y3u cu . Internet Server l cc 1erver cung cI: cc 4Dch v) (nternet6Web 1erver; J#il 1erver; KT& 1erver=7 Internet Service Provider6(1&70 L nMi cung cI: cc 4Dch v) (nternet cho *hch hng. JNi (1& c nhi u *hch hng v c th? c nhi u loi 4Dch v) (nternet *hc nh#u. Internet Protocol 0 %c my OP 4)ng trong mng (nternet li3n lc v"i nh#u theo mt ti3u chuQn truy n th!ng gRi l (nternet &rotocol 6(&7. (& S44reOO/D# chT (&0 ? vi<c tr#o Ui th!ng tin trong mng (nternet thVc hi<n 8Wc th mNi my trong mng cn :hCi Dnh 4#nh ? :hXn bi<t v"i cc my *hc. JNi my tnh trong mng 8Wc Dnh 4#nh bYng mt nhm cc O+ 8Wc gRi l D# chT (&. ZD# chT (& g[m G O+ th9: :hXn c gi tH \ n F]] v 8Wc :hXn cch nh#u bEi 4Iu chIm. ^ 4) _`F._ab.\._ ZD# chT (& ny c gi trD trong ton mng (nternet. cd b#n :hXn :h+i D# chT (& c,# th gi"i Oe :hXn chi# cc nhm D# chT (& cho cc Bu+c gi# *hc nh#u. Th!ng th8@ng D# chT (& c,# mt Bu+c gi# 4o cc cM Bu#n b8u i<n BuCn lf v :hXn :h+i li cho cc (1&. Jt my tnh *hi thXm nh9: vo mng (nternet cn c mt D# chT (&. ZD# chT (& c th? cI: t: th@i hogc cI: vhnh viAn. Th!ng th8@ng cc my %lient *t n+i vo mng (nternet th!ng Bu# mt (1& bYng 8@ng i<n thoi. Khi *t n+i; (1& Oe cI: tm th@i mt (& cho my %lient. Phng thc truyn thng tin trong Internet0 Khi mt my tnh c D# chT (& l i6my j7 gPi tin n my tnh c D# chT (& l y 6my k7 th :h8Mng th2c truy n tin cM bCn 4iAn r# nh8 O#u0 lu my j v my k c5ng nYm tr3n mt mng con th th!ng tin Oe 8Wc gPi i trVc ti:. %mn my j v k *h!ng c5ng nYm trong mng con th th!ng tin Oe 8Wc chuy?n t"i mt my trung gi#n c 8@ng th!ng v"i cc mng *hc r[i m"i chuy?n t"i my k. Jy trung gi#n ny gRi l G#ten#y. World Wide Web(WWW) l mt 4Dch v) :hU bin nhIt hi<n n#y tr3n (nternet. oDch v) ny 8# r# cch truy iuIt cc ti li<u c,# cc my :h)c v) 4A 4ng th!ng Bu# cc gi#o ti: [ hR#. Z? OP 4)ng 4Dch v) ny my %lient cn c mt ch8Mng trnh gRi l Web pronOer. Web !ro"#er(trnh duy$t70 l trnh 4uy<t Web. o5ng ? truy iuIt cc ti li<u tr3n cc Web 1erver. %c trnh 4uy<t hi<n n#y l (nternet qi:lorer; leOtc#:e %o&e 'age0 l tr#ng neb u ti3n trong neb Oite %o#ting 'rovider0 l c!ng ty hogc tU ch2c 8# cc tr#ng c,# ch-ng t# l3n neb %y'erlin( 0 t3n *hc c,# hy:erteitlin* Publi#h0 lm cho tr#ng neb chy 8Wc tr3n mng )*+()nio,or& re#ource locator) mt D# chT chT n mt rile c) th? trong ngu[n ti nguy3n mng.

Tr#ng _

Gio Trnh Thit K Web

WWW.vietnoiviet.com

JNi ngu[n tr3n neb c 4uy nhIt mt D# chT rIt *h nh". ^ v9y; ng8@i t# OP 4)ng csL l mt chuNi cung cI: D# chT (nternet c,# mt neb Oite hogc ngu[n tr3n Worl4 Wi4e Web. ZDnh 4ng gc tr8ng l0 nnn.n#meorOite.ty:eorOite.countryco4e ^ 4)0 F\t.Ga._u\._G` 8Wc bi?u 4iAn trong csL l nnn.microOort.com csL c.ng nh9n bit gi#o th2c c,# Oite hogc ngu[n 8Wc truy c9:. Gi#o th2c th!ng th8@ng nhIt l vhtt:w; mt vi 4ng csL *hc l vgo:herw; cung cI: D# chT (nternet c,# mt th8 m)c Go:her; v vrt:w; cung cI: vD tr mng c,# ngu[n KT&. % h#i 4ng csL0 )*+ tuy$t -.i x l D# chT (nternet y , c,# mt tr#ng hogc rile; b#o g[m gi#o th2c; vD tr mng; 8@ng 4yn tuz chRn v t3n rile. ^ 4); htt:0'' nnn.microOort.com'mO.htm. )*+ tng -.i / m! tC ng{n gRn D# chT t9: tin *t n+i c c5ng 8@ng 4yn v"i t9: tin hi<n hnh; csL t8Mng +i Mn giCn b#o g[m t3n v :hn mE rng c,# t9: tin. ^ 4)0 in4ei.html Web #erver l mt ch8Mng trnh : 2ng li cc y3u cu truy iuIt ti nguy3n tH trnh 4uy<t.

I.2. GII THIU KHI QUT V WEB

Web l mt 2ng 4)ng chy tr3n mng6%lient/1erver7; 8Wc chi# O| *h{: ton cu. /rang "eb l mt rile v}n bCn ch2# nh$ng t#g ~TJL hogc nh$ng R#n m gc bi<t m trnh 4uy<t neb 6Web bronOer7 c th? hi?u v th!ng 4Dch 8Wc; rile 8Wc l8u v"i :hn mE rng l .html hogc htm. %/M+ (%y'er/e0t Mar(u' +anguage)1 g[m cc on m chuQn 8Wc Buy 8"c ? thit * Web v 8Wc hi?n thD bEi trnh 4uy<t Web 6Web pronOer7 %y'erte0t 6~y:erteit lin*7; l mt tH h#y mt c)m tH gc bi<t 45ng ? to li3n *t gi$# cc tr#ng neb Mar(u'0 l cch Dnh 4ng v}n bCn ? trnh 4uy<t hi?u v th!ng 4Dch 8Wc. +anguage0 Xy *h!ng l ng!n ng$ l9: trnh; m chT l t9: nh nh$ng Buy lu9t ? Dnh 4ng v}n bCn tr3n tr#ng neb. /rnh #o2n th3o trang "eb 0% th? Oon thCo neb tr3n bIt *z trnh Oon thCo v}n bCn no. %c trnh Oon thCo :hU bin hi<n n#y l0 lote:#4; Kront&#ge hogc ore#mne#ver.

I.3. TAG HTML:

T#g ~TJL l nh$ng cXu l<nh nYm gi$# cg: t#g vw v vw; 45ng ? Dnh 4ng cc v}n bCn tr3n tr#ng neb. ong chung c,# mt t#g ~TJL l0 <t !N "# L$%t&'()#'t$#%* +,-#.t </t !N "#* Trong 0 /ag4a&e 0 l t3n mt t#g ~TJL; vit li n v"i 4Iu v v; *h!ng c *hoCng tr{ng 5b6ect 0 l +i t8Wng cn Dnh 4ng trong tr#ng Web +i#tPro'etie# l 4#nh Och thuc tnh c,# T#g; l nh$ng gc i?m bU Oung vo cho mt t#g; th2 tV cc thuc tnh trong mt t#g l tuz f. lu c tH F thuc tnh trE l3n th mNi thuc tnh cch nh#u bEi *hoCng tr{ng. <T !N "# )'()#'t01123 45#12 )'()#'t02123 45#226*+,-#.t</T !N "#* Gi trD c,# thuc tnh 8Wc gt trong nhy Mn hogc nhy !i v.6c th? b Bu#7

Tr#ng F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

/ag4a&e0 gRi l t#g mE '/ag4a&e0 gRi l t#g ng. Th!ng th8@ng th cc t#g u c t#g ng. Tuy nhi3n c mt O+ t#g *h!ng c t#g ng V7 89 : bo4y pG%Lswsqowni 4ung 'bo4y
T#gl#me6mE7 &ro:ertieO T#gl#me6ng7

% th? c nhi u t#g l[ng vo nh#u; theo nguy3n t{c t#g no mE tr8"c th t#g ng O#u V7 890 T#g_T#gFbect'T#gF'T#g_ pbect_(bectF '('p Trong tr#ng ~TJL; nu mt t#g bD O#i th ni 4ung b3n trong T#g *h!ng hi?n thD tr3n trnh 4uy<t

I.:. C;U T<=C C BN C>A T<ANG WEB:

1. C?5 t'@. t' A! B#,

&hn u6~e#4'~e#470 l :hn ch2# th!ng tin c,# tr#ng Web. &hn thXn 6po4y'po4y70 l :hn ch2# ni 4ung c,# tr#ng Web. &hn u v :hn thXn 8Wc gt trong cg: t#g ~TJL'~TJL <HTML* <HEAC* ND$ 85A! tEFA! t$A .G t' A! B#, </HEAC* <B+CH* ND$ 85A! E$IA tEJ t'KA t'LAE 850Mt </B+CH* </HTML*

2. H$IA tEJ t' A! B#,:

KhEi ng trnh 4uy<t (nternet qi:lorer %hRn menu rile;o:en; 45ng bronOe tm t9: tin html m"i to ~ogc 4ouble clic* vo t3n t9: tin .htm

I.N. CC TAG HTML C BN : I.N.1. <T$t4#* : H$IA tEJ AD$ 85A! t$K5 OP .G t' A! B#, t'KA tE AE t$K5 OP .G t'LAE 850Mt.
%g: t#g Title 8Wc gt trong :hn ~e#4 c,# tr#ng ~TJL C@ )EQ)0 <TITLE* ND$ 85A! t$K5 OP </TITLE*

I.N.2. <HA*: TR( E# 8#'S !T" U .?) E# 8#'S OVW. OXt t'(A! )EYA B+CH
C@ )EQ): <HA ALIGN1 ZC$'#.t$(A[* ND$ 85A! .G H# 8#' </HA* Trong 0 oirection0 g[m cc gi trD lert; right; center; 45ng ? c#nh l cho he#4er; mgc Dnh l c#nh tri

Tr#ng u

Gio Trnh Thit K Web

WWW.vietnoiviet.com

^ 4)0 ~_~e#4ing _'~_ ~F~e#4ing F'~F

~u~e#4ing u'~u ~G~e#4ing G'~G ~]~e#4ing ]'~] ~a~e#4ing a'~a I.N.3.

<&* :

o5ng ? ng{t on v b{t u on m"i C@ )EQ)0 <& ALIGN 1 ZC$'#.t$(A[* ND$ 85A! .G O(RA </&* T#g '& *h!ng b{t buc. T#g & * ti: Oe tV ng b{t u mt on m"i.

I.N.:.

<B<*:

lg{t 4mng ti vD tr c,# c,# t#g. ^ 4)0 & J#ry h#4 # little l#mb br (tO rleece n#O nhite #O Ononbr qverynhere th#t J#ry nent br 1he n#O rollone4 by # little l#mbbr ':

I.N.N.

<H<*:

o5ng ? *| 8@ng ng#ng tr#ng; *h!ng c t#g ng C@ )EQ)0 <H< A4$!A1[8$'#.tt$(A[ W$8tE1 ZV 45#[ \$]#13 45# .(4('1^''!!,,*

Trong 0 oirection0 g[m cc gi trD lert; right; center Wi4th0 4i 8@ng *|; tnh bYng &iiel hogc 1ie0 4y c,# 8@ng *|; tnh bYng :iiel %olor0 mu 8@ng *|; c th? 45ng t3n mu hogc 45ng m rrggbb

^ 4)0
~TJL ~qSoT(TLqWelcome to ~TJL 'T(TLq'~qSo pok ~u Jy rirOt ~TJL 4ocument'~u ~s Oie ] #lign center ni4th ]\ ~s Oie _] #lign lert ni4th b\ & ThiO iO going to be re#l run 'pok '~TJL

Tr#ng G

Gio Trnh Thit K Web I.N.U. <_+NT*:

WWW.vietnoiviet.com

o5ng Dnh 4ng ront ch$ ZDnh 4ng Kont ch$ cho cC ti li<u th gt t#g Kont trong :hn po4y ZDnh 4ng tHng :hn hogc tHng tH th gt ti vD tr mu+n Dnh 4ng C@ )EQ)0 <_+NT _ .#1[`(AtN "#1S `(AtN "#2S `(AtN "#3[ %$]#1[3 45#[ C(4('1[''!!,,[* ND$ 85A! E$IA tEJ </_+NT* ^ 4)0 ~TJL ~qSo T(TLqWelcome to ~TJL'T(TLq '~qSo pok KlT 1(q u %Ls ~T&(lK KS%q Sri#l Jy rirOt ~TJL 4ocument 'KlT & ThiO iO KlT %LspLcq 1(q agoing 'KlT to be re#l run 'pok '~TJL

I.N.a.

<B+CH * :

%h2# ni 4ung c,# tr#ng neb %- :h:0 <B+CH* ND$ 85A! .E7AE .G t' A! B#, </B+CH* %c thuc tnh c,# po4y pg%olor0 thit l9: mu n n c,# tr#ng Teit0 thit l9: mu ch$ Lin*0 mu c,# Oi3u li3n *t ^lin*0 mu c,# Oi3u li3n *t iem Bu# p#c*groun40 45ng lo#4 mt hnh lm n n cho tr#ng LertJ#rgin0 %#nh l tri To:J#rgin0 %#nh l tr3n c,# tr#ng ^ 4)0 ~TJL ~qSoT(TLq Le#rning ~TJL'T(TLq'~qSo pok pG%Lsw\\\\KKw teitwyellonw KlT %Ls L(JqGssqlWelcome to ~TJL'KlT 'pok '~TJL Mb5 %c.: (nternet qi:lorer c th? ic l9: _a mu theo t3n nh8 O#u: pl#c*; 1ilver; Gr#y; White; J#roon; se4; &ur:le; KuchOi#; Green; Lime; live; kellon; l#vy; plue; Te#l; SBu#. Jt O+ m th9: l)c :hXn c,# mu 0ssGGpp

Tr#ng ]

Gio Trnh Thit K Web

J th9: l)c :hXn KK\\\\ \\KK\\ \\\\KK \\\\\\ KKKKKK Ju sqo Gsqql pLcq pLS%K W~(Tq

WWW.vietnoiviet.com

I.N.d.

<IMG* :

o5ng ? chn mt hnh Cnh vo tr#ng Web C@ )EQ)0 <I"! %'.1[U<L[ 4t1[T#et[ B$8tE13 45# E#$!Et13 45# ,('8#'13 45#* o 1rc0 ic Dnh 8@ng 4yn t9: tin cn lo#4; OP 4)ng 8@ng 4yn t8Mng +i (mg Orcw..'im#geO'h_.girw . o Slt0 ch2# ni 4ung v}n bCn th#y th cho hnh Cnh *hi hnh *h!ng lo#4 v 8Wc; nu lo#4 v 8Wc th Oe iuIt hi<n ni 4ung trong teitboi mNi *hi ng8@i 45ng 8# chut t"i hnh. o Wi4th; ~eight0 45ng ? ic Dnh ch :hng to thu nh hnh Cnh. o Slign w lert' right'to:'bottomw0 Oo hng gi$# hnh Cnh v teit

I.N.f.

<B!\(5A8* :

o5ng ? chn mt Xm th#nh vo tr#ngWeb. m th#nh ny Oe 8Wc :ht mNi *hi ng8@i OP 4)ng mE tr#ng Web. C@ )EQ)0 <B!\(5A8 %'.1[`$4#AE .[ L(()13 45#* o 1rc ch2# D# chT rile nhc; rile ny c :hn mE rng .m:u ; m4i; = o Loo: ic Dnh ch l9: i l9: li c,# bi ht; nu v#lue \ th l9: v! hn; v#luen th l9: li n ln r[i tV ng t{t.

I.N.1g.

<EMBEC*:

%ho :h: 8# Xm th#nh trVc ti: vo tr#ng Wqp. C@ )EQ)0 <EMBEC \<C1hU<Lh * V7 89: qJpqo 1s%clou4O.mi4 W(oT~_G] ~q(G~Ta_

I.N.11.

<M 'i5##*</M 'i5##* :

o5ng ? i?u *hi?n +i t8Wng chy mt cch tV ng tr3n tr#ng Web C@ )EQ)0 <M 'i5## *+,-#.t</M 'i5##* %c thuc tnh c,# J#rBuee 0 o 7irection u:' 4onn ' lert ' right 45ng ? i u *hi?n h8"ng chy. o !ehavior#ltern#te0 +i t8Wng chy tH l ny O#ng l *i# v ng8Wc li. ^ 4)0 J#rBuee 4irectionu:Z+i t8Wng chy l3n 'J#rBuee

I.N.12. <jkk GE$ .E@ kk*: ND$ 85A! t'(A! .X) t ! Ab0 lEFA! E$IA tEJ t'(A! t' A!
C@ )EQ)0 <j kk ND$ 85A! 4m$ .E@ tE7.E kk*

Tr#ng a

Gio Trnh Thit K Web I.N.13.

^ 4)0 &p TE$% $% !((8 `5A'p'&

WWW.vietnoiviet.com

<B*: OJAE 8RA! .En Oo"

C@ )EQ) <B* ND$ 85A! .En Oo"</B*

I.N.1:.

T ! <I*: pJAE 8RA! .En A!E$KA!

C@ )EQ)0 <I* Ni dung ch nghing</I*

I.N.1N.
^ 4)0

T ! <U*: GR.E .EqA 3rA ,sA

C@ )EQ)0 <U* ND$ 85A! .En !R.E .EqA</U* ZDnh 4ng *h+i v}n bCn vH# 9m; nghi3ng v gch chXn p(c Tr8@ng Z~%l T& ~%J'c'('p

I.N.1U.

T ! <BIG* 3b <\MALL*:

%hTnh cE ch$ to hogc nh hMn cE ch$ iung Bu#nh C@ )EQ) <BIG*ND$ 85A! .En t( </BIG* <\MALL*ND$ 85A! .En AEt </\MALL*

I.N.1a.
^ 4)0

T ! <\U&* 3b <\UB* :

Z8# ch$ l3n c#o hogc iu+ng thI: Oo v"i v}n bCn bnh th8@ng C@ )EQ)0 <\U&*ND$ 85A! .En 8V 4KA . ( </\U&* <\UB*ND$ 85A! .En OV e5uA! tE?) </\UB* #1c&F'1c& ~1cpF'1cp

I.N.1d.

<\T<IKE*:

Gch ng#ng v}n bCn C@ )EQ)0 <\T<IKE*ND$ 85A! 3rA ,sA ,J !R.E A! A! </\T<IKE*

I.N.1f.

<C+CE*6</C+CE*:

o5ng ? nh9: mt 4mng m c Dnh 4ng *f tV ri3ng. omng m ny *h!ng 8Wc thVc hi<n m 8Wc hi?n thD 48"i 4ng v}n bCn bnh th8@ng C@ )EQ)0 <C+CE* ND$ 85A! 3rA ,sA "5uA OJAE 8RA! </C+CE*

Tr#ng t

Gio Trnh Thit K Web

^ 4)0 %oq (r 6i \7 br i i _br elOe br yy_ '%oq

WWW.vietnoiviet.com

I.N.2g.

<EM*: VrA ,sA OVW. AE?A "RAE v!$uA! t ! <I*w

<EM*VrA ,sA OVW. AE?A "RAE</EM*

C@ )EQ)0

I.N.21.

<\T<+NG*: pJAE 8RA! .En Oo" v!$uA! <B*w <\T<+NG*VrA ,sA OVW. AE?A "RAE</\T<+NG*

C@ )EQ)0 I.N.22. <BL+CKQU+TE*:

o5ng :hXn cch mt *h+i v}n bCn ? nhIn mnh; on v}n bCn ny 8Wc tch r# thnh mt :#r#gr#:h ri3ng; th3m *hoCng tr{ng tr3n v 48"i on [ng th@i th)t vo Oo v"i l tri 6t8Mng 8Mng ch2c n}ng c,# :hm t#b7 C@ )EQ)0 <BL+CKQU+TE* ND$ 85A! lEu$ 3rA ,sA AE?A "RAE </BL+CKQU+TE*

^ 4)0 ~TJL ~qSoT(TLqLe#rning ~TJL'T(TLq~qSo pok pL%KcTqKlT color hot:in* ~um:ty oum:ty O#t on # n#ll ~um:ty oum:ty h#4 # gre#t r#ll Sll the KingO horOeO Sn4 #ll the KingO men %oul4 not :ut ~um:ty oumty together #g#in 'KlT 'pL%KcTq 'pok '~TJL

I.N.23.

<&<E*:

Gi$ nguy3n cc Dnh 4ng nh80 ng{t 4mng; *hoCng cch; thch hW: v"i vi<c to bCng C@ )EQ)0 <&<E* li 4ung v}n bCn cn Dnh 4ng tr2Mc v"i tIt cC Dnh 4ng *hoCng cch; iu+ng 4mng v ng{t hng </&<E*

Tr#ng b

Gio Trnh Thit K Web

^ 4)0

WWW.vietnoiviet.com

~TJL ~qSoT(TLqLe#rning ~TJL'T(TLq~qSo pok &sq ~um:ty oum:ty O#t on # n#ll ~um:ty oum:ty h#4 # gre#t r#ll Sll the KingO horOeO Sn4 #ll the KingO men %oul4 not :ut ~um:ty oumty together #g#in '&sq 'pok '~TJL

I.N.2:.

<CIV* <\&AN*:

%hi# v}n bCn thnh cc *h+i; c chung mt Dnh 4ng o(^ chi# v}n bCn thnh mt *h+i b{t u tH mt 4mng m"i. 1&Sl tch *h+i nh8ng *h!ng b{t u tH mt 4mng m"i C@ )EQ)0 <CIV*ND$ 85A! .G lEu$ ,ct OY5 tx "Dt 8yA! "z$ </CIV* <\&AN*ND$ 85A! .G lEu$ t'(A! 1 8yA! </\&AN*

^ 4)0
~TJL ~qSoT(TLq Le#rning ~TJL'T(TLq'~qSo pok o(^oiviOion _ & The o(^ element iO uOe4 to grou: elementO. &Ty:ic#lly; o(^ iO uOe4 ror bloc* level elementO 'o(^ o(^ #lign right KlT Oie G color hot:in* r#ce Sri#loiviOion F &ThiO iO # Oecon4 4iviOionpr ~FSre you h#ving run'~F 'KlT 'o(^ & The Oecon4 4iviOion iO right #ligne4. 1&Sl 1TkLq vKlT/1(q0F] %olor0pLcqw%ommon rorm#tting '1&Sl iO #::lie4 to #ll the elementO in the 4iviOion 'pok

Tr#ng `

Gio Trnh Thit K Web

'~TJL

WWW.vietnoiviet.com

I.N.2N.

CQ. l{ t| OX. ,$Mt:

#. L"n hMn 670 gt ^ 4)0 %oq (r S gt p Then ps SS_ '%oq b. lh hMn 670 lt ^ 4)0 %oq (r S lt p Then ps SS_ '%oq c. %g: nhyww0 Buot ^ 4)0 pok Buot To be or not to be Buot Th#t iO the BueOtion 'pok 4. Kf tV v 0 #m: ^ 4)0 & Willi#m #m: Gr#h#m nent to the r#ir e. Kf tV *hoCng tr{ng0 nbO:

I.U. M}T \~ THA+ TC T<+NG CA \ T<NH CUHT

%ch lo#4 li tr#ng Web0 %lic* bi?u t8Wng serreOh 6K]7 tr3n th#nh c!ng c). %hTnh OP# Oie ch$ hi?n thD tr3n tr#ng0 %hRn Jenu ^ien/Teit Oie %hTnh li ront ch$0 %hRn Jenu ^ien/qn%o4ing Trong tr8@ng hW: tr#ng Web *h!ng hi?n thD 8Wc Kont ting ^i<t0 %hRn menu Tool chRn (nternet :tionO/%hRn T#b KontO chRn Kont ting ^i<t lu chRn r[i m *h!ng hi?n thD 8Wc ront ting ^i<t th chRn Jenu ^ienqn%o4ingchRn cc ront nh8 cOer 4erine4;^ietn#meOe=. %c tuz chRn *hc cho tr#ng Web0 ToolO (nternet o:tion0 Kh!ng Lo#4 hnh iu+ng; Dnh 4ng li3n *t;= %hRn tr#ng neb mgc Dnh *hi mE trnh 4uy<t

Tr#ng _\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

~nh _

~nh F

Tr#ng __

Gio Trnh Thit K Web

WWW.vietnoiviet.com

/ab 8eneral(%nh 9) thit l9: cc t5y chRn cho trnh 4uy<t Clic( n:t )#e Current0 chRn tr#ng hi<n ti ? lo#4 l3n mNi ln *hEi ng (q )#e 7e,ault0 D# chT tr#ng Web mgc Dnh mNi *hi mE trnh 4uy<t ^ 4) mNi *hi mE (q th tV ng hi?n thD tr#ng Web k#hoo trong ! S44reOO nh9:0 htt:0''y#hoo.com ; nu chRn cOe pl#n* th hi?n thD tr#ng tr{ng . %i#tory0 l8u li cc tr#ng neb 4uy<t Bu# ti my %lient v th!ng tin }ng nh9: c,# uOer hi<n hnh= lu *hng mu+n l8u li0 %hRn oelete %oo*ieO v oelete KileO. % th? thit l9: *hoCng th@i gi#n l8u tr$ tr#ng trong +i t8Wng ~iOtory bYng cch th#y Ui gi trD trong ! vo#yO to *ee: :#geO in hiOtoryw . lu mu+n io +i t8Wng ny th nhIn %le#r hiOtory. /ab ;dvance6%nh F70 c th? chRn cc t5y chRn *hc nh80 lg}n chgn *h!ng cho tCi hnh iu+ng tr#ng neb Ju li3n *t; cch th? hi<n li3n *t tr3n tr#ng %o:y hnh Cnh tH tr#ng Web0 %lic* :hCi vo hnh Cnh cn O#o ch: r[i chRn 1#ve :icture #O; hogc 1#ve b#c*groun4 #O;= Lo#4 v tr#ng Web b#o g[m cc hi<u 2ng; Ocri:t; hnh Cnh= ch2# tr3n tr#ng0 %hRn Jenu Kile 1#ve SO %hRn vD tr l8u rile 1#ve. ~i<u chTnh tr#ng Web0 ^ien Oource/hi<u chTnhchRn Kile 1#ve ? l8u li K] ? c9: nh9t li ni 4ung vH# hi<u chTnh

Tr#ng _F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG II:
II.1. GII THIU \IU LIN KT II.1.1. \$K5 4$KA lt:

\IU LIN KTkHNH NH

KhC n}ng chnh c,# ~TJL l hN trW cc Oi3u li3n *t. Jt Oi3u li3n *t cho :h: ng8@i truy c9: c th? i tH tr#ng neb ny n tr#ng neb *hc. Jt li3n *t g[m u :hn0 4gu<n0 ch2# ni 4ung hi?n thD *hi ng8@i 45ng truy c9: n; c th? l mt tr#ng neb *hc; mt on rilm; mt hnh Cnh hogc mt h: thoi ? g$i m#il= 4h=n0 c th? l 4mng v}n bCn hogc hnh Cnh ? ng8@i 45ng clic* vo *hi mu+n truy c9: n li3n *t; nu nhn l v}n bCn th th8@ng 8Wc gch 48"i >?ch -@n 6t#rget70 ic Dnh vD tr ? ngu[n hi?n thD.

II.1.2.

CQ. 4(R$ 4$KA lt

Internal %y'erlin(06Li3n *t trong7 l cc li3n *t v"i cc :hn trong c5ng mt ti li<u hogc li3n *t cc tr#ng trong c5ng mt neb Oite. A0ternal %y'erlin( 6Li3n *t ngoi7 l cc li3n *t v"i cc tr#ng tr3n neb Oite *hc. C@ )EQ)0 <A H<E_1[U<L[* NEA </A* CA! U<L tVA! Ou$ OI 4$KA lt OA .Q. t' A! t'(A! .A! "Dt B#,%$t# ^ 4)0 ~TJL ~qSo T(TLq cOing lin*O'T(TLq'~qSo pok S ~sqK voocF.htmw%lic* here to vien 4ocument F'S 'pok '~TJL

II.2. T+ \IU LIN KT

CA! U<L t50Mt Ou$ OI 4$KA lt OA .Q. t' A! t'(A! B#,%$t# lEQ. ^ 4)0 S hrerhtt:0''nnn.google.com li3n *t n Google'S

II.2.1.

L$KA lt 3z$ .Q. )EYA t'(A! .A! "Dt t' A! B#,

lu ni 4ung c,# tr#ng Bu 4i th n3n to cc poo*m#r* ? nhCy n mt :hn c) th? no tr3n chnh tr#ng neb hi<n hnh. %ch to li3n *t n cc :hn trong c5ng tr#ng0 g[m F b8"c To poo*J#r*0

Tr#ng _u

Gio Trnh Thit K Web

WWW.vietnoiviet.com

<A A "#1[tKA B((l" 'l[* NEA </A* ND$ 85A! To li3n *t n poo*m#r*0 <A H'#` 1[^tKA B((l" 'l[*NEA .G t#et 4$KA lt</A* ^ 4) 0 ~TJL ~qSoT(TLq cOing htm lin*O'T(TLq '~qSo pok S ~sqK Z^IAt#'A#tw(nternet'Sps S ~sqK Z^HTMLw(ntro4uction to ~TJL'Sps <A A "# 1 ZIAt#'A#t[*IAt#'A#t</A* (nternet l mt mng c,# cc mng. lghh# l; cc mng my tnh 8Wc li3n *t v"i cc mng *hc; n+i cc n8"c v ngy n#y l ton cu. Gi#o th2c truy n th!ng l T%&'(& cung cI: li3n *t v"i tIt cC cc my tnh tr3n th gi"i <A A "# 1 ZHTML[*IAt'(85.t$(A t( HTML</A*<B<* lg!n ng$ nh 4Iu Oi3u v}n bCn l ng!n ng$ chuQn m neb OP 4)ng ? to v nh9n r# ti li<u. Jgc 45 *h!ng :hCi l mt t9: con c,# ng!n ng$ nXng cI: ti3u chuQn tUng But 61GJL7; ng!n ng$ nh 4Iu Oi3u v}n bCn c.ng c li3n Bu#n v"i 1GJL. 1GJL l mt :h8Mng :h: trnh by cc ng!n ng$ Dnh 4ng ti li<u. ~TJL l ng!n ng$ nh 4Iu 8Wc OP 4)ng ? to ti li<u ~TJL. %c h8"ng 4yn chT r mt tr#ng neb n3n 8Wc hi?n thD nh8 th no trong trnh 4uy<t 'pok '~TJL Kt BuC tr3n trnh 4uy<t

II.2.2.

L$KA lt 3z$ "Dt B((l" 'l "Dt tb$ 4$M5 lEQ. Tr#ng _G

Gio Trnh Thit K Web

WWW.vietnoiviet.com

C@ )EQ)0 <A E'#`1[Ett)://BBB.%$t#..("/) tE/& !#.Et"^tKA B((l" 'l[* ^ 4)0 Tr#ng m#in.htm ~TJL ~qSoT(TLq J#in 4ocument'T(TLq'~qSo pok S ~sqK v%0ooc_.htm(nternetw(nternet'Sbr S ~sqK v%0ooc_.htm~TJLw(ntro4uction to ~TJL'Sbr 'pok '~TJL Tr#ng ooc_.htm ~TJL ~qSoT(TLqcOing Lin*O'T(TLq'~qSo pok S n#me v(nternetw(nternet'Sps (nternet l mt mng c,# cc mng. lghh# l; mng my tnh 8Wc li3n *t v"i cc mng *hc; n+i v"i cc n8"c v ngy n#y l ton cu. Gi#o th2c truy n T%&'(& cung cI: li3n *t v"i tIt cC cc my tnh tr3n th gi"i. S n#me v~TJLw(ntro4uction to ~TJL'Sps lg!n ng$ nh 4Iu Oi3u v}n bCn l ng!n ng$ chuQn m neb OP 4)ng ? to v nh9n r# ti li<u. Jgc 45 *h!ng :hCi l mt t9: con c,# ng!n ng$ nXng cI: ti3u chuQn tUng But 61GJL7; ng!n ng$ nh 4Iu Oi3u v}n bCn c.ng c li3n Bu#n v"i 1GJL. 1GJL l mt :h8Mng :h: trnh by cc ng!n ng$ Dnh 4ng ti li<u. ~TJL l ng!n ng$ nh 4Iu 8Wc OP 4)ng ? to ti li<u ~TJL. 'pok '~TJL

II.2.3.
C@ )EQ)0

L$KA lt OA ED) tEV #k" $4

<A E'#`1[" $4t(:OJ .E E" $4[*NEA</A* lu Oi3u li3n *t gt E cu+i tr#ng th 45ng t#g Soosq11 C@ )EQ)0 <A88'#%%*<A E'#`1[" $4t(:OJ .E E" $4[*NEA</A*</A88'#%%*

II.3.HNH NH T<N T<ANG WEB: II.3.1. w ,w CQ. 4(R$ sAE :

AE .G$` 6Gr#:hicO (nterch#nge Korm#t70 8Wc OP 4)ng :hU bin nhIt trong cc ti li<u ~TJL; 4A chuy?n tCi; ng#y cC cc *t n+i OP 4)ng JoqJ t+c ch9m; hU trW F]a mu G(K. %c rile G(K 8Wc Dnh 4ng *h!ng :h) thuc :hn n n AE &EG 6oint &hotoGr#:hic qi:ert Grou:7 c :hn mE rng .&G; l loi Cnh nn mIt th!ng tin; nghh# l Cnh O#u *hi bD nn *h!ng gi+ng nh8 Cnh g+c. Tuy nhi3n; trong Bu trnh :ht li th Cnh c.ng t+t gn nh8 Cnh g+c. &qG hN trW hMn _a tri<u mu v th8@ng 8Wc OP 4)ng cho cc Cnh c mu thVc.

.w

AE &NG 6&ort#ble letnor* Gr#:hicO7 nn *h!ng mIt 4$ li<u II.3.2. CEA ELAE sAE Tr#ng _]

Gio Trnh Thit K Web

C@ )EQ)0

WWW.vietnoiviet.com

<IMG \'.1U<L B('8#'1A A4t1[ND$ 85A! tE 0 tE[* csL0 D# chT c,# t9: tin hnh Cnh; th8@ng OP 4)ng D# chT t8Mng +i; v 4)0 img Orcw..'im#ge'hinh.girw *h!ng :h) thuc vD tr c,# t9: tin Cnh tr3n h# n0 4y c,# 8@ng vi n; tnh bYng :iiel Slt0 li 4ung th#y th Oe hi?n thD *hi hnh *h!ng lo#4 8Wc; hogc *hi 8# chut ng#ng Bu# hnh

II.3.3. w

CQ. tE5D. t7AE .G sAE:

CbA 3rA ,sA i5 AE ELAE sAE: <IMG \<C1U<L A4$!A1 4#`t* ND$ 85A! 3rA ,sA i5 AE ELAE sAE <IMG \<C1U<L A4$!A1 <$!Et* ND$ 85A! 3rA ,sA i5 AE ELAE sAE V7 89:

,w

.w

K7.E tEVz. sAE: <IMG B$8tE1V 45# H#$!Et1V 45#* V7 89: html he#4title(m#ge'title'he#4 bo4y img Orc..'im#ge'plueF\hillO.:g ni4th_]\ height_]\ 'bo4y 'html CEXA 3rA ,sA , ( i5 AE ELAE:
%#nh l *hi 4n v}n bCn iung Bu#nh mt Cnh Oe tc ng n tIt cC cc v}n bCn O#u nu *h!ng chn vo mt 4mng *e gc bi<t. Thuc tnh %LqSs trong t#g ps lm cho v}n bCn *h!ng b{t u nu l c) th? *h!ng bD i# i 6nghh# l ti cnh 48"i c,# Cnh7

C@ )EQ)0
<B< CLEA<1<$!Et* 0 lg}n chgn v}n bCn 4n b3n l :hCi c,# Cnh <B< CLEA<1L#`t* 0 lg}n chgn v}n bCn 4n b3n l tri c,# Cnh <B< CLEA<1A44* 0 lg}n chgn v}n bCn 4n h#i b3n l c,# Cnh

8w

TEK" lE(sA! t'uA! e5A! i5 AE sAE

lu *h!ng mu+n v}n bCn 4n iung Bu#nh l tri c,# Cnh th t# c th? th3m *hoCng tr{ng iung Bu#nh Cnh

Tr#ng _a

Gio Trnh Thit K Web

C@ )EQ): <IMG \<C1U<L H\&ACE1A V\&ACE1"*

WWW.vietnoiviet.com

#w

H\&ACE1A: KhoCng tr{ng 8Wc tnh bYng :iiel Oe th3m vo cC b3n :hCi v b3n tri c,# Cnh V\&ACE1": KhoCng tr{ng 8Wc tnh bYng :iiel Oe th3m vo cC b3n tr3n v b3n 48"i c,# Cnh C AE 4P .E( sAE: % th? c#nh l cho Cnh Oo v"i mt 4mng v}n bCn trong mt R#n C@ )EQ): <IMG \<C1U<L ALIGN1 ZC$'#.t$(A[*^}n bCn mu+n c#nh l Oo v"i Cnh oirection0 g[m cc gi trD0 to:; bottom; mi44le; teitto: ^ 4)0

II.3.:.

CA! sAE 4b" 4$KA lt:

% th? 45ng hnh Cnh ? to mt li3n *t n mt tr#ng *hc; hogc nu c mt Cnh l"n; bn c th? to Cnh nh hMn hogc mt bi?u t8Wng cho n ? n c th? hi?n thD nh#nh chng tr3n tr#ng neb; O#u to li3n *t ? 8# ng8@i truy c9: n Cnh c *ch th8"c th9t C@ )EQ)0 <A H<E_1[pJ .E t' A! 4$KA lt[* <IMG \<C1U<L A4t1[AD$ 85A! tE 0 tE[*NEA </A*

II.3.N.

BsA OT sAE:

pCn [ Cnh l mt Cnh trong tr#ng neb 8Wc chi# r# lm nhi u v5ng; mNi v5ng *hi clic* vo Oe li3n *t n mt D# chT csL CQ.E tR(0Tr8"c ht :hCi chn vo tr#ng mt Cnh v gt nhn cho Cnh <IMG U%#M )1[L ,#4[* <M ) N "#1[L ,#4[* <A'# \E )#1 Zt0)#[ .(('8%1[e1S01Se2S02S 6[ E'#`1[U<L[* </M )*

Trong 0 - L#bel0 t3n c,# bCn [ Cnh - Ty:e0 hnh 4ng c,# cc v5ng tr3n Cnh; g[m cc loi0

Tr#ng _t

Gio Trnh Thit K Web

WWW.vietnoiviet.com

sect0 ^5ng hnh ch$ nh9t %ircle0 ^5ng hnh trmn &oly0 ^5ng hnh # gic %oor4O0to cc Tnhc,# hnh sect0 6i_; y_; iF; yF7 l to F Tnh cho c,# v5ng hnh %l %ircle0 6i; y; r7 ln l8Wt l to tXm v bn *nh c,# v5ng hnh trmn &oly0 6i_; y_; iF; yF; iu; yu; =7 l cc Tnh c,# v5ng hnh # gic

y _ i _

y F

V7 89: i html F he#4 title(m#ge'title 'he#4 bo4y img Orc..'im#ge'plueF\hillO.:g ni4th_]\ height_]\ bor4er\ uOem#:J#:_ m#: n#meJ#:_ #re# Oh#:erect coor4Otu;u;_G`;aa hrerp_.htm #re# Oh#:e:oly coor4O_]F;b_;t_;t];aF;_\`;`t;_Fu hrerpu.htm #re# Oh#:ecircle coor4Out;uF;Ft hrerbF.htm 'm#: 'bo4y 'html

II.3.U.

HLAE APA :

Trong hu ht cc tr#ng neb th8@ng OP 4)ng n n mu; v"i m)c ch l lm nUi b9t ni 4ung tr#ng . Tuy nhi3n c.ng c th? OP 4)ng hnh Cnh ? lm n n bYng thuc tnh pS%KGsclo c,# th| pok. <B+CH BACKG<+UNC1 Z,!$" !#.!$`[*

Tr#ng _b

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG III:
III.1.

CANH \CH

CANH \CH KHNG C TH T vUA('8#' L$%t kULw

C@ )EQ)0 <UL T0)#1 \E )#1* <LI T0)#1 \E )# 2* ND$ 85A! 1 <LI T0)#1 \E )# 2* ND$ 85A! 2 6 </UL* 1h#:e _; 1h#:e F l loi bullet tV ng gt E u 4mng trong 4#nh Och 1h#:e _0 Cnh h8Eng n ton 4#nh Och 1h#:e F0 Cnh h8Eng n mt m)c trong 4#nh Och %c loi Oh#:e0 o %ircle0 pullet trmn; rUng o 1Bu#re0 pullet vu!ng o oiOc0 pullet trmn *h!ng rUng V7 89: ~TJL ~qSoT(TLqLe#rning ~TJL'T(TLq pok cL ty:ew1Bu#rew L(Jon4#y cL L((ntro4uction to ~TJL L(%re#ting LiOtO 'cL L(TueO4#y cL L(%re#ting T#bleO L((nOerting (m#geO 'cL L(We4neO4#y L(ThurO4#y L(Kri4#y 'cL 'pok '~TJL

III.2.

CANH \CH C TH T v+'8#'L$%t +Lw

C@ )EQ)0 <+L T0)#1e \t 't 1A * <LI T0)# 1e1 V 45#1"* ND$ 85A! 1 <LI T0)# 1e1 V 45#1"* ND$ 85A! 2 6 </+L*

Tr#ng _`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

e0 loi *f tV mu+n OP 4)ng trong 4#nh Och g[m 0 S0 %h$ ho# #0 %h$ th8@ng (0 1+ l# m ho# i0 1+ l# m th8@ng _0 %ho O+ mgc Dnh A0 gi trD u ti3n c,# 4#nh Och e10 l loi *f tV OP 4)ng cho 4mng ny v 4mng ti: theo; lm mIt Cnh h8Eng c,# i "0 gi trD u ti3n c,# 4mng ny; lm th#y Ui gi trD c,# n V7 89 1: ~TJL ~qSoT(TLqLe#rning ~TJL'T(TLq pok L L(Jon4#y L L( Tk&q i(ntro4uction to ~TJL L( Tk&q i%re#ting LiOtO 'L L(TueO4#y L L( Tk&q S%re#ting T#bleO L( Tk&q S(nOerting (m#geO 'L L(We4neO4#y L 1TSsT ] L( %re#ting KormO L( Wor*ing nith Kr#meO 'L L(ThurO4#y L(Kri4#y 'L 'pok ~TJL V7 89 2: % th? l[ng F loi 4#nh Och c th2 tV v *h!ng c th2 tV vo nh#u ~TJL ~qSoT(TLqLe#rning ~TJL'T(TLq'~qSo pok L L(Jon4#y cL L( (ntro4uction to ~TJL L( %re#ting LiOtO 'cL L(TueO4#y cL ty:eoiOc L( %re#ting T#bleO L( (nOerting (m#geO 'cL

Tr#ng F\

Gio Trnh Thit K Web

L(We4neO4#y cL ty:ecycle L( %re#ting KormO L( Wor*ing nith Kr#meO 'cL L(ThurO4#y L(Kri4#y 'L 'pok ~TJL

WWW.vietnoiviet.com

III.3.

CANH \CH pNH NGHA:

Trong ~TJL c mt t#g gc bi<t 45ng ? to 4#nh Och Dnh nghh# 4nh ri3ng cho vi<c tr# c2u; nh8ng c.ng thch hW: cho 4#nh Och no ? n+i mt tH v"i mt 4iAn giCi 4i. C@ )EQ)0 <CL* <CT*lh9: tH mu+n Dnh nghh# <CC*lhX: ni 4ung Dnh nghh# 6 </CL* V7 89: ~TJL ~qSo T(TLqLe#rning ~TJL'T(TLq '~qSo pok hF oerinition LiOt'hF oL oT&iiel oo 1hort ror :icture element. S :iiel rererO to the Om#ll 4otO th#t m#*e u: #n im#ge on the Ocreen. &iiel 4e:th rererO to the number or colourO nhich m#y be 4iO:l#ye4. oTseOolution ooThe Bu#lity or the 4iO:l#y on # monitor. The higher the reOolution; the Oh#r:er the im#ge. The number or :iielO th#t c#n be 4iO:l#ye4 on # Ocreen 4erineO reOolution. oT1c#nner oo S h#r4n#re 4evice th#t #llonO the uOer to m#*e electronic co:ieO or gr#:hicO or teit. 'oL 'pok '~TJL

Tr#ng F_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Tr#ng FF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG IV:
IV.1. BNG

BNG V T<NH BH T<ANG

pCng th8@ng 8Wc OP 4)ng ? to cc v}n bCn nhi u ct hogc :hXn chi# tr#ng thnh nhi u v5ng *hc nh#u rIt ti<n lWi trong thit * v trnh by tr#ng neb C@ )EQ)0 <TABLE * <T<* %t _ <TC*li 4ung trong ! _</TC* <TC*li 4ung trong ! F</TC* %t F omng _ 6 <TC*li 4ung trong ! n</TC* </T<* <T<* <TC*li 4ung trong ! _</TC* <TC*li 4ung trong ! F</TC* omng F 6 <TC*li 4ung trong ! n</TC* </T<* 6 </TABLE* T#g t#ble 't#ble 0 chT thD mt bCng T#g tr=='tr 0 ic Dnh mt 4mng c,# bCng T#g t4=='t40 ic Dnh mt ! ch2# 4$ li<u c,# bCng. o$ li<u trong ! c th? l v}n bCn hogc hnh Cnh= V7 89 10 ~TJL ~qSo T(TLqTSpLq'T(TLq '~qSo pok t#ble bor4er_ Ts To%ell _'To To%ell F'To To%ell u'To To%ell G'To 'Ts 't#ble 'pok '~TJL

Tr#ng Fu

Gio Trnh Thit K Web V7 89 20

~TJL ~qSo T(TLqTSpLq'T(TLq '~qSo pok t#ble bor4er_ Ts To%ell _'To 'Ts Ts To%ell F'To 'Ts Ts To%ell u'To 'Ts Ts To%ell G'To 'Ts 't#ble 'pok '~TJL V7 89 3: ~TJL ~qSo T(TLqTSpLq'T(TLq '~qSo pok t#ble bor4er_ Ts To%ell _'To To%ell F'To 'Ts Ts To%ell u'To To%ell G'To 'Ts 't#ble 'pok '~TJL

WWW.vietnoiviet.com

IV.2. `w

CC THU}C TNH: IV.2.1. TE5D. t7AE .G ,sA!

/hB& (hung vin0 <T ,4# B('8#' 1A*6<T ,4#* n0 4y c,# *hung vi n tnh bYng &iiel

!w

>Cnh &Du cEa (hung vin vD &Du nn

Tr#ng FG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

<T ,4# B('8#'C(4('1 ZC(4('[ B!C(4('1[C(4('[*6</T ,4#*

Ew

/2o bFng <T ,4# B('8#'C(4('C 'l1 ZC(4('[* : png U E cnh 48"i v :hCi c,# bCng <T ,4# B('8#'C(4('L$!Et1 ZC(4('[* : png U cnh tr3n tri c,# bCng

$w -w lw

>Cnh chiu rGng vD chiu cao cEa b3ng0 <T ,4# W$8tE 1A E#$!Et1"*S n l chi u rng tnh bYng &iiel Canh l b3ng <T ,4# A4$!A1 4#`t/ '$!Et/ .#At#'*6</t ,4#* /huGc t?nh Cell'adding vD CellS'acing <T ,4# C#44\) .$A! 1[3 45#[*: KhoCng cch gi$# 8@ng vi n c,# cc ! <T ,4# C#44& 88$A!1[V 45#[*: KhoCng cch gi$# 8@ng vi n c,# ! v"i v}n bCn

4w

/ag tiBu - cEa /able <C )t$(A* t$K5 OP </C )t$(A* / T#g %#:tion nYm trong cg: T#g T#ble='T#ble

IV.2.2. w ,w .w

TE5D. t7AE .G .Dt

Canh l theo chiu ngang <T8 A4$!A14#`t/ '$!Et/.#At#'*6</T8* Canh l theo chiu -ng <T8 V 4$!A1 T()/ B(tt("/ M$884#*6</T8* /rGn <T8 C(4%) A1A*: t'DA A .Dt <T8 <(B\) A1A*: t'DA A 8yA!

8w

/ag HthI % tc 4)ng nh8 t4 nh8ng lm cho 4$ li<u trong ! 8Wc in 9m v c#nh gi$# <t'* <tE* ND$ 85A! </tE* </t'* ^ 4)0 TSpLq bor4erF tr th %ell _ 'th 'tr tr th %ell F 'th 'tr TSpLq

Tr#ng F]

Gio Trnh Thit K Web V7 89:

WWW.vietnoiviet.com

~TJL ~qSo T(TLqTSpLq'T(TLq '~qSo pok t#ble bor4er] %ell1:#cing _\ por4er%oloro#r*re4 ni4th]\ Ts To%ell _'To To%ell F'To 'Ts Ts To%ell u'To To%ell G'To 'Ts 't#ble 'pok '~TJL V7 890 T#ble bor4er_ bgcolor vruOchi#w bor4ercolorwre4w #lignwcenterw Wi4th]\ ~eightu\ c#:tion &ro:ertieO or T#ble'c#:tion tr th colO:#nu %olO:#n'th 'tr tr th sonO:#nwFw sonO:#n'th t4 #ligncenter%ell _'t4 t4 #ligncenter%ell F't4 'tr tr t4 #ligncenter %ell u't4 t4 #ligncenter %ell G't4 'tr 't#ble V7 890 Thit * mt tr#ng neb nh8 myu

Tr#ng Fa

Gio Trnh Thit K Web

WWW.vietnoiviet.com

html he#4 title Trinh b#y tr#ng'title 'he#4 bo4y T#ble ni4thab height_u] bor4er_ cellO:#cing\ bor4ercolor``\\uu tr th colO:#nF bgcolorKK%%KK 4iv #ligncenter%om:uter Jo4el '4iv 'th 'tr tr t4 ni4thFG height`b v#lignto: t#ble ni4th_\\ bor4er_ cellO:#cing\ tr t4Tin tuc't4 'tr tr t4Gi#i tri't4 'tr tr t4u#ng c#o't4 'tr tr t4 heightFuThe th#o't4 'tr 't#ble 't4 t4 ni4thta #ligncenter img Orc..'im#geO'hF.:g ni4th_\a height`F 't4 'tr 't#ble 'bo4y 'html

IV.3.

T<NH BH T<ANG

Trong thVc t; bCng th8@ng 8Wc OP 4)ng ? trnh by b+ c)c cho ton b tr#ng neb. lu mu+n thit * mt tr#ng th? hi<n v}n bCn trong ct 4ng bo ch hogc :hXn tr#ng thnh nh$ng v5ng c ch, *hc nh#u; th bCng l mt c!ng c) cn thit. Jt trong nh$ng nt gc tr8ng h$u 4)ng c,# bCng l trong mNi t#ble cell bn c th? OP 4)ng bIt *z t#g ~TJL no; v 4) bn c th? chn mt t#g ~_ trong mt cell hogc mt 4#nh Och c th2 tV cc m)c hogc c th? chn mt bCng con trong mt bCng *hc=

^ 4) 0 %n thit * tr#ng neb g[m nhi u v5ng v"i nh$ng ch, *hc nh#u nh8 hnh 48"i Xy; th bCng l c!ng c) h$u hi<u Tr#ng Ft

Gio Trnh Thit K Web

WWW.vietnoiviet.com

p8"c _0 To mt t#ble th2 nhIt g[m _ 4mng v F ct t#ble tr t4 //o#nh Och cc m)c li3n *t// 't4 t4 //T#bble F // 't4 'tr 't#ble

Tr#ng Fb

Gio Trnh Thit K Web p8"c F0 to t#ble th2 F g[m u 4mng v F ct t#ble tr t4 colO:#n F %hn hnh logo// 't4 'tr tr t4 ronO:#n F //li 4ung _ // 't4 t4 //li 4ung F // 't4 'tr tr t4 //li 4ung u // 't4 'tr 't#ble

WWW.vietnoiviet.com

Tr#ng F`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG V:
V.1. KHI QUT V _<AME

_<AME

% th? :hXn chi# mt tr#ng thnh cc *hung; cho :h: ng8@i truy c9: c5ng mt l-c c th? iem nhi u tr#ng m *h!ng cn cu+n mn hnh; mNi *hung ch2# mt tr#ng neb ri3ng lu ti tr#ng OP 4)ng Kr#me th *h!ng OP t#g po4y <HTML* <HAEC* <TITLE*& !# T$t4#</TITLE* </HEAC* <_<AME\ET* _' "# C#`$A$t$(A% </_<AME\ET* </HTML*

V.2. CCH T+ M}T _<AME LAH+UT

V.2.1. CQ. 8RA! `' "# : T ! <_<AME\ET* . 2 tE5D. t7AE <+W\ 3b C+L\ w To frame theo dng
C@ )EQ): <HTML* <HEAC*<TITLE*ND$ 85A! t$K5 OP</TITLE*</HEAC* <_' "#%#t <(B%1[ S ,6[ * <_' "# A "#1[N "#1[ \'.1[C(At#At1.Et"* <_' "# A "#1[N "#2[ \'.1[C(At#At2.Et"* 6.. <_' "# A "#1[N "#A[ \'.1[C(At#AtA.Et"* </_' "#%#t* </HTML* Trong 0 a1 b0 l c#o c,# cc 4mng th2 _; th2 F =; c th? tnh bYng :iiel hogc bYng 4a&e0 t3n *hung; 6ic Dnh ch2c n}ng c,# *hung7 ContentJht&0 D# chT tr#ng neb iuIt hi<n u ti3n trong *hung V7 89: ~TJL ~qSoT(TLqKr#me'T(TLq'~qSo Kr#meOet sonOF\; a\; F\ Kr#me n#mew~e#4w 1rcwhe#4.htm Kr#me n#mew%ontent_w 1rcw%ontent_.htm Kr#me n#mew%ontentFw 1rcw%ontentF.htm 'Kr#meOet '~TJL

F\

a\

F\

Kr#meOet sonOF\; a\; F\

Tr#ng u\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

,w

To frame theo ct
C@ )EQ): <HTML* <HEAC*<TITLE*ND$ 85A! t$K5 OP</TITLE*</HEAC* <_' "#%#t C(4%1[ S ,6[ * <_' "# A "#1[N "#1[ \'.1[C(At#At1.Et"* <_' "# A "#1[N "#2[ \'.1[C(At#At2.Et"* 6.. <_' "# A "#1[N "#A[ \'.1[C(At#AtA.Et"* </_' "#%#t* </HTML*

V7 89:
~TJL ~qSoT(TLqKr#me'T(TLq'~qSo Kr#meOet %olOu\; u\; Kr#me n#mewp#nerw 1rcwhe#4.htm Kr#me n#mew%ontent_w 1rcw%ontent_.htm Kr#me n#mew%ontentFw 1rcw%ontentF.htm 'Kr#meOet '~TJL

u\ u\

Kr#meOet %olOu\; u\; V.2.2.

w ,w

CQ. tE5D. t7AE .G _' "#:

4ore#iKe0 Kh!ng Ui *ch th8"c Scrolling0 c'*h!ng c th#nh cun ;uto0 juIt hi<n th#nh cun *hi ni 4ung 4i Le#0 lu!n iuIt hi<n th#nh cun lo0 *h!ng iuIt hi<n th#nh cun ^ 4)0 rr#meOet ronOb\; colO rr#mebor4erl bor4er\ rr#me noreOie Orcto:Kr#me Ocrollingl rr#me noreOie OrclertKr#me Ocrollingl 'rr#meOet .w Mra&eborder0 8@ng vi n c,# *hung mgc Dnh l _; mu+n gi$# cc *hung *h!ng cmn 8@ng vi n th trong t#g Kr#meOet nh9: th3m por4er\; 8w Margin"idth hi<u chTnh *hoCng cch tH ni 4ung n l tri v :hCi c,# *hung 6tnh bYng :iiel7 #w Marginheight0 hi<u chTnh *hoCng cch tH ni 4ung n l tr3n v 48"i c,# *hung 6tnh bYng :iiel7

Tr#ng u_

Gio Trnh Thit K Web V.2.3. CQ. `' "# 4TA! AE 5:

WWW.vietnoiviet.com

<_' "#%#t * <_' "# A "#1[A "#[ %'.1[& !#.Et"[* <_' "#%#t* <_' "# A "#1[A "#[ %'.1[& !#.Et"[* 6 </_' "#%#t* 6 </_' "#%#t*

V.2.:.

L$KA lt `' "#:

Tr#ng u ti3n c,# *hung 8Wc chT r# trong thuc tnh 1s%; t# c th? chTnh cc tr#ng *hc c5ng iuIt hi<n trong *hung bYng cch chT r# vD tr tr#ng ch Ti tr#ng mu+n to li3n *t v"i *hung; t# nh9: c- :h:0 < H'#`1[& !#.Et" T '!#t1[A "#[* NEA "9. 4$KA lt </ * Trong 0 /argetN4a&e t3n c,# *hung m tr#ng mu+n li3n *t n trong t#g Kr#me PageJht&0 tr#ng hi?n thD trong *hung li3n *t T ! <B %#*: lu c nhi u li3n *t n cc tr#ng iuIt hi<n trong c5ng mt *hung th thuc tnh t#rget mgc Dnh gt trong t#g p#Oe <H# 8* <B %# t '!#t1[A "#[* < E'#`1[U<L[*NEA 4$KA lt</ * 6 To:rr#me </E# 8* ^ 4)0 Thit * tr#ng neb nh8 O#u0

Lertrr#me J#inrr#me

Tr#ng uF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%ch thVc hi<n0 T' A! .E7AE0 %hi# tr#ng thnh u *hung0 to:rr#me; lertrr#me v m#inrr#me. Tr#ng &hoto.htm gt trong lert rr#me; logo.htm gt trong To:rr#me; peOter.htm; ouJont.htm; #cobO.htm gt trong m#inrr#me ~TJL ~qSoT(TLq1t#rr or The %olor#4o qi:erience'T(TLq KsSJq1qT sW1a\; /// %om:#ny logo /// KsSJq 1s%L(!(.Et" m#rginheight_ noreOie Ocrollingl n#meT()`' "# /// leOte4 rr#meO /// KsSJq1qT %L1_G\; /// S liOt or Ot#rr :hotoO /// KsSJq 1s%&E(t(%.Et" lSJqL#`t`' "# /// (n4ivi4u#l Ot#rr biogr#:hieO /// KsSJq 1s%B#%t#'.Et" lSJqM $A`' "# 'KsSJq1qT 'KsSJq1qT '~qSo '~TJL

lertrr#m e

Logo.ht m
peOter.htm ouJont.ht m #cobO.ht m

to:rr#m e

&hoto. htm

m#inrr# me

Trong cc tr#ng Logo.htm; &hotoO.htm; peOter.htm :hCi 8Wc to tr8"c &E(t(%.Et" ~TJL ~qSoT(TLq1t#rr hy:erteit lin*O'T(TLq <BA\E TA<GET1M $A`' "#* '~qSo pok %qlTqs S ~sqKB#%t#'.Et"(JG 1s%peOter.:g ni4tht] height_\_ ps err peOter'Spsps S ~sqKC5M(At.Et"(JG 1s%ouJont.:g ni4tht] height_\_ ps pri#n ouJont'Spsps S ~sqK .(,%.Et"(JG 1s%#cobO.:g ni4tht] height_\_ps oenniO #cobO'Spsps '%qlTqs 'pok '~TJL

Tr#ng uu

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Tr#ng &hotoO.htm

B#%t#'.Et" ~TJL ~qSoT(TLqerr peOter'T(TLq'~qSo pok (JG 1s%peOterF.:g W(oT~`\ ~q(G~T_F] SL(GlLqKT KlT 1(qF TSpLq Ts To ^SL(GlT&pl#me0'p'To To ^SL(GlT&err peOter'To 'Ts Ts To ^SL(GlT&pSge0'p'To To ^SL(GlT&ut'To 'Ts Ts To ^SL(GlT&pqi:erience0'p'To To ^SL(GlT&Tnelve ye#rO climbing. Three ye#rO nith The %olor#4o qi:erience'To 'Ts Ts To ^SL(GlT&pqJT0'p'To To ^SL(GlT&keO'To 'Ts 'TSpLqps %LqSsLqKT err h#O le4 routeO in koOemite; ql4or#4o; Jount s#nier #n4 soc*y Jount#in l#tion#l &#r*. ~e h#O :#rtici:#te4 in ei:e4itionO in oen#li; Jeiico #n4 le:#l. We #re h#::y to nelcome b#c* err ror hiO rourth ye#r nith The %olor#4o qi:erience. err nill be le#4ing tourO to ql4or#4o %#nyon. 'KlT pok '~TJL

Tr#ng uG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%c tr#ng ouJont.htm; #cobO.htm c.ng thit * t8Mng tV. L(!(.Et" ~TJL ~qSoT(TLq~qSo'T(TLq'~qSo pok pS%KGscloJount#in.:g (JG 1s%T%qLogo.gir W(oT~]]\ ~q(G~Ta\ 'pok '~TJL

V.2.N.

&EYA t N+_<AME\

&hn tP lKsSJq1 8Wc OP 4)ng ? chT ni 4ung th#y th cho rr#me *hi trnh 4uy<t *h!ng hU trW rr#me. C@ )EQ)0 ~TJL ~qSoT(TLq&#ge title'T(TLq'~qSo KsSJq1qT Kr#me oerinitionO 'TsSJq1qT lKsSJq pok &#ge L#yout 'pok 'lKsSJq '~TJL

Tr#ng u]

Gio Trnh Thit K Web V.2.U. &EYA t I_<AME

WWW.vietnoiviet.com

lu mu+n trn v}n bCn v *hung trong c5ng mt tr#ng th :hCi to mt *hung b3n trong tr#ng bYng t#g <$`' "#*S *hi trnh 4u3t *h!ng hU trW th ni 4ung trong (KsSJq Oe bD trC li C@ )EQ)0 Ti vD tr mu+n chn rr#me; nh9: c- :h:0 <I`' "# \'.1[& !#.Et"[ N "#1[A "#[ W$8tE1 e H#$!Et10 A4$!A14#`t/ '$!Et* li 4ung th#y th *hi trnh 4uy<t *h!ng chI: nh9n *hung </I`' "#* Trong 0 PageJht&0 l tr#ng u ti3n iuIt hi<n trong *hung 4a&e0 t3n c,# *hung 01 y0 *ch th8"c c,# *hung ;lign0 c#nh l V7 890 thit * tr#ng neb c 4ng O#u0

&hn tP (rr#me

html he#4 titlecntitle4 oocument'title 'he#4 bo4y centerimg OrcLogo.:g ni4th]]\ heightt\'center $`' "# ni4thu]\ height_]\ #lignright OrcpeOter.htmh* </$`' "#* h_ ront r#ceSri#l; ~elvetic#; O#nO/Oerir1t#rr 'ront'h_ The Ot#rr #t the %olor#4o qi:erience iO here to hel:nith #ll or your climbing nee4O. Sll or our inOtructorO #re rully Bu#lirie4; nith ye#rOor climbing #n4 te#ching ei:erience. 1croll through the biogr#:hieO #t the right ror more inrorm#tion 'bo4y 'html

Tr#ng ua

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG VI:
VI.1.

_+<M

GII THIU _+<M VI.1.1. \ 89A! _('": _('" OVW. % 89A! lE$ .YA:
Thu th9: th!ng tin t3n; D# chT; O+ i<n thoi; em#il; =? }ng *f cho ng8@i 45ng vo mt 4ich v) hogc mt OV *i<n T9: hW: th!ng tin ? mu# hng Thu th9: th!ng tin :hCn h[i v mt WebOite %ung cI: c!ng c) tm *im tr3n nebOite

VI.1.2.
C@ )EQ)0

CQ.E tR(:
<_('" M#tE(81v&(%t G#tw A.t$(A1%.'$)t.5'4* ND$ 85A! .G _('" </_('"*

Trong 0
/Method0 ic Dnh :h8Mng th2c 8# 4$ li<u l3n my ch,; c F gi trD 0&oOt v Get lu gi trD l GqT th trnh 4uy<t Oe to mt cXu hi ch2# tr#ng csL; mt 4Iu hi v cc gi trD 4o bi?u myu to r#. Trnh 4uy<t Oe Ui Ocri:t c,# cXu hi thnh *i?u 8Wc ic Dnh trong csL ? iP lf. lu gi trD l &1T th 4$ li<u tr3n bi?u myu Oe 8Wc gPi n Ocri:t nh8 mt *h+i 4$ li<u /;ction0 l D# chT c,# Ocri:t Oe thVc hi<n *hi rorm 8Wc Oubmit

VI.2.

CC &HN T C>A _+<M:

%c :hn tP c,# rorm th8@ng OP 4)ng tr3n tr#ng neb g[m IA)5t ,(e#%0 nh9: 4$ li<u 4ng teit v number < 8$( ,5tt(A%0 45ng ? chRn mt t5y chRn trong 4#nh Och \#4#.t$(A 4$%t%0 45ng cho mt 4#nh Och 4i cc lV# chRn; th8@ng l trong oro:/ 4onn liOt boi CE#.l ,(e#%0 chT Dnh mt item 8Wc chRn h#y *h!ng T#et '# : mt teit boi c th? ch2# nhi u 4mng \5,"$t 3b <#%#t ,5tt(A0 ? gPi rorm n %G( Ocri:t vH# ? reOet rorm v trng thi b#n u

VI.2.1.

IA)5t ,(e#%

L mt h: 4mng Mn 45ng ? nh9: v}n bCn hogc O+. Z? to cc in:ut boieO; OP 4)ng t#g (l&cT; t#g (l&cT cmn 8Wc OP 4)ng cho nhi u loi riel4 *hc tr3n rorm. C@ )EQ)0 <_+<M* <IN&UT TH&E1+,-#.t NAME1T#et* </_+<M* %c gi trD c,# thuc tnh Tk&q0 Jgc Dnh gi trD c,# Tk&q l teit; nu trong t#g (l&cT *h!ng nh9: thuc tnh Tk&q th loi in:ut boieO l teit

Tr#ng ut

Gio Trnh Thit K Web

TqjT &S11Wso %~q%Kpj sSo( ~(ooql sq1qT 1cpJ(T TqjTSsqS pcTTl (JSGq V7 89: html he#4titleKorm'title'he#4 bo4y rorm t#ble tr t4 ni4th_\\KirOtl#me0 't4 t4in:ut n#me KirOtn#me't4 'tr tr t4L#Otl#me0 't4 t4in:ut n#me L#Otn#me't4 'tr tr t4S44reOO0 't4 t4in:ut n#me S44reOO't4 'tr 't#ble 'rorm 'bo4y 'html

WWW.vietnoiviet.com

teit

1. T#et ,(e: ~: v}n bCn; 4o ng8@i OP 4)ng nh9: vo C@ )EQ): <IA)5t T0)#1[T#et[ V 45#1[V 45#[ N "#1[A "#[ \$]#1A M e4#A!tE1"* l#me 0 t3n 4$ li<u u vo Oerver ^#lue0 o$ li<u b#n u c On trong teit boi 1ie0 chi u rng c,# teit boi tnh bYng O+ *f tV 6mgc Dnh l F\7 J#ilength0 O+ *f tV t+i # c th? nh9: vo teit boi

Tr#ng ub

Gio Trnh Thit K Web

WWW.vietnoiviet.com

2. TR( ED) & %%B('8: lh$ng *f tV nh9: vo hi?n thD 48"i 4ng 4Iu chIm ; th!ng tin Oe *h!ng bD m ho *hi gPi l3n Oerver C@ )EQ): <IA)5t T0)#1[) %%B('8[ N "#1[A "#[ %$]#1A " e4#A!tE1A* 1ie0 chi u rng c,# h: &#OOnor4; tnh bYng *f tV J#ilength0 1+ *f tV t+i # c th? nh9: vo h: &#OOnor4 ^ 4)0 html he#4titleKorm'title'he#4 bo4y rormt#ble tr t4 ni4th_\\cOerl#me 't4 t4in:ut n#me cOerl#me't4 'tr tr t4&#OOnor40 't4 t4$A)5t T0)#1) %%B('8 n#me &#OOnor4't4 'tr 't#ble'rorm 'bo4y 'html

:#OOnor4

3. CE#.l,(e: ~: chRn; ng8@i iem c th? nh 4Iu nhi u chec*boi trong c5ng _b C@ )EQ)0 <IA)5t T0)#1[CE#.l,(e[ N "#1[N "#[ V 45#1[V 45#[ CE#.l#8* NEA l#me0 t3n c,# chec*boi ^#lue0 ic Dnh mNi gi trD cho mNi h: chec*boi 8Wc gPi cho Oerver *hi ng8@i iem nh 4Iu vo chec*boi %hec*e40 thuc tnh ? h: chec* boi 8Wc chRn mgc Dnh V7 89: html he#4titleKorm'title'he#4 bo4y rormt#ble tr t4 ni4th]\ v#lignto:~obby0 't4 t4 (n:ut Ty:e%hec*boi l#meOt ^#luenh#c %hec*e4 JuOicbr

Tr#ng u`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

(n:ut Ty:e%hec*boi l#meOt ^#luerilm Kilmbr (n:ut Ty:e%hec*boi l#meOt ^#luetheth#o 1:ort 't4 'tr 't#ble'rorm 'bo4y 'html

chec*boi
:. < 8$( ,5tt(A0 %ho :h: ng8@i iem chT chRn mt tuz chRn ti mNi th@i i?m C@ )EQ): <$A)5t t0)#1h' 8$(h A "#1hA "#h 3 45#1hV 45#h .E#.l#8*NEA l#me0 t3n c,# r#4io; *t n+i cc r#4io button v"i nh#u ^#lue0 lh$ng 4$ li<u Oe g$i n Oerver *hi r#4io button 8Wc chRn %hec*e40 thuc tnh ? r#4io button 8Wc chRn mgc Dnh V7 89:
<html>

he#4titleKorm'title'he#4 bo4y rormt#ble tr t4 v#lignto:cOer ror't4 t4 in:ut ty:er#4io n#meuOe v#luehome~omebr in:ut ty:er#4io n#meuOe v#luebuOpuOineOObr in:ut ty:er#4io n#meuOe v#luegovGovernmentbr in:ut ty:er#4io n#meuOe v#luee4q4uc#tion#l (nOtitutionbr in:ut ty:er#4io n#meuOe v#lueothertherbr 't4 'tr 't#ble'rorm 'bo4y 'html

N. \5,"$t B5tt(A: TIt cC th!ng tin c,# ng8@i iem nh9: vo Oe 8Wc gPi n Oerver *hi ng8@i iem clic* n-t 1ubmit C@ )EQ): <IA)5t T0)#1[\5,"$t[ V 45#1[\5,"$t M#%% !#[ N "#1[N "#[*

Tr#ng G\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

1ubmit JeOO#ge0 L ch$ iuIt hi<n tr3n putton l#me0 t3n c,# button U. <#%#t B5tt(A0Thit l9: gi trD b#n u c,# tIt cC cc i u *hi?n tr3n rorm C@ )EQ): <IA)5t T0)#1['#%#t[ V 45#1[<#%#t M#%% !#[ N "#1[N "#[* % th? to n-t seOet v 1ubmit bYng hnh Cnh v"i c- :h:0 <B5tt(A T0)#1['#%#t[ N "#1['#%#t[ V 45#1['#%#t[* NEA .En 4P t'Q$ <I" !# %'.1[I" !#.!$` *NEA .En 4P )Es$</B5tt(A*

V7 89:

a. B5tt(A: l-t 45ng ? thVc hi<n cc l<nh 4o ng8@i OPn 4)ng 8# r# C@ )EQ): <$A)5t t0)#1h,5tt(Ah A "#1hB5tt(Ah 3 45#1hB5tt(Ah* d. H$88#A: l cc riel4 m ng8@i iem *h!ng nhn thIy tr3n trnh 4uy<t; nh8ng vyn l mt :hn tP tr3n rorm. ~i44en riel4 45ng ? l8u tr$ th!ng tin trong cc rorm tr8"c; cc th!ng tin ny cn i *m v"i cc 4$ li<u trong rorm hi<n hnh m *h!ng mu+n ng8@i iem nh9: li C@ )EQ): <IA)5t T0)#12E$88#A2 N "#12N "#2 V 45#12V 45#2* 4a&e0 t3n m! tC ng{n gRn th!ng tin cn l8u tr$ Oalue0 Th!ng tin cn l8u tr$

VI.2.2.

\#4#.t$(A L$%t:

1. C'() 8(BA "#A5: C@ )EQ)0 <\#4#.t N "#1[N "#[ \$]#1A M54t$)4#* <+)t$(A V 45#1[V 45#[ %#4#.t#8* +)t$(A 1 <+)t$(A V 45#1[V 45#[ * +)t$(A 2 6 </\#4#.t* lhn0Gi"i thi<u Jenu l#me0 t3n 4$ li<u u vo Oerver 1ie0 l chi u c#o c,# menu tnh bYng hng ch$ Julti:le0 l thuc tnh cho :h: chRn nhi u m)c 6liOtboi7 1electe40 m)c 8Wc chRn mgc Dnh ^#lue0 ic Dnh 4$ li<u gEi cho Oerver nu m)c 8Wc chRn

Tr#ng G_

Gio Trnh Thit K Web V7 89:

WWW.vietnoiviet.com

html he#4titleoro:4onn menu'title'he#4 bo4y rorm Oelect l#me&ro4uct o:tion v#lue_1c#nJ#Oter o:tion v#lueu1c#nJ#Oter (( o:tion v#lueGL#Oer&rint _\\\ o:tion v#lue] L#Oer&rint ]\\\ o:tion v#luea&rint'Oc#n _]\ o:tion v#lueF &rint'Oc#n F]\ '1elect 'rorm 'bo4y 'html 2. N5 tEK" tE5D. t7AE M54t$)4# tEL t OVW. 8RA! 4$%t,(e html he#4titleoro:4onn menu'title'he#4 bo4y rorm Oelect l#me&ro4uct Oie] Julti:le o:tion v#lue_1c#nJ#Oter o:tion v#lueu1c#nJ#Oter (( o:tion v#lueGL#Oer&rint _\\\ o:tion v#lue] L#Oer&rint ]\\\ o:tion v#luea&rint'Oc#n _]\ o:tion v#lueF &rint'Oc#n F]\ '1elect 'rorm 'bo4y'html 3. &EYA t +&TG<+U&: 8Wc OP 4)ng ? nhm cc chRn lV# thnh cc nhm ri3ng. ^ 4)0 ~TJL ~qSoTitlecOing the :tion Grou:'Title'he#4 pok KsJ #ction ht::0 '' OomeOite.com ' :roceOOrorm metho4 :oOt 1qLq%T n#me courOe &TGsc& &T(l v#lue v(nternetintrow(ntro4uction to the (nternet &T(l v#lue v(ntrohtmlw(ntro4uction to ~TJL &T(l v#lue v(ntronebw(ntro4uction to the neb :#ge 4eOigning '&TGsc& &TGsc& &T(l v#lue vvbintrow^iOu#l p#Oic x Sn (ntro4uction &T(l v#lue vvb4evw^iOu#l p#Oic x S::lic#tion oevelo:ment '&TGsc& '1qLq%T 'KsJ'pok'~TJL

Tr#ng GF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

o:tgrou:

VI.2.3.

T#etA'# : HD) 3rA ,sA .E( )E) AEo) AE$P5 8yA!

C@ )EQ): <T#etA'# N "#1[A "#[ <(B%1A C(4%1" W' )* C#` 54t t#et </t#et '# * *o"#0 O+ 4mng c th? nh9: vo TeitSre# 6mgc Dnh l G7 Col#0 rng c,# teit#re# 6tnh bYng O+ *f tV; mgc Dnh l G\7 Wra'0 cc 4mng ch$ tV ng 4n r# trong l c,# v5ng teit #re#; ^#lue0 virtu#l;:hyOic#l V7 89: html he#4titleTeit#re#'title'he#4 bo4y t#ble tr t4 v#lignto: %ommentO 't4 t4teit#re# ronOG colO]\ n#mecommentO nr#:virtu#l'teit#re# 't4 'tr 't#ble 'bo4y 'html

Tr#ng Gu

Gio Trnh Thit K Web

WWW.vietnoiviet.com

VI.2.:. NEA: CA! OI tR( AEA 4$KA lt 3z$ tEbAE )EYA O$ l" C@ )EQ):
<L ,#4 _('1[$8A "#[* ND$ 85A! 4 ,#4</4 ,#4* Idna&e0 l gi trD c,# th)!c tnh (o trong thnh :hn Korm t8Mng 2ng V7 89: ~TJL ~qSoT(TLqcOing L#belO'T(TLq'~qSo pok KsJ #ction htt:0 '' OomeOite.com metho4 :oOt t#ble tr t4LSpqL ror rirOtn#meKirOn#me0 'LSpqL't4 t4(l&cT ty:eteit i4rirOtn#me't4 'tr tr t4LSpqL ror l#Otn#me L#Ot n#me0 'LSpqL't4 t4(l&cT ty:e teit i4 l#Otn#meps't4 'tr 't#ble 'KsJ pok '~TJL

L#bel

VI.2.N.

_$#48%#t: NE" .Q. Ou$ tVWA! !$uA! AE 5 3b( "Dt )EYA 4(!$.

C@ )EQ): <_$#48%#t* <L#!#A8 A4$!A1[4#`tS '$!Et[*CE@ tE7.E </L#!#A8* CQ. tEbAE )EYA t'(A! AE" </_$#48%#t* /T#glegen40 to ch- thch cho nhm /Slignlert; right0 chT vD tr c,# ch- thch V7 89: ~TJL ~qSoT(TLqob #::lic#tion'T(TLq'~qSo pok ~_%qlTqsKlT 1(q G %Ls KoreOtgreenS::lic#tion Korm '%qlTqs'KlT'~_ ~spsKsJ #ction vhtt:0 '' OomeOite.com ' :roceOOrormw metho4 v:oOtw& K(qLo1qT LqGqlo&oOition'LqGqlo S::lic#tion ror the :oOt or0 (l&cT n#me n#me ty:e teit t#bin4ei _

Tr#ng GG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

'K(qLo1qT K(qLo1qT LqGqlo1ei'LqGqlo (l&cT n#me Oei ty:e r#4io v#lue J#le t#bin4ei G J#le (l&cT n#me Oei ty:e r#4io v#lue Kem#le t#bin4ei G Kem#le 'K(qLo1qT K(qLo1qT LqGqloq4uc#tion#l u#liric#tionO'LqGqlo (l&cT n#me Bu#lir ty:er#4io v#lue gr#4 t#bin4ei ] Gr#4u#te (l&cT n#me Bu#lir ty:er#4io v#lue:oOtgr#4 t#bin4ei] &oOtgr#4u#te 'K(qLo1qT K(qLo1qT LqGqloL#ngu#ge *nonn'LqGqlo (l&cT n#me l#ng ty:echec*boi v#lue engliOh t#bin4ei a qngliOh (l&cT n#me l#ng ty:echec*boi v#lue rrench t#bin4ei t Krench (l&cT n#me l#ng ty:echec*boi v#lue germ#n t#bin4ei b Germ#n 'K(qLo1qT K(qLo1qT LqGqlo &erOon#l (nrorm#tion'LqGqlo l#me0 (l&cT n#me n#me ty:e teit t#bin4ei Fps TqjTSsqS n#me #44reOO ronO u colO u\ t#bin4ei vuw qnter #44reOO'TqjTSsqS 'K(qLo1qT 'KsJ 'pok'~TJL

Tr#ng G]

Gio Trnh Thit K Web VI.2.U. p$P5 lE$IA .Q. )EYA t t'KA `('":

WWW.vietnoiviet.com

1. pJAE tE t| T ,0 o5ng :hm t#b ? 4i chuy?n gi$# cc +it8Wng trong rorm; mgc Dnh theo th2 tV c,# m ~TJL; mu+n Dnh li th2 tV t# 45ng thuc tnh T ,IA8#e1A trong t#g to cc thnh :hn c,# rorm; trong n l th2 tV c,# t#b; c gi trD tH \ n uFtat Trong mt rorm t# th8@ng Dnh th2 tV t#b cho cc thnh :hn 0 teitboi; :#OOnor4; chec*boi; r#4io button; teit#re#; menu v button 2. TR( )E7" tct0 %ch to0 Trong t#g to cc :hn tP c,# rorm t# 45ng thuc tnh A..#%%l#01[&E7" tct[ 1P 4)ng :hm t{t0 lhIn tU hW: :hm A4t&E7" tct

Tr#ng Ga

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG VII:
VII.1.

CA\CACING \THLE \HEETk C\\

GII THIU
pCng *i?u 6Otyle Oheet7 nhYm thoC mCn nhu cQu thQm m; ti<n 4)ng nh8ng gi$ tnh th+ng nhIt cho tr#ng ~TJL. %11 cho :h: Dnh 4#ng mt O+ tnh chIt th!ng th8@ng c5ng mt l-c cho tIt cC cc +i t8Wng tr3n tr#ng 8Wc nh 4Iu bYng t#g gc bi<t Ti<n ch c,# %11 l 0 Tit *i<m th@i gi#n Khi th#y Ui Dnh 4ng chT cn th#y Ui %11; cc tr#ng *hc Oe tV ng c9: nh9t OV th#y Ui % th? 45ng cc %11 c5ng v"i #v#1cri:t ? to cc hi<u 2ng gc bi<t pIt lWi c,# %110 Kh!ng mt trnh 4uy<t no chI: nh9n n hon ton &hCi mIt th@i gi#n ? hRc cch OP 4)ng

VII.2.

CCH T+:

Jt bCng myu 8Wc to bYng mt t3n t#g v mt h#y nhi u cc Dnh nghh# ? ic Dnh cch th2c hi?n thD c,# cc +i t8Wng 8Wc nh 4Iu bYng t#g

VII.2.1. &EqA 4(R$ 3b .Q.E tR(:

% u loi 0 (nline Otyle (ntern#l Otyle qitern#l Otyle . IA4$A# %t04#: L *i?u 8Wc gn cho mt 4mng hogc mt on v}n bCn; bYng cch OP 4)ng thuc tnh Otyle b3n trong t#g mu+n Dnh 4ng C@ )EQ): <T !N "# \t04#1[)'()#'t01:3 45#1)'()#'t02: 3 45#26[* ND$ 85A! 3rA ,sA "5uA OJAE 8RA! </T !N "#* ^ 4) 0 ~TJL ~qSo T(TLq1etting &ro:ertieO'T(TLq '~qSo pok & Otyle vcolor0#Bu# ront/ 1tyle0it#lic; teit/ Slign0centerw ThiO :#r#gr#:h h#O #n inline Otyle #::lie4 to it & ThiO :#r#gr#:h iO 4iO:l#ye4 in the 4er#ult Otyle. & %#n you Oee the 1&Sl Otyle color0re44irrerence '1&Sl inthiO line 'pok '~TJL

Tr#ng Gt

Gio Trnh Thit K Web

WWW.vietnoiviet.com

,. IAt#'A 4 %t04# : L bCng myu thch hW: cho tr#ng ri3ng l| v"i nhi u v}n bCn; bYng cch to bCng myu chung tr3n u tr#ng v 45ng cho cC tr#ng ~TJL C@ )EQ): H# 8* <\t04#* T !N "#)'()#'t01: 3 45# 1 )'()#'t02: 3 45# 26 (lp li cho mi tag c thuc tnh cn nh dng! </\t04#* </H# 8* ^ 4) 0 ~TJL ~qSo 1TkLq Tk&qwteit'cOOw ~_;~F color0 limegreen ront/r#mily0 Sri#l '1TkLq '~qSo pok ~_ThiO iO the ~_ element'~_ ~FThiO iO the ~F element'~F ~uThiO iO the ~u element nith itO 4er#ult Otyle #O 4iO:l#ye4 in the bronOer'~u 'pok '~TJL .. Eet#'A 4 %t04# : L mt bCng *i?u 8Wc l8u tr$ thnh mt rile b3n ngoi v 8Wc li3n *t v"i tr#ng ~TJL.pCng *i?u ny Oe 8Wc : 4)ng v Cnh h8Eng cho tIt cC cc tr#ng c,# mt nebOite. CQ.E tR(: To mt t9: tin v}n bCn m"i lh9: t3n cc t#g mu+n Dnh 4ng thuc tnh theo myu0 T !N "#)'()#'t01: 3 45#1 )'()#'t02:3 45#26 L8u t9: tin v"i Dnh 4ng Teit nly v c :hn mE rng ..%% CQ.E 8A! Eet#'A 4 %t04#0 C@ )EQ)0 <H# 8* <L$Al <#41\t04#\E##t T0)#1[t#et/.%%[ H'#`1[tKA to) t$A..%%[* </H# 8*

^ 4)0 To t9: tin \E##t1..%% ~F color0blue ront/Otyle0it#lic &teit/#lign0uOtiry teit/in4ent0b:t ront0_\:t'_]:t vJyri#4 som#nw;w^er4#n#w Tr#ng Gb

Gio Trnh Thit K Web

WWW.vietnoiviet.com

T' A!1.Et" ~TJL ~qSoT(TLq %h#nging the ruleO'T(TLq L(lK sqLOtyleOheet H<E_1[%E##t1..%%w Tk&qwteit'cOOw '~qSo pok ~F %h#nging the ruleO iO run'~F & %h#nging the ruleO m#y not be Ouch run ~FThe ~F element #g#in'~F 'pok '~TJL T' A!2.Et" ~TJL ~qSoT(TLq %h#nging the ruleO'T(TLq L(lK sqLOtyleOheet H<E_1[%E##t1..%%[ Tk&qwteit'cOOw '~qSo pok ~F ThiO 4ocument ueO the Oheet_ Otyle Oheet'~F &1electing thiO o:tion coul4 4elete #ll your rileO ~FThe ~F element #g#in'~F 'pok '~TJL

VII.3.

pNH BNG MU CH+ L& vCLA\\w:

% th? chi# cc yu t+ trong ~TJL thnh cc l": ? : 4)ng *i?u myu hi<u BuC hMn C@ )EQ): Trong :hn 1tyle nh9: c- :h:0 <\THLE* .C4 %%N "#tE5D. t7AE1:!$Q t'J1tE5D. t7AE2:!$Q t'J26 </\THLE* Trong :hn po4y; nh 4Iu :hn nYm trong l": bYng c- :h:0 <B(80* <T !N "# C4 %%1[C4 %%N "#[*ND$ 85A! </T !N "#* </B(80* V7 89: ~TJL ~qSo 1TkLq .n#tercolor0blue .4#ngercolor0re4 '1TkLq '~qSo

Tr#ng G`

Gio Trnh Thit K Web pok : cl#OOn#terteOt n#ter & cl#OO4#ngerteOt 4#nger 'pok'~TJL VII.3.1. pJAE .Q. t ! '$KA! ,$Mt:
o5ng : 4)ng cho mt :hn tP ri3ng bi<t tr3n tr#ng Web C@ )EQ)0 Trong T#g 1tyle nh9: 0

WWW.vietnoiviet.com

T !N "#^ICN "#tE/t7AE1: !$Q t'J1 tE5D. t7AE2: !$Q t'J 26 Trong t#g po4y nh9: 0 <T !N "# IC1ICN "#* ND$ 85A!</T !N "#* V7 89 1: ~TJL ~qSoT(TLq (o 1electorO'T(TLq 1TkLq control color0 re4 KlT/Wq(G~T0pLo '1TkLq '~qSo pok 1&Sl i4controlKire iO thiO color'1&SlThiO :#r#gr#:h h#O no Otyle #::lie4 'pok'~TJL V7 89 20 ~TJL ~qSoT(TLq combining (o #n4 cl#OO 1elector'T(TLq 1TkLq .roreOt color0 greenront/neight0bol4 .4#nger color0 re4ront/neight0bol4 control color0 blueront/neight0bol4 '1TkLq '~qSo pok & cl#OOroreOtgreen thingO & cl#OO4#ngerrire h##r4O qJ cl#OOroreOt more green thingO'qJps qJ cl#OO4#ngermore rire h##r4O'qJ cL L( cl#OO4#ngerthingO th#t burn L( cl#OOroreOtthingO th#t 4ont burn 'cL & i4control n#ter '& 'pok '~TJL

Tr#ng ]\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

VII.3.2. TR( .Q. t ! t5 {:

% F loi t#g chung c th? *t n+i %l#OO h#y cc (o ? to cc t#g tuz f . cn :hXn bi<t +i t8Wng cI: *h+i v cI: hng0 - Z+i t8Wng cI: *h+i nh8 mt on v}n; th8@ng b{t u mt 4mng m"i v c th? ch2# cc +i t8Wng cI: *h+i *hc g[m cc t#g0 &; ~_; po4y; t#ble - Z+i t8Wng cI: hng th8@ng *h!ng to 4mng m"i; th8@ng ch2# v}n bCn v cc yu t+ trong hng *hc g[n cc t#g0 p; Kont - %c t#g o(^ v 1&Sl0 c th? *t n+i v"i cc :hn tP cI: *h+i v (o ? to r# cc t#g tuz f. Trong o(^ :h5 hW: v"i cc +i t8Wng cI: *h+i; 1&Sl :h5 hW: v"i cc +i t8Wng cI: hng 1. TR( t ! .?) lEu$ t5 {: %- :h:0 pYng cch th3m mt l": hogc (o vo t#g o(^ v Dnh myu cn c Trong :hn 1tyle hogc mt bCng myu b3n ngoi t# nh9:0 CIV.C4 %%N "#tE/t7AE1:!$Q t'J 1 tE5D. t7AE 2: !$Q t'J 26 v"i %l#OOl#me l t3n l": Oe OP 4)ng. hogc0 CIV^I8A "#tE5D. t7AE1:! t'J 1 tE5D. t7AE 2: !$Q t'J 26 v"i (ol#me l t3n c bi<t c,# t#g o(^ : 4)ng t#g cI: *h+i tuz f vo tr#ng ~TJL0 Ti u :hn v}n bCn mu+n Dnh 4ng; nh9: c- :h: <CIV C4 %%1[C4 %%N "#[ ICA "#1[I8A "#[*ND$ 85A! </CIV* 6b3n trong c th? ch2# cc t#g & hogc ~_7 2. TR( .Q. t ! t'(A! EbA! t5 {: Kt n+i nhi u *i?u Dnh 4ng v}n bCn trong mt t#g %- :h:0 Trong :hn 1tyle; nh9: c- :h:0 \&AN.C4 %%A "# tE/t7AE1:!$Q t'J1 tE/t7AE2: !$Q t'J 26 ~ogc0 \&AN^ICA "# tE/t7AE1:!$Q t'J 1 tE/t7AE 2: !$Q t'J 26 : 4)ng t#g trong hng tuz f vo tr#ng ~TJL0 Ti u on v}n bCn mu+n Dnh 4ng; nh9: c- :h:0 <\&AN C4 %%1[.4 %%A "#[* AD$ 85A! 3rA ,sA</\&AN* ~ogc0 <\&AN IC1[ICN "#[* ND$ 85A! 3rA ,sA</\&AN* 3. CQ. tE5D. t7AE OJAE 8RA! 3rA ,sA: a) ChPn bG ,ont `(Atk` "$40: ` "$40A "#1S ` "$40A "#26 b) /2o chQ nghiBng _(Atk%t04#: $t 4$.

Tr#ng ]_

Gio Trnh Thit K Web

c) /2o chQ -R& _(AtkB#$!Et: ,(48 d) >Cnh cS chQ

WWW.vietnoiviet.com

_(Atk%$]#: eek%" 44E(X. ek%" 44S %" 44S "#8$5"S 4 '!#S ek4 '!#S eek4 '!# E(X. _(Atk%$]#:12)t v!$Q t'J .9 tEIw % th? Dnh 4ng cc thuc tnh ch$ nghi3ng; 9m v cE ch$ c5ng mt l-c0 _(At: $t 4$. ,(48 %$]# e) MDu c,# chQ C(4(': .(4('N "#/^''!!,, ,) MDu n n cEa chQ0 B .l!'(5A8:.(4('N "#/^''!!,, g) >Cnh *hoCng cTc giQa cTc tU1 cTc (V tW W('8k%) .$A!:A 6n0 *hoCng cch gi$# cc tH; tnh bYng :iiel7 L#tt#'k%) .$A!:A 6n0 *hoCng cch gi$# cc tH; tnh bYng :iiel7 h) Canh l cho vXn b3n0 T#etkA4$!A: 4#`tS '$!EtS .#At#'S -5%t$`0 i) /hay -Yi d2ng chQ T#etkt' A%`('": . )$t 4$]#S 5))#'. %#S 4(B#'. %# :. pJAE 8RA! 8 AE %Q.E0 LiOt/Otyle0circle chIm trmn rUng LiOt/Otyle0 4iOc chIm trmn en LiOt/Otyle0 OBu#re chIm en vu!ng LiOt/Otyle0 4ecim#l nh O+ C r9: LiOt/Otyle0 loner/#l:h# th2 tV #l:h# LiOt/Otyle0 u::er/#l:h# th2 tV #l:h# ch$ in ho# LiOt/Otyle0 u::er/rom#n O+ l# m ho# LiOt/Otyle0 loner/rom#n O+ l# m th8@ng N. pJAE 8RA! "b5 APA0 po4ycolor0rrggbb bloc*Buoteb#c*groun4/color0rrggbb b#c*groun40b#cgroun4/color b#c*groun4 0b#c*groun4/im#ge b#c*groun40 b#c*groun4 x:oOition b#c*groun40 b#c*groun4/re:e#t b#c*groun40 b#c*groun4/#tt#chment U. pJAE 8RA! H0)#'t#et 4$Al STeit/oecor#tion0none 0 *h!ng gch 48"i S0viOite4color0rrggbb S0lin*OtyleO cho vD tr ch8# 8Wc iem S0#ctiveOtyle cho nh$ng lin* #ng clic* S0hoverOtyle *hi tr l8"t Bu# lin*

Tr#ng ]F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG VIII:
VIII.1.

GII THIU C<EAMWEAVE<

GII THIU
J#crome4i# ore#mne#ver Jj F\\G l mt c!ng c) thit * neb chuy3n nghi<:; :hn c+t li c,# n l ~TJL 6~y:erTeit J#r*u: L#ngu#ge7; l mt c!ng c) mnh; 4A 45ng; bn c th? 4A 4ng thit * v :ht tri?n mt tr#ng neb hogc mt nebOite l"n ore#mne#ver Jj F\\G l mt c!ng c) trVc Bu#n; trong c th? bU Oung #v#Ocri:; bi?u myu; bCng bi?u v nhi u loi +i t8Wng *hc m *h!ng cn vit mt on m no. ore#mne#ver Jj F\\G OP 4)ng cc c!ng ngh< neb; chuQn ~TJL v cung cI: *hC n}ng t8Mng thch v"i cc trnh 4uy<t neb c.; v"i ore#mne#ver Jj F\\G bn c th? thit * bYng ch oeOign vien hogc %o4e vien hogc %o4e #n4 oeOign

VIII.2.

CI pT
J#crome4i# ore#mne#ver Jj F\\G l mt ch8Mng trnh trong b J#crome4i# Jj; bn n3n ci gt tr3n my trRn b J#crome4i# Jj ? c y , cc ch8Mng trnh hU trW cho ore#mne#ver thit * tr#ng neb : v Oinh ng hMn 1#u *hi ci gt; bn *hEi ng J#crome4i# or#emv#erver Jj F\\G theo 8@ng 4yn 1t#rt &rogr#mO J#crome4i# J#crome4i# ore#mne#ver Jj F\\G

VIII.3.

MN HNH C<EAMWEAVE<:

1. IA%#'t B '0 G[m cc ch2c n}ng ti<n ch 45ng ? chn cc +i t8Wng vo tr#ng neb; v Dnh cc thuc tnh cho +i t8Wng %ommon0 %hn cc +i t8Wng0 (m#ge; Kl#Oh; o#te; Tem:l#te; = L#yout0 %h2# cc c!ng c) trnh by tr#ng; g[m u ch 0 1t#n4#r4; qi:en4e4; L#yout KormO0 %h2# cc c!ng c) to Korm Teit0 o5ng Dnh 4ng v}n bCn ~TJL0 ch2# cc c!ng c) to tr#ng neb bYng co4e vien 2. C(.5"#At T((4, '0 %h2# cc n-t cho :h: iem tr#ng neb E 4ng oeOign h#y 4ng %o4e 1hon co4e vien0 jem 4ng tr#ng ~TJL 1hon oeOign vien0 jem tr#ng 4ng thit *; OP 4)ng cc c!ng c) c,# ore#mnerver 1hon co4e #n4 4eOign vien0 %hi# cP# OU lm F :hn0 :hn tr3n 4ng co4e vien; :hn 48"i 4ng oeOign vien Title0 ti3u c,# tr#ng Web &revien'oebug in pronOer0jem *t BuC tr#ng neb th!ng Bu# trnh 4uy<t neb oocument Win4on0 %P# OU 45ng ? to v hi<u chTnh tr#ng Web 3. &'()#'t$#% IA%)#.t('0 ~i?n thD cc thuc tnh c,# cc +i t8Wng #ng 8Wc chRn; [ng th@i cho :h: chTnh OP# cc thuc tnh :. & A#4 !'(5)%0 L nhm cc &#nel cho :h: BuCn lf cc +i t8Wng trong tr#ng Web p9t ' t{t cc th#nh &#nel0 %hRn menu Win4on %hRn th#nh &#nel t8Mng 2ng JE rng cc th#nh &#nel0 %lic* vo m.i t3n E gc tri c,# mNi &#nel

Tr#ng ]u

Gio Trnh Thit K Web

WWW.vietnoiviet.com
&#nel grou:

(nOert b#r

oocument toolb#r

oocument nin4on

T#g 1elector

&ro:ertieO (nO:ector

Win4on Oie

oonnlo#4 time

1ite :#nel

N. \$t# & A#l0 %ho :h: BuCn lf cc t9: tin; th8 m)c trong b Web 6gi+ng Win4onO qi:lorer7. Th#nh c!ng c) c,# 1ite &#nel %onnect'oiOconnect0 %h2c n}ng *t n+i' ng{t *t n+i v"i semote Oite; chT c tc 4)ng v"i semote Oite OP 4)ng :h8Mng th2c truy n KT&; WeboS^ hogc 1ourceO#re; mgc Dnh ore#mne#ver Jj F\\G Oe ng{t *t n+i *hi remote Oite nu n E trng thi ch@ u\ :h-t. % th? th#y Ui th@i gi#n ny bYng cch chRn0q4it' &rererenceO'1ite serreOh0 %h2c n}ng c9: nh9t t9: tin; th8 m)c cho semote Oite gi+ng v"i Loc#l 1ite c,# chnh n. Th8@ng *h!ng OP 4)ng ch2c n}ng ny v *hi to 1ite m"i ore#mne#ver Jj F\\G lu!n nh 4Iu chec* vo m)c serreOh semote Kile liOt Sutom#tic#lly Get Kile0 ch2c n}ng ch: Kile tH remote 1ite vo Loc#l 1ite. Tuz thuc vo qn#ble Kile %hec* in v %hec* out m cc t9: tin ch: vo c thuc tnh VMc :h: ghi h#y chT Rc &ut Kile0 %h: t9: tin tH Loc#l 1ite l3n semote 1ite %hec* out rileO0 Ki?m tr# t9: tin E semote 1ite ch: vo h#y ch: ch[ng l3n t9: tin E Loc#l 1ite

Tr#ng ]G

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%hec* in rileO0 Ki?m tr# t9: tin E Loc#l 1ite ch: vo h#y ch: ch[ng l3n t9: tin E semote 1ite qi:#n4'%oll#:Oe0 hi?n thD F cP# OU Loc#l 1ite v semote 1ite U. \t t5% , '0 Th#nh trng thi; nYm 48"i y c,# oocument Win4on; hi?n thD T#g 1elector; Win4on Oie; oocument Oie v oonnlo#4 time. T#g 1elector0 ~i?n thD cc t#g ~TJL ti vD tr hi<n hnh c,# con tr; *hi to tr#ng Web m"i th :hn tP 4uy nhIt hi?n thD trong T#g 1elector l pok. oocument Oie #n4 oonnlo#4 time0 Kch cE 8"c chHng c,# ti li<u v th@i gi#n tCi ti li<u iu+ng; c th? i u chTnh t+c 4onnlo#4 bYng cch0 o %hRn q4it &rererenceO %hRn m)c 1t#tuO b#r o Ti m)c %onnection O:ee4 %hRn t+c t8Mng 2ng Win4on Oie0 ~i?n thD *ch th8"c hi<n ti c,# ti li<u; 8Wc tnh bYng &iiel. Khi Dnh *ch th8"c c,# tr#ng neb :hCi tnh n vi<c O#o cho #n ton +i v"i mRi :hXn giCi. %ch th#y Ui *ch th8"c c,# ti li<u theo mt trong cc *ch th8"c Dnh On hogc theo mt gi trD *hc0 %lic* chut vo m.i t3n b3n cnh Win4on Oie o %hRn mt *ch th8"c c On; hogc o %hRn q4it Oie ? Dnh mt *ch th8"c *hc o Trong h: thoi &rererenceO o Wi4th0 Dnh chi u rng o ~eight0 Dnh chi u c#o

VIII.:.

K H+CH THIT K M}T WEB\ITE VIII.:.1. CQ. 0K5 .Y5 . ,sA lE$ tE$t l B#,%$t#:
jc Dnh y3u cu v m)c ch c,# WebOite %huQn bD ni 4ung cho cc tr#ng &hc thCo *hu!n myu 6Tem:l#te7 cho tr#ng; th8@ng cc tr#ng c c5ng ch, th OP 4)ng chung mt tem:l#te jc Dnh cIu tr-c c,# WebOite; c u *i?u cIu tr-c0 o Tuyn tnh o &hXn cI: o ~nh ch: Tuz theo m)c ch c,# WebOite m chRn *i?u :h5 hW:

VIII.:.2. TE ( tQ. tR( ,D W#, . ,sA:

1. KE$ tE$t l "Dt W#,%$t# .YA i5 A tq" OA 2 3?A OP: li 4ung ch, chnh; tH chRn b+ c)c; h< mu cho t8Mng 2ng; 6v 4)0 WebOite th8Mng mi :hCi Ong O,#; r rng v b+ c)c; =7 O#u thu th9: y , ti li<u; :hXn nhm theo ni 4ung; tH Buyt Dnh cn b#o nhi3u tr#ng; ni 4ung c,# tHng tr#ng %hRn hnh Cnh; logo; p#nner; h< th+ng n-t li3n *t; Cnh minh ho; Cnh b+ c)c; Cnh tr#ng tr= &hc ho OM [ li3n *t tr3n giIy ? thIy r m+i li3n *t gi$# cc tr#ng Mn trong

mt nebOite 2. CQ.E tR( "Dt W#,%$t# "z$0 Tr#ng ]]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Trong oocument Win4on; chRn 1ite J#n#ge OiteOlen 1ite iuIt hi<n h: thoi 1ite oerinition %hRn T#b S4v#nce; trong m)c Loc#l inro0

1ite na&e0 gt t3n 1ite; t3n ny iuIt hi<n trong h: thoi q4it 1ite Loc#l *oot Molder0 Kh#i bo 8@ng 4yn c,# rol4er l8u tr$ WebOite tr3n U h# c2ng bYng cch nh9: 8@ng 4yn n th8 m)c hogc %lic* vo bi?u t8Wng Kol4er v chT 8@ng 4yn n rol4er oer#ult I&age# ,older0 *h#i bo 8@ng 4yn n th8 m)c ch2# cc hnh Cnh c,# tr#ng Web; th8 m)c ny :hCi nYm trong Loc#l root Kol4er *h#i bo E tr3n; tXt cC cc hnh Cnh trong tr#ng neb mgc Dnh 8Wc l8u trong th8 m)c ny serreOh +ocal ,ile li#t ;uto&atically0 *hi 8Wc chRn; ore#mne#ver tV ng c9: nh9t cI tr-c rile trong bCng Loc#l Kol4er c,# 1ite &#nel; vi<c c9: nh9t ny Oe OP 4)ng mt t ti nguy3n c,# h< th+ng; t# c th? c9: nh9t *hi cn bYng cch chRn ^ien serreOh Loc#l trong 1ite Win4on ~TT& ;ddre##0 lh9: D# chT c,# Oite; ore#mne#ver Oe OP 4)ng D# chT ny ? BuCn lf Oite v li3n *t cc rile trong Oite

Tr#ng ]a

Gio Trnh Thit K Web

WWW.vietnoiviet.com

qn#ble Cache0 *hi 8Wc chRn; ore#mne#ver to mt rile l8u tr$ cc th!ng tin v lin* gi$# cc rile trong Oite. 1#u *hi chRn iong %lic* K %lic* oone ? hon tIt c!ng vi<c to Oite m"i JE Oite &#nel 0bYng cch chRn Win4on Kile t# thIy 8Wc th8 m)c ch2# 1ite; nu ch8# to Kol4er ch2# hnh Cnh th ti Xy bn %lic* :hCi chut vo t3n 1ite %hRn len Kol4er lh9: t3n th8 m)c l (m#geO. Trong nebOite :hCi ch2# F rol4er 0 rol4er ~TJL g[m cc rile .htm v rol4er im#ge ch2# hnh Cnh c,# nebOite Z? mE rng cP# OU 1ite &#nel %lic* chRn n-t qi:#n4'%oll#:Oe

3. K$I" t' W#,%$t# O tR(0

chRn t3n Oite cn mE

qi:#n4'%oll#:Oe

:. M "Dt %$t# . %A0

%ch _0 %lic* vo menu hi?n thD t3n 1ite tr3n Toolb#r c,# 1ite &#nel; chRn t3n 1ite mu+n mE trong 4#nh Och iU iu+ng %ch F0 %hRn menu 1ite J#n#ge 1iteO %hRn t3n 1ite mu+n mE oone %hRn menu 1ite J#n#ge 1iteO %hRn t3n 1ite cn hi<u chTnh %lic* n-t q4it juIt hi<n h: thoi 1ite oerinition thVc hi<n K oone Tohi<u mtchTnh 1ite m"i

N. H$M5 .EAE \$t#0

~i<u chTnh 1ite To mt 1ite m"i gi+ng Oite #ng chRn jo 1ite juIt th!ng tin mt 1ite r# t9: tin .Ote oyn nh9: th8 m)c; t9: tin vo 1ite Tr#ng ]t

Gio Trnh Thit K Web

WWW.vietnoiviet.com

U. CA! ELAE B$t" ) 4b" sAE APA .E( t' A! W#,:

Trong cP# OU oocument; chRn Jo4iry &#ge &ro:ertieO; iuIt hi<n h: thoi &#ge &ro:etieO; chRn m)c S::e#r#nce Teit %olor0 chRn mu cho teit p#c*groun4 %olor0 %hRn mu n n cho tr#ng p#c*groun4 (m#ge0 %hRn t9: tin Cnh lm n n bYng cch clic* n-t pronOe=

VIII.:.3. TE$t l .Q. t' A! W#, OA

Ti mn hnh *hEi ng chRn m)c %re#te nen %hRn ~TJL

Tr#ng ]b

Gio Trnh Thit K Web

WWW.vietnoiviet.com

juIt hi<n oocument Win4on; Xy l nMi thit * trnh by ni 4ung c,# tHng tr#ng neb Mn; O#u *hi thit * iong mNi tr#ng tr#ng neb 8Wc l8u 48"i 4ng mt t9: tin c :hn mE rng .~TJ 6hogc .~TJL7 trong th8 m)c 8Wc *h#i bo trong m)c Loc#l soot Kol4er

VIII.:.:. TR( 4$KA lt .Q. t' A! W#, OA tEbAE "Dt W#,%$t#

1. CQ.E tR(0 Z? to li3n *t; cn :hXn bi<t tr#ng ngu[n v tr#ng ch. Tr#ng ngu[n l tr#ng ch2# cc n-t li3n *t 6c th? l +i t8Wng Cnh hogc ch$7 Tr#ng ch l tr#ng cn li3n *t n JE tr#ng ngu[n %hRn n-t li3n *t Trong &ro:ertieO (nO:ector; ti m)c lin*; thVc hi<n mt trong h#i cch O#u0 CTch _0 %lic* n-t *o m.i t3n chT n t3n t9: tin cn li3n *t trong 1ite &#nel CTch F0 %lic* n-t mE h: thoi 1elect Kile o Loo* in0 %hRn t3n 1ite o Kile n#me0 %hRn t3n tr#ng Web cn li3n *t n

2. K$I" t' EM tEuA! 4$KA lt t'(A! \$t#0

Kile %hec* &#ge %hec* lin*O juIt hi<n seOult inO:ector; %hRn nhm Lin* %hec*er Ti m)c 1hon; chRn pro*en Lin*O %t KileO l 4#nh Och cc t9: tin c ch2# li3n *t gy %t pro*en lin*0 %h2# t3n t9: tin *h!ng li3n *t 8Wc &h# 48"i th+ng *3 O+ tr#ng *i?m tr#; tUng O+ li3n *t; O+ li3n *t t+t; O+ li3n *t gy v O+ li3n *t ngoi %c 4ng *i?m tr# li3n *t0 %hec* lin*O in %urrent oocument0 *i?m tr# li3n *t trong tr#ng hi<n hnh

%hec* lin*O ror entire 1ite0 *i?m tr# li3n *t cho tIt cC cc tr#ng trong Oite %hec* lin*O ror 1electe4 rileO 'rol4erO in 1ite0 *i?m tr# nhm t9: tin' th8 m)c 8Wc chRn trong 1ite Tr#ng ]`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

3. #" lt i5s ,A! t'LAE 850Mt 3b E$M5 .EAE %hRn Kile ' &revien in pronOer ' iei:lore ~ogc %lic* n-t &revien 'oebug in pronOer :. Kt Au$ 3b OV W#,%$t# 4KA W#, \#'3#' %n :hCi l8u li tIt cC cc t9: tin tr8"c *hi iuIt bCn WebOite. juIt bCn WebOite l ch: th8 m)c g+c 6root7 c,# 1ite l3n 1erver c,# cc nh cung cI: 4Dch v) (nternet 6(1&7. Trong J#crome4i# oremne#rver Jj F\\G; iuIt bCn WebOite cn c b8"c *t n+i v"i 1erver tr8"c r[i m"i &ut Kile l3n O#u %ch thVc hi<n0 Trong 1ite &#nel; chRn 1ite cn iuIt bCn %lic* n-t &ut KileO; ? 8# 1ite l3n 1erver Kt n+i v"i semote 1ite0lu *hi to 1ite m"i t# ch8# ic Dnh semote 1ite 6Th8 m)c ch2# 1ite tr3n 1erver7; n3n O#u *hi clic* &ut Kile Oe iuIt hi<n th!ng bo y3u cu *t n+i v"i semote 1ite

Tr#ng a\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%lic*%hRn th8 m)c m"i ch2# 1ite

%hRn keO; juIt hi<n h: thoi 1ite oerinition %hRn m)c semote (nro; trong *hung ScceOO; chRn Loc#l' letnor* 6giC l9: mt th8 m)c tr3n mng c)c b; hogc tr3n mt th8 m)c *hc c,# U h# c2ng7 Ti m)c semote Kol4er; %lic* bi?u t8Wng Kol4er; ? tm th8 m)c m"i ch2# 1ite

N. 5?t ,sA \$t# 4KA <#"(t# \$t#0 Trong 1ite &#nel; chRn li t3n 1ite cn iuIt bCn %lic* n-t &ut Kile juIt hi<n h: thoi0 Sre you Oure you niOh to :ut the entire Oite %lic* K juIt hi<n h: thoi *t n+i; cc t9: tin v th8 m)c c,# 1ite ln l8Wt 8Wc ch: tH Oite l3n semote 1ite U. K$I" t' 4R$ t'KA <#"(t# \$t# %lic* n-t qi:#n4 trong 1ite &#nel0 Jn hnh chi# lm F :hn0 p3n tri l semote 1ite; p3n :hCi l Loc#l 1ite

VIII.:.N. \$t# M ):
1. #" "Dt \$t# M ): 1ite m#: l mt OM [ cIu tr-c 1ite; n hi?n thD vD tr v OV :hXn cI: c,# cc t9: tin trong 1ite. Jt 1ite *hi 8Wc to y , li3n *t; c th? iem 48"i 4ng 1ite m#: %n :hCi Dnh nghh# tr#ng ~ome&#ge tr8"c hogc trong 1ite :hCi c tr#ng (n4ei.htm Trong 1ite &#nel; chRn J#: vien trong *hung 1ite vien

Tr#ng a_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

~ogc clic* n-t qi:#n4'%oll#:Oe %lic* chRn 1ite J#:

2. TR( 4$KA lt t'(A! \$t# M )0% th? to li3n *t tr#ng mt cch trVc Bu#n v Mn giCn bYng cch OP 4)ng 1ite J#:. %ch thVc hi<n nh8 O#u0 To 1ite m"i trong :hCi c tr#ng (n4ei.htm hogc ~ome &#ge o %hRn 1ite J#n#ge 1iteO %lic* n-t q4it o juIt hi<n cP# OU oerinition %hRn 1ite J#: L#yout o ~ome &#ge0 8@ng 4yn n t9: tin (n4ei Koone

To li3n *t bYng 1iteJ#: o %lic* n-t qi:#n4'%oll#:Oe ? mE rng 1ite &#nel o %lic* chRn n-t 1iteJ#: o Jn hnh iuIt hi<n tr#ng (n4ei.htm trong Oite

To li3n *t :hXn cI:0 o %lic* :hCi tr3n rile (n4ei chRn Lin* to nen Kile

Tr#ng aF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Li3n *t n Kile m"i Li3n *t n Kile

o o o o juIt hi<n h: thoi Lin* to len Kile0 Kile l#me0 lh9: t3n rile Title0 ti3u c,# tr#ng Teit or Lin*0 4mng teit ? li3n *t

To li3n *t nh#nh0 o %hRn t9: tin cn to li3n *t o %lic* bi?u t8Wng li3n *t b3n cnh t9: tin 8Wc chRn o Ko m.i t3n li3n *t n t9: tin li3n *t n

o 1#u *hi li3n *t; 8Wc 1iteJ#:

Tr#ng au

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG I:
I.1.

pNH CNG VN BNk \ CNG C\\

pNH CNG VN BN
%ch nh9: gi+ng nh8 cc trnh Oon thCo v}n bCn *hc; mNi :hn ni 4ung 8Wc :hXn cch bYng cch iu+ng 4mng; nu iu+ng 4mng trong c5ng mt on 6&#r#gr#:h7 th nhIn 1hirt qnter; nu ng{t on th nhIn qnter. Z? hi<u chTnh v}n bCn th8@ng OP 4)ng th#nh c!ng c) &ro:ertieO (nO:ector. %ch tUng But l nh 4Iu *h+i v}n bCn chRn *i?u Dnh 4ng 1P 4)ng th#nh c!ng c) &ro:ertieO (nO:ector0

I.1.1.

_(At:

%ch _0Ti m)c rorm#t %hRn cc he#4ing; Xy l cc Dnh 4ng myu; b#o g[m Kont ch$; *i?u ch$; Oie; =th8@ng 45ng lm ti3u %ch chRn nhm Kont ch$0 %hRn v}n bCn; r[i chRn nhm Kont tr3n Kont menu c,# &ro:ertieO (nO:ector hogc chRn menu Teit Kont. Trong ore#mne#ver; *i?u Kont ch$ 8Wc Dnh thnh tHng nhm; mNi nhm g[m nhi u ront; mt Kont chnh v cc Kont 4V :hmng. % th? to r# cc nhm Kont tuz f bYng cch ti muc Kont %hRn q4it Kont LiOt

%hRn Kont trong *hung Sv#il#ble KontO; %lic* n-t chRn Bu# *hung %hoOen rontO To th3m nhm Kont m"i

8# cc ront 8Wc

Tr#ng aG

Gio Trnh Thit K Web

jo nhm r# *hi Kont LiOt 1{: i: cc nhm Kont theo th2 tV

WWW.vietnoiviet.com

1. _(At %$]#0
%hRn *h+i v}n bCn; %hRn cE ch$ trong m)c 1ie c,# &ro:ertieO (nO:ector; hogc chRn Teit 1ie. 1ie ch$ trong ore#mne#ver g[m _t Kont 1ie; trong c b m2c th? hi<n bYng O+; tH ` n ua v ` m2c th? hi<n bYng ch$ %hRn *h+i v}n bCn; %lic* n-t Teit %olor; chRn mu hogc chRn Teit %olor

2. _(At C(4('0

%lic* n-t Teit color chRn mu 3. C AE 4P O(RA 3rA ,sA

%hRn Teit Slign hogc %lic* c!ng c)

I.1.2.

C AE %Q.E 8RA! 4$Mt lK:

%hRn Teit LiOt cnor4ere4 LiOt0 %hn pullette4 u 4mng r4ere4 LiOt0 Znh O+ th2 tV u 4mng Th#y Ui thuc tnh li<t *30 Zgt 4Iu nhy trong 4#nh Och li<t *3 %hRn Teit LiOt &ro:ertieO hogc clic* n-t LiOt (tem. juIt hi<n h: thoi LiOt &ro:ertieO

LiOt Ty:e0 %hRn *i?u 4#nh Och 6pulletO hogc lumbere47 1tyle0 Loi %hIm trmn hogc vu!ng 1t#rt count0 1+ b{t 4u cho 4#nh Och li<t *3 LiOt item0 len 1tyle0 li<t *3 nhi u cI: seOet count to0 O+ b{t u cho 4#nh Och con

Tr#ng a]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

I.2.

\ CNG C\\ vCA\CACING \THLE \HEET\w

%11 6%#Oc#4ing 1tyle 1heetO7 c.ng l mt 4ng ~TJL 1tyle. lh8ng :hong :h- hMn v thuc tnh v 2ng 4)ng. Jt %11 *h!ng nh$ng t9: hW: cc Dnh 4ng; m cmn c th? gi-: Dnh vD; vi n *hung; gt mu n n= %11 c th? nh *m trong tr#ng hogc l8u ri3ng thnh mt t9: tin *i?u %11 :h)c v) c5ng l-c cho nhi u tr#ng

I.2.1.

TR( C\\ .9. ,D:

1. CQ.E tR(0
%hRn Teit %11 1tyleO len=juIt hi<n h: thoi len %11 1tyle0

~ogc Win4on %11 1tyle; mE %11 &#nel; %lic* n-t len %11 1tyle l#me0 T3n c,# %11 m"i; :hCi b{t u bYng 4Iu chIm6.7 1elector Ty:e0 %hRn loi %11 oerine in0 len 1tyle 1heet Kile0 to mt t9: tin %11 ThiO 4ocument only0 %hT OP 4)ng %11 cho tr#ng c)c b %hRn K; iuIt hi<n h: thoi %11 1tyle 4erinition

Trong m)c c#tegory; chRn Ty:e; O#u chRn cc Dnh 4ng cho %11 %hRn iong;%lic* S::ly K Trong %11 &#nel iuIt hi<n 1tyle vH# to %hRn ni 4ung v}n bCn cn Dnh 4ng

2. ) 89A! C\\ .9. ,D0 Tr#ng aa

Gio Trnh Thit K Web

Trong %11 1tyle &#nel; chRn t3n %11

WWW.vietnoiviet.com

I.2.2.

TR( "Dt to) t$A C\\:

T9: tin *i?u %11 l mt t9: tin :h) trW cho 1ite; nYm trong th8 m)c root c,# 1ite 1. CQ.E tR(0 Teit %11 1tyleO len Trong h: thoi len %11 1tyle 1elector Ty:e0 %hRn S4v#nce4 oerine in0 len 1tyle 1heet rile; K ~: thoi y3u cu l8u t9: tin %11; c :hn mE rng .%11

2. ) 89A! C\\ tx to) t$A C\\0

JE tr#ng ~TJL cn OP 4)ng t9: tin %11 %hRn Teit %11 1tyle Stt#ch 1tyle 1heet. ~ogc %lic* n-t Stt#ch 1tyle 1heet trong 1tyle &#nel. %hRn t9: tin %11 cn *t n+i; %lic* n-t pronOe= S44 #O0 o Lin*0 %hT li3n *t v"i t9: tin %11 ? OP 4)ng o (m:ort 0 %h: t9: tin %11 vo tr#ng 3. H$M5 .EAE "Dt C\\: %lic* :hCi tr<n t3n %11 trong %11 1tyle &#nel %hRn q4it; thVc hi<n hi<u chTnh :. (Q "Dt C\\ \t04#%: Khi io mt %11 1tyle th nh$ng ni 4ung : 4)ng %11 1tyle bD io Oe trE v trng thi b#n u %hRn %11 1tyle cn io %lic* n-t oelete %11 1tyle trong %11 1tyle &#nel ~ogc %lic* chut :hCi; chRn oelete

Stt#ch 1tyle 1heet len 1tyle 1heet

oelete 1tyle

Tr#ng at

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG : HNH NH V LIN KT T<ANG T<+NG C<EAMWEAVE<

.1. CHN HNH NH V+ T<ANG WEB: .1.1.

CEA sAE 3b( t' A!:

nh trong th8 m)c (m#geO c,# 1ite0 Zgt 4Iu nhy ti vD tr cn chn Cnh or#g chut *o t9: tin Cnh trong 1ite &#nel thC vo tr#ng nh ngoi 1ite0 %hRn (nOert (m#ge juIt hi<n h: thoi 1elect (m#ge 1ource %hRn t9: tin Cnh cn chnK

.1.2.

H$M5 .EAE tE5D. t7AE .G sAE:

%hRn Cnh chn Win4on &ro:ertieO

(m#ge0 Zgt t3n cho Cnh W 6Wi4th7; ~ 6~eight70 Z rng v chi u c#o c,# Cnh; tnh bYng &iiel 1rc0 8@ng 4yn t8Mng +i n t9: tin Cnh Slt0 cXu th!ng bo iuIt hi<n tr3n trnh 4uy<t *hi r3 chut vo Cnh Lin*0 ZD# chT csL nMi cn li3n *t n q4it0 %huy?n Bu# J#crome4i# Kire Wor*O hi<u chTnh Cnh %ro:0 %{t in Cnh prightneOO'%ontr#Ot0 %hTnh Ong t+i c,# Cnh 1h#r:en0 %hTnh O{c nt cho Cnh seO#m:le0L8u li *ch th8"c i u chTnh :timie in Kirenor*O0 chuy?n Bu# J#crome4i# KireWo*O ? hi<u chTnh J#: 0 bCng [ li3n *t Cnh ^1:#ce; ~O:#ce0 KhoCng cch tr3n; 48"i; tri; :hCi gi$# :hn ni 4ung v}n bCn n Cnh T#rget0 Khung ch2# tr#ng li3n *t n Lon 1rc0 t3n t9: tin Cnh :h) c :hXn giCi thI:; lm Cnh th#y th *hi ch@ hi?n thD Cnh chnh tr3n trnh 4uy<t por4er0 8@ng vi n Cnh

Tr#ng ab

Gio Trnh Thit K Web

Slign0 c#nh l tri; :hCi; gi$#=

WWW.vietnoiviet.com

.1.3.

CEA lE5A! sAE:

Trong thit *; nhi u l-c cn 4V :hmng tr8"c cho Cnh tr#ng tr; nh8ng ch8# c Cnh thch hW:; t# c th? chn tr8"c mt *hung Cnh v"i *ch th8"c ic Dnh ? gi$ chU %hRn (nOert(m#ge bectO (m#ge &l#cehol4er juIt hi<n h: thoi (m#ge &l#cehol4er lh9: t3n; *ch th8"c; mu cho *hung Cnh

%hn Cnh vo *hung Cnh0 oouble clic* vo *hung cn chn Cnh juIt hi<n h: thoi 1elect (m#ge 1ource; chRn t9: tin Cnh cn chn vo *hung

.1.:.

IA%#'t <(44(3#' I" !#:

(nOert (m#ge bectOsollover (m#ge; juIt hi<n h: thoi solloveer (m#ge

rigin#l (m#ge0 Cnh g+c sollover (m#ge0 Cnh *hi r3 chut vo

.1.N.

CEA _4 %E:

(nOert Je4i# Kl#Oh %hRn t9: tin *i?u .Onr Ti vD tr chn iuIt hi<n bi?u t8Wng Kl#hO ~i<u chTnh thuc tnh c,# Kl#Oh

Tr#ng a`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Kl#Oh0 T3n +i t8Wng Kl#Oh W 6Wi4th7; ~ 6~eight70 %hi u rng v chi u c#o c,# Cnh Kl#Oh Kile0 t3n t9: tin 1hoc*n#re c,# Kl#Oh 1rc0 t3n t9: tin g+c c,# Kl#Oh q4it0 ~i<u chTnh trong J#crome4i# Kl#Oh seOet Oie0 trC v *ch th8"c b#n u Loo:0 Cnh Kl#Oh l9: v! t9n Suto&l#y0 tV ng 4iAn hot *hi mE tr#nng ^O:#ce; ~O:#ce0 *hoCng cch tr3n; 48"i; tri; :hCi c,# +i t8Wng Kl#Oh n v}n bCn u#lity0 chIt l8Wng *hi hi?n thD 1hon Sll0 hi?n thD tIt cC +i t8Wng trong *hung lo por4er0 *h!ng gi"i hn trong *hung vi n qi#ct rit0 vH *ht trong *hung vi n Slign0 c#nh l pg0 mu n n 48"i Cnh Kl#Oh

.1.U.
1.

AE APA t' A!

2.

nh n n l Cnhh tV ng lW: y tr#ng Web. Khi thit *; bn n3n chRn nh$ng myu n n th9t nht; ch$ O9m hogc n n th9t O9m; ch$ mu Ong ? ng8@i iem 4A Rc Tuz thuc vo tHng loi n n m ic Dnh *ch th8"c Cnh n n cho :h5 hW:; to Cnh n n v"i O+ Kb cng nh th tr#ng hi?n thD cng nh#nh CQ.E tR( sAE APA: Zgt tr trong tr#ng chRn Jo4iry&#ge &ro:ertieO p#cgroun4 (m#geO 0 nh9: 8@ng 4yn n t9: tin Cnh lm n n AE APA t' A! .u OJAE lEFA! 4o) ZXy l 4ng n n *h thVc hi<n; *ch th8"c Cnh th8@ng rIt l"n; n3n :hCi nn ? giCm O+ Kb t+i #; To Cnh n n c+ Dnh; *h!ng l9: bYng %110 Thit * Cnh cn lm n n %hRn Teit %11 1tyleO len %11 1tyle; Trong h: thoi len %11 1tyle0 1elector0 lh9: t3n 1tyle 1elector 1tyle0 %hRn m)c S4v#nce4 oerine in0 ThiO 4ocument only K; juIt hi<n h: thoi %11 1tyle 4erinition0 Trong m)c %#tegory; chRn p#c*groun4 p#c*groun4 (m#ge0 t3n t9: tin Cnh lm n n se:e#t0 lo se:e#t 6*h!ng l9:7 Stt#chment0 riie4 6n n c+ Dnh *h!ng bD cun7 ~oriont#l; vertic#l &oOition0 center K 1P 4)ng %11 Cnh n n Khi to %11 1tyle; trong %11 1tyle &#nel iuIt hi<n t3n 1tyle vH# to Z? 8# %11 1tyle Cnh n n vH# to lm n n cho tr#ng; %lic* :hCi tr3n T#g po4y c,# tr#ng; chRn 1et %l#OO %hRn t3n 1tyle vH# to

Tr#ng t\

Gio Trnh Thit K Web .1.a. TR( W#, &E(t( 4,5":

WWW.vietnoiviet.com

1. CE. ArA!0 To b O8u t9: cc hnh Cnh h#y cu+n Slbum gi-: ng8@i OP 4)ng BuCn lf v chRn iem tHng hnh mt cch nh#nh nhIt 2. CQ.E tR(0 Z? thVc hi<n ch2c n}ng ny cn :hCi ci gt J#crome4i# Kirenor*O v mt th8 m)c ch2# cc hnh :hoto %hRn %omm#n4O %re#te Web &hoto #lbum juIt hi<n h: thoi %re#te Web &hoto Slbum lh9: cc th!ng O+0

&hoto Slbum Title0 lh9: ti3u c,# Slbum 1ubhe#4ing (nro 0 lh9: ti3u :h) 6 juIt hi<n 48"i ti3u chnh7 ther (nro0 lh$ng th!ng tin bU iung 1ource (m#geO Kol4er0 ZD# chT c,# rol4er ch2# hnh oeOtin#tion rol4er0 ZD# chT c,# &hoto Slbum O#u *hi to Thumbn#il Oie0 Kch th8"c c,# hnh trong tr#ng chnh 1hon rileO n#me 0 Ghi' Kh!ng ghi t3n rile 48"i mNi hnh %olumn0 O+ ct hnh c trong tr#ng chnh Thumbn#il rorm#t0 %hRn *i?u Dnh 4ng hnh trong tr#ng (n4ei %hRn *i?u Dnh 4ng hnh trong tr#ng con 1c#le 0 tT l< hnh Oo v"i tr#ng (n4ei %re#t n#vig#tion :#ge ror e#ch :hoto0 % ' *h!ng to cho mNi hnh mt tr#ng ri3ng ? bU iung th3m trong tin lh9: iong clic* K; ch@ *t BuC; iuIt hi<n th!ng bo Slbum 8Wc to; ^o cP# OU 1ite &#nel iuIt hi<n th3m cc rol4er0 Kol4er Thumbn#il0 ch2# cc rile &G Kol4er &#ge ch2# cc rile .~TJ cho mNi (m#ge t8Mng 2ng 6tr#ng con7 T9: tin (n4ei.htm trong Kol4er ch2# WebOite; Xy l t9: tin Slbum chnh JE t9: tin (n4ei.htm v 4i chuy?n gi$# cc tr#ng bYng cc ~y:erlin* leit &reviouO; ~ome 3. B %5A! tEFA! t$A .E( "$ t' A! .(A: Trong 1ite &#nel; mE t9: tin mu+n bU Oung th!ng tin trong Kol4er &#ge lh9: th!ng tin; trnh by theo f mu+n; l8u li

Tr#ng t_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

ZUi t3n t9: tin ny thnh G#llery.htm Gn Dnh 4ng Tem:l#te vo cho Kile G#llery.htm; mE t9: tin (n4ei; iem *t BuC

.1.d.

TR( L$,' '0 It#":

1. KEQ$ A$M"0 Libr#ry ch2# cc thnh :hn c,# tr#ng nh8 hnh Cnh; v}n bCn v cc +i t8Wng *hc m t# c nhu cu OP 4)ng li hogc cn c9: nh9t th8@ng iuy3n. %c thnh :hn ny gRi l Libr#ry (temO. %ch to Libr#ry (tem0 2. CQ.E tR(0JE SOOetO&#nel 6Win4on SOOetO7; trong SOOetO &#nel; %lic* n-t Libr#ry; %hRn thnh :hn mu+n to Libr#ry (tem v thVc hi<n mt trong cc b8"c O#u or#g chut *o thnh :hn 8Wc chRn thC vo *hung Libr#ry Zgt t3n %lic* n-t len Libr#ry (tem v gt t3n %hRn Jo4iry Libr#ry S44 bect to Libr#ry v gt t3n 3. NEo) L$,' '0 It#" 3b( t' A! "z$0 Zgt 4Iu nhy vo nMi mu+n nh9: Libr#ry (tem Ko Libr#ry (tem tH SOOetO &#nel thC vo 4ocument Win4on; hogc clic* n-t (nOert trong SOOetO &#nel :. H$M5 .EAE L$,' '0 It#"0 %hRn Libr#ry (tem trong *hung Libr#ry %lic* n-t q4it juIt hi<n h: thoi cho :h: hi<u chTnh libr#ry (tem %lic* 1#ve iuIt hi<n h: thoi bn c mu+n c9: nh9t tIt cC tr#ng Web c OP 4)ng Libr#ry trong Oite *h!ng; keO 0 ? c9: nh9t; lo 0 *h!ng. 1#u ny c th? c9: nh9t bYng cch chRn Jo4iry Libr#ry c:4#te :#geO0 c9: nh9t tIt cC nh$ng tr#ng c OP 4)ng Libr#ry (tem N. TQ.E L$,' '0 It#" t'(A! C(.5"#At lEt$ L$,' '00 %hRn Libr#ry (tem trong tr#ng Web hi<n hnh %lic* n-t oet#ch rrom rigin#l tr3n &ro:ertieO (nO:ector; *hi libr#ry bD tch r# thnh tHng +i t8Wng v *h!ng cmn li3n Bu#n n Libr#ry; t# c th? hi<u chTnh tHng +i t8Wng To li Libr#ry (tem bYng mt libr#ry #ng OP 4)ng trong tr#ng % th? 45ng mt Libr#ry trong tr#ng ? to li mt Libr#ry (tem; nu Libr#ry (tem bD mIt %hRn Libr#ry tr3n tr#ng Web hi<n hnh %lic* n-t secre#te tr3n &ro:ertieO (nO:ector; Libr#ry (tem Oe 8Wc to li

Tr#ng tF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

.2. LIN KT T<ANG T<+NG C<EAMWEAVE<: .2.1. L$KA lt :

Jt li3n *t n+i tH tr#ng ngu[n n tr#ng ch g[m F thnh :hn Z+i t8Wng 8Wc chRn lm n-t li3n *t c th? l v}n bCn 6Teit7; hnh Cnh 6(m#ge7 hogc n-t 6putton7. Trong J#crome4i# ore#mne#ver Jj F\\G cmn cung cI: th3m mt O+ +i t8Wng gc bi<t lm n-t li3n *t nh8 Kl#Oh Teit; Kl#Oh putton; l#vig#tion b#r; sollover (m#geO=

ZD# chT csL c,# tr#ng cn li3n *t n0 Tuz thuc vo D# chT csL m c th? chi# lm u loi li3n *t Li3n *t ni0 L li3n *t ni b cc tr#ng trong c5ng mt WebOite. Li3n *t ngoi0 L li3n *t n tr#ng thuc mt WebOite *hc. Li3n *t qm#il0 L li3n *t n ch8Mng trnh gPi th8 tn i<n tP.

.2.2.

CQ. 8RA! 4$KA lt:

ong li3n *t vmng0L 4ng li3n *t n+i u!i nh#u; tr#ng_ li3n *t n tr#ng F; tr#ng F li3n *t n tr#ng u;=tr#ng n li3n *t n tr#ng _; 4ng li3n *t ny Cm bCo ng8@i iem c th? iem tIt cC cc tr#ng; nh8ng bIt lWi l :hCi 4uy<t ht mt vmng. ong li3n *t y ,0 Ti mUi tr#ng u to li3n *t y , n tIt cC cc tr#ng cmn li; Xy l# 4ng li3n *t trong Oite c :hXn cI: thI:. lu 1ite c nhi u :hXn cI: th n3n chRn 4ng li3n *t cXy :hXn cI:. ong li3n *t cXy :hXn cI:0Trong cc 1ite l"n; m2c Bu#n trong c,# tHng tr#ng 8Wc :hXn cI: theo tHng m2c; v"i tr#ng g+c l tr#ng ch,; m2c _ l nhm ch, chnh; m2c F l nhm ch, con; m2c u l tr#ng ch2# cc th!ng tin chi tit;= 4ng ny t[n ti li3n *t gi$# cc tr#ng c5ng m2c 61#me Level7; li3n *t v m2c tr3n 6&#rent Level7; li3n *t v m2c 48"i 6%hil4 level7. ong li3n *t ti<n nghi0 lgoi cc 4ng li3n *t tr3n; ? thu9n ti<n cho ng8@i iem *hi l9t tr#ng; c th? to th3m mt O+ li3n *t :h); nh8 li3n *t n i?m 4Hng 6poo*m#r*7 trong tr#ng c ni 4ung 4i; nhi u :hXn on; hogc to th3m mt h< th+ng li3n *t teit E cu+i mUi tr#ng; *hi ng8@i iem n cu+i tr#ng c th? nh#nh chng l9t O#ng tr#ng *hc m *h!ng cn trE v

Tr#ng tu

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Li3n *t tr#ng ch,0 Tr#ng ch, th8@ng ch2# cc n-t li3n *t n cc tr#ng con; 4o cn :hCi to li *t tH tr#ng con trE v tr#ng ch,

.2.3.

CQ.E tR(:
JE tr#ng ngu[n %hRn (nOert ~y:erlin*

Teit0 ni 4ung v}n bCn lm n-t li3n *t Lin*0 ZD# chT csL c,# tr#ng cn li3n *t n T#rget0 Khung ch2# tr#ng ch Title0 %Xu ghi ch- *hi chut chm vo n-t ScceOO Key0 Khi iem tr#ng; nhIn tU hW: :hm Slt Kf tV nh9: ? chRn n-t v nhIn qnter ? li3n *t. T#b (n4ei0 trnh tV chRn n-t *hi nhIn :hm T#b 1. TR( 4$KA lt AD$: Li3n *t gi$# cc tr#ng trong ni b 1ite; Xy l li3n *t Mn giCn; chT cn chRn t3n t9: tin tr#ng ch; OP 4)ng D# chT t8Mng +i; hogc trong m)c Lin* nh9: t3n t9: tin ch 2. TR( 4$KA lt A!(R$ To li3n *t n cc t9: tin ngoi Oite; cn :hCi nh9: D# chT htt:0''c,# tr#ng ch thuc 1ite *hc Khi to li3n *t ngoi; ng8@i iem c th? Bu# Oite *hc c th? *h!ng ti: t)c iem Oite c,# bn n$#; ? trnh tr8@ng hW: ny; c th? thVc hi<n mt trong cc cch O#u0 Li3n h< v"i ng8@i ch, c,# 1ite ngoi; hW: [ng to Bu#n h< Bu# li gi$# F WebOite Z8# 1ite ngoi vo trong *hung 6Kr#me 7 c,# 1ite mnh JE th3m mt cP# OU m"i; O#u 8# Web1ite ny vo. %ch mE c,# OU m"i cho li3n *t v"i Web1ite ngoi Trong &ro:ertieO (nO:ector; Ti m)c T#rget nh9: t3n c,# *hung ch2# tr#ng ch. %hRn bl#n*0 mE mt cP# OU *hung tr+ng ? ch2# tr#ng ch

Li3n *t v"i tr#ng k#hoo trong cP# OU *hc 3. TR( 4$KA lt OJ .E E" $4: Tr#ng tG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

ZXy l li3n *t n ch8Mng trnh gPi nh9n th8 i<n tP; gi-: ng8@i iem c th? li3n h<; tr#o Ui v"i ng8@i ch, c,# WebOite %ch _0 %hRn +i t8Wng lm n-t li3n *t qm#il Trong ! Lin* nh9: trVc ti: 4mng m#ilto0 theo O#u l D# chT qm#il c,# ng8@i ch, WebOite %ch F0 Kh!ng cn to +i t8Wng lm n-t li3n *t %hRn (nOert qm#il Lin* Trong h: thoi qm#il lin*0 /e0t0 nh9: ni 4ung v}n bCn lm n-t AZMail 0 nh9: -ng D# chT q/m#il

:. TR( 4$KA lt OA to) t$A OI A!Vm$ e#" ts$ e5uA! "Q0 .9. ,D:
% nh$ng t9: tin bn mu+n cung cI: cho ng8@i iem tr#ng nh8ng ch-ng *h!ng :hCi l cc tr#ng ~TJL; v 4) mt O+ 4ng ront ch$ m"i; t9: tin nn; hogc cc ch8Mng trnh nh .qjq= %ch to0 JE tr#ng cn to li3n *t %hRn +i t8Wng lm n-t li3n *t Trong &ro:ertieO (nO:ector; trong m)c Lin*; nh9: vo t3n t9: tin cn li3n *t 6hogc %lic* n-t ? mE h: thoi 1elect Kile tm t9: tin cn cung cI: cho ng8@i iem. lu t9: tin ny *h!ng E c5ng 1ite th iuIt hi<n h: thoi y3u cu ch: t9: tin ny vo Oite

N. L$KA lt O$I" 8xA! vN "#8 AA.E('w

#7 To li3n * t i?m 4Hng c5ng tr#ng0 Z+i v"i cc tr#ng Web 4i; hogc tr#ng c nhi u m)c; th vi<c 45ng th#nh cun *h!ng 8Wc ti3n; 4o c th? gi-: ng8@i iem n tHng m)c mt cch nh#nh chng; chnh ic nh@ vo vi<c gt On cc i?m 4Hng. %ch to g[m F b8"c0 o Zgt t3n cho i?m 4Hng0 Trong oocument nin4on; gt 4Iu nhy ti vD tr Oe lm i?m 4Hng %hRn (nOert l#me4 Snchor 6%trlSltS7 hogc %lic* n-t (nOert l#me4 Snchor trong bCng %ommon c,# th#nh (nOert Trong h: thoi (nOert Snchor0 lh9: t3n cho Snchor 6*h!ng thH# *hoCng tr{ng; *h!ng c *f tV l7 o To li3n *t i?m 4Hng0 Trong oocument Win4onO; chRn mt on v}n bCn hogc mt hnh ? to lin* n i?m 4Hng lu i?m 4Hng nYm c5ng tr#ng th ti ! lin* nh9: t3n Snchor b7 To li3n *t i?m 4Hng c,# tr#ng *hc0 Th#o tc to li3n *t n i?m 4Hng E tr#ng *hc gi+ng nh8 li3n *t n tr#ng *hc; nh8ng ti m)c lin* :hCi chT r# i?m 4Hng no. Theo cIu tr-c :<TKA to) t$A*^<TKA O$I" 8xA!*

.2.:.

K$I" t' 4$KA lt:

1. K$I" t' 4$KA lt ,A! CE#.l L$Al:

T# c th? OP 4)ng %hec* Lin*O ? c mt bCng th+ng *3 tIt cC cc li3n *t trong WebOite. JE tr#ng cn *i?m tr# li3n *t

Tr#ng t]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%hRn Kile %hec* &#ge %hec* lin*O Trong seOultO inO:ector %hRn m)c Lin* %hec*er Trong m)c 1hon0 %hRn pro*en Lin* hi?n thD 4#nh Och li3n *t gy %hRn qitern#l lin*O0 hi?n thD 4#nh Och li3n *t ngoi %hRn Kile &revien in pronOer % th? th#y Ui trnh 4uy<t bYng cch chRn Kile &revien in pronOe q4it pronOer LiOt %hRn t3n trnh 4uy<t trong :hn pronOer; chRn iei:lorer. lu *h!ng tm thIy th clic* n-t 67 ? th3m trnh 4uy<t m"i vo 4#nh Och pronOer; clic* 4Iu 6/7 ? b b"t trnh 4uy<t trong 4#nh Och o oer#ult0 Jgc Dnh 8u ti3n trnh 4uy<t *hi iem tr#ng o :tion0 &revien cOing Tem:or#ry rile0 chRn ch2c n}ng ny ? to t9: tin t#m t8Mng 2ng v"i tr#ng cn iem. Trnh 4uy<t Oe hi?n thD tr#ng tm; nu *h!ng chRn; bn Oe iem trVc ti: tr#ng tr3n trnh 4uy<t.

2. K$I" t' 4$KA lt ,A! t'LAE 850Mt

.2.N.

H$M5 .EAE 4$KA lt:

%hRn n-t li3n *t cn th#y Ui %hRn menu Jo4iry %h#nge Lin*= ~: thoi 1elect rile cho :h: chRn t9: tin tr#ng cn li3n *t n lu bit r t9: tin li3n *t m"i th c th? nh9: trVc ti: trong ! lin* c,# &ro:ertieO (nO:ector %hRn n-t mu+n loi b li3n *t %hRn Jo4iry semove Lin*. ~ogc io t3n tr#ng li3n *t trong ! lin* c,# &ro:ertieO (nO:ector

1. (Q 4$KA lt

2. CEA lE5A! .E( t' A! 4$KA lt

Khi li3n *t th8@ng OP 4)ng tr#ng *hung 6Kr#meOet7 %hRn n-t mu+n th#y Ui *hung li3n *t %hRn menu Jo4iry Lin* T#rget %hRn t3n *hung :h5 hW:

3. CEA "b5 .E( 4$KA lt

Th8@ng mt li3n *t 4ng v}n bCn Oe 8Wc gch 48"i v c mu i#nh; !i *hi mu ny *h!ng :h5 hW: v"i mu Och trong tr#ng thit *; c th? chRn li mu li3n *t bYng cch0 %hRn Jo4iry &#ge &ro:ertieO; trong m)c %#tegory; chRn Lin*

Tr#ng ta

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Lin*O color0 chRn mu mgc Dnh cho n-t li3n *t ^iOite4 Lin*O0 mu li3n *t n cc tr#ng 8Wc iem Sctive Lin*O0 mu n-t li3n *t *hi #ng 8Wc chRn

.2.U.

BsA OT sAE 4$KA lt :

Khi chRn Cnh lm li3n *t; th c mt O+ Cnh *ch th8"c l"n; th8@ng chi# nh Cnh r# thnh nhi u v5ng mNi v5ng li3n *t n mt tr#ng Web *hc; 4ng ny gRi l bCn [ Cnh li3n *t.

1. NEnA! tE5oA t$MA lE$ % 89A! ,sA OT sAE 4$KA lt:

Gi-: to nh#nh cc li3n *t ~nh Cnh trVc Bu#n; 4A li3n t8Eng n tr#ng t8Mng 2ng. Gi-: b+ c)c cc li3n *t nh#nh; *h!ng chim nhi u *hu vVc n-t tr3n tr#ng Web %hn Cnh vo tr#ng; clic* chRn Cnh Trong &ro:ertieO inO:ector; hi?n thD c!ng c) J#: %hRn c!ng c) mu+n chi# v5ng or#g chut Bu#nh :hn tr3n hnh m t# mu+n chi# v5ng ? to li3n *t Trong &ro:ertieO inO:ector; ti m)c lin*; nh9: D# chT c,# tr#ng cn li3n *t n oi chuy?n v5ng li3n *t %lic* chRn c!ng c) ? chRn v5ng cn 4i chuy?n or#g chut *o n vD tr m"i %hRn v5ng li3n *t %lic* vo mt trong cc n-t chRn c,# v5ng li3n *t or#g chut ? th#y Ui *ch th8"c %hRn v5ng li3n *t lhIn oelete

2. CQ.E tR(:

3. H$M5 .EAE ,sA OT 4$KA lt:

:. TE 0 O$ l7.E tEVz. 3A! 4$KA lt

N. (Q 3A! 4$KA lt

.2.a.

NE" sAE ODA! 4b" A@t 4$KA lt:

1. CEA A@t ,$A O$ ELAE:

Tr8"c ht :hCi c F t9: tin Cnh; n_.gir mu c#m; nF.gir mu i#nh trong rol4er (m#geO c,# 1ite Zgt 4Iu nhy ti vD tr cn chn n-t ng %hRn (nOert (m#ge bectO sollover (m#ge. ~: thoi (nOert sollover (m#ge0 o (m#ge l#me0 lh9: t3n Cnh o rigin#l (m#ge0 t3n t9: tin Cnh g+c i 4i<n *hi hi?n thD 6v 4) n_.gir7 o sollover (m#ge 0 t3n t9: tin Cnh hi?n thD *hi r3 chut vo 6v 4) nF.gir 7 o &relo#4 sollover (m#ge0 8# Cnh Oe th#y th vo b nh" tr8"c

Tr#ng tt

Gio Trnh Thit K Web

WWW.vietnoiviet.com

o Sltern#te Teit0 cXu ghi ch- *m theo o When %lic*; go to csL0 ZD# chT c,# tr#ng li3n *t n

2. CEA EM tEuA! A@t ,$A O$ ELAE:

ore#mne#ver c th? gi-: bn c5ng mt l-c chn vo cC mt h< th+ng n-t bin hnh %hRn (nOert (m#ge bectO l#vig#tion b#r

o o o o o o o o o o o o

Th3m hogc io n-t trong h< 1{: i: trnh tV n-t trong h< n-t 4av bar Ale&ent#0 4#nh Och t3n n-t trong h< n-t Ale&ent 4a&e0 lh9: t3n n-t m"i )' I&age0 nh hi<n thD E trng thi th8@ng 5ver I&age0 nh hi?n thD *hi r3 chut vo n-t 7o"n I&age0 nh hi?n thD *hi %lic* chut vo n-t ;lternate /e0t0 cXu ghi ch- *m theo Cnh When Clic(1 go to )*+0 ZD# chT tr#ng li3n *t n Preload I&age0 Z8# Cnh Oe th#y th vo b nh" tr2Mc Sho"7o"nI&ageInitaly0 KhEi to chRn Cnh E trng thi In In#ert0 ~oriont#lly0h< n-t ng#ng In#ert Oertically0 h< n-t 4Rc )#e /able0 ~< n-t nYm trong bCng

3. CEA A@t _4 %E:

J#crome4i# ore#mne#ver v J#crome4i# Kl#Oh l mt b ch8Mng trnh c th? OP 4)ng 4$ li<u Bu# li v"i nh#u rIt thu9n ti<n; 4o c th? 45ng cc n-t Kl#Oh 8Wc thit * On ? lm n-t li3n *t trong ore#mne#ver %ch to0 %hRn (nOertJe4i# Kl#Oh putton

Tr#ng tb

Gio Trnh Thit K Web

o o o o o o o 1#m:le0 ^ 4) myu n-t Kl#Oh 1tyle0 4#nh Och t3n cc n-t myu Kl#Oh putton Teit0 v}n bCn tr3n n-t Kl#Oh Kont0 *i?u ch$; 1ie0 %E ch$ Lin*0 ZD# chT li3n *t n T#rget0 T3n *hung tr#ng li3n *t pg0 Ju n n

WWW.vietnoiviet.com

~i<u chTnh n-t Kl#Oh0 %hRn n-t Kl#Oh cn hi<u chTnh Trong &ro:ertieO inO:ector; th#y Ui gi trD c,# cc thuc tnh0 o Kl#Oh putton0 t3n n-t Kl#Oh o ~0 chi u c#o o Kile0 t3n t9: tin 1WK l n-t o q4it0 mE h: thoi (nOert rl#Oh putton ? hi<u chTnh o seOet 1ie0 trE v *ch th8"c b#n u o ^O:#ce; ~O:#ce 0 *hoCng cch gi$# n-t v ni 4ung v}n bCn o u#lity0 %hIt l8Wng n-t Kl#Oh o 1c#le0 Ko 4n n-t o Slign0 c#nh l Oo v"i v}n bCn o pg0 mu n n c,# n-t o &l#y0 jem hot ng v cc trng thi c,# n-t o &#r#m#eterO0 truy n th#m O+

Tr#ng t`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

:. CEA A@t _4 %E T#et:

(nOert Je4i# Kl#Oh Teit ~: thoi (nOert Kl#Oh Teit; nh9: vo cc th!ng O+0 o Kont; 1ie0 Kont v cE ch$ o %olor0 mu ch$ o sollover %olor0 Ju ch$ th#y Ui chi r3 chut Bu# n-t o Teit 0 li 4ung v}n bCn lm n-t o Lin*0 ZD# chT tr#ng Web li3n *t n o T#rget0 T3n *hung tr#ng o pg %olor0 mu n n c,# v}n bCn n-t

Tr#ng b\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG I:
I.1. TABLE : I.1.1. K- ,sA!:

BNG V T<NH BH T<ANG

T5y thuc vo tHng b+ c)c c) th? m Buyt Dnh O+ 4mng; ct c,# bCng; mNi 4mng c th? c O+ ! *hc nh#u. Th8@ng ch-ng t# n3n chRn 4mng c O+ ! l"n nhIt lm chuQn *hi *| bCng. (nOert'T#ble; hogc In trong nhm T#ble. sonO0 O+ 4mng cn chn. %olumnO0 O+ ct cn chn. Wi4th0 chi u rng c,# bCng theo O+ i?m :iielO hogc :hn tr}m por4er0 4y c,# 8@ng vi n bCng. %ell &#44ing0 *h#ng cch ni 4ung ! v bi3n !. %ell 1:#cing0 *hoCng cch gi$# cc !.

I.1.2.

H$M5 .EAE ,sA!

1. CEA tEK" 8yA!S .Dt 3b( ,sA!: Th3m 4mng cu+i bCng ZDnh vD con tr E ! cu+i c5ng trong bCng. n :hm T#b ? th3m 4mng. %ch *hc0 n vo vi n bCng; h#y In th|T#ble chRn bCng. Trong :ro:ertieO inO:ector nh9: O+ 4mng m"i. %hn th3m ct vo bCng0 Trong :ro:ertieO inO:ector nh9: O+ ct m"i. 2. (Q 8yA!S .DtS ,sA! %hRn 4mng; ct; bCng %hRn thVc Mn q4it'%ut. 6%trl j7. 3. Nu$ .Q. F t'(A! ,sA!: %hRn cc ! cn n+i Jo4iryT#ble Jerge %ellO. :. TQ.E .Q. F t'(A! ,sA!: %hRn ! cn tch Jo4iryT#ble 1:litO %ell - 1:lit %ell into %olumnO0 tch ! thnh nhi u ! theo ct. - 1:lit %ell into sonO0 tch ! thnh nhi u ! theo 4mng.

Tr#ng b_

Gio Trnh Thit K Web

-

WWW.vietnoiviet.com

lumber or columnO; sonO0 ic Dnh O+ ! cn tch theo ct; 4mng.

I.1.3.

TE5D. t7AE .G ,sA!:

%hRn t#ble mE &ro:ertieO inO:ector. lh9: gi trD m"i trong &ro:ertieO inO:ector.

sonO0 O+ 4mng. %olO 0 O+ ct. W6ni4th7 0 chi u rng theo i?m :iiel; theo td l< mn hnh. ~ 6hight7 0 chi u c#o mgc Dnh; tuz vo ni 4ung. %ell:#4 0 *hoCng cch v}n bCn n ! trong bCng. %ellO:#ce 0 *hoCng cch gi$# cc ! trong bCng. Slign 0 c#nh l bCng; :hCi; tri; gi$#. por4er 0 4y nt 8@ng vi n bCng. pg color 0 mu n n c,# bCng. pg im#ge 0 Cnh n n bCng. pr4r color 0 mu 8@ng vi n bCng.

I.2.

T<NH BH T<ANG : I.2.1. L 0(5t T ,4# 3b 4 0(5t .#44

Trnh by tr#ng l mt c!ng on Bu#n trRng nhIt trong thit * Web; mi hi tnh m thu9t v chnh ic c#o. J#crome4i# ore#mne#ver Jj F\\G cung cI: cc c!ng c) rIt t+t trong vi<c thit * v trnh by tr#ng l L#yout Tble v L#yout %ell

1. L 0(5t t ,4#:
L#yout t#ble l 4ng bin th? c,# t#ble v"i cc th!ng O+ i *m nh8 *hung vi n por4er\; *hoCng cch gi$# cc ! %ell1:#ce \; *hoCng cch gi$# ni 4ung trong ! v vi n ! %ell&#4\ L#yout t#ble 45ng ? :hXn v5ng cho tr#ng; nu trong tr#ng c nhi u ni 4ung v"i nh$ng ch, *hc nh#u hogc cn nh9: ni 4ung v"i 4ng ct bo ch th 45ng l#yout t#ble ? b+ c)c tr#ng theo ch, 8Wc chuQn bD tr8"c L#yout T#ble 45ng ? b+ c)c tr#ng; *h!ng 45ng ? ch2# 4$ li<u; vi n *hung c,# L#yout T#ble c mu i#nh l cXy Khi thit * 4ng L#yout; cn :hCi chuy?n O#ng ch L#yout vien; trong (nOert (nO:ector; chRn t#b L#yout; chRn L#yout mo4e; hogc chRn ^ien T#ble Jo4e L#yout Jo4e

L#yout %ell

L#yout T#ble L#yout mo4e

Tr#ng bF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

2. L 0(5t .#44:
L#yout cell0 lYm trong L#yout t#ble; 45ng ? ch2# 4$ li<u; 4$ li<u trong l#yout cell c th? l v}n bCn; hnh Cnh; *hi th3t * 4ng l#yout cn l8u f cc l#yout cell :hCi Ot nh#u ? trnh tr8@ng hW: lm chi tr#ng bD nt Jt l#yout T#ble c th? ch2# nhi u l#yout t#ble con JUi L#yout T#ble g[m c nhi u 4mng; mNi 4mng ch2# nhi u L#yout %ell; O+ L#yout %ell tr3n mNi 4mng c th? *hc nh#u

V7 89:

L#yout t#ble b+ c)c tr#ng 3. MDt %u .Q.E lt EW) L 0(5t T ,4# 3b L 0(5t C#44:

L#yout cell ch2# 4$ li<u

^e mt L#yout T#ble c *ch th8"c y tr#ng; O#u ve cc L#yout cell b3n trong L#yout T#ble theo -ng *ch th8"c v y3u cu c,# b+ c)c ^e nhi u L#yout T#ble c5ng cI: o L#yout T#ble tr3n ch2# ch2# Logo; p#nner; n-t ng#ng. o L#yout T#ble E gi$# ch2# ni 4ung v}n bCn; hnh Cnh= o L#yout T#ble 48"i ch2# D# chT li3n lc; :hone= ~ogc *t hW: cC F cch tr3n; 45ng F L#yout t#ble ng#ng cI:0 o L#yout T#ble tr3n ch2# Logo; b#nner; n-t ng#ng= o L#yout T#ble 48"i ch2# F L#yout t#ble con; m+t b3n tri v mt b3n :hCi= L8u f 0 o Khi ve mt L#yout %ell b3n ngoi L#yout T#ble th ore#mne#ver tV :ht Oinh mt L#yout T#ble ch2# L#yout %ell o %h qi:#n4e4 T#bleO 0 cho hi?n thD *hoCng cch tH ni 4ung trong ! n 8@ng vi n c,# T#ble; ti<n cho vi<c hi<u chTnh rng c,# !

Tr#ng bu

Gio Trnh Thit K Web

WWW.vietnoiviet.com

qi:#n4e4 T#bleO Jo4e

1t#n4#r4 Jo4e V7 890 _7 Thit * tr#ng v"i mt L#yout T#ble chnh0

Trong oocument Win4on %hRn t#b L#yout; clic* n-t L#yout T#ble or#g chut ve trong oocument Win4on Khung vi n L#yout T#ble c u h#n4le 45ng ? th#y Ui *ch th8"c c,# L#yout T#ble; tr3n *hung vi n c O+ chT chi u rng c,# L#yout T#ble Thit * tr#ng v"i u L#yout T#ble ng#ng cI:0 ThVc hi<n gi+ng nh8 tr3n; *hi *| L#yout T#ble :hCi b{t u tH bi3n tri tr#ng F7 Thit * tr#ng v"i cc L#yout T#ble l[ng nh#u0 ^ J#crome4i# ore#mne#ver Jj F\\G *h!ng cho :h: *| cc L#yout T#ble :h# b3n :hCi; n3n b{t buc :hCi *| mt L#yout T#ble l"n c#nh tri; O#u m"i c th? *| l[ng b3n trong L#yout T#ble l"n mt L#yout T#ble con.

I.2.2.

TE9F. t7AE .G L 0(5t T ,4# 3b 4 0(5t .#44:

% th? hi<u chTnh *ch th8"c bYng cch 4r#g chut *o cc h#n4le c,# *hung; nh8ng nu cn *ch th8"c chnh ic th :hCi nh9: cc th!ng O+ trong &ro:ertieO (nO:ector c,# L#yout T#ble 1. H$M5 .EAE tE5D. t7AE .G 4 0(5t t ,4#: Wi4th0 o Kiie40 O+ &iiel ic Dnh chi u rng o Suto1tretch0 tV ng *o 4n ng#ng theo ni 4ung v}n bCn hogc hnh Cnh chn vo L#yout T#ble ~eight0 jc Dnh O+ &iiel chi u c#o; nh nhIt l _` &iiel pg0 mu n n c,# L#yout T#ble %ell&#40 *hoCng cch tH ni 4ung n bi3n c,# L#yout T#ble

Tr#ng bG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%ell1:#ce0 KhoCng cch gi$# cc L#yout %ell %le#r son ~eight0 tV ng th#y Ui chi u c#o c,# cc 4mng cho vH# *ht v"i ni 4ung; nu *h!ng c ni 4ung th chi u c#o c,# 4mng t nhIt l _` &iiel semove Sll 1:#cerO0 % hi<u lVc *hi chRn Suto1tretch 6io tIt cC *hoCng tr+ng thH#7 J#*e cellO Wi4th %onOiOtent0 to cc cell trong L#yout T#ble c chi u rng nh8 nh#u. semove leOting 0 io L#yout T#ble con trong cc L#yout T#ble ch#.

2. (Q L 0(5t T ,4#0
%hRn vi n c,# *hung L#yout T#ble hogc clic* th| T#ble lhIn oelete %hRn l#yout cell JE th#nh &ro:ertieO (nO:ector c,# L#yout %ell

3. H$M5 .EAE tE5D. t7AE .G L 0(5t C#44:

Wi4th0 o Kiie40 1+ &iiel ic Dnh chi u rng o Suto1tretch0 tV ng *o 4n ng#ng theo ni 4ung v}n bCn hogc hnh Cnh chn vo L#yout %ell ~eight0 jc Dnh O+ &iiel chi u c#o; nh nhIt l _` &iiel pg0 mu n n c,# L#yout %ell ~or0 %#nh l cho ni 4ung trong L#yout %ell theo chi u ng#ng 6Lert; %enter; sight7 ^ert0 %#nh l theo cho ni 4ung trong L#yout %ell theo chi u 4Rc lo nr#:0 *hi ni 4ung 4i hMn *ch th8"c c,# L#yout %ell; nu chRn m)c ny th v}n bCn *h!ng iu+ng 4mng m L#yout %ell tV 4n r#; nu *h!ng chRn th v}n bCn tV iu+ng 4mng *hi gg: l :hCi c,# L#yout %ell oi chuy?n mt L#yout %ell0 o %hRn L#yout %ell 6%trl %lic* chut vo L#yout %ell7 cn 4i chuy?n o or#g chut *o n vD tr m"i jo mt L#yout %ell o %hRn L#yout %ell cn io o lhIn :hm oelete

I.2.3.

CQ. 4z) L 0#':

L#yer l mt thnh :hn m"i trong thit * Web; n c th? ch2# ni 4ung v}n bCn; hnh Cnh i: ch[ng l3n nh#u; nUi tr3n tr#ng v chuy?n ng rIt linh hot

Tr#ng b]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

L#yer th8@ng 8Wc OP 4)ng ? thit * tr#ng c cc hi<u 2ng gc bi<t nh8 ch$ rMi; Cnh b#y;= Zi?m bIt lWi c,# L#yer l *h!ng hi?n thD tr3n cc trnh 4uy<t c. nh8 (qG.\; leOtc#:e G.\; +i v"i cc trnh 4uy<t m"i th L#yer hi?n thD mt cch trung thVc

1. CQ.E tR( L 0#' t'KA t' A!:

% th? to L#yer bYng mt trong cc cch O#u0 %ch _0 %hRn 1t#n4#r4 Jo4e %lic* n-t or#n L#yer; 4r#g chut ve L#yer

%ch F0 %hRn menu (nOert L#yout bectO %hRn L#yer

2. H$M5 .EAE L 0#':

%hRn l#yer; L#yer 8Wc chRn Oe iuIt hi<n b ~#n4le iung Bu#nh; *hi t# thVc hi<n cc th#o tc hi<u chTnh tr3n L#yer #. 7i chuy[n +ayer0 %hRn L#yer cn 4i chuy?n or#g chut *o L#yer n vD tr m"i ~ogc nh9: gi trD to trong &ro:erieO (nO:ector
To cch bi3n tri To cch bi3n tr3n

b.

/hay -.i (?ch th\c cEa +ayer0 %hRn L#yer cn hi<u chTnh *ch th8"c %lic* chut vo mt trong cc ~#n4le; or#g chut ? th#y Ui *ch th8"c ~ogc nh9: th!ng O+ trVc ti: vo &ro:ertieO (nO:ector

Z rng c,# L#yer %hi u c#o c,# L#yer

cJ Ch]n nGi dung vDo +ayer lu ni 4ung l v}n bCn th nh9: trVc ti: vo L#yer lu ni 4ung l hnh Cnh th 4r#g chut chRn hnh trong th8 m)c (m#ge thC vo L#yer 6hogc chRn (nOert (m#ge7 dJ ^@' ch<ng cTc +ayer Khi cn hi?n thD nhi u Cnh tr3n tr#ng; nh8ng *h!ng , chU; t# c th? i: ch[ng l3n nh#u; O#u cho iuIt hi<n tHng l": mt hogc cho tHng l": L#yer b#y r# *hi mn hnh; i u ny c th? thVc hi<n 8Wc *hi *t hW: L#yer; Timeline v peh#viorO eJ /h tW cTc +ayer

Tr#ng ba

Gio Trnh Thit K Web

WWW.vietnoiviet.com

JNi l": L#yer u c thuc tnh /(n4ei hi?n thD th2 tV tr8"c; O#u c,# cc l": L#yer; l": L#yer O#u Oe che *huIt l": L#yer tr8"c nu n c c5ng to ; c th? th#y Ui trnh tV cc l": l#yer bYng cch0 %hRn L": L#yer cn th#y Ui th2 tV Trong &ro:ertieO (nO:ector; nh9: th2 tV m"i trong m)c /in4ei

%hRn Cnh n n

n 'hi<n L#yer

%hRn mu n n

3. A E$MA "Dt L 0#'0 Khi *h!ng mu+n iem L#yer no th Qn L#yer bYng mt trong cc cch O#u0 Trong &ro:ertieO (nO:ector; ti thuc tnh ^iO0 chRn ~i44en. ~ogc mE L#yer &#nel0
%t hi?n thD th2 tV L#yer

%Im i: ch[ng cc L#yer

I.2.:.

T$"#4$A# & A#4:

%licl bi?u t8Wng ny ? Qn'hi<n L#yer

Timeline &#nel l mt bCng O{: i: Cnh; l": L#yer theo mt trnh tV iuIt hi<n tr3n tr)c th@i gi#n; n gi-: to cc hnh Cnh ng. JE Timeline &#nel0 Win4on therO Timeline

Tr#ng bt

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Tr)c th@i gi#n l tr)c honh Tr)c *h!ng gi#n l tr)c tung K:O0 6Kr#me :er 1econ47 t+c chy u Rc theo O+ *hung hnh tr3n giXy 1. MDt %u 4V5 { lE$ % 89A! T$"#4$A#: Z+i t8Wng trong Timeline l Cnh v l": L#yer %c +i t8Wng *hc mu+n OP 4)ng Timeline th :hCi 8# ni 4ung vo L#yer tr8"c; O#u m"i 8# vo Timeline &#nel 2. CQ.E E$M5 .EAE sAE t'(A! T$"#4$A# & A#4: %hT c th? hi<u chTnh thuc tnh 1s% t3n t9: tin Cnh m th!i Z? to mt Cnh chuy?n ng; cn chn Cnh trong l": L#yer 1#u chn l": l#yer ny vo Timeline &#nel 3. H$M5 .EAE 4z) L 0#' t'(A! T$"#4$A# & A#4: %hT c th? hi<u chTnh mt O+ thuc tnh c,# l": L#yer nh80 vD tr 6lert; to:7 *ch th8"c 6ni4th; ~eight7; th2 tV l": 6/in4ei7 v thuc tnh c th? iem 6^iOibility7 Kh!ng th? th#y Ui thuc tnh chi u rng v chi u c#o trong trnh 4uy<t l#vig#torG.\

I.3.

T+ ALBUM LT TNG HNH:

To mt #lbum Cnh l9t tHng hnh O#u *hoCng th@i gi#n nhIt Dnh %huQn bD u hnh c c5ng *ch th8"c c t3n ln l8Wt l ~_.gir; ~F.gir; ~u.gir %hn t9: tin Cnh ~_.gir vo tr#ng %hRn Cnh; trong &ro:ertieO (nO:ector0 nh9: t3n Cnh0 ~_; 1rc0 ~_.gir Ko ~_ trVc ti: vo Timeline &#nel. ~_ chin _] *hung hnh tH _ n _] Ko ~_.gir vo Timeline th3m _ ln n$# v OP# 1rc0 ~F.gir Lg: li vi<c *o hnh vo Timeline &#nel v OP# 1rc0 ~u.gir Trong TimeLine &#nel; chRn K:O_]; nghh# l u Rc chy _] *hung hnh'_O; mNi hnh chim _] *hung; 4o O#u _O Oe chuy?n O#ng hnh m"i %hRn Suto&l#y ? vi<c l9t hnh tV ng 4iAn r# *hi iem tr#ng %hRn Loo: ? *hi n ~u.gir th Oe lg: ti: ~_.gir L8u t9: tin; nhIn K_F iem l9t hnh tr3n trnh 4uy<t To chuy?n ng cho my b#y tH tri O#ng :hCi c,# mn hnh; tH to 6\;\7 n to 6a\\;\7 Trong 1t#n4#r4 vien %hRn (nOert L#yer; gt t3n L#yerJ#yb#y; T\; L\

V7 891:

V7 89 2:

Tr#ng bb

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%hn Cnh my b#y vo L#yer %hRn L#yer *o vo TimeLine &#nel; chim tH *hung hnh _ n _] %hRn *hung hnh _] trong L#yerJ#yb#y Trong &ro:ertieO (nO:ector; nh9: La\\; T\; K:O_]; chRn Suto&l#y; chRn Loo: L8u t9: tin; nhIn K_F iem *t BuC tr3n trnh 4uy<t To F chuy?n ng iy r# c5ng mt l-c; *hi my b#y #ng b#y th ho# tuyt rMi tH tr3n iu+ng %hn th3m mt l": L#yer F; gt t3n L#yerTuyet; Lu\\; T\ %hn Cnh ho# tuyt vo L#yer ny Ko L#yerTuyt vo trong TimeLine &#nel; E *3nh th2 F; tH *hung hnh ] n _] %hRn *hung _] c,# l": L#yerTuyt E *inh F Trong &ro:ertieO (nO:ector; nh9: Lu\\; TF\\. L8u t9: tin; nhIn K_F iem *t BuC; *hi my b#y #ng b#y th mt ho# tuyt rMi iu+ng tH to 6u\\;\7

V7 89 3:

I.:.

TEM&LATE:
Tem:l#te *h!ng nh$ng gi-: t# c th? OP 4)ng cc thnh :hn 45ng chung m cmn gi$ Bu#n h< gi$# cc thnh :hn trong mt myu tr#ng 8Wc thit *; b+ c)c On. T# c th? c}n c2 vo mt myu tem:l#te ? to nh#nh nhi u tr#ng c c5ng mt b+ c)c thit *. Th#o tc v"i tem:l#te; t# cn :hXn bi<t r gi$# tr#ng myu v tr#ng OP 4)ng tem:l#te. /rang &_u te&'late L t9: tin *i?u .8Bt v"i :hn thit * chuQn cho mt b+ c)c 45ng chung; trong tr#ng c F loi v5ng0 v5ng 8Wc *ho v v5ng *h!ng *ho. /rang #` dang te&'late0 L t9: tin *i?u .htm nh8ng c b+ c)c gi+ng nh8 tr#ng myu tem:l#te; t# chT 8Wc :h: hi<u chTnh; nh9: ni 4ung m"i cho cc v5ng *h!ng *ho. Khi c OV th#y Ui trong tr#ng myu tem:l#te th cc v5ng *ho c,# cc tr#ng OP 4)ng tem:l#te c.ng Oe tV ng c9: nh9t theo.

I.:.1.

TR( "z$ "Dt T#")4 t#:

1w TR( t' A! t#")4 t#:

To m"i mt tr#ng ~TJL tem:l#te 6myu7 nh8 mt tr#ng bnh th8@ng K| L#yout t#ble; L#yout cell :h5 hW:; nh9: ni 4ung; chn hnh cho cc v5ng 45ng chung L8u tr#ng myu tem:l#te0 _$4# \ 3# % t#")4 t# Khi l8u tr#ng 48"i 4ng tem:l#te 6.4nt7 mgc Dnh tIt cC cc v5ng c,# tr#ng tem:l#te u bD *h#; 4o :hCi mE *h# cho cc v5ng *h!ng 45ng chung %hRn v5ng cn mE *h# IA%#'t t#")4 t# (,-#.t% E8$t ,4# <#!$(A gt t3n cho v5ng mE *h#

Tr#ng b`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%c cch *hc ? to Tem:l#te0 To tem:l#te theo myu c On0 %hRn thVc Mn Kile'len=.. %hRn &#ge oeOignO'Teit0 Srticle o nith l#vig#tion. %hRn %re#t tem:l#te E cu+i :hCi h: thoi.

2w TR( t' A! tE#( "5 t#")4 t#:

%hRn Kile'len= Trong h: thoi len oocument; chRn t#b tem:l#te %hRn myu tem:l#te to On cre#te. lh$ng v5ng 45ng chung Oe bD *h#; *hi thit * ng8@i 45ng chT c th? th#y Ui ni 4ung trong :hn 8Wc mE *h#

I.:.2.

H$M5 .EAE T#")4 t#:

JE tem:l#te cn hi<u chTnh0 Jo4iry' tem:l#te ' :en Stt#che4 tem:l#te. juIt hi<n tr#ng myu tem:l#te; thVc hi<n hi<u chTnh Trong SOOet &#nel; nhm tem:l#te %hRn tem:l#te cn Ui t3n .

1. H$M5 .EAE t#")4 t#

2. p$ tKA t#")4 t#: 3. (Q "Dt t#")4 t#: Tr#ng `\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Trong SOOet :#nel; chRn nhm tem:l#te. %hRn tem:l#te cn i# lhIn 4elete . Khi io mt tem:l#te Oe Cnh h8Eng n tIt cC cc tr#ng c OP 4)ng tem:l#te. lu thVc OV mu+n io; tr8"c ti3n n3n mE cc tr#ng OP 4)ng tem:l#te r[i chRn ch2c n}ng tch *hi tem:l#te

:. TQ.E t' A! lEt$ t#")4 t#

Jo4iry' Tem:l#te' oet#ch rrom tem:l#te.

N. \ 89A! T#")4 t# .E( t' A!:

1#u *hi to 8Wc cc tr#ng myu tem:l#te; t# c th? 4A 4ng OP 4)ng ch-ng.: 4)ng mt myu tem:l#te0 Kile' len' ~TJL to tr#ng m"i. Jo4iry' Tem:l#te' S::ly tem:l#te to :#ge= %hRn myu tem:l#te. lh9: ni 4ung; hnh Cnh vo nh$ng v5ng *h!ng *ho. ~ogc thVc hi<n cch *hc0 JE SOOet &#nel; nhm tem:l#te. %hRn trong 4#nh Och cc myu tem:l#te. %hRn n-t S::ly.

U. Co) AEot t' A! % 89A! t#")4 t#:

Jo4iry' Tem:l#te' c:4#te current :#ge; c9: nh9t tr#ng hi<n hnh. Jo4iry' Tem:l#te' c:4#te :#ge' qntire Oite trong liOt boi loo* in.

Tr#ng `_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Tr#ng `F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG II:
II.1. BEHAVI+<\ II.1.1. TA! i5 A 3P B#E 3$('%

BEHAVI+<\ k _+<M

peh#viorO l cc on *Dch bCn 61cri:7 8Wc thit * On bYng ch8Mng trnh ore#mne#ver; n gi-: th3m cc i u *hi?n; hm *i?m tr# trnh 4uy<t; 1hoc*n#ve; th3m h< th+ng li3n *t &o:u:Jenu; chn Xm th#nh; *i?m tr# rorm; lm :hong :h- hMn tr#ng Web c,# bn. JUi peh#viorO g[m u yu t+0 Z+i t8Wng ch2# peh#viorO0 Z+i t8Wng ch2# bin c+ rIt # 4ng; c th? l tr#ng; rorm; Cnh; n-t; mt 4mng teit= &hCi chRn +i t8Wng :h5 hW: v"i bin c+ v hnh ng. pin c+ 6qvent7 iCy tr# tr3n +i t8Wng0 L cc OV *i<n iy r# tr3n +i t8Wng 8Wc chRn; c rIt nhi u loi bin c+; cc bin c+ *hc nh#u tr3n cc +i t8Wng *hc nh#u tr3n c5ng mt tr#ng Web. ~nh ng i *m v"i bin c+0 L mt on m l<nh thVc hi<n nhi<m v) cho +i t8Wng.~nh ng chT 8Wc gRi *hi c bin c+ t8Mng 2ng; i u ni l3n m+i Bu#n h< chgt ch| gi$# +i t8Wng; bin c+ v hnh ng. Jt +i t8Wng trong tr#ng th8@ng i *m v"i mt peh#viorO; nh8ng c.ng c tr8@ng hW: mt +i t8Wng c nhi u hMn mt bin c+; *hi tuz thuc vo trnh tV cc peh#viorO m ch8Mng trnh ln l8Wt *i?m tr# tHng bin c+. lu mt +i t8Wng c nhi u peh#viorO m cc peh#viorO ny li c c5ng loi bin c+ 6nh8ng *hc hnh ng7 th *hi bin c+ iy r#; l9: t2c cc hnh ng tun tV thVc hi<n

II.1.2. B#E 3$('% & A#4

JE peh#viorO &#nel0 %hRn W$A8(B B#E 3$('% juIt hi<n peh#viorO &#nel %hRn +i t8Wng g{n peh#viorO Tuz thuc vo vi<c chRn cc +i t8Wng *hc nh#u m peh#viorO tV chRn loi binc+ :h5 hW: v cho :h: thVc hi<n mt O+ hnh ng t8Mng 2ng tr3n +i t8Wng ; bn c th? i u chTnh li; 4o vi<c chRn +i t8Wng l c!ng vi<c u ti3n v rIt Bu#n trRng trong vi<c to mt peh#vior Z+i t8Wng 8Wc chRn Oe hi?n thD tr3n peh#viorO &#nel 48"i 4ng T#g SctionO; t3n th| ~TJL * b3n tH SctionO 1. TEK"S e(Q "Dt B#E 3$('% Th3m peh#viorO0 %lic* n-t 67 chRn hnh ng trong 4#nh Och Jt bin c+ t8Mng 2ng iuIt hi<n 6c th? hi<u chTnh li7 jo peh#viorO0 %hRn 4mng peh#viorO cn io trong 4#nh Och %lic* n-t 6/7

2. TE 0 O$ t'LAE t| B#E 3$('% Tuz thuc vo trnh tV cc peh#viorO m cc hnh ng theo trnh tV thVc hi<n. % nh$ng hnh ng ng#ng cI: th *h!ng cn trnh tV. %c peh#viorO *hc bin c+ ^ 4)0 mt Cnh img c F bin c+ *hc nh#u onJouOeut v nJouOever; *h!ng cn Bu#n tXm n trnh tV %c peh#viorO c c5ng bin c+0 Tr#ng `u

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Trong tr8@ng hW: ny; :hCi O{: i: -ng trnh tV th m"i c *t BuC nh8 mong mu+n. %ch O{: i:0 %hRn peh#viorO cn O{: i: %lic* n-t ? O{: i:

3. TE 0 O$ ,$A .u:
Khi hnh ng 8Wc chRn th bin c+ t8Mng 2ng c.ng 8Wc gn cho peh#vior. Khi bin c+ *h!ng:h5 hW:; t# c th? th#y Ui bin c+ *hc bYng cch0 %hRn 4mg peh#viorO ch2# bin c+ cn th#y Ui; %lic* chut vo m.i t3n tr3n 4mng peh#viorO

II.1.3. TKA 3b { A!E .Q. ,$A .u

nSbort0 Khi ng8ng tCi mt Cnh; hogc nhIn n-t 1to: trong trnh 4uy<t nSrterc:4#te0 Khi tr#ng thVc hi<n iong vi<c c9: nh9t ngu[n 4$ li<u nperorec:4#te0 tr8"c *hi tr#ng thVc hi<n c9: nh9t ngu[n 4$ li<u nplur0 *hi +i tVMng 8Wc chRn *h!ng cmn E trng thi hi<n hnh npounce0 Khi ni 4ung trong J#rBuee n bi3n c,# J#rBuee n%h#nge0 Khi c OV th#y Ui trong Teitriel4 h#y LiOt'menu c,# rorm nclic*0 Khi %lic* chut vo +i t8Wng nobl%lic*0 Khi oouble %lic* vo +i t8Wng nqrror0 Khi iCy r# lUi hi<n tr#ng c,# trnh 4uy<t nKiniOh0 *hi ni 4ung J#rBuee i ht mt vmng nKocuO0Khi nh9: ni 4ung vo TeitKiel4 nKeyoonn0 Khi nhIn :hm iu+ng n*eyc:0 Khi thC :hm r# nKey&reOO0Khi nhIn :hm r[i thC r# nLo#40Khi hon tIt vi<c tCi tr#ng m"i nJouOeoonn0 Khi nhIn chut iu+ng nJouOeJove0 Khi 4i chuy?n chut

Tr#ng `G

Gio Trnh Thit K Web

WWW.vietnoiviet.com

nJouOeut0Khi 4i chuy?n chut r# ngoi n-t nJouOever0 Khi 4i chuy?n ng#ng Bu# n-t nJouOec:0 Khi thC chut r# nJove0 *hi cP# OU hogc *hung 4i chuy? nse#4y1t#te%h#nge0 Trng thi thnh :hn th#y Ui; trng thi g[m0 cniniti#lie4; lo#4ing; com:letenreOet0 Khi Korm trC v gi trD mgc Dnh nseOie0 *hi cP# OU hogc *hung th#y Ui *ch th8"c nsonqnter0 Khi ngu[n 4$ li<u c th3m 4mng m"i nsonqiit0 *hi 4mng 4$ li<u t[n ti n1croll0 Khi cun th#nh cun n1elect0 Khi chRn Teit; Jenu(tem c,# LiOt'menu n1t#rt0 Khi ni 4ung J#rBuee b{t u _ vmng n1ubmit0 Khi gPi Korm ncnlo#40 Khi r@i *hi tr#ng

II.1.:. H$M5 .EAE B#E 3$('% 1. Co) AEot ,#E 3$(5%:

Jt peh#vior O#u *hi 8Wc to Oe iuIt hi<n trong 4#nh Och cc peh#vior; t# c th? c9: nh9t; hogc th#y Ui cc th!ng tin c,# peh#vior bYng cch0 %hRn +i t8Wng c peh#vior JE peh#vior &#nel oouble %lic* tr3n peh#vuor mu+n c9: nh9t ThVc hi<n vi<c chTnh OP# 2. TE 0 O$ tE5D. t7AE .G ,#E 3$(5%: Th#y Ui thuc tnh c,# +i t8Wng *hi iem tr#ng l mt vi<c lm th- vD; th#o tc rIt Mn giCn nh8ng c th? to r# hi<u 2ng l nh8 OV Qn hi<n hogc chuy?n ng c,# +i t8Wng ^ 4)0 l-t to OV Qn hi<n c,# +i t8Wng Khi c mt O+ l": Cnh i: ch[ng l3n nh#u; bn c th? th#y Ui thuc tnh Qn hi<n c,# ch-ng. CTch t2o0 To mt tr#ng m"i o %hn L#yer _ ch2# Cnh th2 nhIt; nh9: L#yer (o0 L#yer _ o %hn L#yer F ch2# Cnh th2 h#i; hi<u chTnh O#u cho c5ng to v"i L#yer _ To peh#vior i u *hi?n0 o %hRn n-t i u *hi?n E gc tr3n mn hnh o Gn peh#vior0 chRn ch#nge :ro:ertieO o juIt hi<n h: thoi %h#nge &ro:ertieO0 Trong 4#nh Och Ty:e or bect0 chRn L#yer l#me bect0 nh9: l#yer_ &ro:erity0 %hRn 1elect0 Otyle.^iOibility len ^#lue0 ~i44en K ng h: thoi Trong peh#vior &#nel chRn t3n bin c+ l nJouOever To th3m mt peh#vior cho n-t ny; trong h: thoi %h#nge &ro:ertieO; nh9: cc th!ng O+ t8Mng tV; nh8ng ti ! len v#lue0 nh9: viOible

Tr#ng `]

Gio Trnh Thit K Web

o Trong peh#vior; th#y t3n bin c+ l onJouOeut

WWW.vietnoiviet.com

^ 4) 0 To n-t i u *hi?n to +i t8Wng. pn c th? th#y Ui to c,# p#nner v

tri h#y :hCi tuz thuc vo clic* m.i t3n theo h8"ng no

CTch t2o0
To tr#ng m"i %hn mt L#yer; chn Cnh b#nner vo L#yer %hRn L#yer; th#y Ui cc thuc tnh nh8 O#u0 L#yer(o0 L#yerLogo; L\; T\ %hn n-t m.i t3n i u *hi?n to Cnh Ko F n-t m.i t3n r# gi$# tr#ng %hRn n-t m.i t3n tri; chn peh#vior; chRn %h#nge &ro:ertieO; nh9: th!ng O+0 &ro:ertieO0 1tyle.lert len ^#lue\ K Trong peh#vior; chRn bin c+ n%lic*. Lm t8Mng tV cho m.i t3n :hCi &ro:ertieO 1tyle.lert len ^#lueFt\ K Trong peh#vior; chRn bin c+ n%lic*. %hec* pronOe/ %hec* :lugin %hec* pronOe Trong Oite c th? chn vo mt O+ hi<u 2ng gc bi<t *h!ng :hCi trnh 4uy<t no c.ng iem 8Wc

^ 4)
pn to F WebOite; Jt 1ite m"i nhIt ch2# cc hi<u 2ng gc bi<t; c tr#ng ch, l t9: tin c t3n 1iteJoi.htm; Jt Oite thit * theo *i?u c.; c tr#ng ch, l t9: tin c t3n 1itecu.htm o5ng peh#vior ? *i?m tr# trnh 4uy<t c,# ng8@i iem; nu c trnh 4uy<t m"i th iem 1ite m"i b{t u v"i tr#ng 1iteJoi.htm; ng8Wc li th iem 1ite c. v"i tr#ng 1ite%u.htm CTch thWc hi$n0 To tr#ng m"i 6*h!ng cn nh9: ni 4ung tr#ng %hRn th| po4y Trong peh#vior &#nel; %lic* 67 chRn %hec* pronOer lh9: csL0 1iteJoi.htm lh9: Slt csL0 1ite%u.htm K

Tr#ng `a

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Jt bin c+ nlo#4 *m hnh ng %hec* pronOer. L8u t9: tin K_F iem *t BuC

II.1.N. CE#.l &45!$A

Khi mt tr#ng ch8# c thnh :hn Kl#Oh h#y 1hoc*n#ve th ng8@i iem cn c th3m &lugin ? iem 8Wc tr#ng; m bn *h!ng bit ng8@i iem c ci cc &lugin ? iem h#y *h!ng; *hi bn c th? 4V :hmng th3m mt tr#ng th8@ng *h!ng OP 4)ng Kl#Oh; 1hoc*n#ve lu ng8@i iem c &lugin th cho iem tr#ng vTr#ngKl#Oh.htmw; ng8Wc li th iem vtr#ngth8@ng.htmw. %ch thVc hi<n0 ZDnh h8"ng 1ite0 To tr#ng m"i 6 Kh!ng cn ni 4ung7 %hRn T#g po4y; %lic* n-t 67; chRn %hec* &lugin 1elect0 1hoc*n#ve (r roun4; Go to csL0 Tr#ngKl#Oh.htm therniOe; go to csL0 Tr#ngthuong.htm

II.1.U. pJAE EVzA! & !#:

T8Mng tV; chRn n-t li3n *t (m#ge Trong peh#vior; chRn bin c+ nclic*; #ction %hec* &lugin

II.2.

_+<M:

Korm ? gi#o ti: gi$# ng8@i th#m Bu#n v ng8@i ch, neb; c th? li3n lc th!ng Bu# qm#il. Korm cmn l mn hnh nh9: li<u; t9: hW: nh$ng ! nh9: li<u; n-t chRn; n-t *i?m tr# h#y 4ng li<t *3 4#nh Och=.ZXy l cch gi#o ti: gi$# ng8@i th#m Bu#n v"i ch, tr#ng neb. ore#mne#ver gi-: to cc bi?u myu rIt 4A 4ng v nh#nh chng. %c ! nh9: li<u; cc n-t i u *hi?n=T# c th? th#y Ui cc mgc Dnh c,# rorm v iP lf th3m cho :h5 hW: v"i f mnh.

II.2.1. T+ _+<M:

%hRn menu IA#'t/ _('".

&hm vi c,# rorm

Z8@ng *hu!n vi n *h!ng l n nt mu i 4i<n cho gi"i hn trong rorm. JRi thnh :hn c,# rorm u :hCi nYm trong *hu!n vi3n ny. Trong rorm cn thit :hCi c F n-t gc bi<t v1cpJ(Tw v vsq1qTw o 1ubmit0 chI: nh9n ni 4ung c,# rorm; v cho :h: ng8@i 4uy<t gEi th!ng tin; 4$ li<u trong rorm v Oerver o seOet0 Thit l9: gi trD b#n u c,# tIt cC cc i u *hi?n tr3n rorm

Tr#ng `t

Gio Trnh Thit K Web

WWW.vietnoiviet.com

II.2.2. CQ. Ou$ tVWA! t'(A! `('":

% F cch ? chn cc +i t8Wng vo rorm %ch _0%hRn t#b rorm tr3n IA%#'t & A#4. %ch F0%hRn menu IA%#'t _('"CEA Ou$ tVWA! 1. TET _IELC0 w CQ.E tR(: o5ng nh9: cc th!ng tin ng{n nYm gRn trong mt 4mng; loi ! ny th8@ng 45ng nh9: cc th!ng tin v hR t3n; D# chT; O+ i<n thoi= Zgt con tr trong 8@ng vi n rorm. %hRn thVc Mn (nOert Korm Teit riel4

,w TE5D. t7AE .G T#et`$#48 0 %h#rt Wi4th 0 1+ *f tV cho chi u 4i !. J#i %h#rO 0 1+ *f tV nhi u nhIt c th? nh9n. (nit ^#lue 0 li 4ung *hEi to c,# ! nh9: li<u. 1ingle Line 0 nh9: li<u mt 4mng. Julti line 0 nh9: li<u nhi u 4mng. &#OOnor4 0 nh9: cc loi m9t m; *hi nh9: li<u tHng *f tV nh9: 8Wc th#y bYng 4Iu v w. 2. <ACI+ BUTT+N 0 Trong _ nhm cc n-t chRn chT 8Wc chRn _ t5y chRn. %c n-t r#4io thuc c5ng nhm :hCi c c5ng t3n nhm 6Grou:7; nh8ng *hc nh#u v gi trD6v#lue7. w CQ.E tR(: Zgt 4Iu nhy ti vD tr mu+n chn %hRn inOert Korm r#4io putton ,w TE9F. t7AE .G < 8$( ,5tt(A: %hec*e4 v#lue 0 Gi trD tHng n-t Mn trong nhm. (niti#l 1t#te 0 trng thi b#n u c,# n-t. %hec*e40 l-t VMc chRn. cnchec*e40 l-t ch8# 8Wc chRn. 3. <ACI+ G<+U&: 0 To mt nhm n-t r#4io. w CQ.E tR(:

Tr#ng `b

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%hRn (nOertKorms#4io grou:.~: thoi s#4io Grou: iuIt hi<n.

,w

TE9F. t7AE .G < 8$( !'(5):

l#me0 lh9: t3n nhm 4Iu vw0 th3m n-t; 4Iu v/v0 io n-t. L#bel l t3n nhn n-t. ^#lue l gi trD gEi v cho ch, neb. L#yout cOing0 p+ c)c #ng OP 4)ng Line bre#*0 %c n-t iu+ng 4mng T#ble0 %c n-t nYm trong mt bCng.

:. CHECKB+0 To mt nhm cc t5y chRn; cho :h: chRn nhi u t5y chRn c5ng mt l-c hogc *h!ng chRn g cC. CQ.E tR(0 %hRn IA%#'t _('" +,-#.t% CE#.l,(e. N. LI\T/ MENU vC'()8(BA "#A5w ~: li<t *3 4#nh Och cc ni 4ung theo tHng 4mng; 8Wc cun li thnh _ 4mng. Khi cn iem 4#nh Och; %lic* n-t m.i t3n chT iu+ng b3n :hCi h: li<t *3 ? thC 4#nh Och iu+ng. %hRn menu (nOert' Korm obect' LiOt' Jenu. Trong :ro:ertieO inO:ector t# nh9: vo t3n tuz f trong liOt'menu. %hRn *i?u ty:e0 Jenu. n n-t LiOt ^#lueO= n vw ? th3m m)c; v/v ? io m)c chRn. n n-t K; ng h: thoi LiOt. ^#lue %huy?n Bu# 4ng iem &revien in bronOer; h#y K_F iem *t BuC. U. TETA<EA0 TeitSre# 45ng nh9: cc th!ng tin; 4$ li<u 4i g[m nhi u 4mng; th8@ng 45ng cho cc ghi ch-; f *in; cCm nghh; th{c m{c= c,# ng8@i 4uy<t neb. %hRn menu (nOertKorm obect Teit#re#. TeitSre# &ro:ertieO0 o Teit riel4 0 t3n ! nh9: li<u nhi u 4mng. o %h#r Wi4th 0 1+ *f tV cho chi u 4i !.

Tr#ng ``

Gio Trnh Thit K Web

o lum lineO 0 1+ 4mng cn hi?n thD. o Wr#: 0 ^}n bCn tV iu+ng 4mng. o (nit ^#lue 0 Gi trD *hEi to c,# !

WWW.vietnoiviet.com

a. _ILE _IELC:G$ l" to) t$A: Trong rorm; ngoi cc th!ng tin ng{n gRn m ng8@i th#m Bu#n c th? nh9: trVc ti:; nu hR mu+n gEi mt on v}n bCn nhi u 4mng; h#y mt hnh Cnh minh hR# th t# n3n chn th3m rile riel4.ZXy l thnh :hn rorm gi-: gPi *m mt t9: tin theo cc th!ng tin nh9:. %hRn menu (nOertKorm obectOKile riel4 n K_F iem *t BuC0 lu mu+n gEi *m Cnh th In n-t pronOer r[i tm t9: tin Cnh cn gEi h#y c.ng c th? nh9: 8@ng 4yn th8 m)c ch2# hnh Cnh. d. BUTT+N: %hRn menu IA%#'t _('" (,-#.tB5tt(A. %c thuc tnh c,# putton0

o putton n#me.Zgt t3n cho Oubmit o Gn nhn cho button. o Sction0 1ubmit rorm.0 n-t Oubmit seOet rorm0 n-t reOet lone0 button 4o ng8@i OP 4)ng gn hnh ng f. N=T HNH NH:: %hn hnh Cnh vo tr#ng0 IA%#'tI" !#=hi<u chTnh thuc tnh ? hnh Cnh ny thnh cc n-t nh8 1ubmit; seOet=. . CQ.E tR(: ZDnh vD con tr nMi cn chn hnh. (nOertKorm obect (m#geO riel4.6hogc clic* n-t (m#ge riel4 tr3n th#nh c!ng c)7 ,. I" !# `$#48 )'()#'t$#%: (m#geKiel40 v1ubmitw chRn Cnh lm n-t Oubmit vseOetw chRn Cnh lm n-t reOet. W 6Wi4th70 chi u rng Cnh lm n-t. ~ 6~eight70 chi u c#o Cnh lm n-t. 1rc0 t3n t9: tin Cnh lm n-t. Slt0 cXu ghi ch- *hi chut ng#ng Bu# Cnh. Slign0 c#nh vD tr Cnh Oo v"i cc +i t8Wng *hc. q4it (m#ge0 gRi ch8Mng trnh Kire Wor*O iP lf Cnh. 1g. UM MENU : Z l cch i: gRn 4#nh Och cc li3n *t li tr3n mt 4mng; *hi cn chR li3n *t no; ng8@i th#m Bu#n thC 4#nh Och li3n *t iu+ng; r[i chRn trong O+ . %ch ny gi-: nh$ng tr#ng neb c Bu nhi u li3n *t c th? thu h: 4i<n tch; to th!ng thong cho

Tr#ng _\\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

neb hMn. Z!i *hi vi<c chRn li3n *t ny rIt nhy; n Oe nhCy nh#nh n cc tr#ng li3n *t; ? *h{c :h)c; t# c th? chn th3m n-t G * b3n. %hRn li3n *t trong 4#nh Och iong :hCi nhIn n-t G ? ic nh9n.

. CQ.E tR(:
ZDnh vD con tr. %hRn thVc Mn (nOert Korm bectO um: Jenu. Trong h: thoi inOert um: Jenu o Teit0 Zgt t3n cho um menu o When Oelecte4; Go To csL 0 lh9: t3n tr#ng li3n *t o Kt BuC Oe iuIt hi3n tr3n 4mng Jenu (temO. o oIu vw hogc vxv ? th3m hogc io mt Jenu (tem. o J.i t3n l3n hogc iu+ng ? th#y Ui trnh tV cc Jenu (temO. o Jenuitem0 4#nh Och cc menuitem 8Wc nh9: trong teit. o :en csL (n0 T#rget c,# *hung; h#y cP# OU chnh hi?n thD tr#ng. o Jenu n#me0 T3n c,# Jenu. o 1elect KriOt (tem Srter csL %h#nge0 %hRn (tem u ti3n O#u *hi li3n *t. o (nOert Go putton Srter Jenu0 chn th3m n-t G.

^ 4)0 mn hnh thit *0 thuc tnh c,# um menu

Kt BuC tr3n trnh 4uy<t0 Tr#ng _\_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

,. H$M5 .EAE 5") M#A5:

Khc v"i cc thnh :hn *hc c,# rorm; *hi cn hi<u chTnh t3n Jenu (tem; h#y li3n *t t8Mng 2ng; t# *h!ng iem E &ro:ertieO (nO:ector m :hCi mE peh#viorO. %hRn um: Jenu. %hRn menu Win4on peh#viorO iuIt hi<n oeOign &#nel c,# peh#viorO.

oouble clic* vo t3n Sction0 um: Jenu. ~: thoi um: menu iuIt hi<n cho :ht t# hi<u chTnh.

.. K$I" t' 4$KA lt .G 5") M#A5: Tr#ng _\F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Z? *i?m tr# li3n *t c,# um: Jenu; t# cn iem tr#ng trong trnh 4uy<t; r[i In vo t3n Jenu (tem trong um: Jenu ? li3n *t i. Kile &revien in bronOer; hogc K_F. %lic* vo 4mng Jenu (tem; t3n tr#ng li3n *t n.

II.2.3. \ 89A! B#E 3$(' .E( T#et`$#48:

Teitriel4 l ! nh9: li<u c,# ng8@i th#m Bu#n; nh8ng c tr8@ng hW: hR *h!ng nh9: li<u cho !; ho}c nh9: gi trD *h!ng :h5 hW:; beh#vior c,# teitriel4 c th? gi-: *i?m tr# cc tr8@ng hW: ny.

^ 4)0
T# c mt rorm gt :hmng *hch On; ? 4A BuCn lf; t# cn thit * O#o cho vi<c nh9n th!ng tin l y , v chnh ic nhIt.

_7 k3u cu0 T# cn *i?m tr# vi<c nh9: li<u c,# ng8@i th#m Bu#n; c) th? l0 &hCi nh9: 4$ li<u cho ! v~R v t3nw. em#il :hCi -ng l D chT qm#il; nghh# l :hCi c *f tV trong D# chT em#il. vlgyw :hCi nh9: tH O+ _ n u_. vThngw :hCi nh9: tH O+ _ n _F. v l}mw :hCi nh9: tH O+ F\\F n F\_\. ; v1+ ng8@iw :hCi nh9: 4$ li<u O+. vGhi ch-w l ! th!ng tin th3m c th? b Bu# *h!ng nh9: li<u c.ng 8Wc. F7 %ch thVc hi<n0 Z? *i?m tr# cc i u *i<n ny; :hCi 45ng peh#vior c,# rorm. %hRn rorm vZT &~lG K~%~ 1lw.~#y chRn n-t 1ubmit; seOet lm +i t8Wng *i?m tr#. Trong peh#vior &#nel; clic* 4Iu 67. %hRn ch2c n}ng ^#li4#te Korm. juIt hi<n h: thoi v#li4#te rorm ch2# cc th!ng tin gi-: i u *hi?n Teit riel4 c,# rorm l#me riel40 4#nh Och tIt cC cc teit riel4 c trong rorm . lu mu+n gt i u *i<n cho teit no th In chRn cho n hi<n hnh. ^#lue reBuie40 y3u cu ! teit :hCi 8Wc nh9: 4$ li<u; nu *h!ng Oe bo lNi. o Snything0 4$ li<u loi no c.ng 8Wc. o qm#il #44reOO0 4$ li<u :hCi c *f tV . o lumber0 4$ li<u 4ng O+. o lumber rrom=to 0 4$ li<u O+ trong *hoCng ic Dnh. u7 Zi u *i<n nh9: TeitKiel40

Tr#ng _\u

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%ch nh9: i u *i<n cho Teitriel40 Trong h: thoi peh#vior; clic* 4Iu 67; chRn ^#li4#te Korm; iuIt hi<n h: thoi ^#lil4#te Korm0 o l#me4 Kiel4O0 %hRn t3n riel4 mu+n gn i u *i<n o ^#lue0 lu chRn seBuire th y3u cu :hCi nh9: 4$ li<u cho riel4 #ng chRn; nu *h!ng Oe bo lNi o Scce:0 %ho :h: chRn *i?u 4$ li<u; nu nh9: O#i *i?u 4$ li<u chRn th iuIt hi<n th!ng bo lNi o Snything0 mRi loi 4$ li<u o lumber0 4$ li<u *i?u O+ o qm#il S44reOO0 *i?u i chT qm#il o lumber Korm0 gi trD *i?u O+ nYm trong *hoCng Krom =to..

^ 4)0 i u *i<n !w ~R v t3nw; chRn seBuire4

Zi u *i<n ! vlgyw0chRn seBuire4; t8Mng tV cho ! thng; n}m

Tr#ng _\G

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG III:
III.1. GII THIU

_<AME\ET\ KIM T<A V U;T BN

III.1.1. T' A! lE5A! v`' "#%#tw:

L tr#ng ~TJL gc bi<t. Tr#ng *hung *h!ng m#ng ni 4ung; *h!ng c th| pok. Tr#ng *hung chT gi-: chi# vi n *hung 6rr#me7 cho tr#ng neb. Ju+n to tr#ng *hung t# :hCi ic Dnh r cc y3u cu O#u0 1+ *hung 6rr#me7 trong mt tr#ng *hung 6rr#meOet7 T3n cho tHng *hung c) th?. %c t9: tin ~TJL lm ni 4ung cho tHng *hung.

^ 4)0
T3n *hung0 To:Kr#me

T3n *hung0 LertKr#me

T3n *hung0 J#inKr#me

T9: tin0 Ts-l.~TJL T9: tin0 Ts(.~TJL

T9: tin0 &~(.~TJL

t9: tin0 rr#me:#ge.html Trong v 4) tr3n; t9: tin tr#ng *hung c t3n rr#me:#ge.html 8Wc chi# lm u *hung0 *hung tr3n; *hung tri v *hung :hCi.^"i t3n c) th? tHng *hung l0 Khung tr3n 0 To:Kr#me. Khung tri 0 Lertrr#me. Khung :hCi 0 J#inKr#me. %c t9: tin ~TJL lm ni 4ung tHng *hung l0 T9: tin Ts-l.~TJL lm ni 4ung To:Kr#me. T9: tin Ts(.~TJL lm ni 4ung LertKr#me. T9: tin &~(.~TJL lm ni 4ung J#inKr#me.

Tr#ng _\]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

5 3b lE50t O$I" lE$ tE$t l "Dt t' A! lE5A!: 5: % th? hi?n thD nhi u tr#ng ~TJL c5ng l-c tr3n mn hnh 4uy<t. &hXn chi# t9: tin r rng cho tHng *hung c) th?; nhm t9: tin ch2# logo; b#nner ri3ng; nhm t9: tin ch2# cc n-t li3n *t ri3ng v nhm t9: tin ch2# ni 4ung ri3ng. &hXn nhm n3n 4A BuCn lf h< n-t li3n *t; gi-: i u *hTen nebOit thu9n ti<n hMn. Khi li3n *t l9t tr#ng chT lm th#y Ui ni 4ung trong mt *hung; cc *hung *hc vyn gi$ nguy3n; n3n hn ch 8Wc vi<c thit * cc thnh :hn l9: li nh8 logo; b#nner; n-t li3n *t..; cc thnh :hn 45ng chung c th? ? ri3ng trong *hung chung. KE50t0 Kh :h2c t: trong thi3t *. Zmi hi ng8@i thit * :hCi hi?u cgn *| v *hi ni<m; th#o tc thVc hi<n tr3n tr#ng *hung. lu *h!ng *ho thVc hi<n; cc tr#ng c th? b) b| gy hogc li3n *t n cc tr#ng *h!ng nYm -ng trong *hung 8Wc chT Dnh. LV5 { t'(A! tE$t l t' A! lE5A!: &hXn bi<t OV *hc nh#u gi$# tr#ng *hung 6Kr#meOet7 v *hung 6Kr#me7; tr#ng *hung l t9: hW: cc *hung Mn. T9: tin tr#ng *hung Kr#me&#ge.html VMc chi# lm u *hung; *hung tr3n 6to:rr#me7; *hung tri 6lertrr#me7 v *hung chnh 6m#inrr#me7. T3n c,# tHng *hung nh8 To:rr#me; Lertrr#me; J#inrr#me 4o ore#mne#ver mgc Dnh gt t3n; t# :hCi ghi nh9n r tHng t3n *hung ? ti<n th#o tc li3n *t trong tr#ng *hung; t# c.ng c th? tV gt t3n cho tr#ng *hung. &hCi :hXn bi<t r OV *hc bi<t gi$# t3n *hung v t3n t9: tin lm ni 4ung cho *hung ^ cc *hung 8Wc chi# r# tH tr#ng *hung n3n *ch th8"c tHng *hung bD h:; v5ng hi?n thD c,# tHng *hung nh; n3n *hi thit * t# chT Bu#n tXm nh$ng v5ng 8Wc hi?n thD nh80 Khung Ts-l; Ts(; cc t9: tin Ts-l.~TJL; Ts(.~TJL. Khi cn iem tr#ng *hung; :hCi mE t9: tin *hung rr#me:#ge.html; nu mE cc tr#ng tr3n.html; tri.html; :hCi.html ri3ng l| th ni 4ung hi?n thD *h!ng trRn vn.

III.1.2. CQ. 8RA! t' A! lE5A! 3b t'LAE t| tE$t l: 1. CQ. 8RA! t' A! lE5A! tEVmA! % 89A!:

Tr#ng _\a

Gio Trnh Thit K Web

WWW.vietnoiviet.com

2. T'LAE t| tE$t l t' A! lE5A!:

&hc thCo b+ c)c 4ng tr#ng *hung tr3n giIy nh:. To nebOite m"i 6Oite' nen Oite7 ch2# tr#ng *hung ny. &hXn nhm t9: tin ni 4ung v to ni 4ung tHng nhm. %hRn loi tr#ng *hung t8Mng 2ng v chT r# t9: tin ni 4ung i 4i<n cho tHng *hung. L8u tr#ng *hung.

III.2.

CCH T+ T<ANG KHUNG V LIN KT T<ANG

ore#mne#ver to On mt O+ 4ng tr#ng *hung chuQn; t# c th? chRn v OP 4)ng ch-ng mt cch 4A 4ng. lu *h!ng c *hung nh8 f thch; t# c th? chRn tr#ng *hung gn gi+ng nhIt r[i tV hi<u chTnh h#y thit * li.

III.2.1. CQ.E tR(:

%hRn thVc Mn Kile' len= %hRn Kr#meOet %hRn 4ng tr#ng *hung trong *hung Kr#meOetO jem myu tr#ng *hung b3n ct &revien; clic* %re#te.

Tr#ng _\t

Gio Trnh Thit K Web III.2.2. M `' "#% & A#4:

Kr#meO &#nel gi-: t# th#o tc v"i tHng *hung mt. %hRn thVc Mn Win4onO therO Kr#meO. ~ogc nhIn :hm 1hirt KF

WWW.vietnoiviet.com

III.2.3. TE ( tQ. t'KA _' "#% & A#4:

Tuz thuc vo th#o tc tr3n Kr#meO &#nel m &ro:ertieO (nO:ector t8Mng 2ng cung cI: th!ng tin :h5 hW:

rr#meO :#nel
%lic* vo gi$# *hung; h#y t3n *hung trong Kr#meO :#nel ? chRn *hung cn lm vi<c; hi<u chTnh nh8 Ui t3n *hung; 4Ui ni 4ung t9: tin *hung; th#nh cun; mu n n=. %lic* 8@ng vi n ngoi c5ng chRn cC tr#ng *hung; clic* vo 8@ng vi n gi$# *hung tr3n; *hung 48"i chRn 4mng *hung. %lic* 8@ng vi n gi$# *hung tri; :hCi chRn 8Wc ct *hung. 1#u th#o tc chRn l th#y Ui m+i Bu#n h< gi$# F *hung; th8@ng l *ch th8"c; tT l< *hung; 8@ng vi n *hung.

1. H$M5 .EAE t' A! lE5A!: aJ Chia (hung

%hRn t3n *hung trong Kr#me &#nel cn chi#. %hRn thVc Mn Jo4iry Kr#meOet. %hRn 1:lit Kr#me Lert' sight ' c: ' oonn ? chi# mt *hung thnh F *hung theo f mu+n.

Tr#ng _\b

Gio Trnh Thit K Web

WWW.vietnoiviet.com

bJ ^oT (hung Z8# tr chut n bi3n *hung cn io. Ko bi3n *hung r# *hi mn hnh; hogc *o O#ng h8"ng bi3n c,# *hung ch#. cJ %i$u chbnh thuGc t?nh trang (hung

Th#y Ui *ch th8"c *hung0 1#u *hi gt ni 4ung vo *hung; n3- *hung *h!ng vH# v"i ni 4ung thit * ; t# c th? th#y Ui nh#nh bYng cch o Zgt con tr chm vo bi3n *hung. o Gi$ chut v *o bi3n n vD tr m"i. Th#y Ui t3n *hung 0 o %hRn *hung cn Ui t3n. o lh9: t3n m"i trong ! Kr#me l#me. Th#y Ui ni 4ung i 4i<n trong *hung0 o ZDnh con tr trong *hung cn Ui ni 4ung. o lh9: t3n t9: tin .html m"i vo 1ite &#nel. o ~ogc In n-t pronOe to rile= ? tm t9: tin th#y th. Th#y Ui bi3n cho *hung0 o J#rgin Wi4th. o J#rgin hight Th#y Ui *ch th8"c *hi iem0 o Znh 4Iu vo ! lo seOie; *h!ng cho :h: th#y Ui *ch th8"ctr8"c *hi 4uy<t tr#ng *hung. Kh!ng hi?n thD th#nh cun0 Ti m)c 1croll0 o %hRn keO0 lu!n lu!n hi<n th#nh cun. o %hRn lo0 *h!ng hi?n thD th#nh cun; 45 tr#ng ni 4ung 4i nhi u 4mng. o %hRn Suto0 Th#nh cun tV iuIt hi<n *hi ni 4ung 4i hMn tr#ng. o %hRn oer#ult0 Tuz thuc vo ci gt mgc Dnh. Kh!ng vi n nt 8@ng *hung0 o por4er lo *h!ng c 8@ng vi n o por4er yeO0 c 8@ng vi n o Wi4th 0 %hRn *ch th8"c nt vi n T! mu vi n *hung0 por4er %olor

Tr#ng _\`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

2. LV5 t' A! lE5A!:

#7 b7 L8u cC *hung tr#ng0 %hRn vi n ngoi c5ng tr#ng *hung trong Kr#me &#nel. %hRn thVc Mn Kile 1#ve Kr#meOet SO= ? gt t3n tr#ng *hung. %hRn Kile 1#ve Kr#meOet ? l8u c9: nh9t th!ng tin. L8u tr#ng i 4i<n *hung 0 ZDnh con tr vo *hung cn l8u. %hRn thVc Mn Kile1#ve Kr#meOet SO=. lu chT cn c9: nh9t th!ng tin ni 4ung trong *hung th chRn KileO#ve Kr#meOet.

III.3.

KIM T<A V U;T BN III.3.1. K$I" t' :

Tr8"c *hi iuIt bCn WebOite l3n 1erver; cn :hCi th!ng Bu# mt O+ th#o tc *i?m tr# *t BuC c,# tHng tr#ng trong cC Web1ite; bn :hCi ch{c ch{n rYng :hn trnh by b+ c)c; li3n *t tr#ng : 2ng y3u cu *hi iuIt hi<n tr3n trnh 4uy<t. lgoi cc *i?m tr# th!ng th8@ng nh8 ni 4ung; hnh Cnh; li3n *t; cc th| l<nh tr3n 1ite c)c b; cn :hCi *i?m tr# th3m mt O+ cc yu t+ O#u Xy0 Trnh 4uy<t pronOe0 Ki?m tr# cc ch2c n}ng c,# 1ite :h5 hW: nhIt v"i trnh 4uy<t no. Jn hnh0 p+ c)c c th#y Ui tr3n mn hnh c *ch th8"c _\FGitab :iiel Oo v"i mn hnh b\\ia\\; :hCi c+ g{ng trung ho trong trnh by; thit * Cnh; chRn *i?u ront; v"i *ch cE :h5 hW:. Li3n *t Lin*0 *h!ng th? ? trong 1ite nh$ng li3n *t gy; li3n *t *h!ng -ng tr#ng ch hogc nh$ng tr#ng m[ c!i *h!ng li3n *t Th@i gi#n tCi tr#ng0l *hoCng th@i gi#n ng8@i iem ch@ tr#ng hi?n thD; *h!ng n3n 8# Bu nhi u hnh Cnh vo tr#ng; c th? to tr#ng Slbum. To mt 1ite thP nghi<m0 l3n ch: 1ite n mt th8 m)c *hc; hogc mt my c)c b *hc ? chy thP nghi<m; gi-: bn hi<u chTnh chnh ic hMn. Z? gi-: bn 4A 4ng hMn trong *i?m tr#; ore#mne#ver cung cI: l9: bCn bo co *t BuC tHng tr#ng; cC 1ite rIt chi tit; 4V# vo bn c th? BuCn lf v hi<u chTnh mt cch hi<u BuC nhIt. %ch thVc hi<n nh8 O#u0 %hRn _$4# CE#.l & !# CE#.l L$Al juIt hi<n cP# OU seOult (nO:ector . ^"i nhm 1e#rch; ^#li4#tion= o lhm 1e#rch0 Khi cn hi<u chTnh mt O+ th!ng tin nh80 t3n c!ng ty; O+ i<n thoi; =; nYm rCi rc E cc tr#ng *hc nh#u; ? *h!ng O#i Ot trong Bu trnh tm *im v th#y th; t# chRn nhm 1e#rch0_$4# CE#.l & !# CE#.l L$Al Trong nhm 1e#rch; %lic* n-t m.i t3n; %hRn Kin4 #n4 se:l#ce Kin4 Wh#t0lh9: ni 4ung cn tm se:l#ce With0 nh9: ni 4ung th#y th; chRn se:l#ce Sll o lhm *i?m tr# tnh hW: l< 6^#li4#tion70 lu thit * tr#ng Web bYng cc th| l<nh ~TJL th *h!ng trnh *hi nh$ng O#i Ot nh; t# c th? mE tr#ng v *i?m tr# tnh hW: l< c,# cc th| ~TJL %lic* n-t m.i t3n; chRn v#li4#tion %urrent oocument juIt hi<n h: thoi chT r cc th| *h!ng hW: l< o Ki?m tr# tnh t8Mng thch tr3n trnh 4uy<t

Tr#ng __\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

% nh$ng th| l<nh m trnh 4uy<t c. *h!ng nh9n 4i<n 8Wc; ? *i?m tr# tnh t8Mng thch trnh 4uy<t; chRn nhm %hec* T#rget pronOer %hec* %lic* m.i t3n; chRn %hec* T#rget pronOer %hRn loi trnh 4uy<t; verOion cn *i?m tr# %lic* chec*

III.3.2. Kt Au$ 3b e5?t ,sA 1w Kt Au$:

1#u *hi hon tIt vi<c *i?m tr#; nu c *t n+i vo mng; th c th? iuIt bCn 1ite l3n 1erver. Trong 1ite &#nel clic* n-t %onnectO to semote hoOt ? *t n+i; hogc chRn semote vien.

&ut rile

lu mt Oite c *t n+i th Oe hi<n thD 4#nh Och t9: tin th8 m)c tr3n Oerver. lu ch8# *t n+i th :hCi thit l9: mt *t n+i l3n Oerver %lic* 4mng oerine # remote 1ite Trong %#tegory0 %hRn semote (nro ScceOO0 %hRn Loc#l'letnor*. lu bn c Buy n truy c9: 1erver Bu# gi#o th2c KT& th c th? chRn KT&; nh9: t3n v m O+ truy c9: ? *t n+i %hRn semote Kol4er 0 Th8 m)c tr3n 1erver nMi Oe ch2# 1ite 1#u *hi *t n+i; thVc hi<n &ut rile l3n Oerver0 %lic* n-t &ut rile jc nh9n :ut ton b nebOite Ki?m tr# li O#u *hi :ut rile bYng cch clic* n-t qi:#n4 %oll#:Oe ? iem *t BuC

2w 5?t ,sA:

Tr#ng ___

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG IV:
IV.1.

TNG QUAN V AVA\C<I&T

GI THIU V AVA\C<I&T:

#v#Ocri:t r# @i v"i t3n gRi Live1cri:t; O#u leOc#:e Ui t3n thnh #v#Ocri:t. Tuy nhi3n gi$# #v# v #v#Ocri:t c rIt t cc i?m chung 45 rYng c- :h: c,# ch-ng c th? c nh$ng i?m gi+ng nh#u. lg!n ng$ #v#Ocri:t 8Wc to bEi leOc#:e vo n}m _``a v 8Wc 8# vo trong trnh 4uy<t leOc#:e l#vig#tor F.\ c,# hR th!ng Bu# trnh bi3n 4Dch ? Rc v thVc hi<n cc m l<nh #v#Ocri:t 8Wc *m theo trong cc tr#ng ~TJL.. #v#Ocri:t l mt ng!n ng$ *Dch bCn 6Ocri:t7 ? vit *Dch bCn cho :h# client. %lient Oi4e l nh$ng y3u cu c,# ng8@i OP 4)ng 8Wc iP lf ti my *hch. Th!ng th8@ng nh$ng y3u cu ny l tnh t#n; *i?m tr# tnh hW: l< c,# 4$ li<u h#y cc hi<u 2ng; cc y3u cu ny th8@ng *h!ng li3n Bu#n n ngu[n cM OE 4$ li<u tr3n Oerver.

IV.1.1. pX. O$I" .G AVA\C<I&T:

#v#Ocri:t l mt ng!n ng$ *Dch bCn 8Wc vit chung v"i ~TJL. Kh!ng bi3n 4Dch nh8 cc ng!n ng$ *hc. Khi tr#ng neb lo#4 iu+ng n 8Wc trnh 4uy<t th!ng 4Dch. #v#Ocri:t l ng!n ng$ thit * ng v cc +i tVMng c *hC n}ng t8Mng tc v"i nh#u th!ng Bu# ng8@i OP 4)ng hogc cc OV *i<n. L ng!n ng$ h8"ng +i t8Wng. &hXn bi<t ch$ ho#; ch$ th8@ng Z8Wc hN trW bEi tIt cC cc trnh 4uy<t nh8 leOc#:e v (nternet qi:lorer #v#1cri:t c *hC n}ng to v OP 4)ng cc +i t8Wng6bect7; cc +i t8Wng g[m F nhm0 o %c bect 4o ng8@i OP 4)ng to r# g[m 0 ZDnh nghh# thuc tnh cho +i t8Wng %- :h:0 "#$ect Name%&ropertie' Th3m :h8Mng th2c cho +i t8Wng To mt inOt#nce c,# +i t8Wng o %c obect c On. #v#1cri:t cung cI: mt b cc puiltxin bect ? cung cI: cc th!ng tin v OV hi<n hnh c,# cc +i t8Wng 8Wc lo#4 trong tr#ng Web v ni 4ung c,# n; cc +i t8Wng ny g[m :h8Mng :h: 6metho47 lm vi<c v"i cc thuc tnh 6:ro:ertieO7 c,# n.

IV.1.2. C?5 t'@. .G O A 3 %.'$)t: <\.'$)t 4 A!5 !#1[ 3 \.'$)t[* CQ. 4MAE 3 %.'$)t </%.'$)t* IV.1.3. AVA\C<I&T t'(A! "Dt t' A! HTML
Zgt cc 4mng m l<nh c,# #v#Ocri:t gi$# cg: t#g Ocri:t'Ocri:t % th? vit nhi u R#n m l<nh #v#Ocri:t trong c5ng mt t9: tin ~TJL. %c *h+i m l<nh #v#Ocri:t c th? gt bIt *z nMi no c,# tr#ng ~TJL. % th? gt trong cg: t#g he#4'he#4 hogc trong cg: t#g bo4y 'bo4y tuy nhi3n t# n3n gt trong cg: t#g he#4 ? 4A *i?m O#t m l<nh v c.ng 4A OP# Ui ch8Mng trnh.

Tr#ng __F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

% th? vit mt t9: tin #v#Ocri:t ri3ng v O#u *t n+i v"i mt hogc nhi u t9: tin tr#ng neb *hc nh#u. CQ.E 10 ^it R#n m Ocri:t trong c5ng tr#ng ~TJL ^ 4) _0 ~TJL ~qSo Ocri:t l#ngu#ge#v#Ocri:t 4ocument.nrite6vWh#t iO your n#me w7 'Ocri:t '~qSo pok li 4ung c,# tr#ng 'pok '~TJL ^ 4) F0 ~TJL pok Ocri:t l#ngu#ge#v#Ocri:t 4ocument.nrite6~ello Worl47 'Ocri:t 'pok '~TJL ^ 4) u0 html he#4 Ocri:t ty:eteit'#v#Ocri:t Oome Ot#tementO 'Ocri:t 'he#4 bo4y Ocri:t ty:eteit'#v#Ocri:t Oome Ot#tementO 'Ocri:t 'bo4y 'html CQ.E (0 JE trnh OR#n thCo note:#4; ^it R#n ch8Mng trnh #v#Ocri:t. L8u li v"i :hn mE rng l.-% 6 l8u f trong t9: tin ny *h!ng ch2# bIt *z mt th| no c,# ng!n ng$ ~TJL7. Li3n *t v"i mt `$4# 3 \.'$)t.-% 8Wc iXy 4Vng tr8"c C: 'hT'0 <HTML* <B+CH* <\.'$)t \<C1[`$4# 3 %.'$)t.-%[ L A!5 !#1h- 3 %.'$)th * 3 \.'$)t .(""#At% </\.'$)t* </B+CH* </HTML*

Tr#ng __u

Gio Trnh Thit K Web

WWW.vietnoiviet.com

L8u f0 trong th| #v#1cri:t t# c th? b thuc tnh S*C v +anguage; *hi ng!n ng$ mgc Dnh l #v#1cri:t .

IV.1.:. MF$ t'VmA! 3$t AVA\C<I&T:

% th? 45ng ch8Mng trnh OR#n thCo0 Kront:#ge; lote:#4; ^iOu#l (nteroev; ore#mne#ver ? vit m #v#Ocri:t; trong gio trnh ny Oe OP 4)ng m!i tr8@ng ore#ne#ver; chRn ch co4e; ore#mne#ver hU trW :hXn bi<t tH *h# bYng mu ch$; hU trW cc hm; thuc tnh c,# cc t#g; gi-: ng8@i OP 4)ng thu9n ti3n trong vi<c thit * v vit ch8Mng trnh

IV.1.N. LMAE OA 3b lEu$ 4MAE:

w +$nh -n0 L<nh Mn l mt cXu l<nh 8Wc *t th-c bYng 4Iu chIm :hQy vw. Trong #v#1cri:t cu+i mNi cXu l<nh t# c th? 45ng 4Iu 67 hogc *h!ng 45ng 4Iu g cC . ,w ch.i l$nh0 Kh+i l<nh l t9: hW: nhi u cXu l<nh Mn 8Wc b#o bRc bEi cg: 4Iu .w +di ch: th?ch trong chng trnh L@i ch- thch ny trnh 4uy<t Oe b Bu# *hi th!ng 4Dch ch8Mng trnh. #v#1cri:t hU trW F loi ch- thch0 %h- thch tr3n mt 4mng0 45ng cg: 4Iu '' %h- thch tr3n nhi u 4mng0 45ng cg: 4Iu '='

IV.1.U. 5?t 8n 4$M5 ' t' A! W#,

#v#1cri:t hN trW F :h8Mng th2c hi?n thD 4$ li<u r# tr#ng Web l0 8(.5"#At.B'$t#vZT#et[w 8(.5"#At.B'$t#4AvZT#et[w Teit l chuUi 4$ li<u mu+n hi?n thD r# tr#ng Web; :hCi 8Wc gt trong cg: nhy *:. lu iuIt gi trD c,# bin thD *h!ng cn gt trong nhy. % th? 45ng 4Iu ? n+i cc chuUi v bin 4oument.nrite6v1tring w v#ri#ble 7 lu iuIt t#g ~TJL th cg: t#g c.ng :hCi gt trong cg: 4Iu nhy *: docu&entJ"riteln0 nu gt trong cg: t#g:re':re th l<nh 4ocument.nriteln iuIt 4$ li<u v iu+ng 4mng. lu *h!ng c cg: t#g :re':re th n cch r# mt *hoCng tr{ng ^ 4)0 pok 1cri:t L#ngu#gew#v#1cri:tw 4ocument.nrite 6~_~ello~_7 4ocument.nrite 6ront colorre4Worl4'ront7 '1cri:t 'pok

Tr#ng __G

Gio Trnh Thit K Web

^ 4)0 bo4y :re Ocri:t 4ocument.nriteln6b~ello'b7 4ocument.nriteln6bWor4l'b7 'Ocri:t ':re 'bo4y

WWW.vietnoiviet.com

IV.2.

BIN V C LIU T<+NG AVA\C<I&T IV.2.1. B$A

1. KEQ$ A$M": pin l t3n c,# mt :hn tP trong ch8Mng trnh; 8Wc OP 4)ng ? l8u tr$ th!ng tin 4o ng8@i 45ng nh9: vo hogc *t BuC trung gi#n c,# Bu trnh tnh ton; Khi *h#i bo bin trong #v#Ocri:t *h!ng cn ic Dnh *i?u 4$ li<u cho bin cho n3n *hi mt bin 8Wc *h#i bo iong n c th? ch2# bIt *z *i?u 4$ li<u no. 2. CQ.E lE $ ,Q( ,$A0 Trong #v#1cri:t; ? *h#i bo bin 45ng tH *ho 3 'S c.ng c th? b Bu# tH *h# v#r. 3 ' N "#V '$ ,4# Jt bin c th? 8Wc *h#i bo v *hEi to hogc *h!ng *hEi to gi trD b#n u J-!n *h#i bo nhi u bin c5ng mt l-c th li<t *3 t3n bin * ti: nh#u cch nh#u bEi 4Iu 6;7 ^ 4)0 ^#r i t v#r y; _` Trong #v#1cri:t; _bin c th? ch2# bIt *z *i?u 4$ li<u g ^ 4)0 v#r #w~ello Worl4w #_``` 3. CQ.E e5?t !$Q t'J .G ,$A0

8(.5"#At.B'$t#vN "#V '$ ,4# 7

:. Q50 tc. OXt tKA ,$A: T3n bin g[m cc ch$ ci v O+; *h!ng 45ng cc *f tV gc bi<t nh80 6 ; ; ; ; =. theo nguy3n t{c O#u0 T3n bin :hCi b{t u bYng *f tV hogc *f tV gch 48"i6 7 Kh!ng b{t u bYng *f tV O+. Kh!ng ch2# *hoCng tr{ng; t3n bin :hCi gWi nh" Kh!ng tr5ng v"i tH *ho c,# #v#1cri:t %c tH *ho trong #v#1cri:t

Tr#ng __]

Gio Trnh Thit K Web

abstract boolean break byte case catch char class const continue default Do double extends false final finally float for Function goto if implements import In instanceof Int interface Long native New Null package private protected public return short static

WWW.vietnoiviet.com
super switch synchronized this throw throws transient true try var val while with

elOe
N. TY" 3|. .G ,$A l tm Cnh h8Eng c,# bin trong ch8Mng trnh. % F loi bin0 !i@n ton cac 0 8Wc *h#i bo ngoi cc hm. &hm vi hot ng c,# bin l tH vD tr *h#i bo trE v O#u trong ch8Mng trnh. !i@n c)c bG0 8Wc *h#i bo trong ch8Mng trnh con. &hm vi hot ng c,# bin l tH vD tr *h#i bo n *t th-c ch8Mng trnh con. L8u f0 lu t3n bin ton c)c v c)c b tr5ng nh#u th bi3n 8Wc OP 4)ng trong hm l bin c)c b.

IV.2.2. Cn 4$M5: C : 4(R$ 8n 4$M5

ci[u #.0 mt bin *i?u O+ ch2# bIt *z gi trD O+ no0 O+ th9: :hXn; O+ nguy3n; O+ 4ng chIm :hQy ng. ci[u chuYi0 mt bin *i?u chuUi c th? ch2# mt nhm *f tV 6%h$ ci; *f tV O+; *hoCng tr{ng; cc *f tV gc bi<t; =7. Gi trD chuUi :hCi gt trong cg: 4Iu nhy !i 6v v7 hogc Mn 6 7 ^ 4)0 v#r O_; OF; Ou O_w~ello Worl4w OF~ello Worl4 ci[u !oolean0 L 4$ li<u chT c F gi trD K#lOe hogc True th8@ng 45ng trong tr8@ng hW: bin hogc hm chT nh9n mt trong F trng thi -ng hogc O#i. ^ 4)0 v#r bl bltrue ci[u 4ull0 l bin *h!ng gn cho gi trD

IV.2.3. T A t: 1. T A t %u E.
T#n TP / %h2c l}ng cng TrH lhXn ^ 4) iF iF iF ]/i iG i] Kt BuC G u F\

Tr#ng __a

Gio Trnh Thit K Web

' // %hi# LIy :hn 48 T}ng gi trD l3n _ GiCm gi trD iu+ng _ _]'] ]'F ]F _\b _\F i] i i] i//

WWW.vietnoiviet.com
u F.] _ F \ ia iG

2. T(QA T GQA
T#n TP / ' ^ 4) iy i y i / y i y i ' y iy T8Mng 8Mng i y i iy i i/y i iy i i'y i iy

3. T A T %( %QAE
T#n TP %h2c l}ng bYng Kh!ng bYng l"n hMn nh hMn l"n hWn hogc bYng nh hMn hogc bYng ^ 4) ]b returnO r#lOe ]b returnO true ]b returnO r#lOe ]b returnO true ]b returnO r#lOe ]b returnO true

:. T A T 4(!$.
T#n TP %h2c l}ng ^ hogc not ^ 4) i a y u 6i _\ y _7 returnO true i a y u 6i] y]7 returnO r#lOe ia y u 6iy7 returnO true

N. T(QA t .E5$
Kf hi<u0 0 L :h: ton n+i h#i chuNi v"i nh#u

^ 4)0 html Ocri:t

Tr#ng __t

Gio Trnh Thit K Web

tit_wWh#t # veryw titFnice 4#y 4ocument.nrite6hFtit_titF'hF7 'Ocri:t 'html

WWW.vietnoiviet.com

Jt O+ *f tV gc bi<t0 n 6 nen line7; t 6t#b7; b 6p#c*1:#ce7; 64Iu 7; w6v7 ^ 4)0 html Ocri:t 4ocument.nrite 6kou i Oing ~#::y pirth4#y.7 'Ocri:t 'html

U. T A t p$P5 l$MA0 C@ )EQ): vp$P5 l$MAw 3 45#1: 3 45#2

lu bi?u th2c i u *i<n -ng th trC v gi trD v#lue _ lu bi?u th2c i u *i<n O#i th trC v gi trD v#lue F html Ocri:t #] ba 4ocument.nrite66#b7 # lon hon b0b lon hon #7 'Ocri:t 'html

^ 4)0

Tr#ng __b

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG V:
V.1. pNH NGHA

HM T<+NG AVA\C<I&T

~m l mt R#n ch8Mng trnh c th? 8Wc OP 4)ng nhi u ln trong mt ch8Mng trnh ? thVc hi<n mt tc v) no .

V.1.1. q0 8|A! Eb": T'(A! 3 \.'$)tS 8A! tx lE(Q function OI OJAE A!E Eb". Mot ham co cau truc nh sau: `5A.t$(A Name)unctionv *i't+&arameter w KE $ ,Q( .Q. ,$A % 89A! t'(A! Eb" ,-c c.u l/nh trong 0a1a2cript th3c hi/n t-c 145 '#t5'A !$Q t'J /,$I5 tE.
- 4a&eMunction l t3n hm 4o ng8@i l9: trnh tV gt. ui t{c gt t3n hm gi+ng nh8 t3n bin. 1#u 4a&eMunction l cg: 4Iu ngogc 6 7 ch2# 4#nh Och th#m O+ hnh th2c. lu hm *h!ng c th#m O+ th cg: 4Iu ngogc 6 7 c.ng :hCi vit O#u l#meKunction. - +i#tePara&eter l 4#nh Och cc th#m O+ hnh th2c; nu c nhi u th#m O+ c th cc th#m O+ :hi cch nh#u bEi 4Iu :hQy; cc th#m O+ ny *h!ng chT r# *i?u 4$ li<u c) th? v c.ng *h!ng cn tH *ho v#r. V du: runction oiO:l#y6uOer ; :n47 4ocument.nrite6vcOerl#me cu# b#n l#0w uOer7 4ocument.nrite6v&#OOnor4 cu# b#n l#0w :n47 return - Cfu l$nh return6 l cXu l<nh *t th-c hm. %Xu l<nh ny l tuz chRn. % th? b Bu#; nu hm c gi trD trC v th cn c cXu l<nh seturn ? trC v gi trD. 1#u seturn c th? ch2# hogc *h!ng ch2# mt gi trD c) th? hogc mt bi?u th2c tnh ton. ^ 4)0 _5A.t$(A t(t 4v S,w C1 , <#t5'A .

V.1.2.

CQ.E !$ Eb"

- ~m Oe *h!ng thVc hi<n cho n *hi n 8Wc gRi. - Z+i v"i hm c +i O+ t# gRi t3n hm v 4#nh Och cc gi trD truy n cho +i O+ _5A.t$(AN "#v '!5"#At1S '!5"#At2S#t.w - Z+i v"i hm *h!ng c +i O+ t# chT cn gRi t3n hm l 8Wc. _5A.t$(AN "#vw - Z+i v"i hm *h!ng c gi trD trC v 0 N "#_5A.t$(Av) ' "#t#'w . - Z+i v"i hm c gi trD trC v : 3 '$ ,4#1 N "#_5A.t$(Av) ' "#t#'w .

Tr#ng __`

Gio Trnh Thit K Web

^ 4)0 html he#4titleKunction'title'he#4 bo4y Ocri:t runction Sre#6Wi4th; Length7 OieWi4thLength return Oie iev#l6:rom:t6lh#: i0 77 y ev#l6:rom:t6lh#: y0 77 4ocument.nrite6Sre#6i;y77 'Ocri:t 'bo4y 'html

WWW.vietnoiviet.com

V.2.

CC HM THNG CNG T<+NG AVA\C<I&T %- :h:0 alert(7ni dung th8ng #-o9!

1) Hb" 4#'tvw: 45ng hi?n thD mt h: th!ng bo c n-t K

v 4)0 html he#4titleKunction'title'he#4 bo4y Ocri:t #lert6~ello Worl47 'Ocri:t 'bo4y 'html 2) Hb" )'(")tvw:to h: thoi ch2# F n-t K v %#ncel; v mt teitboi ? ng8@i O4 nh9: ni 4ung; gi trD trC v c,# hm :rom:t l ni 4ung nh9: trong teitboi %- :h:0 3 '$ ,4#1 )'(")tvZAD$ 85A! Ou$ tE(R$[S!$Q t'J lE$ tR(w v 4): html he#4titleKunction'title'he#4 bo4y Ocri:t #:rom:t6kour L#Otn#me07 b:rom:t6kour KirOtl#me7 4ocument.nrite6kour Kulll#me iO 0 # b7 'Ocri:t 'bo4y 'html

Tr#ng _F\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

3) Hb" .(A`$'"vw:~i?n thD h: th!ng bo c F n-t K v %#ncel. ~m trC v gi trD true nu ng8@i O4 clic* K v ng8Wc li th trC v gi trD r#lOeJ

%-: :h:0 3 '$ ,4#1.(A`$'"vZCE5($ tE(A! , ([w V7 89:

html he#4titleKunction'title'he#4 bo4y Ocri:t #:rom:t6nh#: Oo # 07 b:rom:t6nh#: Oo b7 cconrirm6 # lon hon b7 ir6c true7 4ocument.nrite6 # b 7 elOe 4ocument.nrite6 # b 7 'Ocri:t 'bo4y 'html

4) CQ. Eb" tEFA! 89A! .G .E5$ 3b %u: a. Hb" #3 4vw: TrC v gi trD O+ c,# mt chuUi O+

%- :h:0

#3 4v.E5$ %uw
^ 4)0 Ocri:t v#r Otr_w_Fuw; OtrFwG]aw Otr Otr_OtrF 4ocument.nrite6Otr7 *t BuC 0_FuG]a 'Ocri:t Ocri:t v#r Otr_w_Fuw; OtrFwG]aw Otrev#l6Otr_7ev#l6OtrF7 4ocument.nrite6Otr7*t BuC0 ]t` 'Ocri:t b. Hb" & '%#IAtv%t'N5"w TrC v mt O+ nguy3n tH chuUi Otrlum. lu Otrlum theo O#u l *f tV ch$ th cc *f tV ny Oe bD b Bu#. lu Otrlum *h!ng b{t u bYng O+ th hm ny trC v gi trD l#l 6lot # lumber7

Tr#ng _F_

Gio Trnh Thit K Web ^ 4) 0

v#r Otrlumw_Fu.bw ; *B *B:#rOe(nt6Otrlum7 *B_Fu Otrlumw#_Fuw *B:#rOe(nt6Otrlum7 *Bl#l Otrlumw_Fu.b#bcw *B:#rOe(nt6Otrlum7*B_Fu

WWW.vietnoiviet.com

c. Hb" ) '%#_4( tv%t'N5"w: ~m trC v mt O+ thVc tH chuUi Otrlum. lu chuUi Otrlum b{t u l O+ v theo O#u l cc *f tV ch$ th cc *f tV ny bD b Bu#. lu chuUi Otrlum b{t u tH *f tV ch$ th hm trC v gi trD l#l. ^ 4)0 v#r Otrlumw_Fu.bw ; *B *B:#rOeKlo#t6Otrlum7 *B_Fu.b Otrlumw#_Fu.bw *B:#rOeKlo#t6Otrlum7 *Bl#l Otrlumw_Fu.b#bcw *B:#rOeKlo#t6Otrlum7*B_Fu.b d. Hb" $%N Nv%t'w: ~m trC v gi trD True nu Otr l chuUi; ng8Wc li l K#lOe nu Otr l chuUi O+. ^ 4) 0 ^#r Otrw_Fu#bcw; *B *BiOl#l6Otr7 *Btrue Otrw_Fu.bw *BiOl#l6Otr7 *Br#lOe 5) CQ. Eb" tE$t 4o) tEm$ !$ A: a. Hb" T$"#(5tv w0 po cho #v#1cri:t thVc hi<n mt l<nh #v#1cri:t O#u mt *hoCng th@i gi#n no . ~m trC v mt (o64uy nhIt +i v"i mNi hm OetTimeout thVc hi<n mt l<nh7 Gi trD (o ny 45ng ? io *hoCng th@i gi#n thit l9: nu *h!ng cn thVc hi<n hm Timeout n$# . %- :h:0

I8T$"#1%#tT$"#(5tvZC("" A8 3 \.'$)t[S 8#4 0T$"#w

Co&&and gavaScri't 0 c th? l l@i gRi hm hogc l mt cXu l<nh Mn delay/i&e 0l *hoCng th@i gi#n ch@ ? thi hnh %omm#n4 #v#1cri:t; 8Wc tnh bYng mili giXy. ^ 4)0 (4BOetTimeout6v#lert6o# het gio7w;_\\\7 %2 _\\\ mili giXy th th!ng bo ht gi@ mt ln. b. Hb" .4# 'T$"#(5tvw0~ud th@i gi#n thit l9: bEi OetTimeout67. %- :h:0

.4# 'T$"#(5tvI8T$"# w
^ 4)0 cle#rTimeout6(4B7 c. Hb" %#tIAt#'3 4vw 3b .4# 'IAt#'3 4vw v"i f nghh# v th#m O+ gi+ng nh8 OetTimeout67 v cle#rTimeout67 .

Tr#ng _FF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG VI:
VI.1. C;U T<=C LA CHN: VI.1.1. Cq5 4MAE $`:

CC C;U T<=C pIU KIN

M5 10 : 4)ng cho tr8@ng hW: c _ i u *i<n v _ c!ng vi<c iP lf C@ )EQ): $` v<B$I5 tE. O$P5 l$MA*w KEu$ 4MAE 1 KEu$ 4MAE 2
4guyBn thc ho2t -Gng lu bi?u th2c i u *i<n -ng th thVc hi<n *h+i l<nh _; O#u thVc hi<n *h+i l<nh F; ng8Wc li nu bi?u th2c i u *i<n O#i th b Bu# *h+i l<nh _ v thVc hi<n *h+i l<nh F

M5 2: : 4)ng cho tr8@ng hW: c _ i u *i<n v F lV# chRn c!ng vi<c iP lf C@ )EQ): $`v<,$I5 tE. O$P5 l$MA*w :h;i l/nh<5 #4%# :h;i l/nh ( 5 :h;i l/nh =5
4guyBn thc ho2t -Gng lu bi?u th2c i u *i<n -ng th thVc hi<n *h+i l<nh _; O#u thVc hi<n *h+i l<nh u; ng8Wc li th thVc hi<n *h+i l<nh F; O#u thVc hi<n *h+i l<nh u

M5 3 v$` 6#4%# 4TA! AE 5w: : 4)ng cho tr8@ng hW: c nhi u chRn lV# *hc
nh#u

C@ )EQ): $`v<#i>u th?c i@u Ai/n<*w :h;i l/nh <5 #4%# if (B#i>u th?c i@u Ai/n (C! :h;i l/nh ( 5 #4%# 6 lEu$ 4MAE 3
Z? : 4)ng myu u; cn :hCi ic Dnh bi?u th2c i u *i<n c,# bi ton r[i O{: i: th2 tV l[ng nh#u cho hW: lf. ^ 4)0 ^it ch8Mng trnh nh9: u cnh c,# t#m gic O#u iuIt r# mn hnh l t#m gic g po4yOcri:t #ev#l6:rom:t6vlh#: c#nh #w77 bev#l6:rom:t6vlh#: c#nh bw77 cev#l6:rom:t6vlh#: c#nh cw77 ir6# b b c c #7

Tr#ng _Fu

Gio Trnh Thit K Web

T#m gi#c u elOe ir6# b b c c #7 T#m gi#c cXn qlOe T#m gic thuong 'Ocri:t'po4y

WWW.vietnoiviet.com

VI.1.2. C?5 t'@. .EA 4| %B$t.E.... %#:

: 4)ng trong tr8@ng hW: mu+n chRn mt trong cc gi trD c,# bi?u th2c ? thVc hi<n l<nh. Gi trD c,# bi?u th2c c th? l mt chuNi hogc mt O+

M5 1: %B$t.EvDi>u th?cw . %# 1alue<6 :h;i l/nh <5 #reaA5 . %# 1alue(6 :h;i l/nh ( 5 #reaA5 666 . %# 1alueA: :h;i l/nh A 5 #reaA5 M5 2: %B$t.E6bi?u th2c7 . %# 3 45#1: lEu$ 4MAE < 5 #reaA5 . %# 3 45#2: Ah;i l/nh ( 5 #reaA5 666 . %# 3 45#l: lEu$ 4MAE A 5 #reaA5 default 6 Ah;i l/nh AE< 5
4guyBn thc ho2t -Gng0 Trnh th!ng 4Dch Oe tnh gi trD c,# bi?u th2c r[i Oo Och v"i cc v#lue; nu bYng gi trD no th thVc hi<n *h+i l<nh . 1V *hc nh#u gi$# myu _ v F l0 E myu F *hi Oo Onh gi trD c,# bi?u th2c v"i cc v#lue; nu *h!ng *h": th thVc hi<n l<nh trong 4er#ult Trong tr8@ng hW: c nhi u v#lue *hc nh#u m c5ng thVc hi<n mt *h+i l<nh th li<t *3 cc v#lue li3n ti: nh#u v cch nh#u 4Iu :hQy.

Tr#ng _FG

Gio Trnh Thit K Web

. %# value69 1value6i 1j1value6( 0 *h+i l<nh brea(

WWW.vietnoiviet.com

^ 4)0
bo4y Ocri:t t:rom:t6nh#: th#ng0 7 Onitch6ev#l6t77 c#Oe _0 c#Oe u0 c#Oe ]0 c#Oe t0 c#Oe b 0 c#Oe _\0 c#Oe _F0 #lert6Th#ng t co u_ ng#y7 bre#* c#Oe F0 #lert6Th#ng t co Fb ng#y7 bre#* c#Oe G0 c#Oe a0 c#Oe `0 c#Oe __0 #lert6Th#ng t co u\ ng#y7 bre#* 4er#ult0 #lert6Khong co th#ng n#y7 'Ocri:t 'bo4y

VI.2.

C;U T<=C L&:

Z8Wc : 4)ng *hi mt c!ng vi<c no mu+n thVc hi<n lg: i lg: li nhi u ln v"i mt i u *i<n no . % F lR#i cIu tr-c lg: l 0 lg: v"i O+ ln lg: bit tr8"c v lg: v"i O+ ln lg: *h!ng bit tr8"c

VI.2.1. VyA! 4X) _(': TEVmA! Q) 89A! .E( %u 4YA 4X) ,$t t'. C@ )EQ): `('v,$I5 tE. 1 ,$I5 tE. 2 ,$I5 tE. 3w KEu$ 4MAE 1 lEu$ 4MAE 2
Trong 0 bi[u thc 9 ch2# gi trD *hEi to c,# bin i u *hi?n bi[u thc i 0ch2# bi?u th2c i u *i<n lg:. bi[u thc k0 ch2# bi?u th2c t}ng hogc giCm bin i u *hi?n . 4guyBn thc ho2t -Gng 0 Trnh th!ng 4Dch gn gi trD *hEi to cho bin i u *hi?n; K?m tr# bi?u th2c F; nu -ng th thVc hi<n *h+i l<nh _; chuy?n l3n thVc hi<n bi?u th2c u; ti: t)c *i?m tr# bi?u th2c F; v ti: t)c = lu bi?u th2c F c gi trD O#i th ch8Mng trnh thot *hi vmng lg: v thVc hi<n *h+i l<nh F. lu *h+i l<nh _ c ch2# cXu l<nh pre#* th ch8Mng trnh Oe thot *hi vmng lg: ror v thVc hi<n *h+i l<nh F

Tr#ng _F]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

^ 4)0 ^it ch8Mng trnh to mt t#ble m 4mng n ct. bo4y 1cri:t l#ngu#ge#v#Ocri:t v#r n; m; i; m:rom:t6lh#: Oo 4ong7 n:rom:t6lh#: Oo cot7 4ocument.nrite6t#ble ni4th]\ bor4er_7 ror6i_imi7 4ocument.nrite6tr7 ror6_n7 4ocument.nrite6t4 i 't47 4ocument.nrite6'tr7 4ocument.nrite6't#ble7 '1cri:t 'bo4y

VI.2.2. VyA! 4X) BE$4#: tEVmA! Q) 89A! .E( %u 4YA 4X) lEFA! eQ. OJAE
1. VyA! 4o) WE$4#: Ki?m tr# i u *i<n tr8"c *hi thVc hi<n l<nh

C@ )EQ)0 BE$4#v,$I5 tE. O$P5 l$MAw khoi lenh 1 khoi lenh 2;

4guyBn thc ho2t -Gng 0 Trnh th!ng 4Dch *i?m tr# bi?u th2c i u *i<n; nu -ng th thVc hi<n *h+i l<nh _; O#u Bu#y li *i?m tr# bi?u th2c i u *i<n; v ti: t)c =; nu O#i th thVc hi<n *h+i l<nh F. lh8 v9y *h+i l<nh _ c th? *h!ng 8Wc thVc hi<n ln no nu ng#y tH u bi?u th2c i u *i<n O#i Th8@ng *h+i l<nh _ ch2# l<nh lm th#y Ui gi trD c,# bi?u th2c i u *i<n ? c th? thot r# *hi vmng lg:; hogc ch2# l<nh bre#* ? thot *hi vmng lg: "hile

Tr#ng _Fa

Gio Trnh Thit K Web

WWW.vietnoiviet.com

^ 4)0 Ocri:t l#ngu#ge#v#Ocri:t v#r uOerin:ut nhile 66uOerin:ut`` 7 uOerin:ut:rom:t6vlh9: vo mt O+ bIy *z; nh9: `` th#tw7 ir6iOl#l6uOerin:ut7 4ocument.nrite6vo$ li<u *h!ng hW: l<; nh9: O+ w7 bre#* 'Ocri:t 2. VyA! 4X) 8( 6BE$4#: ThVc hi<n l<nh tr8"c O#u *i?m tr# bi?u th2c i u
*i<n

C@ )EQ):

do lEu$ 4MAE 15 WE$4#v,$I5 tE. O$P5 l$MAw lEu$ 4MAE 2

4guyBn thc ho2t -Gng0 trnh th!ng 4Dch thVc hi<n *h+i l<nh _; O#u *i?m tr# bi?u th2c i u *i<n; nu -ng th thVc hi<n li *h+i l<nh _; nu O#i th thot *hi vmng lg: v thVc hi<n *h+i l<nh F ^ 4)0^it ch8Mng trnh y3u cu ng8@i 45ng nh9: vo mt O+; *i?m tr# iem gi trD nh9: c :hCi l O+ *h!ng; nu *h!ng y3u cu nh9: li. Ocri:t l#ngu#ge#v#Ocri:t v#r uOerin:ut 4o uOerin:ut:rom:t6vlh9: vo mt O+ bIy *z; nh9: `` th#tw7 ir6iOl#l6uOerin:ut7 4ocument.nrite6vo$ li<u *h!ng hW: l<; nh9: O+ w7 bre#* nhile 66uOerin:ut`` 7 'Ocri:t 3. VyA! 4X) `(' 6$A: 45ng ? 4uy<t Bu# cc thuc tnh c,# mt +i t8Wng

h#y gi trD c,# cc :hn tP trong mCng C@ )EQ): `(' v 3 '$ ,4# $A +,-#.tw lEu$ 4MAE 1 Tr#ng _Ft

Gio Trnh Thit K Web lEu$ 4MAE 2

WWW.vietnoiviet.com

lguy3n t{c hot ng0 trnh th!ng 4Dch Oe 4uy<t Bu# tIt cC cc :hn tP trong bect. ^ 4)0 bo4y Ocri:t ob nen Srr#y67 ob\~ello ob_Worl4 ror6i in ob7 4ocument.nrite6obi7 'Ocri:t 'bo4y

VI.2.3. Cq5 4MAE t'0 6. t.E 3b tE'(B: 8A! e 4{ 4$ t'(A! .Q. "(854. N OVW. 8A! t'(A! IAt#'A#t Ee)4(#' N 3b t'(A! II\ C@ )EQ)0 t'0 Ah;i l/nh . t.Ev(,-E''w n 4{ 4$
lguy3n t{c hot ng0 Trnh th!ng 4Dch thVc thi cc l<nh trong *h+i l<nh; nu trong Bu trnh thVc thi c lNi iy r# th trnh th!ng 4ich truy n +i t8Wng lNi cho c#tch. %Xu l<nh c#tch tV ng g$i vo th#m O+ c ch2# +i t8Wng lNi; +i t8Wng ny c F thuc tnh number v 4eOcri:tion. mNi 4ng lNi trong m *Dch bCn Oe 8Wc gn cho mt con O+ lNi 4uy nhIt. thuc tnh lumber ch2# mt O+ nguy3n lNi; thuc tnh 4eOcri:tion ch2# mt m! tC 4ng v}n bCn v lNi.

V du:

he#4title%huong trinh *iem tr# loi'title 1cri:t l#ngu#gew#v#1cri:tw v#r Otr try 4ocument.nrite6~ello Worl47 J#th.r67 c#tch6oberr7 OtrLoi thu oberr.number br Otr^# loi 4o l# oberr.4eOcri:tion #lert6Otr7 '1cri:t 'he#4

Tr#ng _Fb

Gio Trnh Thit K Web

WWW.vietnoiviet.com

%Xu l<nh thron 8Wc 45ng ? truy n mt th!ng bo lUi n mt cXu l<nh c#tch. l c.ng c th? 8Wc 45ng ? truy n mt lNi l3n p i$ lf lNi m2c c#o hMn trong tr8@ng hW: c nhi u cXu l<nh try=c#tch l[ng nh#u ^ 4u0 ~tmlhe#4title%huong trinh *iem tr# loi'title 1cri:t l#ngu#gew#v#1cri:tw v#r Otr ; mG ;*B try try 4ocument.nrite6~ello Worl47 *Bm'n c#tch6oberr7 OtrLoi thu oberr.number br Otr^# loi 4o l# oberr.4eOcri:tion ir 6*B G7 #lert6vn_w7 elOe thron 6oberr7 c#tch 6oberr7 #lert6oberr.number oberr.4eOcri:tion7 '1cri:t'he#4'html

Tr#ng _F`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG VII:
1. pu$ tVWA! MF ELAE Ou$ tVWA!0

M HNH p~I TNG

VII.1. M HNH C+M vvC(.5"#At +,-#.t M(8#4w

JNi thnh :hn tr3n tr#ng neb 8Wc iem nh8 mt +i t8Wng; mNi +i t8Wng u c cc thuc tnh; :h8Mng th2c v OV *i<n c,# n. ^ 4) hnh Cnh; v}n bCn; button; mt t#g trong ~TJL c.ng 8Wc iem nh8 l mt +i tVMng v cc thuc tnh c,# t#g 8Wc iem nh8 l +i t8Wng con c,# n. TIt cC cc +i t8Wng trong #v#Ocri:t 8Wc tU ch2c :hXn cI: 4ng hnh cXy gRi l m! hnh oJ 6oocument bect Jo4el7; m2c tr3n c5ng l +i t8Wng B$A8(B bi?u thD cho *hung h#y cP# OU c,# trnh 4uy<t; cc :hn tP cmn li l +i t8Wng con c,# nin4on o5ng thuc tnh (o ? truy iuIt n mt +i t8Wng trong (q v th#y Ui 4$ li<u cho chnh :hn tP ; tIt cC cc +i t8Wng tr3n tr#ng u c mt (o 4uy nhIt

^ 4)0 trt4 (4(4l#me_o#t#'t4'tr img (4(4 l#meF (rr#me (4(4l#meu'(rr#me

nin4on

4ocument

event

rr#me

hiOtor y

loc#tion

n#vig#tor

Ocreen

4ocument #nchor #::let cl#OO element embeb (o im#ge l#yer lin* :lug/in Otyle t#g

rorm button chec* boi hi44en :#OOnor4 r#4io reOet Oelect Oubmit teit teit#re#

Ju+n truy c9: vo +i t8Wng no th :hCi truy c9: vo +i t8Wng ch2# n tr8"c; 45ng ton tP 4Iu chIm 6.7 ? :hXn cch gi$# cc +i t8Wng. Tuy nhi3n t# c th? b Bu# +i t8Wng nin4on nu #ng th#o tc tr3n cP# OU hi<n hnh ^ 4)0 nin4on.loc#tion lgoi cc +i t8Wng 4o ch8Mng trnh iXy 4Vng On; c th? to th3m nh$ng +i t8Wng m"i cn thit cho nhu cu OP 4)ng. JUi +i t8Wng u c thuGc t?nh1 #W (i$n vD 'hng thc1 nh@ cc thnh :hn ny m c th? truy c9: v th#y Ui ni 4ung c,# ch-ng. o /huGc t?nh (Pro'ertie#) l nMi ch2# cc m! tC th!ng tin c,# +i tVMng. ^ 4)0 img OrcwcsLw heightv#lue_ ni4thv#lueF (4w(4h_w Trong t#g (mg c u thuc tnh Orc; ni4th; height; ? th#y Ui *ch th8"c c,# hnh th th#y Ui gi trD c,# thuc tnh ni4th; height hogc Ui hnh *hc th th#y

Tr#ng _u\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Ui gi trD c,# thuc tnh; ? thVc hi<n cc vi<c tr3n t# 4V# vo thuc tnh (4 l (4h_. ^ 4)0 runction oom(n67 (4h_.ni4th(4h_.ni4th _\ (4h_.height(4h_.height ] `5A.t$(A %h#nge(mg6rile7 (4h_.Orcrile o SW (i$n (event) l cc hnh ng; OV vi<c iy r# tr3n tr#ng neb0 clic* chut; 4i chuy?n chut; =gRi l OV *i<n. 1V *i<n 8Wc iP lf bEi cc on m *Dch gRi l b iP lf OV *i<n CTc #W (i$n thdng #` dang TKA %| l$MA A!E nmouOe4onn &ht Oinh *hi ng8@i O4)ng nhIn chut nmouOeover &ht Oinh *hi ng8@i O4)ng 4'chuy?n chut l3n +i t8Wng nmouOeout &ht Oinh *hi ng8@i O4)ng 4'chuy?n chut r# ngoi t8Wng n*ey:reOO &ht Oinh *hi ng8@i OP 4)ng nhIn mt :hm nrocuO &ht Oinh *hi +i t8Wng nh9n ti3u i?m nblur &ht Oinh *hi r@i *hi +i t8Wng / lg8@i 45ng clic* chut vo +i t8Wng / Jt +i t8Wng #ng c ti3u i?m; ng8@i O4 nhIn enter nclic* /Jt chec*boi hogc n-t chRn #ng c ti3u i?m; ng8@i O4 nhIn :hm 1:#ceb#r nlo#4 / &ht Oinh *hi +i t8Wng 8Wc tCi iu+ng ncnlo#4 / &ht Oinh *hi +i t8Wng 8Wc n: trE li hogc chuy?n tr#ng nreOie / &ht Oinh *hi cP# OU bD th#y Ui *ch th8"c nOelect / &ht Oinh *hi +i tVMng 8Wc chRn nch#nge / &ht Oinh *hi +i t8Wng th#y Ui gi trD nOubmit / &ht Oinh *hi Korm 8Wc 1ubmit CTch #` dang cTc #W (i$n0 mu+n i u *hi?n OV *i<n; t# th3m OV *i<n vo trong th| ~TJL. %- :h:0 T#gl#me eventh#n4lerw#v#1cri:t %omm#n4w T#gl#me0 t3n t#g eventh#n4ler0 t3n OV *i<n #v#1cri:t %omm#n40 gRi hm iP lf OV *i<n o Phng thc L cc hm 8Mc iXy 4)ng tr8"c c tc 4)ng lm th#y Ui thuc tnh c,# +i t8Wng.

2. M9. O7.E .G "F ELAE C+M:

Z? Dnh nghh# _ tU ch2c :hXn cI: th? hi<n cc :hn c,# _ h[ OM neb. %ho :h: th#y Ui cIu tr-c th!ng Bu# vi<c th3m b"t ni 4ung %ung cI: cch th2c Bu#n Ot; th#o tc cc gc tnh c,# ni 4ung tr3n tr#ng neb %ung cI: th!ng tin v cch t8Mng tc gi$# cc m)c tr3n tr#ng neb v"i ng8@i 45ng l cho :h: th!ng bo cc OV *i<n gXy r# 4o chut v bn :hm

Tr#ng _u_

Gio Trnh Thit K Web VII.1.1. q0 8|A! "Dt Ou$ tVWA! "z$:

WWW.vietnoiviet.com

lgoi cc +i t8Wng c On trong #v#Ocri:t; t# c th? to cc +i t8Wng m"i v"i cc :h8Mng th2c v thuc tnh ri3ng cho +i t8Wng .

_. CQ.E eq0 8|A! "Dt Ou$ tVWA! "z$0 G[m F b8"c . BVz. 1: ZDnh nghh# +i t8Wng bYng cch iXy 4Vng hm cho +i t8Wng g[m cc
:h8Mng th2c v thuc tnh cho +i t8Wng .

`5A.t$(A +,-#.tvL$%t & ' "#t#'w tE$%.)'()#'t011 & ' "#t#'1 tE$%.)'()#'t021 & ' "#t#'2 6 tE$%."#tE(811`5A.t$(AN "#1 tE$%."#tE(821`5A.t$(AN "#2 6
Trong TH *ho tE$% ? th#m chiu n +i t8Wng #ng 8Wc to. Khi iXy 4Vng +i t8Wng c b#o nhi3u thuc tnh th 45ng tH *ho thiO ? th#m chiu n bIy nhi3u thuc tnh c,# n %Xu l<nh tE$%.)'()#'t011 & ' "#t#'10 gn gi trD &#r#meter_ cho thuc tnh :ro:erty_ T8Mng tV0 mu+n iXy4Vng :h8Mng th2c cho +i t8Wng th gn :h8Mng th2c cho hm Dnh nghh# On tE$%."#tE(811_5A.t$(AN "#1 ,. BVz. 2: To inOt#nce cho +i t8Wng; 45ng tH *ho A#B 3 ' (,-1A#B +,-#.tvw Truy c9: hogc th#y Ui g' trD c,# thuc tnh t# OP 4)ng0 (,-.)'()#'t0 Ju+n OP 4)ng :h8Mng th2c metho4_ th 45ng (,-."#tE(8vw

^ 4)0 jXy 4Vng mt +i t8Wng 1tu4ent g[m cc thuc tnh (41tu4ent; l#me; S44reOO v :h8Mng th2c oiO:l#y67 hi?n thD th!ng tin c,# 1tu4ent p8"c _0 j9y 4Vng +i t8Wng 1tu4ent `5A.t$(A \t58#Atv" %3SEt#AS8.E$w '' Z+i t8Wng thiO.(41tu4entm#Ov thiO.l#mehten thiO.S44reOO4chi thiO.oiO:l#y(nrorm#tion `5A.t$(A C$%)4 0vw ''&h8Mng th2c 4ocument.nrite6vJ# 1^ wthiO.(41tu4ent wbrw7 4ocument.nrite6v~o ten 1^ wthiO.l#me wbrw7 4ocument.nrite6voi# chi 1^ wthiO.S44reOO wbrw7 Ju+n iuIt th!ng tin 1^ t# gRi :h8Mng th2c oiO:l#y67

Tr#ng _uF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

1P 4)ng +i t8Wng 1tu4ent0 to inOt#nce cho +i t8Wng v#r Otnen 1tu4ent67 ''To th? thi<n cho +i t8Wng Ot.(41tu4entwT~\_w Ot.l#mewTruong T#m &hongw '' KhEi to gi trD cho t8Wng Ot.S44reOOw_F lguyen %uu ^#nw ~i?n thD th!ng tin c,# +i t8Wng th gRi n :h8Mng th2c oiO:l#y67 %t.C$%)4 0vw % th? *h#i bo v *hEi to +i t8Wng bYng cch0

v#r Otnen6vT~\_w;wTruong T#m &hongw;w_F lguyen %uu ^#nw7

VII.2. CC p~I TNG C \N T<+NG AVA\<I&T VII.2.1. pu$ tVWA! A'' 0vw
Z+i t8Wng Srr#y 45ng ? l8u tr$ nhi u gi trD v"i c5ng mt t3n gRi. Trong #v#Ocri:t +i t8Wng mCng c th? ch2# cc thnh :hn m#ng *i?u gi trD *hc nh#u. Jt mCng c n :hn tP 8Wc nh chT O+ tH \ n n/_. JNi :hn tP mCng 8Wc :hXn bi<t nh#u Bu# chT O+; 4V# vo chT O+ ny t# c th? truy c9: hogc th#y Ui gi trD c,# tHng :hn tP trong mCng

1. KE$ tR( "Dt "sA!:

o5ng tH *h# A#B ? *hEi to mt mCng 3 ' V '$ ,4# 1 A#B A'' 0v%$]#w ^ 4)0 Ocri:t v#r #rr nen Srr#y67 #rr\ thu h#i #rr_ Thu b# #rrF Thu tu #rru Thu n#m #rrG Thu O#u #rr] Thu b#y ror6i\ i]i7 4ocument.nrite6#rri br7 'Ocri:t

2. CQ. tE5D. t7AE .G A'' 0vw

4#A!tE 0 ? ic Dnh O+ :hn tP trong mCng ^ 4)0 Ocri:t v#r #rr nen Srr#y67 #rr\ thu h#i #rr_ Thu b# #rrF Thu tu #rru Thu n#m #rrG Thu O#u #rr] Thu b#y 4ocument.nrite61o :h#n tu trong m#ng l#0 #rr.length7 'Ocri:t

3. CQ. )EVA! tE. .G Ou$ tVWA! A'' 0vw

Tr#ng _uu

Gio Trnh Thit K Web

&EVA! tE. conc#t67 oin6Oe:#r#tor7 Olice6Ot#rt;en47 reverOe67 v#luer67 :o:67 :uOh67 1hirt67 1ort67 v#luer67 ^ 4) _0 Ocri:t v#r #nen Srr#y67 #\ vTh#ng giengw #_ vTh#ng h#iw #F vTh#ng b#w v#r b nen Srr#y67 b\ vTh#ng tuw b_ vTh#ng n#mw bF vTh#ng O#uw ##.conc#t6b7 4ocument.nrite6#7 A!E o5ng ? n+i F mCng ? gh: cc :hn tP trong mCng li v"i nh#u cch nh#u bEi 4Iu Oe:#r#tor o5ng tch mt mCng b{t u tH vtr Ot#rt n vtr en4/_. o5ng ? Co ng8Wc ch8Ui o5ng ? lIy tIt cC cc +i t8Wng trong chuUi LIy :hn tP cu+i c,# mCng Th3m _ hogc nhi u :hn tP vo cu+i mCng lIy :hn tP v trC v :hn tP u ti3n c,# mCng O{: i: cc :hn tP c,# mCng TrC v tIt cC cc gi trD b#n u c,# mCng

WWW.vietnoiviet.com
V7 89 ##.conc#t6b7 ##.oin6vw7 Otr#.Olice6i;7 #.reverOe67 #.v#luer67

'Ocri:t ^ 4) F Ocri:t ty:eteit'#v#Ocri:t v#r #rrl#me nen Srr#y6u7 #rrl#me \ #ni #rrl#me _ Tove #rrl#me F ~ege 4ocument.nrite6#rrl#me.length br7 4ocument.nrite6#rrl#me.oin6.7 br7 4ocument.nrite6#rrl#me.reverOe67 br7 4ocument.nrite6#rrl#me.Oort67 br7 4ocument.nrite6#rrl#me.:uOh6l#;on7 br7 4ocument.nrite6#rrl#me.:o:67 br7 4ocument.nrite6#rrl#me.Ohirt67 br7 'Ocri:t

VII.2.2. pu$ tVWA! C t#vw : C5A! .?) tEFA! t$A 3P A!b0S !$m t'KA "F$ t'VmA! .4$#At. CA! tE$t 4o) A!b0 tEQA! Ar" 3b !$m E$MA EbAE t'KA t' A! B#,. 1. CQ.E lE $ ,Q(: % F cch *h#i bo Tr#ng _uG

Gio Trnh Thit K Web CQ.E 1: Kh#i bo v *hEi to

WWW.vietnoiviet.com

3 ' 3 '$ ,4#N "#1 A#B C t#vZ"(AtES 8 0S 0# ' S E(5'% : "$A5t#% : %#.(A8%[w hogc0 3 ' 3 '$ ,4#N "#1 A#B C t#v0# 'S"(AtES8 0SE(5'%S"$A5t#%S%#.(A8%w hogc0 3 ' 3 '$ ,4#N "#1 A#B C t#v0# 'S"(AtES 8 0w 3 ' 3 '$ ,4#N "#1 A#B C t#vhM(AtE 88S 0000 EE:"":%%hw 3 ' 3 '$ ,4#N "#1 A#B C t#vhM(AtE 88S 0000hw 3 ' 3 '$ ,4#N "#1 A#B C t#v00S""S88SEES""S%%w 3 ' 3 '$ ,4#N "#1 A#B C t#v00S""S88w 3 ' 3 '$ ,4#N "#1 A#B C t#v"$44$%#.(A8%w v#ri#blel#me l bin 45ng ? l8u tr$ th!ng tin ngy thng n}m; gi@ :h-t giXy. Tr8@ng hW: _0 gi trD *hEi to l _ chuUi. Trong tr8@ng hW: ny month l chuUi; Tr8@ng hW: F v u; gi trD l mt O+. ^ 4)0 v#r ob4#y nen o#te6lovember;_;F\\u;t0u\0`7 '' Kh#i bo hW: l< v#r ob4#y nen o#te6_\;_;F\\u;t0u\0`7 ''Kh#i bo *h!ng hW: l< CQ.E 2: Kh#i bo ngy hi<n hnh 6 Kh!ng *hEi to7 3 ' 3 '$ ,4#N "#1A#B C t#vw Trong tr8@ng hW: ny gi trD trC v l ngy thng n}m gi@ :h-t giXy hi<n hnh c,# h< th+ng.

2. CQ. )EVA! tE. .G Ou$ tVWA! C t#vw:

Z? truy iuIt :h8Mng th2c c,# +i t8Wng 45ng c- :h:

3 '$ ,4#N "#.M#tE(8vw

&h8Mng th2c o#te67 geto#te67 geto#y67 getJonth67 J! tC trC v +i t8Wng 4#te TrC v gi trD ngy 6 O+ nguy3n tH _/u_7 trong thng TrC v gi trD ngy trong tun 6 O+ nguy3n tH \/a 1un4#y\7 TrC v thng trong n}m 6rrom \/__. \#nu#ry; _Kebru#ry7

getKullke#r67 TrC v gi trD n}m 6b+n O+ 7 getke#r67 TrC v gi trD n}m 6h#i O+ 7 get~ourO67 TrC v gi@ c,# h< th+ng 6tH \/Fu7 getJinuteO67 TrC v :h-t c,# h< th+ng 6tH \/]`7 get1econ4O67 TrC v giXy c,# h< th+ng 6tH \/]`7 getJilliOecon4O67 TrC v gi trD milliOecon4 rrom \/```7 OetKullke#r6year#7 Thit l9: li n}m cho ngy h< th+ng 6 G O+7 Thit l9: li gi@ cho h< th+ng 6 t8 \/FG7 Oet~ourO6hour#7 OetJinuteO6&inute#7 Thit l9: li :h-t cho h< th+ng 6 t8 \/]`7 OetJonth6&onth#7 Thit l9: li thng cho h< th+ng 6 t8 \/__7 Oet1econ4O6#econd#7 Thit l9: li giXy cho h< th+ng 6rrom \/]`7 toGJT1tring67 %huy?n ngy gi@ h< th+ng O#ng ngy gi@ Bu+c t.

Tr#ng _u]

Gio Trnh Thit K Web

to1tring67 %huy?n ngy gi@ h< th+ng O#ng chuNi

WWW.vietnoiviet.com

^ 4) 0 ~i?n thD gi@ tr3n th#nh trng thi html he#4titleoigit#l %loc* / 1t#tuO p#r'title Ocri:t L#ngu#ge#v#1cri:t v#r timerio null v#r timersunning r#lOe runction Oto:cloc* 67 ir6timersunning7 cle#rTimeout6timerio7 timersunning r#lOe runction Ohontime 67 v#r non nen o#te67 v#r hourO non.get~ourO67 v#r minuteO non.getJinuteO67 v#r Oecon4O non.get1econ4O67 v#r time^#lue 66hourO _F7 hourO /_F0hourO7 time^#lue 66minuteO _\7 0\0 07 minuteO time^#lue 66Oecon4O _\7 0\0 07 Oecon4O time^#lue 6hourO _F7 &.J.0 S.J. nin4on.Ot#tuO time^#lue timerio OetTimeout6Ohontime67;_\\\7 timersunning true runction Ot#rtcloc* 67 Oto:cloc*67 Ohontime67 'Ocri:t 'he#4 bo4y pG%LsKKKKKK TqjT\\\\\\ LilKKK\\\\ ^LilK\\\\b\ SLilK\\\\b\ onLo#4Ot#rtcloc*67 'bo4y 'html ^ 4)0 html he#4title~i?n thD ngy gi@ l3n tr#ng neb 'title Ocri:t l#ngu#ge#v#Ocri:t runction lg#y67 v#r 4#ynen o#te67 v#r n;m;4;y v#r #rr4#ynen Srr#y67 #rr4#y\ vchu nh#tw

Tr#ng _ua

Gio Trnh Thit K Web

WWW.vietnoiviet.com

#rr4#y_ vThu h#i w #rr4#yF vThu b# w #rr4#yu vThu tuw #rr4#yG vThu n#m w #rr4#y] vThu O#uw #rr4#ya vThu p#yw n4#y.geto#y67 44#y.geto#te67 m4#y.getJonth67_ y4#y.getKullke#r67 4ocument.nrite6v~om n#y0w#rr4#ynw ng#y v4w th#ng vm v n#m v y7 'Ocri:t 'he#4 bo4y Ocri:t l#ngu#gew#v#Ocri:twlg#y67'Ocri:t 'bo4y 'html

VII.2.3. pu$ tVWA! \t'$A!

JNi chuUi trong #v#1cri:t l mt +i t8Wng; g[m cc thuc tnh v :h8Mng th2c thVc hi<n tr3n chuNi; l cc :h8Mng th2c tm *im chuNi; trch chuNi con v : 4)ng cc th| ~TJL vo ni 4ung c,# chuNi. 1. CQ.E lE $ ,Q( Ou$ tVWA! \t'$A!

3 ' %t'$A!V '$ ,4#1A#B \t'$A!vw

2. TE5D. t7AE .G \'t$A!vw: L#A!tE0 45ng ? ic Dnh chi u 4i c,# chuUi. %c *f tV trong chuUi 8Wc nh chT O+ tH \ n Length/_. Tt cC cc thnh :hn c gi trD chuNi u 45ng 8Wc thuc tnh length. %ch th#m chiu n thuc tnh length c,# +i tVMng 1tring67. %ch _0 1tringLengthOtring^#ri#ble.length %ch F0 v#r Otnen 1tu4ent67 1tringLengthOtl#me.length %ch u0 1tringLengthwThiO iO # Otringw.length 3. CQ. )EVA! tE. .G \t'$A!0%c :h8Mng th2c c,# 1tring ? thVc hi<n cc th#o tc tr3n ni 4ung c,# chuNi0 &EVA! tE. #nchor6#nchorn#me7 V7 89 Otr.#nchor6v#nchorn#mew7 TrC v mt chuNi li3n *t #nchorn#me trE # thnh _ li3n *t n#mewn#melin*wThiO iO # Otring '# Otr.big67 TrC v mt chuNi gt trong cg: th| big bigThiO iO # Otring 'big TrC v mt chuNi in Xm Otr.bol467 MF ts

big67 pol467

Tr#ng _ut

Gio Trnh Thit K Web

WWW.vietnoiviet.com
b ThiO iO # Otring 'b

ch#rSt6in4ei7 conc#t67 rontcolor67

TrC v *f tV th2 in4ei trong chuNi. in4ei tH \ n Otr.length/_ TrC v h#i chuNi n+i nh#u TrC v mt chuNi v"i mu 8Wc ic l9:.

Otr.ch#rSt6\7wTw

Otr.rontcolor6vre4w7 ront colorre4ThiO iO # Otring'ront Otr.rontOie6v]w7 TrC v mt chuNi v"i *ch th8"c 8Wc rontOie67 ront Oie]ThiO iO # ic l9:. Otring'ront TrC v vD tr c,# u ti3n 8Wc tm thIy c,# chuNi Oe#rchv#lue b{t u tm tH vD tr in4eir6Oe#rchv#lue; &oOOtr.in4eir6viOw7 rromin4ei. lu *h!ng c rromin4ei th rromin4ei7 &oOF tm tH vD tr \. lu *h!ng tm thIy th hm trC v gi trD /_ it#licO67 TrC v mt chuNi in nghi3ng TrC v vD tr c,# cu+i c5ng 8Wc tm thIy c,# chuUi Oe#rchv#lue b{t u tm tH :hCi l#Otin4eir6Oe#rchv#lue7 Bu# tri. lu *h!ng tm thIy th hm trC v gi trD /_ lin*67 TrC v mt chuNi li3n *t T8Mng tV nh8 hm in4eir v l#Otin4eir; nh8ng :h8Mng th2c ny trC m#tch67 v mt chuNi c) th? nu *h!ng tm thIy th trC v gi trD null. Th#y th mt vi *f tV bYng mt vo *f re:l#ce67 tV m"i TrC v gi trD l O+ chuNi 8Wc tm thIy Oe#rch67 trong chuNi ch#; nu *h!ng tm thIy th trC v gi trD /_ TrC v mt chuNi con 8Wc c{t tH chuNi Olice67 m ti vD tr c{t Om#ll67 TrC v mt chuNi nh hMn TrC v mt chuNi 8Wc gnh ng#ng Bu# Otri*e67 thXn chuNi 1tr.Oub67 Oub67 TrC v mt chuUi *i?u OubOcri:t
OubThiO iO # Otring'Oub

OubOtr6Ot#rt;length7

OubOtring61t#rt;en47

TrC v chuNi con b{t u tH vD tr Ot#rt v c chi u 4i length. nu *h!ng c Ot#rt iem nh8 Ot#rt\ Tch r# mt chuNi con tH mt chuNi. p{t u tH chT O+ Ot#rt n en4. lu 1t#rten4; chuNi trC v tH Ot#rt n en4/_ lu en4Ot#rt; chuNi trC v tH en4 n Ot#rt lu Ot#rten4 chuNi trC v l null.

1tr.OubOtr6\;F7wThw

Tr#ng _ub

Gio Trnh Thit K Web

Ou:67 toLoner%#Oe67 toc::er%#Oe67 TrC v chuNi *i?u Ou:erOcri:t %huy?n chuNi thnh ch$ th8@ng %huy?n chuNi thnh ch$ ho#

WWW.vietnoiviet.com

^ 4)0Tnh chi u 4i chuNi OP 4)ng :h8Mng th2c length Ocri:t ty:eteit'#v#Ocri:t v#r OtrlguyAn ThD ~o# ~[ng 4ocument.nrite6: Otr ':7 4ocument.nrite6v%hieu 4#i cu# chuoi l# 0 v Otr.length7 'Ocri:t ^ 4)0 &h8Mng th2c rontcolor67 45ng ? Dnh mu c,# chuNi Ocri:t ty:eteit'#v#Ocri:t v#r titlguyAn ThD pCo lhi 4ocument.nrite6: tit.rontcolor67 ':7 4ocument.nrite6: tit.rontcolor6re47 ':7 4ocument.nrite6: tit.rontcolor6blue7 ':7 4ocument.nrite6: tit.rontcolor6green7 ':7 'Ocri:t ^ 4) &h8Mng th2c in4eir. &h8Mng th2c ny trC v vD tr c,# chuNi con 8Wc tm thIy trong mt chuNi Ocri:t ty:eteit'#v#Ocri:t v#r OtrThiO iO my 1choolO v#r :oOOtr.in4eir61chool7 ir 6:oO\7 4ocument.nrite61chool roun4 #t :oOition0 7 4ocument.nrite6:oO br '7 qlOe 4ocument.nrite61chool not roun47 'Ocri:t

VII.2.:. pu$ tVWA! M tEvw

Z+i t8Wng m#th67 cung cI: cc hm v cc :h8Mng th2c cn thit ? thVc hi<n cc :h: ton O+ hRc. Kh!ng cn :hCi to +i t8Wng J#th67 m ch-ng t# c th? OP 4)ng trVc ti: +i t8Wng ny

1. CQ. )EVA! tE. .G M tEvw: %- :h: chung0 M tE."#tE(8v3 45#w ^ 4)0 Ocri:t v#r n /_ua.b ; m_ua.b oocument.nrite6v#bO6/_ua.b7 w J#th.#bO6n7 wbrw7 oocument.nrite6vceil6_ua.b7 w J#th.ceil6m7 wbrw7 oocument.nrite6vrloor 6_ua.b7 w J#th.rloor6m7 wbrw7 oocument.nrite6v:on 6F;u7 w J#th.:on6F;u7wbrw7 oocument.nrite6vJot Oo ng#u nhien0 w J#th.r#n4om67] wbrw7 'Ocri:t Tr#ng _u`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

C AE %Q.E .Q. )EVA! tE. .G M tEvw &h8Mng th2c #bO6i7 #coO6i7 ceil6i7 rloor6i7 log6i7 m#i6i;y7 min6i;y7 :on6i;y7 r#n4om67 roun46i7 OBrt6i7 J! tC TrC v gi trD tuy<t +i c,# bin i TrC v gi trD #rccoOine c,# i TrC v O+ nguy3n l"n hMn hogc bYng i TrC v O+ nguy3n nh hMn hogc bYng i TrC v gi trD log c,# i TrC v gi trD l"n nhIt trong h#i O+ i v y TrC v gi trD nh nhIt trong h#i O+ i v y TrC v gi trD i l.y thH# y TrC v gi trD mt O+ ngyu nhi3n tH \ n _ Lm trmn O+ i TrC v gi trD c}n b9c F c,# i

^ 4)0 ^it ch8Mng trnh to mt n-t Ui hnh 6:l#y7 v n-t Oto: ? ng8ng htmlhe#4 Ocri:t v#r i4B runction :l#y67 v#r #rrhinh nen Srr#y67 #rrhinh\ vh_.:gw #rrhinh_ vhF.:gw #rrhinhF vhu.:gw #rrhinhu vhG.:gw #rrhinhG vh].:gw #rrhinh] vha.:gw v#r iJ#th.roun46J#th.r#n4om67a7 i4hinh.Orc#rrhinhi i4BOetTimeout6v:l#y67w;_\\\7 runction 1to:67 cle#rTimeout6i4B7 'Ocri:t

Tr#ng _G\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

'he#4 bo4y img Orcwhinh.:gw ni4th_\\ heightF\\ i4wi4hinhw rorm in:ut ty:ebutton v#lue v&l#yw on%lic* v&l#y67w in:ut ty:ebutton v#lue v1to:w on%lic* v1to:67w 'rorm'bo4y'html

VII.2.N. pu$ tVWA! 8(.5"#At:

Z+i t8Wng 4ocument cung cI: cc thuc tnh v :h8Mng th2c ? lm vi<c v"i ton b ti li<u hi<n hnh g[m0 rorm; li3n *t; hnh Cnh; ti3u ; vD tr hi<n hnh; mu hi<n hnh= Z+i t8Wng 4ocument 8Wc Dnh nghh# *hi t#g bo4y 8Wc iP lf trong tr#ng ~TJL v n vyn t[n ti nu tr#ng 8Wc n:. %c thuc tnh c,# 4ocument :hCn nh thuc tnh c,# t#g bo4y. Trong bo4y c F OV *i<n nLo#4 v cnlo#4

1. CQ. tE5D. t7AE .G Ou$ tVWA! 8(.5"#At

Thuc tnh #lin*color bgcolor coo*ie 4om#in rgcolor l#Otmo4irie4 lin*color loc#tion rererrer title url vlin*color J! tC Thit l9: hogc trC v gi trD mu c,# li3n *t #ng iem c,# ti li<u Thit l9: hogc trC v gi trD mu n n c,# ti li<u %h2# gi trD cc coo*ieO 4nh cho ti li<u hi<n hnh TrC v gi trD t3n mi n my ch, ch2# 4ocument Thit l9: hogc trC v gi trD mu ch$ c,# ti li<u TrC v gi trD ngy gi@ cu+i c5ng m ti li<u 8Wc c9: nh9t Thit l9: hogc trC v gi trD mu c,# li3n *t trong ti li<u mE mt tr#ng neb m"i seturnO the csL or the 4ocument th#t lo#4e4 the current 4ocument TrC v gi trD c,# tV# c,# ti li<u TrC v 8@ng 4yn c, ti li<u hi<n hnh Thit l9: hogc trC v gi trD mu c,# li3n *t iem c,# ti li<u J! tC j# ti li<u Zng mt ti li<u Z8# tr v mt +i t8Wng trong tr#ng vit mt chuNi vo mt ti li<u vit mt chuNi vo mt ti li<u v iu+ng 4mng

2. &EVA! tE.:
&h8Mng th2c cle#r67 cloOe67 rocuO67 o:en6mimety:e;re:l#ce7 nrite6Otr7 nriteln6Otr7

3. \| l$MA %- :h:0 8(.5"#At.#3#AtA "#1h%("# 3 \.'$)tC(8#h C AE %Q.E .Q. %| l$MA tQ. ODA! Ou$ tVWA! 8(.5"#At
qvent

Tr#ng _G_

Gio Trnh Thit K Web

nplur n%lic* nobl%lic* nKocuO nKeyoonn nKey&reOO nKeyc: nJouOeoonn nJouOeJove nJouOeut nJouOever nJouOec: nJouOec:

WWW.vietnoiviet.com

VII.2.U. pu$ tVWA! t'LAE 850Mt vN 3$! t(' +,-#.tw

Z+i t8Wng trnh 4uy<t ch2# Vng nh$ng th!ng tin v trnh 4uy<t neb c,# client % h#i trnh 4uy<t neb l"n l leOc#:e l#vig#tor v internet qi:lorer. Jgc 45 cC h#i u hN trW m! hnh +i t8Wng tr3n ng!n ng$ #v#Ocri:t nh8ng c.ng c mt O+ +i t8Wng v cch truy c9: vo thnh :hn thuc tnh tr3n h#i trnh 4uy<t c.ng c mt ci *hc nh#u. Ju+n cho 2ng 4)ng chy hon chTnh tr3n mRi trnh 4uy<t th ng8@i l9: trnh :hCi ic Dnh r# ch8Mng trnh #ng chy tr3n trnh 4uy<t no v E verOion no ? iP lf R#n co4e t+t hMn

1. TE5D. t7AE
Thuc tnh #::l#me #::^erOion coo*ieqn#ble4 :l#trorm J! tC T3n trnh 4uy<t &hi3n bCn trnh 4uy<t l n c,# h< i u hnh

2. &EVA! tE.
&h8Mng th2c #v#qn#ble467 rerreOh67 :rererence67 J! TC trC v gi trD true nu trnh 4uy<t c hN trW #v#Ocri:t

VII.2.a. pu$ tVWA! W$A8(B

L +i t8Wng c#o nhIt trong m! hnh oJ; l nMi ch2# tIt cC cc thnh :hn c,# tr#ng neb.

1. TE5D. t7AE .G Ou$ tVWA! W$A8(B0

Thuc tnh 4er#ult1t#tuO Ot#tuO loc#tion J! tC thit l9: chuUi t'bo tr3n th#nh trng thi thit l9: th!ng bo ti th@i i?m hi<n hnh jc Dnh vD tr tr#ng hi<n ti trong cP# OU Gi trD Teit Teit csL

Tr#ng _GF

Gio Trnh Thit K Web

hiOtory #ln#yOLonere4 #ln#yOs#iOe4 oe:en4ent 4irectorieO rullOcreen height hot*eyO lert loc#tion menub#r reOi#ble Ocrolb#rO Ot#tuO titleb#r toolb#r ni4th cloOe4

WWW.vietnoiviet.com

jc Dnh cc :hn tP trong hiOtory hi?n thD cP# OU b3n 48"i cc c,# OU *hc hi?n thD cP# OU tr3n tIt cC cc cP# OU *hc %P# OU ny Oe ng *hi cP# OU ch# bD ng ~i?n thD putton th8 m)c hi?n thD ch y mn hnh thit l9: chi u c#o c,# cP# OU %ho :h: 45ng :hm nng Thit l9: *'cch tH v}n bCn n cnh cP# OU hi?n thD h: loc#tion hi?n thD th#nh menu b#r %ho :h: th#y Ui *ch th8"c cP# OU iuIt hi<n '*h!ng iuIt hi<n th#nh cun ~i?n thD th#nh trng thi hi?n thD th#nh ti3u hi?n thD th#nh c!ng c) jc Dnh rng c,# cP# OU trC v gi trD true; r#lOe. True *hi cP# OU ng

keO'no keO'no keO'no keO'no keO'no O+ nguy3n keO'no O+ nguy3n keO'no keO'no keO'no keO'no keO'no keO'no keO'no O+ nguy3n true; r#lOe

V7 89:
nin4on.4er#ult1t#tuOw1tringw nin4on.Ot#tuOw1tringw nin4on.loc#tionwcsLw T# c.ng c th? mE mt tr#ng neb m"i bYng l<nh0

B$A8(B.4(. t$(A.E'#`1[U<L[ 2. &EVA! TE. C@ )EQ): B$A8(B."#tE(8A "#vw

&h8Mng Th2c #lert6mOg7 blur67 cle#rinterv#l6(o7 J! tC ~i?n ThD h: thR#i th!ng bo oi chuy?n con tr n cP# OU hi<n hnh ~,y th@i gi#n thit l9: bYng Oetinterv#l67 ~,y th@i gi#n thit l9: bYng cle#rTimeout6(o7 OetTimeout67 cloOe67 Zng cP# OU hi<n hnh ~i?n thD h: thR#i ic nh9n v"i h#i n-t conrirm6mOg7 %#ncel v K rocuO67 Z8# con tr v cP# OU hi<nhnh oi chuy?n cP# OU n mt vD tr m"i mt Jovepy6i;y7 R#n :iiel Oo v"i cP# OU hi<n hnh oi chuy?n cP# OU Bu# tri v l3n tr3n mt JoveTo6i;y7 R#n :iiel c) th? Oo v"i cP# OU hi<n hnh. o:en6csL;nin4onn#me;K csL 0 l D# chT tr#ng neb mu+n n: vo e#tureLiOt7 cP# OU. Win4onl#me0 l t3n cP# OU . Ke#tureLiOt 0 l 4#nh Och cc thuc tnh c,#

Tr#ng _Gu

Gio Trnh Thit K Web

WWW.vietnoiviet.com
cP# OU0 th#nh c!ng c); th#nh menu; th#nh Ot#tuO =. in ni 4ung trong cP# OU hi<n hnh. ~i?n thD h: thoi nh9: li<u Thit l9: th@i gi#n mili giXy ? gRi mt hm ~,y vi<c 4onnlo#4 mt cP# OU. T8Mng tV nh8 vi<c ng mt cP# OU trnh 4uy<t. Th#y Ui *ch th8"c cP# OU O#ng :hCi 4i; 48"i 4y :iiel Th#y Ui *ch th8"c i; y :iiel cun ni 4ung O#ng :hCi 4i; iu+ng 48"i 4y :iiel cun ni 4ung tr3n tr#ng +n vD tr i;y

:rint67 :rom:t6mOg;re:ly7 OetTimeout6runc;milliOec7 Oto:67 reOiepy64i;4y7 reOieTo6i;y7 Ocrollpy64i;4y7 OcrollTo6i;y7

^ 4)0 bnin4on.cloOe67 Tx lE(Q %#4`0 trong tr8@ng hW: mu+n th#o tc tr3n cP# OU hi<n hnh t# 45ng tH *ho Oelr th#y th cho +i t8Wng nin4on ^ 4) 0 ng cP# OU hi<n hnh0 \#4`..4(%#vw E(X. B$A8(B..4(%#vw ^ 4)0 Zon 1cri:t ng; mE cP# OU trnh 4uy<t html he#4'he#4 bo4y KsJ lSJqninrorm (l&cT Tk&qbutton ^SLcq:en len Win4on on%lic*lenWinnin4on.o:en6bl#n*_.htm;lenWin; toolb#rno;Ot#tuOno;ni4thF\\;height_\\7 &(l&cT Tk&qbutton ^SLcq%loOe len Win4on on%lic*lenWin.cloOe67 &(l&cT Tk&qbutton ^SLcq%loOe J#in Win4on on%lic*nin4on.cloOe67 'KsJ 'bo4y 'html

^ 4)0 ^it hm mE mt cP# OU m"i *hi clic* n-t i u *hi?n

runction o:ennin4on67

Tr#ng _GG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

nin4on.o:en6htt:0''nnn.y#hoo.com;mynennin4on; toolb#ryeO; loc#tionyeO; 4irectorieOno; Ot#tuOno; menub#ryeO; Ocrollb#rOyeO; reOi#bleno; co:yhiOtoryyeO; ni4thG\\; heightG\\7

3. \| l$MA
1V *i<n onplur onqrror onKocuO onLo#4 onseOie oncnlo#4 J! tC ThVc thi R#n m l<nh *hi OV *i<n blur iCy r# ThVc thi R#n m l<nh *hi OV *i<n qrror iCy r# ThVc thi R#n m l<nh *hi OV *i<n KocuO iCy r# ThVc thi R#n m l<nh *hi OV *i<n Lo#4 iCy r# ThVc thi R#n m l<nh *hi OV *i<n reOier iCy r# ThVc thi R#n m l<nh *hi OV *i<n cnlo#4 iCy r#

^ 4)0 ^it hm tr t"i mt tr#ng neb *hc runction loc#te67 loc#tionhtt:0''nnn.y#hoo.com' ^ 4)0~i?n thD mt O+ th!ng tin l3n th#nh trng thi he#4 Ocri:t ty:eteit'#v#Ocri:t runction lo#467 nin4on.Ot#tuO :ut your meOO#ge here 'Ocri:t 'he#4 bo4y onlo#4lo#467 :Loo* in the Ot#tuOb#r': 'bo4y ^ 4)0 ^it hm in tr#ng neb0 runction :rint:#ge67 nin4on.:rint67

VII.2.d. pu$ tVWA! `('":

Korm l mt thnh :hn tr3n tr#ng neb 45ng ? thu th9: 4$ li<u; th!ng tin tH ng8@i 45ng. JNi :hn tP trong rorm l mt +i t8Wng trong oJ. oo mNi :hn tP tr3n rorm c.ng c nh$ng OV *i<n.

1. CQ. %| l$MA .G .Q. )EYA t t'KA `('"

&hn tP putton %hec*boi Korm Teitboi s#4io T3n OV *i<n on%lic* on%lic* n1ubmit; onseOet nplur;n%h#nge;nKocuO;nOelect n%lic*

Tr#ng _G]

Gio Trnh Thit K Web

seOet button oro:4onn menu 1ubmit button Teit#re#

WWW.vietnoiviet.com
n%lic* nplur;on%h#nge;onKocuO;on1elect n%lic* nplur;n%h#nge;nKocuO;nOelect

2. T'50 .o) !$Q t'J .Q. )EYA t t'KA `('" C@ )EQ)0 8(.5"#At.`('"N "#.`('"#4#"#At.)'()#'t$#% 8(.5"#At.`('"N "#.`('"#4#"#At."#tE(8 ^ 4) _0 To mt rorm ch2# mt riel4 ? nh9: D# chT em#il. Ki?m tr# 4$ li<u nh9: vo
c :hCi l D# chT q/m#il *h!ng bYng cch *i?m tr# *f tV trong D# chT nh9: vo html he#4Title Kiem tr#'title'he#4 bo4y rorm n#merorm_ metho4:oOt #ction t#ble tr t4qnter your q/m#il #44reOO0 't4 t4in:ut ty:eteit n#meJyqm#il't4 'tr tr t4 #ligncentercolO:#nF in:ut ty:eOubmit n#me1ubmit v#lue1en4 (n:ut onclic* wv#li4#te67w 't4 'tr 't#ble 'rorm Ocri:t runction v#li4#te67 #4 4ocument.rorm_.Jyqm#il.v#lue.in4eir67 ir 6#4 /_7 #lert6lot # v#li4 e/m#il7 return r#lOe 'Ocri:t 'bo4y'html

^ 4) F0 Ki?m tr# tnh hW: l< c,# gi trD nh9: vo teitriel4

html

Tr#ng _Ga

Gio Trnh Thit K Web

WWW.vietnoiviet.com

he#4 Ocri:t runction v#li4#te67 tit 4ocument.myKorm.myin:ut.v#lue ir 6tit_ tit]7 return true elOe #lert6JuOt be betneen _ #n4 ]7 return r#lOe 'Ocri:t 'he#4 bo4y rorm n#memyKorm onOubmitreturn v#li4#te67 qnter # v#lue rrom _ to ]0 in:ut ty:eteit n#memyin:ut in:ut ty:eOubmit v#lue1en4 in:ut 'rorm 'bo4y 'html ^ 4) u0 To mt rorm ch2# _ riel4 ? nh9: gi trD. ^it mt hm 45ng ? *i?m tr# O+ *f tV nh9: vo riel4 ny 6 45ng thuc tnh length ? *i?m tr# O+ *f tV nh9: vo7 html he#4 Ocri:t l#ngu#ge#v#Ocri:t runction v#li4#terorm67 in:ut 4ocument.myKorm.myin:ut.v#lue ir 6in:ut.length]7 #lert6oo not inOert more th#n ] ch#r#cterO7 return r#lOe elOe return true 'Ocri:t'he#4 bo4y rorm n#memyKorm onOubmitreturn v#li4#terorm67 in thiO in:ut boi you #re not #llone4 to inOert more th#n ] ch#r#cterO0 in:ut ty:eteit n#memyin:ut in:ut ty:eOubmit v#lue1en4 in:ut 'rorm 'bo4y 'html

Tr#ng _Gt

Gio Trnh Thit K Web 3. CQ. tE5D. t7AE t'KA Ou$ tVWA! `('"0
Thuc tnh J! tC Sction TrC v 8@ng 4yn 6csL7 n t9: tin iP lf c,# rorm th2 i Length TrC v O+ rorm tr3n tr#ng neb ~ogc trC v O+ :hn tP tr3n rorm th2 i l#me TrC v gi trD t3n c,# rorm th2 i Jetho4 %c Dnh :h8Mng th2c c,# rorm th2 i elementO mCng element ch2# cc :hn tP tr3n rorm

WWW.vietnoiviet.com

^ 4) oocument.rormOi.#ction %ountrorm4ocument.rormO.length %ountriel44ocument.rormOi.length l#merorm4ocument.rormOi.n#me Jetho4rorm4ocument.rormOi.metho4 4ocument.rormi.elementO.v#lue

:. CQ. tE5D. t7AE t'KA "sA! #4#"#At

Thuc tnh J! tC jc Dnh t3n c,# mt :hn tP tr3n l#me rorm th2 i. Ty:e jc Dnh lR#i c,# +i t8Wng jc Dnh gi trD c,# :hn tP th2 ^#lue trong rorm i. jc Dnh :hn tP th2 c 8Wc chec*e4 *h!ng. lu c trC v gi %hec*e4 trD true cmn *h!ng trC v gi trD r#lOe Thit l9: ch m@ 6 gn gi trD oiO#ble true *h!ng cho :h: ng8@i OP 4)ng chRn lV# v ng8Wc li Ki?m tr# :hn tP c m@ *h!ng iOoiO#ble 6true l m@ v ng8Wc li7 %ho :h:'*h!ng th#y Ui ni 4ung re#4nly c,# :hn tP ^ 4) 4ocument.rormi.elementO.n#me 4ocument.rormi.elementO.ty:e 4ocument.rormi.elementO.v#lue 4ocument.rormi.elementO.chec*e4

4ocument.rormi.elementO.4iO#ble

4ocument.rormi.elementO.iOoiO#ble 4ocument.rormOi.elementO.re#4nly

N. &EVA! tE. t'KA "sA! #4#"#At0

&h8Mng th2c KocuO 67 J! tC Z8# con tr v li teit boi hogc 4ro:4onnmenu ^ 4) 4ocument.rormi.elementO.rocuO67

L8u f0 lu t# #ng lm vi<c tr3n 4ocument hi<n hnh; bit t3n c) th? c,# rorm v t3n c,# thnh :hn tr3n rorm t# c th? truy c9: trVc ti: m *h!ng cn Bu# mCng rorm v element0

A "#_('".A "#_$#48.)'()#'t0 hogc A "#_('".A "#_$#48."#tE(8

^ 4) _0 v Oet rocuO tr3n mt riel4. html he#4 Ocri:t ty:eteit'#v#Ocri:t

Tr#ng _Gb

Gio Trnh Thit K Web

runction OetrocuO67 4ocument.rormO\.riel4.rocuO67

WWW.vietnoiviet.com

'Ocri:t 'he#4 bo4y rorm in:ut ty:eteit n#meriel4 Oieu\ in:ut ty:ebutton v#lueGet KocuO onclic*OetrocuO67 'rorm 'bo4y 'html

^ 4) F0 ^it mt hm ? 8# con tr v teitboi to tr8"c 6 OP 4)ng :h8Mng th2c rocuO67 7

html he#4 Ocri:t l#ngu#ge#v#Ocri:t runction OetrocuO67 4ocument.rormO\.riel4.Oelect67 4ocument.rormO\.riel4.rocuO67 'Ocri:t 'he#4 bo4y rorm in:ut ty:eteit n#meriel4 Oieu\ v#luein:ut teit in:ut ty:ebutton v#lue1electe4 onclic*OetrocuO67 'rorm 'bo4y 'html

VII.2.f. CQ. )EYA t t'KA `'(": 1. TE ( tQ. t'KA t'VmA! ' 8$(
Ju+n lIy gi trD c,# tr8@ng r#4io t# :hCi OP 4)ng n mCng element. ouy<t Bu# tIt cC cc :hn tP v *i?m tr# :hn tP c 8Wc chec*e4 *h!ng

C@ )EQ)0
C(5At`$#481A "#`('".4#A!tE `('v3 ' $1g$<C(5At`$#48$w $`vA "#`('".#4#"#At%$.t0)#1 1[' 8$([ A "#`('".#4#"#At%$..E#.l#81 1t'5#w G$ t'$1A "#`('".#4#"#At%$.3 45# ^ 4) _0 To rorm c ch2# cc r#4io0 html he#4 Ocri:t ty:eteit'#v#Ocri:t runction chec*6bronOer7

Tr#ng _G`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

4ocument.rormO\.#nOner.v#luebronOer 'Ocri:t 'he#4 bo4y rorm Which bronOer iO your r#voritebr in:ut ty:er#4io n#mebronOer onclic*chec*6thiO.v#lue7 v#lueqi:lorerJicroOort internet qi:lorerbr in:ut ty:er#4io n#mebronOer onclic*chec*6thiO.v#lue7 v#lueletOc#:eletOc#:e l#vig#torbr in:ut ty:eteit n#me#nOner 'rorm'bo4y'html

^ 4) F0 html he#4 Ocri:t ty:eteit'#v#Ocri:t runction chec*67 corree4ocument.rormO\.corree #nOner4ocument.rormO\.#nOner tit ror 6i \ icorree.length i7 ir 6correei.chec*e47 tittit correei.v#lue #nOner.v#luekou or4ere4 # corree nith tit 'Ocri:t 'he#4 bo4y rorm ~on noul4 you li*e your correebr in:ut ty:echec*boi n#mecorree v#luecre#mWith cre#mbr in:ut ty:echec*boi n#mecorree v#lueOug#rWith Oug#rbr in:ut ty:eteit n#me#nOner Oieu\ in:ut ty:ebutton n#meteOt onclic*chec*67 v#luer4er 'rorm 'bo4y 'html

Tr#ng _]\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

2. TE ( tQ. t'KA 8'()8(BA"#A5

%c thuc tnh v :h8Mng th2c c,# 4ro:4onnmenu

w TE5F. t7AE
Thuc tnh length Oelecte4in4ei o:tionO J! tC TrC v O+ :hn tP trong 4#nh Och 4ro:4onnmenu. trC v chT O+ c,# :hn tP 8Wc chRn trong 4#nh Och mCng o:tion ch2# cc :hn tP trong 4#nh Och 8Wc nh chT O+ \/O:t/_ ^ 4) O:tn#merorm.n#meriel4.length O:tn#merorm.n#meriel4.Oelecte4(n4ei

,w &EVA! tE. &h8Mng th2c KocuO67 J! tC Z8# con tr v li 4ro:4onnmenu J! tC TrC v gi trD true nu :hn tP th2 i 8Wc chRn TrC v gi trD true nu :hn tP th2 i 8Wc chRn TrC v gi trD v#lue c,# o:tion th2 i. TrC v gi trD teit c,# o:tion th2 i. ^ 4) n#merorm.n#meriel4.rocuO67

.w CQ. tE5D. t7AE .G "sA! ()t$(A Thuc tnh oer#ult1electe4 1electe4 ^#lue Teit ^ 4) n#merorm.n#meriel4.o:tioni.4er#ult1 electe4rocuO67 n#merorm.n#meriel4.o:tioni.Oelecte4 n#merorm.n#meriel4.o:tioni.v#lue n#merorm.n#meriel4.o:tioni.teit

V7 89 10 html he#4 Ocri:t ty:eteit'#v#Ocri:t runction :ut67 tit4ocument.rormO\.4ro:4onn.o:tionO4ocument.rormO\. 4ro:4onn.Oelecte4(n4ei.teit 4ocument.rormO\.r#vorite.v#luetit

Tr#ng _]_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

'Ocri:t 'he#4 bo4y rorm 1elect your r#vorite bronOer0 Oelect n#me4ro:4onn onch#nge:ut67 o:tioninternet qi:lorer o:tionletOc#:e l#vig#tor 'Oelect : kour r#vorite bronOer iO0 in:ut ty:eteit n#mer#vorite v#lueinternet qi:lorer 'rorm 'bo4y 'html

V7 89 2 To rorm c 4ro:4onn menu html he#4 Ocri:t ty:eteit'#v#Ocri:t runction :ut67 o:tion4ocument.rormO\.4ro:4onn.o:tionO4ocument.rormO\. 4ro:4onn.Oelecte4(n4ei.teit tit4ocument.rormO\.number.v#lue tittit o:tion 4ocument.rormO\.number.v#luetit 'Ocri:t 'he#4 bo4y rorm 1elect numberO0br Oelect n#me4ro:4onn o:tion_ o:tionF o:tionu o:tionG o:tion] o:tiona o:tiont o:tionb

Tr#ng _]F

Gio Trnh Thit K Web

WWW.vietnoiviet.com

o:tion` o:tion_\ 'Oelect in:ut ty:ebutton onclic*:ut67 v#lue// in:ut ty:eteit n#menumber 'rorm 'bo4y 'html

V7 89 3:
html he#4'he#4 bo4y Ocri:t l#ngu#ge#v#1cri:t v#r m#i\ `5A.t$(A teitliOt67 m#iteitliOt.#rgumentO.length ror 6i\ im#i i7 thiOiteitliOt.#rgumentOi tlnen teitliOt6K~S %lG lG~q T~lG T(l; TsclG oS( ~% %lG lG~(q& T&~%J;1 _F lGckql ^Sl pS ;o(ql T~S(0 b`G\u`\7 v#r i\ :oO\ v#r ltl\.length `5A.t$(A teittic*er67 4ocument.tic*rorm.tic*riel4.v#luetli.OubOtring6\;:oO7 ir6:oOl7 :oO\ OetTimeout6teittic*er67;_\\\7 i ir6im#i7 i\ ltli.length elOe iBOetTimeout6teittic*er67;]\7 `5A.t$(A Oto:67 cle#rTimeout6iB7 'Ocri:t rorm #ction metho4:oOt n#metic*rorm i4tic*rorm in:ut n#metic*riel4 ty:eteit i4tic*riel4 Oie]\ : in:ut ty:ebutton n#meputton v#lue&l#y on%lic*teittic*er67 in:ut ty:ebutton n#meputton v#lue1to: on%lic*Oto:67 ': 'rorm 'bo4y

Tr#ng _]u

Gio Trnh Thit K Web

'html

WWW.vietnoiviet.com

VII.3. THAH pI N}I CUNG p}NG T<N T<ANG VII.3.1. T'KA N#%. )#:
Z th#y Ui ni 4ung ng tr3n tr#ng 45ng cg: t#g L#yer 'L#yer <L 0#' IC1I8N "# )'()#'t$#%* C(.5"#At .(At#At </L 0#'* I7 0l t3n c,# L#yer; 4V# vo (4l#me ? th#y Ui ni 4ung ng tr3n tr#ng; Pro'ertie#0 l 4#nh Och cc thuc tnh c,# L#yer nh8 ic Dnh vD tr iuIt hi<n h#y li3n *t n tr#ng neb no .

C AE %Q.E .Q. tE5D. t7AE:

Thuc tnh %li:to:i; lerty;bottomi;righty ~eightv#lue Lertv#lue &#gejv#lue &#gekv#lue 1s%csL To:v#lue ^iOibilityo:tion6~i4eOhon7 Wi4thv#lue /in4eiv#lue J! tC jc Dnh tR# iuIt hi<n c,# l#yer trong cP# OU jc Dnh chi u c#o cu# l#yer ui Dnh *hoCng tr{ng tri tH v}n bCn n l#yer jc Dnh *hoCng cch c,# l#yer Oo v"i cnh tr3n c,# cP# OU jc Dnh *hoCng cch c,# l#yer Oo v"i cnh b3n c,# cP# OU jc Dnh t9: tin n: vo l#yer ui Dnh *hoCng tr{ng tr3n tH v}n bCn n l#yer jc Dnh l#yer iuIt hi<n 6Ohon 7h#y *h!ng iuIt hi<n 6hi4e7 jc Dnh chi u rng l#yer ^D tr t8Mng +i c,# l#yer Oo v"i cc :hn tP *hc

^ 4)0
l#yer (o(4l#yer 1s%wrilen#me.htmw'l#yer Trong mt tr#ng t# c th? vit mt hogc nhi u l#yer. lh8 v9y 4V# vo thuc tnh 1s% ? c th? n: vo mt hogc nhi u tr#ng neb *hc nh#u .

VII.3.2. T'KA IAt#'A#t Ee)4('#'

T#g (rr#me'(rr#me tr3n (nternet qi:lorer; c c!ng 4)ng gi+ng nh8 L#yer tr3n letO%#:e.

<I`' "# I81I8N "# )'()#'t$#%* </I`' "#* CQ. tE5D. t7AE .G I`' "#
Thuc tnh Slignlert;c#nter;right rr#mebor4er ~eightv#lue J! tC jc Dnh vD tr iuIt hi<n c,# c,# irr#me jc Dnh 8@ng vi n jc Dnh chi u c#o

Tr#ng _]G

Gio Trnh Thit K Web

WWW.vietnoiviet.com

1s% jc Dnh D# chT tr#ng neb n: vo irr#me ni4th jc Dnh chi u rng c,# irr#me lu nh8 ni 4ung trong irr#me Bu l"n th tV n tV ng iuIt hi<n th#nh tr8Wt ? cun ni 4ung. ^it ni 4ung vo irr#me

I8A "#.8(.5"#At.B'$t#v.(At#Atw
Th#y Ui ni 4ung tr3n tr#ng irr#me

C(.5"#At. 44.$8N "#.\<C1[U<L[ ^ 4) 0 irr#me i4:#ge rr#mebor4er\ Orc v:#geF.htmw'irr#me VII.3.3. TE 0 O$ AD$ 85A! t'KA t' A! 8| 3b( $AA#' 3b (5t#'
T# 45ng gc tnh inner v outer ? th#y Ui ni 4ung hogc lIy gi trD c,# mt v5ng no tr3n tr#ng neb.

1. &EqA ,$Mt !$n $AA#' 3b (5t#'

(nner l nh$ng g ch2# b3n trong c,# +i t8Wng ch2# (o. (nner g[m c o (nner~TJL lIy ni 4ung teit v t#g ~TJL b3n trong +i t8Wng (o o innerTeit0 chT lIy ni 4ung teit b3n trong 4+i t8Wng (o uter l :hn inner v bCn thXn +i t8Wng ch2# (o. uter g[m c o outer~TJL lIy ni 4ung teit v t#g ~TJL c,# cC +i t8Wng (o o outerTeit 0 lIy ni 4ung teit

^ 4)0 <C$3 IC1IAt'(*M(A$t('<B* \AM\UNG</B*</C$3* inner outer 2. L?0 8n 4$M5 tx "Dt 8u$ t|A!
lu lIy 4$ li<u tH mt v5ng no th innerTeit v outerTeit hon ton gi+ng nh#u; chT lIy :hn v}n bCn *h!ng lIy cc th| ~TJL b#o Bu#nh ch-ng V7 890 ^#r O_;OF O_(ntro.outerTeit OF(ntro.innerTeit th O_ v OF u nh9n gi trD Jonitor 1SJ1clG V7 89 O_(ntro.outer~TJL OF(ntro.inner~TJL Th O_oiv (4(ntroJonitorp 1SJ1clG'p'oiv ^ OFJonitorp 1SJ1clG'p Trong tr8@ng hW: t# vit ni 4ung n r# ngoi th n Oe Dnh 4ng nh$ng th| ~TJL ch2# trong :hn ni 4ung V7 890 IAt'(.$AA#'HTML1[<I*C&U &#At$5" IV[</I* Khi v5ng (ntro Oe 8Wc th#y th bYng chuNi CP) Pentiu& IO %h2# trong th| o(^

Tr#ng _]]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

<C$3 I81IAt'(*,&F &entium GH</C$3* IAt'(.(5t#'HTML![<I*C&U &#At$5" IV[</I* Khi v5ng (ntro Oe 8Wc th#y th bYng chuNi CP) Pentiu& IO ch2# trong th| o(^ [ng th@i th| o(^ *h!ng cmn tr3n tr#ng. oo nu ch8Mng trnh ti: t)c iP lf cc l<nh cmn li3n Bu#n n (o c t3n l (ntro th n Oe bo lNi. ^ chuNi CP) Pentiu& IO th#y th cho oiv (4(ntroJonitorp 1SJ1clG'p'oiv V7 890 o5ng (nner uter html he#4titlecntitle4 oocument'title Ocri:t l#ngu#ge#v#1cri:t v#r count count_ runction S4467 Ott.innerTeitcount m#.innerTeitrorm_.mOv.v#lue ten.innerTeitrorm_.tOv.v#lue 4c.innerTeitrorm_.4cOv.v#lue r.i4r count Ott.i4Ottcount m#.i4m#count ten.i4tencount 4c.i44ccount :gt.inner~TJL :4t#ble i4t bor4er_ cellO:#cing_ Otyle psoqs/ %LLS&1q0 coll#:Oe #ligncenter ni4thb\ :ttr i4r :t:tt4 i4Ott ni4th_G't4 :t:tt4 i4m# ni4thFa't4 :t:tt4 i4ten ni4thu\'t4 :t:tt4 i44c ni4thu\'t4 :t:t'tr :c't#ble t.outer~TJL:4:g:t:c count 'Ocri:t 'he#4 bo4y rorm n#merorm_ metho4:oOt #ction t#ble ni4tha\ bor4er_ #ligncenter cell:#44ing\ cellO:#cing\ tr t4 ni4thu\JS 1^(ql't4 t4 ni4tht\in:ut n#memOv ty:eteit i4mOv 1(qu\'t4 'tr

Tr#ng _]a

Gio Trnh Thit K Web

tr

WWW.vietnoiviet.com

t4~ Tql 1^'t4 t4in:ut n#metOv ty:eteit i4tOv 1(qu\'t4 'tr tr t4o(S %~('t4 t4in:ut n#me4cOv ty:eteit i44cOv 1(qu\'t4 'tr tr t4 colO:#nF4iv #ligncenter in:ut ty:ebutton n#meputton v#lueS44 on%lic*S4467'4iv 't4 'tr 't#ble 'rorm t#ble i4t ni4tht] bor4er_ #ligncenter cell:#44ing\ cellO:#cing\ #ligncenter tr bgcolorKK%%%% t4 W(oT~_G4iv #ligncenter1TT'4iv't4 t4 W(oT~Fa4iv #ligncenterJS 1^(ql'4iv't4 t4 W(oT~u\4iv #ligncenter~ Tql'4iv't4 t4 W(oT~]\4iv #ligncentero(S %~('4iv't4 'tr tr i4r bgcolorKK%%%% t4 i4Ott ni4th_G't4 t4 i4m# ni4thFa't4 t4 i4ten ni4thu\'t4 t4 i44c ni4th]\'t4 'tr 't#ble 'bo4y 'html

Tr#ng _]t

Gio Trnh Thit K Web

WWW.vietnoiviet.com

V7 89 tE " lEs( 0 Thit * rorm bn v tu ~TJL ~qSoT(TLq'T(TLq Ocri:t v#r t_;tF;tu;tG v#r obn rocuO67 `5A.t$(A nh#:67 v#r i ir6oK.T_.v#lue7 nin4on.OhonJo4#loi#log6m#OOege.htm;&h#i nh#: v#o ho ten;Ot#tuOnohel:noOcrollb#rno7 oK.T_.rocuO67 return ir6oK.o_.o:tionOoK.o_.Oelecte4(n4ei.teitoK.oF.o:tionOoK.oF.Oelecte4(n4ei. teit7 nin4on.OhonJo4#loi#log6m#OOege.htm;loi 4i *hong 4uoc trung noi 4en;Ot#tuOnohel:noOcrollb#rno7 return ir6oK.TF.v#lue7 nin4on.OhonJo4#loi#log6m#OOege.htm;&h#i nh#: v#o gi# tien ;Ot#tuOno hel:noOcrollb#rno7 oK.TF.rocuO67 return

Tr#ng _]b

Gio Trnh Thit K Web

WWW.vietnoiviet.com

ir 6iOl#l6oK.TF.v#lue 7true 7 nin4on.OhonJo4#loi#log6m#OOege.htm;Gi# tri :h#i co *ieu Oo; Ot#tuOno hel:noOcrollb#rno7 oK.TF.v#lue oK.TF.rocuO67 return obnnin4on.o:en64#nhO#ch4#ng*y.htm;o#nh1#cho#ngKy7 t_ t_ oK.T_.v#lue br obn.c_.inner~TJL t_ ioK.o_.Oelecte4(n4ei tFtFoK.o_.o:tionOi.teitbr obn.cF.inner~TJLtF ioK.oF.Oelecte4(n4ei tutuoK.oF.o:tionOi.teitbr obn.cu.inner~TJLtu gi# ev#l6oK.TF.v#lue7 ir6oK.co.chec*e47 tG tG gi#F\.b br obn.cG.inner~TJL tG elOe tG tG gi# br obn.cG.inner~TJL tG blur67 obn.rocuO67 'Ocri:t '~qSo pok KsJ metho4:oOt n#meoK TSpLq bor4er_ ni4tht` Ts T~colO:#nF ront Oie] r#ceSri#l; ~elvetic#; O#nO/Oerir oSlG Kk ^q TSc 'ront 'T~ 'Ts Ts To ni4th]G~o ten *h#ch h#ng0 'To To ni4thGa(l&cT n#meT_ 'To 'Ts

Tr#ng _]`

Gio Trnh Thit K Web

Ts

WWW.vietnoiviet.com

To ni4th]Gloi 4i0 'To To ni4thGa 1qLq%T Oie_ n#meo_ &T(l v#lueT&~%J Oelecte4T&~%J'&T(l &T(l v#lue lng lng'&T(l &T(l v#lue~ li~ li'&T(l &T(l v#lue~u~u'&T(l '1qLq%T'To 'Ts Ts To ni4th]GlMi n0 'To To ni4thGa 1qLq%T Oie_ n#meoF &T(l v#lue LtZ Lt'&T(l &T(l v#lue^ung Tu Oelecte4^.ng Tu'&T(l &T(l v#lue~u~u'&T(l &T(l v#lue~ li~ li'&T(l '1qLq%T 'To 'Ts Ts To ni4th]G heightG_Kh2 h[i'To To ni4thGa(l&cT ty:er#4io v#lue^_ chec*e4 n#mes_ i4co %nbO:nbO:nbO:nbO:nbO:nbO:nbO:nbO:nbO: (l&cT ty:er#4io n#mes_ v#lue^F i4*hongKh!ng'To 'Ts Ts TolGSk K~( ~Sl~0 't4t4in:ut ty:eteit't4 'Ts Ts To G( K~( ~Sl~ 't4t4in:ut ty:eteit't4 'Ts Ts To ni4th]GGi'To To ni4thGa(l&cT n#meTF'To 'Ts Ts To colO:#nF & #lignright (l&cT ty:ebutton v#luelh9: n#mep_ onclic*nh#:67 '& 'To 'Ts 'TSpLq 'KsJ 'pok '~TJL

Tr#ng _a\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

CHNG VIII:
VIII.1. _ILTE< :

HIU NG _ILTE< V T<AN\ITI+N

Kilter l hi<u 2ng gc bi<t 8Wc : 4)ng cho mt +i t8Wng trong tr#ng neb ? th#y Ui OV th? hi<n c,# n. ~i<u 2ng ny chT 8Wc (nternet qi:lorer hN trW; letOc#:e n *h!ng 8Wc hN trW. Kilter chT 8Wc : 4)ng cho cc thnh :hn 8Wc to v"i cc t#g 0 4iv; O:#n. %n :hCi ic Dnh rng; c#o hogc c vD tr tuy<t +i 6ni4th; height; :oOition7. img; m#rBuee; button; in:ut; teit#re#; t#ble; tr; t4; th; the#4; troot. Jt O+ th? hi<n c,# mt +i t8Wng l hnh Cnh *hi : 4)ng cc loi rilter.

~nh g+c 6_7

#l:h# 6F7

plur 6u7

chrom#

4ro:Oh#4on

rli:^

rli:~

glon

gr#y

invert

light 6_a7

J#O*

1h#4on 6_b7 plG (

W#ve

ir#y

Z? : 4)ng mt rilter t# c th? c th? 45ng %11 6c#Oc#4ing Otyle Oheet7 hogc 45ng ch8Mng trnh #v#Ocri:t.

VIII.1.1.

) 89A! `$4t#' ,A! C\\ : Tr#ng _a_

Gio Trnh Thit K Web

WWW.vietnoiviet.com

C@ )EQ): _$4t#':`$4t#'A "#v) ' "#t#'%w.

Kiltern#me l t3n mt trong nh$ng rilter. &#r#meterO ic Dnh nh$ng gi trD th#m O+ c,# rilter. Jt rilter c th? *h!ng c hogc c nhi u th#m O+; *hi c nhi u th#m O+ m *h!ng chT Dnh gi trD c) th? th coi nh8 chI: nh9n gi trD mgc Dnh. pCng O#u Xy m! tC t3n rilter v cc th#m O+ 0 T3n rilter Sl:h# plur %hrom# oro:1h#4on Kli:~ Kli:^ Glon Gr#y (nvert Light J#O* 1h#4on W#ve jr#y Th#m O+ :#city 0 \/_\\ 1tyle 0 \;_;F;u oirection 0 \/ua\ 1trength 0 _/_\\ S44 0\'_ 6cng hnh g+c7 %olor 0 rrggbb %olor 0 rrggbb rrj; rrk Kh!ng Kh!ng %olor 0 rrggbb 1trength 0 _/F]] Kh!ng Kh!ng lhi u th#m O+ %olor 0 rrggbb oirection 0 \/ua\ %olor rrggbb lhi u th#m O+ Kh!ng J! tC p lRc trong Ou+t; th#m O+ o:#city tH \ 6trong Ou+t7 t"i _\\ 6bnh th8@ng7. 1tyle l *i?u lRc p lRc nho; 4irection l chi u lm nho tnh theo gc; \ l chi u h8"ng l3n tr3n; `\ l chi u O#ng :hCi; Otrength chT nho mnh h#y yu Lm cho mu chT Dnh bEi color bD mIt i To bng U iu+ng mgt :hng :h# 48"i; rrj v rrk tnh bYng :iiel l ch3nh l<ch theo to i v y c,# hnh g+c v bng U L9t hnh theo chi u ng#ng L9t hnh theo chi u 2ng To Bung Ong Bu#nh +i t8Wng; rng ch T O + :iiel 8Wc ic Dnh bEi 1trength; mu 8Wc ic Dnh bEi %olor. Th? hi<n +i t8Wng theo th#ng im ZCo ng8Wc mu To cc ngu[n Ong ? chiu Ong +i t8Wng To mgt n v"i mu ic Dnh bEi %olor To bng U cho +i t8Wng nh8 *i?u ch$ bng U th!ng th8@ng.color Dnh mu cho bng U pin 4ng +i t8Wng theo 4ng Ong Oin Lm cho +i t8Wng c hnh Cnh nh8 Cnh c,# rilm j Bu#ng

letOc#:e *h!ng hN trW rilter; n3n *hi gg: nh$ng thuc tnh trong %11 m n *h!ng nh9n bit; n Oe b Bu# tIt cC cc thuc tnh trong %11 : 4)ng cho +i t8Wng. Z? giCi Buyt vIn ny t# c th? : 4)ng rilter bYng cch OP 4)ng ch8Mng trnh #v#Ocri:t. ^ 4)0 ~nh F v u c,# bCng ( 8Wc to bYng %11 nh8 O#u 0 img bor4er \ Orc v#n.gir ni4th __\ height _F\ %t04#1 h`$4t#': 4)E v() .$t0 1 fgS %t04# 1 2wh* img bor4er\ Orcv#n.gir ni4th__\ height_F\ %t04#1h `$4t#': ,45' v%t'#A!tE 1 1gw h *

VIII.1.2. C@ )EQ)0

) 89A! `$4t#' 8A! - 3 %.'$)t :

(,-#.t.%t04#.`$4t#' 1 Z`$4t#'A "#v) ' "#t#'%w[ Tr#ng _aF

Gio Trnh Thit K Web

WWW.vietnoiviet.com

ob6ect 0 t3n c,# c,# +i t8Wng trong tr#ng. lu mu+n *t hW: nhi u rilter trong tr#ng; t# :hCi :hCi :hXn cch ch-ng v"i nh#u bYng 4Iu chIm :hQy 6i u ny *h!ng cn thit *hi 45ng %1170 ^ 4)0 obect.Otyle.rilter wOh#4on #l:h#6o:#cityu\7w . T# c th? OP 4)ng c- :h: *hc; iem rilter nh8 mt :hn c,# m! hnh +i t8Wng h[ OM 6oJ0 4ocument obect mo4el7; cho :h: iem cc th#m O+ nh8 l thuc tnh c,# +i t8Wng rilter. %- :h: tUng But0 (,-#.t.`$4t#'%.`$4t#'A "#.`$4t#') ' "#t#' 1 3 45#. o ob6ect l t3n c,# +i t8Wng o ,ilterena&e 0 l t3n c,# rilter : 4)ng cho +i t8Wng. o ,iltere'ara&eter 0 l t3n c,# mt trong nh$ng th#m O+ c,# +i t8Wng. ^ 4)0 4iv i4logo Otylew:oOition0#bOolute rilter04ro:1h#4on6color0rr\\\\ orri] orry]7w T(l l~Sl~ '4iv % th? 45ng Ocri:t ? bin Ui mu c,# bng U tH mu O#ng mu i#nh nh8 O#u 0 4(!(.`$4t#'%.C'()\E 8(B.C(4(' 1 Z^gggg``[ %h- f 0 ? l<nh ny *h!ng gXy r# lNi t# :hCi : 4)ng rilter oro:Oh#4on cho +i t8Wng tr8"c; nu *h!ng Oe trC v lNi bEi v rilter *h!ng 8Wc iem nh8 l mt :hn c,# +i t8Wng oJ. MGt +i t8Wng c th? ch2# nhi u rilter. %- :h: 4(!(.`$4t#'% truy iuIt t"i t9: hW: rilter c,# +i t8Wng; theo #v#Ocri:t ? truy iuIt t"i :hn tP 6chng hn oro:1h#4on7 trong +i t8Wng t9: hW: t# c c nhi u cch vit t8Mng 8Mng 0 logo.rilterO.oro:1h#4on logo.rilterOvoro:1h#oonw logo.rilterO\ ^ 4)0 ir 6n#vig#tor.#::l#me vJicroOort (nternet qi:lorerw7 ietrue elOe ier#lOe ir 6ie7 logo.Otyle.rilter v#:h#6o:#cityu\7w ie 0 l bin boole#n n c gi trD l true *hi trnh 4uy<t OP 4)ng l (nternet qi:lorer. ^ 4)0 ~nh _b bCng ( c th? 8Wc to bYng cch 45ng #v#Ocri:t *hi t# clic* chut vo hnh trong tr#ng neb 0 html he#4 Ocri:t l#ngu#ge#v#Ocri:t runction imgrilter67 img_.Otyle.rilter Oh#4on lh8 c9: E tr3n v vi<c *h!ng nh9n bit rilter c,# letOc#:e; ? giCi Buyt vIn ny t# to mt bin boole#n ? ic Dnh trnh 4uy<t #ng 45ng

Tr#ng _au

Gio Trnh Thit K Web

img_.rilterO.Oh#4on.colorrr\\\\

WWW.vietnoiviet.com

'Ocri:t 'he#4 bo4y img i4img_ bor4er\ Orcv#n.gir ni4th__\ height_F\ on%lic*imgrilter67 'bo4y 'html

VIII.1.3.

MDt 3b$ A! 89A! :

1. TR( E$M5 A! .5DA 3z$ `$4t#' v'(44(3#'7 0

T# c th? to hi<u 2ng th#y Ui th? hi<n c,# +i t8Wng *hi ng8@i 45ng t8Mng tc v"i tr#ng neb 6chng hn *hi tr chut r l3n +i t8Wng v *hi tr chut r# *hi +i t8Wng7; i u ny c th? thVc hi<n bYng cch th#y Ui hnh Cnh 45ng rilter; cch lm ny c lWi l *h!ng cn :hCi lo#4 nhi u hnh Cnh. ^ 4)0 4iv Otylew:oOition0#bOolutew onJouOeverthiO.Otyle.rilterwglonw onJouOeutthiO.Otyle.rilterww T(l l~Sl~ '4iv Khi tr chut r l3n tr3n 4mng ch$ th 4mng ch$ Oe c hi<u 2ng !4(B. Khi tr chut r# *hi 4mng ch$ th *h!ng c hi<u 2ng rilter 8Wc : 4)ng.

2. TR( E$M5 A! `$4t#' ODA! :

Z+i v"i nh$ng hi<u 2ng c th#m O+ *hi t# th#y Ui gi trD c,# th#m O+ th th? hi<n c,# +i t8Wng trong tr#ng neb c.ng th#y Ui theo. ^i<c th#y Ui th#m O+ t# c th? thVc hi<n bYng ch8Mng trnh #v#Ocri:t; nu vi<c th#y Ui ny ti: 4iAn li3n t)c theo th@i gi#n +i t8Wng Oe c hi<u 2ng rilter ng. ^ 4)0 v#r o:level \ obn#me.Otyle.rilter v#l:h#67w i4OOet(nterv#l 6v4ynobect6obn#me7w;F\\7 `5A.t$(A 4ynobect 6obect7 ir 6o:level _\\7 obect.rilterO.Sl:h#.:#city o:level o:level ] elOe cle#r(nterv#l 6i4O7 Khi thVc thi; +i t8Wng Oe : 4)ng hi<u 2ng rilter v"i th#m O+ o:#city th#y Ui tH \/_\\; tH hon ton trong Ou+t t"i th? hi<n bnh th8@ng hon ton 6ng8@i 45ng Oe thIy +i t8Wng Oe hi<n 4n 4n7; th#m O+ ny c2 F\\ miliOecon4 th t}ng th3m ]; *hi o:#city _\\ th ch8Mng trnh Oe 4Hng bEi l<nh cle#r(nterv#l67

VIII.1.:.

CA! `$4t#' L$!Et :

Kilter Light to 8Wc hi<u 2ng rIt lf th-; rilter Light to hi<u 2ng chiu Ong +i t8Wng bYng nh$ng ngu[n Ong *hc nh#u. % th? to 8Wc n _\ ngu[n Ong c mu O{c; c8@ng :ht Ong; chiu Ong +i t8Wng E mt to ic Dnh 6i;y; v"i l chi u c#o7; nh$ng ngu[n Ong ny c mt O+ Dnh 4#nh tH \/`; ngu[n Ong b#n u 8Wc Dnh 4#nh l \.

Tr#ng _aG

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Z? i u *hi?n ngu[n Ong; c F :h8Mng th2c th!ng 4)ng l 0 #44&oint67 v JoveLight67. 88&($Atvw thit l9: mt ngu[n Ong chiu Ong +i t8Wng tr3ng tr#ng neb

C@ )EQ)0 (,-#.t.`$4t#'%.4$!Et. 88&($At ve S]S 0S 'S !S ,S %t'#A!tEw. ob6ect 0 t3n c,# +i t8Wng. 01y1K l nh$ng O+ tnh bYng :iiel ic Dnh v tr c,# ngu[n Ong Oo v"i g+c to l v tr tr3n b3n tri c,# +i t8Wng. r1g1b l gi trD mu theo h< mu sGp ? ic Dnh mu tUng hW: c,# ngu[n Ong. #trength 0 gi trD ic Dnh mnh c,# ngu[n Ong. M(3#L$!Etvw 4i chuy?n ngu[n Ong t"i vD tr m"i 8Wc ic Dnh bEi cc th#m O+. C@ )EQ) 0 (,-#.t.`$4t#'%.4$!Et.M(3#L$!Et v4$!EtS eS 0S ]S ,%(45t#w. light 0 l O+ Dnh 4#nh c,# ngu[n Ong. 01 y1 K 0 ic Dnh to m"i c,# ngu[n Ong; to ny :h) thuc vo th#m O+ #bOolute. ab#olute 0 c F gi trD l true v r#lOe. lu l true th +i t8Wng Oe 4i chuy?n t"i vD tr i;y; . lu l r#lOe th +i t8Wng Oe 4Dch i tH vD tr b#n u v"i 4@i theo u chi u 8Wc ic Dnh bEi th#m O+ i; y; .
^i<c *t hW: v"i rilter ng Oe cho t# nh$ng hi<u 2ng v! c5ng lf th- m *h!ng cn :hCi vti3u t+n 8@ng truy nw. ^ 4)0 ~nh _a bCng ( c th? 8Wc to bYng cch 45ng rilter light theo m O#u 6:hCi chy thVc trong (q ch" *h!ng :hCi :revien trong rront:#ge7 bo4y img i4img_ bor4er\ Orcv#n.gir ni4th__\ height_F\ Otylerilter0light67 Ocri:t l#ngu#ge#v#Ocri:t img_.rilterO.light.#44:oint6G\;u\;_u\;\;F]];\;_\\7 img_.rilterO.light.#44:oint6G\;u\;F\;\;F]];\;_\\7 img_.rilterO.light.#44:oint6G\;u\;F\;\;F]];\;_\\7 'Ocri:t bo4y

VIII.2. T<AN\ITI+N :
Tr#nOtion l hi<u 2ng : 4)ng cho mt +i t8Wng trong mt *hoCng th@i gi#n; n t8Mng tV nh8 rilter ng; th8@ng 45ng ? to mt hi<u 2ng gc bi<t *hi th#y th mt +i t8Wng ny v"i mt +i t8Wng *hc. Tr#nOition th8@ng 45ng ? to mt Oli4e Ohon *m theo hi<u 2ng. l chT 8Wc hN trW bEi (nternet qi:lorer; trong letOc#:e *hi OP 4)ng tr#nOition bYng %11; n Oe b Bu# tIt cC thuc tnh Otyle c,# +i t8Wng. Gi+ng nh8 rilter; tr#nOition c th? 8Wc 2ng 4)ng cho +i t8Wng bYng cch 45ng %11 h#y ch8Mng trnh #v#Ocri:t. % h#i loi tr#nOition l 0 ,4#A8 t' A%$t$(A v '#3# 4 t' A%$t$(A. B4#A8 T' A%$t(A 0 to hi<u 2ng th#y th 4n 4n +i t8Wng th2 nhIt bYng +i t8Wng th2 h#i.

Tr#ng _a]

Gio Trnh Thit K Web

WWW.vietnoiviet.com

<#3# 4 T' A%$t$(A 0 *hi th#y th +i t8Wng th2 nhIt bYng +i t8Wng th2 h#i; v c th? : 4)ng mt trong rIt nhi u hi<u 2ng.

VIII.2.1.

) 89A! t' A%$t$(A ,A! C\\ :

1. C@ )EQ) ,4#A8 t' A%$t$(A t'(A! C\\ : `$4t#' : ,4#A8T' A% v C5' t$(A13 45#w.
value 0 l8Wng th@i gi#n tnh bYng giXy In Dnh th@i gi#n cho hi<u 2ng ti: 4iAn.

2. C@ )EQ) .E( '# 3# 4 t' A%$t$(A `$4t#' : '#3# 4T' A% v C5' t$(A 1 3 45#S T' A%$t$(A 1 t0)#w
ty'e 0 mt O+ tH \ x Fu; chT loi hi<u 2ng tr#nOition theo bCng O#u 0 Tr#nOition poi in poi out %ircle in %ircle out Wi:e u: Wi:e 4onn Wi:e right Wi:e lert ^ertic#l blin4O ~oriont#l blin4O %hec*erbo#r4 ScroOO %*ec*erbo#r4 oonn Ty:e \ _ F u G ] a t b ` _\ __ Tr#nOition s#n4om 4iOOolve 1:lit vertic#l in 1:lit vertic#l out 1:lit horiont#l in 1:lit horiont#l out 1tri:O lert 4onn 1tri:O lert u: 1tri:O right 4onn 1tri:O right u: s#n4om b#rO horiont#l s#n4om b#rO vertic#l s#n4om 6\//FF7 Ty:e _F _u _G _] _a _t _b _` F\ F_ FF Fu

VIII.2.2.

) 89A! t' A%$t$(A ,A! - 3 %.'$)t :

%- :h: trong #v#Ocri:t cho th#m chiu t"i tr#nOition t8Mng tV nh8 +i v"i rilter. Z? thit l9: th@i gi#n 4iAn tin cho tr#nOition t# c th? vit nh8 O#u 0

(,-#.t.%t04#.`$4t#' 1 Z,4#A8T' A% v C5' t$(A12w[

~ogc 45ng t9: hW: rilter 0

(,-#.t.`$4t#'%.,#A8T' A%.C5' t$(A 1 2

ob6ect 0 l t3n c,# +i t8Wng trong tr#ng m t# mu+n : 4)ng tr#nOition. %h- f *hi ic Dnh tr#nOition th hi<u 2ng tr#nOition vyn ch8# iCy r#; ? lm i u ny t# :hCi thVc hi<n th3m mt b8"c n$# l vit ch8Mng trnh #v#Ocri:t ? thVc thi .

VIII.2.3.

TE|. tE$ "Dt t' A%$t$(A :

Khi tr#nOition 8Wc ic Dnh; ? thi hnh tr#nOition t# :hCi chy ch8Mng trnh #v#Ocri:t thVc thi b+n b8"c 0 Thit l9: trng thi *hEi u cho +i t8Wng 6c th? b Bu#7. o5ng :h8Mng th2c #::ly67 cho +i t8Wng. %hT Dnh trng thi *t th-c.

Tr#ng _aa

Gio Trnh Thit K Web

WWW.vietnoiviet.com

o5ng :h8Mng th2c &l#y67 ? thi hnh tr#nOition. Trng thi *hEi u l hnh Cnh c,# +i t8Wng tr8"c *hi thVc thi tr#nOition. % th? l trng thi Qn h#y hi<n c,# +i t8Wng 6thuc tnh viOiblility l hi44en h#y viOible7 h#y trong tr8@ng hW: mt hnh Cnh 6img7 l hnh Cnh th? hi<n c,# rile 8Wc chT Dnh bEi thuc tnh Orc.

1. CA! )EVA! tE. ))40vw .E( Ou$ tVWA! 0 (,-#.t.`$4t#'%.t' A%$t$(At0)#. ))40vw hogc 0 (,-#.t.`$4t#'% $ . ))40vw
ob6ect 0 t3n +i t8Wng . tra#itionety'e 0 blen4Tr#nO h#y reve#lTr#nO. i l chT O+ c,# rilter tnh tH \. lu chT c mt rilter cho +i t8Wng th t# c th? vit (,-#.t.`$4t#'%g. ))40vw. %h- f0 t9: hW: rilter c th? iem l b#o g[m cC rilter v tr#nOition.1P 4)ng :h8Mng th2c #::ly 67 *h!ng thVc OV chy tr#nOition; t# cmn cn :hCi chT Dnh trng thi *t th-c c,# +i t8Wng .

2. CE OJAE t'RA! tEQ$ lt tE@. :

lu t# mu+n tr#nOition chuy?n mt +i t8Wng tH trng thi Qn 6hi44en7 b#n u O#ng trng thi *hC *in 6viOible7 th t# :hCi chT Dnh trng thi *t th-c l hi<n +i t8Wng 6thuc tnh viOibility l viOible7. lu tr#nOition 45ng Ui mt hnh bYng mt hnh *hc; th chT Dnh trng thi *t th-c bYng l<nh #v#Ocri:t cho bit rile hnh m"i cho +i t8Wng.

3. CA! )EVA! tE. )4 0vw 0 ? thVc thi tr#nOiton c- :h: nh8 O#u 0 (,-#.t.`$4t#'%.t' %$t$(At0)#.)4 0vw hogc 0 (,-#.t.`$4t#'% $ .)4 0vw
^ 4)0 to tr#nOition cho +i t8Wng hnh Cnh 0 html he#4 Otyle img_ rilter 0 reve#lTr#nO6 our#tionF; Tr#nOitiona 7 'Otyle Ocri:t `5A.t$(A On#:it 67 img_.rilterO.reve#lTr#nO.#::ly67 mg_.Orc vim#geF.:gw mg_.rilterO.reve#lTr#nO.:l#y67 'Ocri:t 'he#4 bo4y img i4img_ Orcwim#ge_.:gw on%lic*wOn#:it67w 'bo4y 'html

Tr#ng _at

Gio Trnh Thit K Web

WWW.vietnoiviet.com

Trong v 4) tr3n t# : 4)ng Otyle cho +i t8Wng img_; ic Dnh re#ve#l tr#nOition v"i hi<u 2ng ni:e right 62ng v"i tr#nOitiona7 cho n. Khi tr#ng neb 8Wc lo#4 th +i t8Wng img_ th? hi<n hnh Cnh c,# rile ngu[n l im#ge_.:g . Khi ng8@i 45ng clic* vo hnh Cnh th hm On#:it67 8Wc gRi 0 Trng thi b#n u c,# +i t8Wng img_ l hnh Cnh c,# rile ngu[n im#ge_.:g; : 4)ng :h8Mng th2c #::ly67; O#u ic Dnh trng thi *t th-c c,# +i t8Wng l rile hnh im#geF.:g; cu+i c5ng 45ng :h8Mng th2c :l#y67 ? thi hnh tr#nOition. Trnh 4uy<t Oe : 4)ng tr#nOition v"i hi<u 2ng ni:e right *hi th#y Ui hnh tH rile im#ge_.:g O#ng rile im#geF.:g.

^ 4)0
html he#4 titleTr#nOition'title Ocri:t l#ngu#ge#v#Ocri:t '' to 4ych2# cc hnh 45ng cho tr#nOition v#r #rrimg nen Srr#y67 #rrimg\ v#n#.gir #rrimg_ v#nb.gir #rrimgF v#nc.gir '' to 4y ch2# Fu loi tr#nOition v#r #rrn#me nen Srr#y6boi in;boi out;circle in; circle out;ni:e u:;ni:e 4onn;ni:e right;ni:e lert;vertic#l blin4;horion blin4;chec*erbo#r4 ScroOO;chec*erbo#r4 4onn;r#n4om 4iOOolOe;O:lit vertic#l in; O:lit vertic#l out;O:lit horiont#l in;O:lit horiont#l out;Otri:O lert 4onn;Otri:O lert u:;Otri:O right 4onn;Otri:O right u:;r#n4om b#rO horiont#l;r#n4om b#rO vertic#l;r#n 4om7 '' *hEi ng bin m i; bin 45ng ? truy iuIt ln l8Wt rile hnh trong 4y #rrimg v#r i\ '' *hEi ng bin m ; bin 45ng ? truy iuIt ln l8Wt cc loi tr#nOition trong 4y #rrin#me; b{t u bYng /_ ? *hi vo vmng lg: t}ng l3n \ #rrn#me\ Oe truy iuIt t"i hi<u 2ng tr#nOition _ 6boi in7. v#r /_ runction Ohon67 i i_ _ '' ? trnh v8Wt chT O+ c,# 4y ir 6i F7 i\ ir 6 Fu7 \ '' gn Otring vo teit boi 6teit#7 teit#.v#lue #rrn#me img#.rilterO\.tr#nOition img#.rilterO\.#::ly67 img#.Orc #rrimgi img#.rilterO\.:l#y67 '' lg: < Bui OetTimeout 6Ohon67;F\\\7 'Ocri:t 'he#4

Tr#ng _ab

Gio Trnh Thit K Web

WWW.vietnoiviet.com

bo4y onlo#4Ohon67 img i4img# bor4er\ Orcv#n#.gir ni4th__\ height_F\ Otylerilter0reve#ltr#nO64ur#tionF7br in:ut i4teit# ty:eteit Otyleteit/lign0center color0nhite b#c*groun4 0 blue 'bo4y 'html Khi ch8Mng trnh thVc thi; hnh Oe th#y Ui ln l8Wt tH v#nb.gir O#ng v#nc.gir O#ng v#n#.gir r[i Bu#y v v#n#.gir = c2 ti: t)c nh8 th. JNi ln chuy?n hnh Oe *m theo hi<u 2ng tr#nOition *hc nh#u tH \ n Fu; O+ v t3n c,# hi<u 2ng Oe 8Mc hi<n trong teit boi.

Tr#ng _a`

Gio Trnh Thit K Web

WWW.vietnoiviet.com

MC LC
%~>lG (0 G(( T~(c ^ Wqp............................................................................._ (._. %% K~( l(J % pl0.............................................................................._ (.F. G(( T~(c K~( cT ^ Wqp.................................................................F (.u. TSG ~TJL0.......................................................................................................F (.G. %c Ts% % pl %S TsSlG Wqp0.......................................................u (.]. %% TSG ~TJL % pl 0..............................................................................u (.a. JT 1 T~S T% TslG %S 1 Tsl~ ockT..............................__ %~>lG ((0 1(-c L(-l KT/~l~ l~................................................................_u ((._. G(( T~(c 1(-c L(-l KT........................................................................._u ((.F. T 1(-c L(-l KT......................................................................................_u ((.u. ~l~ l~ Ts-l TsSlG Wqp0..................................................................._] %~>lG (((0 oSl~ 1%~....................................................................................._b (((._. oSl~ 1%~ K~lG % T~ T 6cnor4er LiOt /cL7............................_b (((.F. oSl~ 1%~ % T~ T 6r4erLiOt x L7.............................................._b (((.u. oSl~ 1%~ Zl~ lG~S0.......................................................................F\ %~>lG (^0 plG ^ Tsl~ pk TsSlG......................................................FF (^._. plG............................................................................................................FF (^.F. %% T~c% Tl~0.....................................................................................Fu (^.u. Tsl~ pk TsSlG...................................................................................Fa %~>lG ^0 KsSJq...............................................................................................F` ^._. K~( cT ^ KsSJq................................................................................F` ^.F. %%~ T JT KsSJq LSkcT.............................................................F` %~>lG ^(0 KsJ.................................................................................................ut ^(._. G(( T~(c KsJ......................................................................................ut ^(.F. %% &~l T %S KsJ0......................................................................ut %~>lG ^((0 %S1%So(lG 1TkLq 1~qqT/%11..................................................Gb ^((._. G(( T~(c..................................................................................................Gb ^((.F. %%~ T0..................................................................................................Gb ^((.u. Zl~ plG Jc %~ L& 6%LS1170....................................................]\ %~>lG ^(((0 G(( T~(c osqSJWqS^qs.......................................................]] ^(((._. G(( T~(c..................................................................................................]] ^(((.F. %( ZT.......................................................................................................]] ^(((.u. Jl ~l~ osqSJWqS^qs0..................................................................]] ^(((.G. K ~%~ T~(T K JT Wqp1(Tq.....................................................]t %~>lG (j0 Zl~ olG ^l pl/ 1 olG %11.......................................at (j._. Zl~ olG ^l pl..............................................................................at (j.F. 1P o)lG %11 6%S1%So(lG 1TkLq 1~qqT17........................................a` %~>lG j0 ~l~ l~ ^ L(-l KT TsSlG TslG osqSJWqS^qs. .tF j._. %~l ~l~ l~ ^ TsSlG Wqp0.........................................................tF j.F. L(-l KT TsSlG TslG osqSJWqS^qs0...........................................tt %~>lG j(0 plG ^ Tsl~ pk TsSlG......................................................ba j(._. TSpLq 0........................................................................................................ba j(.F. Tsl~ pk TsSlG 0.................................................................................bt j(.u. T SLpcJ LT TlG ~l~0...............................................................`G Tr#ng _t\

Gio Trnh Thit K Web

WWW.vietnoiviet.com

j(.G. TqJ&LSTq0..................................................................................................`] %~>lG j((0 pq~S^(s1 / KsJ.......................................................................`b j((._. pq~S^(s1.................................................................................................`b j((.F. KsJ0........................................................................................................._\F %~>lG j(((0 KsSJq1qT1 x K(J TsS ^ jcT pl................................___ j(((._. G(( T~(c................................................................................................___ j(((.F. %%~ T TsSlG K~clG ^ L(-l KT TsSlG............................__u j(((.u. K(J TsS ^ jcT pl......................................................................__a %~>lG j(^0 TlG cSl ^ S^S1%s(&T....................................................__b j(^._. G( T~(c ^ S^S1%s(&T0.............................................................__b j(^.F. p(l ^ o L(c TslG S^S1%s(&T.........................................._F_ %~>lG j^0 ~J TslG S^S1%s(&T.........................................................._F] j^._. Zl~ lG~S.............................................................................................._F] j^.F. %% ~J T~lG olG TslG S^S1%s(&T................................._Fa %~>lG j^(0 %% %c Ts% Z(c K(l........................................................_u\ j^(._. %c Ts% LS %~l0......................................................................._u\ j^(.F. %c Ts% L&0...................................................................................._uF %~>lG j^((0 J ~l~ Z( T>lG................................................................_ut j^((._. J ~l~ oJ 66oocument bect Jo4el7.........................................._ut j^((.F. %% Z( T>lG % 1l TslG S^S1s(&T..............................._G\ j^((.u. T~Sk Z( l( oclG ZlG Ts-l TsSlG...................................._au %~>lG j^(((0 ~(c lG K(LTqs ^ TsSl1(T(l......................................_t\ j^(((._. K(LTqs 0.................................................................................................._t\ j^(((.F. TsSl1(T(l 0........................................................................................_t]

Tr#ng _t_