Giaotrinhtkweb

Gio Trnh Thit K Web
CHNG I:
Khoa CNTT
GII THIU V WEB
I.1. CC KHI NIM C BN:

Internet l mt mng my tnh ton cu trong cc my truyn thng vi nhau theo
mt ngn ng chung l TCP/IP.
Intranet l mng cc b khng ni vo Internet v cch truyn thng ca chng
cng theo ngn ng chung l TCP/IP.
M hnh Client-Server: l m hnh khch-ch. Server cha ti nguyn dng chung
cho nhiu my khch(Client) nh cc tp tin, ti liu, my in u im ca m
hnh ny l tit kim v thi gian, ti chnh, d qun tr h thngCch hot ng
ca m hnh ny l my Server trang thi hot ng(24/24) v ch yu cu t pha
Client. Khi Client yu cu th my Server p ng yu cu .
Internet Server l cc Server cung cp cc dch v Internet(Web Server, Mail Server,
FTP Server)
Internet Service Provider(ISP): L ni cung cp cc dch v Internet cho khch hng.
Mi ISP c nhiu khch hng v c th c nhiu loi dch v Internet khc nhau.
Internet Protocol : Cc my s dng trong mng Internet lin lc vi nhau theo mt
tiu chun truyn thng gi l Internet Protocol (IP). IP Address-a ch IP: vic
trao i thng tin trong mng Internet thc hin c th mi my trong mng cn
phi nh danh phn bit vi cc my khc. Mi my tnh trong mng c nh
danh bng mt nhm cc s c gi l a ch IP. a ch IP gm 4 s thp phn c
gi t 0 n 255 v c phn cch nhau bi du chm. V d 192.168.0.1 a ch IP
ny c gi tr trong ton mng Internet. U ban phn phi a ch IP ca th gii s
phn chia cc nhm a ch IP cho cc quc gia khc nhau. Thng thng a ch IP
ca mt quc gia do cc c quan bu in qun l v phn phi li cho cc ISP. Mt
my tnh khi thm nhp vo mng Internet cn c mt a ch IP. a ch IP c th
cp tp thi hoc cp vnh vin. Thng thng cc my Client kt ni vo mng
Internet thng qua mt ISP bng ng in thoi. Khi kt ni, ISP s cp tm thi
mt IP cho my Client.
Phng thc truyn thng tin trong Internet: Khi mt my tnh c a ch IP l
x(my X) gi tin n my tnh c a ch IP l y (my Y) th phng thc truyn tin
c bn din ra nh sau: Nu my X v my Y cng nm trn mt mng con th thng
tin s c gi i trc tip. Cn my X v Y khng cng nm trong mng con th
thng tin s c chuyn ti mt my trung gian c ng thng vi cc mng khc
ri mi chuyn ti my Y. My trung gian ny gi l Gateway.
World Wide Web(WWW): l mt dch v ph bin nht hin nay trn Internet. Dch
v ny a ra cch truy xut cc ti liu ca cc my phc v d dng thng qua cc
giao tip ha. s dng dch v ny my Client cn c mt chng trnh gi l
Web Browser.
Web Browser(trnh duyt): l trnh duyt Web. Dng truy xut cc ti liu trn cc
Web Server. Cc trnh duyt hin nay l Internet Explorer, Nestcape
Home page: l trang web u tin trong web site
Hosting provider: l cng ty hoc t chc a cc trang ca chng ta ln web
Hyperlink : tn khc ca hypertextlink
Publish: lm cho trang web chy c trn mng
URL(Unioform resource locator): mt a ch ch n mt file c th trong ngun ti
nguyn mng.
Trang 1
Gio Trnh Thit K Web
Khoa CNTT
Mi ngun trn web c duy nht mt a ch rt kh nh. V vy, ngi ta s

dng URL l mt chui cung cp a ch Internet ca mt web site hoc
ngun trn World Wide Web. nh dng c trng l:
www.nameofsite.typeofsite.countrycode
V d:
207.46.130.149 c biu din trong URL l www.microsoft.com
URL cng nhn bit giao thc ca site hoc ngun c truy cp. Giao thc
thng thng nht l http, mt vi dng URL khc l gopher, cung cp
a ch Internet ca mt th mc Gopher, v ftp, cung cp v tr mng ca
ngun FTP.
C hai dng URL:
URL tuyt i l a ch Internet y ca mt trang hoc file, bao
gm giao thc, v tr mng, ng dn tu chn v tn file.
V d, http:// www.microsoft.com/ms.htm.
URL tng i - m t ngn gn a ch tp tin kt ni c cng ng
dn vi tp tin hin hnh, URL tng i n gin bao gm tn v phn
m rng ca tp tin.
V d: index.html
Web server l mt chng trnh p ng li cc yu cu truy xut ti nguyn t trnh
duyt.
I.2. GII THIU KHI QUT V WEB

Web l mt ng dng chy trn mng(Client-Server), c chia s khp ton cu.
Trang web l mt file vn bn cha nhng tag HTML hoc nhng an m c bit
m trnh duyt web (Web browser) c th hiu v thng dch c, file c lu vi
phn m rng l .html hoc htm.
HTML (HyperText Markup Language), gm cc on m chun c quy c
thit k Web v c hin th bi trnh duyt Web (Web Browser)
Hypertext (Hypertext link), l mt t hay mt cm t c bit dng to
lin kt gia cc trang web
Markup: l cch nh dng vn bn trnh duyt hiu v thng dch c.
Language: y khng l ngn ng lp trnh, m ch l tp nh nhng quy lut
nh dng vn bn trn trang web.
Trnh son tho trang web :C th son tho web trn bt k trnh son tho vn bn
no. Cc trnh son tho ph bin hin nay l: Notepad, FrontPage hoc
Dreamweaver.
I.3. TAG HTML:

Tag HTML l nhng cu lnh nm gia cp tag < v >, dng nh dng cc vn
bn trn trang web. Dng chung ca mt tag HTML l:
<tagName ListProperties> Object </tagName>
Trong :
TagName : l tn mt tag HTML, vit lin vi du < , khng c khong trng
Object : l i tng cn nh dng trong trang Web
ListPropeties l danh sch thuc tnh ca Tag, l nhng c im b sung vo cho
mt tag, th t cc thuc tnh trong mt tag l tu . Nu c t 2 thuc tnh tr ln
th mi thuc tnh cch nhau bi khong trng.
<TagName property1=value1 property2=value2>Object</TagName>
Gi tr ca thuc tnh c t trong nhy n hoc nhy i .(c th b qua)
Trang 2
Gio Trnh Thit K Web
Khoa CNTT
<TagName>: gi l tag m
</TagName>: gi l tag ng. Thng thng th cc tag u c tag ng. Tuy
nhin c mt s tag khng c tag ng
V d :<body BGCOLOR=RED>ni dung </body>
TagName(m)
Properties
TagName(ng)
C th c nhiu tag lng vo nhau, theo nguyn tc tag no m trc th tag

ng sau
V d:
<Tag1><Tag2>Object</Tag2></Tag1>
<B>Object1<I>Object2 </I></B>
Trong trang HTML, nu mt tag b sai th ni dung bn trong Tag khng hin
th trn trnh duyt
I.4. CU TRC C BN CA TRANG WEB:

1. Cu trc trang web
Phn u(<Head></Head>): l phn cha thng tin ca trang Web.

Phn thn (<Body></Body>): l phn cha ni dung ca trang Web.
Phn u v phn thn c t trong cp tag <HTML></HTML>
<HTML>
<HEAD>
Ni dung thng tin ca trang web
</HEAD>
<BODY>
Ni dung hin th trn trnh duyt
</BODY>
</HTML>
2. Hin th trang web:
Khi ng trnh duyt Internet Explorer

Chn menu file,open, dng browse tm tp tin html mi to
Hoc double click vo tn tp tin .htm
I.5. CC TAG HTML C BN :

I.5.1.
<Title> : Hin th ni dung tiu ca trang web trn thanh
tiu ca trnh duyt.
Cp tag <Title> c t trong phn <Head> ca trang HTML
C php:
<TITLE> Ni dung tiu </TITLE>
I.5.2.
<Hn>: To header, gm 6 cp header, c t trong phn
BODY
C php:
<Hn ALIGN= Direction> Ni dung ca Header </Hn>
Trong :
Direction: gm cc gi tr left, right, center, dng canh l cho header, mc nh
l canh tri
Trang 3
Gio Trnh Thit K Web
Khoa CNTT
V d:
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
I.5.3.
<P> :
Dng ngt on v bt u on mi
C php:
<P ALIGN = Direction> Ni dung ca on </P>
Tag </P> khng bt buc.
Tag <P> k tip s t ng bt u mt on mi.
I.5.4.
<BR>:
Ngt dng ti v tr ca ca tag.

V d:
<P>
Mary had a little lamb <br>
Its fleece was white as snow<br>
Everywhere that Mary went <br>
She was followed by a little lamb<br>
</p>
I.5.5.
<HR>:
Dng k ng ngang trang, khng c tag ng

C php:
<HR Align=directtion Width= Value Size=value color=#rrggbb>
Trong :
Direction: gm cc gi tr left, right, center
Width: di ng k, tnh bng Pixel hoc %
Size: dy ca ng k, tnh bng pixel
Color: mu ng k, c th dng tn mu hoc dng m #rrggbb
V d:
<HTML>
<HEAD><TITLE>Welcome to HTML </TITLE></HEAD>
<BODY>
<H3> My first HTML document</H3>
<HR size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80%>
<P> This is going to be real fun
</BODY>
</HTML>
Trang 4
Gio Trnh Thit K Web
I.5.6.
Khoa CNTT
<FONT>:
Dng nh dng font ch

nh dng Font ch cho c ti liu th t tag <Font> trong phn <Body>
nh dng tng phn hoc tng t th t ti v tr mun nh dng
C php:
<FONT Face=fontName1, fontName2, fontName3 size=value Color=rrggbb>
Ni dung hin th
</FONT>
V d:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>
My first HTML document </FONT>
<P> This is <FONT COLOR=BLUE SIZE = 6>going
</FONT> to be real fun
</BODY>
</HTML>
I.5.7.
<BODY > :
Cha ni dung ca trang web

C php:
<BODY>
Ni dung chnh ca trang web
</BODY>
Cc thuc tnh ca <Body>
BgColor: thit lp mu nn ca trang
Text: thit lp mu ch
Link: mu ca siu lin kt
Vlink: mu ca siu lin kt xem qua
Background: dng load mt hnh lm nn cho trang
LeftMargin: Canh l tri
TopMargin: Canh l trn ca trang
V d:
<HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY BGCOLOR=#0000FF text=yellow>
<FONT COLOR = LIMEGRREN>Welcome to HTML</FONT>
</BODY>
</HTML>
Mu sc: Internet Explorer c th xc lp 16 mu theo tn nh sau:
Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive,
Yellow, Navy, Blue, Teal, Aqua.
Mt s m thp lc phn ca mu :#RRGGBB
Trang 5
Gio Trnh Thit K Web
Khoa CNTT
M thp lc phn
#FF0000
#00FF00
#0000FF
#000000
#FFFFFF
I.5.8.
Mu
RED
GREEN
BLUE
BLACK
WHITE
<IMG> :
Dng chn mt hnh nh vo trang Web

C php:
<Img src=URL alt=Text width=value height=value border=value>
o Src: xc nh ng dn tp tin cn load, s dng ng dn tng i
<Img src=../images/h1.gif> .
o Alt: cha ni dung vn bn thay th cho hnh nh khi hnh khng load v
c, nu load v c th s xut hin ni dung trong textbox mi khi
ngi dng a chut ti hnh.
o Width, Height: dng xc nh ch phng to thu nh hnh nh.
o Align = left/ right/top/bottom: so hng gia hnh nh v text
I.5.9.
<BgSound> :
Dng chn mt m thanh vo trangWeb. m thanh ny s c pht mi khi

ngi s dng m trang Web.
C php:
<BgSound src=filenhac Loop=value>
o Src cha a ch file nhc, file ny c phn m rng .mp3 , mdi,
o Loop xc nh ch lp i lp li ca bi ht, nu value< 0 th lp v
hn, value=n th lp li n ln ri t ng tt.
I.5.10.
<EMBED>:
Cho php a m thanh trc tip vo trang WEB.

C php:
<EMBED SRC="URL" >
V d:
<EMBED SRC="clouds.mid" WIDTH="145" HEIGHT="61">
I.5.11.
<Marquee></Marquee> :
Dng iu khin i tng chy mt cch t ng trn trang Web

C php:
<Marquee >Object</Marquee>
Cc thuc tnh ca Marquee :
o Direction =up/ down / left / right dng iu khin hng chy.
o Behavior=alternate: i tng chy t l ny sang l kia v ngc li.
V d:
<Marquee direction=up>i tng chy ln </Marquee>
Trang 6
Gio Trnh Thit K Web
Khoa CNTT
I.5.12.
: Ni dung trong cp tag ny khng hin th
trong trang
C php: <! -- Ni dung li ch thch -->
I.5.13.
<B>: nh dng ch m
C php
<B> Ni dung ch m</B>
V d:
<P><B> This is good fun</B></P>
I.5.14.
Tag <I>: nh dng ch nghing
C php:
<I> Ni dung ch nghing</I>
I.5.15.
Tag <U>: Gch chn vn bn
C php:
<U> Ni dung ch gch chn</U>
V d:
nh dng khi vn bn va m, nghing v gch chn
<B><I><U> Trng HCN TP HCM</U></I></B>
I.5.16.
Tag <BIG> v <SMALL>:
Chnh c ch to hoc nh hn c ch xung quanh

C php
<BIG>Ni dung ch to </BIG>
<SMALL>Ni dung ch nh </SMALL>
I.5.17.
Tag <SUP> v <SUB> :
a ch ln cao hoc xung thp so vi vn bn bnh thng

C php:
<SUP>Ni dung ch da ln cao </SUP>
<SUB>Ni dung ch a xung thp </SUB>
V d:
a<SUP>2</SUP>
H<SUB>2</SUB>O
I.5.18.
<STRIKE>:
Gch ngang vn bn
C php:
<STRIKE>Ni dung vn bn b gch ngang </STRIKE>
I.5.19.
<CODE></CODE>:
Dng nhp mt dng m c nh dng k t ring. Dng m ny khng c

thc hin m c hin th di dng vn bn bnh thng
C php:
<CODE>
Ni dung vn bn mun nh dng
</CODE>
Trang 7
Gio Trnh Thit K Web
Khoa CNTT
V d:
<CODE>
If (x > 0) <br>
x = x + 1<br>
else <br>
y=y+1
</CODE>
I.5.20.
<EM>: Vn bn c nhn mnh (ging tag <I>)
C php:
<EM>Vn bn c nhn mnh</EM>
I.5.21.
<STRONG>: nh dng ch m (ging <B>)
C php:
<STRONG>Vn bn c nhn mnh</STRONG>

I.5.22.
<BLOCKQUOTE>:
Dng phn cch mt khi vn bn nhn mnh, on vn bn ny c tch ra

thnh mt paragraph ring, thm khong trng trn v di on ng thi tht vo
so vi l tri (tng ng chc nng ca phm tab)
C php:
<BLOCKQUOTE>
Ni dung khi vn bn nhn mnh
</BLOCKQUOTE>
V d:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE><HEAD>
<BODY>
<BLOCKQUOTE><FONT color = hotpink>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the Kings horses
And all the Kings men
Could not put Humpty Dumty together again
</FONT>
</BLOCKQUOTE>
</BODY>
</HTML>
I.5.23.
<PRE>:
Gi nguyn cc nh dng nh: ngt dng, khong cch, thch hp vi vic to

bng
C php:
<PRE>
Ni dung vn bn cn nh dng trc vi tt c nh dng khong cch,
xung dng v ngt hng
</PRE>
Trang 8
Gio Trnh Thit K Web
Khoa CNTT
V d:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE><HEAD>
<BODY>
<PRE>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the Kings horses
And all the Kings men
Could not put Humpty Dumty together again
</PRE>
</BODY>
</HTML>
I.5.24.
<DIV> <SPAN>:
Chia vn bn thnh cc khi, c chung mt nh dng

<DIV> chia vn bn thnh mt khi bt u t mt dng mi.
<SPAN> tch khi nhng khng bt u t mt dng mi
C php:
<DIV>Ni dung ca khi bt u t mt dng mi </DIV>
<SPAN>Ni dung ca khi trong 1 dng </SPAN>
V d:
<HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY>
<DIV>Division 1
<P> The DIV element is used to group elements.
<P>Typically, DIV is used for block level elements
</DIV>
<DIV align = right>
<FONT size = 4 color = hotpink face = Arial>Division 2
<P>This is a second division<Br>
<H2>Are you having fun?</H2>
</FONT>
</DIV>
<P> The second division is right aligned.
<SPAN STYLE = FONT-SIZE:25; Color:BLUE>Common formatting
</SPAN> is applied to all the elements in the division
</BODY>
Trang 9
Gio Trnh Thit K Web
Khoa CNTT
</HTML>
I.5.25.
Cc k t c bit:
a. Ln hn (>): >
V d:
<CODE>
If A > B
Then <BR>
A= A+ 1
</CODE>
b. Nh hn (<): <
V d:
<CODE>
If A < B
Then <BR>
A= A+ 1
</CODE>
c. Cp nhy: "
V d:
<BODY>
" To be or not to be? " That is the question
</BODY>
d. K t v &: &
V d:
<P> William & Graham went to the fair
e. K t khong trng:
I.6. MT S THAO TC TRONG CA S TRNH DUYT
Cch load li trang Web: Click biu tng Refresh (F5) trn thanh cng c.
Chnh sa size ch hin th trn trang: Chn Menu View->Text size
Chnh li font ch: Chn Menu View->EnCoding
Trong trng hp trang Web khng hin th c Font ting Vit:
Chn menu Tool chn Internet Options->Chn Tab Fonts chn Font ting Vit
Nu chn ri m khng hin th c font ting Vit th chn Menu
View>EnCodingchn cc font nh User defined,Vietnamese.
Cc tu chn khc cho trang Web: Tools Internet option: Khng Load hnh xung,
nh dng lin kt,
Chn trang web mc nh khi m trnh duyt
Trang 10
Gio Trnh Thit K Web
Khoa CNTT
Hnh 1
Hnh 2
Trang 11
Gio Trnh Thit K Web
Khoa CNTT
Tab General(Hnh 1): thit lp cc ty chn cho trnh duyt

Click nt Use Current: chn trang hin ti load ln mi ln khi ng IE
Use Default: a ch trang Web mc nh mi khi m trnh duyt
V d mi khi m IE th t ng hin th trang Web Yahoo trong Address
nhp: http://yahoo.com , nu chn Use Blank th hin th trang trng .
History: lu li cc trang web duyt qua ti my Client v thng tin ng
nhp ca user hin hnh
Nu khng mun lu li: Chn Delete Cookies v Delete Files.
C th thit lp khong thi gian lu tr trang trong i tng History
bng cch thay i gi tr trong Days to keep pages in history .
Nu mun xo i tng ny th nhn Clear history.
Tab Advance(Hnh 2): c th chn cc ty chn khc nh:
Ngn chn khng cho ti hnh xung trang web
Mu lin kt, cch th hin lin kt trn trang
Copy hnh nh t trang Web: Click phi vo hnh nh cn sao chp ri
chn Save picture as, hoc Save background as,
Load v trang Web bao gm cc hiu ng, script, hnh nh cha trn
trang: Chn Menu File Save As Chn v tr lu file Save.
Hiu chnh trang Web: View source->hiu chnhchn File Save lu
li F5 cp nht li ni dung va hiu chnh
Trang 12
Gio Trnh Thit K Web
Khoa CNTT
SIU LIN KT-HNH NH
CHNG II:
II.1. GII THIU SIU LIN KT
II.1.1.
Siu lin kt:
Kh nng chnh ca HTML l h tr cc siu lin kt. Mt siu lin kt cho php ngi truy
cp c th i t trang web ny n trang web khc. Mt lin kt gm 3 phn:
Ngun: cha ni dung hin th khi ngi dng truy cp n, c th l mt trang web
khc, mt on film, mt hnh nh hoc mt hp thoi gi mail
Nhn: c th l dng vn bn hoc hnh nh ngi dng click vo khi mun truy cp
n lin kt, nu nhn l vn bn th thng c gch di
ch n (target): xc nh v tr ngun hin th.
II.1.2.
Cc loi lin kt
Internal Hyperlink:(Lin kt trong) l cc lin kt vi cc phn trong cng mt ti liu

hoc lin kt cc trang trong cng mt web site.
External Hyperlink (Lin kt ngoi) l cc lin kt vi cc trang trn web site khc.
II.2. TO SIU LIN KT

C php:
<A HREF=URL> Nhn </A>
Dng URL tng i lin kt n cc trang trong cng mt website
V d:
<HTML>
<HEAD> <TITLE> Using links</TITLE></HEAD>
<BODY>
<A HREF = Doc2.htm>Click here to view document 2</A>
</BODY>
</HTML>
Dng URL tuyt i lin kt n cc trang trong website khc

V d:
<A href="http://www.google.com"> lin kt n Google</A>
II.2.1.
Lin kt vi cc phn trong cng mt trang web
Nu ni dung ca trang qu di th nn to cc Bookmark nhy n mt phn c

th no trn chnh trang web hin hnh.
Cch to lin kt n cc phn trong cng trang: gm 2 bc
Trang 13
Gio Trnh Thit K Web
Khoa CNTT
To BookMark:
<A name=tn Bookmark> Nhn </A> Ni dung
To lin kt n Bookmark:
<A Href =#tn Bookmark>Nhn ca text lin kt</A>
V d :
<HTML>
<HEAD><TITLE> Using htm links</TITLE> </HEAD>
<BODY>
<A HREF = #Internet>Internet</A><BR>
<A HREF = #HTML>Introduction to HTML</A><BR>
<A name = Internet>Internet</A>
Internet l mt mng ca cc mng. Ngha l, cc mng my tnh
c lin kt vi cc mng khc, ni cc nc v ngy nay l ton
cu. Giao thc truyn thng l TCP/IP cung cp lin kt vi tt c
cc my tnh trn th gii
<A name = HTML>Introduction to HTML</A><BR>
Ngn ng nh du siu vn bn l ngn ng chun m web s
dng to v nhn ra ti liu. Mc d khng phi l mt tp con
ca ngn ng nng cp tiu chun tng qut (SGML), ngn ng
nh du siu vn bn cng c lin quan vi SGML. SGML l mt
phng php trnh by cc ngn ng nh dng ti liu. HTML l
ngn ng nh du c s dng to ti liu HTML. Cc hng
dn ch r mt trang web nn c hin th nh th no trong trnh
duyt
</BODY>
</HTML> Kt qu trn trnh duyt
Trang 14
Gio Trnh Thit K Web

II.2.2.
Khoa CNTT
Lin kt vi mt Bookmark mt ti liu khc
C php:
<A href=http://www.site.com/path/Page.htm#tn Bookmark>
V d:
Trang main.htm
<HTML>
<HEAD><TITLE> Main document</TITLE></HEAD>
<BODY>
<A HREF = C:\Doc1.htm#Internet>Internet</A><br>
<A HREF = C:\Doc1.htm#HTML>Introduction to
HTML</A><br>
</BODY>
</HTML>
Trang Doc1.htm
<HTML>
<HEAD><TITLE>Using Links</TITLE></HEAD>
<BODY>
<A name = Internet>Internet</A><BR>
Internet l mt mng ca cc mng. Ngha l, mng my tnh c
lin kt vi cc mng khc, ni vi cc nc v ngy nay l ton
cu. Giao thc truyn TCP/IP cung cp lin kt vi tt c cc my
tnh trn th gii.
<A name = HTML>Introduction to HTML</A><BR>
Ngn ng nh du siu vn bn l ngn ng chun m web s
dng to v nhn ra ti liu. Mc d khng phi l mt tp con
ca ngn ng nng cp tiu chun tng qut (SGML), ngn ng
nh du siu vn bn cng c lin quan vi SGML. SGML l mt
phng php trnh by cc ngn ng nh dng ti liu. HTML l
ngn ng nh du c s dng to ti liu HTML.
</BODY>
</HTML>
II.2.3.
Lin kt n hp th e-mail
C php:
<A href=mailto:a ch Email>Nhn</A>
Nu siu lin kt t cui trang th dng tag <ADDRESS>
C php:
<Address><A href=mailto:a ch Email>Nhn</A></Address>
II.3.HNH NH TRN TRANG WEB:

II.3.1.
a)
b)
Cc loi nh :
nh .Gif (Graphics Interchange Format): c s dng ph bin nht trong cc ti

liu HTML, d chuyn ti, ngay c cc kt ni s dng MODEM tc chm, h
tr 256 mu GIF. Cc file GIF c nh dng khng ph thuc phn nn
nh JPEG (Joint PhotoGraphic Expert Group) c phn m rng .JPG, l loi nh
nn mt thng tin, ngha l nh sau khi b nn khng ging nh nh gc. Tuy nhin,
trong qu trnh pht li th nh cng tt gn nh nh gc. JPEG h tr hn 16 triu
mu v thng c s dng cho cc nh c mu thc.
Trang 15
Gio Trnh Thit K Web

c)
Khoa CNTT
nh PNG (Portable Network Graphics) nn khng mt d liu

II.3.2.
Chn hnh nh
C php:
<IMG Src=URL Border=n Alt=Ni dung thay th>
URL: a ch ca tp tin hnh nh, thng s dng a ch tng i, v d:
<img src=../image/hinh.gif> khng ph thuc v tr ca tp tin nh trn a
n: dy ca ng vin, tnh bng pixel
Alt: Ni dung thay th s hin th khi hnh khng load c, hoc khi a chut ngang
qua hnh
II.3.3.
a)
Cc thuc tnh ca nh:
Dn vn bn quanh hnh nh:

<IMG SRC=URL Align= left> Ni dung vn bn quanh hnh nh
<IMG SRC=URL Align= Right> Ni dung vn bn quanh hnh nh
V d:
b)
c)
Kch thc nh:

<IMG width=Value Height=Value>
V d:
<html>
<head><title>Image</title></head>
<body>
<img src="../image/Blue%20hills.jpg" width="150"
height="150">
</body>
</html>
Chn vn bn bao quanh hnh:
Canh l khi dn vn bn xung quanh mt nh s tc ng n tt c cc vn bn sau
nu khng chn vo mt dng k c bit. Thuc tnh CLEAR trong tag BR lm
cho vn bn khng bt u nu l c th khng b xa i (ngha l ti cnh di ca
nh)
C php:
<BR CLEAR=Right> : Ngn chn vn bn dn bn l phi ca nh
<BR CLEAR=Left> : Ngn chn vn bn dn bn l tri ca nh
<BR CLEAR=All> : Ngn chn vn bn dn hai bn l ca nh
Trang 16
Gio Trnh Thit K Web

d)
Khoa CNTT
Thm khong trng xung quanh nh

Nu khng mun vn bn dn xung quanh l tri ca nh th ta c th thm khong
trng xung quanh nh
C php:
<IMG SRC=URL HSPACE=n VSPACE=m>
e)
HSPACE=n: Khong trng c tnh bng pixel s thm vo c bn phi v bn

tri ca nh
VSPACE=m: Khong trng c tnh bng pixel s thm vo c bn trn v bn
di ca nh
Canh l cho nh: C th canh l cho nh so vi mt dng vn bn trong mt an
C php:
<IMG SRC=URL ALIGN= Direction>Vn bn mun canh l so vi nh
Direction: gm cc gi tr: top, bottom, middle, texttop
V d:
II.3.4.
Dng nh lm lin kt:
C th dng hnh nh to mt lin kt n mt trang khc, hoc nu c mt nh ln,

bn c th to nh nh hn hoc mt biu tng cho n n c th hin th nhanh
chng trn trang web, sau to lin kt a ngi truy cp n nh c kch thc
tht
C php:
<A HREF=a ch trang lin kt>
<IMG SRC=URL Alt=ni dung thay th>Nhn
</A>
II.3.5.
Bn nh:
Bn nh l mt nh trong trang web c chia ra lm nhiu vng, mi vng khi click

vo s lin kt n mt a ch URL
Cch to:Trc ht phi chn vo trang mt nh v t nhn cho nh
<IMG UseMap=Label>
<Map Name=Label>
<Area Shape= type coords=x1,y1,x2,y2, href=URL>
</Map>
Trang 17
Gio Trnh Thit K Web
Khoa CNTT
Trong :
- Label: tn ca bn nh
- Type: hnh dng ca cc vng trn nh, gm cc loi:
Rect: Vng hnh ch nht
Circle: Vng hnh trn
Poly: Vng hnh a gic
- Coords:to cc nhca hnh
Rect: (x1, y1, x2, y2) l to 2 nh cho ca vng hnh CN
Circle: (x, y, r) ln lt l to tm v bn knh ca vng hnh trn
Poly: (x1, y1, x2, y2, x3, y3, ) l cc nh ca vng hnh a gic
y
1
y
2
x
1
V d:
x
<html>
2
<head>
<title>Image</title>
</head>
<body>
<img src="../image/Blue%20hills.jpg" width="150" height="150" border="0"
usemap="#Map1">
<map name="Map1">
<area shape="rect" coords="73,3,149,66" href="B1.htm">
<area shape="poly" coords="152,81,71,75,62,109,97,123" href="B3.htm">
<area shape="circle" coords="37,32,27" href="b2.htm">
</map>
</body>
</html>
II.3.6.
Hnh nn :
Trong hu ht cc trang web thng s dng nn mu, vi mc ch l lm ni bt ni

dung trang . Tuy nhin cng c th s dng hnh nh lm nn bng thuc tnh
BACKGROUND ca th BODY.
<BODY BACKGROUND= bgimage.gif>
Trang 18
Gio Trnh Thit K Web
CHNG III:
III.1.
Khoa CNTT
DANH SCH
DANH SCH KHNG C TH T (Unorder List -UL)
C php:
<UL Type= Shape1>
<LI Type= Shape 2> Ni dung 1
<LI Type= Shape 2> Ni dung 2
</UL>
Shape 1, Shape 2 l loi bullet t ng t u dng trong danh sch
Shape 1: nh hng n ton danh sch
Shape 2: nh hng n mt mc trong danh sch
Cc loi shape:
o Circle: Bullet trn, rng
o Square: Bullet vung
o Disc: Bullet trn khng rng
V d:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY>
<UL type=Square>
<LI>Monday
<UL>
<LI>Introduction to HTML
<LI>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI>Creating Tables
<LI>Inserting Images
</UL>
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
III.2.
DANH SCH C TH T (OrderList OL)
C php:
<OL Type=x Start =n >
<LI Type =x1 Value=m> Ni dung 1
<LI Type =x1 Value=m> Ni dung 2
</OL>
Trang 19
Gio Trnh Thit K Web
Khoa CNTT
x: loi k t mun s dng trong danh sch gm :

