Tổng quan về thiết kế web

1/29/2010
1
TӘNGQUANVӄTHIӂTKӂWEB
PHҤM THӂ BҦO

PhҥmThӃBҧoͲHKHTNTp.HCM
Phҫn1:XácĜӏnhmөcĜích,yêucҫu
cӫaWebsitecҫnthiӃtkӃ
Phҫn2:ThiӃtkӃgiaodiӋn
Phҫn3:Cácthànhphҫn
cѫbҧncӫaWebsite
Phҫn4:MӝtsӕvҩnĜӅcҫn
quantâm
1/29/2010
2
Phҫn1ͲXácĜӏnhmөcĜích,yêucҫu
cӫaWebsitecҫnthiӃtkӃ
• Mөctiêu,yêucҫucѫbҧncӫaWebSite
• ӕitѭӧngphөcvө
• ChӫĜӇcӫaWebSite
PhҥmThӃBҧoͲHKHTNTp.HCM
Mөctiêu,yêucҫucѫbҧn
• Ӆ ra mөc tiêu khái quát, ngҳn gӑn, rõ ràng cӫa
WebsitecҫnthiӃtkӃ
• Là công cөĜӇĜánh giá sӵ thành bҥi cӫa mӝt
Website
• Mөc tiêu phҧi dài hҥn, bao trùm toàn
bӝ kӃ hoҥch
pháttriӇn.
1/29/2010
3

ӕitѭӧngphөcvө
• XácĜӏnhloҥiĜӑcgiҧchínhcӫaWebsite
• TìmhiӇuvӅ:
o SӵhiӇubiӃt
o TrìnhĜӝ
o Sӣthích
o KinhnghiӋmduyӋtWeb…
• ThiӃt kӃ tӕt = thích hӧp cho mӝt dҧ
i rӝng
các loҥiĜӑc giҧ có  trìnhĜӝ và nhu cҫu
kháchnhau
ChӫĜӅ
• GiúpĜӏnhhѭӟngchonhàthiӃtkӃ
o Giáodөc
o HuҩnluyӋn(onlinetrainning)
o Tintӭc
o Giҧitrí
o DiӉnĜàntraoĜәithҧoluұn
o Muabán,quҧnlý….
• vídө
1/29/2010
4
VídөͲDiӉnĜàn
PhҥmThӃBҧoͲHKHTNTp.HCM
VídөͲOnlinetraining
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
5
VídөͲtintӭc
PhҥmThӃBҧoͲHKHTNTp.HCM

VídөͲOnlineShopping
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
6
Phҫn2ͲThiӃtkӃgiaodiӋn
• iӇmkhácbiӋtgiӳatàiliӋuthôngthѭӡngvà
trangWEB
• Mӝt sӕ vҩnĜӅ liên quanĜӃn viӋc thiӃt kӃ
giaodiӋncѫbҧn
• ThiӃtkӃgiaodiӋnWebSite
PhҥmThӃBҧoͲHKHTNTp.HCM
ThiӃtkӃgiaodiӋnWebsite
Menu
Header
Content
Logo
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
7
2x2Layout
PhҥmThӃBҧoͲHKHTNTp.HCM
Tablewithinatable
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
8
Theoutertable
PhҥmThӃBҧoͲHKHTNTp.HCM
Theinnertable
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010

9
Theinnertable
PhҥmThӃBҧoͲHKHTNTp.HCM
Centeredwiththreecolumns
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
10
Reallycomplicateddesign!
PhҥmThӃBҧoͲHKHTNTp.HCM
iӇmkhácbiӋtgiӳatàiliӋuthông
thѭӡngvàtrangWEB
• Giӕng nha u: phҧiĜѭӧc trҧi qua sӵ phát triӇn và
chuҭnhóa.
• Khác nhau: các mӕi liên kӃt siêu vĉn bҧn,
multimedia…
 ÆChophépngѭӡiĜӑc truy nhұpĜӃnmӝttrang
Ĝѫnlҿ
màkhôngcҫnĜӃnlӡitӵaĜӅ.
 TìmkiӃmnhanhvàĜѫngiҧnhѫn.
 CóthӇquaylҥimӝtloҥtcácliênkӃt.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
