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

Thiết kế về trang Web

Chia sẻ: Lehuu Loi | Ngày: | Loại File: PDF | Số trang:131

Thêm vào BST
Báo xấu
154
lượt xem 91
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

MẠng là một nhóm các máy tính kết nối với nhau. Internet là mạng của các mạng. Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất cả các máy tính trên thê giới. World Wide Web là một tập con của Internet. Nó bắt đầu như là đề án nghiên cứu cấp quốc gia tahi phòng nghiên cứu CERN ở Thụy Sĩ.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Thiết kế về trang Web

  1. THIEÁT KEÁ WEB THIEÁ Lưu hành n i b 2010
  2. Tài li u tham kh o Môn Thi t k Web M CL C CHƯƠNG 1. KHÁI QUÁT CHUNG V INTERNET................................................................................ 4 CHƯƠNG 2. CÁC BƯ C THI T K WEB ............................................................................................ 7 2.1 M C TIÊU C A W EBSITE C N THI T K ................................................................................. 8 2.2 CHI N LƯ C THI T K .............................................................................................................. 9 2.3 THI T K GIAO DI N .................................................................................................................. 9 BÀI TH C HÀNH CHƯƠNG 2 ............................................................................................................. 17 CHƯƠNG 3. 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 ................................................................................................... 22 3.4.1 CÁC TH 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 C BI T........................................................................................................ 24 3.4.4 S 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 3 ............................................................................................................. 33 CHƯƠNG 4. CSS (Cascading Style Sheets) ..................................................................................... 46 4.1 KHÁI NI M CSS ......................................................................................................................... 47 4.1.1 CSS là gì?............................................................................................................................ 47 4.1.2 T i sao CSS?....................................................................................................................... 47 4.1.3 H c CSS c n nh ng gì?...................................................................................................... 47 Trang 2
  3. 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 trong CSS .............................................................................................. 54 4.2.2 Thu c tính Font trong CSS .................................................................................................. 56 4.2.3 Thu c tính List trong CSS.................................................................................................... 58 4.2.4 Thu c tính Text trong CSS .................................................................................................. 59 4.2.5 Thu c tính Padding trong CSS ............................................................................................ 60 4.2.6 Thu c tính Background trong CSS ...................................................................................... 60 4.2.7 Thu c tính Margin trong CSS .............................................................................................. 61 BÀI TH C HÀNH CHƯƠNG 4 ............................................................................................................. 62 CHƯƠNG 5. 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 trong html và java script ......................................................................................... 73 BÀI TH C HÀNH CHƯƠNG 5 ............................................................................................................. 75 D NG DREAMWEAVER ............................................................... 95 CHƯƠNG 6. THI T K WEB S 6.1 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 6 ........................................................................................................... 114 ĂNG KÝ VÀ QU N LÝ WEBSITE ............................................................................. 126 CHƯƠNG 7. 7.1 ĂNG KÝ HOST ....................................................................................................................... 127 7.2 THI T K M T S W EBSITE M U ........................................................................................ 128 Trang 3
  4. Tài li u tham kh o Môn Thi t k Web CHÖÔNG CHÖÔNG 1 CHÖÔ KHÁI QUÁT CHUNG V INTERNET Tóm t t Bài t p Bài t p M c tiêu Các m c chính b t bu c làm thêm K t thúc bài h c này - Khái ni m m ng Internet cung c p h c viên ki n - Các d ch v cơ b n : www, ftp, th c v m ng Internet … email,… Trang 4
  5. Tài li u tham kh o Môn Thi t k Web M ng là m t nhóm các máy tính k t n i v i nhau. Internet là m ng c a các m ng. Giao th c TCP/IP (Transmission Control Protocol/Internet Protocol) cung c p vi c k t n i t t c các máy tính trên th gi i. Hình 1.1: Internet World Wide Web là m t t p con c a Internet. Nó b t u như là á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, nó cung c p thông tin cho ngư i dùng trên toàn th gi i. WWW ho t ng d a trên 3 cơ ch ưa các tài nguyên có giá tr n v i ngư i dùng. ó là: o Giao th c: Ngư i dùng tuân theo các giao th c này truy c p tài nguyên trên Web. HyperText Transfer Protocol(HTTP) là giao th c ư c WWW s d ng. a ch : WWW tuân theo m t cách th c t tên th ng nh t truy c p vào các tài o nguyên trên Web. URL ư c s d ng nh n d ng các trang và các tài nguyên trên Web. o HTML: Ngôn ng ánh d u siêu văn b n (HTML) ư c s d ng t o các tài li u có th truy c p trên Web. Tài li u HTML ư c t o ra b ng cách s d ng các th và các ph n t c a HTML. File ư c lưu trên Web server v i uôi .htm ho c .html. Khi b n s d ng trình duy t yêu c u m t s thông tin nào ó, Web server s áp ng các yêu c u ó. Nó g i thông tin ư c yêu c u n trình duy t dư i d ng các trang web. Trình duy t nh d ng thông tin do máy ch g i v và hi n thi chúng. Trang 5
  6. Tài li u tham kh o Môn Thi t k Web Hình 1.2: Trình duy t yêu c u n máy ch Hình 1.3: M t s trình duy t ph d ng Trang 6
  7. Tài li u tham kh o Môn Thi t k Web CHÖÔNG CHÖÔNG 2 CHÖÔ CÁC BƯ C THI T K WEB Tóm t t Bài t p Bài t p M c tiêu Các m c chính b t bu c làm thêm K t thúc bài h c này 2.1 M c tiêu c a website D a vào bài t p D a vào bài t p cung c p h c viên ki n c n thi t k trong ph n cu i trong ph n cu i th c v các bư c khi 2.2 Chi n lư c thi t k Chương 2. Chương 2. thi t k m t Website … 2.3 Thi t k giao di n Trang 7
  8. 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 nào tomt website mà còn t o ra s thành công v m t tài chính trong khi cung c p n i dung giá tr và i m i t i các khách hàng c a b n. Bư c 1: N i dung trang web c a b n là gì? B n có th nghĩ v câu h i này quá 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 năng và c m nh n v trang web ph i phù h p v i n i dung. B c c và ch c năng c a trang web d th c hi n hơn khi b n hi u tư ng t ng v n i dung trang web c a mình. Bư c 2: Hãy chú tr ng vào b c c và tính thi t th c c a trang web Hãy ưu tiên thanh toán cho b t kỳ nh ng gói hosting (lưu tr website) ho c các chi n d ch qu ng cáo, cũng như có m t cái nhìn t ng th v n i dung trang web s là gì và ư c th hi n như th nào. i u gì s là ý tư ng chính trên trang web c a b n? Nó s ư c th o lu n như th nào? B n có th ch n b sung cho ch c a mình qua nh ng bài báo, các blog, ho t nh, hình nh ho c là s k t h p c a t t c nh ng cái này.Nó có ph i là 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 như th nào 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 năng 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 các ch c năng b n c n như: m u thư i n t , kh o sát và bình ch n, thư vi n nh, thông tin ph i ăng nh p, các blog và c nh ng tính năng khác. Hãy nghiên c u k các gói hosting và 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 nào t o m t website thì hãy 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 chính th c ho c các di n àn tích c c. Bư c 4: ng b t c ai truy c p vào trang web c a b n khi 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 thì không bao gi hoàn t t và nó g n như b b quên. B i h u h t m i ngư i không tr l i nhìn khi các trang “ ang tri n khai” ó n a dù nó ã ư c hoàn t t. Bư c 5: Hãy m b o trang web c a b n ư c truy c p nhi u khi nó th c s s n sàng. B n không ch c n nghĩ xem làm th nào thi t k website t t nh t, mà còn làm th nào ti p th ư c m t website t i c gi theo mong i c a mình. Hãy ho ch nh làm th nào b n s s d ng nh ng cơ h i ti p th mi n phí ch ng h n như các di n àn, các liên k t tương h cũng như có ư c 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 các chương trình qu ng cáo ư c thanh toán mà chính chúng s giúp duy trì ngân sách cho b n. Trang 8
  9. 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 gì b n ang c g ng ti n hành thi t k website, cho dù n u là qu ng cáo cho công ty hay bán s n ph m thì m c tiêu chính v n là 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 thì i u quan tr ng là khi n m i ngư i luôn 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 nhau. M t s ngư i có th quan tr ng v giao di n web trong khi nh ng ngư i khác l i quan tâm n s ti n ích nhi u hơn. N u b n có th áp ng ư c nh ng tiêu chí sau thì trang web c a b n th t ã có s vư t tr i trong r ng website. Giao di n website Không ai mu n nhìn m t website có giao di n kém thu hút nhưng n u nó quá s c s thì cũng khi 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 là chìa khoá 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 con ngư i cũng như 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 nhau t i ngư i dùng. M t b n thi t k ng nên quá ph c t p hay khó hi u và cũng nên phù h p v i lo i hình kinh doanh cũng như s n ph m ho c d ch v mà b n m i chào. M c ích trang web Trư c khi phát tri n m t trang web b n c n ph i t ra các m c tiêu và hãy t h i b n thân r ng b n mu n m i ngư i có ư c l i ích như th nào t trang web c a b n. N i dung c a website nên luôn ư c c p nh t. R t d nh n th y khi website chưa ư c c p nh t. i u này có ph n ánh không hay v công ty b i vì trang ch như là b n tóm t t chung n i dung website. B n cũng c n có m t n i dung website ph n ánh ư c m c tiêu chính và nh ng gì 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 chú ý c a m i ngư i cũng như gi h trên trang web c a b n. M t trong nh ng i u khi n ngư i truy c p hay r i b nh t là ti n ích nghèo nàn. M t trang web c n ư c ơn gi n và d s d ng. i u hư ng nên d dàng truy c p t i ư c m i trang trên website. Khách truy c p s không bao gi ph i kích chu t nhi u hơn 4 l n vào m t trang c th . M t quy t c chung c a h u h t các chuyên gia thi t k web là không nên khách truy c p nh p chu t quá 2 l n khi truy c p t i b t kỳ trang nào trên 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 và 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 hãy nh n m t i u n a là các nhà cung c p d ch v c a b n. 2.3 THI T K GIAO DI N Trang 9
  10. Tài li u tham kh o Môn Thi t k Web B n ã g p r t nhi u trang web p và gi ây b n mu n thi t k m t trang web riêng cho mình. B n cũng có chút khi u v th m m và cũng bi t ôi chút v vi c thi t k web, nhưng b n chưa bao gi t ng t mình thi t k ra m t trang web hoàn ch nh i tìm c m h ng và hình thành ý tư ng (ph n 1) B n ã g p r t nhi u trang web p và gi ây b n mu n thi t k m t trang web riêng cho mình. B n cũng có chút khi u v th m m và cũng bi t ôi chút v vi c thi t k web, nhưng b n chưa bao gi t ng t mình thi t k ra 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ình 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 cũng là bư c khó nh t. i u ó càng úng v i n u b n chưa có kinh nghi m và không bi t gì nhi u v nh ng vi c mà mình s làm. Trong bài vi t này 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à làm th nào l y c m h ng và ý tư ng c a nh ng trang web thi t k p mà b n thích t o ra thi t k riêng cho mình mà không rơi vào tình hu ng sao 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 bài vi t này s giúp b n thi t k ư c m t trang web hoàn ch nh thì tôi e r ng s làm b n th t v ng. Trong bài vi t, tôi s gi nh r ng các b n ã có ki n th c v vi t mã cho web cũng như ã s d ng tương i thành th o m t ph n m m h a nào ó. i u b n c n ch là m t hư ng i b t u - và t hi v ng t nh ng kinh nghi m c a mình s giúp cho các b n có ư c m t hư ng i úng. V y bư c u tiên s là gì? Bư c u tiên tuy khó nghĩ ra, nhưng thư ng l i là bư c d nh t và ch ng m y ng c nhiên m t khi b n ã bi t v nó: Bư c 1: Tìm ngu n c m h ng Quá trình này trong thu t ng c a dân thi t k g i là “get inspired”. Vi c có ư c c m h ng là m t i u r t quan tr ng trong nh ng ngành ngh thu t liên quan n quá trình sáng t o. Trong âm nh c, ngu n c m h ng có th là t m t c m xúc ch t n trong m t bu i chi u; Trong thơ, nó có th b t ngu n t m t c nh quang thiên nhiên. Còn trong thi t k , ngu n c m h ng n t … nh ng thi t k khác. Chính vì v y, không gi ng như trong thơ và nh c vi c tìm ư c ngu n c m h ng thư ng n m t cách ng u nhiên và có ph n may m n, trong thi t k , b n có th t mình i tìm ngu n c m h ng. Hãy vào các trang sưu t m và gi i thi u các thi t k p như CSSBeauty, CSS Vault, Design Shake và b n s th y có r t nhi u thi t k r t p t kh p nơi trên th gi i. M t vài i u áng chú ý: Hãy ch p và lưu l i màn hình c a các trang web mà b n thích vào m t thư m c trên • máy tính. Các trang gallery thư ng hình nh thu nh và thư ng không có m y tác d ng trong vi c giúp b n th y ư c cái 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à còn giúp b n xem l i nh ng thi t k này d dàng hơn v sau mà không c n ph i m trình duy t ra. bư c này, b n không c n ph i nghĩ v thi t k “tương lai” c a mình mà hãy c vi c • d o quanh m t vòng và 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à mình s thi t k là thu c phân m c nào. Có r t nhi u Trang 10
  11. Tài li u tham kh o Môn Thi t k Web thi t k p, nhưng không ph i thi t k nào cũng phù h p v i m c ích c a b n. Ví d như phong cách thi t k c a m t trang web doanh nghi p s không phù h p v i m t trang blog cá nhân. Vi c xác nh rõ ngay t u s giúp b n b qua r t nhanh nh ng thi t k không phù h p (nh ng gallery trên thư ng có n hàng trăm thi t k , vi c ng i xem h t t ng cái là không th ). N u b n xác nh r ng mình ang thi t k giao di n cho blog, b n s d dàng b qua nh ng thi t k như bên ph i, trong khi dành nhi u chú ý hơn n nh ng thi t k cho phép nhi u không gian hi n th bài vi t như trong hình bên trái. ng ng i quá lâu xem cùng m t lúc. Hãy dành th i gian làm vi c khác, hôm • sau xem ti p. Lý do là thư ng thì m t khi xem quá lâu, càng v sau b n s càng c m th y m t m i và khi ó dư ng như m i thi t k u tr nên “nhàm nhàm” gi ng như nhau - m c dù n u b n xem nó ngay t lúc u thì b n l i th y nó p. Vì v y, s là lý tư ng n u m i ngày b n ch xem vài ba thi t k và ó là lý do t i sao b n nên có thói quen sưu t m thi t k p m i ngày - n lúc c n thì ã có s n nh ng thi t k mà b n thích. N u b n xác nh mình s i theo ngh thi t k web, ó là m t thói quen nên h c. V y khi nào thì b n nên d ng l i? Khi nào thì b n bi t r ng mình ã tìm ư c ngu n c m h ng? R t khó tr l i ư c câu h i này. S có nh ng lúc mà b n b t g p m t trang web quá p mà b n ch mu n d ng l i và b t tay ngay vào vi c thi t k m t trang web tương t . Nhưng tr khi b n mu n sao chép nguyên xi thi t k c a h (mà như v y thì ã ch ng g i là thi t k ), c m h ng t m t thi t k như v y s không giúp b n có th làm nên thi t k c a riêng mình - m c dù b n có th ch c ch n là thi t k ó s óng vai trò r t quan tr ng nh hư ng n thi t k c a b n. V y nên, l i khuyên c a tôi là hãy ch d ng l i khi: B n ã có ư c ít nh t 10 - 20 thi t k mà b n c m th y p và phù h p v i trang web • c a mình Trang 11
  12. Tài li u tham kh o Môn Thi t k Web Có ít nh t m t trang thi t k mà nó khi n b n ch mu n copy nguyên xi c a nó v (dù • r ng m c ích c a b n không ph i là như v y) Khi ó, b n có th b t u chuy n sang bư c th 2: Bư c 2: nh hình ý tư ng Sau khi ã ch n ư c kho ng 10-20 thi t k trong bư c 1 và bư c u có cái “c m h ng” quy t nh s thi t k cho riêng mình m t trang web, b n s c n ph i nh hình ý tư ng cho trang web c a mình. Hãy ng i duy t l i nh ng nh ch p trang web mà b n ã lưu vào máy trong bư c 1: Cách t t nh t trong quá trình này là dùng tính năng Slideshow c a ph n m m qu n lý • nh (ví d như Picasa) vì nó s ch hi n th m t nh trên toàn màn hình (giúp b n b phân tán) cũng như nó cho phép b n nhanh chóng chuy n qua nh ng hình khác. Xem giao di n toàn màn hình s d ng tính năng slideshow c a Picasa giúp b n tránh b phân tán. Ghi chú xu ng m t m nh gi y nh nh ng i m mà b n thích v m t thi t k mà b n • nghĩ r ng mình mu n có trong thi t k c a mình. i u r t quan tr ng là b n hãy ý n ý tư ng ch không ph i chi ti t c a thi t k . i u ó có nghĩa là b n nên ghi l i ý tư ng s d ng mây làm hình nh u trang và c cu i trang t o c m giác v không gian, nhưng b n không nên copy hình nh mà h s d ng. Nh ng gì b n c n ý: cách s d ng màu s c, hình th c b c c, cách s p x p n i dung, và th m chí cách cách mà h làm vi n cho hình nh,… Nh ng gì b n không nên ý: trang web ó s d ng hình nh c th gì, màu s c c th cho tiêu c a bài vi t,… Trang 12
  13. Tài li u tham kh o Môn Thi t k Web B n th y gì t m t trong nh ng thi t k ban u c a trang web All Women’s Talk? M t vài i m c n ghi l i: cách s d ng màu ơn và cách h ch n màu th hi n n i dung n tính c a trang web. B n cũng có th ghi l i cách mà h t ch c a bài vi t ngay trư c tiêu ca bài vi t và làm n i b t nó b ng cách tô màu n n cho nó. Cái cách mà h chia di n tích trang web thành 2 n a - m t li t kê nh ng bài vi t chính và bên kia hi n th danh sách các bài n i b t và danh sách phân m c. Nh ng gì b n không nên chép l i: hình nh bông hoa h s d ng trong h u như t t c các thành ph n trên trang web. Sau bư c này, b n s có m t ý tư ng tương i rõ ràng (ít ra là không mơ h không xác nh như trư c) v trang web c a mình. Trang web s có thi t k ơn gi n và s ch s hay là nó s s d ng nhi u hình nh h a? B n s s d ng nhi u màu s c t o c m giác tươi tr hay s ch n tông màu ơn l mà sang tr ng? Trang web s có b c c 3 c t hay 2 c t? B n thâm chí s xác nh ư c nh ng câu h i tương i chi ti t như li u mình s s d ng hình nh vector hay s s d ng nh ch p làm trang trí? ng quá lo l ng v vi c li u b n có ang copy thi t k c a ngư i khác hay không. Mi n là b n không có ý nh ó và b n có ít nh t 10 - 20 thi t k tham kh o thì tôi m b o khi b t u i vào thi t k b n s không g p ph i trư ng h p b n copy thi t k c a ngư i khác. B n s ng c nhiên khi sang bư c 4, khi mà b n b t u xây d ng m u cho thi t k c a mình, nh ng ý tư ng ban u mà b n ghi chép l i bư c này s t bi n i thành thi t k c a riêng b n. K t thúc (Ph n 1) T t nhiên, không ph i c là thi t k p thì nh t thi t nó s phù h p v i n i dung c a b n. Trong bài k ti p, t s th o lu n v vi c k t h p gi a n i dung và thi t k , cũng như m t vài kinh nghi m trong vi c b t u xây d ng m u (”prototype”) cho thi t k c a mình. Trang 13
  14. Tài li u tham kh o Môn Thi t k Web Xây d ng khung n i dung (Ph n 2) Nh c l i Trư c khi b t u, s không là th a nh c l i nh ng gì chúng ta ã có ư c t nh ng bư c trư c ó. C m h ng bư c 1 - sau khi xem nh ng thi t k c a ngư i khác, b n ã b t u có ư c cái “h ng” xây d ng m t trang web cho riêng mình. M t l n n a không th không nh c l i t m quan tr ng c a “c m h ng”. “C m h ng” không th t nhiên xu t hi n ch vì b n xác nh r ng mình c n có m t trang web riêng, m c dù ó chính là lý do khi n b n i tìm c m h ng. Không gi ng như trong các lĩnh v c ngh thu t khác b n v n không bi t ư c khi nào thì c m h ng s n v i mình, trong thi t k b n hoàn toàn có th th c hi n quá trình g i là “ i tìm c m h ng” mà tôi ã mô t trên. “C m h ng” là gì? ó là m t s thôi thúc mà m t khi c m nh n ư c nó, b n ch mu n b t tay vào làm ngay và ư c như ng có gì làm gián o n quá trình ó. M t khi b n ã có ư c cái g i là “c m h ng” ó thì m i th dư ng như u t nhiên xu t hi n - như nó ã có s n t trư c ó v y. B n hoàn toàn có th ánh m t cái c m h ng c a mình m t cách nhanh chóng - và i u này r t thư ng hay x y ra n u như b n b gián o n gi a bư c 1 và bư c 2 và th m chí ôi khi là gi a quá trình thi t k chi ti t. Tôi s nói thêm v i u này sau, nhưng i u quan tr ng b n nên nh là b n hoàn toàn có th tìm l i ư c nó v i m t chút th i gian t m xa nó r i quay l i bư c 1. Ý tư ng T nh ng trang web mà b n ã xem, bư c u b n ã ghi nh n nh ng i m mà mình mu n thi t k c a mình th hi n. M c dù b n có th không nh n ra, chính trong quá trình xem và ch n l c nh ng i m nh n mà b n thích t nh ng thi t k c a ngư i khác, b n ã t mình khám phá chính mình. T i sao b n thích và ghi l i cái cách ph i màu mà trang AllWomenTalks s d ng? Tôi có th t tin kh ng nh r ng b n là m t cô gái v i m t tâm h n lãng m n, n tính và th m chí… thích s u m . Bư c 3: Xây d ng khung n i dung Trang 14
  15. Tài li u tham kh o Môn Thi t k Web Th nào g i là xây d ng khung n i dung? ó là quá trình i tìm câu tr l i cho câu h i - n u nhìn t xa, b c c trang web c a b n s trông như th nào. Thu t ng trong thi t k thư ng g i quá trình này là “prototyping” - t c xây d ng mô hình m u. M t b c hình có th thay v n l i gi i thích - ây là cái g i là “khung n i dung”. M c ích c a vi c thi t k khung giao di n không ph i là t o ra giao di n - b n ơn gi n là t o m t mô hình “thô” c a giao di n. B n không c n quan tâm v màu s c. B n cũng không c n quan tâm v nh ng bi u tư ng c th ư c s d ng là gì. Nói tóm l i, b n không ph i quan tâm v nh ng chi ti t nh c a thi t k mà ch c n t p trung vào b c tranh t ng th c a trang web (tư ng tư ng n u b n ng cách xa màn hình 5 mét và nhìn trang web c a mình s như th nào - ch c ch n b n s không th y c th n i dung mà ch th y b c c c a nó). N u theo úng bài b n, vi c thi t k khung n i dung òi h i b n ph i tr i qua m t quá trình phân tích và tìm hi u r t chi ti t v n i dung và tương tác th c t v i ngư i dùng - như cái cách mà 37 Signals gi i thi u v quá trình h thi t k m t m u hi n th thông tin ơn gi n c a h th ng. Tuy nhiên, vi c áp d ng m t quá trình “khoa h c” như v y có l là không phù h p v i ph n l n nh ng trang web nh và ôi khi khi n ngư i thi t k m i b t u r t n n và có xu hư ng b qua khi không th y ư c hi u qu tr c ti p c a nó. V y nên tôi s tóm t t nó thành 2 bư c chính: Xác nh và phân lo i n i dung s xu t hi n. Ví d như n u ó là m t trang blog thì • thư ng s có nh ng i tư ng chính sau: Tiêu , danh sách các phân m c, c t n i dung bài vi t, các liên k t b n bè. Tuỳ theo m c ích c th , b n có th có thêm nh ng i tư ng n i dung khác - ví d như nh ng ph n h i g n ây nh t, c t ghi chép nhanh,… S p x p nh ng i tư ng n i dung này theo t ng kh i. • Trang 15
  16. Tài li u tham kh o Môn Thi t k Web M t trong nh ng quy t nh quan tr ng nh t mà b n s ph i l a ch n trong bư c này chính là v b c c trình bày thông tin - trang web s ư c chia làm 1 c t, 2 c t hay 3 c t (ph bi n v i các trang n i dung). Kinh nghi m c a tôi cho th y r ng dư ng như t t c các thi t k trang web n i dung u b t u t quy t nh l a ch n s c t trình bày n i dung và nó s nh hư ng r t nhi u n nh ng quy t nh c th sau ó. Thông thư ng thì thông tin này s ư c hình thành t 2 bư c trư c ó - nhưng n u b n ã có s n ý tư ng t trư c v b c c giao di n thì b n v n có th hoàn toàn th c hi n nó trư c. giúp các b n có thêm thông tin trư c khi l a ch n - c bi t là n u b n thi t k cho blog c a mình - b n có th th tr l i câu h i B n ã có s n nhi u n i dung chưa? N u b n ch m i b t u vi t mà ch n cho mình m t giao di n 3 c t s khi n trang web c a b n tr nên tr ng tr i. Trong tình hu ng ó, có l b n nên th tìm m t thi t k ơn gi n 2 c t trong th i gian tích lu n i dung - và n khi ã có tương i nhi u nh ng bài vi t thì b n có th chuy n sang giao di n 3 c t. Th c t là n u b n thi t k blog thì nên c c kỳ h n ch vi c s d ng giao di n 3 c t ngay c khi ã có nhi u n i dung. V i phân gi i c a màn hình Vi t Nam ph n l n ch gi i h n 1024 x 768, b n thư ng s ch có t i a là 950px b r ng cho 3 c t. Trong blog, c t n i dung chính thư ng s chi m ít nh t m t n a b r ng - t c b n s ch còn kho ng 400px cho 2 c t n i dung còn l i sau khi ã tr i các kho ng cách canh l d a các c t và v i 2 c nh c a c a s trình duy t. B n có th s nhét ư c tiêu các danh m c và vài liên k t ng n m t trong 2 c t ó, nhưng ch c ch n ph n còn l i s không ưa các n i dung l n. Trang 16
  17. Tài li u tham kh o Môn Thi t k Web Các trang ch báo chí (như VietnamNet) có th s d ng giao di n 3 c t b i h ch c n ưa tiêu ng n c a các b n tin trong m i c t - nhưng i u ó không áp d ng ư c v i nh ng trang blog. k t thúc, sau ây là m t vài kinh nghi m có th giúp b n trong quá trình này: Không dùng ph n m m v . giai o n này, b n c n có kh năng v và xoá th t • nhanh chuy n hoá và th nghi m nh ng ý tư ng n y sinh trong quá trình này. S d ng ph n m m dù ơn gi n và d s d ng n m y cũng s òi h i b n ph i th c hi n nhi u thao tác k thu t. B n có th s d ng bút chì, m t c c t y và vài t gi y - nhưng t t nh t theo tôi v n là • có m t t m b ng và vài cây bút lông màu khác nhau. Không ch vi c xoá và v l i trên b ng d hơn r t nhi u so v i trên gi y, tôi có c m giác r ng khi b n ang ng và v trên b ng, kh năng “sáng t o” c a b n s ư c tăng cư ng. Nh ng thành ph n duy nh t mà b n c n v có l s ch là nh ng hình ch nh t. B n • bi u di n danh sách phân m c b ng m t cái h p, c t n i dung b ng m t cái h p khác cao và to hơn,… Hãy nh ng b ng v c a b n xu t hi n trư c m t b n vài ngày. i u này d th c • hi n n u b n có m t t m b ng v - ch c n b n không xoá thì m i ngày dù ang làm vi c khác b n cũng s th y nó - và ôi khi trong nh ng lúc không t p trung như v y b n s có ư c nh ng ý tư ng ch nh s a áng giá. M c dù ch là b n v khung thô, nhìn t xa b n ph i c m th y ư c cái giao di n và • hài lòng v i nó. N u nhìn vào b c c mà b n c m th y còn hơi “khó ch u” thì ch ng t nó chưa t tiêu chu n v b c c. Nên nh , m c dù giao di n th c t , ngư i dùng s không ch th y n i dung như nh ng cái h p - nhưng trong ti m th c c a b não - n i dung s ư c th hi n như nh ng cái h p và nó óng m t ph n r t quan tr ng trong nh n th c c a ngư i dùng v giao di n h quy t nh có thích nó hay không. Nói chung là nh ng quy t nh mà b n l a ch n bư c này m c dù r t chung chung nhưng s có nh hư ng r t l n m t khi b n b t u chuy n sang quá trình thi t k chi ti t. Nh ng b n m i b t u làm quen v i vi c thi t k thư ng d dàng b qua bư c này b i th y nó không c n thi t, nhưng s th t là n u b n làm t t nó, nh ng quy t nh ư c ưa ra trong bư c này s giúp b n gi m r t nhi u th i gian s p x p và ch nh s a trong quá trình thi t k chi ti t. Còn n u b n ã có ý nh phát tri n theo hư ng thi t k giao di n ngư i dùng (web hay ng d ng ph n m m) thì có l ây là m t quá trình b t bu c dù b n có mu n hay không - hãy th c hành v i nh ng thi t k nh và ơn gi n tích lu kinh nghi m cho mình. BAØI THÖÏC HAØNH CHÖÔNG 2 BAØ 1. Hãy thi tk khung m u cho nh ng website trong án. 2. Hãy thi tk khung m u cho website thương m i. 3. Hãy thi tk khung m u cho website gi i trí. 4. Hãy thi tk khung m u cho blog. Trang 17
  18. Tài li u tham kh o Môn Thi t k Web CHÖÔNG CHÖÔNG 3 CHÖÔ HTML CĂN B N Tóm t t Bài t p Bài t p M c tiêu Các m c chính b t bu c làm thêm K t thúc bài h c này cung 3.1 Các th nh d ng c u trúc d li u D a vào bài D a vào bài c p h c viên ki n th c v 3.2 Các th nh d ng kh i tp trong t p trong các th HTML căn b n 3.3 Các th nh d ng danh sách ph n cu i ph n cu i trong vi c thi t k giao 3.4 Các th nh d ng ký t Chương 3. Chương 3. di n Web … 3.5 Các th chèn âm thanh, hình nh 3.6 Các th nh d ng b ng bi u M c tiêu Các m c chính Bài t p b t Bài t p làm bu c thêm Trang 18
  19. Tài li u tham kh o Môn Thi t k Web 3.1 CÁC TH NH D NG C U TRÚC D LI U 3.1.1 HTML C p th này ư c s d ng xác nh n m t tài li u là tài li u HTML, t c là nó có s d ng các th HTML trình bày. Toàn b n i dung c a tài li u ư c t gi a c p th này. Cú pháp: ... Toàn b n i c a tài li u ư c t ây Trình duy t s xem các tài li u không s d ng th như nh ng t p tin văn b n bình thư ng. 3.1.2 HEAD Th HEAD ư c dùng xác nh ph n m u cho tài li u. Cú pháp: ... Ph n m u (HEADER) c a tài li u ư c t ây 3.1.3 TITLE C p th này ch có th s d ng trong ph n m u c a tài li u, t c là nó ph i n m trong th ph m vi gi i h n b i c p th . Cú pháp: Tiêu c a tài li u 3.1.4 BODY Th này ư c s d ng xác nh ph n n i dung chính c a tài li u - ph n thân (body) c a tài li u. Trong ph n thân có th ch a các thông tin nh d ng nh t nh t nh n n cho tài li u, màu n n, màu văn b n siêu liên k t, t l cho trang tài li u... Nh ng thông tin này ư c t ph n tham s c a th . Cú pháp: .... ph n n i dung c a tài li u ư c t ây Trên ây là cú pháp cơ b n c a th BODY, tuy nhiên b t u t HTML 3.2 thì có nhi u thu c tính ư c s d ng trong th BODY. Sau ây là các thu c tính chính: Trang 19
  20. Tài li u tham kh o Môn Thi t k Web t m t nh nào ó làm nh n n (background) cho BACKGROUND= văn b n. Giá tr c a tham s này (ph n sau d u b ng) là URL c a file nh. N u kích thư c nh nh hơn c a s trình duy t thì toàn b màn hình c a s trình duy t s ư c lát kín b ng nhi u nh. t màu n n cho trang khi hi n th . N u c hai tham BGCOLOR= s BACKGROUND và BGCOLOR cùng có giá tr thì trình duy t s hi n th màu n n trư c, sau ó m i t i nh lên phía trên. Xác nh màu ch c a văn b n, k c các m c. TEXT= Xác nh màu s c cho các siêu liên k t trong văn ALINK=,VLINK=,LINK= b n. Tương ng, alink (active link) là liên k t ang ư c kích ho t - t c là khi ã ư c kích chu t lên; vlink (visited link) ch liên k t ã t ng ư c kích ho t; Như v y m t tài li u HTML cơ b n có c u trúc như sau: Tiêu c a tài li u ... N i dung c a tài li u 3.2 CÁC TH NH D NG KH I 3.2.1 TH P Th ư c s d ng nh d ng m t o n văn b n. Cú pháp: N i dung o n văn b n 3.2.2 CÁC TH NH D NG M C H1/H2/H3/H4/H5/H6 HTML h tr 6 m c m c. Chú ý r ng m c ch là các ch d n nh d ng v m t logic, t c là m i trình duy t s th hi n m c dư i m t khuôn d ng thích h p. Có th trình duy t này là font ch 14 point nhưng sang trình duy t khác là font ch 20 point. m c c p 1 là cao nh t và gi m d n n c p 6. Thông thư ng văn b n m c c p 5 hay c p 6 thư ng có kích thư c nh hơn văn b n thông thư ng. Trang 20
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

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