A: Ch hoa
a: Ch thng
I: S la m hoa
i: S la m thng
1: Cho s mc nh
n: gi tr u tin ca danh sch
x1: l loi k t s dng cho dng ny v dng tip theo, lm mt nh hng ca x
m: gi tr u tin ca dng ny, lm thay i gi tr ca n
V d 1:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY>
<OL>
<LI>Monday
<OL>
<LI TYPE = i>Introduction to HTML
<LI TYPE = i>Creating Lists
</OL>
<LI>Tuesday
<OL>
<LI TYPE = A>Creating Tables
<LI TYPE = A>Inserting Images
</OL>
<LI>Wednesday
<OL START = 5>
<LI >Creating Forms
<LI >Working with Frames
</OL>
<LI>Thursday
<LI>Friday
</OL>
</BODY>
<HTML>
V d 2: C th lng 2 loi danh sch c th t v khng c th t vo nhau
<HTML>
<HEAD><TITLE>Learning HTML</TITLE></HEAD>
<BODY>
<OL>
<LI>Monday
<UL>
<LI >Introduction to HTML
<LI >Creating Lists
</UL>
<LI>Tuesday
<UL type=Disc>
<LI >Creating Tables
<LI >Inserting Images
</UL>
Trang 20
Gio Trnh Thit K Web
Khoa CNTT
<LI>Wednesday
<UL type=cycle>
<LI >Creating Forms
<LI >Working with Frames
</UL>
<LI>Thursday
<LI>Friday
</OL>
</BODY>
<HTML>
III.3.
DANH SCH NH NGHA:
Trong HTML c mt tag c bit dng to danh sch nh ngha dnh ring cho vic tra
cu, nhng cng thch hp cho danh sch no ni mt t vi mt din gii di.
C php:
<DL>
<DT>Nhp t mun nh ngha
<DD>Nhp ni dung nh ngha
</DL>
V d:
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<h2> Definition List</h2>
<DL>
<DT>Pixel
<DD> Short for picture element. A pixel refers to the small dots that
make up an image on the screen. Pixel depth refers to the number of
colours which may be displayed.
<DT>Resolution
<DD>The quality of the display on a monitor. The higher the
resolution, the sharper the image. The number of pixels that can be
displayed on a screen defines resolution.
<DT>Scanner
<DD> A hardware device that allows the user to make electronic
copies of graphics or text.
</DL>
</BODY>
</HTML>
Trang 21
Gio Trnh Thit K Web
Khoa CNTT
Trang 22
Gio Trnh Thit K Web
CHNG IV:
IV.1.
Khoa CNTT
BNG V TRNH BY TRANG
BNG
Bng thng c s dng to cc vn bn nhiu ct hoc phn chia trang thnh nhiu
vng khc nhau rt tin li trong thit k v trnh by trang web
C php:
<TABLE >
<TR>
Ct 1
<TD>Ni dung trong 1</TD>
Ct 2
Dng 1
<TD>Ni dung trong n</TD>

</TR>
<TR>
Dng 2
<TD>Ni dung trong n</TD>

</TR>
</TABLE>
Tag <table> </table> : ch th mt bng
Tag <tr></tr> : xc nh mt dng ca bng
Tag <td></td>: xc nh mt cha d liu ca bng. D liu trong c th l
vn bn hoc hnh nh
V d 1:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY >
<table border="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
Trang 23
Gio Trnh Thit K Web
Khoa CNTT
V d 2:
<HTML>
<HEAD>
</HEAD>
<BODY >
<table border="1">
<TR>
<TD>Cell 1</TD>
</TR>
<TR>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
V d 3:
<HTML>
<HEAD>
</HEAD>
<BODY >
<table border="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
IV.2.
CC THUC TNH:
IV.2.1.
f)
Thuc tnh ca bng
Thm khung vin:

<Table Border =n><Table>
n: dy ca khung vin tnh bng Pixel
g)
nh mu ca khung vin v mu nn:
Trang 24
Gio Trnh Thit K Web
Khoa CNTT
<Table BorderColor= Color BgColor=Color></Table>
h)
To bng :
<Table BorderColorDark= Color> : Bng cnh di v phi ca bng
<Table BorderColorLight= Color> : Bng cnh trn tri ca bng
i)
nh chiu rng v chiu cao ca bng:

<Table Width =n height=m>, n l chiu rng tnh bng Pixel
j)
Canh l bng:
<Table Align= left/ right/ center></table>
k)
Thuc tnh Cellpadding v CellSpacing:

<Table CellSpacing =value>: Khong cch gia ng vin ca cc
<Table CellPadding=Value>: Khong cch gia ng vin ca vi vn bn
l)
Tag tiu ca Table:

<Caption> tiu </Caption>
- Tag <Caption> nm trong cp Tag <Table></Table>
IV.2.2.
a)
Thuc tnh ca ct
Canh l theo chiu ngang:

<Td Align=left/ right/center></Td>
b)
Canh l theo chiu ng:

<Td Valign= Top/ Bottom/ Middle></Td>
c)
Trn :
<Td Colspan=n>: trn n ct
<Td RowSpan=n>: trn n dng
d)
Tag <th>:
C tc dng nh <td> nhng lm cho d liu trong c in m v canh gia
<tr>
<th> Ni dung </th>
</tr>
V d:
<TABLE border=2>
<tr>
<th> Cell 1 </th>
</tr>
<tr>
<th> Cell 2 </th>
</tr>
<TABLE>
V d:
<HTML>
Trang 25
Gio Trnh Thit K Web
Khoa CNTT
<HEAD>
</HEAD>
<BODY >
<table border="5" CellSpacing =10 BorderColorDark=red width=50%>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
V d:
<Table border="1" bgcolor= fuschia bordercolor=red align=center Width=50%
Height=30%>
<caption> Properties of Table</caption>
<tr>
<th colspan="3"> Colspan</th>
</tr>
<tr>
<th Rowspan=2> Rowspan</th>
<td align=center>Cell 1</td>
<td align=center>Cell 2</td>
</tr>
<tr>
<td align=center> Cell 3</td>
<td align=center> Cell 4</td>
</tr>
</table>
V d: Thit k mt trang web nh mu
<html>
<head>
Trang 26
Gio Trnh Thit K Web
Khoa CNTT
<title> Trinh bay trang</title>

</head>
<body>
<Table width="68%" height="135" border="1" cellspacing="0"
bordercolor="#990033">
<tr>
<th colspan="2" bgcolor="#FFCCFF">
<div align="center">Computer Model </div>
</th>
</tr>
<tr>
<td width="24%" height="98" valign="top">
<table width="100%" border="1" cellspacing="0">
<tr>
<td>Tin tuc</td>
</tr>
<tr>
<td>Giai tri</td>
</tr>
<tr>
<td>Quang cao</td>
</tr>
<tr>
<td height="23">The thao</td>
</tr>
</table>
</td>
<td width="76%" align="center">
<img src="../images/h2.jpg" width="106" height="92">
</td>
</tr>
</table>
</body>
</html>
IV.3.
TRNH BY TRANG
Trong thc t, bng thng c s dng trnh by b cc cho ton b trang web. Nu
mun thit k mt trang th hin vn bn trong ct dng bo ch hoc phn trang thnh
nhng vng c ch khc nhau, th bng l mt cng c cn thit. Mt trong nhng nt
c trng hu dng ca bng l trong mi table cell bn c th s dng bt k tag
HTML no, v d bn c th chn mt tag <H1> trong mt cell hoc mt danh sch c th
t cc mc hoc c th chn mt bng con trong mt bng khc
V d :
Cn thit k trang web gm nhiu vng vi nhng ch khc nhau nh hnh
di y, th bng l cng c hu hiu
Trang 27
Gio Trnh Thit K Web
Khoa CNTT
Bc 1: To mt table th nht gm 1 dng v 2 ct

<table>
<tr>
<td>

</td>
<td>

</td>
</tr>
<tr>
<td rowspan =2>

<FRAME SRC="Logo.htm" marginheight=1 noresize scrolling=NO
name=Topframe>

<FRAMESET COLS="140,*">

<FRAME SRC="Photos.htm" NAME=Leftframe>

<FRAME SRC="Bester.htm" NAME=Mainframe>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
Logo.ht
m
leftfram
e
Photo.
htm
Bester.htm
DuMont.ht
m
Jacobs.ht
m
topfram
e
mainfra
me
Trong cc trang Logo.htm, Photos.htm, Bester.htm phi c to trc

Photos.htm
<HTML>
<HEAD><TITLE>Staff hypertext links</TITLE>
<BASE TARGET=Mainframe>
</HEAD>
<BODY>
<CENTER>
<A HREF="Bester.htm"><IMG SRC="Bester.jpg" width=75 height=101> <BR>
Jeff Bester</A><BR><BR>
<A HREF="DuMont.htm"><IMG SRC="DuMont.jpg" width=75 height=101>
<BR> Brian DuMont</A><BR><BR>
<A HREF="Jacobs.htm"><IMG SRC="Jacobs.jpg" width=75 height=101><BR>
Dennis Jacobs</A><BR><BR>
</CENTER>
</BODY>
</HTML>
Trang 33
Gio Trnh Thit K Web
Khoa CNTT
Trang Photos.htm
Bester.htm
<HTML>
<HEAD><TITLE>Jeff Bester</TITLE></HEAD>
<BODY>
<IMG SRC="Bester2.jpg" WIDTH=90 HEIGHT=125 ALIGN=LEFT>
<FONT SIZE=2>
<TABLE>
<TR>
<TD VALIGN=TOP><B>Name:</B></TD>
<TD VALIGN=TOP>Jeff Bester</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>Age:</B></TD>
<TD VALIGN=TOP>37</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>Experience:</B></TD>
<TD VALIGN=TOP>Twelve years climbing. Three years with The Colorado
Experience</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>EMT:</B></TD>
<TD VALIGN=TOP>Yes</TD>
</TR>
</TABLE><BR CLEAR=LEFT>
Jeff has led routes in Yosemite, Eldorado, Mount Ranier and Rocky
Mountain National Park. He has participated in expeditions in Denali,
Mexico and Nepal. We are happy to welcome back Jeff for his fourth
year with The Colorado Experience. Jeff will be leading tours to Eldorado
Canyon.
</FONT>
<BODY>
</HTML>
Trang 34
Gio Trnh Thit K Web
Khoa CNTT
Cc trang DuMont.htm, Jacobs.htm cng thit k tng t.

Logo.htm
<HTML>
<HEAD><TITLE>HEAD</TITLE></HEAD>
<BODY BACKGROUND="Mountain.jpg">
<IMG SRC="TCELogo.gif" WIDTH=550 HEIGHT=60>
</BODY>
</HTML>
V.2.5.
Phn t NOFRAMES
Phn t NOFRAMES c s dng ch ni dung thay th cho frame khi trnh duyt
khng h tr frame.
C php:
<HTML>
<HEAD><TITLE>Page title</TITLE></HEAD>
<FRAMESET>
Frame Definitions
</TRAMESET>
<NOFRAME>
<BODY>
Page Layout
</BODY>
</NOFRAME>
</HTML>
Trang 35
Gio Trnh Thit K Web

V.2.6.
Khoa CNTT
Phn t IFRAME
Nu mun trn vn bn v khung trong cng mt trang th phi to mt khung bn trong

trang bng tag <iframe>, khi trnh dut khng h tr th ni dung trong IFRAME s b
tr li
C php:
Ti v tr mun chn frame, nhp c php:
<Iframe Src=Page.htm Name=name Width= x Height=y Align=left/
right/top/bottom>
Ni dung thay th khi trnh duyt khng chp nhn khung
</Iframe>
Trong :
Page.htm: l trang u tin xut hin trong khung
Name: tn ca khung
x, y: kch thc ca khung
Align: canh l
V d: thit k trang web c dng sau:
Phn t Iframe
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<center><img src="Logo.jpg" width="550" height="70"></center>
<iframe width="350" height="150" align="right" src="Bester.htm">
</iframe>
<h1> <font face="Arial, Helvetica, sans-serif">Staff </font></h1>
The staff at the Colorado Experience is here to helpwith all of your
climbing needs. All of our instructors are fully qualified, with yearsof
climbing and teaching experience. Scroll through the biographies at the
right for more information
</body>
</html>
Trang 36
Gio Trnh Thit K Web
CHNG VI:
VI.1.
Khoa CNTT
FORM
GII THIU FORM

VI.1.1.
S dng Form: Form c s dng khi cn:
Thu thp thng tin tn, a ch, s in thoi, email, ng k cho ngi dng
vo mt dich v hoc mt s kin
Tp hp thng tin mua hng
Thu thp thng tin phn hi v mt Website
Cung cp cng c tm kim trn website
VI.1.2.
Cch to:
C php:
<Form Method=(Post Get) Action=script.url>
Ni dung ca Form
</Form>
Trong :
-Method: xc nh phng thc a d liu ln my ch, c 2 gi tr :Post v Get
Nu gi tr l GET th trnh duyt s to mt cu hi cha trang URL, mt du hi v
cc gi tr do biu mu to ra. Trnh duyt s i script ca cu hi thnh kiu c
xc nh trong URL x l.
Nu gi tr l POST th d liu trn biu mu s c gi n script nh mt khi d
liu
-Action: l a ch ca script s thc hin khi form c submit
VI.2.
CC PHN T CA FORM:
Cc phn t ca form thng s dng trn trang web gm
Input boxes: nhp d liu dng text v number
Radio buttons: dng chn mt ty chn trong danh sch
Selection lists: dng cho mt danh sch di cc la chn, thng l trong Dropdown list box
Check boxes: ch nh mt item c chn hay khng
Text area: mt text box c th cha nhiu dng
Submit v Reset button: gi form n CGI script va reset form v trng
thi ban u
VI.2.1.
Input boxes
L mt hp dng n dng nhp vn bn hoc s. to cc input boxes, s dng tag

<INPUT>, tag <INPUT> cn c s dng cho nhiu loi field khc trn form.
C php:
<FORM>
<INPUT TYPE=Object NAME=Text>
</FORM>
Cc gi tr ca thuc tnh TYPE: Mc nh gi tr ca TYPE l text, nu trong tag
<INPUT> khng nhp thuc tnh TYPE th loi input boxes l text
Trang 37
Gio Trnh Thit K Web
Khoa CNTT
TEXT
PASSWORD
CHECKBOX
RADIO
HIDDEN
RESET
SUBMIT
TEXTAREA
BUTTON
IMAGE
V d:
<html>
<head><title>Form</title></head>
<body>
<form>
<table>
<tr>
<td width=100>FirstName: </td>
<td><input name =Firstname></td>
</tr>
<tr>
<td>LastName: </td>
<td><input name =Lastname></td>
</tr>
<tr>
<td>Address: </td>
<td><input name =Address></td>
</tr>
</table>
</form>
</body>
</html>
text
1. Text box: Hp vn bn, do ngi s dng nhp vo

C php:
<Input Type=Text Value=Value Name=name Size=n Maxlength=m>
Name : tn d liu u vo server

Value: D liu ban u c sn trong text box
Size: chiu rng ca text box tnh bng s k t (mc nh l 20)
Maxlength: s k t ti a c th nhp vo text box
Trang 38
Gio Trnh Thit K Web
Khoa CNTT
2. To hp Password: Nhng k t nhp vo hin th di dng du chm , thng tin

s khng b m ho khi gi ln server
C php:
<Input Type=password Name=name size=n maxlength=n>
Size: chiu rng ca hp Password, tnh bng k t
Maxlength: S k t ti a c th nhp vo hp Password
V d:
<html>
<body>
<form><table>
<tr>
<td width=100>UserName </td>
<td><input name =UserName></td>
</tr>
<tr>
<td>Password: </td>
<td><input Type='password' name =Password></td>
</tr>
</table></form>
</body>
</html>
password
3. Checkbox: Hp chn, ngi xem c th nh du nhiu checkbox trong cng 1b

C php:
<Input Type=Checkbox Name=Name Value=Value Checked> Nhn
Name: tn ca checkbox
Value: xc nh mi gi tr cho mi hp checkbox c gi cho server khi
ngi xem nh du vo checkbox
Checked: thuc tnh hp check box c chn mc nh
V d:
<html>
<body>
<form><table>
<tr>
<td width=50 valign=top>Hobby: </td>
<td>
<Input Type='Checkbox' Name='st' Value='nhac' Checked> Music<br>
Trang 39
Gio Trnh Thit K Web
Khoa CNTT
<Input Type='Checkbox' Name='st' Value='film'> Film<br>

<Input Type='Checkbox' Name='st' Value='thethao' > Sport
</td>
</tr>
</table></form>
</body>
</html>
checkbox
4. Radio button: Cho php ngi xem ch chn mt tu chn ti mi thi im
C php:
<input type="radio" name="name" value="Value" checked>Nhn
Name: tn ca radio, kt ni cc radio button vi nhau
Value: Nhng d liu s gi n server khi radio button c chn
Checked: thuc tnh radio button c chn mc nh
V d:
<html>
<body>
<form><table>
<tr>
<td valign=top>User for</td>
<td>
<input type='radio' name=use value=home>Home<br>
<input type='radio' name=use value=bus>Business<br>
<input type='radio' name=use value=gov>Government<br>
<input type='radio' name=use value=ed>Educational Institution<br>
<input type='radio' name=use value=other>Other<br>
</td>
</tr>
</table></form>
</body>
</html>
5. Submit Button: Tt c thng tin ca ngi xem nhp vo s c gi n server

khi ngi xem click nt Submit
C php:
<Input Type=Submit Value=Submit Message Name=Name>
Trang 40
Gio Trnh Thit K Web
Khoa CNTT
Submit Message: L ch xut hin trn Button

Name: tn ca button
6. Reset Button:Thit lp gi tr ban u ca tt c cc iu khin trn form
C php:
<Input Type=reset Value=Reset Message Name=Name>
C th to nt Reset v Submit bng hnh nh vi c php:
<Button Type=reset Name=reset Value=reset>
Nhn ch l tri
<Image src=Image.gif >Nhn ch l phi</Button>
V d:
7. Button: Nt dng thc hin cc lnh do ngi sn dng a ra

C php:
<input type="button" name="Button" value="Button">
8. Hidden: l cc field m ngi xem khng nhn thy trn trnh duyt, nhng vn l
mt phn t trn form. Hidden field dng lu tr thng tin trong cc form trc,
cc thng tin ny cn i km vi cc d liu trong form hin hnh m khng mun
ngi xem nhp li
C php:
<Input Type=hidden Name=Name Value=Value>
Name: tn m t ngn gn thng tin cn lu tr
Value: Thng tin cn lu tr
VI.2.2.
Selection List:
1. Drop down menu:

C php:
<Select Name=Name Size=n Multiple>

<Option Value=Value selected> Option 1
<Option Value=Value > Option 2
</Select>
Nhn:Gii thiu Menu
Name: tn d liu u vo server
Size: l chiu cao ca menu tnh bng hng ch
Multiple: l thuc tnh cho php chn nhiu mc (listbox)
Selected: mc c chn mc nh
Value: xc nh d liu gi cho server nu mc c chn
Trang 41
Gio Trnh Thit K Web
Khoa CNTT
V d:
<html>
<head><title>Dropdown menu</title></head>
<body>
<form>
<select Name=Product>
<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=2> Print/scan 250
</Select>
</form>
</body>
</html>
2. Nu thm thuc tnh Multiple th ta c dng listbox
<html>
<head><title>Dropdown menu</title></head>
<body>
<form>
<select Name=Product size=5 Multiple>
<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=2> Print/scan 250
</Select>
</form>
</body></html>
3. Phn t OPTGROUP: c s dng nhm cc chn la thnh cc nhm ring.
V d:
<HTML>
<HEAD><Title>Using the Option Group</Title></head>
<BODY>
<FORM action= htpp: // somesite.com / processform method= post>
<SELECT name= course>
<OPTGROUP>
<OPTION value= Internetintro>Introduction to the Internet
<OPTION value= Introhtml>Introduction to HTML
<OPTION value= Introweb>Introduction to the web page designing
</OPTGROUP>
<OPTGROUP>
<OPTION value= vbintro>Visual Basic An Introduction
<OPTION value= vbdev>Visual Basic Application Development
</OPTGROUP>
</SELECT>
</FORM></BODY></HTML>
Trang 42
Gio Trnh Thit K Web
Khoa CNTT
optgroup
VI.2.3.
TextArea: Hp vn bn cho php nhp nhiu dng
C php:
<TextArea Name=name Rows=n Cols=m Wrap>
Default text
</textarea>
Rows: s dng c th nhp vo TextArea (mc nh l 4)
Cols: rng ca textarea (tnh bng s k t, mc nh l 40)
Wrap: cc dng ch t ng dn ra trong l ca vng text area, Value:
virtual,physical
V d:
<html>
<head><title>Textarea</title></head>
<body>
<table>
<tr>
<td valign=top> Comments ?</td>
<td><textarea rows=4 cols=50 name=comments wrap=virtual></textarea>
</td>
</tr>
</table>
</body>
</html>
Trang 43
Gio Trnh Thit K Web
Khoa CNTT
VI.2.4. Nhn: Dng to nhn lin kt vi thnh phn i km

C php:
<Label For=idname> Ni dung label</label>
Idname: l gi tr ca thc tnh ID trong thnh phn Form tng ng
V d:
<HTML>
<HEAD><TITLE>Using Labels</TITLE></HEAD>
<BODY>
<FORM action= 'http: // somesite.com' method = 'post'>
<table>
<tr>
<td><LABEL for= 'firstname'>Firsname: </LABEL></td>
<td><INPUT type='text' id='firstname'></td>
</tr>
<tr>
<td><LABEL for= 'lastname'> Last name: </LABEL></td>
<td><INPUT type= 'text' id= 'lastname'><BR></td>
</tr>
</table>
</FORM>
<BODY>
</HTML>
Label
VI.2.5.
Fieldset: Nhm cc i tng ging nhau vo mt phn logic
C php:
<Fieldset>
<Legend Align=left, right>Ch thch
</Legend>
Cc thnh phn trong nhm
</Fieldset>
-Tag<legend>: to ch thch cho nhm
-Align=left, right: ch v tr ca ch thch
V d:
<HTML>
<HEAD><TITLE>Job application</TITLE></HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form
</CENTER></FONT></H1>
<HR><BR><FORM action= http: // somesite.com / processform method = post><P>
<FIELDSET>
<LEGEND>Position</LEGEND>
Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'>
Trang 44
Gio Trnh Thit K Web
Khoa CNTT
</FIELDSET>
<FIELDSET>
<LEGEND>Sex</LEGEND>
<INPUT name= 'sex' type= 'radio' value= 'Male' tabindex '4' >Male
<INPUT name= 'sex' type= 'radio' value= 'Female' tabindex '4'> Female
</FIELDSET>
<FIELDSET>
<LEGEND>Educational Qualifications</LEGEND>
<INPUT name= 'qualif' type='radio' value= 'grad' tabindex= '5'> Graduate
<INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Postgraduate
</FIELDSET>
<FIELDSET>
<LEGEND>Language known</LEGEND>
<INPUT name= 'lang' type='checkbox' value= 'english' tabindex= '6'> English
<INPUT name= 'lang' type='checkbox' value= 'french' tabindex= '7'> French
<INPUT name= 'lang' type='checkbox' value= 'german' tabindex= '8'> German
</FIELDSET>
<FIELDSET>
<LEGEND> Personal Information</LEGEND>
Name: <INPUT name = 'name' type= 'text' tabindex= '2'><BR>
<TEXTAREA name = 'address' rows= '3' cols = '30' tabindex = 3>
Enter address</TEXTAREA>
</FIELDSET>
</FORM>
</BODY></HTML>
Trang 45
Gio Trnh Thit K Web

VI.2.6.
Khoa CNTT
iu khin cc phn t trn form:
1. nh th t Tab:
Dng phm tab di chuyn gia cc itng trong form, mc nh theo th t ca
m HTML, mun nh li th t ta dng thuc tnh TabIndex=n trong tag to cc
thnh phn ca form, trong n l th t ca tab, c gi tr t 0 n 32767
Trong mt form ta thng nh th t tab cho cc thnh phn : textbox, password,
checkbox, radio button, textarea, menu v button
2. To phm tt:
Cch to:
Trong tag to cc phn t ca form ta dng thuc tnh Accesskey=Phm tt
S dng phm tt: Nhn t hp phm Alt+Phm tt
Trang 46
Gio Trnh Thit K Web
CHNG VII:
VII.1.
Khoa CNTT
CASCADING STYLE SHEETCSS
GII THIU
Bng kiu (style sheet) nhm tho mn nhu cu thm m, tin dng nhng gi tnh
thng nht cho trang HTML. CSS cho php nh dang mt s tnh cht thng
thng cng mt lc cho tt c cc i tng trn trang c nh du bng tag c
bit
Tin ch ca CSS l :
Tit kim thi gian
Khi thay i nh dng ch cn thay i CSS, cc trang khc s t ng cp
nht s thay i
C th dng cc CSS cng vi JavaScript to cc hiu ng c bit
Bt li ca CSS:
Khng mt trnh duyt no chp nhn n hon ton
Phi mt thi gian hc cch s dng
VII.2.
CCH TO:
Mt bng mu c to bng mt tn tag v mt hay nhiu cc nh ngha xc nh cch

thc hin th ca cc i tng c nh du bng tag
VII.2.1. Phn loi v cch to:

C 3 loi :
Inline style
Internal style
External style
a. Inline style:
L kiu c gn cho mt dng hoc mt on vn bn, bng cch s dng thuc
tnh style bn trong tag mun nh dng
C php:
<TagName Style=property1:value1;property2: value2;>
Ni dung vn bn mun nh dng
</TagName>
V d : <HTML>
<HEAD>
<TITLE>Setting Properties</TITLE>
</HEAD>
<BODY>
<P style = color:aqua ; font- Style:italic, text- Align:center>
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = color:red>difference
</SPAN> inthis line
</BODY>
</HTML>
Trang 47
Gio Trnh Thit K Web
Khoa CNTT
b. Internal style :
L bng mu thch hp cho trang ring l vi nhiu vn bn, bng cch to bng
mu chung trn u trang v dng cho c trang HTML
C php:
<Head>
<Style>
TagName{property1: value 1; property2: value 2}
(lp li cho mi tag c thuc tnh cn nh dng)
</Style>
</Head>
V d :
<HTML>
<HEAD>
<STYLE TYPE=text/css>
H1,H2 { color: limegreen; font-family: Arial }
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as displayed in
the browser</H3>
</BODY>
</HTML>
c. External style :
L mt bng kiu c lu tr thnh mt file bn ngoi v c lin kt vi trang
HTML.Bng kiu ny s c p dng v nh hng cho tt c cc trang ca mt
website.
Cch to:
To mt tp tin vn bn mi
Nhp tn cc tag mun nh dng thuc tnh theo mu:
TagName{property1: value1; property2:value2;}
Lu tp tin vi nh dng Text Only v c phn m rng .css
Cch dng External style:
C php:
<Head>
<Link Rel=StyleSheet Type=text/css Href=tn tp tin.css>
</Head>
V d:
To tp tin Sheet1.css
H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt; font:10pt/15pt Myriad Roman,Verdana}
Trang 48
Gio Trnh Thit K Web
Khoa CNTT
Trang1.htm
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=sheet1.css TYPE=text/css>
</HEAD>
<BODY>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
</BODY>
</HTML>
Trang2.htm
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=sheet1.css TYPE=text/css>
</HEAD>
<BODY>
<H2> This document ues the sheet1 style sheet</H2>
<P>Selecting this option could delete all your files
<H2>The H2 element again</H2>
</BODY>
</HTML>
VII.3.
NH BNG MU CHO LP (CLASS):

C th chia cc yu t trong HTML thnh cc lp p dng kiu mu hiu qu hn
C php:
Trong phn <Style > nhp c php:

<STYLE>
.ClassName{thuc tnh1:gi tr1;thuc tnh2:gi tr2;}
</STYLE>
Trong phn <Body>, nh du phn nm trong lp bng c php:

<Body>
<TagName Class=ClassName>Ni dung </TagName>
</Body>
V d: <HTML>
<HEAD>
<STYLE>
.water{color:blue}
.danger{color:red}
</STYLE>
</HEAD>
Trang 49
Gio Trnh Thit K Web
Khoa CNTT
<BODY>
<p class=water>test water
<P class=danger>test danger
</BODY></HTML>
VII.3.1. nh cc tag ring bit:

Dng p dng cho mt phn t ring bit trn trang Web
C php:
Trong Tag Style nhp :
TagName#IDName{th/tnh1: gi tr1; thuc tnh2: gi tr 2;}
Trong tag Body nhp :