11
MӝtsӕvҩnĜӅliênquanĜӃnviӋc
thiӃtkӃgiaodiӋncѫbҧn
• ThiӃt kӃhѭӟngtӟingѭӡisӱdөng
• CácgiúpĜӥĜӏnhhѭӟngrõràng
• Khôngcótrangcuӕicùng(deadͲend)
• Bĉngthôngvàҧnhhѭӣng
• ѫngiҧnvàtínhnhҩtquán

• TínhәnĜӏnhcӫacáctrangWeb
• PhҧnhӗivàĜӕithoҥi
• TínhtѭѫngthíchtrêncáctrìnhduyӋtkhácnhau
(thaythӃ)
PhҥmThӃBҧoͲHKHTNTp.HCM
ThiӃtkӃhѭӟngtӟingѭӡisӱ
dөng
• Ngѭӡi sӱ dөng làĜӕi tѭӧng chính quyӃt
ĜӏnhsӵthànhbҥicӫaWebsite
• Yêu c ҫu mӭcĜӝhoàn hҧocӫa thiӃtkӃ giao
diӋnĜӗhӑa
• Xây dӵng cáckӏch
bҧn mүucho các loҥiĜӕi
tѭӧngsӱdөngkhácnhau
• Cáchtӕtnhҩt:thӱnghiӋmÆnhұncácphҧn
hӗitӯĜӑcgiҧ.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
12
CácgiúpĜӥĜӏnhhѭӟngrõràng
• ӑcgiҧcóthӇtrҧlӡicáccâuhӓi:
– angӣĜâu?
– CóthӇlàmgì?
– CóthӇĜitiӃptӟiĜâu?
• BiӇu tѭӧngnhҩt quán,dӉ hiӇu,theo chuҭn
quiĜӏnh
• Luôn có khҧ nĉng quay lҥi trang chӫ, các
trangchӫchӕttrênWebsite
PhҥmThӃBҧoͲHKHTNTp.HCM
Khôngcótrangcuӕicùng(deadend)

• MӛitrangcóítnhҩtmӝtliênkӃt
• Trang “deadͲend” Æ thҩt vӑng, mҩt khҧ
nĉngĜӃnvӟicáctrangkhác.
• NênĜӇliênkӃtvӅtrangchӫtrongmӑitrang.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
13
Bĉngthôngvàҧnhhѭӣng
• SӵkiênnhүncӫaĜӑcgiҧcógiӟihҥn.
• TӕcĜӝĜôikhilàyӃutӕquyӃtĜӏnhĜӃnviӋc
lӵachӑnWebsite.
• Phân biӋt giӳa thiӃt kӃ cho Internet và
Intranet.
PhҥmThӃBҧoͲHKHTNTp.HCM
ѫngiҧnvàtínhnhҩtquán
• Tùyvàoloҥiӭngdөng
• ӑc giҧ sӁ không ҩn tѭӧng và sӵ phӭc tҥp
không lý do.һc biӋt làĜӑc giҧ phөc thuӝc
vàothӡigianvàthôngtinchínhxác.
• CácbiӇ
utѭӧngĜѫngiҧn,quenthuӝc,nhҩt
• quántrongtҩtcҧcáctrang
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
14
TínhәnĜӏnhcӫacáctrangWeb
• ӘnĜӏnhvӅcҩutrúcvànӝidung
• Cҩutrúc:cácthànhphҫnĜѭӧcĜһtĜúngchӛ
vàhoҥtĜӝngnhӏpnhàng.
• Nӝidung:cácmӕiliên kӃtluônĜҧm bҧocó

ĜíchĜӃn,
nӝi dungluôn Ĝҧm bҧo thíchhӧp
vàphҧicұpnhұtchophùhӧpvӟingӳcҧnh
tҥithӡiĜiӇmĜӑcgiҧduyӋtWeb.
PhҥmThӃBҧoͲHKHTNTp.HCM
PhҧnhӗivàĜӕithoҥi
• ChuҭnbӏtrѭӟcchoviӋctrҧlӡi,Ĝápӭngcác
Ĝòi hӓi, góp ý cӫaĜӑc giҧ mӝt cách nhanh
nhҩtcóthӇ.
• Luôn có cung cҩpĜӏa chӍĜӇ liên kӃt vӟi
“Webmaster”

