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

Tài liệu này dành cho sinh viên, giáo viên khối ngành công nghệ thông tin tham khảo và có những bài học bổ ích hơn, bổ trợ cho việc tìm kiếm tài liệu, giáo án, giáo trình, bài giảng các môn học khối ngành công nghệ thông tin

1/29/2010 1 TӘNGQUANVӄTHIӂTKӂWEB PHҤM THӂ BҦO ptbao@hcmus.edu.vn 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 [...]... 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 24 1/29/2010 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... 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 25 1/29/2010 Ph n 4 – M t s v n c n quan tâm • Th i gian qu n lý • Liên k t các trang Web, qu ng cáo • Ph l c, ngu n thông tin, các trang giúp FAQ • Thi t k trang Web cho m ng Interanet Ph m Th B o , HKHTN Tp.HCM Th i gian qu n lý • Website c n c c p nh t thông tin c gi luôn... 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 14 1/29/2010 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 thay • S d ng nhãn (tag) ALT trong HTML • th Ph m Th B o HKHTN Tp.HCM Thi t k giao di n Website • • • •... vi c thi t k website h tr • FAQ gi m thi u nhân s và chi phí cho vi c h tr , t v n khách hàng Ph m Th B o HKHTN Tp.HCM 27 1/29/2010 Thi t k trang web cho m ng Intranet • M t s site thi t k riêng cho các t d ng m ng LAN • M c tiêu : nâng cao th i gian truy d t vào sâu trong c u trúc website thông tin ph i h p d n, có giá tr • ng ý t i b ng thông và t c tr ng n n i dung có giá tr và s cho website Ph m... N u website ph c t p thêm m t trang “What new ?” Ph m Th B o HKHTN Tp.HCM 26 1/29/2010 Liên k t trang web, qu ng cáo • T o liên k t n các trang thông tin ( i tác, khách hàng…) t ng uy tín • Khi ã n nh chuy n i hình th c kinh doanh, thu phí: – Thuê t logo, qu ng cáo – Thu phí thành viên – … Ph m Th B o HKHTN Tp.HCM Ph l c, ngu n thông tin, các trang giúp , FAQ • Thông tin báo cáo th ng cô ng trên web. .. 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 20 1/29/2010 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 thu t n i ti p theo th i gian • Các thông tin tra c u tham kh o: t báck khoa, t i n thu t ng • Thích h p cho h th ng website nh Ph m Th B o ng i n HKHTN Tp.HCM 21 1/29/2010... – Ki m tra t c – Ki m tra các liên k t – Th các l i b o m t –… Ph m Th B o HKHTN Tp.HCM 28 1/29/2010 Bài th c hành 2: THI T K WEBSITE 1 Xác nh m c ích, yêu c u 2 Thi t k t ch c i Thi t k s t ch c các trang web c a t ng các nhân (t ng ng i làm) ii Thi t k s t ch c các trang web c a nhóm 3 Thi t k giao di n Ph m Th B o HKHTN Tp.HCM 29 ... trong t t c các trang Ph m Th B o HKHTN Tp.HCM 13 1/29/2010 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 Ph n h i và HKHTN Tp.HCM i tho i • Chu n b tr c cho vi c tr l i,...1/29/2010 M ts v n liên quan thi t k giao di n c b n • • • • • • • • n vi c 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... 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 15 1/29/2010 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 Xác nh kích th HKHTN Tp.HCM . BҦO ptbao@hcmus.edu.vn 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ө •. 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 •. 1/29/2010 1 TӘNG QUAN VӄTHIӂTKӂ WEB PHҤM THӂ BҦO ptbao@hcmus.edu.vn 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Ӄ •