<TagName ID=IDName> Ni dung</TagName>
V d 1:
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
#control { color: red ;FONT-WEIGHT:BOLD}
</STYLE>
</HEAD>
<BODY>
<SPAN id='control'>Fire is this color</SPAN>This paragraph has
no style applied
</BODY></HTML>
V d 2:
<HTML>
<HEAD><TITLE> combining ID and class Selector</TITLE>
<STYLE>
.forest { color: green;font-weight:bold }
.danger { color: red;font-weight:bold }
#control{ color: blue;font-weight:bold }
</STYLE>
</HEAD>
<BODY>
<P class='forest'>green things
<P class='danger'>fire hazards
<EM class='forest'> more green things</EM><BR>
<EM class='danger'>more fire hazards</EM>
<UL>
<LI class='danger'>things that burn
<LI class='forest'>things that dont burn
</UL>
<P id='control'> water </P>
</BODY>
</HTML>
Trang 50
Gio Trnh Thit K Web
Khoa CNTT
VII.3.2. To cc tag tu :
C 2 loi tag chung c th kt ni Class hay cc ID to cc tag tu . cn phn bit i
tng cp khi v cp hng:
- i tng cp khi nh mt on vn, thng bt u mt dng mi v c th cha
cc i tng cp khi khc gm cc tag: P, H1, Body, table
- i tng cp hng thng khng to dng mi, thng cha vn bn v cc yu t
trong hng khc gn cc tag: B, Font
- Cc tag DIV v SPAN: c th kt ni vi cc phn t cp khi v ID to ra cc tag
tu . Trong DIV ph hp vi cc i tng cp khi, SPAN ph hp vi cc i
tng cp hng
1. To tag cp khi tu :
C php: Bng cch thm mt lp hoc ID vo tag DIV v nh mu cn c
Trong phn Style hoc mt bng mu bn ngoi ta nhp:
DIV.ClassName{th/tnh1:gi tr 1; thuc tnh 2: gi tr 2}
vi ClassName l tn lp s s dng. hoc:
DIV#Idname{thuc tnh1:g tr 1; thuc tnh 2: gi tr 2}
vi IDName l tn c bit ca tag DIV
p dng tag cp khi tu vo trang HTML: Ti u phn vn bn mun nh
dng, nhp c php
<DIV Class=ClassName IDname=Idname>Ni dung </DIV>
(bn trong c th cha cc tag <P> hoc <H1>)
2. To cc tag trong hng tu :
Kt ni nhiu kiu nh dng vn bn trong mt tag
C php:
Trong phn Style, nhp c php:
SPAN.Classname {th/tnh1:gi tr1; th/tnh2: gi tr 2}
Hoc:
SPAN#IDname {th/tnh1:gi tr 1; th/tnh 2: gi tr 2}
p dng tag trong hng tu vo trang HTML: Ti u on vn bn mun nh
dng, nhp c php:
<SPAN Class=classname> ni dung vn bn</SPAN>
Hoc:
<SPAN ID=IDName> Ni dung vn bn</SPAN>
3. Cc thuc tnh nh dng vn bn:
a) Chn b font:
font-family: familyname1, familyname2
b) To ch nghing:
Font-style: italic
Trang 51
Gio Trnh Thit K Web
Khoa CNTT
c) To ch m:
Font-weight: bold
d) nh c ch:
Font-size: xx-smallhoc x-small, small, medium, large, x-large, xx-large hoc
Font-size:12pt (gi tr c th)
C th nh dng cc thuc tnh ch nghing, m v c ch cng mt lc:
Font: italic bold size
e) Mu ca ch:
Color: colorName/#rrggbb
f) Mu nn ca ch:
Background:colorName/#rrggbb
g) nh khong cc gia cc t, cc k t:
Word-spacing:n (n: khong cch gia cc t, tnh bng pixel)
Letter-spacing:n (n: khong cch gia cc t, tnh bng pixel)
h) Canh l cho vn bn:
Text-Align: left, right, center, justify
i) Thay i dng ch:
Text-transform: capitalize, uppercase, lowercase
4. nh dng danh sch:
List-style:circle chm trn rng
List-style: disc chm trn en
List-style: square chm en vung
List-style: decimal nh s rp
List-style: lower-alpha th t alpha
List-style: upper-alpha th t alpha ch in hoa
List-style: upper-roman s la m hoa
List-style: lower-roman s la m thng
5. nh dng mu nn:
Body{color:#rrggbb}
blockquote{background-color:#rrggbb}
background:bacground-color
background :background-image
background: background position
background: background-repeat
background: background-attachment
6. nh dng Hypertext link
A{Text-Decoration:none}: khng gch di
A:visited{color:#rrggbb}
A:link{styles cho v tr cha c xem}
A:active{style cho nhng link ang click}
A:hover{style khi tr lt qua link}
Trang 52
Gio Trnh Thit K Web
CHNG VIII:
VIII.1.
VIII.2.
VIII.3.
Khoa CNTT
GII THIU DREAMWEAVER
GII THIU
Macromedia Dreamweaver MX 2004 l mt cng c thit k web chuyn nghip, phn
ct li ca n l HTML (HyperText Markup Language), l mt cng c mnh, d dng,
bn c th d dng thit k v pht trin mt trang web hoc mt website ln
Dreamweaver MX 2004 l mt cng c trc quan, trong c th b sung Javascrip,
biu mu, bng biu v nhiu loi i tng khc m khng cn vit mt on m no.
Dreamweaver MX 2004 s dng cc cng ngh web, chun HTML v cung cp kh
nng tng thch vi cc trnh duyt web c, vi Dreamweaver MX 2004 bn c th
thit k bng ch Design view hoc Code view hoc Code and Design
CI T
Macromedia Dreamweaver MX 2004 l mt chng trnh trong b Macromedia MX,
bn nn ci t trn my trn b Macromedia MX c y cc chng trnh h tr
cho Dreamweaver thit k trang web p v sinh ng hn
Sau khi ci t, bn khi ng Macromedia Draemvaerver MX 2004 theo ng dn
Start Programs Macromedia Macromedia Dreamweaver MX 2004
MN HNH DREAMWEAVER:
1. Insert Bar: Gm cc chc nng tin ch dng chn cc i tng vo trang web, v
nh cc thuc tnh cho i tng
Common: Chn cc i tng: Image, Flash, Date, Template,
Layout: Cha cc cng c trnh by trang, gm 3 ch : Standard, Expended,
Layout
Forms: Cha cc cng c to Form
Text: Dng nh dng vn bn
HTML: cha cc cng c to trang web bng code view
2. Document Toolbar: Cha cc nt cho php xem trang web dng Design hay dng
Code
Show code view: Xem dng trang HTML
Show Design view: Xem trang dng thit k, s dng cc cng c ca Dreamwerver
Show code and design view: Chia ca s lm 2 phn: phn trn dng code view,
phn di dng Design view
Title: tiu ca trang Web
Preview/Debug in Browser:Xem kt qu trang web thng qua trnh duyt web
Document Window: Ca s dng to v hiu chnh trang Web
3. Properties Inspector: Hin th cc thuc tnh ca cc i tng ang c chn, ng
thi cho php chnh sa cc thuc tnh
4. Panel groups: L nhm cc Panel cho php qun l cc i tng trong trang Web
Bt / tt cc thanh Panel: Chn menu Window Chn thanh Panel tng ng
M rng cc thanh Panel: Click vo mi tn gc tri ca mi Panel
Trang 53
Gio Trnh Thit K Web
Insert bar
Tag Selector
Document toolbar
Properties Inspector
Khoa CNTT
Document window
Window size
Download time
Panel group
Site panel
5. Site Panel: Cho php qun l cc tp tin, th mc trong b Web (ging Windows
Explorer).
Thanh cng c ca Site Panel
Connect/Disconnect: Chc nng kt ni/ ngt kt ni vi Remote site, ch c tc
dng vi Remote site s dng phng thc truyn FTP, WebDAV hoc Sourcesafe, mc
nh Dreamweaver MX 2004 s ngt kt ni khi remote site nu n trng thi ch 30
pht. C th thay i thi gian ny bng cch chn:Edit/ Preferences/Site
Refresh: Chc nng cp nht tp tin, th mc cho Remote site ging vi Local
Site ca chnh n. Thng khng s dng chc nng ny v khi to Site mi
Dreamweaver MX 2004 lun nh du check vo mc Refresh Remote File list
Automatically
Get File: chc nng chp File t remote Site vo Local Site. Tu thuc vo
Enable File Check in v Check out m cc tp tin chp vo c thuc tnh
c php ghi hay ch c
Put File: Chp tp tin t Local Site ln Remote Site
Trang 54
Gio Trnh Thit K Web
Khoa CNTT
Check out files: Kim tra tp tin Remote Site chp vo hay chp chng ln tp
tin Local Site
Check in files: Kim tra tp tin Local Site chp vo hay chp chng ln tp tin
Remote Site
Expand/Collapse: hin th 2 ca s Local Site v Remote Site
6. Status bar: Thanh trng thi, nm di y ca Document Window, hin th Tag
Selector, Window size, Document size v Download time.
Tag Selector: Hin th cc tag HTML ti v tr hin hnh ca con tr, khi to trang
Web mi th phn t duy nht hin th trong Tag Selector l BODY.
Document size and Download time: Kch c c chng ca ti liu v thi gian ti
ti liu xung, c th iu chnh tc download bng cch:
o Chn Edit Preferences Chn mc Status bar
o Ti mc Connection speed Chn tc tng ng
Window size: Hin th kch thc hin ti ca ti liu, c tnh bng Pixel. Khi
nh kch thc ca trang web phi tnh n vic sao cho an ton i vi mi
phn gii. Cch thay i kch thc ca ti liu theo mt trong cc kch thc nh
sn hoc theo mt gi tr khc: Click chut vo mi tn bn cnh Window size
o Chn mt kch thc c sn, hoc
o Chn Edit size nh mt kch thc khc
o Trong hp thoi Preferences
o Width: nh chiu rng
o Height: nh chiu cao
VIII.4.
K HOCH THIT K MT WEBSITE

VIII.4.1. Cc yu cu c bn khi thit k website:
Xc nh yu cu v mc ch ca Website
Chun b ni dung cho cc trang
Phc tho khun mu (Template) cho trang, thng cc trang c cng ch th s
dng chung mt template
Xc nh cu trc ca Website, c 3 kiu cu trc:
o Tuyn tnh
o Phn cp
o Hnh chp
Tu theo mc ch ca Website m chn kiu ph hp
VIII.4.2. Thao tc to b Web c bn:

1. Khi thit k mt Website cn quan tm n 2 vn :
Ni dung ch chnh, t chn b cc, h mu cho tng ng, (v d:
Website thng mi phi sng sa, r rng v b cc, ) sau thu thp y
ti liu, phn nhm theo ni dung, t quyt nh cn bao nhiu trang, ni dung
ca tng trang
Chn hnh nh, logo, Banner, h thng nt lin kt, nh minh ho, nh b cc,
nh trang tr
Phc ho s lin kt trn giy thy r mi lin kt gia cc trang n trong
mt website
Trang 55
Gio Trnh Thit K Web
Khoa CNTT
2. Cch to mt Website mi:
Trong Document Window, chn Site Manage sitesNew Site xut hin
hp thoi Site Definition Chn Tab Advance, trong mc Local info:
Site name: t tn Site, tn ny xut hin trong hp thoi Edit Site

Local Root Folder: Khai bo ng dn ca folder lu tr Website trn a
cng bng cch nhp ng dn n th mc hoc Click vo biu tng Folder
v ch ng dn n folder
Default Images folder: khai bo ng dn n th mc cha cc hnh nh ca
trang Web, th mc ny phi nm trong Local root Folder khai bo trn, tt
c cc hnh nh trong trang web mc nh c lu trong th mc ny
Refresh Local file list Automatically: khi c chn, Dreamweaver t ng cp
nht c trc file trong bng Local Folder ca Site Panel, vic cp nht ny s s
dng mt t ti nguyn ca h thng, ta c th cp nht khi cn bng cch chn
View Refresh Local trong Site Window
HTTP Address: Nhp a ch ca site, Dreamweaver s s dng a ch ny
qun l site v lin kt cc file trong site
Trang 56
Gio Trnh Thit K Web
Khoa CNTT
Enable Cache: khi c chn, Dreamweaver to mt file lu tr cc thng tin v

link gia cc file trong site. Sau khi chn xong Click OK Click Done hon
tt cng vic to site mi
3. Kim tra Website to:
M site Panel :bng cch chn Window File ta thy c th mc cha Site,
nu cha to Folder cha hnh nh th ti y bn Click phi chut vo tn Site
Chn New Folder Nhp tn th mc l Images. Trong website phi cha 2
folder : folder HTML gm cc file .htm v folder image cha hnh nh ca
website
m rng ca s Site Panel Click chn nt Expand/Collapse
Expand/Collapse
chn tn
site cn m
4. M mt site c sn:
Cch 1: Click vo menu hin th tn Site trn Toolbar ca Site Panel, chn tn
Site mun m trong danh sch x xung
Cch 2: Chn menu Site Manage Sites Chn tn Site mun m Done
5. Hiu chnh Site:
Chn menu Site Manage Sites

Chn tn Site cn hiu chnh Click nt Edit
Tohiu
mtchnh
Site mi
Xut hin hp thoi Site Definition thc hin
OK Done
Hiu chnh Site

To mt Site mi ging site ang chn
Xo Site
Xut thng tin mt Site ra tp tin .ste
Dn nhp th mc, tp tin vo Site
Trang 57
Gio Trnh Thit K Web
Khoa CNTT
6. Dng hnh Bitmap lm nh nn cho trang Web:
Trong ca s Document, chn Modify Page Properties, xut hin hp thoi

Page Propeties, chn mc Appearance
Text Color: chn mu cho text
Background Color: Chn mu nn cho trang
Background Image: Chn tp tin nh lm nn bng cch click nt Browse
VIII.4.3. Thit k cc trang Web n
Ti mn hnh khi ng chn mc Create new Chn HTML
Trang 58
Gio Trnh Thit K Web
Khoa CNTT
Xut hin Document Window, y l ni thit k trnh by ni dung ca tng trang web
n, sau khi thit k xong mi trang trang web c lu di dng mt tp tin c phn
m rng .HTM (hoc .HTML) trong th mc c khai bo trong mc Local Root
Folder
VIII.4.4. To lin kt cc trang Web n thnh mt Website

1. Cch to:
to lin kt, cn phn bit trang ngun v trang ch.
Trang ngun l trang cha cc nt lin kt (c th l i tng nh
hoc ch)
Trang ch l trang cn lin kt n
M trang ngun
Chn nt lin kt
Trong Properties Inspector, ti mc link, thc hin mt trong hai cch
sau:
Cch 1: Click nt
ko mi tn ch n tn tp tin cn lin kt
trong Site Panel
Cch 2: Click nt
m hp thoi Select File
o Look in: Chn tn Site
o File name: Chn tn trang Web cn lin kt n
2. Kim tra h thng lin kt trong Site:
File Check Page Check links

Xut hin Result inspector, Chn nhm Link Checker
Ti mc Show, chn Broken Links
Ct Files l danh sch cc tp tin c cha lin kt gy
Ct Broken link: Cha tn tp tin khng lin kt c
Pha di thng k s trang kim tra, tng s lin kt, s lin kt tt,
s lin kt gy v s lin kt ngoi
Cc dng kim tra lin kt:
Check links in Current Document: kim tra lin kt trong trang hin
hnh
Check links for entire Site: kim tra lin kt cho tt c cc trang
trong site
Trang 59
Gio Trnh Thit K Web
Khoa CNTT
Check links for Selected files /folders in Site: kim tra nhm tp tin/
th mc c chn trong Site
3. Xem kt qu bng trnh duyt v hiu chnh

Chn File / Preview in Browser / iexplore
Hoc Click nt Preview /Debug in Browser
4. Kt ni v a Website ln Web Server
Cn phi lu li tt c cc tp tin trc khi xut bn Website. Xut bn Website
l chp th mc gc (root) ca Site ln Server ca cc nh cung cp dch v
Internet (ISP).
Trong Macromedia Dremwearver MX 2004, xut bn Website cn c bc kt
ni vi Server trc ri mi Put File ln sau
Cch thc hin:
Trong Site Panel, chn Site cn xut bn
Click nt Put Files, a Site ln Server
Kt ni vi Remote Site:Nu khi to Site mi ta cha xc nh Remote Site
(Th mc cha Site trn Server), nn sau khi click Put File s xut hin thng
bo yu cu kt ni vi Remote Site
Trang 60
Gio Trnh Thit K Web
Khoa CNTT
ClickChn th mc mi cha Site
Chn Yes, Xut hin hp thoi Site Definition

Chn mc Remote Info, trong khung Access, chn Local/ Network (gi lp
mt th mc trn mng cc b, hoc trn mt th mc khc ca a cng)
Ti mc Remote Folder, Click biu tng Folder, tm th mc mi cha
Site
5. Xut bn Site ln Remote Site:

Trong Site Panel, chn li tn Site cn xut bn
Click nt Put File
Xut hin hp thoi: Are you sure you wish to put the entire site?
Click OK
Xut hin hp thoi kt ni, cc tp tin v th mc ca Site ln lt c
chp t site ln Remote Site
6. Kim tra li trn Remote Site
Click nt Expand trong Site Panel: Mn hnh chia lm 2 phn: Bn tri l
Remote Site, Bn phi l Local Site
VIII.4.5. Site Map:

1. Xem mt Site Map:
Site map l mt s cu trc Site, n hin th v tr v s phn cp ca cc
tp tin trong Site. Mt Site khi c to y lin kt, c th xem di
dng Site map
Cn phi nh ngha trang HomePage trc hoc trong Site phi c trang
Index.htm
Trong Site Panel, chn Map view trong khung Site view
Trang 61
Gio Trnh Thit K Web
Khoa CNTT
Hoc click nt Expand/Collapse Click chn Site Map
2. To lin kt trong Site Map:C th to lin kt trang mt cch trc quan v

n gin bng cch s dng Site Map. Cch thc hin nh sau:
To Site mi trong phi c trang Index.htm hoc Home Page
o Chn Site Manage Sites Click nt Edit
o Xut hin ca s Definition Chn Site Map Layout
o Home Page: ng dn n tp tin Index OKDone
To lin kt bng SiteMap

o Click nt Expand/Collapse m rng Site Panel
o Click chn nt SiteMap
o Mn hnh xut hin trang Index.htm trong site
To lin kt phn cp:

o Click phi trn file Index chn Link to new File
Trang 62
Gio Trnh Thit K Web
Khoa CNTT
Lin kt n File mi
Lin kt n File
o
o
o
o
Xut hin hp thoi Link to New File:

File Name: Nhp tn file
Title: tiu ca trang
Text of Link: dng text lin kt
To lin kt nhanh:
o Chn tp tin cn to lin kt
o Click biu tng lin kt bn cnh tp tin c chn
o Ko mi tn lin kt n tp tin lin kt n
o Sau khi lin kt, c SiteMap
Trang 63
Gio Trnh Thit K Web
CHNG IX:
IX.1.
Khoa CNTT
NH DNG VN BN- S
DNG CSS
NH DNG VN BN
Cch nhp ging nh cc trnh son tho vn bn khc, mi phn ni dung c phn
cch bng cch xung dng, nu xung dng trong cng mt on (Paragraph) th
nhn Shift + Enter, nu ngt on th nhn Enter.
hiu chnh vn bn thng s dng thanh cng c Properties Inspector. Cch tng
qut l nh du khi vn bn chn kiu nh dng
S dng thanh cng c Properties Inspector:
IX.1.1.
Font:
Cch 1:Ti mc format Chn cc heading, y l cc nh dng mu, bao gm

Font ch, kiu ch, size, thng dng lm tiu
Cch chn nhm Font ch: Chn vn bn, ri chn nhm Font trn Font menu
ca Properties Inspector hoc chn menu Text Font. Trong Dreamweaver, kiu
Font ch c nh thnh tng nhm, mi nhm gm nhiu font, mt Font chnh
v cc Font d phng. C th to ra cc nhm Font tu bng cch ti muc
Font Chn Edit Font List
Chn Font trong khung Available Fonts, Click nt

chn qua khung Chosen fonts
To thm nhm Font mi
a cc font c
Trang 64
Gio Trnh Thit K Web
Khoa CNTT
Xo nhm ra khi Font List
Sp xp cc nhm Font theo th t
1. Font size:
Chn khi vn bn, Chn c ch trong mc Size ca Properties Inspector, hoc
chn Text Size. Size ch trong Dreamweaver gm 17 Font Size, trong c 8
mc th hin bng s, t 9 n 36 v 9 mc th hin bng ch
2. Font Color:
Chn khi vn bn, Click nt Text Color, chn mu hoc chn Text Color
Click nt Text color chn

mu
3. Canh l on vn bn
Chn Text Align hoc Click cng c
IX.1.2.
Danh sch dng lit k:
Chn Text List

Unordered List: Chn Bulletted u dng
Ordered List: nh s th t u dng
Thay i thuc tnh lit k:
t du nhy trong danh sch lit k
Chn Text List Properties hoc click nt List Item. Xut hin hp thoi List
Properties
List Type: Chn kiu danh sch (Bullets hoc Numbered)

Style: Loi Chm trn hoc vung
Start count: S bt du cho danh sch lit k
List item:
New Style: lit k nhiu cp
Reset count to: s bt u cho danh sch con
Trang 65
Gio Trnh Thit K Web
Khoa CNTT
C th dng hnh nh lm bullet cho list bng cch to trong tp tin css
ul{list-style-image:url(Images/ICON-HEART.png) trong ICON-HEART.png
l tp tin hnh nh cho bullet. Ri kt ni tp tin css cho tp tin trang web
IX.2.
S DNG CSS (CASCADING STYLE SHEETS)

CSS (Cascading Style Sheets) cng l mt dng HTML Style. Nhng phong ph hn
v thuc tnh v ng dng. Mt CSS khng nhng tp hp cc nh dng, m cn c
th gip nh v, vin khung, t mu nn
CSS c th nh km trong trang hoc lu ring thnh mt tp tin kiu CSS phc v
cng lc cho nhiu trang
IX.2.1.
To CSS cc b:
1. Cch to:
Chn Text CSS Styles NewXut hin hp thoi New CSS Style:
Hoc Window CSS Style, m CSS Panel, Click nt New CSS Style
Name: Tn ca CSS mi, phi bt u bng du chm(.)
Selector Type: Chn loi CSS
Define in: New Style Sheet File: to mt tp tin CSS
This document only: Ch s dng CSS cho trang cc b
Chn OK, xut hin hp thoi CSS Style definition
Trang 66
Gio Trnh Thit K Web
Khoa CNTT
Trong mc category, chn Type, sau chn cc nh dng cho CSS

Chn xong,Click Apply OK
Trong CSS Panel xut hin Style va to
2. p dng CSS cc b:
Chn ni dung vn bn cn nh dng
Trong CSS Style Panel, chn tn CSS
IX.2.2.
To mt tp tin CSS:
Tp tin kiu CSS l mt tp tin ph tr cho Site, nm trong th mc root ca Site

1. Cch to:
Text CSS Styles New
Trong hp thoi New CSS Style
Selector Type: Chn Advanced
Define in: New Style Sheet file, OK
Hp thoi yu cu lu tp tin CSS, c phn m rng .CSS
2.
3.
4.
p dng CSS t tp tin CSS:

M trang HTML cn s dng tp tin CSS
Chn Text CSS Style Attach Style Sheet.
Hoc Click nt Attach Style Sheet trong Style Panel.
Chn tp tin CSS cn kt ni, Click nt Browse
Add as:
o Link: Ch lin kt vi tp tin CSS s dng
o Import : Chp tp tin CSS vo trang
Hiu chnh mt CSS:
Click phi trn tn CSS trong CSS Style Panel
Chn Edit, thc hin hiu chnh
Xo mt CSS Styles:
Khi xo mt CSS Style th nhng ni dung p dng CSS Style b xo s tr v
trng thi ban u
Chn CSS Style cn xo
Click nt Delete CSS Style trong CSS Style Panel
Hoc Click chut phi, chn Delete
Attach Style Sheet
Delete Style
New Style Sheet
Trang 67
Gio Trnh Thit K Web
Khoa CNTT
Trang 68
Gio Trnh Thit K Web
Khoa CNTT
CHNG X:
HNH NH V LIN KT
TRANG TRONG DREAMWEAVER
X.1. CHN HNH NH VO TRANG WEB:
X.1.1.
Chn nh vo trang:
nh trong th mc Images ca Site:

t du nhy ti v tr cn chn nh
Drag chut ko tp tin nh trong Site Panel th vo trang
nh ngoi Site:
Chn Insert Image
Xut hin hp thoi Select Image Source
Chn tp tin nh cn chnOK
X.1.2.
Hiu chnh thuc tnh ca nh:
Chn nh chn
Window Properties
Image: t tn cho nh
W (Width), H (Height): rng v chiu cao ca nh, tnh bng Pixel
Src: ng dn tng i n tp tin nh
Alt: cu thng bo xut hin trn trnh duyt khi r chut vo nh
Link: a ch URL ni cn lin kt n
Edit: Chuyn qua Macromedia Fire Works hiu chnh nh
Crop: Ct xn nh
Brightness/Contrast: Chnh sng ti ca nh
Sharpen: Chnh sc nt cho nh
Resample:Lu li kch thc iu chnh
Optimize in Fireworks: chuyn qua Macromedia FireWoks hiu chnh
Map : bng lin kt nh
VSpace, Hspace: Khong cch trn, di, tri, phi gia phn ni dung
vn bn n nh
Target: Khung cha trang lin kt n
Low Src: tn tp tin nh ph c phn gii thp, lm nh thay th khi
ch hin th nh chnh trn trnh duyt
Border: ng vin nh
Trang 69
Gio Trnh Thit K Web
X.1.3.
Khoa CNTT
Align: canh l tri, phi, gia
Chn khung nh:
Trong thit k, nhiu lc cn d phng trc cho nh trang tr, nhng cha c nh
thch hp, ta c th chn trc mt khung nh vi kch thc xc nh gi ch
Chn InsertImage Objects Image Placeholder
Xut hin hp thoi Image Placeholder
Nhp tn, kch thc, mu cho khung nh
Chn nh vo khung nh:

Double click vo khung cn chn nh
Xut hin hp thoi Select Image Source, chn tp tin nh cn chn vo khung
X.1.4.
Insert Rollover Image:
Insert Image ObjectsRollover Image, Xut hin hp thoi Rolloveer Image
X.1.5.
Original Image: nh gc
Rollover Image: nh khi r chut vo
Chn Flash:
Insert Media Flash

Chn tp tin kiu .swf
Ti v tr chn xut hin biu tng Flahs
Hiu chnh thuc tnh ca Flash
Trang 70
Gio Trnh Thit K Web
X.1.6.
Khoa CNTT
Flash: Tn i tng Flash

W (Width), H (Height): Chiu rng v chiu cao ca nh Flash
File: tn tp tin Shockware ca Flash
Src: tn tp tin gc ca Flash
Edit: Hiu chnh trong Macromedia Flash
Reset size: tr v kch thc ban u
Loop: nh Flash lp v tn
AutoPlay: t ng din hot khi m tranng
Vspace, Hspace: khong cch trn, di, tri, phi ca i tng Flash
n vn bn
Quality: cht lng khi hin th
Show All: hin th tt c i tng trong khung
No Border: khng gii hn trong khung vin
Exact fit: v kht trong khung vin
Align: canh l
Bg: mu nn di nh Flash
nh nn trang
nh nn l nhh t ng lp y trang Web. Khi thit k, bn nn chn nhng mu

nn tht nht, ch sm hoc nn tht sm, ch mu sng ngi xem d c
Tu thuc vo tng loi nn m xc nh kch thc nh nn cho ph hp, to nh
nn vi s Kb cng nh th trang hin th cng nhanh
1. Cch to nh nn:
t tr trong trang
chn ModifyPage Properties
Bacground Images : nhp ng dn n tp tin nh lm nn
2. nh nn trang c nh khng lp
y l dng nn kh thc hin, kch thc nh thng rt ln, nn phi nn gim
s Kb ti a,
To nh nn c nh, khng lp bng CSS:
Thit k nh cn lm nn
Chn Text CSS Styles New CSS Style, Trong hp thoi New CSS Style:
Selector: Nhp tn Style
Selector Style: Chn mc Advanced
Define in: This document only OK, Xut hin hp thoi CSS Style
definition:
Trong mc Category, chn Background
Background Image: tn tp tin nh lm nn
Repeat: No Repeat (khng lp)
Attachment: fixed (nn c nh khng b cun)
Horizontal, vertical Position: center OK
S dng CSS nh nn
Khi to CSS Style, trong CSS Style Panel xut hin tn Style va to
Trang 71
Gio Trnh Thit K Web
Khoa CNTT
a CSS Style nh nn va to lm nn cho trang, Click phi trn Tag

<Body> ca trang, chn Set Class Chn tn Style va to
X.1.7.
To Web Photo album:
1. Chc nng: To b su tp cc hnh nh hay cun Album gip ngi s dng qun
l v chn xem tng hnh mt cch nhanh nht
2. Cch to: thc hin chc nng ny cn phi ci t Macromedia Fireworks v
mt th mc cha cc hnh photo
Chn Commands Create Web Photo album
Xut hin hp thoi Create Web Photo Album
Nhp cc thng s:
Photo Album Title: Nhp tiu ca Album

Subheading Info : Nhp tiu ph ( Xut hin di tiu chnh)
Other Info: Nhng thng tin b xung
Source Images Folder: a ch ca folder cha hnh
Destination folder: a ch ca Photo Album sau khi to
Thumbnail size: Kch thc ca hnh trong trang chnh
Show files name : Ghi/ Khng ghi tn file di mi hnh
Column: s ct hnh c trong trang chnh
Thumbnail format: Chn kiu nh dng hnh trong trang Index
Chn kiu nh dng hnh trong trang con
Scale : t l hnh so vi trang Index
Creat navigation page for each photo: C / khng to cho mi hnh mt trang
ring b xung thm trong tin
Nhp xong click OK, ch kt qu, xut hin thng bo Album c to, Vo
ca s Site Panel xut hin thm cc folder:
Folder Thumbnail: cha cc file JPG
Folder Page cha cc file .HTM cho mi Image tng ng (trang con)
Tp tin Index.htm trong Folder cha Website, y l tp tin Album chnh
Trang 72
Gio Trnh Thit K Web
Khoa CNTT
M tp tin Index.htm v di chuyn gia cc trang bng cc Hyperlink Next

Previous, Home
3. B sung thng tin cho mi trang con:
Trong Site Panel, m tp tin mun b sung thng tin trong Folder Page
Nhp thng tin, trnh by theo mun, lu li
i tn tp tin ny thnh Gallery.htm
Gn nh dng Template vo cho File Gallery.htm, m tp tin Index, xem kt
qu
X.1.8.
To Library Item:
1. Khi nim: Library cha cc thnh phn ca trang nh hnh nh, vn bn v

cc i tng khc m ta c nhu cu s dng li hoc cn cp nht thng
xuyn. Cc thnh phn ny gi l Library Items. Cch to Library Item:
2. Cch to:M AssetsPanel (Window Assets), trong Assets Panel, Click nt
Library, Chn thnh phn mun to Library Item v thc hin mt trong cc
bc sau
Drag chut ko thnh phn c chn th vo khung Library t tn
Click nt New Library Item v t tn
Chn Modify Library Add Object to Library v t tn
3. Nhp Library Item vo trang mi:
t du nhy vo ni mun nhp Library Item
Ko Library Item t Assets Panel th vo document Window, hoc click nt
Insert trong Assets Panel
4. Hiu chnh Library Item:
Chn Library Item trong khung Library Click nt Edit
Xut hin hp thoi cho php hiu chnh library Item
Click Save xut hin hp thoi bn c mun cp nht tt c trang Web c s
dng Library trong site khng, Yes : cp nht, No : khng.
Sau ny c th cp nht bng cch chn Modify Library Update pages:
cp nht tt c nhng trang c s dng Library Item
5. Tch Library Item trong Document khi Library:
Chn Library Item trong trang Web hin hnh
Click nt Detach from Original trn Properties Inspector, khi library b tch
ra thnh tng i tng v khng cn lin quan n Library, ta c th hiu
chnh tng i tng
To li Library Item bng mt library ang s dng trong trang
C th dng
mt Library trong trang
to li
mt Library Item, nu
Library Item
b mt
Chn
Library trn trang Web
hin hnh
Click
nt
Recreate trn Properties
Inspector,
Library Item s c
to li
Trang 73
Gio Trnh Thit K Web
Khoa CNTT
X.2. LIN KT TRANG TRONG DREAMWEAVER:

X.2.1.
Lin kt :
Mt lin kt ni t trang ngun n trang ch gm 2 thnh phn

i tng c chn lm nt lin kt c th l vn bn (Text), hnh nh (Image) hoc
nt (Button). Trong Macromedia Dreamweaver MX 2004 cn cung cp thm mt s
i tng c bit lm nt lin kt nh Flash Text, Flash Button, Navigation bar,
Rollover Images
a ch URL ca trang cn lin kt n: Tu thuc vo a ch URL m c th chia

lm 3 loi lin kt
Lin kt ni: L lin kt ni b cc trang trong cng mt Website.
Lin kt ngoi: L lin kt n trang thuc mt Website khc.
Lin kt Email: L lin kt n chng trnh gi th tn in t.
X.2.2.
Cc dng lin kt:
Dng lin kt vng:L dng lin kt ni ui nhau, trang1 lin kt n trang 2,

trang 2 lin kt n trang 3,trang n lin kt n trang 1, dng lin kt ny
m bo ngi xem c th xem tt c cc trang, nhng bt li l phi duyt
ht mt vng.
Dng lin kt y : Ti mi trang u to lin kt y n tt c cc
trang cn li, y la dng lin kt trong site c phn cp thp. Nu Site c
nhiu phn cp th nn chn dng lin kt cy phn cp.
Dng lin kt cy phn cp:Trong cc Site ln, mc quan trong ca tng
trang c phn cp theo tng mc, vi trang gc l trang ch, mc 1 l nhm
Trang 74
Gio Trnh Thit K Web
Khoa CNTT
ch chnh, mc 2 l nhm ch con, mc 3 l trang cha cc thng tin

chi tit, dng ny tn ti lin kt gia cc trang cng mc (Same Level),
lin kt v mc trn (Parent Level), lin kt v mc di (Child level).
Dng lin kt tin nghi: Ngoi cc dng lin kt trn, thun tin cho ngi
xem khi lt trang, c th to thm mt s lin kt ph, nh lin kt n im
dng (Bookmark) trong trang c ni dung di, nhiu phn on, hoc to
thm mt h thng lin kt text cui mi trang, khi ngi xem n cui
trang c th nhanh chng lt sang trang khc m khng cn tr v
Lin kt trang ch: Trang ch thng cha cc nt lin kt n cc trang con,
do cn phi to li kt t trang con tr v trang ch
X.2.3.
Cch to:
M trang ngun
Chn Insert Hyperlink
Text: ni dung vn bn lm nt lin kt

Link: a ch URL ca trang cn lin kt n
Target: Khung cha trang ch
Title: Cu ghi ch khi chut chm vo nt
Access Key: Khi xem trang, nhn t hp phm Alt + K t nhp
chn nt v nhn Enter lin kt.
Tab Index: trnh t chn nt khi nhn phm Tab
1. To lin kt ni:
Lin kt gia cc trang trong ni b Site, y l lin kt n gin, ch cn chn tn
tp tin trang ch, s dng a ch tng i, hoc trong mc Link nhp tn tp tin
ch
2. To lin kt ngoi
To lin kt n cc tp tin ngoi site, cn phi nhp a ch http://ca trang ch
thuc Site khc
Khi to lin kt ngoi, ngi xem c th qua site khc c th khng tip tc xem site
ca bn na, trnh trng hp ny, c th thc hin mt trong cc cch sau:
Lin h vi ngi ch ca Site ngoi, hp ng to quan h qua li gia 2
Website
a Site ngoi vo trong khung (Frame ) ca Site mnh
Trang 75
Gio Trnh Thit K Web
Khoa CNTT
M thm mt ca s mi, sau a WebSite ny vo. Cch m ca s mi cho

lin kt vi WebSite ngoi
Trong Properties Inspector, Ti mc Target nhp tn ca khung cha trang ch.
Chn _blank: m mt ca s khung trng cha trang ch
Lin kt vi trang Yahoo trong ca

s khc
3. To lin kt a ch Email:
y l lin kt n chng trnh gi nhn th in t, gip ngi xem c th lin h,
trao i vi ngi ch ca Website
Cch 1:
Chn i tng lm nt lin kt Email
Trong Link nhp trc tip dng mailto: theo sau l a ch Email ca ngi
ch Website
Cch 2:
Khng cn to i tng lm nt lin kt
Chn Insert Email Link
Trong hp thoi Email link:
Text: nhp ni dung vn bn lm nt
E-Mail : nhp ng a ch E-mail
4. To lin kt n tp tin ngi xem ti xung my cc b:

C nhng tp tin bn mun cung cp cho ngi xem trang nhng chng khng phi
l cc trang HTML, v d mt s dng font ch mi, tp tin nn, hoc cc chng
trnh nh .EXE
Cch to:
M trang cn to lin kt
Chn i tng lm nt lin kt
Trong Properties Inspector, trong mc Link, nhp vo tn tp tin cn lin kt
(hoc Click nt
m hp thoi Select File tm tp tin cn cung cp cho
ngi xem. Nu tp tin ny khng cng Site th xut hin hp thoi yu cu
chp tp tin ny vo site
5. Lin kt im dng (Named Anchor)

a) To lin kt im dng cng trang:
i vi cc trang Web di, hoc trang c nhiu mc, th vic dng thanh cun
khng c tin, do c th gip ngi xem n tng mc mt cch nhanh
chng, chnh xc nh vo vic t sn cc im dng. Cch to gm 2 bc:
o t tn cho im dng:
Trong Document window, t du nhy ti v tr s lm im dng
Chn Insert Named Anchor (Ctrl+Alt+A) hoc Click nt Insert
Named Anchor trong bng Common ca thanh Insert
Trong hp thoi Insert Anchor: Nhp tn cho Anchor (khng tha
khong trng, khng c k t l)
o To lin kt im dng:
Trong Document Windows, chn mt on vn bn hoc mt hnh
to link n im dng
Nu im dng nm cng trang th ti link nhp #tn Anchor
b) To lin kt im dng ca trang khc:
Trang 76
Gio Trnh Thit K Web
Khoa CNTT
Thao tc to lin kt n im dng trang khc ging nh lin kt n trang

khc, nhng ti mc link phi ch ra im dng no. Theo cu trc:<Tn tp
tin>#<Tn im dng>
X.2.4.
Kim tra lin kt:
1. Kim tra lin kt bng Check Link:

Ta c th s dng Check Links c mt bng thng k tt c cc lin kt trong
Website.
M trang cn kim tra lin kt
Chn File Check Page Check links
Trong Results inspector Chn mc Link Checker
Trong mc Show: Chn Broken Link hin th danh sch lin kt gy
Chn External links: hin th danh sch lin kt ngoi
2. Kim tra lin kt bng trnh duyt

Chn File Preview in Browser
C th thay i trnh duyt bng cch chn File Preview in Browse Edit
Browser List
Chn tn trnh duyt trong phn Browser, chn iexplorer. Nu khng tm thy th
click nt (+) thm trnh duyt mi vo danh sch Browser, click du (-) b
bt trnh duyt trong danh sch
o Default: Mc nh u tin trnh duyt khi xem trang
o Option: Preview Using Temporary file: chn chc nng ny to tp tin tam
tng ng vi trang cn xem. Trnh duyt s hin th trang tm, nu khng
chn, bn s xem trc tip trang trn trnh duyt.
X.2.5.
Hiu chnh lin kt:
Chn nt lin kt cn thay i

Chn menu Modify Change Link
Hp thoi Select file cho php chn tp tin trang cn lin kt n
Nu bit r tp tin lin kt mi th c th nhp trc tip trong link ca Properties
Inspector
1. Xo lin kt
Chn nt mun loi b lin kt
Chn Modify Remove Link. Hoc xo tn trang lin kt trong link ca
Properties Inspector
2. Chn khung cho trang lin kt

Khi lin kt thng s dng trang khung (Frameset)
Chn nt mun thay i khung lin kt
Chn menu Modify Link Target
Chn tn khung ph hp
3. Chn mu cho lin kt

Thng mt lin kt dng vn bn s c gch di v c mu xanh, i khi mu
ny khng ph hp vi mu sch trong trang thit k, c th chn li mu lin kt
bng cch:
Chn Modify Page Properties, trong mc Category, chn Link
Trang 77
Gio Trnh Thit K Web
Khoa CNTT
Links color: chn mu mc nh cho nt lin kt

Visited Links: mu lin kt n cc trang c xem
Active Links: mu nt lin kt khi ang c chn
X.2.6.
Bn nh lin kt :
Khi chn nh lm lin kt, th c mt s nh kch thc ln, thng chia nh nh ra

thnh nhiu vng mi vng lin kt n mt trang Web khc, dng ny gi l bn
nh lin kt.
1. Nhng thun tin khi s dng bn nh lin kt:
Gip to nhanh cc lin kt

Hnh nh trc quan, d lin tng n trang tng ng.
Gip b cc cc lin kt nhanh, khng chim nhiu khu vc nt trn trang Web
2. Cch to:
Chn nh vo trang, click chn nh

Trong Properties inspector, hin th cng c Map
Chn cng c mun chia vng
Drag chut quanh phn trn hnh m ta mun chia vng to lin kt
Trong Properties inspector, ti mc link, nhp a ch ca trang cn lin kt n
3. Hiu chnh bn lin kt:

Di chuyn vng lin kt
Click chn cng c

chn vng cn di chuyn
Drag chut ko n v tr mi
4. Thay i kch thc vng lin kt
Chn vng lin kt

Click vo mt trong cc nt chn ca vng lin kt
Drag chut thay i kch thc
5. Xo vng lin kt
Chn vng lin kt

Nhn Delete
X.2.7.
Nhm nh ng lm nt lin kt:

Trang 78
Gio Trnh Thit K Web
Khoa CNTT
1. Chn nt bin i hnh:

Trc ht phi c 2 tp tin nh, n1.gif mu cam, n2.gif mu xanh trong folder Images
ca Site
t du nhy ti v tr cn chn nt ng
Chn Insert Image Objects Rollover Image. Hp thoi Insert Rollover
Image:
o Image Name: Nhp tn nh
o Original Image: tn tp tin nh gc i din khi hin th (v d n1.gif)
o Rollover Image : tn tp tin nh hin th khi r chut vo (v d n2.gif )
o Preload Rollover Image: a nh s thay th vo b nh trc
o Alternate Text: cu ghi ch km theo
o When Click, go to URL: a ch ca trang lin kt n
2. Chn h thng nt bin i hnh:

Dreamweaver c th gip bn cng mt lc chn vo c mt h thng nt bin hnh
Chn Insert Image Objects Navigation bar
o
o
o
o
o
o
o
o
Thm hoc xo nt trong h

Sp xp trnh t nt trong h nt
Nav bar Elements: danh sch tn nt trong h nt
Element Name: Nhp tn nt mi
Up Image: nh hin th trng thi thng
Over Image: nh hin th khi r chut vo nt
Down Image: nh hin th khi Click chut vo nt
Alternate Text: cu ghi ch km theo nh
When Click, go to URL: a ch trang lin kt n
Preload Image: a nh s thay th vo b nh trc
Trang 79
Gio Trnh Thit K Web

o
o
o
o
Khoa CNTT
ShowDownImageInitaly: Khi to chn nh trng thi n

Insert: Horizontally:h nt ngang
Insert Vertically: h nt dc
Use Table: H nt nm trong bng
3. Chn nt Flash:
Macromedia Dreamweaver v Macromedia Flash l mt b chng trnh c th s
dng d liu qua li vi nhau rt thun tin, do c th dng cc nt Flash c
thit k sn lm nt lin kt trong Dreamweaver
Cch to:
Chn InsertMedia Flash ButtonF
o Sample: V d mu nt Flash
o Style: danh sch tn cc nt mu Flash
o Button Text: vn bn trn nt Flash
o Font: kiu ch, Size: C ch
o Link: a ch lin kt n
o Target: Tn khung trang lin kt
o Bg: Mu nn
Hiu chnh nt Flash:

Chn nt Flash cn hiu chnh
Trong Properties inspector, thay i gi tr ca cc thuc tnh:
o Flash Button: tn nt Flash
o H: chiu cao
o File: tn tp tin SWF l nt
o Edit: m hp thoi Insert flash Button hiu chnh
Trang 80
Gio Trnh Thit K Web

o
o
o
o
o
o
o
o
Khoa CNTT
Reset Size: tr v kch thc ban u

Vspace, Hspace : khong cch gia nt v ni dung vn bn
Quality: Cht lng nt Flash
Scale: Ko dn nt
Align: canh l so vi vn bn
Bg: mu nn ca nt
Play: Xem hot ng v cc trng thi ca nt
Paramaeters: truyn tham s
4. Chn nt Flash Text:
Insert Media Flash Text

Hp thoi Insert Flash Text, nhp vo cc thng s:
o Font, Size: Font v c ch
o Color: mu ch
o Rollover Color: Mu ch thay i chi r chut qua nt
o Text : Ni dung vn bn lm nt
o Link: a ch trang Web lin kt n
o Target: Tn khung trang
o Bg Color: mu nn ca vn bn nt
Trang 81
Gio Trnh Thit K Web
CHNG XI:
XI.1.
Khoa CNTT
BNG V TRNH BY TRANG
TABLE :
XI.1.1.
K bng:
Ty thuc vo tng b cc c th m quyt nh s dng, ct ca bng, mi dng c th

c s khc nhau. Thng chng ta nn chn dng c s ln nht lm chun khi k
bng.
Insert/Table, hoc n trong nhm Table.
Rows: s dng cn chn.
Columns: s ct cn chn.
Width: chiu rng ca bng theo s im pixels hoc phn trm
Border: dy ca ng vin bng.
Cell Padding: khang cch ni dung v bin .
Cell Spacing: khong cch gia cc .
XI.1.2.
Hiu chnh bng
1. Chn thm dng, ct vo bng:

Thm dng cui bng
nh v con tr cui cng trong bng.
n phm Tab thm dng.
Cch khc:
n vo vin bng, hay n th<Table> chn bng.
Trong properties inspector nhp s dng mi.
Chn thm ct vo bng:
Trong properties inspector nhp s ct mi.
2. Xo dng, ct, bng
Chn dng, ct, bng
Chn thc n Edit/Cut. (Ctrl +X).
3. Ni cc trong bng:
Chn cc cn ni
ModifyTable Merge Cells.
4. Tch cc trong bng:
Chn cn tch
ModifyTable Splits Cell
- Split Cell into Columns: tch thnh nhiu theo ct.
- Split Cell into Rows: tch thnh nhiu theo dng.
Trang 82
Gio Trnh Thit K Web

-
Number of columns, Rows: xc nh s cn tch theo ct, dng.
XI.1.3.
XI.2.
Khoa CNTT
Thuc tnh ca bng:
Chn table m Properties inspector.

Nhp gi tr mi trong Properties inspector.
Rows: s dng.
Cols : s ct.
W(width) : chiu rng theo im pixel, theo t l mn hnh.
H (hight) : chiu cao mc nh, tu vo ni dung.
Cellpad : khong cch vn bn n trong bng.
Cellspace : khong cch gia cc trong bng.
Align : canh l bng, phi, tri, gia.
Border : dy nt ng vin bng.
Bg color : mu nn ca bng.
Bg image : nh nn bng.
Brdr color : mu ng vin bng.
TRNH BY TRANG :
XI.2.1.
Layout Table v layout cell
Trnh by trang l mt cng on quan trng nht trong thit k Web, i hi tnh m
thut v chnh xc cao. Macromedia Dreamweaver MX 2004 cung cp cc cng c
rt tt trong vic thit k v trnh by trang l Layout Tble v Layout Cell
1. Layout table:
Layout table l dng bin th ca table vi cc thng s i km nh khung vin
Border=0, khong cch gia cc CellSpace =0, khong cch gia ni dung
trong v vin CellPad=0
Layout table dng phn vng cho trang, nu trong trang c nhiu ni dung vi
nhng ch khc nhau hoc cn nhp ni dung vi dng ct bo ch th dng
layout table b cc trang theo ch c chun b trc
Layout Table dng b cc trang, khng dng cha d liu, vin khung ca
Layout Table c mu xanh l cy
Khi thit k dng Layout, cn phi chuyn sang ch Layout view, trong Insert
Inspector, chn tab Layout, chn Layout mode, hoc chn
View Table Mode Layout Mode
Layout Cell
Layout Table
Layout mode
Trang 83
Gio Trnh Thit K Web
Khoa CNTT
2. Layout cell:
Layout cell: Nm trong Layout table, dng cha d liu, d liu trong layout
cell c th l vn bn, hnh nh, khi tht k dng layout cn lu cc layout cell
phi st nhau trnh trng hp lm chi trang b nt
Mt layout Table c th cha nhiu layout table con Mi Layout Table gm c
nhiu dng, mi dng cha nhiu Layout Cell, s Layout Cell trn mi dng c
th khc nhau
V d:
Layout table b cc trang
Layout cell cha d liu
3. Mt s cch kt hp Layout Table v Layout Cell:
V mt Layout Table c kch thc y trang, sau v cc Layout cell bn trong

Layout Table theo ng kch thc v yu cu ca b cc
V nhiu Layout Table cng cp
o Layout Table trn cha cha Logo, Banner, nt ngang.
o Layout Table gia cha ni dung vn bn, hnh nh
o Layout Table di cha a ch lin lc, phone
Hoc kt hp c 2 cch trn, dng 2 Layout table ngang cp:
o Layout Table trn cha Logo, banner, nt ngang
o Layout Table di cha 2 Layout table con, mt bn tri v mt bn phi
Lu :
o Khi v mt Layout Cell bn ngoi Layout Table th Dreamweaver t pht sinh
mt Layout Table cha Layout Cell
o Ch Expanded Tables : cho hin th khong cch t ni dung trong n
ng vin ca Table, tin cho vic hiu chnh rng ca
Trang 84
Gio Trnh Thit K Web
Khoa CNTT
Expanded Tables Mode
Standard Mode
V d:
1) Thit k trang vi mt Layout Table chnh:
Trong Document Window

Chn tab Layout, click nt Layout Table Drag chut v trong Document Window
Khung vin Layout Table c 3 handle dng thay i kch thc ca Layout
Table, trn khung vin c s ch chiu rng ca Layout Table
Thit k trang vi 3 Layout Table ngang cp:
Thc hin ging nh trn, khi k Layout Table phi bt u t bin tri trang
2) Thit k trang vi cc Layout Table lng nhau:
V Macromedia Dreamweaver MX 2004 khng cho php k cc Layout Table
pha bn phi, nn bt buc phi k mt Layout Table ln canh tri, sau mi c
th k lng bn trong Layout Table ln mt Layout Table con.
XI.2.2.
Thc tnh ca Layout Table v layout cell:
C th hiu chnh kch thc bng cch drag chut ko cc handle ca khung, nhng
nu cn kch thc chnh xc th phi nhp cc thng s trong Properties Inspector
ca Layout Table
1. Hiu chnh thuc tnh ca layout table:
Width:
o Fixed: s Pixel xc nh chiu rng
o AutoStretch: t ng ko dn ngang theo ni dung vn bn hoc hnh nh
chn vo Layout Table
Height: Xc nh s Pixel chiu cao, nh nht l 19 Pixel
Bg: mu nn ca Layout Table
Trang 85
Gio Trnh Thit K Web
Khoa CNTT
CellPad: khong cch t ni dung n bin ca Layout Table

CellSpace: Khong cch gia cc Layout Cell
Clear Row Height:
t ng thay i chiu cao ca cc dng cho va kht vi
ni dung, nu khng c ni dung th chiu cao ca dng t nht l 19 Pixel
Remove All Spacers:
C hiu lc khi chn AutoStretch (xo tt c khong
trng tha)
Make cells Width Consistent:
to cc cell trong Layout Table c chiu rng
nh nhau.
Remove Nesting :
xo Layout Table con trong cc Layout Table cha.
2. Xo Layout Table:
Chn vin ca khung Layout Table hoc click th <Table>

Nhn Delete
3. Hiu chnh thuc tnh ca Layout Cell:

Chn layout cell
M thanh Properties Inspector ca Layout Cell
Width:
o Fixed: S Pixel xc nh chiu rng
o AutoStretch: t ng ko dn ngang theo ni dung vn bn hoc hnh nh
chn vo Layout Cell
Height: Xc nh s Pixel chiu cao, nh nht l 19 Pixel
Bg: mu nn ca Layout Cell
Horz: Canh l cho ni dung trong Layout Cell theo chiu ngang (Left, Center,
Right)
Vert: Canh l theo cho ni dung trong Layout Cell theo chiu dc
No wrap: khi ni dung di hn kch thc ca Layout Cell, nu chn mc ny th
vn bn khng xung dng m Layout Cell t dn ra, nu khng chn th vn bn
t xung dng khi gp l phi ca Layout Cell
Di chuyn mt Layout Cell:
o Chn Layout Cell (Ctrl+ Click chut vo Layout Cell) cn di chuyn
o Drag chut ko n v tr mi
Xo mt Layout Cell
o Chn Layout Cell cn xo
o Nhn phm Delete
XI.2.3.
Cc lp Layer:
Trang 86
Gio Trnh Thit K Web
Khoa CNTT
Layer l mt thnh phn mi trong thit k Web, n c th cha ni dung vn bn,

hnh nh xp chng ln nhau, ni trn trang v chuyn ng rt linh hot
Layer thng c s dng thit k trang c cc hiu ng c bit nh ch ri,
nh bay,
im bt li ca Layer l khng hin th trn cc trnh duyt c nh IE4.0, Nestcape 4.0,
i vi cc trnh duyt mi th Layer hin th mt cch trung thc
1. Cch to Layer trn trang:

C th to Layer bng mt trong cc cch sau:
Cch 1:
Chn Standard Mode
Click nt Draw Layer, drag chut v Layer
Cch 2:
Chn menu Insert Layout Objects Chn Layer
2. Hiu chnh Layer:

Chn layer, Layer c chn s xut hin 8 Handle xung quanh, khi ta thc
hin cc thao tc hiu chnh trn Layer
a. Di chuyn Layer:
Chn Layer cn di chuyn
Drag chut ko Layer n v tr mi
Hoc nhp gi tr to trong Properies Inspector
To cch bin tri
To cch bin trn
b.
Thay i kch thc ca Layer:

Chn Layer cn hiu chnh kch thc
Click chut vo mt trong cc Handle, Drag chut thay i kch thc
Hoc nhp thng s trc tip vo Properties Inspector
rng ca Layer
Chiu cao ca Layer
c. Chn ni dung vo Layer:

Nu ni dung l vn bn th nhp trc tip vo Layer
Nu ni dung l hnh nh th drag chut chn hnh trong th mc Image th vo
Layer (hoc chn Insert Image)
d. Xp chng cc Layer:
Khi cn hin th nhiu nh trn trang, nhng khng ch, ta c th xp chng
ln nhau, sau cho xut hin tng lp mt hoc cho tng lp Layer bay ra khi
Trang 87
Gio Trnh Thit K Web
Khoa CNTT
mn hnh, iu ny c th thc hin c khi kt hp Layer, Timeline v

Behaviors
e. Th t cc Layer:
Mi lp Layer u c thuc tnh Z-Index hin th th t trc, sau ca cc lp
Layer, lp Layer sau s che khut lp Layer trc nu n c cng to , c th
thay i trnh t cc lp layer bng cch:
Chn Lp Layer cn thay i th t
Trong Properties Inspector, nhp th t mi trong mc Z-index
Chn nh nn
n /hin Layer
Chn mu nn
3. n hin mt Layer:
Khi khng mun xem Layer no th n Layer bng mt trong cc cch sau:
Trong Properties Inspector, ti thuc tnh Vis: chn Hidden. Hoc m Layer
Panel:
Ct z hin th th t Layer
Cm xp chng cc Layer
XI.2.4.
Timeline Panel:
Clicl biu tng ny n/hin

Layer
Trang 88
Gio Trnh Thit K Web
Khoa CNTT
Timeline Panel l mt bng sp xp nh, lp Layer theo mt trnh t xut hin

trn trc thi gian, n gip to cc hnh nh ng.
M Timeline Panel: Window Others Timeline
Trc thi gian l trc honh

Trc khng gian l trc tung
Fps: (Frame per Second) tc chy u c theo s khung hnh trn giy
1. Mt s lu khi s dng Timeline:
i tng trong Timeline l nh v lp Layer
Cc i tng khc mun s dng Timeline th phi a ni dung vo Layer
trc, sau mi a vo Timeline Panel
2. Cch hiu chnh nh trong Timeline Panel:
Ch c th hiu chnh thuc tnh SRC tn tp tin nh m thi
to mt nh chuyn ng, cn chn nh trong lp Layer
Sau chn lp layer ny vo Timeline Panel
3. Hiu chnh lp Layer trong Timeline Panel:
Ch c th hiu chnh mt s thuc tnh ca lp Layer nh: v tr (left, top) kch thc
(width, Height), th t lp (Z-index) v thuc tnh c th xem (Visibility)
Khng th thay i thuc tnh chiu rng v chiu cao trong trnh duyt Navigator4.0
XI.3.
TO ALBUM LT TNG HNH:
V d1:
To mt album nh lt tng hnh sau khong thi gian nht nh

Chun b 3 hnh c cng kch thc c tn ln lt l H1.gif, H2.gif, H3.gif
Chn tp tin nh H1.gif vo trang
Chn nh, trong Properties Inspector: nhp tn nh: H1, Src: H1.gif
Ko H1 trc tip vo Timeline Panel.
H1 chin 15 khung hnh t 1 n 15
Ko H1.gif vo Timeline thm 1 ln na v sa Src: H2.gif
Lp li vic ko hnh vo Timeline Panel v sa Src: H3.gif
Trong TimeLine Panel, chn Fps=15, ngha l u c chy 15 khung hnh/1s, mi
hnh chim 15 khung, do sau 1s s chuyn sang hnh mi
Chn AutoPlay vic lt hnh t ng din ra khi xem trang
Chn Loop khi n H3.gif th s lp tip H1.gif
Lu tp tin, nhn F12 xem lt hnh trn trnh duyt
Trang 89
Gio Trnh Thit K Web
Khoa CNTT
V d 2:
To chuyn ng cho my bay t tri sang phi ca mn hnh, t to (0,0) n to
(600,0)
Trong Standard view
Chn Insert Layer, t tn Layer_Maybay, T=0, L=0
Chn nh my bay vo Layer
Chn Layer ko vo TimeLine Panel, chim t khung hnh 1 n 15
Chn khung hnh 15 trong Layer_Maybay
Trong Properties Inspector, nhp L=600, T=0, Fps=15, chn AutoPlay, chn Loop
Lu tp tin, nhn F12 xem kt qu trn trnh duyt
V d 3:
To 2 chuyn ng xy ra cng mt lc, khi my bay ang bay th hoa tuyt ri t
trn xung
Chn thm mt lp Layer 2, t tn Layer_Tuyet, L=300, T=0
Chn nh hoa tuyt vo Layer ny
Ko Layer_Tuyt vo trong TimeLine Panel, knh th 2, t khung hnh 5 n 15
Chn khung 15 ca lp Layer_Tuyt kinh 2
Trong Properties Inspector, nhp L=300, T=200.
Lu tp tin, nhn F12 xem kt qu, khi my bay ang bay th mt hoa tuyt ri xung
t to (300,0)
XI.4.
TEMPLATE:
Template khng nhng gip ta c th s dng cc thnh phn dng chung m cn gi
quan h gia cc thnh phn trong mt mu trang c thit k, b cc sn. Ta c th
cn c vo mt mu template to nhanh nhiu trang c cng mt b cc thit k.
Thao tc vi template, ta cn phn bit r gia trang mu v trang s dng template.
Trang mu template
L tp tin kiu .dwt vi phn thit k chun cho mt b cc dng chung, trong trang
c 2 loi vng: vng c kho v vng khng kho.
Trang s dng template:
L tp tin kiu .htm nhng c b cc ging nh trang mu template, ta ch c php
hiu chnh, nhp ni dung mi cho cc vng khng kho. Khi c s thay i trong
trang mu template th cc vng kho ca cc trang s dng template cng s t ng
cp nht theo.
XI.4.1.
To mi mt Template:
1) To trang template:
To mi mt trang HTML template (mu) nh mt trang bnh thng K Layout