• LênkӃhoҥchnhânsӵphөtráchlâudài.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
15
Tínhtѭѫngthíchtrêncáctrình
duyӋtkhácnhau(thaythӃ)
• Không phҧi mӑi trình duyӋtĜӅu hiӇn thӏ
trangwebcӫachúngtagiӕngnhau.
• Lѭu ý khi cóĜӑc giҧ sӱ dөng web browser
khôngcókhҧnĉnghӛtrӧĜӗhӑa.
• Sӱd
өngnhãn(tag)ALTtrongHTMLĜӇthay
• thӃ.
PhҥmThӃBҧoͲHKHTNTp.HCM
ThiӃtkӃgiaodiӋnWebsite
• XácĜӏnhkiӇuchӳ,màusҳc
• XácĜӏnhkíchthѭӟckhungnhìn
• XácĜӏnhcáckӻthuұt,côngcөthiӃtkӃ

• CҳtĜoҥn,tómlѭӧcthôngtin
• HӋthӕngMenuĜiӅukhiӇn,các
liênkӃtgiӳa
cáctrang
• XácĜӏnhcҩutrúcWebSite
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
16
XácĜӏnhkiӇuchӳ,màusҳc
• FontchӳÆphөthuӝcvào
– һcĜiӇmthôngtin
– ӝcgiҧ
– TrìnhduyӋt,Ĝӝphângiҧi
– Ngônngӳsӱdөng
– Fontcóchân,khôngchân…
• GammàuàthӕngnhҩttrongtoànbӝWebsite
• FonttiӃngViӋt:VNI,TCVN3,Unicode…
PhҥmThӃBҧoͲHKHTNTp.HCM
XácĜӏnhkíchthѭӟckhungnhìn
• Phҧi làm choĜӑc giҧ cҧm nhұnĜѭӧc kích
thѭӟc cӫa trang thông tin,  biӃt hӑĜang ӣ
Ĝâu,cóthӇlàmgì?
• Lѭuý,hҫuhӃtcáctrangwebĜӅukhôngvӯa
khӟp
vӟimànhình14Ͳ15inch.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
17
Vídө:
PhҥmThӃBҧoͲHKHTNTp.HCM

XácĜӏnhcáckӻthuұt,côngcө
thiӃtkӃ
• PhөthuӝcnhiӅuyӃutӕ:
– Môitrѭӡnghosting
– ӝingƹthiӃtkӃ
– ChiphíthiӃtkӃ
– BĉngthôngĜѭӡngtruyӅn
– ….
ÆChiphí
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
18
CҳtĜoҥn,tómlѭӧcthôngtin
• LuôncómӝtsӕlӧiĜiӇm:
– ӑcgiҧcó ít thӡi gianĜӇĜӑc các tàiliӋu trên màn
hình.
– LuôncónhucҫumuӕntìmphҫnthôngtinchӫĜӏnh,
không nên chia cҳt quá nhӓ, tóm lѭӧc quá ngҳn à
gâyth
ҩtvӑng
– HìnhthӭcvàcáchtәchӭcĜӗngnhҩtàkinhnghiӋm
tìmkiӃm,khámphá.
– Thôngtinngҳngӑn,súctíchthíchhӧpvӟimànhình
máytính(bӏgiӟihҥntҫmnhìn).

• ViӋcápdөngphҧilinhĜӝng,nhҩtquán.
PhҥmThӃBҧoͲHKHTNTp.HCM
HӋthӕngMenuĜiӅukhiӇn,các
liênkӃtgiӳacáctrang
• HӋ thӕngĜӗ hӑa phong  phú, nhҩt quán,

