THIEÁT KEÁ WEB Lưu hành n i b 2010 Tài li u tham kh o Môn Thi t k Web M CL C CHƯƠNG KHÁI QUÁT CHUNG V INTERNET CHƯƠNG CÁC BƯ C THI T K WEB 2.1 M C TIÊU C A WEBSITE C N THI T K 2.2 CHI N LƯ C THI T K 2.3 THI T K GIAO DI N BÀI TH C HÀNH CHƯƠNG 17 CHƯƠNG HTML CĂN B N 18 3.1 CÁC TH NH D NG C U TRÚC D LI U 19 3.1.1 HTML 19 3.1.2 HEAD 19 3.1.3 TITLE 19 3.1.4 BODY 19 3.2 CÁC TH NH D NG KH I 20 3.2.1 TH P 20 3.2.2 CÁC TH NH D NG M C H1/H2/H3/H4/H5/H6 20 3.2.3 TH XU NG DÒNG BR 21 3.2.4 TH PRE 21 3.3 CÁC TH NH D NG DANH SÁCH 21 3.3.1 DANH SÁCH THÔNG THƯ NG 21 3.4 CÁC TH NH D NG KÝ T 3.4.1 CÁC TH 22 NH D NG IN KÝ T 22 3.4.2 CĂN L VĂN B N TRONG TRANG WEB 23 3.4.3 CÁC KÝ T 3.4.4 S C BI T 24 D NG MÀU S C TRONG THI T K CÁC TRANG WEB 24 3.4.5 CH N KI U CH CHO VĂN B N 26 3.4.6 KHÁI NI M VĂN B N SIÊU LIÊN K T 26 3.4.7 A CH TƯƠNG I 27 3.4.8 K T N I MAILTO 28 3.4.9 V M T Ư NG TH NG N M NGANG 28 3.5 CÁC TH CHÈN ÂM THANH, HÌNH NH 29 3.5.1 GI I THI U 29 3.5.2 ƯA ÂM THANH VÀO M T TÀI LI U HTML 30 3.5.3 CHÈN M T HÌNH NH, M T O N VIDEO VÀO TÀI LI U HTML 30 3.6 CÁC TH NH D NG B NG BI U 31 BÀI TH C HÀNH CHƯƠNG 33 CHƯƠNG CSS (Cascading Style Sheets) 46 4.1 KHÁI NI M CSS 47 4.1.1 CSS gì? 47 4.1.2 T i CSS? 47 4.1.3 H c CSS c n nh ng gì? 47 Trang Tài li u tham kh o Môn Thi t k Web 4.1.4 Cú pháp CSS 48 4.1.5 ơn v CSS 49 4.1.6 V trí t CSS 50 4.1.7 S ưu tiên: 52 4.2 M T S C TÍNH CƠ B N V CSS 54 4.2.1 Thu c tính Border CSS 54 4.2.2 Thu c tính Font CSS 56 4.2.3 Thu c tính List CSS 58 4.2.4 Thu c tính Text CSS 59 4.2.5 Thu c tính Padding CSS 60 4.2.6 Thu c tính Background CSS 60 4.2.7 Thu c tính Margin CSS 61 BÀI TH C HÀNH CHƯƠNG 62 CHƯƠNG THI T K WEB DÙNG FORM VÀ JAVASCRIPT 69 5.1 HTML FORM 70 5.1.1 T O FORM 70 5.1.2 T O M T DANH SÁCH L A CH N 70 5.1.3 T O H P SO N TH O VĂN B N 71 5.2 CĂN B N V NGÔN NG JAVASCRIPT 71 5.2.1 T ng quan Java Script 71 5.2.2 S ki n html java script 73 BÀI TH C HÀNH CHƯƠNG 75 CHƯƠNG THI T K WEB S 6.1 D NG DREAMWEAVER 95 NH D NG WEBPAGE 96 6.2 TABLE 97 6.3 FORM 97 6.4 LAYER 102 6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU 104 6.6 B SUNG MULTIMEDIA CHO TRANG WEB (ÂM THANH, PHIM NH) 107 6.7 FRAMESET 109 6.8 CASCADE STYLE SHEET- TEMPLATE 111 BÀI TH C HÀNH CHƯƠNG 114 CHƯƠNG 7.1 ĂNG KÝ VÀ QU N LÝ WEBSITE 126 ĂNG KÝ HOST 127 7.2 THI T K M T S WEBSITE M U 128 Trang Tài li u tham kh o Môn Thi t k Web CHƯƠNG CHƯƠNG ƯƠ KHÁI QT CHUNG V INTERNET Tóm t t M c tiêu Các m c K t thúc h c - Khái ni m m ng Internet cung c p h c viên ki n - Các d ch v th c v m ng Internet … b n : www, ftp, email,… Trang Bài t p b t bu c Bài t p làm thêm Tài li u tham kh o Môn Thi t k Web M ng m t nhóm máy tính k t n i v i Internet m ng c a m ng Giao th c TCP/IP (Transmission Control Protocol/Internet Protocol) cung c p vi c k t n i t t c máy tính th gi i Hình 1.1: Internet World Wide Web m t t p c a Internet Nó b t u án nghiên c u c p qu c gia t i phòng nghiên c u CERN Th y Sĩ Ngày nay, cung c p thơng tin cho ngư i dùng toàn th gi i WWW ho t là: ng d a ch ưa tài nguyên có giá tr n v i ngư i dùng ó o Giao th c: Ngư i dùng tuân theo giao th c truy c p tài nguyên Web HyperText Transfer Protocol(HTTP) giao th c c WWW s d ng o a ch : WWW tuân theo m t cách th c t tên th ng nh t truy c p vào tài nguyên Web URL c s d ng nh n d ng trang tài nguyên Web o HTML: Ngôn ng ánh d u siêu văn b n (HTML) c s d ng t o tài li u có th truy c p Web Tài li u HTML c t o b ng cách s d ng th ph n t c a HTML File c lưu Web server v i uôi htm ho c html Khi b n s d ng trình t u c u m t s thơng tin ó, Web server s áp ng yêu c u ó Nó g i thơng tin c u c u n trình t dư i d ng trang web Trình t nh d ng thơng tin máy ch g i v hi n thi chúng Trang Tài li u tham kh o Môn Thi t k Web Hình 1.2: Trình t yêu c u n máy ch Hình 1.3: M t s trình t ph d ng Trang Tài li u tham kh o Mơn Thi t k Web CHƯƠNG CHƯƠNG CÁC BƯ C THI T K WEB Tóm t t M c tiêu Các m c Bài t p b t bu c Bài t p làm thêm K t thúc h c 2.1 M c tiêu c a website D a vào t p D a vào t p cung c p h c viên ki n c n thi t k th c v Chương bư c 2.2 Chi n lư c thi t k thi t k m t Website … 2.3 Thi t k giao di n Trang ph n cu i ph n Chương cu i Tài li u tham kh o Môn Thi t k Web 2.1 M C TIÊU C A WEBSITE C N THI T K Phác th o m c tiêu, ý tư ng s giúp b n s không ch h c c làm th t o m t website mà t o s thành cơng v m t tài cung c p n i dung giá tr i m i t i khách hàng c a b n Bư c 1: N i dung trang web c a b n gì? B n có th nghĩ v câu h i nhi u t i m c b n có th có c câu tr l i r t rõ ràng Nhưng ch c c m nh n v trang web ph i phù h p v i n i dung B c c ch c c a trang web d th c hi n b n hi u tư ng t ng v n i dung trang web c a Bư c 2: Hãy tr ng vào b c c tính thi t th c c a trang web Hãy ưu tiên toán cho b t kỳ nh ng gói hosting (lưu tr website) ho c chi n d ch qu ng cáo, có m t nhìn t ng th v n i dung trang web s c th hi n th i u s ý tư ng trang web c a b n? Nó s c th o lu n th nào? B n có th ch n b sung cho ch c a qua nh ng báo, blog, ho t nh, hình nh ho c s k t h p c a t t c nh ng này.Nó có ph i nh d ng phù h p mà b n mu n s d ng cho n i dung trang web khơng? B n có th t o m t website th s thu hút c c gi theo mong i c a mình? Bư c 3: Hãy tìm m t d ch v hosting có th cung c p t t c tính mà b n c n T nh ng i u ã nói trên, b n nên có m t danh sách y ch c b n c n như: m u thư i n t , kh o sát bình ch n, thư vi n nh, thơng tin ph i ăng nh p, blog c nh ng tính khác Hãy nghiên c u k gói hosting tìm l y m t gói chào hàng cho m i th b n c n N u b n không ch c ch n làm th t o m t website tìm ki m m t máy ch có h th ng h tr v ng ch c, ho c nh h tr k thu t th c ho c di n àn tích c c Bư c 4: ng b t c truy c p vào trang web c a b n chưa th c s s n sàng M i ngư i ghét i u hư ng truy c p t i m t trang xu t hi n banner “ ang tri n khai” Thông thư ng, m t trang ang tri n khai khơng bao gi hồn t t g n b b quên B i h u h t m i ngư i khơng tr l i nhìn trang “ ang tri n khai” ó n a dù ã c hồn t t Bư c 5: Hãy m b o trang web c a b n c truy c p nhi u th c s s n sàng B n không ch c n nghĩ xem làm th thi t k website t t nh t, mà làm th ti p th c m t website t i c gi theo mong i c a Hãy ho ch nh làm th b n s s d ng nh ng h i ti p th mi n phí ch ng h n di n àn, liên k t tương h có c blogger n v i trang web c a b n Hãy t o thêm m t k ho ch n a cho chương trình qu ng cáo c tốn mà chúng s giúp trì ngân sách cho b n Trang Tài li u tham kh o Môn Thi t k Web 2.2 CHI N LƯ C THI T K B t c i u b n ang c g ng ti n hành thi t k website, cho dù n u qu ng cáo cho công ty hay bán s n ph m m c tiêu v n giành c lưu lư ng truy c p Khi thi t k m t trang web m i cho cơng ty, dù website ó l n hay nh i u quan tr ng n m i ngư i tr l i v i trang web c a b n Quan i m c a m i ngư i v m t website hi u qu có s khác M t s ngư i có th quan tr ng v giao di n web nh ng ngư i khác l i quan tâm n s ti n ích nhi u N u b n có th áp ng c nh ng tiêu chí sau trang web c a b n th t ã có s vư t tr i r ng website Giao di n website Không mu n nhìn m t website có giao di n thu hút n u s c s n khách truy c p r i b Vi c tìm th y m t s hài hoà t t gi a chúng chìa khố có b n thi t k website hi u qu Màu s c có th c s d ng th hi n c m xúc tình c m c a ngư i có th khuy n khích h mua hàng Các nhà thi t k web chuyên nghi p ã s d ng tâm lý màu nh m truy n t i nh ng l i thông i p khác t i ngư i dùng M t b n thi t k ng nên ph c t p hay khó hi u nên phù h p v i lo i hình kinh doanh s n ph m ho c d ch v mà b n m i chào M c ích trang web Trư c phát tri n m t trang web b n c n ph i t m c tiêu t h i b n thân r ng b n mu n m i ngư i có c l i ích th t trang web c a b n N i dung c a website nên c c p nh t R t d nh n th y website chưa c c p nh t i u có ph n ánh khơng hay v cơng ty b i trang ch b n tóm t t chung n i dung website B n c n có m t n i dung website ph n ánh c m c tiêu nh ng b n ang c g ng làm Tính ti n ích Internet cung c p vơ vàn thơng tin nên khó giành c s ý c a m i ngư i gi h trang web c a b n M t nh ng i u n ngư i truy c p hay r i b nh t ti n ích nghèo nàn M t trang web c n c ơn gi n d s d ng i u hư ng nên d dàng truy c p t i c m i trang website Khách truy c p s không bao gi ph i kích chu t nhi u l n vào m t trang c th M t quy t c chung c a h u h t chuyên gia thi t k web không nên khách truy c p nh p chu t l n truy c p t i b t kỳ trang website C u trúc i u hư ng ph c t p s nhanh chóng làm m t khách truy c p h s r i b n u h khơng th tìm th y nh ng i u mà h ang tìm ki m B n nh n m t i u n a nhà cung c p d ch v c a b n 2.3 THI T K GIAO DI N Trang Tài li u tham kh o Môn Thi t k Web B n ã g p r t nhi u trang web p gi ây b n mu n thi t k m t trang web riêng cho B n có chút u v th m m bi t ôi chút v vi c thi t k web, b n chưa bao gi t ng t thi t k m t trang web hồn ch nh i tìm c m h ng hình thành ý tư ng (ph n 1) B n ã g p r t nhi u trang web p gi ây b n mu n thi t k m t trang web riêng cho B n có chút u v th m m bi t ôi chút v vi c thi t k web, b n chưa bao gi t ng t thi t k m t trang web hoàn ch nh ã m y l n b n ng i trư c máy tính, quy t nh s làm cho m t trang web - r i c m y ti ng sau v n chưa làm c gì? B n th t s ch ng bi t ph i b t u t âu c … Trong m i vi c, bư c u tiên bao gi bư c khó nh t i u ó úng v i n u b n chưa có kinh nghi m khơng bi t nhi u v nh ng vi c mà s làm Trong vi t s giúp b n tr l i m t m t câu h i r t hay thư ng g p nh ng ngư i m i b t u làm thi t k web làm th l y c m h ng ý tư ng c a nh ng trang web thi t k p mà b n thích t o thi t k riêng cho mà khơng rơi vào tình hu ng chép thi t k c a h ? Tuy nhiên, ph i nói trư c, n u b n hi v ng c xong vi t s giúp b n thi t k c m t trang web hồn ch nh tơi e r ng s làm b n th t v ng Trong vi t, s gi nh r ng b n ã có ki n th c v vi t mã cho web ã s d ng tương i thành th o m t ph n m m h a ó i u b n c n ch m t hư ng i b t u - t hi v ng t nh ng kinh nghi m c a s giúp cho b n có c m t hư ng i úng V y bư c u tiên s gì? Bư c u tiên khó nghĩ ra, thư ng l i bư c d nh t ch ng m y ng c nhiên m t b n ã bi t v nó: Bư c 1: Tìm ngu n c m h ng Quá trình thu t ng c a dân thi t k g i “get inspired” Vi c có c c m h ng m t i u r t quan tr ng nh ng ngành ngh thu t liên quan n trình sáng t o Trong âm nh c, ngu n c m h ng có th t m t c m xúc ch t n m t bu i chi u; Trong thơ, có th b t ngu n t m t c nh quang thiên nhiên Còn thi t k , ngu n c m h ng n t … nh ng thi t k khác Chính v y, khơng gi ng thơ nh c vi c tìm c ngu n c m h ng thư ng n m t cách ng u nhiên có ph n may m n, thi t k , b n có th t i tìm ngu n c m h ng Hãy vào trang sưu t m gi i thi u thi t k p CSSBeauty, CSS Vault, Design Shake b n s th y có r t nhi u thi t k r t p t kh p nơi th gi i M t vài i u ý: • • Hãy ch p lưu l i hình c a trang web mà b n thích vào m t thư m c máy tính Các trang gallery thư ng hình nh thu nh thư ng khơng có m y tác d ng vi c giúp b n th y c p c a thi t k Vi c lưu l i hình nh phân gi i th c không nh ng s em l i cho b n s chi ti t mà giúp b n xem l i nh ng thi t k d dàng v sau mà khơng c n ph i m trình t bư c này, b n không c n ph i nghĩ v thi t k “tương lai” c a mà c vi c d o quanh m t vòng thư ng th c nh ng thi t k c a ngư i khác Tuy nhiên, b n c n xác nh rõ trang web mà s thi t k thu c phân m c Có r t nhi u Trang 10 Tài li u tham kh o Môn Thi t k Web Làm vi c v i b ng (table) T o m i b ng: Vào menu Insert -> Table Hình nh Dreamweaver Chèn hình nh: vào menu Insert ->Image Trang 117 Tài li u tham kh o Môn Thi t k Web Chú thích: 01: cao, r ng c a hình(V,H) 02: ng d n c a hình 03: ghi hình 04: ph c h i kích c hình 05: ch canh hình 06: ng vi n c a hình 07: ch canh ch so v i hình 08: s d ng hình nh làm b ng link 09: kho ng cách b cao so v i ch 10: kho ng cách b ngang so v i ch 11: dùng hình làm liên k t Thu c tính c a trang ( thu c tính c a th body) Trang 118 Tài li u tham kh o Môn Thi t k Web Dùng Dreamweaver thi t k website sau Bài 1: Bài 2: Trang 119 Tài li u tham kh o Môn Thi t k Web Bài 3: Bài 4: a) T o t p tin HTML hình 4.1 hình 4.2 sau Hình 4.1 Hình 4.2 b) T o i m hotspot t p tin hình world.gif t i v trí xung quanh khu v c nư c n t p tin World.htm Liên k t hotspot n t p tin India.htm ch a b n chi ti t nư c n Hư ng d n Trang 120 Tài li u tham kh o Môn Thi t k Web A) World.htm: Ch n Insert | Image ho c nh n nút Insert Image Objects Panel H p tho i sau xu t hi n Ch n hình “world.gif” nh n Select Hình c chèn vào tài li u lưu file, ta nh n File | Save gõ “World.htm” m c file name L p l i bư c t o t p tin “India.htm” chèn hình “India.gif” vào B) Ch n hình World.gif Trong Property Inspector, b n s nhìn th y m c Map Trong m c Map, c t tên cho Hotspot Ch n công c ‘Polygon Hotspot Tool’ v m t hotspot India hình sau Khi cho hotspot m t nh, Property Inspector thay Trang 121 i hình Tài li u tham kh o Môn Thi t k Web Cho hotspot liên k t n t p tin India.htm ho c click vào bi u tư ng folder ch n v trí ch a t p tin sau ó gõ INDIA vào h p Alt dùng thích b n di chuy n khu v c b n nư c n s hi n ch INDIA Bài 5: Bài 6: Trang 122 Tài li u tham kh o Môn Thi t k Web Bài 7: Bài 8: Trang 123 Tài li u tham kh o Môn Thi t k Web Bài 9: Trang Gioithieu.htm Trang 124 Tài li u tham kh o Môn Thi t k Web Trang LienHe.htm Bài 10: Trang 125 Tài li u tham kh o Môn Thi t k Web CHƯƠNG CHƯƠNG ĂNG KÝ VÀ QU N LÝ WEBSITE Tóm t t M c tiêu Các m c Bài t p b t bu c Bài t p làm thêm K t thúc h c 7.1 ăng ký Host D a vào t p D a vào t p cung c p h c viên bi t 7.2 Thi t k Website m u ph n cu i ph n cu i cách ăng ký host ưa Chương Website lên m ng Internet… Trang 126 Chương Tài li u tham kh o 7.1 Môn Thi t k Web ĂNG KÝ HOST Vào a ch http://www.freeservers.com ăng kí website mi n phí v i a ch truy c p có d ng http://.freeservers.com Gõ vào a ch mà b n d nh ăng kí t i yourname Sau ó click Go Màn hình ti p theo s hi n ra, b n ch n m c cu i 100% Free Hosting Option click vào SignUp Sau ó b n i n vào thông tin liên quan c n thi t H tên, m t kh u, email, … Cu i gõ vào ARTK ch c r ng b n ã ng ý v i qui nh c a FreeServers cung c p d ch v mi n phí Trang 127 Tài li u tham kh o Môn Thi t k Web N u ăng kí thành cơng, hình sau s hi n xây d ng website c a 7.2 THI T K M T S cung c p cho b n m t s l a ch n WEBSITE M U Thi t k website theo m u sau (http://greetings.yahoo.com) Trang 128 Tài li u tham kh o Môn Thi t k Web Thi t k website theo m u sau (http://www.flowers.com) Thi t k website theo m u sau (http://shopping.yahoo.com) Trang 129 Tài li u tham kh o Môn Thi t k Web Thi t k website theo m u sau (http://www.is-edu.hcmuns.edu.vn) Trang 130 Tài li u tham kh o Thi t k V im - Môn Thi t k Web website theo m u sau (http://www.bttvn.com ) i trang web ã xem ý v n sau: Cách b trí b ng (table) Cách s d ng font ch Cách chèn vào hình nh trang trí Cách nh nghĩa thu c tính màu ch , màu n n, Ph n tĩnh (không thay i) m i click vào hyperlink chuy n qua m t n i dung m i T trang web trên, t thi t k trang cho website c a Trang 131 ... thư m c D:\HTML-DHTML-JS-Examples Ch y Internet Explorer Kích vào File → Open, ch n Browse ch n file t thư m c D:\HTML-DHTML-JS-Examples Trang 33 Tài li u tham kh o Môn Thi t k Web BÀI T P 1/ T... c a website nên c c p nh t R t d nh n th y website chưa c c p nh t i u có ph n ánh khơng hay v cơng ty b i trang ch b n tóm t t chung n i dung website B n c n có m t n i dung website ph n ánh... tiêu Các m c K t thúc h c - Khái ni m m ng Internet cung c p h c viên ki n - Các d ch v th c v m ng Internet … b n : www, ftp, email,… Trang Bài t p b t bu c Bài t p làm thêm Tài li u tham kh