table, Layout cell ph hp, nhp ni dung, chn hnh cho cc vng dng chung
Lu trang mu template: File Save as template
Khi lu trang di dng template (.dwt) mc nh tt c cc vng ca trang
template u b kha, do phi m kha cho cc vng khng dng chung
Chn vng cn m kha
Insert template objects Editable Region t tn cho vng m
kha
Trang 90
Gio Trnh Thit K Web
Khoa CNTT
Cc cch khc to Template:

To template theo mu c sn:
Chn thc n File/New..
Chn Page Designs/Text: Article D with Navigation.
Chn Creat template cui phi hp thoi.
2) To trang theo mu template:

Chn File/New
Trong hp thoi New Document, chn tab template
Chn mu template to sn create.
Nhng vng dng chung s b kha, khi thit k ngi dng ch c th thay i
ni dung trong phn c m kha
XI.4.2.
Hiu chnh Template:
1. Hiu chnh template

M template cn hiu chnh:
Trang 91
Gio Trnh Thit K Web
Khoa CNTT
Modify/ template / Open Attached template.

Xut hin trang mu template, thc hin hiu chnh
2. i tn template:
Trong Asset Panel, nhm template
Chn template cn i tn .
3. Xo mt template:
Trong Asset panel, chn nhm template.

Chn template cn xa
Nhn delete .
Khi xo mt template s nh hng n tt c cc trang c s dng template.
Nu thc s mun xo, trc tin nn m cc trang s dng template ri chn
chc nng tch khi template
4. Tch trang khi template
Modify/ Template/ Detach from template.
5. S dng Template cho trang:

Sau khi to c cc trang mu template, ta c th d dng s dng chng.p
dng mt mu template:
File/ New/ HTML to trang mi.
Modify/ Template/ Apply template to page
Chn mu template.
Nhp ni dung, hnh nh vo nhng vng khng kho.
Hoc thc hin cch khc:
M Asset Panel, nhm template.
Chn trong danh sch cc mu template.
Chn nt Apply.
6. Cp nht trang s dng template:

Modify/ Template/ Update current page, cp nht trang hin hnh.
Modify/ Template/ Update page/ Entire site trong list box look in.
Trang 92
Gio Trnh Thit K Web
Khoa CNTT
Trang 93
Gio Trnh Thit K Web
CHNG XII:
XII.1.
Khoa CNTT
BEHAVIORS - FORM
BEHAVIORS
XII.1.1. Tng quan v Behaviors
Behaviors l cc on kch bn (Scrip) c thit k sn bng chng trnh
Dreamweaver, n gip thm cc iu khin, hm kim tra trnh duyt, Shockwave, thm
h thng lin kt Popup_Menu, chn m thanh, kim tra form, lm phong ph hn trang
Web ca bn. Mi Behaviors gm 3 yu t:
i tng cha Behaviors:
i tng cha bin c rt a dng, c th l trang, form, nh, nt, mt dng text
Phi chn i tng ph hp vi bin c v hnh ng.
Bin c (Event) xy tra trn i tng: L cc s kin xy ra trn i tng c
chn, c rt nhiu loi bin c, cc bin c khc nhau trn cc i tng khc nhau
trn cng mt trang Web.
Hnh ng i km vi bin c: L mt on m lnh thc hin nhim v cho i
tng.Hnh ng ch c gi khi c bin c tng ng, iu ni ln mi quan h
cht ch gia i tng, bin c v hnh ng.
Mt i tng trong trang thng i km vi mt Behaviors, nhng cng c trng hp
mt i tng c nhiu hn mt bin c, khi tu thuc vo trnh t cc Behaviors m
chng trnh ln lt kim tra tng bin c.
Nu mt i tng c nhiu Behaviors m cc Behaviors ny li c cng loi bin c
(nhng khc hnh ng) th khi bin c xy ra, lp tc cc hnh ng tun t thc hin
XII.1.2. Behaviors Panel

M Behaviors Panel: Chn Window Behaviors Xut hin Behaviors Panel
Chn i tng gn Behaviors
Tu thuc vo vic chn cc i tng khc nhau m Behaviors t chn loi binc
ph hp v cho php thc hin mt s hnh ng tng ng trn i tng , bn c
th iu chnh li, do vic chn i tng l cng vic u tin v rt quan trng
trong vic to mt Behavior
i tng c chn s hin th trn Behaviors Panel di dng <Tag> Actions, tn
th HTML k bn t Actions
1. Thm, xo mt Behaviors
Thm Behaviors:
Click nt (+) chn hnh ng trong danh sch
Mt bin c tng ng xut hin (c th hiu chnh li)
Xo Behaviors:
Chn dng Behaviors cn xo trong danh sch
Click nt (-)
2. Thay i trnh t Behaviors

Tu thuc vo trnh t cc Behaviors m cc hnh ng theo trnh t thc
hin. C nhng hnh ng ngang cp th khng cn trnh t.
Cc Behaviors khc bin c
V d: mt nh <img> c 2 bin c khc nhau onMouseOut v
OnMouseOver, khng cn quan tm n trnh t
Trang 94
Gio Trnh Thit K Web
Khoa CNTT
Cc Behaviors c cng bin c:
Trong trng hp ny, phi sp xp ng trnh t th mi c kt qu nh

mong mun. Cch sp xp:
Chn Behaviors cn sp xp
Click nt
sp xp
3. Thay i bin c:
Khi hnh ng c chn th bin c tng ng cng c gn cho Behavior. Khi
bin c khngph hp, ta c th thay i bin c khc bng cch:
Chn dg Behaviors cha bin c cn thay i,
Click chut vo mi tn
trn dng Behaviors
XII.1.3. Tn v ngha cc bin c
OnAbort: Khi ngng ti mt nh, hoc nhn nt Stop trong trnh duyt
OnAfterUpdate: Khi trang thc hin xong vic cp nht ngun d liu
OnBeforeUpdate: trc khi trang thc hin cp nht ngun d liu
OnBlur: khi i tng c chn khng cn trng thi hin hnh
OnBounce: Khi ni dung trong Marquee n bin ca Marquee
OnChange: Khi c s thay i trong Textfield hay List/menu ca form
Onclick: Khi Click chut vo i tng
OnDblClick: Khi Double Click vo i tng
OnError: Khi xy ra li hin trang ca trnh duyt
OnFinish: khi ni dung Marquee i ht mt vng
OnFocus:Khi nhp ni dung vo TextField
OnKeyDown: Khi nhn phm xung
OnkeyUp: Khi th phm ra
OnKeyPress:Khi nhn phm ri th ra
OnLoad:Khi hon tt vic ti trang mi
Trang 95
Gio Trnh Thit K Web
Khoa CNTT
OnMouseDown: Khi nhn chut xung

