Phong cách trình bày trang WEB

TS HÓ S ĩ M Ậ U TH Ú C & N H Ó M T Á C G IẢ E L IC O M TRÌNH BÀY TRANG WEB NHÀ XUẤT BẢN THỐNG KÊ 6X7 6Ü ' 66 - 552 - 2000 1X2000 LỜI GIỚI THIỆU Đ i đâu để tìm kiếm thiết bị máy tính, lưu trừ trực tuyến, đại lý bán h n g , ? Đó n hc -q câu hỏi chung thường đặt người dùng Internet, trách nhiệm người thiết kế v ỉc b ia giải đảp câu hỏi Đánh giá m>c độ thành công thiết k ế Website thường phải dựa bốn tiêu chuẩn: dẻ sử dụng, nội dung pi.ong phú, hữu dụng cuối yếu tố hấp dẫn V i mục đích hỏ trợ người thiết k ế tạo vVebsite hoàn hảo, nhóm tác giả Elicom , gồm chuyên gia tin học đầy tâm huyết, nhlắu kinh nqr.ỉộm công tác xuất bản, dày công nghiên cứu thu thập tài liệu đời sách P h o n g c c h t r ìn h b y t r a n g W eb " V i cách trình bày ngắn gọn, dễ hiểu, có ví dụ hình ảnh m inh họa kèm theo, hẳn sách sẻ trở thành cẩm nang ihiết k ế Web hữu ỉch cho quan tâm tới thiết kế W ebsite B i lẻ bạn sẻ hướng dẫn cụ thể từ lập k ế hoạch, tổ chức thiết k ế site m ố i ch i tiết thiết k ế trang đơn lẻ Cuốn sách đời chắn có thiếu sot, chúng tơi mong nhận góp ý ch ân thành bạn đọc gần x a đề sách hoàn chỉnh NHÓM TÁC GIẢ ELICOM MỤC LỤC C hư ng Q U Y TRĨNH C O BẢN C Ủ A Dự Á N X Â Y DỰ N G TRA N G WEB Phần chuẩn b ị Mục tiêu cúa bạn g ì? H iểu rỏ độc giả W eb site 10 Nhóm phồ bình thiết k ế 11 T ó m tắt nội d u n g 11 Q uy trinh phát triển W e b site 11 L ậ p k ế hoạch định nghĩa s it e 12 Cấu trúc thông t in 14 T h iế t k ế s it e 14 C ấu trúc s it e 15 Quảng cáo tiếp thị sản phẩm W ebsite 15 T h e o dõi, kiểm tra bảo t r ì 16 C hư ng THIẾT K Ế G IA O DIỆN Th iết k ế Website tàí liệu thõng thư ờng 18 T o trang W eb độc lậ p 18 T h iế t k ế giao diện b ả n 20 T h iế t k ế tập trung vào người sử d ụ n g 20 Đ iều hướng 24 C hư ng THIẾT K É SITE T ổ ch ứ t thông tin 28 "Phân đoạn" thông t in .29 T ó m tắ t 31 C ấ u trúc s ite 31 Nhữtig cấu trúc thông tin c b ả n 32 Để tà i thiết k ế s ite 34 Ph ần tử s it e 38 T n g c h ủ 38 Menu site c o n 45 Danh sách tài nguyên, trang "những site liên quan k h c " .45 Bảng mục lục, danh m ục site sơ đồ s it e 46 Trang "W hat is N e w " 46 C c tính tìm k iế m 47 Thông tin liên lạc phản hồicủa người sử d ụ n g 47 T h mục phụ lụ c Trang F A Q 48 Nhửng trang lỗi máy chủ tùy biếr Internet - thiết k ế In tra n e t T iê u chuẩn thiết k ế C hư ng THIẾT K Ế TRAN G Hệ thống phân cấp trực q u a n 51 Tính q u n .53 Kích thước tra n g 54 Vùng an toàn đồ h ọ a Độ dài tra n g 55 Nói dung độ dài trang 57 Lưới thiết k ế trang W e b .58 Đầu trang chân tra n g 61 Đ ắu trang: Đồng s it c 62 C h â n trang: Nguồn g ố c B ố trí trang .6 Bảng biểu bố trí trang 63 Thuộc tính kích thước b àn g 66 Bảng biếu cao c ấ p .66 C a n h c h in h 6 Là m việc với ả n h 67 Khung 68 T ín h linh h o ạt 69 C hức n ă n g 69 H oạt động tương t c 70 Mỹ h ọ c 70 Những điểu cản lưu ý thiết k ế 70 C ác vấn để hệ điều h n h 71 T rìn h d u y ệ t 71 Những thay đổi khoảng chênh đồ h ọ a 72 C hư ng K Ỹ THUẬT TẠO C H Ữ Đặc điểm chữ trang W e b 73 C ấu trúc nội dung logic trựcq u a n 74 B ản mẳu xế p tầng 74 B â y cần làm g ì 75 T ín h dễ đ ọ c C a n h lể 76 Đ dài dòng vãn b n .7 S C h ữ viết hoa chữ viết thường 78 Khoảng trắ n g 79 Kiểu c h ữ Là m b ật 82 T ín h q u n Vấn đề hệ điều h n h 84 K ích cờ phơng chữ tương đối 84 K iể u phông c h ữ .8 Cascading Style S h e e t .8 L ợ i Cascading Style S h e e t ể B ản mẫu hoạt động n o S ê Đ ôi tượng nên sử dụng css nên sử dụng Đ họa kiểu chữ K iể u khử c a 87 C hư ng PH O N G C Ả C H HIỆU CH ỈN H Phong cách viết tài liệu trực tu y ế n 90 Phong cách văn xuôi cho W eb 91 Tiéu để tiốu để co n Phong cách văn b ả n T iê u đề tra n g Định dạng vần cho tài liệu W e b Lien k ế t D uy trì ngừ c ả n h B ố trí liên k ế t C hư ng Đ Ó H Ọ A WEB Đặc điểm đổ họa W e b H iển thị m u .9 Màu ”an toàn trinh d u yệ t" H òa s ắ c 9 Độ phân giải m àn h ìn h 101 G a m m a 102 Đ ó họa dai thơng m n g 103 Đ ịnh dạng file đồ h ọ a 103 File G I F 103 ĐỒ họa J P E G 107 Đ họa P N G .109 C h iến lược tạo ả n h 110 T ó m tắt định dạng file 112 Ả n h m àn h ìn h 113 Màn hình ảnh màu in r a 113 Ả n h minh họa tạ p 114 Biểu đồ cho m àn hình máy tín h 115 H T M L đồ họa 117 S đồ ả n h 119 C hương Đ A PHƯ O N G TIỆN ng dụng đa phương t iệ n 122 Thiết k ế phần tử đa phương tiệ n 124 Chiến lược đa phương tiện W eb 125 Â m 125 C hiếu s lid e 125 V id eo 125 Hoạt c ả n h 127 X lý đa phương t iệ n 127 X lý âm th a n h 127 X lý v id e o 128 Công nghệ n é n 128 Phân phối đa phương tiệ n 130 Truyền su ố t 130 T ả i xuố ng 131 Khuyến n g h ị 132 Codec v id e o 132 S o re n s o n 132 C in e p a k 132 J P E G 133 M P E G 133 B í đa phương t iệ n 134 Â m .134 C hiếu s lid e .134 V id eo 134 Chương QUY TRÌNH C BẢN CỦA Dự ÁN XÂY DỰNG TRANG WEB K h i xâ y dựng W ebsite nào, bước xác định rỏ mục đích Khơng có mục đích nhiệm vụ rỏ ràng, dự định khó có thề đạt kết mong muốn Lậ p kế hoạch cẩn thận kết hợp với việc để mục tiêu rõ ràng chìa khố để xâ y dựng W ebsite thành công, đặc biệt bạn tham gia nhỏm thiết kế PHẨN CHUẨN BỊ Nhìn chung, W ebsite xâ y dựng nhóm gồm chuyên gia phụ trách vể nội dung, chuyên gia kỹ thuật, chuyên gia lập trình, nhà sản xuất ủy ban chịu trách nhiệm xem xét định đời W ebsite Dưới số câu hỏi dành cho người bắt đầu triển khai x â y dựng Website phức tạp • T ổ ch út bạn phải thụt nhiệm vụ gì? • X â y dựng W ebsite hỗ trợ nhiệm vụ th ế nào? • Mục tiêu trước mắt W ebsite gì? • Mục tiốu lâu dài W ebsite gì? • NhCfrig k ế hoạch liên quan tới Website bạn sẻ sử dụng để đại đuợc mục tiẻu để ra? • Bằng cách kiểm nghiệm thành công Website? Đ ây vấn đề lớn, vấn để mang tính khái quát thường bị bỏ qua triển khai “công việc thực sự” thiết k ế tạo dựng Website T u y nhiốn, không đủ khả trả lời cách chắn câu hỏi này, khơng có đảm bảo bạn thu kết khả quan thiết k ế việc ch o đời Website M Ụ C T IÊ U C Ủ A BẠN L À G Ì? T rìn h bày ngắn gọn» x c định rỏ mục tiéu nổn móng cho q trình thiết k ế W ebsite Nội dung trình bày bao gồm k ế hoạch cụ thể liên quan tới W ebsite: Website thiết kế, xâ y dựng kiểm nghiệm bao lâu? K h ố i lượng công việc cụ thể nhữĩig tièu chuẩn chất lượng dùng để đánh giá thành cơng? Q trình xây dựng Website q trình lâu dài, khơng phải dự định mang tính chất sớm chiểu với nội dung đơn điệu V ấ n đé quản lý thu thập xuất với vấn để bảo trì kỹ thuật phải nằm phạm v i ngân sách k ế hoạch đầu tư Website Nếu khơng có nhìn nhận sâu x a chắn dự án sẻ khơng tồn lâu dài PHONG CÁCH TRÌNH BÀY TRANG WEB H IỂ U RỎ ĐỘC G IÁ C Ủ A W E B S IT E Bước phải xá c định độc giả tương lai W ebsite Đ iểu n ày giúp ta xây dựng cấu trúc Website cho đáp ứhg nhu cầu mong đợi độc giả T ầm hiểu bièt, trình độ kiên thức, mối quan tâm nhu cầu khác m ỏi tầng lớp độc giả, từ người nhập mơn cần có cấu trúc mở đầu rõ ràng, tỉ m ì đến chuyên gia người bực tức với dường làm chậm q trình truy cập thơng tin V í dụ, mục tiêu đặt cho Website phân phối thông tin cộng tác nội bộ, tài liệu hồ sơ cá nhân, thông tin khác xuất phẩm độc giả người thường xuyẻn viếng thăm Website người truy cập tò mò Web su rfers Trang chủ dành cho trình duyệt (browser) nên có cấu trúc tương tự bìa tạp chí Mục đích nhằm thu hút trình duyệt nhờ kết hợp hoàn hảo đồ họa với cách trình bày rỏ ràng vé nội dung T ấ t kết nối trẻn trang chủ phải hướng phía trong, vé phía trang bơn Website Nên đưa trình bày ngắn gọn lĩnh vực thu hút độc giả Website Những người nhập m ôn uà người không s d ụ n g thường xu yên Đ ộc giả loại mong đợi cấu trúc rõ ràng dễ truy cập để xem xét cách tổng quát nhừng minh họa cho việc xếp thông tin Web site Những người chưa có kinh nghiệm thường thấy ngản ngại trước văn hay menu phức tạp H ọ thăm dò sâu bổn Website trang chủ hấp dẳn cách trình bày khơng sáng sủa H iếm người sử dụng thỏa mã n nhờ việc xem xét yêu tố có tác dụng gợi nhớ vị trí lưu trữ thơng tin cần thiết tren Website sơ đồ phân cấp, thiết kế đồ họa, hay biểu tượng Một giải VC thuật ngữ kỹ thuật, chữ viết tắt trả lời câu hỏi thường gặp giúp ích cho người sử dụng Nhóm độc giả ln mối quan tâm nhà thiết kế , số lượng đối tượng ngày giảm W eb trờ thành công cụ ảnh hưởng lớn tới trình giao dịch thương mại Chuyên gia uà nhỉTng ngưòi sử dụng thường xưựên Đ ộc giả loại mong muốn thu thơng tin nhanh chóng x c C c chuyên gia nhìn chung khơng có đủ kiên nhản trước menu đồ họa có mật độ thơng tin thấp (Low-density graphic menu), lần ch ỉ đưa lựa chọn Những người có khả khao khát tách rời nạp nhanh m enu văn (Text menu) Đồ họa ch ỉ làm cho công việc họ thêm rắc rối Nói chung chuyên gia người có kỹ sử dụng ln có sẵn ý định đầu họ đánh giá cao nhửng menu văn chi tiết, phác họa cấu trúc site, mục dễ hiểu, thiết k ế có khả cung cấ p chức nãng cho phép tìm kiếm nhanh chóng Phần lớn người sử dụng hiên nẳm nhóm T h ậm chí cơng ty ch ỉ sử dụng Website để trao đổi thông tin nội vần có nhiều người bên ngồi trờ thành độc giả quen thuộc Người s ứ dụ ng qu ốc t ế H ã y nhớ ta tiến hành xâ y dựng W orld W ide Web C ó nghĩa độc giả Website đâu, Australia hay B a L a n Đ ể có số độc giả nước ngồi lớn nhất, bạn cần cung cấp cho họ dịch, trang m enu mấu chốt, trang mờ đầu trang trình bày nội dung, nẻn tránh sử dụng thuật ngữ chuyên ngành đặc biệt nhửng chữ viết tắt tối nghĩa Cũng không nên cho tất độc giả đéu tuân theo quy ước đặt ngày tháng bạn V í dụ, khơng viết tắt ngày tháng Website 10 PHONG CÁCH TRÌNH BÀY TRANG WEB Nếu bạn vừa muốn tạo giao diện trịfc tuyến tốt cho trang dài, vừa muốn in lưu trữ nội dung phải: • C h ia trang thành nhiều đoạn có lượng thơng tin nhỏ hai trang in, bao gồm c ả hình vỗ đồ họa nội tuyến Dùng sức mạnh liên kết siêu văn để tận dụng mơi trường Web • Cung cấp liên kết tới file riêng biệt có chứa văn nằm gọn trang , thiết k ế để người sử dụng in hoảc lưu trữ tất thông tin liên quan bước Không quên đưa U R L vào phiên trực tuyến văn trang để người sử dụng tìm thấy nguồn thơng tin cập nhật N h ìn chung, bạn nên chọn trang W eb ngắn ui lỷ d o sau: • T n g chủ, m enu, trang điều hướng site bạn • T i liệu cần duyệt đọc trực tuyến • C c trang có phần đổ họa lớn N hững tỏi liệu dài thường: • D ề lưu trữ (nội dung theo mạch, đoạn ghép nối) • Giống với cấu trúc tài liệu giấy thơng thường (khơng bị chia nhỏ) • Người dùng tải xuống in dễ dàng LƯỚI T H IẾ T K Ế TRANG WEB T ín h quán khả phán đoán thuộc tính quan trọng hệ thống thơng tin thiết k ế tốt Lư ới thiết k ế phần lớn ấn phẩm củng cần thiết k ế tài liệu điện tử ấn trực tuyến T ại đó, mối quan hệ khơng gian phần tử hiển thị chuyển đổi để đáp ứng đầu vào người sử dụng hoạt động hệ thống L i tạo trật tự trang C ài đặt H T M L (ngôn ngữ đánh dấu siêu văn bản) thời không ch o phép thao tác điều khiển dễ dàng mà người thiết k ế đồ họa mong đợi từ phần mểm bố trí trang công cụ tác nghiệp đa phương tiện T u y nhiên, H T M L sử dụng cẩn trọng tạo hệ thống thơng tin có tính cao phức tạp K h i khơng sử dụng thích hợp nhắt qn, điều khiển trình bày trang in phần đồ họa nội tuyến trang W cb gây hình ảnh lộn x ộ n , khơng có trật tự rỏ ràng vé mức độ quan trọng Ph ẳn đồ họa văn bị trộn lẫn m ột cách ngẫu nhiên làm giảm tính sử dụng khó đọc, giống trang giấy Một chương trinh thiết k ế thực quán cân đối làm tăng niém tin độc giả site Không hệ thống lưới thiết k ế lại phù hợp với trang W eb Trư c tiên, bạn phải thiết lập lưới bố trí trang Với "xương sống" đồ họa n ày, bạn định mức độ xuất thường xuyên khối chữ minh họa trang thiết lập vị trí dẵn kiểu dáng cho tiồu đê m àn hình chính, tiêu đề liên kết nút điểu hướng Đ ể bắt đầu, h ã y tập hợp số ví dụ đại diện văn bạn, kèm theo phần đồ hoạ, hình tài liệu minh họa thử trình bày phần tử trang theo nhiểu cách khác Trong dự án lớn hơn, phán đoán liên kết văn đồ họa sẻ tác động trốn m àn hình, hã y kiểm tra “ khung" trình bày trang với trang Web phức tạp trang W eb phức tạp 58 Chương 4: Thiết kế trang dụng site sẻ chi phối định thiết k ế trang T i liệu đọc trực tuyến phải súc tích , lượng đồ họa điều chỉnh thận trọng để phù hợp với dải thơng sẵn có C c tài liệu in hoăc đọc ngoại tuyến nên xuất trang độ rộng trang cần phải phù hợp với khổ giấy chuẩn để in dễ dàng Đ a uào cóc phẩn tủ c ố d in h Mỗi trang cẩn có tiêu đổ, tác giả, ngày duyệt, thòng tin vé liẽn kết tới trang chủ site C ác trang Web thường in lưu vào đĩa Nếu khơng có thơng tin này, bạn khơng dề xác định nguồn gốc tài liệu H ã y xem mỏi trang site cắt từ báo phải đảm bảo thơng tin có nguồn gốc K h ô n g nên p d ặ t m ầu th iết k ế Không áp đặt “ mẳu thiết kế” cho site bạn, h ã y cẩn thận lấy phần tử đồ họa Website khác ấn để "trang t r f cho trang W eb bạn Phong cách đồ họa hiệu chỉnh Website cần phải phát triển cách tự nhiẽn dựố vào q trình x lý nội dung bố trí trang thích hợp, qn T ố i ưu hóa quan trọ n g Trong bố trí trang, phẳn đầu trang phần quan trọng Nhưng trang W eb, trang phía đặc biệt quan trọng, inch đẳu trang tất nhừhg hiển thị m àn hình H ã y sử dụng cách hiệu S ù d ụ n g màu nhọt Những màu nhạt, nhẹ nhàng tự nhiên sỗ lựa chọn tốt ch o phần tử phụ T rá n h sử dụng màu nguyên thủy có độ bã o hồ cao trữ khu vực muốn làm bật tối đa, nốn cẩn trọng sử dụng chúng C ẩ n thận với v iệ c trang t r í d họa Thước ngang, bullet đồ họa biểu tượng, đánh dấu trực quan khác có nhửng chức riồng, nồn hạn ch ế sử dụng chúng đẻ tránh bố trí vá víu , lộn xộ n Đ ối với trang Web có kích thước lớn Một nguyẻn nhân mà nhà thiết k ế đồ họa chuyên nghiệp kiên nhẵn với H T M L thẻ tiêu đé H I H hiển thị lớn khơng thích hợp với hầu hết trình duyệt Web Cơng cụ làm bật đồ họa mạnh nèn sử dụng bước nhổ để tạo hiệu tối ưu S dụng thái tính làm bật đồ họa đểu dẵn đến hiệu ứng "clow n’s pants", trường hợp thứ đểu chói lồ chẳng có bật lên CÁC VẤN Đ Ể VỂ HỆ Đ IỂ U HÀNH T R ÌN H D U Y Ệ T Mỗi trình duyệt W eb thông dịch thẻ H T M L khác Việc định vị đồ họa, bảng, biểu mẫu thẻ canh chỉnh (alignment tag) đểu hoạt động khác nhánh hoăc mỏi phiên trình duyệt W eb S ự khác biệt tinh vi thường khó nhận thấy, nhiửig bố trí trang W eb phức tạp ch ính x c, chúng gây tác hại khơn lường V í hai trìn h duyệt W eb quan trọng Netscape Navigator M icrosoft Internet Exp lorer đểu sử dụng H T M L , gốc 9 "Netscape extensions" tới H T M L Javascript Ja va , đểu dùng chung kiến trúc plug-in tương thích Khơng tin tưởng vào cài đặt tính tiên tiến ch o đến bạn nhìn thấy trang Web hiển thị hoạt động yen ổn phận trình duyệt - 71 ... chương^rình quảng cáo trao đổi thư lừ tố chức 15 PHONG CÁCH TRÌNH BÀY TRANG WEB Nếu Website chủ yếu nhắm vào độc giả nội nên theo cách xế p trang thành phần trang chủ Y ah o o , Iníoseek, thòng báo địa... ế Web • C h i phí phụ T h iế t k ế phát triển site C ố vấn k ỹ thuật P hát triển C S D L M arketing site • Người hỗ trợ lâu dài cho Website Người tạo W ebsite 13 PHONG CÁCH TRÌNH BÀY TRANG WEB. .. thuật phải nằm phạm v i ngân sách k ế hoạch đầu tư Website Nếu khơng có nhìn nhận sâu x a chắn dự án sẻ khơng tồn lâu dài PHONG CÁCH TRÌNH BÀY TRANG WEB H IỂ U RỎ ĐỘC G IÁ C Ủ A W E B S IT E Bước