mangtínhgӧinhӟ
• HӋthӕngphímҩnĜӗngnhҩt,logic
• Có thӇ liên kӃtĜӃnmӝt site khác cƹng nhѭ
quaylҥisitetrѭӟc.
• Các
liênkӃtĜӃncácsitecógiátrӏsӁtĉnggiá
trӏchínhwebsitecӫachúngta.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
19
Vídө
PhҥmThӃBҧoͲHKHTNTp.HCM
XácĜӏnhcҩutrúcWebSite
• HӋthӕngphâncҩp
• HӋthӕngcáctrangnӕitiӃp
• ÔLѭӟi
• MҥngnhӋn
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
20
Phâncҩp
PhҥmThӃBҧoͲHKHTNTp.HCM
HӋthӕngPhâncҩp
• DùngĜӇ tә chӭc các khӕi thông tin phӭc
hӧp.
• LàhӋthӕngĜѭӧcdùngthôngdөngnhҩt
• GҫnvӟimôhìnhtәchӭcthӃgiӟithӵc
• DӉhìnhdungtәchӭc
website
ÆCáinhìntәngquantӯtrangchӫ

PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
21
NӕitiӃp
PhҥmThӃBҧoͲHKHTNTp.HCM
HӋthӕngcáctrangnӕitiӃp
• BiӇudiӉnthôngtintuҫntӵ,cácbҧngtѭӡng
thuұtnӕitiӃptheothӡigian
• Các thông tin tra cӭu tham khҧo: tӵĜiӇn
báckkhoa,tӵĜiӇnthuұtngӳ
• Thíchhӧp
chohӋthӕngwebsitenhӓ.
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
22
Ôlѭӟi
PhҥmThӃBҧoͲHKHTNTp.HCM
HӋthӕngÔlѭӟi
• Danhsáchkhóahӑc,cácbiӃncӕ,sӵkiӋn
• TӯngĜѫnvӏtrongcҩutrúcphҧicócùngcҩu
trúcchocácchӫĜӅlӟnvànhӓ
• Khó hiӇuĜӕi vӟi khi xácĜӏnh m
ӕi liên quan
giӳacácloҥithôngtin.
• Rҩt tӕtĜӕi vӟi nhӳngĜӑc giҧ có kinh
nghiӋm, có sҹn kiӃn thӭc vӅ hӋ thӕng, chӫ
ĜӅtronghӋthӕng
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
23

MҥngnhӋn
PhҥmThӃBҧoͲHKHTNTp.HCM
HӋthӕngmҥngnhӋn
• TӕchӭcíthҥnchӃchoviӋcsӱdөngmүuthông
tin
• Mô hình tӵ khám phá, khai thác triӋtĜӇ ѭu
ĜiӇmcӫahyperlink
• Cҩu trúc phi thӵc tӃ nhҩt, khó hiӇu, khó
 dӵ
ĜoánchoĜӑcgiҧ
• Thích hӧp vӟi nhӳng site nhӓ,Ĝӑc giҧ chuyên
nghiӋp hoһc  trìnhĜӝ cao , tìm kiӃm các kiӃn
thӭcchuyênsâu
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
24
Phҫn3ͲCácthànhphҫncѫbҧncӫa
Website
• Trangchӫ(HomePage)
• HӋthӕngMenu,Logo,Ĝӏnhdanh
• Cáctrangthànhviên
PhҥmThӃBҧoͲHKHTNTp.HCM
Trangchӫ
• MӑiwebsiteĜӅuĜѭӧcthiӃtlұpquanh
Homepage
• iӅukiӋncѫbҧnĜӇwebsitethànhcông
• LѭuýkhisӱdөnghӋthӕngĜӗhӑa
PhҥmThӃBҧoͲHKHTNTp.HCM
1/29/2010
25

HӋthӕngmenu,logo,Ĝӏnhdanh
• HӋthӕngmenuphҧirõràng,ĜҫyĜӫsӁgiúp
Ĝӑc giҧ hình dungĜѭӧc cҩu trúc, tә chӭc
website.
• CҫnquantâmĜӃnvӏtrí,cácthӇhiӋn(cóhay
khôngcóhiӋuӭng)
• Vӏ trí logo,Ĝӏnh danh công ty phҧi cӕĜӏnh
nhҩtquán
PhҥmThӃBҧoͲHKHTNTp.HCM
Cáctrangthànhviên
• Xâydӵngtheocҩutrúccѫbҧncӫawebsite
• Nhҩt quán, phù hӧp vӟi các thuӝc tínhĜã
Ĝӏnhdҥngtrѭӟc
PhҥmThӃBҧoͲHKHTNTp.HCM