OnMouseMove: Khi di chuyn chut
OnMouseOut:Khi di chuyn chut ra ngoi nt
OnMouseOver: Khi di chuyn ngang qua nt
OnMouseUp: Khi th chut ra
OnMove: khi ca s hoc khung di chuy
OnReadyStateChange: Trng thi thnh phn thay i, trng thi gm: Uninitialized,
loading, complete
Onreset: Khi Form tr v gi tr mc nh
OnResize: khi ca s hoc khung thay i kch thc
OnRowEnter: Khi ngun d liu c thm dng mi
OnRowExit: khi dng d liu tn ti
OnScroll: Khi cun thanh cun
OnSelect: Khi chn Text, MenuItem ca List/menu
OnStart: Khi ni dung Marquee bt u 1 vng
OnSubmit: Khi gi Form
OnUnload: Khi ri khi trang
XII.1.4. Hiu chnh Behaviors

1. Cp nht behavious:
Mt Behavior sau khi c to s xut hin trong danh sch cc Behavior, ta c th
cp nht, hoc thay i cc thng tin ca Behavior bng cch:
Chn i tng c Behavior
M Behavior Panel
Double Click trn Behavuor mun cp nht
Thc hin vic chnh sa
2. Thay i thuc tnh ca behavious:
Thay i thuc tnh ca i tng khi xem trang l mt vic lm th v, thao tc rt
n gin nhng c th to ra hiu ng l nh s n hin hoc chuyn ng ca i
tng
V d: Nt to s n hin ca i tng
Khi c mt s lp nh xp chng ln nhau, bn c th thay i thuc tnh n hin ca
chng.
Cch to:
To mt trang mi
o Chn Layer 1 cha nh th nht, nhp Layer ID: Layer 1
o Chn Layer 2 cha nh th hai, hiu chnh sau cho cng to vi Layer
1
To Behavior iu khin:
o Chn nt iu khin gc trn mn hnh
o Gn Behavior: chn change properties
o Xut hin hp thoi Change Properties: Trong danh sch Type of Object:
chn Layer
Name Object: nhp layer1
Properity: Chn Select: style.Visibility
New Value: Hidden OK ng hp thoi
Trang 96
Gio Trnh Thit K Web
Khoa CNTT
Trong Behavior Panel chn tn bin c l OnMouseOver

To thm mt Behavior cho nt ny, trong hp thoi Change Properties, nhp cc
thng s tng t, nhng ti New value: nhp visible
o Trong Behavior, thay tn bin c l onMouseOut
V d : To nt iu khin to i tng. Bn c th thay i to ca Banner v

tri hay phi tu thuc vo click mi tn theo hng no
Cch to:
To trang mi
Chn mt Layer, chn nh banner vo Layer
Chn Layer, thay i cc thuc tnh nh sau:
LayerID: LayerLogo, L=0, T=0
Chn nt mi tn iu khin to nh
Ko 2 nt mi tn ra gia trang
Chn nt mi tn tri, chn Behavior, chn Change Properties, nhp thng s:
Properties: Style.left
New Value=0 OK
Trong Behavior, chn bin c OnClick.
Lm tng t cho mi tn phi
Properties= Style.left
New Value=270 OK
Trong Behavior, chn bin c OnClick.
Check Browse- Check plugin
Check Browse
Trong site c th chn vo mt s hiu ng c bit khng phi trnh duyt no cng
xem c
V d
Bn to 2 Website, Mt Site mi nht cha cc hiu ng c bit, c trang ch l tp tin
c tn SiteMoi.htm, Mt site thit k theo kiu c, c trang ch l tp tin c tn
Sitecu.htm
Dng Behavior kim tra trnh duyt ca ngi xem, nu c trnh duyt mi th xem
Site mi bt u vi trang SiteMoi.htm, ngc li th xem Site c vi trang SiteCu.htm
Cch thc hin:
To trang mi (khng cn nhp ni dung trang
Trang 97
Gio Trnh Thit K Web
Khoa CNTT
Chn th <Body>
Trong Behavior Panel, Click (+) chn Check Browser
Nhp URL: SiteMoi.htm
Nhp Alt URL: SiteCu.htm OK
Mt bin c Onload km hnh ng Check Browser. Lu tp tin F12 xem kt qu
XII.1.5. Check Plugin

Khi mt trang cha c thnh phn Flash hay Shockwave th ngi xem cn c thm
Plugin xem c trang, m bn khng bit ngi xem c ci cc Plugin xem hay
khng, khi bn c th d phng thm mt trang thng khng s dng Flash,
Shockwave
Nu ngi xem c Plugin th cho xem trang TrangFlash.htm, ngc li th xem
trangthng.htm. Cch thc hin:
nh hng Site:
To trang mi ( Khng cn ni dung)
Chn Tag <Body>, Click nt (+), chn Check Plugin
Select: Shockwave
If found, Go to URL: TrangFlash.htm
Otherwise, go to URL: Trangthuong.htm
XII.1.6. nh hng Page:

Tng t, chn nt lin kt <Image>
Trong Behavior, chn bin c Onclick, action Check Plugin
XII.2.
FORM:
Form giao tip gia ngi tham quan v ngi ch web, c th lin lc thng qua Email.
Form cn l mn hnh nhp liu, tp hp nhng nhp liu, nt chn, nt kim tra hay
dng lit k danh sch.y l cch giao tip gia ngi tham quan vi ch trang web.
Dreamweaver gip to cc biu mu rt d dng v nhanh chng. Cc nhp liu, cc nt
iu khinTa c th thay i cc mc nh ca form v x l thm cho ph hp vi
mnh.
XII.2.1. TO FORM:
Chn menu Inert/ Form.
Phm vi ca form
ng khun vin khng ln nt mu i din cho gii hn trong form. Mi

thnh phn ca form u phi nm trong khun vin ny.
Trang 98
Gio Trnh Thit K Web
Khoa CNTT
Trong form cn thit phi c 2 nt c bit SUBMIT v RESET

o Submit: chp nhn ni dung ca form, v cho php ngi duyt gi thng tin, d
liu trong form v server
o Reset: Thit lp gi tr ban u ca tt c cc iu khin trn form
XII.2.2. Cc i tng trong form:

C 2 cch chn cc i tng vo form
Cch 1:Chn tab form trn Insert Panel.
Cch 2:Chn menu Insert FormChn i tng
1. TEXT FIELD:
a) Cch to:
Dng nhp cc thng tin ngn nm gn trong mt dng, loi ny thng dng nhp
cc thng tin v h tn, a ch, s in thoi
t con tr trong ng vin form.
Chn thc n Insert Form Text field
b) Thuc tnh caTextfield :
Chart Width : S k t cho chiu di .

Max Chars : S k t nhiu nht c th nhn.
Init Value : Ni dung khi to ca nhp liu.
Single Line : nhp liu mt dng.
Multi line : nhp liu nhiu dng.
Password : nhp cc loi mt m, khi nhp liu tng k t nhp c thay
bng du * .
2. RADIO BUTTON :
Trong 1 nhm cc nt chn ch c chn 1 ty chn. Cc nt radio thuc cng nhm
phi c cng tn nhm (Group), nhng khc nhau v gi tr(value).
a) Cch to:
t du nhy ti v tr mun chn
Chn insert Form radio Button
b) Thc tnh ca Radio button:
Checked value : Gi tr tng nt n trong nhm.
Initial State : trng thi ban u ca nt.
Trang 99
Gio Trnh Thit K Web
Khoa CNTT
Checked: Nt c chn.
Unchecked: Nt cha c chn.
3. RADIO GROUP: :
To mt nhm nt radio.
a) Cch to:
Chn InsertFormRadio group.Hp thoi Radio Group xut hin.
b) Thc tnh ca Radio group:
Name: Nhp tn nhm

du +: thm nt, du -: xo nt.
Label l tn nhn nt.
Value l gi tr gi v cho ch web.
Layout Using: B cc ang s dng
Line break: Cc nt xung dng
Table: Cc nt nm trong mt bng.
4. CHECKBOX:
To mt nhm cc ty chn, cho php chn nhiu ty chn cng mt lc hoc khng
chn g c.
Cch to: Chn Insert Form Objects Checkbox.
5. LIST/ MENU (Dropdown menu)

Hp lit k danh sch cc ni dung theo tng dng, c cun li thnh 1 dng. Khi
cn xem danh sch, Click nt mi tn ch xung bn phi hp lit k th danh sch
xung.
Chn menu Insert/ Form object/ List/ Menu.
Trong properties inspector ta nhp vo tn tu trong list/menu.
Chn kiu type: Menu.
n nt List Values
n + thm mc, - xo mc chn.
n nt OK, ng hp thoi List. Value
Chuyn qua dng xem Preview in browser, hay F12 xem kt qu.
6. TEXTAREA:
Trang 100
Gio Trnh Thit K Web
Khoa CNTT
TextArea dng nhp cc thng tin, d liu di gm nhiu dng, thng dng cho cc
ghi ch, kin, cm ngh, thc mc ca ngi duyt web.
Chn menu InsertForm object Textarea.
TextArea Properties:
o Text field : tn nhp liu nhiu dng.
o Char Width : S k t cho chiu di .
o Num lines : S dng cn hin th.
o Wrap : Vn bn t xung dng.
o Init Value : Gi tr khi to ca
7. FILE FIELD:Gi km tp tin:

Trong form, ngoi cc thng tin ngn gn m ngi tham quan c th nhp trc tip,
nu h mun gi mt on vn bn nhiu dng, hay mt hnh nh minh ha th ta nn
chn thm file field.y l thnh phn form gip gi km mt tp tin theo cc thng
tin nhp.
Chn menu InsertForm objectsFile field
n F12 xem kt qu: Nu mun gi km nh th n nt Browser ri tm tp tin
nh cn gi hay cng c th nhp ng dn th mc cha hnh nh.
8. BUTTON:
Chn menu Insert Form objectButton.

Cc thuc tnh ca Button:
o Button name.t tn cho submit

o Gn nhn cho button.
o Action:
Submit form.: nt submit
Reset form: nt reset
None: button do ngi s dng gn hnh ng
9. NT HNH NH::
Chn hnh nh vo trang: InsertImagehiu chnh thuc tnh hnh nh ny
thnh cc nt nh Submit, Reset.
a. Cch to:
nh v con tr ni cn chn hnh.
InsertForm object Images field.(hoc click nt Image field trn thanh cng
c)
b. Image field properties:
ImageField: Submit chn nh lm nt submit
Reset chn nh lm nt reset.
W (Width): chiu rng nh lm nt.
H (Height): chiu cao nh lm nt.
Src: tn tp tin nh lm nt.
Alt: cu ghi ch khi chut ngang qua nh.
Trang 101
Gio Trnh Thit K Web
Khoa CNTT
Align: canh v tr nh so vi cc i tng khc.

Edit Image: gi chng trnh Fire Works x l nh.
10. JUM MENU :

l cch xp gn danh sch cc lin kt li trn mt dng, khi cn ch lin kt no,
ngi tham quan th danh sch lin kt xung, ri chn trong s . Cch ny gip
nhng trang web c qu nhiu lin kt c th thu hp din tch, to thng thong cho
web hn. i khi vic chn lin kt ny rt nhy, n s nhy nhanh n cc trang lin
kt, khc phc, ta c th chn thm nt GO k bn. Chn lin kt trong danh sch
xong phi nhn nt GO xc nhn.
a. Cch to:
nh v con tr.
Chn thc n Insert Form Objects Jump Menu.
Trong hp thoi insert Jump Menu
o Text: t tn cho jum menu
o When selected, Go To URL : Nhp tn trang lin kt
o Kt qu s xut hin trn dng Menu Items.
o Du + hoc thm hoc xo mt Menu Item.
o Mi tn ln hoc xung thay i trnh t cc Menu Items.
o Menuitem: danh sch cc menuitem c nhp trong text.
o Open URL In: Target ca khung, hay ca s chnh hin th trang.
o Menu name: Tn ca Menu.
o Select Frist Item After URL Change: Chn Item u tin sau khi lin kt.
o Insert Go Button After Menu: chn thm nt GO.
V d: mn hnh thit k: thuc tnh ca jum menu
Trang 102
Gio Trnh Thit K Web
Khoa CNTT
Kt qu trn trnh duyt:
b. Hiu chnh Jump Menu:

Khc vi cc thnh phn khc ca form, khi cn hiu chnh tn Menu Item, hay
lin kt tng ng, ta khng xem Properties Inspector m phi m Behaviors.
Chn Jump Menu.
Chn menu Window Behaviors xut hin Design Panel ca Behaviors.
Double click vo tn Action: Jump Menu.

Hp thoi Jump menu xut hin cho pht ta hiu chnh.
Trang 103
Gio Trnh Thit K Web
Khoa CNTT
c. Kim tra lin kt ca Jump Menu:

kim tra lin kt ca Jump Menu, ta cn xem trang trong trnh duyt, ri n
vo tn Menu Item trong Jump Menu lin kt i.
File Preview in browser, hoc F12.
Click vo dng Menu Item, tn trang lin kt n.
XII.2.3. S dng Behavior cho Textfield:

Textfield l nhp liu ca ngi tham quan, nhng c trng hp h khng nhp liu
cho , hoc nhp gi tr khng ph hp, behavior ca textfield c th gip kim tra cc
trng hp ny.
V d:
Ta c mt form t phng khch sn, d qun l, ta cn thit k sao cho vic nhn
thng tin l y v chnh xc nht.
1) Yu cu: Ta cn kim tra vic nhp liu ca ngi tham quan, c th l:

Phi nhp d liu cho H v tn.
email phi ng l ch Email, ngha l phi c k t @ trong a ch email.
Trang 104
Gio Trnh Thit K Web
Khoa CNTT
Ngy phi nhp t s 1 n 31.

Thng phi nhp t s 1 n 12.
Nm phi nhp t s 2002 n 2010.
, S ngi phi nhp d liu s.
Ghi ch l thng tin thm c th b qua khng nhp liu cng c.
2) Cch thc hin: kim tra cc iu kin ny, phi dng Behavior ca form.
Chn form T PHNG KHCH SN.Hay chn nt Submit, Reset lm i
tng kim tra.
Trong Behavior Panel, click du (+).
Chn chc nng Validate Form. Xut hin hp thoi validate form cha cc thng
tin gip iu khin Text field ca form
Name field: danh sch tt c cc text field c trong form . Nu mun t iu
kin cho text no th n chn cho n hin hnh.
Value requied: yu cu text phi c nhp d liu, nu khng s bo li.
o Anything: d liu loi no cng c.
o Email address: d liu phi c k t @.
o Number: d liu dng s.
o Number fromto : d liu s trong khong xc nh.
3) iu kin nhp TextField:
Cch nhp iu kin cho Textfield: Trong hp thoi Behavior, click du (+), chn
Validate Form, xut hin hp thoi Valildate Form:
o Named Fields: Chn tn field mun gn iu kin
o Value: Nu chn Require th yu cu phi nhp d liu cho field ang chn,
nu khng s bo li
o Accep: Cho php chn kiu d liu, nu nhp sai kiu d liu chn th xut
hin thng bo li
o Anything: mi loi d liu
o Number: d liu kiu s
o Email Address: kiu i ch Email
o Number Form: gi tr kiu s nm trong khong From to..
V d: iu kin H v tn, chn Required
iu kin Ngy:chn Required, tng t cho thng, nm
Trang 105
Gio Trnh Thit K Web
Khoa CNTT
Trang 106
Gio Trnh Thit K Web
CHNG XIII:
XIII.1.
Khoa CNTT
FRAMESETS KIM TRA V

XUT BN
GII THIU
XIII.1.1. Trang khung (frameset):
L trang HTML c bit. Trang khung khng mang ni dung, khng c th <BODY>.
Trang khung ch gip chia vin khung (frame) cho trang web. Mun to trang khung ta phi
xc nh r cc yu cu sau:
S khung (frame) trong mt trang khung (frameset)
Tn cho tng khung c th.
Cc tp tin HTML lm ni dung cho tng khung.
V d:
Tn khung: TopFrame
Tn khung: LeftFrame
Tn khung: MainFrame
Tp tin: TRN.HTML
Tp tin: TRI.HTML
Tp tin: PHI.HTML
tp tin: framepage.html
Trong v d trn, tp tin trang khung c tn framepage.html c chia lm 3 khung:
khung trn, khung tri v khung phi.Vi tn c th tng khung l:
Khung trn : TopFrame.
Khung tri : Leftframe.
Khung phi : MainFrame.
Cc tp tin HTML lm ni dung tng khung l:
Tp tin TRN.HTML lm ni dung TopFrame.
Tp tin TRI.HTML lm ni dung LeftFrame.
Trang 107
Gio Trnh Thit K Web
Khoa CNTT
Tp tin PHI.HTML lm ni dung MainFrame.
u v khuyt im khi thit k mt trang khung:

u:
C th hin th nhiu trang HTML cng lc trn mn hnh duyt.
Phn chia tp tin r rng cho tng khung c th, nhm tp tin cha logo, banner
ring, nhm tp tin cha cc nt lin kt ring v nhm tp tin cha ni dung ring.
Phn nhm nn d qun l h nt lin kt, gip iu khen websit thun tin hn.
Khi lin kt lt trang ch lm thay i ni dung trong mt khung, cc khung khc vn
gi nguyn, nn hn ch c vic thit k cc thnh phn lp li nh logo, banner,
nt lin kt.., cc thnh phn dng chung c th ring trong khung chung.
Khuyt:
Kh phc tp trong thit k. i hi ngi thit k phi hiu cn k v khi nim,
thao tc thc hin trn trang khung.
Nu khng kho thc hin, cc trang c th t b gy hoc lin kt n cc trang
khng nm ng trong khung c ch nh.
Lu trong thit k trang khung:
Phn bit s khc nhau gia trang khung (Frameset) v khung (Frame), trang khung
l tp hp cc khung n. Tp tin trang khung FramePage.html c chia lm 3
khung, khung trn (topframe), khung tri (leftframe) v khung chnh (mainframe).
Tn ca tng khung nh Topframe, Leftframe, Mainframe do Dreamweaver mc nh
t tn, ta phi ghi nhn r tng tn khung tin thao tc lin kt trong trang khung,
ta cng c th t t tn cho trang khung.
Phi phn bit r s khc bit gia tn khung v tn tp tin lm ni dung cho khung
V cc khung c chia ra t trang khung nn kch thc tng khung b hp, vng
hin th ca tng khung nh, nn khi thit k ta ch quan tm nhng vng c hin
th nh: Khung TRN, TRI, cc tp tin TRN.HTML, TRI.HTML.
Khi cn xem trang khung, phi m tp tin khung framepage.html, nu m cc trang
trn.html, tri.html, phi.html ring l th ni dung hin th khng trn vn.
XIII.1.2. Cc dng trang khung v trnh t thit k:

1. Cc dng trang khung thng s dng:
Trang 108
Gio Trnh Thit K Web
Khoa CNTT
2. Trnh t thit k trang khung:
Phc tho b cc dng trang khung trn giy nhp.

To website mi (site/ new site) cha trang khung ny.
Phn nhm tp tin ni dung v to ni dung tng nhm.
Chn loi trang khung tng ng v ch ra tp tin ni dung i din cho
tng khung.
Lu trang khung.
XIII.2.
CCH TO TRANG KHUNG V LIN KT TRANG
Dreamweaver to sn mt s dng trang khung chun, ta c th chn v s dng chng mt

cch d dng. Nu khng c khung nh thch, ta c th chn trang khung gn ging nht
ri t hiu chnh hay thit k li.
XIII.2.1. Cch to:

Chn thc n File/ New
Chn Frameset Chn dng trang khung trong khung Framesets
Xem mu trang khung bn ct Preview, click Create.
Trang 109
Gio Trnh Thit K Web
Khoa CNTT
XIII.2.2. M frames Panel:

Frames Panel gip ta thao tc vi tng khung mt.
Chn thc n Windows Others Frames.
Hoc nhn phm Shift + F2
XIII.2.3. Thao tc trn Frames Panel:

Tu thuc vo thao tc trn Frames Panel m Properties Inspector tng ng cung
cp thng tin ph hp
frames panel
Click vo gia khung, hay tn khung trong Frames panel chn khung cn lm
vic, hiu chnh nh i tn khung, di ni dung tp tin khung, thanh cun, mu
nn.
Click ng vin ngoi cng chn c trang khung, click vo ng vin gia
khung trn, khung di chn dng khung. Click ng vin gia khung tri, phi
chn c ct khung. Sau thao tc chn l thay i mi quan h gia 2 khung,
thng l kch thc, t l khung, ng vin khung.
1. Hiu chnh trang khung:

a. Chia khung
Chn tn khung trong Frame Panel cn chia.

Chn thc n Modify Frameset.
Chn Split Frame Left/ Right / Up / Down chia mt khung thnh 2 khung theo
mun.
Trang 110
Gio Trnh Thit K Web
Khoa CNTT
b. Xo khung:
a tr chut n bin khung cn xo.
Ko bin khung ra khi mn hnh, hoc ko sang hng bin ca khung cha.
c. Hiu chnh thuc tnh trang khung:
Thay i kch thc khung: Sau khi t ni dung vo khung, n khung khng
va vi ni dung thit k , ta c th thay i nhanh bng cch
o t con tr chm vo bin khung.
o Gi chut v ko bin n v tr mi.
Thay i tn khung :
o Chn khung cn i tn.
o Nhp tn mi trong Frame Name.
Thay i ni dung i din trong khung:
o nh con tr trong khung cn i ni dung.
o Nhp tn tp tin .html mi vo Site Panel.
o Hoc n nt Browse to file tm tp tin thay th.
Thay i bin cho khung:
o Margin Width.
o Margin hight
Thay i kch thc khi xem:
o nh du vo No Resize, khng cho php thay i kch thctrc khi
duyt trang khung.
Khng hin th thanh cun: Ti mc Scroll:
o Chn Yes: lun lun hin thanh cun.
o Chn No: khng hin th thanh cun, d trang ni dung di nhiu dng.
o Chn Auto: Thanh cun t xut hin khi ni dung di hn trang.
o Chn Default: Tu thuc vo ci t mc nh.
Khng vin nt ng khung:
o Border = No khng c ng vin
o Border = yes: c ng vin
o Width : Chn kch thc nt vin
T mu vin khung: Border Color
Trang 111
Gio Trnh Thit K Web
Khoa CNTT
2. Lu trang khung:
a)
b)
XIII.3.
Lu c khung trang:
Chn vin ngoi cng trang khung trong Frame Panel.
Chn thc n File Save Frameset As t tn trang khung.
Chn File Save Frameset lu cp nht thng tin.
Lu trang i din khung :
nh con tr vo khung cn lu.
Chn thc n FileSave Frameset As.
Nu ch cn cp nht thng tin ni dung trong khung th chn
Filesave Frameset.
KIM TRA V XUT BN

XIII.3.1. Kim tra:
Trc khi xut bn Website ln Server, cn phi thng qua mt s thao tc kim tra kt
qu ca tng trang trong c WebSite, bn phi chc chn rng phn trnh by b cc, lin
kt trang p ng yu cu khi xut hin trn trnh duyt. Ngoi cc kim tra thng
thng nh ni dung, hnh nh, lin kt, cc th lnh trn Site cc b, cn phi kim tra
thm mt s cc yu t sau y:
Trnh duyt Browse: Kim tra cc chc nng ca Site ph hp nht vi trnh duyt no.
Mn hnh: B cc c thay i trn mn hnh c kch thc 1024x768 pixel so vi mn
hnh 800x600, phi c gng trung ho trong trnh by, thit k nh, chn kiu font, vi
kch c ph hp.
Lin kt Link: khng th trong Site nhng lin kt gy, lin kt khng ng trang ch
hoc nhng trang m ci khng lin kt
Thi gian ti trang:l khong thi gian ngi xem ch trang hin th, khng nn a qu
nhiu hnh nh vo trang, c th to trang Album.
To mt Site th nghim: Nn chp Site n mt th mc khc, hoc mt my cc b
khc chy th nghim, gip bn hiu chnh chnh xc hn.
gip bn d dng hn trong kim tra, Dreamweaver cung cp lp bn bo co kt qu
tng trang, c Site rt chi tit, da vo bn c th qun l v hiu chnh mt cch hiu
qu nht. Cch thc hin nh sau:
Chn File Check Page Check Link
Xut hin ca s Result Inspector . Vi nhm Search, Validation
o Nhm Search:
Khi cn hiu chnh mt s thng tin nh: tn cng ty, s in thoi, , nm
ri rc cc trang khc nhau, khng sai st trong qu trnh tm kim v
thay th, ta chn nhm Search:File Check Page Check Link
Trong nhm Search, Click nt mi tn, Chn Find and Replace
Find What:Nhp ni dung cn tm
Replace With: nhp ni dung thay th, chn Replace All
o Nhm kim tra tnh hp l (Validation):
Nu thit k trang Web bng cc th lnh HTML th khng trnh khi nhng
sai st nh, ta c th m trang v kim tra tnh hp l ca cc th HTML
Click nt mi tn, chn validation Current Document
Xut hin hp thoi ch r cc th khng hp l
Trang 112
Gio Trnh Thit K Web
Khoa CNTT
o Kim tra tnh tng thch trn trnh duyt

C nhng th lnh m trnh duyt c khng nhn din c, kim tra tnh
tng thch trnh duyt, chn nhm Check Target Browser Check
Click mi tn, chn Check Target Browser
Chn loi trnh duyt, version cn kim tra Click check
XIII.3.2. Kt ni v xut bn
1) Kt ni:
Sau khi hon tt vic kim tra, nu c kt ni vo mng, th c th xut bn Site
ln Server. Trong Site Panel click nt Connects to Remote host kt ni, hoc
chn Remote view.
Put file
Nu mt site c kt ni th s hin th danh sch tp tin th mc trn server.

Nu cha kt ni th phi thit lp mt kt ni ln server
Click dng Define a remote Site
Trong Category: Chn Remote Info
Access: Chn Local/Network. Nu bn c quyn truy cp Server qua
giao thc FTP th c th chn FTP, nhp tn v m s truy cp kt
ni
Chn Remote Folder : Th mc trn Server ni s cha Site
2) Xut bn:
Sau khi kt ni, thc hin Put file ln server:
Click nt Put file
Xc nhn put ton b website
Kim tra li sau khi put file bng cch click nt Expand Collapse
xem kt qu
Trang 113
Gio Trnh Thit K Web
CHNG XIV:
XIV.1.
Khoa CNTT
TNG QUAN V JAVASCRIPT
GI THIU V JAVASCRIPT:
Javascript ra i vi tn gi LiveScript, sau Nescape i tn thnh Javascript. Tuy nhin

gia Java v Javascript c rt t cc im chung d rng c php ca chng c th c nhng
im ging nhau.
Ngn ng Javascript c to bi Nescape vo nm 1996 v c a vo trong trnh
duyt Nescape Navigator 2.0 ca h thng qua trnh bin dch c v thc hin cc m
lnh Javascript c km theo trong cc trang HTML..
Javascript l mt ngn ng kch bn (script) vit kch bn cho pha client. Client side l
nhng yu cu ca ngi s dng c x l ti my khch. Thng thng nhng yu cu
ny l tnh tan, kim tra tnh hp l ca d liu hay cc hiu ng, cc yu cu ny thng
khng lin quan n ngun c s d liu trn server.
XIV.1.1. c im ca JAVASCRIPT:
Javascript l mt ngn ng kch bn c vit chung vi HTML.
Khng bin dch nh cc ngn ng khc. Khi trang web load xung n c trnh
duyt thng dch.
Javascript l ngn ng thit k ng v cc i tng c kh nng tng tc vi
nhau thng qua ngi s dng hoc cc s kin.
L ngn ng hng i tng. Phn bit ch hoa, ch thng
c h tr bi tt c cc trnh duyt nh Nescape v Internet Explorer
JavaScript c kh nng to v s dng cc i tng(Object), cc i tng gm
2 nhm:
o Cc Object do ngi s dng to ra gm :
nh ngha thuc tnh cho i tng
C php: Object Name.Properties
Thm phng thc cho i tng
To mt instance ca i tng
o Cc object c sn. JavaScript cung cp mt b cc Builtin Object cung
cp cc thng tin v s hin hnh ca cc i tng c load trong trang
Web v ni dung ca n, cc i tng ny gm phng php (method) lm
vic vi cc thuc tnh (properties) ca n.
XIV.1.2. Cu trc ca an Javascript:

<Script language=JavaScript>
Cc lnh Javascript
</script>
XIV.1.3. JAVASCRIPT trong mt trang HTML
t cc dng m lnh ca Javascript gia cp tag <script></script>
C th vit nhiu an m lnh Javascript trong cng mt tp tin HTML. Cc
khi m lnh Javascript c th t bt k ni no ca trang HTML. C th t
trong cp tag <head></head> hoc trong cp tag <body> </body> tuy nhin ta
nn t trong cp tag <head> d kim sat m lnh v cng d sa i chng
trnh.
Trang 114
Gio Trnh Thit K Web
Khoa CNTT
C th vit mt tp tin Javascript ring v sau kt ni vi mt hoc nhiu tp

tin trang web khc nhau.
Cch 1: Vit an m script trong cng trang HTML
V d 1:
<HTML>
<HEAD>
<script language="javascript" >
document.write(What is your name? );
</script>
</HEAD>
<BODY>
Ni dung ca trang
</BODY>
</HTML>
V d 2:
<HTML>
<BODY>
<script language="javascript">
document.write("Hello World!")
</script>
</BODY>
</HTML>
V d 3:
<html>
<head>
<script type="text/javascript">
some statements
</script>
</head>
<body>
some statements
</script>
</body>
</html>
Cch 2:
M trnh san tho notepad, Vit an chng trnh Javascript. Lu li vi phn
m rng l.js ( lu trong tp tin ny khng cha bt k mt th no ca ngn
ng HTML).
Lin kt vi mt file JavaScript.js c xy dng trc
C php:
<HTML>
<BODY>
<Script SRC=fileJavascript.js Language="javascript" >
JavaScript comments
</Script>
</BODY>
</HTML>
Trang 115
Gio Trnh Thit K Web
Khoa CNTT
Lu : trong th JavaScript ta c th b thuc tnh SRC v Language, khi ngn ng

mc nh l JavaScript .
XIV.1.4. Mi trng vit JAVASCRIPT:

C th dng chng trnh san tho: Frontpage, Notepad, Visual InterDev,
Dreamweaver vit m Javascript, trong gio trnh ny s s dng mi trng
Dreaweaver, chn ch code, Dreamweaver h tr phn bit t kha bng mu ch,
h tr cc hm, thuc tnh ca cc tag, gip ngi s dng thun tin trong vic thit k
v vit chng trnh
XIV.1.5. Lnh n v khi lnh:

a) Lnh n:
Lnh n l mt cu lnh c kt thc bng du chm phy(;). Trong JavaScript
cui mi cu lnh ta c th dng du (;) hoc khng dng du g c .
b) Khi lnh:
Khi lnh l tp hp nhiu cu lnh n c bao bc bi cp du {}
c) Li ch thch trong chng trnh:
Li ch thch ny trnh duyt s b qua khi thng dch chng trnh. JavaScript h tr
2 loi ch thch:
Ch thch trn mt dng: dng cp du //
Ch thch trn nhiu dng: dng cp du /**/
XIV.1.6. Xut d liu ra trang Web

