Tổng quan về thiết kế Web - Phạm Thế Bảo

Nội dung text: Tổng quan về thiết kế Web - Phạm Thế Bảo

1. 1/29/2010 TӘNGQUANVӄTHIӂTKӂWEB PHҤM THӂ BҦO ptbao@hcmus.edu.vn 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
2. 1/29/2010 Phҫn1ͲXácĜӏnhmөcĜích,yêucҫu cӫaWebsitecҫnthiӃtkӃ • Mөctiêu,yêucҫucѫbҧncӫaWebSite • ӕitѭӧngphөcvө • ChӫĜӇcӫaWebSite PhҥmThӃBҧoͲHKHTNTp.HCM Mөctiêu,yêucҫucѫbҧn • Ӆ ra mөc tiêu khái quát, 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өctiêuphҧidàihҥn,baotrùmtoànbӝkӃhoҥch pháttriӇn. 2
3. 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
4. 1/29/2010 VídөͲDiӉnĜàn PhҥmThӃBҧoͲHKHTNTp.HCM VídөͲOnlinetraining PhҥmThӃBҧoͲHKHTNTp.HCM 4
5. 1/29/2010 VídөͲtintӭc PhҥmThӃBҧoͲHKHTNTp.HCM VídөͲOnlineShopping PhҥmThӃBҧoͲHKHTNTp.HCM 5
6. 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
7. 1/29/2010 2x2Layout PhҥmThӃBҧoͲHKHTNTp.HCM Tablewithinatable PhҥmThӃBҧoͲHKHTNTp.HCM 7
8. 1/29/2010 Theoutertable PhҥmThӃBҧoͲHKHTNTp.HCM Theinnertable PhҥmThӃBҧoͲHKHTNTp.HCM 8
9. 1/29/2010 Theinnertable PhҥmThӃBҧoͲHKHTNTp.HCM Centeredwiththreecolumns PhҥmThӃBҧoͲHKHTNTp.HCM 9
10. 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à chuҭnhóa. • Khác nhau: các mӕi liên kӃt siêu vĉn bҧn, multimedia   ÆChophépngѭӡiĜӑctruynhұpĜӃnmӝttrang ĜѫnlҿmàkhôngcҫnĜӃnlӡitӵaĜӅ.  TìmkiӃmnhanhvàĜѫngiҧnhѫn.  CóthӇquaylҥimӝtloҥtcácliênkӃt. PhҥmThӃBҧoͲHKHTNTp.HCM 10
11. 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ҩtquán • 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 • YêucҫumӭcĜӝhoànhҧocӫathiӃtkӃgiao diӋnĜӗhӑa • XâydӵngcáckӏchbҧnmүuchocácloҥiĜӕi tѭӧngsӱdөngkhácnhau • Cáchtӕtnhҩt:thӱnghiӋmÆnhұncácphҧn hӗitӯĜӑcgiҧ. PhҥmThӃBҧoͲHKHTNTp.HCM 11
12. 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ҩtquán,dӉhiӇu,theochuҭn quiĜӏnh • Luôn có khҧ nĉng quay lҥi trang chӫ, các trangchӫchӕttrênWebsite PhҥmThӃBҧoͲHKHTNTp.HCM Khôngcótrangcuӕicùng(deadend) • MӛitrangcóítnhҩtmӝtliênkӃt • Trang “deadͲend” Æ thҩt 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
13. 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ҩtquán • Tùyvàoloҥiӭngdөng • ӑcgiҧsӁkhôngҩntѭӧngvàsӵphӭctҥ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 • quántrongtҩtcҧcáctrang PhҥmThӃBҧoͲHKHTNTp.HCM 13
14. 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ӃtluônĜҧmbҧocó ĜíchĜӃn,nӝidungluônĜҧ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Ӈ. • Luôn 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
15. 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
16. 1/29/2010 XácĜӏnhkiӇuchӳ,màusҳc • FontchӳÆphөthuӝcvào – һcĜiӇmthôngtin – ӝcgiҧ – TrìnhduyӋt,Ĝӝphângiҧi – Ngônngӳsӱdөng – Fontcóchân,khôngchân  • GammàuàthӕngnhҩttrongtoànbӝWebsite • FonttiӃngViӋt:VNI,TCVN3,Unicode  PhҥmThӃBҧoͲHKHTNTp.HCM XácĜӏnhkíchthѭӟckhungnhì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àmgì? • Lѭuý,hҫuhӃtcáctrangwebĜӅukhôngvӯa khӟpvӟimànhình14Ͳ15inch. PhҥmThӃBҧoͲHKHTNTp.HCM 16
17. 1/29/2010 Vídө: PhҥmThӃBҧoͲHKHTNTp.HCM XácĜӏnhcáckӻthuұt,côngcө thiӃtkӃ • PhөthuӝcnhiӅuyӃutӕ: – Môitrѭӡnghosting – ӝingƹthiӃtkӃ – ChiphíthiӃtkӃ – BĉngthôngĜѭӡngtruyӅn – . ÆChiphí PhҥmThӃBҧoͲHKHTNTp.HCM 17
18. 1/29/2010 CҳtĜoҥn,tómlѭӧcthôngtin • LuôncómӝtsӕlӧiĜiӇm: – ӑcgiҧcóítthӡigianĜӇĜӑccáctàiliӋutrênmàn hình. – LuôncónhucҫumuӕntìmphҫnthôngtinchӫĜӏnh, khôngnênchiacҳtquánhӓ,tómlѭӧcquá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ҩtquán. 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 quán, mangtínhgӧinhӟ • HӋthӕngphímҩnĜӗngnhҩt,logic • CóthӇliênkӃtĜӃnmӝtsitekháccƹngnhѭ 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
19. 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
20. 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. • LàhӋthӕngĜѭӧcdùngthôngdөngnhҩt • GҫnvӟimôhìnhtәchӭcthӃgiӟithӵc • DӉhìnhdungtәchӭcwebsite ÆCáinhìntәngquantӯtrangchӫ PhҥmThӃBҧoͲHKHTNTp.HCM 20
21. 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
22. 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ĜӕivӟikhixácĜӏnhmӕiliênquan giӳacácloҥithôngtin. • Rҩt tӕtĜӕi vӟi nhӳngĜӑc giҧ có kinh nghiӋm,cósҹnkiӃnthӭcvӅhӋthӕng,chӫ ĜӅtronghӋthӕng PhҥmThӃBҧoͲHKHTNTp.HCM 22
23. 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ӵ Ĝoá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
24. 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
25. 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ҩtquán PhҥmThӃBҧoͲHKHTNTp.HCM Cáctrangthànhviên • Xâydӵngtheocҩutrúccѫbҧncӫawebsite • Nhҩt quán, phù hӧp vӟi các thuӝc tínhĜã Ĝӏnhdҥngtrѭӟc PhҥmThӃBҧoͲHKHTNTp.HCM 25
26. 1/29/2010 Phҫn4–MӝtsӕvҩnĜӅcҫnquantâm • Thӡigianquҧnlý • LiênkӃtcáctrangWeb,quҧngcáo • Phөlөc,nguӗnthôngtin,cáctranggiúpĜӥ, FAQ • ThiӃtkӃtrangWebchomҥngInteranet PhҥmThӃBҧoͲHKHTNTp.HCM Thӡigianquҧnlý • WebsitecҫnĜѭӧccұpnhұtthôngtinĜӇĜӑc giҧluôncҧmnhұnĜѭӧccáimӟi • NӃuphҫnnàoĜóĜѭӧccұpnhұtÆthêmký hiӋu“New” • Ghithӡigiancұpnhұt,sӕngѭӡitruycұp  • NӃu website phӭc tҥp Æ thêm mӝt trang “Whatnew?” PhҥmThӃBҧoͲHKHTNTp.HCM 26
27. 1/29/2010 LiênkӃttrangweb,quҧngcáo • TҥoliênkӃtĜӃncáctrangthôngtin(Ĝӕitác, kháchhàng )Ætĉnguytín • KhiĜãәnĜӏnhÆchuyӇnĜәihìnhthӭckinh doanh,thuphí: – ThuêĜһtlogo,quҧngcáo – Thuphíthànhviên –  . PhҥmThӃBҧoͲHKHTNTp.HCM Phөlөc,nguӗnthôngtin,cáctrang giúpĜӥ,FAQ • Thông tin báo cáo thѭӡng côĜӑng Æ trên webcóthêmcácphөlөc • FAQ (Frequently Asked Questions) lý tѭӣng choviӋcthiӃtkӃwebsitehӛtrӧ • FAQ Æ giҧm thiӇu nhân sӵ và chi phí cho viӋchӛtrӧ,tѭvҩnkháchhàng PhҥmThӃBҧoͲHKHTNTp.HCM 27
28. 1/29/2010 ThiӃtkӃtrangwebchomҥng Intranet • MӝtsӕsitethiӃtkӃriêngchocáctәchӭc,sӱ dөngmҥngLAN • Mөctiêu:nângcaothӡigiantruycұp,dүn dҳtvàosâutrongcҩutrúcwebsiteàĜòihӓi thôngtinphҧihҩpdүn,cógiátrӏ • ӯngĜӇ ý tӟi bĉng thông và tӕcĜӝ à chú trӑngĜӃnnӝidungcógiátrӏvàsӵhҩpdүn chowebsite. PhҥmThӃBҧoͲHKHTNTp.HCM KiӇmthӱ – KiӇmtratrênnhiӅutrình duyӋt – KiӇmtratrênnhiӅuloҥi mҥng – KiӇmtratӕcĜӝ – KiӇmtracácliênkӃt – Thӱcáclӛibҧomұt –  PhҥmThӃBҧoͲHKHTNTp.HCM 28
29. 1/29/2010 Bàithӵchành2: THIӂTKӂWEBSITE 1. XácĜӏnhmөcĜích,yêucҫu 2. ThiӃtkӃtәchӭc i. ThiӃtkӃsѫĜӗtәchӭccáctrangwebcӫatӯng cácnhân(tӯngngѭӡilàm). ii. ThiӃt kӃ sѫĜӗ tә chӭc các trang web cӫa nhóm. 3. ThiӃtkӃgiaodiӋn PhҥmThӃBҧoͲHKHTNTp.HCM 29