1/29/2010

TӘNGQUANVӄTHIӂTKӂWEB
PHҤM THӂ BҦO


PhҥmThӃBҧoͲHKHTNTp.HCM

Phҫn1:XácĜӏnhmөcĜích,yêucҫu
cӫaWebsitecҫnthiӃtkӃ
Phҫn2:ThiӃtkӃgiaodiӋn
Phҫn3:Cácthànhphҫn
cѫbҧncӫaWebsite
Phҫn4:MӝtsӕvҩnĜӅcҫn
quantâm

1


1/29/2010

Phҫn1ͲXácĜӏnhmөcĜích,ucҫu
cӫaWebsitecҫnthiӃtkӃ
• Mөctiêu,ucҫucѫbҧncӫaWebSite
• ӕitѭӧngphөcvө
• ChӫĜӇcӫaWebSite

PhҥmThӃBҧoͲHKHTNTp.HCM

Mөctiêu,ucҫucѫbҧn
• Ӆ ra mөc tiêu khái qt, ngҳn gӑn, rõ ràng cӫa

WebsitecҫnthiӃtkӃ
• 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áttriӇn.

2


1/29/2010

ӕitѭӧngphөcvө
• XácĜӏnhloҥiĜӑcgiҧchínhcӫaWebsite
• TìmhiӇuvӅ:
o SӵhiӇubiӃt
o TrìnhĜӝ
o Sӣthích
o KinhnghiӋmduyӋtWeb…
• 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áchnhau

ChӫĜӅ
• GiúpĜӏnhhѭӟngchonhàthiӃtkӃ
o Giáodөc
o HuҩnluyӋn(onlinetrainning)
o Tintӭc
o Giҧitrí
o DiӉnĜàntraoĜәithҧoluұn
o Muabán,quҧnlý….

• vídө

3


1/29/2010

VídөͲDiӉnĜàn

PhҥmThӃBҧoͲHKHTNTp.HCM

VídөͲOnlinetraining

PhҥmThӃBҧoͲHKHTNTp.HCM

4


1/29/2010

VídөͲtintӭc

PhҥmThӃBҧoͲHKHTNTp.HCM

VídөͲOnlineShopping

PhҥmThӃBҧoͲHKHTNTp.HCM

5



1/29/2010

Phҫn2ͲThiӃtkӃgiaodiӋn
• iӇmkhácbiӋtgiӳatàiliӋuthơngthѭӡngvà
trangWEB
• Mӝt sӕ vҩn ĜӅ liên quan ĜӃn viӋc thiӃt kӃ
giaodiӋncѫbҧn
• ThiӃtkӃgiaodiӋnWebSite

PhҥmThӃBҧoͲHKHTNTp.HCM

ThiӃtkӃgiaodiӋnWebsite
Logo

Header

Menu

Content

PhҥmThӃBҧoͲHKHTNTp.HCM

6


1/29/2010

2x2Layout


PhҥmThӃBҧoͲHKHTNTp.HCM

Tablewithinatable

PhҥmThӃBҧoͲHKHTNTp.HCM

7


1/29/2010

Theoutertable

PhҥmThӃBҧoͲHKHTNTp.HCM

Theinnertable

PhҥmThӃBҧoͲHKHTNTp.HCM

8


1/29/2010

Theinnertable

PhҥmThӃBҧoͲHKHTNTp.HCM

Centeredwiththreecolumns


PhҥmThӃBҧoͲHKHTNTp.HCM

9


1/29/2010

Reallycomplicateddesign!

PhҥmThӃBҧoͲHKHTNTp.HCM

iӇmkhácbiӋtgiӳatàiliӋuthơng
thѭӡngvàtrangWEB
• Giӕng nhau: phҧi Ĝѭӧc trҧi qua sӵ phát triӇn v
chunhúa.
ã Khỏc nhau: cỏc mi liờn kt siờu vn bn,
multimedia

ặChophộpngictruynhpnmttrang


nlmkhụngcnnlita.

Tỡmkimnhanhvnginhn.

Cúthquaylimtlotcỏcliờnkt.

PhmThBoHKHTNTp.HCM

10



1/29/2010