JavaScript h tr 2 phng thc hin th d liu ra trang Web l:
+ document.write(Text)
+ document.writeln(Text)
Text l chui d liu mun hin th ra trang Web, phi c t trong cp nhy kp.
Nu xut gi tr ca bin th khng cn t trong nhy. C th dng du + ni cc
chui v bin
doument.write(String + variable );
Nu xut tag HTML th cp tag cng phi t trong cp du nhy kp
document.writeln: nu t trong cp tag<pre></pre> th lnh document.writeln xut
d liu v xung dng. Nu khng c cp tag <pre></pre> th n cch ra mt
khong trng
V d:
<BODY >
<Script Language=JavaScript>
document.write ("<H1>Hello<H1>");
document.write ("<font color=red>World</font>");
</Script>
</BODY>
Trang 116
Gio Trnh Thit K Web
Khoa CNTT
V d:
<body>
<pre>
<script>
document.writeln("<b>Hello</b>");
document.writeln("<b>Wordl</b>");
</script>
</pre>
</body>
XIV.2.
BIN V D LIU TRONG JAVASCRIPT

XIV.2.1. Bin
1. Khi nim: Bin l tn ca mt phn t trong chng trnh, c s dng lu tr
thng tin do ngi dng nhp vo hoc kt qu trung gian ca qu trnh tnh ton, Khi
khai bo bin trong Javascript khng cn xc nh kiu d liu cho bin cho nn khi
mt bin c khai bo xong n c th cha bt k kiu d liu no.
2. Cch khai bo bin: Trong JavaScript, khai bo bin dng t kho var, cng c
th b qua t kha var.
var NameVariable ;
Mt bin c th c khai bo v khi to hoc khng khi to gi tr ban u
Mn khai bo nhiu bin cng mt lc th lit k tn bin k tip nhau cch
nhau bi du (,)
V d: Var x = 7 ;
var y,z = "19" ;
Trong JavaScript, 1bin c th cha bt k kiu d liu g
V d:
var a=Hello World;
a=1999 ;
3. Cch xut gi tr ca bin:
document.write(NameVariable )
4. Quy tc t tn bin:
Tn bin gm cc ch ci v s, khng dng cc k t c bit nh: ( , [ , { , # , & .
theo nguyn tc sau:
Tn bin phi bt u bng k t hoc k t gch di( _ )
Khng bt u bng k t s.
Khng cha khong trng, tn bin phi gi nh
Khng trng vi t kho ca JavaScript
Cc t kho trong JavaScript
Trang 117
Gio Trnh Thit K Web

abstract
boolean
break
byte
case
catch
char
class
const
continue
default
Do
double
Khoa CNTT
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
super
switch
synchronized
this
throw
throws
transient
true
try
var
val
while
with
else
5. Tm vc ca bin: l tm nh hng ca bin trong chng trnh. C 2 loi bin:
Bin ton cc : c khai bo ngoi cc hm. Phm vi hot ng ca bin l t v
tr khai bo tr v sau trong chng trnh.
Bin cc b: c khai bo trong chng trnh con. Phm vi hot ng ca bin l
t v tr khai bo n kt thc chng trnh con.
Lu : Nu tn bin ton cc v cc b trng nhau th bin c s dng trong hm
l bin cc b.
XIV.2.2. D liu: C 4 loi d liu

Kiu s: mt bin kiu s cha bt k gi tr s no: s thp phn, s nguyn, s
dng chm phy ng.
Kiu chui: mt bin kiu chui c th cha mt nhm k t (Ch ci, k t s,
khong trng, cc k t c bit, ). Gi tr chui phi t trong cp du nhy
i ( ) hoc n ( )
V d:
var s1, s2, s3 ;
s1=Hello World ;
s2=Hello World ;
Kiu Boolean: L d liu ch c 2 gi tr False hoc True thng dng trong
trng hp bin hoc hm ch nhn mt trong 2 trng thi ng hoc sai.
V d: var bl;
bl=true ;
Kiu Null: l bin khng gn cho gi tr
XIV.2.3. Tan t:
1. Tan t s hc
Tan T
Chc Nng
cng
Tr
Nhn
V d
x=2
x+2
x=2
5-x
x=4
x*5
Kt qu
4
3
20
Trang 118
Gio Trnh Thit K Web
Khoa CNTT
Chia
Ly phn d
++
Tng gi tr ln 1
--
Gim gi tr xung 1
15/5
5/2
5%2
10%8
10%2
x=5
x++
x=5
x--
3
2.5
1
2
0
x=6
x=4
2. Ton T Gn
Tan T
=
+=
-=
*=
/=
%=
V d
x=y
x += y
x -= y
x *= y
x /= y
x%=y
Tng ng
x= y
x = x+y
x = x-y
x = x*y
x= x/y
x = x%y
3. Tan T so snh
Tan T
==
!=
>
<
>=
<=
Chc Nng
bng
Khng bng
ln hn
nh hn
ln hn hoc bng
nh hn hoc bng
V d
5==8 returns false
5!=8 returns true
5>8 returns false
5<8 returns true
5>=8 returns false
5<=8 returns true
4. Tan T logic
Tan T
Chc Nng
&&
||
hoc
not
V d
x =6; y =3 ;
(x < 10 && y > 1) returns true
x = 6 ; y =3
(x==5 || y==5) returns false
x=6; y =3;
!(x==y) returns true
5. Ton t chui
K hiu: + : L php ton ni hai chui vi nhau
V d:
<html>
<script>
Trang 119
Gio Trnh Thit K Web
Khoa CNTT
txt1=What a very;
txt2="nice day!";
document.write('<h2>'+txt1+txt2+'</h2>');
</script>
</html>
Mt s k t c bit: \n ( new line), \t (tab), \b (BackSpace), \& (du &), \()

V d:
<html>
<script>
document.write ("You \& i sing \"Happy Birthday\".")
</script>
</html>
6. Tan t iu kin:
C php:
(iu kin) ? value1: value2
Nu biu thc iu kin ng th tr v gi tr value 1

Nu biu thc iu kin sai th tr v gi tr value 2
V d:
<html>
<script>
a=5; b=6;
document.write((a>b)? 'a lon hon b':'b lon hon a');
</script>
</html>
Trang 120
Gio Trnh Thit K Web
CHNG XV:
XV.1.
Khoa CNTT
HM TRONG JAVASCRIPT
NH NGHA
Hm l mt an chng trnh c th c s dng nhiu ln trong mt chng trnh

thc hin mt tc v no .
XV.1.1. Xy dng hm: Trong JavaScript, dng t kho function

nh ngha hm. Mot ham co cau truc nh sau:
function NameFunction( List_Parameter )
{
Khai bo cc bin s dng trong hm ;
Cc cu lnh trong JavaScript thc hin tc v;
[return [gi tr /biu thc] ];
}
- NameFunction: l tn hm do ngi lp trnh t t.

- Qui tc t tn hm ging nh tn bin. Sau NameFunction l cp du ngoc ( ) cha
danh sch tham s hnh thc. Nu hm khng c tham s th cp du ngoc ( ) cng
phi vit sau NameFunction.
- List_Parameter: l danh sch cc tham s hnh thc, nu c nhiu tham s c th cc
tham s phi cch nhau bi du phy, cc tham s ny khng ch ra kiu d liu c
th v cng khng cn t kho var.
V du:
function Display(user , pwd)
{
document.write(UserName cua ban la: + user) ;
document.write(Password cua ban la: + pwd) ;
return ;
}
- Cu lnh return: l cu lnh kt thc hm. Cu lnh ny l tu chn. C th b qua,
nu hm c gi tr tr v th cn c cu lnh Return tr v gi tr. Sau Return c th
cha hoc khng cha mt gi tr c th hoc mt biu thc tnh ton.
V d:
Function total(a,b)
{ C=a+b;
Return c;
}
XV.1.2.
Cch gi hm
- Hm s khng thc hin cho n khi n c gi.

- i vi hm c i s ta gi tn hm v danh sch cc gi tr truyn cho i s
FunctionName(argument1,argument2,etc)
- i vi hm khng c i s ta ch cn gi tn hm l c.
FunctionName()
Trang 121
Gio Trnh Thit K Web
Khoa CNTT
- i vi hm khng c gi tr tr v :
NameFunction(parameter) .
- i vi hm c gi tr tr v :
variable= NameFunction(parameter) .
V d:
<html>
<head><title>Function</title></head>
<body>
<script>
function Area(Width, Length)
{
size=Width*Length;
return size;
}
x=eval(prompt("Nhap x: ")) ;
y= eval(prompt("Nhap y: "));
document.write(Area(x,y))
</script>
</body>
</html>
XV.2.
CC HM THNG DNG TRONG JAVASCRIPT
1) Hm alert(): dng hin th mt hp thng bo c nt OK
C php:
alert(ni dung thng bo)
v d:
<html>
<body>
<script>
alert("Hello World")
</script>
</body>
</html>
2) Hm prompt():to hp thoi cha 2 nt OK v Cancel, v mt textbox ngi sd
nhp ni dung, gi tr tr v ca hm prompt l ni dung nhp trong textbox
C php:
variable= prompt(ni dung i thoi,gi tr khi to);
v d:
<html>
<body>
<script>
a=prompt("Your Lastname:");
b=prompt("Your FirstName");
document.write("Your FullName is :"+ a + ' ' + b)
</script>
</body>
Trang 122
Gio Trnh Thit K Web
Khoa CNTT
</html>
3) Hm confirm():Hin th hp thng bo c 2 nt OK v Cancel. Hm tr v gi tr true

nu ngi sd click OK v ngc li th tr v gi tr false.
Cp php:
variable=confirm(Chuoi thong bao);
V d:
<html>
<body>
<script>
a=prompt("nhap so a :");
b=prompt("nhap so b");
c=confirm( a +' lon hon '+ b+'?')
if(c= =true)
document.write( a +" > "+b )
else
document.write( a +" < "+b )
</script>
</body>
</html>
4) Cc hm thng dng ca chui v s:
a. Hm eval(): Tr v gi tr s ca mt chui s
C php:
eval(chui s)
V d:
<script>
var str1=123, str2=456;
str= str1+str2;
document.write(str); kt qu :123456
</script>
<script>
var str1=123, str2=456;
str=eval(str1)+eval(str2) ;
document.write(str)kt qu: 579
</script>
b. Hm ParseInt(strNum)
Tr v mt s nguyn t chui strNum. Nu strNum theo sau l k t ch th cc k
t ny s b b qua. Nu strNum khng bt u bng s th hm ny tr v gi tr NaN
(Not a Number)
V d :
Trang 123
Gio Trnh Thit K Web
Khoa CNTT
var strNum=123.8 , kq;

kq=parseInt(strNum) =>kq=123
strNum=a123
kq=parseInt(strNum) =>kq=NaN
strNum=123.8abc
kq=parseInt(strNum)=>kq=123
c. Hm parseFloat(strNum):
Hm tr v mt s thc t chui strNum. Nu chui strNum bt u l s v theo sau
l cc k t ch th cc k t ny b b qua. Nu chui strNum bt u t k t ch
th hm tr v gi tr NaN.
V d:
var strNum=123.8 , kq;
kq=parseFloat(strNum) =>kq=123.8
strNum=a123.8
kq=parseFloat(strNum) =>kq=NaN
strNum=123.8abc
kq=parseFloat(strNum)=>kq=123.8
d. Hm isNaN(str):
Hm tr v gi tr True nu str l chui, ngc li l False nu str l chui s.
V d :
Var str=123abc, kq;
kq=isNaN(str) =>kq=true;
str=123.8
kq=isNaN(str) =>kq=false ;
5) Cc hm thit lp thi gian:
a. Hm Timeout( ): Bo cho JavaScript thc hin mt lnh JavaScript sau mt
khong thi gian no . Hm tr v mt ID(duy nht i vi mi hm setTimeout
thc hin mt lnh) Gi tr ID ny dng xo khong thi gian thit lp nu
khng cn thc hin hm Timeout na .
C php:
IdTime=setTimeout(Command JavaScript, delayTime);

Command JavaScript : c th l li gi hm hoc l mt cu lnh n
delayTime :l khong thi gian ch thi hnh Command JavaScript, c tnh
bng mili giy.
V d:
Idq=setTimeout(alert(Da het gio),1000) ;
C 1000 mili giy th thng bo ht gi mt ln.
b. Hm clearTimeout():Hu thi gian thit lp bi setTimeout().
C php:
clearTimeout(IdTime );
V d:
clearTimeout(Idq);
c. Hm setInterval() v clearInterval() vi ngha v tham s ging nh
setTimeout() v clearTimeout() .
Trang 124
Gio Trnh Thit K Web
CHNG XVI:
XVI.1.
Khoa CNTT
CC CU TRC IU KIN
CU TRC LA CHN:
XVI.1.1. Cu lnh if:
Mu 1: p dng cho trng hp c 1 iu kin v 1 cng vic x l
C php:
if (<Biu thc iu kin>)
Khi lnh 1;
Khi lnh 2;
Nguyn tc hot ng: Nu biu thc iu kin ng th thc hin khi lnh 1,
sau thc hin khi lnh 2, ngc li nu biu thc iu kin sai th b qua khi
lnh 1 v thc hin khi lnh 2
Mu 2: p dng cho trng hp c 1 iu kin v 2 la chn cng vic x l

C php:
if(<biu thc iu kin>)
Khi lnh1;
else
Khi lnh 2 ;
Khi lnh 3;
Nguyn tc hot ng: Nu biu thc iu kin ng th thc hin khi lnh 1,
sau thc hin khi lnh 3, ngc li th thc hin khi lnh 2, sau thc hin
khi lnh 3
Mu 3 (if else lng nhau): p dng cho trng hp c nhiu chn la khc
nhau
C php:
if(<biu thc iu kin1>)
Khi lnh 1;
else
if (<biu thc iu kin 2>)
Khi lnh 2 ;
else
khi lnh 3
p dng mu 3, cn phi xc nh biu thc iu kin ca bi ton ri sp xp
th t lng nhau cho hp l.
V d: Vit chng trnh nhp 3 cnh ca tam gic sau xut ra mn hnh l tam gic
g?
<Body><script>
a=eval(prompt(Nhap canh a));
b=eval(prompt(Nhap canh b));
c=eval(prompt(Nhap canh c));
if(a= =b && b= = c && c= = a)
Trang 125
Gio Trnh Thit K Web
Khoa CNTT
Tam giac u ;
else
if(a= =b || b= = c || c= = a)
Tam giac cn
Else
Tam gic thuong
</script></Body>
XVI.1.2. Cu trc chn la switch...case:

p dng trong trng hp mun chn mt trong cc gi tr ca biu thc thc hin
lnh. Gi tr ca biu thc c th l mt chui hoc mt s
Mu 1:
switch(Biu thc)
{
case value1:
Khi lnh 1;
break;
case value2:
Khi lnh 2 ;
break;
case valuek:
Khi lnh k ;
break;
}
Mu 2:
switch(biu thc)
{
case value1:
khi lnh 1 ;
break;
case value2:
khi lnh 2 ;
break;
case valuek:
khi lnh k ;
break;
default :
khi lnh k+1 ;}
Nguyn tc hot ng:
Trnh thng dch s tnh gi tr ca biu thc ri so sch vi cc value, nu bng gi tr
no th thc hin khi lnh .
S khc nhau gia mu 1 v 2 l: mu 2 khi so snh gi tr ca biu thc vi cc value,
nu khng khp th thc hin lnh trong default
Trong trng hp c nhiu value khc nhau m cng thc hin mt khi lnh th lit k
cc value lin tip nhau v cch nhau du phy.
Trang 126
Gio Trnh Thit K Web
Khoa CNTT
case valuej1 ,valuej2 ,,valuejk : khi lnh; break;
V d:
<body>
<script>
t=prompt("nhap thang: ");
switch(eval(t))
{
case 1: case 3: case 5: case 7: case 8 : case 10: case 12:
alert("Thang "+ t+ " co 31 ngay");
break;
case 2:
alert("Thang "+t + " co 28 ngay");
break;
case 4: case 6: case 9: case 11:
alert("Thang "+t +" co 30 ngay");
break;
default:
alert("Khong co thang nay");
}
</script>
</body>
XVI.2.
CU TRC LP:
c p dng khi mt cng vic no mun thc hin lp i lp li nhiu ln vi mt

iu kin no . C 2 lai cu trc lp l : lp vi s ln lp bit trc v lp vi s ln
lp khng bit trc
XVI.2.1. Vng lp For: Thng p dng cho s ln lp bit trc

C php:
for(biu thc 1; biu thc 2; biu thc 3)
{
Khi lnh 1;
}
khi lnh 2;
Trong :
biu thc 1:cha gi tr khi to ca bin iu khin
biu thc 2 :cha biu thc iu kin lp.
biu thc 3: cha biu thc tng hoc gim bin iu khin .
Nguyn tc hot ng::
Trnh thng dch gn gi tr khi to cho bin iu khin, Km tra biu thc 2, nu
ng th thc hin khi lnh 1, chuyn ln thc hin biu thc 3, tip tc kim tra
biu thc 2, v tip tc
Nu biu thc 2 c gi tr sai th chng trnh thot khi vng lp v thc hin khi
lnh 2.
Nu khi lnh 1 c cha cu lnh Break th chng trnh s thot khi vng lp for v
thc hin khi lnh 2
Trang 127
Gio Trnh Thit K Web
Khoa CNTT
V d: Vit chng trnh to mt table m dng n ct.

<body>
<Script language="javascript">
var n, m, i, j;
m=prompt("Nhap so dong");
n=prompt("Nhap so cot");
document.write("<table width=50% border=1>");
for(i=1;i<=m;i++)
{
document.write("<tr>");
for(j=1;j<=n;j++)
document.write("<td>" + i + j +"</td>");
document.write("</tr>");
}
document.write("</table>");
</Script>
</body>
XVI.2.2. Vng lp while: thng p dng cho s ln lp khng xc nh

