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.
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 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,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 tồ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à 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 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 PhmThBoHKHTNTp.HCM 15 1/29/2010 Xỏcnhkiuch,musc ã Fontchặphthucvo – һ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ҩttrongtồ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 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Ӄ Bngthụngngtruyn . ặChiphớ PhmThBoHKHTNTp.HCM 17 1/29/2010 Cton,túmlcthụ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 hp. ã 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 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 1/29/2010 LiênkӃttrangweb,quҧngcáo • Toliờnktncỏctrangthụngtin(itỏc, khỏchhng)ặtnguytớn ã Khiónnhặchuynihỡnhthckinh doanh,thuphớ: Thuờtlogo,qungcỏo Thuphớthnhviờ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ỏcphlc ã FAQ (Frequently Asked Questions) lý tng chovicthitkwebsitehtr ã FAQ ặ gim thiu nhõn s và chi phí cho viӋchӛtrӧ,tѭvҩnkháchhàng PhҥmThӃBҧoͲHKHTNTp.HCM 27 1/29/2010 ThiӃtkӃtrangwebchomҥng Intranet • MӝtsӕsitethiӃtkӃriêngchocáctәchӭc,sӱ dөngmҥngLAN • Mөc tiêu : nâng cao thӡi gian truy cұ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 1/29/2010 Bàithӵchành2: THIӂTKӂWEBSITE XácĜӏnhmөcĜích,yêucҫu 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. ThiӃtkӃgiaodiӋn PhҥmThӃBҧoͲHKHTNTp.HCM 29 ... iӇmkhácbiӋtgiӳatàiliӋuthơngthѭӡngvà trang WEB • 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...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,yêucҫucѫbҧn... 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