MӝtsӕvҩnĜӅliênquanĜӃnviӋc
thiӃtkӃgiaodiӋncѫbҧn
•
•
•
•
•
•
•
•

ThiӃtkӃhѭӟngtӟingѭӡisӱdөng
CácgiúpĜӥĜӏnhhѭӟngrõràng
Khơngcótrangcuӕicùng(deadͲend)
Bĉngthơngvàҧnhhѭӣng
ѫngiҧnvàtínhnhҩtqn
TínhәnĜӏnhcӫacáctrangWeb
PhҧnhӗivàĜӕithoҥi
TínhtѭѫngthíchtrêncáctrìnhduyӋtkhácnhau
(thaythӃ)
PhҥmThӃBҧoͲHKHTNTp.HCM

ThiӃtkӃhѭӟngtӟingѭӡisӱ
dөng
• Ngѭӡi sӱ dөng là Ĝӕi tѭӧng chính quyӃt
ĜӏnhsӵthànhbҥicӫaWebsite

• ucҫumӭcĜӝhồnhҧocӫathiӃtkӃgiao
diӋnĜӗhӑa
• Xõydngcỏckchbnmuchocỏcloii
tngsdngkhỏcnhau
ã Cỏchttnht:thnghimặnhncỏcphn
hitcgi.
PhmThBoHKHTNTp.HCM

11


1/29/2010

CácgiúpĜӥĜӏnhhѭӟngrõràng
• ӑcgiҧcóthӇtrҧlӡicáccâuhӓi:
– angӣĜâu?
– CóthӇlàmgì?
– CóthӇĜitiӃptӟiĜâu?

• BiӇutѭӧngnhҩtqn,dӉhiӇu,theochuҭn
quiĜӏnh
• Ln có khҧ nĉng quay li trang ch, cỏc
trangchchttrờnWebsite
PhmThBoHKHTNTp.HCM

Khụngcútrangcuicựng(deadend)
ã Mitrangcúớtnhtmtliờnkt
ã Trang deadend ặ tht vӑng, mҩt khҧ
nĉngĜӃnvӟicáctrangkhác.
• NênĜӇliênkӃtvӅtrangchӫtrongmӑitrang.


PhҥmThӃBҧoͲHKHTNTp.HCM

12


1/29/2010

Bĉngthơngvàҧnhhѭӣng
• SӵkiênnhүncӫaĜӑcgiҧcógiӟihҥn.
• TӕcĜӝĜơikhilàyӃutӕquyӃtĜӏnhĜӃnviӋc
lӵachӑnWebsite.
• Phân biӋt giӳa thiӃt kӃ cho Internet và
Intranet.

PhҥmThӃBҧoͲHKHTNTp.HCM

ѫngiҧnvàtínhnhҩtqn
• Tùyvàoloҥiӭngdөng
• ӑc giҧ sӁ khơng ҩn tѭӧng và sӵ phӭc tҥp
khơnglýdo.һcbiӋtlàĜӑcgiҧphөcthuӝc
vàothӡigianvàthơngtinchínhxác.
• CácbiӇutѭӧngĜѫngiҧn,quenthuӝc,nhҩt
• qntrongtҩtcҧcáctrang

PhҥmThӃBҧoͲHKHTNTp.HCM

13



1/29/2010

TínhәnĜӏnhcӫacáctrangWeb
• ӘnĜӏnhvӅcҩutrúcvànӝidung
• Cҩutrúc:cácthànhphҫnĜѭӧcĜһtĜúngchӛ
vàhoҥtĜӝngnhӏpnhàng.
• Nӝidung:cácmӕiliênkӃtlnĜҧmbҧocó
ĜíchĜӃn,nӝidunglnĜҧmbҧothíchhӧp
vàphҧicұpnhұtchophùhӧpvӟingӳcҧnh
tҥithӡiĜiӇmĜӑcgiҧduyӋtWeb.

PhҥmThӃBҧoͲHKHTNTp.HCM

PhҧnhӗivàĜӕithoҥi
• ChuҭnbӏtrѭӟcchoviӋctrҧlӡi,Ĝápӭngcác
Ĝịi hӓi, góp ý cӫa Ĝӑc giҧ mӝt cách nhanh
nhҩtcóthӇ.
• Ln có cung cҩp Ĝӏa chӍ ĜӇ liên kӃt vӟi
“Webmaster”
• LênkӃhoҥchnhânsӵphөtráchlâudài.

PhҥmThӃBҧoͲHKHTNTp.HCM

14


1/29/2010

Tínhtѭѫngthíchtrêncáctrình
duyӋtkhácnhau(thaythӃ)

• Khơng phҧi mӑi trình duyӋt ĜӅu hiӇn thӏ
trangwebcӫachúngtagiӕngnhau.
• Lѭu ý khi có Ĝӑc giҧ sӱ dөng web browser
khơngcókhҧnĉnghӛtrӧĜӗhӑa.
• Sӱdөngnhãn(tag)ALTtrongHTMLĜӇthay
• thӃ.

PhҥmThӃBҧoͲHKHTNTp.HCM

ThiӃtkӃgiaodiӋnWebsite
•
•
•
•
•

XácĜӏnhkiӇuchӳ,màusҳc
XácĜӏnhkíchthѭӟckhungnhìn
XácĜӏnhcáckӻthuұt,cơngcөthiӃtkӃ
CҳtĜoҥn,tómlѭӧcthơngtin
HӋthӕngMenuĜiӅukhiӇn,cácliênkӃtgiӳa
cáctrang
• XácĜӏnhcҩutrúcWebSite
PhҥmThӃBҧoͲHKHTNTp.HCM

15


1/29/2010


Xỏcnhkiuch,musc
ã Fontchặphthucvo






cimthụngtin
cgi
Trỡnhduyt,phõngii
Ngụnngsdng
Fontcúchõn,khụngchõn

ã GammuthngnhttrongtonbWebsite
ã FonttingVit:VNI,TCVN3,Unicode
PhmThBoHKHTNTp.HCM

Xỏcnhkớchthckhungnhỡn
ã Phi lm cho c gi cm nhұn Ĝѭӧc kích
thѭӟc cӫa trang thơng tin, biӃt hӑ Ĝang ӣ
Ĝâu,cóthӇlàmgì?
• Lѭuý,hҫuhӃtcáctrangwebĜӅukhơngvӯa
khӟpvӟimànhình14Ͳ15inch.

PhҥmThӃBҧoͲHKHTNTp.HCM

16



1/29/2010

Vớd:

PhmThBoHKHTNTp.HCM

Xỏcnhcỏckthut,cụngc
thitk
ã Phthucnhiuyut:
Mụitrnghosting
ingthitk
Chiphớthitk
Bngthụngngtruyn
.

ặChiphớ

PhmThBoHKHTNTp.HCM

17


1/29/2010

CҳtĜoҥn,tómlѭӧcthơngtin
• LncómӝtsӕlӧiĜiӇm:

– ӑcgiҧcóítthӡigianĜӇĜӑccáctàiliӋutrênmàn
hình.
– LncónhucҫumuӕntìmphҫnthơngtinchӫĜӏnh,

khơng nên chia cҳt q nhӓ, tóm lѭӧc q ngҳn à
gâythҩtvӑng
– HìnhthӭcvàcáchtәchӭcĜӗngnhҩtàkinhnghiӋm
tìmkiӃm,khámphá.
– Thơngtinngҳngӑn,súctíchthíchhӧpvӟimànhình
máytính(bӏgiӟihҥntҫmnhìn).

• ViӋcápdөngphҧilinhĜӝng,nhҩtqn.
PhҥmThӃBҧoͲHKHTNTp.HCM

HӋthӕngMenuĜiӅukhiӇn,các
liênkӃtgiӳacáctrang
• HӋ thӕng Ĝӗ hӑa phong phú, nhҩt qn,
mangtínhgӧinhӟ
• HӋthӕngphímҩnĜӗngnhҩt,logic
• CóthӇ liênkӃtĜӃnmӝtsitekhác cƹng nhѭ
quaylҥisitetrѭӟc.
• CácliênkӃtĜӃncácsitecógiátrӏsӁtĉnggiá
trӏchínhwebsitecӫachúngta.

PhҥmThӃBҧoͲHKHTNTp.HCM

18


1/29/2010

Vídө

PhҥmThӃBҧoͲHKHTNTp.HCM