1. Vng lp While: Kim tra iu kin trc khi thc hin lnh
C php:
while(biu thc iu kin)
{
khoi lenh 1;
}
khoi lenh 2;
Nguyn tc hot ng :
Trnh thng dch kim tra biu thc iu kin, nu ng th thc hin khi lnh 1,
sau quay li kim tra biu thc iu kin, v tip tc , nu sai th thc hin
khi lnh 2.
Nh vy khi lnh 1 c th khng c thc hin ln no nu ngay t u biu
thc iu kin sai
Thng khi lnh 1 cha lnh lm thay i gi tr ca biu thc iu kin c
th thot ra khi vng lp, hoc cha lnh break thot khi vng lp while
Trang 128
Gio Trnh Thit K Web
Khoa CNTT
V d:
var userinput;
while ((userinput!=99 )
{
userinput=prompt(Nhp vo mt s by k, nhp 99
that)
if(isNaN(userinput)
{
document.write(D liu khng hp l, nhp s );
break;
}
}</script>
2. Vng lp do while: Thc hin lnh trc sau kim tra biu thc iu
kin
C php:
do
{
khi lnh 1;
} While(biu thc iu kin);
khi lnh 2;
Nguyn tc hot ng: trnh thng dch thc hin khi lnh 1, sau kim tra
biu thc iu kin, nu ng th thc hin li khi lnh 1, nu sai th thot khi
vng lp v thc hin khi lnh 2
V d:Vit chng trnh yu cu ngi dng nhp vo mt s, kim tra xem gi
tr nhp c phi l s khng, nu khng yu cu nhp li.
var userinput;
do
{
userinput=prompt(Nhp vo mt s by k, nhp 99 that)
if(isNaN(userinput)
{
document.write(D liu khng hp l, nhp s );
break;
}
}while ((userinput!=99 )
</script>
3. Vng lp for in: dng duyt qua cc thuc tnh ca mt i tng
hay gi tr ca cc phn t trong mng

C php:
for ( variable in Object)
{
khi lnh 1 ;
Trang 129
Gio Trnh Thit K Web
Khoa CNTT
}
khi lnh 2;
Nguyn tc hot ng: trnh thng dch s duyt qua tt c cc phn t trong Object.
V d:
<body>
<script>
obj= new Array() ;
obj[0]="Hello";
obj[1]="World" ;
for(i in obj)
document.write(obj[i]);
</script>
</body>
XVI.2.3. Cu lnh try catch v throw: dng x l li trong cc modul.

N c dng trong Internet Exploer 5 v trong IIS
C php:
try
{
khi lnh ;
}
catch(objErr)
{
X l li ;
}
Nguyn tc hot ng:
Trnh thng dch thc thi cc lnh trong khi lnh, nu trong qu trnh thc thi
c li xy ra th trnh thng dich truyn i tng li cho catch.
Cu lnh catch t ng gi vo tham s c cha i tng li, i tng ny
c 2 thuc tnh number v description. mi dng li trong m kch bn s
c gn cho mt con s li duy nht. thuc tnh Number cha mt s
nguyn li, thuc tnh description cha mt m t dng vn bn v li.
V du:
<head><title>Chuong trinh kiem tra loi</title>
var str ;
try
{
document.write("Hello World");
Math.r();
}
catch(objerr)
{
str="Loi thu " + objerr.number +"<br>";
str="Va loi do la " + objerr.description;
alert(str);
}
</Script>
</head>
Trang 130
Gio Trnh Thit K Web
Khoa CNTT
Cu lnh throw c dng truyn mt thng bo li n mt cu lnh

catch. N cng c th c dng truyn mt li ln
B x l li mc cao hn trong trng hp c nhiu cu lnh trycatch lng
nhau
V du:
<Html><head><title>Chuong trinh kiem tra loi</title>
var str , m=4 ,kq;
try
{
try
{
document.write("Hello World");
kq=m/n;
}
catch(objerr)
{
str="Loi thu " + objerr.number +"<br>";
str="Va loi do la " + objerr.description;
if (kq= =4)
alert(n=1) ;
else
throw (objerr) ;
}
catch (objerr)
{
alert(objerr.number + objerr.description) ;
}
</Script></head></html>
Trang 131
Gio Trnh Thit K Web
Khoa CNTT
CHNG XVII:
M HNH I TNG
XVII.1. M HNH DOM ((Document Object Model)

1. i tng M hnh i tng:
Mi thnh phn trn trang web c xem nh mt i tng, mi i tng u
c cc thuc tnh, phng thc v s kin ca n. V d hnh nh, vn bn,
button, mt tag trong HTML cng c xem nh l mt i tng v cc thuc
tnh ca tag c xem nh l i tng con ca n. Tt c cc i tng trong
Javascript c t chc phn cp dng hnh cy gi l m hnh DOM (Document
Object Model), mc trn cng l i tng window biu th cho khung hay ca
s ca trnh duyt, cc phn t cn li l i tng con ca window
Dng thuc tnh ID truy xut n mt i tng trong IE v thay i d liu
cho chnh phn t , tt c cc i tng trn trang u c mt ID duy nht
V d:
<tr><td Id=IdName1>Data</td></tr>
<img Id=Id Name2>
<Iframe Id=IdName3></Iframe>
window
document
event
frame
histor
y
location
navigator
screen
document
form
button
check box
hidden
password
radio
reset
select
submit
text
textarea
anchor
applet
class
element
embeb
ID
image
layer
link
plug-in
style
tag
Mun truy cp vo i tng no th phi truy cp vo i tng cha n trc,

dng ton t du chm (.) phn cch gia cc i tng. Tuy nhin ta c th b
qua i tng window nu ang thao tc trn ca s hin hnh
V d: window.location
Ngoi cc i tng do chng trnh xy dng sn, c th to thm nhng i
tng mi cn thit cho nhu cu s dng.
Mi i tng u c thuc tnh, s kin v phng thc, nh cc thnh phn ny
m c th truy cp v thay i ni dung ca chng.
o Thuc tnh (Properties): l ni cha cc m t thng tin ca i tng.
V d: <img src=URL height=value1 width=value2 Id=Idh1>
Trong tag Img c 3 thuc tnh src, width, height, thay i kch thc ca
hnh th thay i gi tr ca thuc tnh width, height hoc i hnh khc th thay
Trang 132
Gio Trnh Thit K Web
Khoa CNTT
i gi tr ca thuc tnh, thc hin cc vic trn ta da vo thuc tnh Id l

Idh1.
V d: function ZoomIn()
{
Idh1.width=Idh1.width +10;
Idh1.height=Idh1.height + 5;
}
function ChangeImg(file)
{
Idh1.src=file ;
}
o S kin (event): l cc hnh ng, s vic xy ra trn trang web: click chut, di
chuyn chut, gi l s kin. S kin c x l bi cc on m kch gi l b
x l s kin
Cc s kin thng s dng:
Tn s kin
ngha
Onmousedown Pht sinh khi ngi sdng nhn chut
Onmouseover Pht sinh khi ngi sdng d/chuyn chut ln i tng
Onmouseout
Pht sinh khi ngi sdng d/chuyn chut ra ngoi tng
Onkeypress
Pht sinh khi ngi s dng nhn mt phm
Onfocus
Pht sinh khi i tng nhn tiu im
Onblur
Pht sinh khi ri khi i tng
- Ngi dng click chut vo i tng
- Mt i tng ang c tiu im, ngi sd nhn enter
Onclick
-Mt checkbox hoc nt chn ang c tiu im, ngi sd
nhn phm Spacebar
Onload
- Pht sinh khi i tng c ti xung
OnUnload
- Pht sinh khi i tng c np tr li hoc chuyn trang
Onresize
- Pht sinh khi ca s b thay i kch thc
Onselect
- Pht sinh khi i tng c chn
Onchange
- Pht sinh khi i tng thay i gi tr
Onsubmit
- Pht sinh khi Form c Submit
Cch s dng cc s kin: mun iu khin s kin, ta thm s kin
vo trong th HTML.
C php:< TagName event_handler=JavaScript Command>
TagName: tn tag
event_handler: tn s kin
JavaScript Command: gi hm x l s kin
o Phng thc: L cc hm c xy dng trc c tc dng lm thay i thuc
tnh ca i tng.
2. Mc ch ca m hnh DOM:
nh ngha 1 t chc phn cp th hin cc phn ca 1 h s web.

Cho php thay i cu trc thng qua vic thm bt ni dung
Cung cp cch thc quan st, thao tc cc c tnh ca ni dung trn trang web
Cung cp thng tin v cch tng tc gia cc mc trn trang web vi ngi dng
N cho php thng bo cc s kin gy ra do chut v bn phm
Trang 133
Gio Trnh Thit K Web
Khoa CNTT
XVII.1.1. Xy dng mt i tng mi:

Ngoi cc i tng c sn trong Javascript, ta c th to cc i tng mi vi cc
phng thc v thuc tnh ring cho i tng .
1. Cch xy dng mt i tng mi: Gm 2 bc

a. Bc 1: nh ngha i tng bng cch xy dng hm cho i tng gm cc
phng thc v thuc tnh cho i tng .
function Object(List Parameter)

{
this.property1= Parameter1;
this.property2= Parameter2;
this.method1=functionName1;
this.method2=functionName2;
}
Trong
T kho this tham chiu n i tng ang c to. Khi xy dng i tng c
bao nhiu thuc tnh th dng t kho this tham chiu n by nhiu thuc tnh ca
n
Cu lnh this.property1= Parameter1: gn gi tr Parameter1 cho thuc tnh
property1
Tng t: mun xydng phng thc cho i tng th gn phng thc cho hm
nh ngha sn
this.method1=FunctionName1;
b. Bc 2: To instance cho i tng, dng t kho new
var obj=new Object();
Truy cp hoc thay i g/ tr ca thuc tnh ta s dng: obj.property

Mun s dng phng thc method1 th dng obj.method()
V d:
Xy dng mt i tng Student gm cc thuc tnh IdStudent, Name, Address v
phng thc Display() hin th thng tin ca Student
Bc 1: Xy dng i tng Student
function Student(masv,hten,dchi) // i tng
{
this.IdStudent=masv;
this.Name=hten;
this.Address=dchi;
this.Display=Information;
}
function Display() //Phng thc
{
document.write(Ma SV +this.IdStudent +<br>);
document.write(Ho ten SV +this.Name +<br>);
document.write(Dia chi SV +this.Address +<br>);
}
Mun xut thng tin SV ta gi phng thc Display()
Trang 134
Gio Trnh Thit K Web
Khoa CNTT
S dng i tng Student: to instance cho i tng

var st=new Student() ; //To th thin cho i tng
st.IdStudent=TH01;
st.Name=Truong Tam Phong // Khi to gi tr cho tng
st.Address=12 Nguyen Cuu Van
Hin th thng tin ca i tng th gi n phng thc Display()
st.Display()
C th khai bo v khi to i tng bng cch:
var st=new(TH01,Truong Tam Phong,12 Nguyen Cuu Van)
XVII.2. CC I TNG C SN TRONG JAVASRIPT

XVII.2.1. i tng Array()
i tng Array dng lu tr nhiu gi tr vi cng mt tn gi. Trong Javascript i
tng mng c th cha cc thnh phn mang kiu gi tr khc nhau. Mt mng c n
phn t c nh ch s t 0 n n-1.
Mi phn t mng c phn bit nhau qua ch s, da vo ch s ny ta c th truy cp
hoc thay i gi tr ca tng phn t trong mng
1. Khi to mt mng:
Dng t kha new khi to mt mng
var Variable = new Array(size)
V d: <script>
var arr= new Array()
arr[0]= "thu hai";
arr[1]= "Thu ba";
arr[2]= "Thu tu";
arr[3]= "Thu nam";
arr[4]= "Thu sau";
arr[5]= "Thu bay";
for(i=0; i<=5;i++)
document.write(arr[i]+ "<br>")
</script>
2. Cc thuc tnh ca Array()

length : xc nh s phn t trong mng
V d: <script>
var arr= new Array()
arr[0]= "thu hai";
arr[1]= "Thu ba";
arr[2]= "Thu tu";
arr[3]= "Thu nam";
arr[4]= "Thu sau";
arr[5]= "Thu bay";
document.write("So phan tu trong mang la: " +arr.length)
</script>
3. Cc phng thc ca i tng Array()
Trang 135
Gio Trnh Thit K Web

Phng thc
concat()
join(separator)
slice(start,end)
reverse()
valueOf()
pop()
push()
Shift()
Sort()
valueOf()
Khoa CNTT
ngha
Dng ni 2 mng
ghp cc phn t trong mng li
vi nhau cch nhau bi du separator
Dng tch mt mng bt u t vtr
start n vtr end-1.
Dng o ngc chi
Dng ly tt c cc i tng
trong chui
Ly phn t cui ca mng
Thm 1 hoc nhiu phn t vo cui
mng
ly phn t v tr v phn t u tin
ca mng
sp xp cc phn t ca mng
Tr v tt c cc gi tr ban u ca
mng
V d
a=a.concat(b)
a=a.join(+)
str=a.slice(i,j)
a.reverse()
a.valueOf()
V d 1:
<script>
var a=new Array()
a[0]= Thang gieng;
a[1]= Thang hai;
a[2]= Thang ba;
var b =new Array();
b[0]= Thang tu;
b[1]= Thang nam;
b[2]= Thang sau;
a=a.concat(b);
document.write(a);
</script>
V d 2
var arrName = new Array(3)
arrName [0] = "Jani"
arrName [1] = "Tove"
arrName [2] = "Hege"
document.write(arrName.length + "<br>")
document.write(arrName.join(".") + "<br>")
document.write(arrName.reverse() + "<br>")
document.write(arrName.sort() + "<br>")
document.write(arrName.push("Ola","Jon") + "<br>")
document.write(arrName.pop() + "<br>")
document.write(arrName.shift() + "<br>")
</script>
XVII.2.2. i tng Date() : Cung cp thng tin v ngy, gi trn mi

trng client. Dng thit lp ngy thng nm v gi hin hnh trn
trang web.
1. Cch khai bo: C 2 cch khai bo
Trang 136
Gio Trnh Thit K Web
Khoa CNTT
Cch 1: Khai bo v khi to

var variableName= new Date(month, day, year , hours : minutes : seconds)
hoc:
var variableName= new Date(year,month,day,hours,minutes,seconds)
hoc:
var variableName= new Date(year,month, day)
var variableName= new Date("Month dd, yyyy hh:mm:ss")
var variableName= new Date("Month dd, yyyy")
var variableName= new Date(yy,mm,dd,hh,mm,ss)
var variableName= new Date(yy,mm,dd)
var variableName= new Date(milliseconds)
variableName l bin dng lu tr thng tin ngy thng nm, gi pht giy.
Trng hp 1: gi tr khi to l 1 chui. Trong trng hp ny month l chui,
Trng hp 2 v 3, gi tr l mt s.
V d:
var objday =new Date("November,1,2003,7:30:9") // Khai bo hp l
var objday= new Date("10,1,2003,7:30:9") //Khai bo khng hp l
Cch 2: Khai bo ngy hin hnh ( Khng khi to)
var variableName=new Date()
Trong trng hp ny gi tr tr v l ngy thng nm gi pht giy hin hnh ca
h thng.
2. Cc phng thc ca i tng Date():

truy xut phng thc ca i tng dng c php
variableName.Method()
Phng thc
Date()
getDate()
getDay()
getMonth()
M t
tr v i tng date
Tr v gi tr ngy ( s nguyn t 1-31) trong thng
Tr v gi tr ngy trong tun ( s nguyn t 0-6 Sunday=0)
Tr v thng trong nm (from 0-11. 0=January, 1=February)
getFullYear()
Tr v gi tr nm (bn s )
getYear()
Tr v gi tr nm (hai s )
getHours()
Tr v gi ca h thng (t 0-23)
getMinutes()
Tr v pht ca h thng (t 0-59)
getSeconds()
Tr v giy ca h thng (t 0-59)
getMilliseconds()
Tr v gi tr millisecond from 0-999)
setFullYear(years) Thit lp li nm cho ngy h thng ( 4 s)
Thit lp li gi cho h thng ( t 0-24)
setHours(hours)
setMinutes(minutes) Thit lp li pht cho h thng ( t 0-59)
setMonth(months) Thit lp li thng cho h thng ( t 0-11)
setSeconds(seconds) Thit lp li giy cho h thng (from 0-59)
toGMTString()
Chuyn ngy gi h thng sang ngy gi quc t.
Trang 137
Gio Trnh Thit K Web

toString()
Khoa CNTT
Chuyn ngy gi h thng sang chui
V d : Hin th gi trn thanh trng thi

<html>
<head><title>Digital Clock - Status Bar</title>
<script Language="JavaScript">
var timeriD = null;
var timerRunning = false;
function stopclock ()
{
if(timerRunning)
clearTimeout(timeriD);
timerRunning = false;
}
function showtime ()
{
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = "" + ((hours >12) ? hours -12:hours);
timeValue += ((minutes < 10) ? ":0": ":") + minutes
timeValue += ((seconds < 10) ? ":0": ":") + seconds
timeValue += (hours >= 12) ? " P.M.": " A.M."
window.status = timeValue;
timeriD = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock ()
{
stopclock();
showtime();
}
</script>
</head>
<body BGCOLOR="#FFFFFF" TEXT="#000000" LiNK="#FF0000"
VLiNK="#000080" ALiNK="#000080"
onLoad="startclock()">
</body>
</html>
V d:
<html>
<head><title>Hin th ngy gi ln trang web </title>
function Ngay()
{
var day=new Date();
var w,m,d,y;
var arrday=new Array();
arrday[0]= chu nhat;
Trang 138
Gio Trnh Thit K Web
Khoa CNTT
arrday[1]= Thu hai ;

arrday[2]= Thu ba ;
arrday[3]= Thu tu;
arrday[4]= Thu nam ;
arrday[5]= Thu sau;
arrday[6]= Thu Bay;
w=day.getDay();
d=day.getDate();
m=day.getMonth()+1;
y=day.getFullYear();
document.write(Hom nay:+arrday[w]+ ngay +d+ thang +m+ nam
+y);
}
</script>
</head>
<body>
<script language=Javascript>Ngay()</script>
</body>
</html>
XVII.2.3. i tng String

Mi chui trong JavaScript l mt i tng, gm cc thuc tnh v phng thc thc
hin trn chui, l cc phng thc tm kim chui, trch chui con v p dng cc th
HTML vo ni dung ca chui.
1. Cch khai bo i tng String
var stringVariable=new String()

2. Thuc tnh ca Srting():
Length: dng xc nh chiu di ca chui. Cc k t trong chui c nh
ch s t 0 n Length-1. Tt c cc thnh phn c gi tr chui u dng c
thuc tnh length. Cch tham chiu n thuc tnh length ca i tng String().
Cch 1: StringLength=stringVariable.length
Cch 2:
var st=new Stringt()
StringLength=stName.length
Cch 3: StringLength=This is a string.length
3. Cc phng thc ca String:Cc phng thc ca String thc hin cc thao
tc trn ni dung ca chui:
Phng thc
anchor("anchorname")
big()
Bold()
M t
V d
str.anchor(anchorname)
Tr v mt chui lin kt anchorname tr
<a
thnh 1 lin kt
name=namelink>This is
a string </a>
str.big()
Tr v mt chui t trong cp th <big>
<big>This is a string
</big>
Tr v mt chui in m
str.bold()
Trang 139
Gio Trnh Thit K Web
Khoa CNTT
<b> This is a string </b>
charAt(index)
concat()
Tr v k t th index trong chui. index

t 0 n str.length-1
Tr v hai chui ni nhau
str.charAt(0)=T
str.fontcolor(red)
<font color=red>This is a
string</font>
str.fontsize(5)
Tr v mt chui vi kch thc c
fontsize()
<font size=5>This is a
xc lp.
string</font>
Tr v v tr ca u tin c tm thy
ca chui searchvalue bt u tm t v tr
indexOf(searchvalue,
Pos=str.indexOf(is)
fromindex. Nu khng c fromindex th
[fromindex])
Pos=2
tm t v tr 0. Nu khng tm thy th
hm tr v gi tr -1
italics()
Tr v mt chui in nghing
Tr v v tr ca cui cng c tm thy
ca chui searchvalue bt u tm t phi
lastindexOf(searchvalue)
qua tri. Nu khng tm thy th hm tr
v gi tr -1
link()
Tr v mt chui lin kt
Tng t nh hm indexOf v
lastindexOf, nhng phng thc ny tr
match()
v mt chui c th nu khng tm thy
th tr v gi tr "null".
Thay th mt vi k t bng mt vo k
replace()
t mi
Tr v gi tr l s chui c tm thy
search()
trong chui cha, nu khng tm thy th
tr v gi tr -1
Tr v mt chui con c ct t chui
slice()
m ti v tr ct
small()
Tr v mt chui nh hn
Tr v mt chui c gnh ngang qua
strike()
thn chui
Str.sub()
sub()
Tr v mt chui kiu subscript
fontcolor()
Tr v mt chui vi mu c xc
lp.
<sub>This is a string</sub>
substr(start,length)
substring(Start,end)
Tr v chui con bt u t v tr start v

c chiu di length. nu khng c start
xem nh start=0
Tch ra mt chui con t mt chui. Bt
u t ch s start n end.
Nu Start<end, chui tr v t start n
end-1
Nu end<start, chui tr v t end n
start
Nu start=end chui tr v l null.
Str.substr(0,2)=Th
Trang 140
Gio Trnh Thit K Web

sup()
toLowerCase()
toUpperCase()
Khoa CNTT
Tr v chui kiu superscript
Chuyn chui thnh ch thng
Chuyn chui thnh ch hoa
V d:Tnh chiu di chui s dng phng thc length

var str="Nguyn Th Hoa Hng !"
document.write("<p>" + str + "</p>")
document.write(Chieu dai cua chuoi la : + str.length)
</script>
V d: Phng thc fontcolor() dng nh mu ca chui
var txt="Nguyn Th Bo Nhi "
document.write("<p>" + txt.fontcolor() + "</p>")
document.write("<p>" + txt.fontcolor('red') + "</p>")
document.write("<p>" + txt.fontcolor('blue') + "</p>")
document.write("<p>" + txt.fontcolor('green') + "</p>")
</script>
V d Phng thc indexOf. Phng thc ny tr v v tr ca chui con c tm thy
trong mt chui
var str="This is my Schools "
var pos=str.indexOf("School")
if (pos>=0)
{
document.write("School found at position: ")
document.write(pos + "<br />")
}
Else
{document.write("School not found!")}
</script>
XVII.2.4. i tng Math()

i tng math() cung cp cc hm v cc phng thc cn thit thc hin cc php
ton s hc. Khng cn phi to i tng Math() m chng ta c th s dng trc tip
i tng ny
1. Cc phng thc ca Math():

C php chung:
Math.method([value])
V d:
<script>
var n= -136.8 , m=136.8
Document.write(abs(-136.8) = + Math.abs(n) +<br>)
Document.write(ceil(136.8) = + Math.ceil(m) +<br>)
Document.write(floor (136.8) = + Math.floor(m) +<br>)
Document.write(pow (2,3) = + Math.pow(2,3)+<br>)
Document.write(Mot so ngau nhien: + Math.random()*5 +<br>)
</script>
Trang 141
Gio Trnh Thit K Web
Khoa CNTT
Danh sch cc phng thc ca Math()

Phng thc
abs(x)
acos(x)
ceil(x)
floor(x)
log(x)
max(x,y)
min(x,y)
pow(x,y)
random()
round(x)
sqrt(x)
M t
Tr v gi tr tuyt i ca bin x
Tr v gi tr arccosine ca x
Tr v s nguyn ln hn hoc bng x
Tr v s nguyn nh hn hoc bng x
Tr v gi tr log ca x
Tr v gi tr ln nht trong hai s x v y
Tr v gi tr nh nht trong hai s x v y
Tr v gi tr x ly tha y
Tr v gi tr mt s ngu nhin t 0 n 1
Lm trn s x
Tr v gi tr cn bc 2 ca x
V d:
Vit chng trnh to mt nt i hnh (play) v nt stop ngng
<html><head>
<script>
var idq;
function play()
{
var arrhinh= new Array();
arrhinh[0]= h1.jpg;
arrhinh[1]= h2.jpg;
arrhinh[2]= h3.jpg;
arrhinh[3]= h4.jpg;
arrhinh[4]= h5.jpg;
arrhinh[5]= h6.jpg;
var i=Math.round(Math.random()*6)
idhinh.src=arrhinh[i];
idq=setTimeout(play(),1000);
}
function Stop()
{
clearTimeout(idq);
}
</script>
Trang 142
Gio Trnh Thit K Web
Khoa CNTT
</head>
<body>
<img src=hinh.jpg width=100 height=200 id=idhinh>
<form>
<input type=button value= Play onClick= Play()>
<input type=button value= Stop onClick= Stop()>
</form></body></html>
XVII.2.5. i tng document:

i tng document cung cp cc thuc tnh v phng thc lm vic vi ton b ti
liu hin hnh gm: form, lin kt, hnh nh, tiu , v tr hin hnh, mu hin hnh
i tng document c nh ngha khi tag body c x l trong trang HTML v n
vn tn ti nu trang c np. Cc thuc tnh ca document phn nh thuc tnh ca tag
body. Trong body c 2 s kin OnLoad v Unload
1. Cc thuc tnh ca i tng document

Thuc tnh
alinkcolor
bgcolor
cookie
domain
fgcolor
lastmodified
linkcolor
location
referrer
title
url
vlinkcolor
M t
Thit lp hoc tr v gi tr mu ca lin kt ang xem ca ti liu
Thit lp hoc tr v gi tr mu nn ca ti liu
Cha gi tr cc cookies dnh cho ti liu hin hnh
Tr v gi tr tn min my ch cha document
Thit lp hoc tr v gi tr mu ch ca ti liu
Tr v gi tr ngy gi cui cng m ti liu c cp nht
Thit lp hoc tr v gi tr mu ca lin kt trong ti liu
m mt trang web mi
Returns the URL of the document that loaded the current document
Tr v gi tr ca ta ca ti liu
Tr v ng dn c ti liu hin hnh
Thit lp hoc tr v gi tr mu ca lin kt xem ca ti liu
2. Phng thc:
Phng thc
clear()
close()
focus()
open("mimetype",replace)
write("str")
writeln("str")
M t
Xa ti liu
ng mt ti liu
a tr v mt i tng trong trang
vit mt chui vo mt ti liu
vit mt chui vo mt ti liu v xung dng
3. S kin
C php:
document.event_name="someJavaScriptCode"
Danh sch cc s kin tc ng i tng document
Event
Trang 143
Gio Trnh Thit K Web
Khoa CNTT
OnBlur
OnClick
OnDblClick
OnFocus
OnKeyDown
OnKeyPress
OnKeyUp
OnMouseDown
OnMouseMove
OnMouseOut
OnMouseOver
OnMouseUp
OnMouseUp
XVII.2.6. i tng trnh duyt (Navigator Object)

i tng trnh duyt cha ng nhng thng tin v trnh duyt web ca client C hai
trnh duyt web ln l Nescape Navigator v internet Explorer. Mc d c hai u h tr
m hnh i tng trn ngn ng Javascript nhng cng c mt s i tng v cch truy
cp vo thnh phn thuc tnh trn hai trnh duyt cng c mt ci khc nhau. Mun cho
ng dng chy hon chnh trn mi trnh duyt th ngi lp trnh phi xc nh ra
chng trnh ang chy trn trnh duyt no v version no x l an code tt hn
1. Thuc tnh
Thuc tnh
appName
appVersion
cookieEnabled
platform
M t
Tn trnh duyt
Phin bn trnh duyt
Nn ca h iu hnh
2. Phng thc
Phng thc
M T
javaEnabled()
tr v gi tr true nu trnh duyt c h tr

Javascript
refresh()
preference()
XVII.2.7. i tng Window

L i tng cao nht trong m hnh DOM, l ni cha tt c cc thnh phn ca trang
web.
1. Thuc tnh ca i tng Window:

Thuc tnh
defaultStatus
status
M t
thit lp chui t/bo trn thanh trng thi
thit lp thng bo ti thi im hin hnh
Gi tr
Text
Text
Trang 144
Gio Trnh Thit K Web

location
history
alwaysLowered
alwaysRaised
Dependent
directories
fullscreen
height
hotkeys
left
location
menubar
resizable
scrolbars
status
titlebar
toolbar
width
closed
Xc nh v tr trang hin ti trong ca s

Xc nh cc phn t trong history
hin th ca s bn di cc ca s khc
hin th ca s trn tt c cc ca s khc
Ca s ny s ng khi ca s cha b ng
Hin th Button th mc
hin th ch y mn hnh
thit lp chiu cao ca ca s
Cho php dng phm nng
Thit lp k/cch t vn bn n cnh ca s
hin th hp location
hin th thanh menu bar
Cho php thay i kch thc ca s
xut hin /khng xut hin thanh cun
Hin th thanh trng thi
hin th thanh tiu
hin th thanh cng c
Xc nh rng ca ca s
tr v gi tr true, false. True khi ca s ng
Khoa CNTT
URL
Yes/no
Yes/no
Yes/no
Yes/no
Yes/no
s nguyn
Yes/no
s nguyn
Yes/no
Yes/no
Yes/no
Yes/no
Yes/no
Yes/no
Yes/no
s nguyn
true, false
V d:
window.defaultStatus=String
window.status=String
window.location=URL
Ta cng c th m mt trang web mi bng lnh:
window.location.href=URL
2. Phng Thc
C php: window.method_name()
Phng Thc
alert("msg")
blur()
clearinterval(ID)
M t
Hin Th hp thai thng bo
Di chuyn con tr n ca s hin hnh
Hy thi gian thit lp bng setinterval()
Hy thi gian thit lp bng
clearTimeout(ID)
setTimeout()
close()
ng ca s hin hnh
Hin th hp thai xc nhn vi hai nt
confirm("msg")
Cancel v OK
focus()
a con tr v ca s hinhnh
Di chuyn ca s n mt v tr mi mt
MoveBy(x,y)
an pixel so vi ca s hin hnh
Di chuyn ca s qua tri v ln trn mt
MoveTo(x,y)
an pixel c th so vi ca s hin hnh.
open(URL,"windowname","F URL : l a ch trang web mun np vo
eatureList")
ca s.
WindowName: l tn ca s .
Trang 145
Gio Trnh Thit K Web
print()
prompt("msg","reply")
setTimeout(func,millisec)
stop()
resizeBy(dx,dy)
resizeTo(x,y)
scrollBy(dx,dy)
scrollTo(x,y)
Khoa CNTT
FeatureList : l danh sch cc thuc tnh ca
ca s: thanh cng c, thanh menu, thanh
status .
in ni dung trong ca s hin hnh.
Hin th hp thoi nhp liu
Thit lp thi gian mili giy gi mt hm
Hy vic download mt ca s. Tng t
nh vic ng mt ca s trnh duyt.
Thay i kch thc ca s sang phi dx,
di dy pixel
Thay i kch thc x, y pixel
cun ni dung sang phi dx, xung di dy
pixel
cun ni dung trn trang n v tr x,y
V d: Objwindow.close()
T kho self: trong trng hp mun thao tc trn ca s hin hnh ta dng t kho
self thay th cho i tng window
V d : ng ca s hin hnh:
Self.close() hoc window.close()
V d: on Script ng, m ca s trnh duyt
<html>
<head></head>
<body>
<FORM NAME="winform">
<INPUT TYPE="button" VALUE="Open New Window"
onClick="NewWin=window.open('blank1.htm','NewWin',
'toolbar=no,status=no,width=200,height=100'); ">
<P><INPUT TYPE="button" VALUE="Close New Window"
onClick="NewWin.close();" >
<P><INPUT TYPE="button" VALUE="Close Main Window"
onClick="window.close();">
</FORM>
</body>
</html>
V d: Vit hm m mt ca s mi khi click nt iu khin

Trang 146
Gio Trnh Thit K Web
Khoa CNTT
function openwindow()
{
window.open("http://www.yahoo.com","my_new_window",
"toolbar=yes, location=yes, directories=no, status=no, menubar=yes,
scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
}
3. S kin
S kin
onBlur
onError
onFocus
onLoad
onResize
onUnload
M t
Thc thi an m lnh khi s kin blur xy ra
Thc thi an m lnh khi s kin Error xy ra
Thc thi an m lnh khi s kin Focus xy ra
Thc thi an m lnh khi s kin Load xy ra
Thc thi an m lnh khi s kin resizer xy ra
Thc thi an m lnh khi s kin Unload xy ra
V d: Vit hm tr ti mt trang web khc

function locate()
{
location="http://www.yahoo.com/"
}
V d:Hin th mt s thng tin ln thanh trng thi
<head>
function load()
{window.status = "put your message here"}
</script>
</head>
<body onload="load()">
<p>Look in the statusbar</p>
</body>
V d: Vit hm in trang web:
function printpage()
{
window.print()
}
XVII.2.8. i tng form:

Form l mt thnh phn trn trang web dng thu thp d liu, thng tin t
ngi dng. Mi phn t trong form l mt i tng trong DOM. Do mi
phn t trn form cng c nhng s kin.
1. Cc s kin ca cc phn t trn form

Phn t
Button
Checkbox
Form
Textbox
Tn s kin
onClick
onClick
OnSubmit, onReset
OnBlur,OnChange,OnFocus,Onselect
Trang 147
Gio Trnh Thit K Web

Radio
Reset button
Dropdown menu
Submit button
Textarea
Khoa CNTT
OnClick
OnClick
OnBlur,onChange,onFocus,onSelect
OnClick
OnBlur,OnChange,OnFocus,Onselect
2. Truy cp gi tr cc phn t trn form

C php:
document.formName.formelement.properties
document.formName.formelement.method
V d 1: To mt form cha mt field nhp a ch email. Kim tra d liu nhp vo
c phi l a ch E-mail khng bng cch kim tra k t @ trong a ch nhp vo
<html>
<head><Title> Kiem tra</title></head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td>Enter your E-mail address: </td>
<td><input type="text" name="MyEmail"></td>
</tr>
<tr>
<td align="center"colspan="2">
<input type="submit" name="Submit" value="Send Input"
onclick= validate()>
</td>
</tr>
</table>
</form>
<script>
function validate()
{
ad= document.form1.MyEmail.value.indexOf("@")
if (ad == -1)
{
alert("Not a valid e-mail")
return false
}
}
</script>
</body></html>
V d 2: Kim tra tnh hp l ca gi tr nhp vo textfield

Trang 148
Gio Trnh Thit K Web
Khoa CNTT
<html>
<head>
<script>
function validate()
{
txt= document.myForm.myinput.value
if (txt>=1 && txt<=5)
{
return true
}
else
{
Alert("Must be between 1 and 5")
return false
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validate()">
Enter a value from 1 to 5:
<input type="text" name="myinput">
<input type="submit" value="Send input">
</form>
</body>
</html>
V d 3: To mt form cha 1 field nhp gi tr. Vit mt hm dng kim tra s k
t nhp vo field ny ( dng thuc tnh length kim tra s k t nhp vo)
<html>
<head>
function validateform()
{
input= document.myForm.myinput.value
if (input.length>5)
{
alert("Do not insert more than 5 characters")
return false
}
else { return true}
}
</script></head>
<body>
<form name="myForm" onsubmit="return validateform()">
in this input box you are not allowed to insert more than 5 characters:
<input type="text" name="myinput">
<input type="submit" value="Send input">
</form>
</body>
</html>
Trang 149
Gio Trnh Thit K Web
Khoa CNTT
3. Cc thuc tnh trn i tng form:

Thuc tnh
M t
Action
Tr v ng dn (URL) n tp tin x
l ca form th i
Length
Tr v s form trn trang web
Hoc tr v s phn t trn form th i
Name
Tr v gi tr tn ca form th i
Method
Cc nh phng thc ca form th i
elements mng element cha cc phn t trn
form
V d
Document.forms[i].action
Countform=document.forms.length
Countfield=document.forms[i].length
Nameform=document.forms[i].name
Methodform=document.forms[i].method
document.form[i].elements[j].value
4. Cc thuc tnh trn mng element

Thuc tnh M t
Xc nh tn ca mt phn t trn
Name
form th i.
Type
Xc nh lai ca i tng
Xc nh gi tr ca phn t th j
Value
trong form i.
Xc nh phn t th j c c
checked khng. Nu c tr v gi
Checked
tr true cn khng tr v gi tr
false
Thit lp ch m ( gn gi tr
Disable
true khng cho php ngi s
dng chn la v ngc li
Kim tra phn t c m khng
isDisable
(true l m v ngc li)
Cho php/khng thay i ni dung
readOnly
ca phn t
V d
document.form[i].elements[j].name
document.form[i].elements[j].type
document.form[i].elements[j].value
document.form[i].elements[j].checked
document.form[i].elements[j].disable
document.form[i].elements[j].isDisable
document.forms[i].elements[j].readOnly
5. Phng thc trn mng element:

Phng thc
Focus ()
M t
a con tr v li text box
hoc dropdownmenu
V d
document.form[i].elements[j].focus()
Lu : Nu ta ang lm vic trn document hin hnh, bit tn c th ca form v tn

ca thnh phn trn form ta c th truy cp trc tip m khng cn qua mng form v
element:
nameForm.nameField.property
hoc
nameForm.nameField.method
V d 1: v set focus trn mt field.
<html>
<head>
Trang 150
Gio Trnh Thit K Web
Khoa CNTT
function setfocus()
{
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Get Focus" onclick="setfocus()">
</form>
</body>
</html>
V d 2: Vit mt hm a con tr v textbox to trc ( s dng phng

thc focus() )
<html>
<head>
function setfocus()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30" value="input text">
<input type="button" value="Selected" onclick="setfocus()">
</form>
</body>
</html>
XVII.2.9. Cc phn t trn from:

1. Thao tc trn trng radio
Mun ly gi tr ca trng radio ta phi s dng n mng element. Duyt qua tt c
cc phn t v kim tra phn t c c checked khng ?
C php:
Countfield=nameform.length
for(var i=0;i<Countfield;i++)
if(nameform.elements[i].type= =radio &&nameform.elements[i].checked= =true)
Giatri=nameform.elements[i].value
V d 1: To form c cha cc radio:
<html>
<head>
function check(browser)
Trang 151
Gio Trnh Thit K Web
Khoa CNTT
{
document.forms[0].answer.value=browser
}
</script>
</head>
<body>
<form>
Which browser is your favorite<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Explorer">Microsoft internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Netscape">Netscape Navigator<br>
<input type="text" name="answer">
</form></body></html>
V d 2: Thao tc trn trng checkbox

<html>
<head>
function check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i = 0; i<coffee.length; ++ i)
{
if (coffee[i].checked)
{txt=txt + coffee[i].value + " "}
}
answer.value="You ordered a coffee with " + txt
}
</script>
</head>
<body>
<form>
How would you like your coffee?<br>
<input type="checkbox" name="coffee" value="cream">With cream<br>
<input type="checkbox" name="coffee" value="sugar">With sugar<br>
<input type="text" name="answer" size="30">
<input type="button" name="test" onclick="check()" value="Order">
</form>
</body>
</html>
Trang 152
Gio Trnh Thit K Web
Khoa CNTT
2. Thao tc trn dropdownmenu

Cc thuc tnh v phng thc ca dropdownmenu
a) Thuc tnh
Thuc tnh
length
selectedindex
options
M t
Tr v s phn t trong
danh sch
dropdownmenu.
tr v ch s ca phn t
c chn trong danh
sch
mng option cha cc
phn t trong danh sch
c nh ch s 0->spt-1
V d
spt=nameform.namefield.length
spt=nameform.namefield.selectedIndex
b) Phng thc
Phng thc
Focus()
M t
a con tr v li
dropdownmenu
V d
nameform.namefield.focus()
c) Cc thuc tnh ca mng option

Thuc tnh
DefaultSelected
Selected
Value
Text
M t
Tr v gi tr true nu
phn t th i c chn
Tr v gi tr true nu
phn t th i c chn
Tr v gi tr value ca
option th i.
Tr v gi tr text ca
option th i.
V d
nameform.namefield.option[i].defaultS
electedfocus()
nameform.namefield.option[i].selected
nameform.namefield.option[i].value
nameform.namefield.option[i].text
V d 1:
<html>
<head>
function put()
{
txt=document.forms[0].dropdown.options[document.forms[0].
dropdown.selectedIndex].text
document.forms[0].favorite.value=txt
Trang 153
Gio Trnh Thit K Web
Khoa CNTT
}
</script>
</head>
<body>
<form>
Select your favorite browser:
<select name="dropdown" onchange="put()">
<option>internet Explorer
<option>Netscape Navigator
</select>
<p>
Your favorite browser is:
<input type="text"
name="favorite" value="internet Explorer">
</form>
</body>
</html>
V d 2 To form c dropdown menu

<html>
<head>
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].
dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>
<body>
<form>
Select numbers:<br>
<select name="dropdown">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
Trang 154
Gio Trnh Thit K Web
Khoa CNTT
<option>9
<option>10
</select>
<input type="button" onclick="put()" value="-->"> <input type="text"
name="number">
</form>
</body>
</html>
V d 3:
<html>
<head></head>
<body>
<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length;
for (i=0; i<max; i++)
this[i]=textlist.arguments[i];
}
tl=new textlist("KHOA CONG NGHE THONG TIN", "TRUONG DAI HOC
CONG NGHIEP TPHCM","SO 12 NGUYEN VAN BAO ","DIEN THOAI:
8940390")
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0; setTimeout("textticker()",1000);
x++;
if(x==max) x=0; l=tl[x].length;
}
else
iq=setTimeout("textticker()",50);
}
function stop()
{
clearTimeout(iq)
}
</script>
<form action="" method="post" name="tickform" id="tickform">
<input name="tickfield" type="text" id="tickfield" size="50">
<p>
<input type="button" name="Button" value="Play" onClick="textticker()">
<input type="button" name="Button" value="Stop" onClick="stop()">
</p>
</form>
</body>
Trang 155
Gio Trnh Thit K Web
Khoa CNTT
</html>
XVII.3. THAY I NI DUNG NG TRN TRANG

XVII.3.1. Trn Nescape:
thay i ni dung ng trn trang dng cp tag <Layer> </Layer>
<Layer ID=IdName properties>
Document content
</Layer>
ID :l tn ca Layer, da vo IdName thay i ni dung ng trn trang,
Properties: l danh sch cc thuc tnh ca Layer nh xc nh v tr xut hin hay
lin kt n trang web no .
Danh sch cc thuc tnh:

Thuc tnh
Clip=top_x, left_y,bottom_x,right_y
Height=value
Left=value
PageX=value
PageY=value
SRC=URL
Top=value
Visibility=option(Hide|show)
Width=value
Z-index=value
M t
Xc nh ta xut hin ca layer trong ca s
Xc nh chiu cao cua layer
Qui nh khong trng tri t vn bn n layer
Xc nh khong cch ca layer so vi cnh trn
ca ca s
Xc nh khong cch ca layer so vi cnh bn
ca ca s
Xc nh tp tin np vo layer
Qui nh khong trng trn t vn bn n layer
Xc nh layer xut hin (show )hay khng xut
hin (hide)
Xc nh chiu rng layer
V tr tng i ca layer so vi cc phn t
khc
V d:
<layer ID=Idlayer SRC=filename.htm></layer>
Trong mt trang ta c th vit mt hoc nhiu layer. Nh vy da vo thuc tnh SRC
c th np vo mt hoc nhiu trang web khc nhau .
XVII.3.2. Trn Internet Explorer

Tag <Iframe></Iframe> trn Internet Explorer, c cng dng ging nh Layer trn
NetsCape.
<Iframe Id=IdName properties>

</Iframe>
Cc thuc tnh ca Iframe
Thuc tnh
Align={left,canter,right}
frameborder
Height=value
M t
Xc nh v tr xut hin ca ca iframe
Xc nh ng vin
Xc nh chiu cao
Trang 156
Gio Trnh Thit K Web
Khoa CNTT
SRC
Xc nh a ch trang web np vo iframe
width
Xc nh chiu rng ca iframe
Nu nh ni dung trong iframe qu ln th t n t ng xut hin thanh trt
cun ni dung.
Vit ni dung vo iframe
Idname.document.write(content)
Thay i ni dung trn trang iframe
Document.all.idName.SRC=URL
V d :
<iframe id=page frameborder=0 src= page2.htm></iframe>
XVII.3.3. Thay i ni dung trn trang da vo inner v outer
Ta dng c tnh inner v outer thay i ni dung hoc ly gi tr ca mt vng no
trn trang web.
1. Phn bit gia inner v outer
Inner l nhng g cha bn trong ca i tng cha ID. Inner gm c

o InnerHTML ly ni dung text v tag HTML bn trong i tng ID
o innerText: ch ly ni dung text bn trong di tng ID
Outer l phn inner v bn thn i tng cha ID. Outer gm c
o outerHTML ly ni dung text v tag HTML ca c i tng ID
o outerText : ly ni dung text
V d:
<Div ID=Intro>Monitor<B> SAMSUNG</B></Div>
inner
outer
2. Ly d liu t mt di tng
Nu ly d liu t mt vng no th innerText v outerText hon ton ging nhau,
ch ly phn vn bn khng ly cc th HTML bao quanh chng
V d:
Var s1,s2
s1=Intro.outerText
s2=Intro.innerText
th s1 v s2 u nhn gi tr Monitor SAMSUNG
V d
s1=Intro.outerHTML
s2=Intro.innerHTML
Th s1=<Div Id=Intro>Monitor<B> SAMSUNG</B></Div>
V s2=Monitor<B> SAMSUNG</B>
Trong trng hp ta vit ni dung n ra ngoi th n s nh dng nhng th HTML
cha trong phn ni dung
V d:
Intro.innerHTML=<I>CPU Pentium IV</I>
Trang 157
Gio Trnh Thit K Web
Khoa CNTT
Khi vng Intro s c thay th bng chui CPU Pentium IV Cha trong th
<DIV>
<Div Id=Intro>CPU Pentium IV</Div>
Intro.outerHTML=<I>CPU Pentium IV</I>
Khi vng Intro s c thay th bng chui CPU Pentium IV cha trong th
<DIV> ng thi th <DIV> khng cn trn trang. Do nu chng trnh tip tc
x l cc lnh cn lin quan n ID c tn l Intro th n s bo li. V chui CPU
Pentium IV thay th cho <Div Id=Intro>Monitor<B> SAMSUNG</B></Div>
V d: Dng Inner Outer
<html>
<head><title>Untitled Document</title>
<script language="JavaScript">
var count;
count=1;
function Add()
{
stt.innerText=count;
ma.innerText=form1.msv.value;
ten.innerText=form1.tsv.value;
dc.innerText=form1.dcsv.value;
r.id="r" + count;
stt.id="stt"+count;
ma.id="ma"+count;
ten.id="ten"+count;
dc.id="dc"+count;
pg=t.innerHTML
pd='<table id=t border="1" cellspacing="1" style=" BORDERCOLLAPSE: collapse" align="center" width=80%>'
pt='<tr id=r>'
pt=pt+'<td id=stt width="14%"></td>'
pt=pt+'<td id=ma width="26%"></td>'
pt=pt+'<td id=ten width="30%"></td>'
pt=pt+'<td id=dc width="30%"></td>'
pt=pt+'</tr>'
pc="</table>"
t.outerHTML=pd+pg+pt+pc
count++
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="60%" border="1" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="30%">MA SVIEN</td>
Trang 158
Gio Trnh Thit K Web
Khoa CNTT
<td width="70%"><input name="msv" type="text"
id="msv" SIZE=30></td>
</tr>
<tr>
<td>HO TEN SV</td>
<td><input name="tsv" type="text" id="tsv"
SIZE=30></td>
</tr>
<tr>
<td>DIA CHI</td>
<td><input name="dcsv" type="text" id="dcsv"
SIZE=30></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="button" name="Button" value="Add"
onClick="Add()"></div>
</td>
</tr>
</table>
</form>
<table id="t" width="75%" border="1" align="center" cellpadding="0"
cellspacing="0" align="center">
<tr bgcolor="#FFCCCC">
<td WIDTH=14%><div align="center">STT</div></td>
<td WIDTH=26%><div align="center">MA SVIEN</div></td>
<td WIDTH=30%><div align="center">HO TEN</div></td>
<td WIDTH=50%><div align="center">DIA CHI</div></td>
</tr>
<tr id="r" bgcolor="#FFCCCC">
<td id="stt" width="14%"></td>
<td id="ma" width="26%"></td>
<td id="ten" width="30%"></td>
<td id="dc" width="50%"></td>
</tr>
</table>
</body>
</html>
Trang 159
Gio Trnh Thit K Web
Khoa CNTT
V d tham kho : Thit k form bn v tu

<HTML>
<HEAD><TITLE></TITLE>
<script>
var t1="",t2="",t3="",t4="";
var objw;
focus();
function nhap()
{
var i;
if(DK.T1.value=="")
{
window.showModalDialog("massege.htm","Phai nhap vao ho
ten","status=no;help=no;scrollbar=no")
DK.T1.focus();
return;
}
if(DK.D1.options[DK.D1.selectedIndex].text==DK.D2.options[DK.D2.selectedIndex].
text)
{
window.showModalDialog("massege.htm","Noi di khong duoc trung noi
den","status=no;help=no;scrollbar=no");
return;
}
if(DK.T2.value=="")
{
window.showModalDialog("massege.htm","Phai nhap vao gia tien
","status=no; help=no;scrollbar=no")
DK.T2.focus();
return;
}
Trang 160
Gio Trnh Thit K Web
Khoa CNTT
if (isNaN(DK.T2.value )==true )
{
window.showModalDialog("massege.htm","Gia tri phai co kieu so",
"status=no; help=no;scrollbar=no");
DK.T2.value="";
DK.T2.focus();
return;
}
objw=window.open("danhsachdangky.htm","DanhSachDangKy")
t1= t1 + DK.T1.value +"<br>" ;
objw.c1.innerHTML = t1
i=DK.D1.selectedIndex ;
t2=t2+DK.D1.options[i].text+"<br>";
objw.c2.innerHTML=t2;
i=DK.D2.selectedIndex ;
t3=t3+DK.D2.options[i].text+"<br>";
objw.c3.innerHTML=t3;
gia= eval(DK.T2.value);
if(DK.co.checked)
{
t4 = t4 + gia*2*0.8 +"<br>"
objw.c4.innerHTML= t4
}
else
{
t4 = t4 + gia +"<br>"
objw.c4.innerHTML= t4
}
blur();
objw.focus();
}
</script>
</HEAD>
<BODY>
<FORM method="post" name="DK" >
<TABLE border="1" width="79%">
<TR>
<THcolspan="2">
<font size="5" face="Arial, Helvetica, sans-serif">
DANG KY VE TAU
</font>
</TH>
</TR>
<TR>
<TD width="54%">Ho ten khach hang: </TD>
<TD width="46%"><INPUT name="T1" ></TD>
</TR>
Trang 161
Gio Trnh Thit K Web
Khoa CNTT
<TR>
<TD width="54%">Noi di: </TD>
<TD width="46%">
<SELECT size="1" name="D1">
<OPTION value="TPHCM" selected>TPHCM</OPTION>
<OPTION value=" N?ng"> Nng</OPTION>
<OPTION value="H Ni">H Ni</OPTION>
<OPTION value="Hu">Hu</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD width="54%">Ni n: </TD>
<TD width="46%">
<SELECT size="1" name="D2">
<OPTION value=" Lt"> Lt</OPTION>
<OPTION value="Vung Tu" selected>Vng Tu</OPTION>
<OPTION value="Hu">Hu</OPTION>
<OPTION value="H N?i">H Ni</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD width="54%" height="41">Kh hi</TD>
<TD width="46%"><INPUT type="radio" value="V1" checked name="R1"
id=co>
C
<INPUT type="radio" name="R1" value="V2" id=khong>Khng</TD>
</TR>
<TR>
<TD>NGAY KHOI HANH: </td><td><input type="text"></td>
</TR>
<TR>
<TD> GIO KHOI HANH </td><td><input type="text"></td>
</TR>
<TR>
<TD width="54%">Gi</TD>
<TD width="46%"><INPUT name="T2"></TD>
</TR>
<TR>
<TD colspan="2">
<P align="right">
<INPUT type="button" value="Nhp" name="B1"
onclick="nhap()">
</P>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Trang 162
Gio Trnh Thit K Web
Khoa CNTT
CHNG XVIII:
HIU NG FILTER V
TRANSITION
XVIII.1. FILTER :
Filter l hiu ng c bit c p dng cho mt i tng trong trang web thay i s
th hin ca n. Hiu ng ny ch c Internet Explorer h tr, Netscape n khng c
h tr.
Filter ch c p dng cho cc thnh phn c to vi cc tag : <div>, <span>. Cn phi
xc nh rng, cao hoc c v tr tuyt i (width, height, position). <img>,
<marquee>, <button>, <input>, <textarea>, <table>, <tr>, <td>, <th>, <thead>, <tfoot>.
Mt s th hin ca mt i tng l hnh nh khi p dng cc loi filter.
Hnh gc (1)
alpha (2)
Blur (3)
chroma
dropshadow
flipV
flipH
glow
gray
invert
light (16)
Mask
Shadow (18)
Wave
xray
BNG I
p dng mt filter ta c th c th dng CSS (cascading style sheet) hoc dng
chng trnh javascript.
XVIII.1.1.
p dng filter bng CSS :

Trang 163
Gio Trnh Thit K Web
Khoa CNTT
C php:
Filter:filter_name(parameters).
Filter_name l tn mt trong nhng filter.
Parameters xc nh nhng gi tr tham s ca filter.
Mt filter c th khng c hoc c nhiu tham s, khi c nhiu tham s m khng ch
nh gi tr c th th coi nh chp nhn gi tr mc nh. Bng sau y m t tn filter v
cc tham s :
Tn filter
Tham s
Opacity : 0-100
Style : 0,1,2,3
Direction : 0-360
Strength : 1-100
Add :0/1 (cng hnh gc)
Color : #rrggbb
Alpha
Blur
Chroma
DropShadow
Color : #rrggbb
OffX, OffY
FlipH
FlipV
Khng
Khng
Glow
Color : #rrggbb
Strength : 1-255
Gray
Invert
Light
Mask
Wave
Khng
Khng
Nhiu tham s
Color : #rrggbb
Direction : 0-360
Color= #rrggbb
Nhiu tham s
Xray
Khng
Shadow
M t
B lc trong sut, tham s opacity t 0 (trong sut)
ti 100 (bnh thng). Style l kiu lc
B lc nho, direction l chiu lm nho tnh theo
gc, 0 l chiu hng ln trn, 90 l chiu sang
phi, strength ch nho mnh hay yu
Lm cho mu ch nh bi color b mt i
To bng xung mt phng pha di, OffX v
OffY tnh bng pixel l chnh lch theo to x v
y ca hnh gc v bng
Lt hnh theo chiu ngang
Lt hnh theo chiu ng
To qung sng quanh i tng, rng ch s
pixel c xc nh bi Strength, mu c xc
nh bi Color.
Th hin i tng theo thang xm
o ngc mu
To cc ngun sng chiu sng i tng
To mt n vi mu xc nh bi Color
To bng cho i tng nh kiu ch bng
thng thng.color nh mu cho bng
Bin dng i tng theo dng sng sin
Lm cho i tng c hnh nh nh nh ca film X
quang
Netscape khng h tr filter, nn khi gp nhng thuc tnh trong CSS m n khng nhn bit, n
s b qua tt c cc thuc tnh trong CSS p dng cho i tng. gii quyt vn ny ta c
th p dng filter bng cch s dng chng trnh javascript.
V d: Hnh 2 v 3 ca bng I c to bng CSS nh sau :
<img border = "0" src = "van.gif" width = "110" height= "120" style= "filter: alpha
(opacity = 90, style = 2)">
<img border="0" src="van.gif" width="110" height="120" style=" filter: blur (strength
= 10) " >
XVIII.1.2.
p dng filter dng javascript :
C php:
object.style.filter = filter_name(parameters)
Trang 164
Gio Trnh Thit K Web
Khoa CNTT
object : tn ca ca i tng trong trang.

Nu mun kt hp nhiu filter trong trang, ta phi phi phn cch chng vi nhau bng
du chm phy (iu ny khng cn thit khi dng CSS):
V d:
object.style.filter =shadow ; alpha(opacity=30) .
Ta c th s dng c php khc, xem filter nh mt phn ca m hnh i tng h s
(DOM: document object model), cho php xem cc tham s nh l thuc tnh ca i
tng filter. C php tng qut:
object.filters.filter_name.filter_parameter = value.
o object : l tn ca i tng
o filter_name : l tn ca filter p dng cho i tng.
o filter_parameter : l tn ca mt trong nhng tham s ca i tng.
V d:
<div id=logo style=position:absolute; filter:dropShadow(color:#ff0000 offx=5
offy=5)> TIN NHANH </div>
C th dng script bin i mu ca bng t mu sang mu xanh nh sau :
logo.filters.DropShadow.Color = #0000ff ;
Ch : lnh ny khng gy ra li ta phi p dng filter Dropshadow cho i
tng trc, nu khng s tr v li bi v filter khng c xem nh l mt phn
ca i tng DOM.
Mt i tng c th cha nhiu filter. C php logo.filters truy xut ti tp hp
filter ca i tng, theo javascript truy xut ti phn t (chng hn
DropShadow) trong i tng tp hp ta c c nhiu cch vit tng ng :
logo.filters.DropShadow
logo.filters[DropShaDow]
logo.filters[0]
Nh cp trn v vic khng nhn bit filter ca Netscape, gii quyt
vn ny ta to mt bin boolean xc nh trnh duyt ang dng
V d:
if (navigator.appName = = Microsoft Internet Explorer)
ie=true
else ie=false ;
if (ie)
{
logo.style.filter = apha(opacity=30);
}
ie : l bin boolean n c gi tr l true khi trnh duyt s dng l Internet
Explorer.
V d: Hnh 18 bng I c th c to bng cch dng javascript khi ta click chut vo
hnh trong trang web :
<html>
<head>
<script language=javascript>
function imgfilter()
{
img1.style.filter = "shadow";
Trang 165
Gio Trnh Thit K Web
Khoa CNTT
img1.filters.shadow.color="#ff0000";
}
</script>
</head>
<body>
<img id=img1 border="0" src="van.gif" width="110" height="120"
onClick="imgfilter()">
</body>
</html>
XVIII.1.3.
Mt vi ng dng :
1. To hiu ng cun vi filter (rollover) :

Ta c th to hiu ng thay i th hin ca i tng khi ngi dng tng tc vi
trang web (chng hn khi tr chut r ln i tng v khi tr chut ra khi i
tng), iu ny c th thc hin bng cch thay i hnh nh dng filter, cch lm
ny c li l khng cn phi load nhiu hnh nh.
V d:
<div
style=position:absolute
onMouseOver=this.style.filter=glow
onMouseOut=this.style.filter= > TIN NHANH </div>
Khi tr chut r ln trn dng ch th dng ch s c hiu ng glow. Khi tr chut ra
khi dng ch th khng c hiu ng filter c p dng.
2. To hiu ng filter ng :
i vi nhng hiu ng c tham s khi ta thay i gi tr ca tham s th th hin ca
i tng trong trang web cng thay i theo. Vic thay i tham s ta c th thc
hin bng chng trnh javascript, nu vic thay i ny tip din lin tc theo thi
gian i tng s c hiu ng filter ng.
V d:
var oplevel = 0;
objname.style.filter = alpha()
ids=setInterval (dynobject(objname),200);
function dynobject (object)
{
if (oplevel <= 100)
{
object.filters.Alpha.Opacity = oplevel ;
oplevel += 5;
}
else clearInterval (ids);
}
Khi thc thi, i tng s p dng hiu ng filter vi tham s opacity thay i t
0-100, t hon ton trong sut ti th hin bnh thng hon ton (ngi dng s
thy i tng s hin dn dn), tham s ny c 200 milisecond th tng thm 5,
khi opacity >100 th chng trnh s dng bi lnh clearInterval();
XVIII.1.4.
Dng filter Light :
Filter Light to c hiu ng rt l th, filter Light to hiu ng chiu sng i

tng bng nhng ngun sng khc nhau. C th to c n 10 ngun sng c mu
sc, cng pht sng, chiu sng i tng mt to xc nh (x,y,z vi z l
chiu cao), nhng ngun sng ny c mt s nh danh t 0-9, ngun sng ban u
c nh danh l 0.
Trang 166
Gio Trnh Thit K Web
Khoa CNTT
iu khin ngun sng, c 2 phng thc thng dng l : addPoint() v

MoveLight().
addPoint() thit lp mt ngun sng chiu sng i tng trng trang web
C php:
object.filters.light.addPoint (x ,z, y, r, g, b, strength).
object : tn ca i tng.
x,y,z l nhng s tnh bng pixel xc nh v tr ca ngun sng so vi
gc to l v tr trn bn tri ca i tng.
r,g,b l gi tr mu theo h mu RGB xc nh mu tng hp ca
ngun sng.
strength : gi tr xc nh mnh ca ngun sng.
MoveLight() di chuyn ngun sng ti v tr mi c xc nh bi cc
tham s.
C php :
object.filters.light.MoveLight (light, x, y, z, absolute).
light : l s nh danh ca ngun sng.
x, y, z : xc nh to mi ca ngun sng, to ny ph thuc vo
tham s absolute.
absolute : c 2 gi tr l true v false. Nu l true th i tng s di
chuyn ti v tr x,y, z. Nu l false th i tng s dch i t v tr
ban u vi di theo 3 chiu c xc nh bi tham s x, y, z.
Vic kt hp vi filter ng s cho ta nhng hiu ng v cng l th m khng cn
phi tiu tn ng truyn.
V d: Hnh 16 bng I c th c to bng cch dng filter light theo m sau (phi chy
thc trong IE ch khng phi preview trong frontpage)
<body>
<img id=img1 border="0" src="van.gif" width="110" height="120"
style="filter:light()">
<script language=javascript>
img1.filters.light.addpoint(40,30,130,0,255,0,100)
</script>
<body>
XVIII.2. TRANSITION :
Transtion l hiu ng p dng cho mt i tng trong mt khong thi gian, n tng t
nh filter ng, thng dng to mt hiu ng c bit khi thay th mt i tng ny
vi mt i tng khc. Transition thng dng to mt slide show km theo hiu ng.
N ch c h tr bi Internet Explorer, trong Netscape khi s dng transition bng CSS,
n s b qua tt c thuc tnh style ca i tng.
Ging nh filter, transition c th c ng dng cho i tng bng cch dng CSS hay
chng trnh javascript. C hai loi transition l : blend transition v reveal transition.
Blend Transiton : to hiu ng thay th dn dn i tng th nht bng i tng
th hai.
Trang 167
Gio Trnh Thit K Web
Khoa CNTT
Reveal Transition : khi thay th i tng th nht bng i tng th hai, v c th

p dng mt trong rt nhiu hiu ng.
XVIII.2.1.
p dng transition bng CSS :
1. C php blend transition trong CSS :

filter : blendTrans ( Duration=value).
value : lng thi gian tnh bng giy n nh thi gian cho hiu ng tip din.
2. C php cho reaveal transition

filter : revealTrans ( Duration = value, Transition = type)
type : mt s t 0 23, ch loi hiu ng transition theo bng sau :
Transition
Type
Box in
Box out
Circle in
Circle out
Wipe up
Wipe down
Wipe right
Wipe left
Vertical blinds
0
1
2
3
4
5
6
7
8
Horizontal blinds
Checkerboard Across
Ckeckerboard Down
10
11
XVIII.2.2.
Transition
Random dissolve
Split vertical in
Split vertical out
Split horizontal in
Split horizontal out
Strips left down
Strips left up
Strips right down
Strips right up
Random bars
horizontal
Random bars vertical
Random (0--22)
Type
12
13
14
15
16
17
18
19
20
21
22
23
p dng transition bng javascript :
C php trong javascript cho tham chiu ti transition tng t nh i vi filter. thit
lp thi gian din tin cho transition ta c th vit nh sau :
object.style.filter = blendTrans ( Duration=2);

Hoc dng tp hp filter :
object.filters.bendTrans.Duration = 2;
object : l tn ca i tng trong trang m ta mun p dng transition.
Ch khi xc nh transition th hiu ng transition vn cha xy ra, lm iu ny ta
phi thc hin thm mt bc na l vit chng trnh javascript thc thi .
XVIII.2.3.
Thc thi mt transition :
Khi transition c xc nh, thi hnh transition ta phi chy chng trnh javascript
thc thi bn bc :
Thit lp trng thi khi u cho i tng (c th b qua).
Dng phng thc apply() cho i tng.
Ch nh trng thi kt thc.
Trang 168
Gio Trnh Thit K Web
Khoa CNTT
Dng phng thc Play() thi hnh transition.

Trng thi khi u l hnh nh ca i tng trc khi thc thi transition. C th l
trng thi n hay hin ca i tng (thuc tnh visiblility l hidden hay visible) hay
trong trng hp mt hnh nh (<img>) l hnh nh th hin ca file c ch nh bi
thuc tnh src.
1. Dng phng thc apply() cho i tng :

object.filters.transition_type.apply();
hoc :
object.filters[ i ].apply();
object : tn i tng .
trasition_type : blendTrans hay revealTrans.
i l ch s ca filter tnh t 0.
Nu ch c mt filter cho i tng th ta c th vit object.filters[0].apply().
Ch : tp hp filter c th xem l bao gm c filter v transition.S dng phng thc
apply () khng thc s chy transition, ta cn cn phi ch nh trng thi kt thc ca
i tng .
2. Ch nh trng thi kt thc :

Nu ta mun transition chuyn mt i tng t trng thi n (hidden) ban u sang trng
thi kh kin (visible) th ta phi ch nh trng thi kt thc l hin i tng (thuc tnh
visibility l visible).
Nu transition dng i mt hnh bng mt hnh khc, th ch nh trng thi kt thc
bng lnh javascript cho bit file hnh mi cho i tng.
3. Dng phng thc play() : thc thi transiton c php nh sau :

object.filters.trasition_type.play();
hoc :
object.filters[ i ].play();
V d: to transition cho i tng hnh nh :
<html>
<head>
<style>
# img1 { filter : revealTrans( Duration=2, Transition=6 ) }
</style>
<script>
function swapit ()
{
img1.filters.revealTrans.apply();
mg1.src = image2.jpg;
mg1.filters.revealTrans.play();
}
</script>
</head>
<body>
<img id=img1 src=image1.jpg onClick=swapit() >
</body>
</html>
Trang 169
Gio Trnh Thit K Web
Khoa CNTT
Trong v d trn ta p dng style cho i tng img1, xc nh reaveal transition vi hiu
ng wipe right (ng vi transition=6) cho n. Khi trang web c load th i tng
img1 th hin hnh nh ca file ngun l image1.jpg .
Khi ngi dng click vo hnh nh th hm swapit() c gi : Trng thi ban u ca i
tng img1 l hnh nh ca file ngun image1.jpg, p dng phng thc apply(), sau
xc nh trng thi kt thc ca i tng l file hnh image2.jpg, cui cng dng phng
thc play() thi hnh transition.
Trnh duyt s p dng transition vi hiu ng wipe right khi thay i hnh t file
image1.jpg sang file image2.jpg.
V d:
<html>
<head>
<title>Transition</title>
<script language=javascript >
// to dycha cc hnh dng cho transition
var arrimg = new Array();
arrimg[0] = "vana.gif";
arrimg[1] = "vanb.gif";
arrimg[2] = "vanc.gif";
// to dy cha 23 loi transition
var arrname = new Array("box in","box out","circle in", "circle out","wipe
up","wipe
down","wipe
right","wipe
left","vertical
blind","horizon
blind","checkerboard Across","checkerboard down","random dissolse","split
vertical in", "split vertical out","split horizontal in","split horizontal out","strips
left down","strips left up","strips right down","strips right up","random bars
horizontal","random bars vertical","ran dom");
// khi ng bin m i, bin dng truy xut ln lt file hnh trong dy arrimg
var i=0;
// khi ng bin m j, bin dng truy xut ln lt cc loi transition trong
dy arriname, bt u bng -1 khi vo vng lp tng ln 0 arrname[0] s truy
xut ti hiu ng transition 1 (box in).
var j = -1;
function show()
{
i = i+1;
j=j+1;
// trnh vt ch s ca dy
if (i > 2) i=0;
if (j > 23) j=0;
// gn string vo text box (texta)
texta.value = j + " " + arrname[j]
imga.filters[0].transition = j;
imga.filters[0].apply();
imga.src= arrimg[i];
imga.filters[0].play();
// lp qui
setTimeout ("show()",2000)
}
</script>
</head>
Trang 170
Gio Trnh Thit K Web
Khoa CNTT
<body onload="show()">
<img id=imga border="0" src="vana.gif" width="110" height="120"
style="filter:revealtrans(duration=2)"><br>
<input id=texta type=text style="text-lign:center; color:white; background :
blue">
</body>
</html>
Khi chng trnh thc thi, hnh s thay i ln lt t vanb.gif sang vanc.gif sang
vana.gif ri quay v vana.gif c tip tc nh th. Mi ln chuyn hnh s km theo
hiu ng transition khc nhau t 0 n 23, s v tn ca hiu ng s c hin trong text
box.
Trang 171
Gio Trnh Thit K Web
Khoa CNTT
MC LC
CHNG I: GII THIU V WEB....................................................................................
I.1. CC KHI NIM C BN:.....................................................................................
I.2. GII THIU KHI QUT V WEB........................................................................
I.3. TAG HTML:...............................................................................................................
I.4. CU TRC C BN CA TRANG WEB:..............................................................
I.5. CC TAG HTML C BN :.....................................................................................
I.6. MT S THAO TC TRONG CA S TRNH DUYT......................................
CHNG II: SIU LIN KT-HNH NH.......................................................................
II.1. GII THIU SIU LIN KT................................................................................
II.2. TO SIU LIN KT.............................................................................................
II.3. HNH NH TRN TRANG WEB:..........................................................................
CHNG III:
DANH SCH............................................................................................
III.1.
DANH SCH KHNG C TH T (Unorder List -UL)...................................
III.2.
DANH SCH C TH T (OrderList OL).....................................................
III.3.
DANH SCH NH NGHA:..............................................................................
CHNG IV:
BNG V TRNH BY TRANG.............................................................
IV.1.
BNG...................................................................................................................
IV.2.
CC THUC TNH:............................................................................................
IV.3.
TRNH BY TRANG..........................................................................................
CHNG V:
FRAME......................................................................................................
V.1. KHI QUT V FRAME.......................................................................................
V.2. CCH TO MT FRAME LAYOUT.....................................................................
CHNG VI: FORM........................................................................................................
VI.1.
GII THIU FORM.............................................................................................
VI.2.
CC PHN T CA FORM:..............................................................................
CHNG VII: CASCADING STYLE SHEET-CSS..........................................................
VII.1. GII THIU.........................................................................................................
VII.2. CCH TO:.........................................................................................................
VII.3. NH BNG MU CHO LP (CLASS):...........................................................
CHNG VIII: GII THIU DREAMWEAVER..............................................................
VIII.1. GII THIU.........................................................................................................
VIII.2. CI T..............................................................................................................
VIII.3. MN HNH DREAMWEAVER:.........................................................................
VIII.4. K HOCH THIT K MT WEBSITE............................................................
CHNG IX: NH DNG VN BN- S DNG CSS..............................................
IX.1.
NH DNG VN BN.....................................................................................
IX.2.
S DNG CSS (CASCADING STYLE SHEETS)...............................................
CHNG X:
HNH NH V LIN KT TRANG TRONG DREAMWEAVER..........
X.1. CHN HNH NH VO TRANG WEB:................................................................
X.2. LIN KT TRANG TRONG DREAMWEAVER:...................................................
CHNG XI: BNG V TRNH BY TRANG.............................................................
XI.1.
TABLE :................................................................................................................
XI.2.
TRNH BY TRANG :........................................................................................
XI.3.
TO ALBUM LT TNG HNH:......................................................................
Trang 172
Gio Trnh Thit K Web
Khoa CNTT
XI.4.
TEMPLATE:.........................................................................................................
CHNG XII: BEHAVIORS - FORM...............................................................................
XII.1. BEHAVIORS........................................................................................................
XII.2. FORM:................................................................................................................
CHNG XIII: FRAMESETS KIM TRA V XUT BN........................................
XIII.1. GII THIU.......................................................................................................
XIII.2. CCH TO TRANG KHUNG V LIN KT TRANG...................................
XIII.3. KIM TRA V XUT BN..............................................................................
CHNG XIV: TNG QUAN V JAVASCRIPT............................................................
XIV.1.
GI THIU V JAVASCRIPT:.....................................................................
XIV.2.
BIN V D LIU TRONG JAVASCRIPT..................................................
CHNG XV: HM TRONG JAVASCRIPT..................................................................
XV.1. NH NGHA.....................................................................................................
XV.2. CC HM THNG DNG TRONG JAVASCRIPT.........................................
CHNG XVI: CC CU TRC IU KIN...............................................................
XVI.1.
CU TRC LA CHN:..............................................................................
XVI.2.
CU TRC LP:...........................................................................................
CHNG XVII: M HNH I TNG.......................................................................
XVII.1.
M HNH DOM ((Document Object Model).................................................
XVII.2.
CC I TNG C SN TRONG JAVASRIPT.......................................
XVII.3.
THAY I NI DUNG NG TRN TRANG............................................
CHNG XVIII: HIU NG FILTER V TRANSITION..............................................
XVIII.1. FILTER :.........................................................................................................
XVIII.2. TRANSITION :...............................................................................................
Trang 173

Giaotrinhtkweb

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Giaotrinhtkweb

Uploaded by

Copyright:

Available Formats

Gio Trnh Thit K Web

GII THIU V WEB

I.1. CC KHI NIM C BN:

Gio Trnh Thit K Web

Mi ngun trn web c duy nht mt a ch rt kh nh. V vy, ngi ta s

I.2. GII THIU KHI QUT V WEB

I.3. TAG HTML:

Gio Trnh Thit K Web

C th c nhiu tag lng vo nhau, theo nguyn tc tag no m trc th tag

I.4. CU TRC C BN CA TRANG WEB:

Phn u(<Head></Head>): l phn cha thng tin ca trang Web.

2. Hin th trang web:

Khi ng trnh duyt Internet Explorer

I.5. CC TAG HTML C BN :

Gio Trnh Thit K Web

Ngt dng ti v tr ca ca tag.

Dng k ng ngang trang, khng c tag ng

Gio Trnh Thit K Web

Dng nh dng font ch

Cha ni dung ca trang web

Gio Trnh Thit K Web

Dng chn mt hnh nh vo trang Web

Dng chn mt m thanh vo trangWeb. m thanh ny s c pht mi khi

Cho php a m thanh trc tip vo trang WEB.

Dng iu khin i tng chy mt cch t ng trn trang Web

Gio Trnh Thit K Web

Tag <I>: nh dng ch nghing

Tag <U>: Gch chn vn bn

Tag <BIG> v <SMALL>:

Chnh c ch to hoc nh hn c ch xung quanh

Tag <SUP> v <SUB> :

a ch ln cao hoc xung thp so vi vn bn bnh thng

Dng nhp mt dng m c nh dng k t ring. Dng m ny khng c

Gio Trnh Thit K Web

<EM>: Vn bn c nhn mnh (ging tag <I>)

<STRONG>: nh dng ch m (ging <B>)

<STRONG>Vn bn c nhn mnh</STRONG>

Dng phn cch mt khi vn bn nhn mnh, on vn bn ny c tch ra

Gi nguyn cc nh dng nh: ngt dng, khong cch, thch hp vi vic to

Gio Trnh Thit K Web

Chia vn bn thnh cc khi, c chung mt nh dng

Gio Trnh Thit K Web

I.6. MT S THAO TC TRONG CA S TRNH DUYT

Gio Trnh Thit K Web

Gio Trnh Thit K Web

Tab General(Hnh 1): thit lp cc ty chn cho trnh duyt

Gio Trnh Thit K Web

SIU LIN KT-HNH NH

Siu lin kt:

Internal Hyperlink:(Lin kt trong) l cc lin kt vi cc phn trong cng mt ti liu

II.2. TO SIU LIN KT

Dng URL tuyt i lin kt n cc trang trong website khc

Lin kt vi cc phn trong cng mt trang web

Nu ni dung ca trang qu di th nn to cc Bookmark nhy n mt phn c

Gio Trnh Thit K Web

Gio Trnh Thit K Web

Lin kt vi mt Bookmark mt ti liu khc

II.3.HNH NH TRN TRANG WEB:

nh .Gif (Graphics Interchange Format): c s dng ph bin nht trong cc ti

Gio Trnh Thit K Web

nh PNG (Portable Network Graphics) nn khng mt d liu

Cc thuc tnh ca nh:

Dn vn bn quanh hnh nh: