intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Bài giảng Thiết kế Web: Tổng quan về thiết kế Web - Phạm Thế Bảo

Chia sẻ: Năm Tháng Tĩnh Lặng | Ngày: | Loại File: PDF | Số trang:29

114
lượt xem
11
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Thiết kế Web - Tổng quan về thiết kế Web gồm có 4 nội dung chính, đó là: Xác định mục đích, yêu cầu của Website cần thiết kế; thiết kế giao diện; các thành phần cơ bản của Website; và một số vấn đề cần quan tâm. Mời các bạn cùng tham khảo.

Chủ đề:
Lưu

Nội dung Text: Bài giảng Thiết kế Web: 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өc tiêu phҧi dài hҥn, bao trùm toàn bӝ 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 • ӑ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 • 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ông nên chia cҳt quá nhӓ, tóm lѭӧc quá 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á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
  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
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
5=>2