XácĜӏnhcҩutrúcWebSite
•
•
•
•

HӋthӕngphâncҩp
HӋthӕngcáctrangnӕitiӃp
ƠLѭӟi
MҥngnhӋn

PhҥmThӃBҧoͲHKHTNTp.HCM

19


1/29/2010

Phâncҩp

PhҥmThӃBҧoͲHKHTNTp.HCM

HӋthӕngPhâncҩp
• Dùng ĜӇ tә chӭc các khӕi thơng tin phӭc
hӧp.
• Lhthngcdựngthụngdngnht
ã Gnvimụhỡnhtchcthgiithc
ã Dhỡnhdungtchcwebsite
ặCỏinhỡntngquanttrangch


PhmThBoHKHTNTp.HCM

20


1/29/2010

NӕitiӃp

PhҥmThӃBҧoͲHKHTNTp.HCM

HӋthӕngcáctrangnӕitiӃp
• BiӇudiӉnthơngtintuҫntӵ,cácbҧngtѭӡng
thuұtnӕitiӃptheothӡigian
• Các thơng tin tra cӭu tham khҧo: tӵ ĜiӇn
báckkhoa,tӵĜiӇnthuұtngӳ
• ThíchhӧpchohӋthӕngwebsitenhӓ.

PhҥmThӃBҧoͲHKHTNTp.HCM

21


1/29/2010

Ơlѭӟi

PhҥmThӃBҧoͲHKHTNTp.HCM


HӋthӕngƠlѭӟi
• Danhsáchkhóahӑc,cácbiӃncӕ,sӵkiӋn
• TӯngĜѫnvӏtrongcҩutrúcphҧicócùngcҩu
trúcchocácchӫĜӅlӟnvànhӓ
• Khó hiӇu Ĝӕi vӟi khi xác Ĝӏnh mӕi liên quan
giӳacácloҥithơngtin.
• 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ӫ
ĜӅtronghӋthӕng
PhҥmThӃBҧoͲHKHTNTp.HCM

22


1/29/2010

MҥngnhӋn

PhҥmThӃBҧoͲHKHTNTp.HCM

HӋthӕngmҥngnhӋn
• TӕchӭcíthҥnchӃchoviӋcsӱdөngmүuthơng
tin
• Mơ hình tӵ khám phá, khai thác triӋt ĜӇ ѭu
ĜiӇmcӫahyperlink
• Cҩu trúc phi thӵc tӃ nhҩt, khó hiӇu, khó dӵ
ĜốnchoĜӑcgiҧ
• 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ӭcchuyênsâu


PhҥmThӃBҧoͲHKHTNTp.HCM

23


1/29/2010

Phҫn3ͲCácthànhphҫncѫbҧncӫa
Website
• Trangchӫ(HomePage)
• HӋthӕngMenu,Logo,Ĝӏnhdanh
• Cáctrangthànhviên

PhҥmThӃBҧoͲHKHTNTp.HCM

Trangchӫ
• MӑiwebsiteĜӅuĜѭӧcthiӃtlұpquanh
Homepage
• iӅukiӋncѫbҧnĜӇwebsitethànhcơng
• LѭuýkhisӱdөnghӋthӕngĜӗhӑa

PhҥmThӃBҧoͲHKHTNTp.HCM

24


1/29/2010

HӋthӕngmenu,logo,Ĝӏnhdanh

• HӋthӕngmenuphҧirõràng,ĜҫyĜӫsӁgiúp
Ĝӑc giҧ hình dung Ĝѭӧc cҩu trúc, tә chӭc
website.
• CҫnquantâmĜӃnvӏtrí,cácthӇhiӋn(cóhay
khơngcóhiӋuӭng)
• Vӏ trí logo, Ĝӏnh danh cơng ty phҧi cӕ Ĝӏnh
nhҩtqn

PhҥmThӃBҧoͲHKHTNTp.HCM

Cáctrangthànhviên
• Xâydӵngtheocҩutrúccѫbҧncӫawebsite
• Nhҩt qn, phù hӧp vӟi các thuӝc tính Ĝã
Ĝӏnhdҥngtrѭӟc

PhҥmThӃBҧoͲHKHTNTp.HCM

25