Đang tải... (xem toàn văn)
bài giảng thiết kế web dạng slide phần 2 tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn về tất cả...
1 Tổng quan về thiết kế Web 1 Tổng quan về thiết kết WEB Chương 2 Tổng quan về thiết kế Web 2 Lâm Quang V Lâm Quang V ũ ũ Phần 1 –Xác định mục đích, yêu cầu của Website cần thiết kế l Mục tiêu, yêu cầu cơ bản của WebSite l Đối tượng phục vụ l Chủ để của WebSite Tổng quan về thiết kế Web 3 Lâm Quang V Lâm Quang V ũ ũ 1.1 Mục tiêu, yêu cầu cơ bản l Đề 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 Làcông cụ để đánh giásựthành bại của một Website l Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển. 2 Tổng quan về thiết kế Web 4 Lâm Quang V Lâm Quang V ũ ũ 1.2 Đối tượng phục vụ l Xác định loại đọc giả chính của Website l Tìm hiểu về: – Sự hiểu biết – Trình độ – Sở thích – Kinh nghiệm duyệt Web … l 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 Tổng quan về thiết kế Web 5 Lâm Quang V Lâm Quang V ũ ũ 1.3 Chủ đề l Giúp định hướng cho nhàthiết kế – Giáo dục – Huấn luyện (online trainning) – Tin tức – Giải trí – Diễn đàn trao đổi thảo luận – Mua bán, quản lý…. l Xem vídụ Tổng quan về thiết kế Web 6 Lâm Quang V Lâm Quang V ũ ũ Vídụ-Diễn đàn 3 Tổng quan về thiết kế Web 7 Lâm Quang V Lâm Quang V ũ ũ Vídụ-Online training Tổng quan về thiết kế Web 8 Lâm Quang V Lâm Quang V ũ ũ Vídụ-tin tức Tổng quan về thiết kế Web 9 Lâm Quang V Lâm Quang V ũ ũ Vídụ 4 Tổng quan về thiết kế Web 10 Lâm Quang V Lâm Quang V ũ ũ Vídụ-Online Shopping Tổng quan về thiết kế Web 11 Lâm Quang V Lâm Quang V ũ ũ Phần 2 -Thiết kế giao diện l Điểm khác biệt giữa tài liệu thông thường và trang WEB l Một số vấn đề liên quan đến việc thiết kế giao diện cơ bản l Thiết kế giao diện WebSite Tổng quan về thiết kế Web 12 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website Menu Header Content Logo 5 Tổng quan về thiết kế Web 13 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website 2 x 2 Layout Tổng quan về thiết kế Web 14 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website Tablewithin a table Tổng quan về thiết kế Web 15 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website Theouter table 6 Tổng quan về thiết kế Web 16 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website Theinner table Tổng quan về thiết kế Web 17 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website Centeredwith three columns Tổng quan về thiết kế Web 18 Lâm Quang V Lâm Quang V ũ ũ Reallycomplicated design! 7 Tổng quan về thiết kế Web 19 Lâm Quang V Lâm Quang V ũ ũ 2.1 Điểm khác biệt giữa tài liệu thông thường vàtrang WEB l Giống nhau: phải được trải qua sự phát triển vàchuẩn hóa. l 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. Tổng quan về thiết kế Web 20 Lâm Quang V Lâm Quang V ũ ũ 2.2 Một số vấn đề liên quan đến việc thiết kế giao diện cơ bản. l Thiết kế hướng tới người sử dụng l Các giúp đỡ định hướng rõ ràng l Không cótrang cuối cùng (dead-end) l Băng thông và ảnh hưởng l Đơn giản vàtính nhất quán l Tính ổn định của các trang Web l Phản hồi và đối thoại l Tính tương thích trên các trình duyệt khác nhau (thay thế) Tổng quan về thiết kế Web 21 Lâm Quang V Lâm Quang V ũ ũ 2.2.1 Thiết kế hướng tới người sử dụng l Người sử dụng là đối tượng chính quyết định sự thành bại của Website l Yêu cầu mức độ hoàn hảo của thiết kế giao diện đồ họa l Xây dựng các kịch bản mẫu cho các loại đối tượng sử dụng khác nhau l Cách tốt nhất: thử nghiệm à nhận các phản hồi từ đọc giả. 8 Tổng quan về thiết kế Web 22 Lâm Quang V Lâm Quang V ũ ũ 2.2.2 Các giúp đỡ định hướng rõ ràng l Đọc giả cóthể trả lời các câu hỏi: – Đang ở đâu ? – Cóthể làm gì? – Cóthể đi tiếp tới đâu ? l Biểu tượng nhất quán, dễ hiểu, theo chuẩn qui định l Luôn cókhả năng quay lại trang chủ, các trang chủ chốt trên Website Tổng quan về thiết kế Web 23 Lâm Quang V Lâm Quang V ũ ũ 2.2.3 Không cótrang cuối cùng (dead- end) l Mỗi trang cóít nhất một liên kết l Trang “dead-end” à thất vọng, mất khả năng đến với các trang khác. l Nên để liên kết về trang chủ trong mọi trang. Tổng quan về thiết kế Web 24 Lâm Quang V Lâm Quang V ũ ũ 2.2.4 Băng thông và ảnh hưởng l Sự kiên nhẫn của đọc giả cógiới hạn. l Tốc độ đôi khi làyếu tố quyết định đến việc lựa chọn Website. l Phân biệt giữa thiết kế cho Internet và Intranet. 9 Tổng quan về thiết kế Web 25 Lâm Quang V Lâm Quang V ũ ũ 2.2.5 Đơn giản vàtính nhất quán l Tùy vào loại ứng dụng l Đọc giả sẽ không ấn tượng vàsựphức tạp không lý do. Đặc biệt là đọc giả phục thuộc vào thời gian vàthông tin chính xác. l Các biểu tượng đơn giản, quen thuộc, nhất quán trong tất cả các trang Tổng quan về thiết kế Web 26 Lâm Quang V Lâm Quang V ũ ũ 2.2.6 Tính ổn định của các trang Web l Ổn định về cấu trúc vànội dung l Cấu trúc: các thành phần được đặt đúng chỗ vàhoạt động nhịp nhàng. l 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. Tổng quan về thiết kế Web 27 Lâm Quang V Lâm Quang V ũ ũ 2.2.7 Phản hồi và đối thoại l Chuẩn bị trước cho việc trả lời, đáp ứng các đòi hỏi, góp ý của đọc giả một cách nhanh nhất cóthể. l Luôn cócung cấp địa chỉ để liên kết với “Webmaster” l Lên kế hoạch nhân sự phụ trách lâu dài. 10 Tổng quan về thiết kế Web 28 Lâm Quang V Lâm Quang V ũ ũ 2.2.8 Tính tương thích trên các trình duyệt khác nhau (thay thế) l 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 Lưu ý khi có đọc giả sử dụng web browser không cókhả năng hỗ trợ đồ họa. l Sử dụng nhãn (tag) ALT trong HTML để thay thế. Tổng quan về thiết kế Web 29 Lâm Quang V Lâm Quang V ũ ũ 2.3 Thiết kế giao diện Website l Xác định kiểu chữ, màu sắc l Xác định kích thước khung nhìn l Xác định các kỹ thuật, công cụ thiết kế l Cắt đoạn, tóm lược thông tin l Hệ thống Menu điều khiển, các liên kết giữa các trang l Xác định cấu trúc WebSite Tổng quan về thiết kế Web 30 Lâm Quang V Lâm Quang V ũ ũ 2.3.1 Xác định kiểu chữ, màu sắc l Phông 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… l Gam màu à thống nhất trong toàn bộ Website l Font tiếng Việt: VNI, TCVN3, Unicode… [...]... quan về thiết kế Web 13 2. 3.6 .2 Nối tiếp 40 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web Hệ thống các trang nối tiếp l l l 41 Biểu diễn thông tin tuần tự, các bảng tường thuật nối tiếp theo thời gian Các thông tin tra cứu tham khảo: tự điển báck khoa, tự điển thuật ngữ Thích hợp cho hệ thống website nhỏ Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 2. 3.6 .2 Ô lưới 42 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 14... Vũ Tổng quan về thiết kế Web 15 Phần 3 – Các thành phần cơ bản của Website l l l 46 Trang chủ (HomePage) Hệ thống Menu, Logo, định danh Các trang thành viên Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 3.1 Trang chủ l l l 47 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 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 3 .2 Hệ thống menu,logo,... dung có giá trị và sự hấp dẫn cho website Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 18 LAB2 – Khảo sát các Website l l Khảo sát các trang Web và rút ra các nhận xét về cách thiết kế trang Web Làm quen với cách sử dụng một số công cụ tiện ích hỗ trợ trong quá trình thiết kế Web – – – l 55 Swish Frontpage Dreamweaver Sử dụng FTP Server Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 19 ... về thiết kế Web 12 2.3.6 Xác định cấu trúc WebSite l l l l 37 Hệ thống phân cấp Hệ thống các trang nối tiếp Ô Lưới Mạng nhện Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 2. 3.6.1 Phân cấp 38 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web Hệ thống Phân cấp Dùng để tổ chức các khối thông tin phức hợp l Là hệ thống được dùng thông dụng nhất l Gần với mô hình tổ chức thế giới thực l Dễ hình dung tổ chức website.. .2. 3 .2 Xác định kích thước khung nhìn l l 31 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àm gì ? Lưu ý, hầu hết các trang web đều không vừa khớp với màn hình 14-15 inch Lâm Quang Vũ Vũ Tổng quan về thiết kế Web Ví dụ: 32 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 2. 3.3 Xác định các kỹ thuật, công cụ thiết kế l Phụ thuộc nhiều yếu... quan về thiết kế Web 17 4 .2 Liên kết trang web, quảng cáo l l 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í: – – – 52 Thuê đặt logo, quảng cáo Thu phí thành viên … Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 4.3 Phụ lục, nguồn thông tin, các trang giúp đỡ, FAQ l l l 53 Thông tin báo cáo thường cô đọng à trên web có thêm... (Frequently Asked Questions) lý tưởng cho 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 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 4.4 Thiết kế trang web cho mạng Intranet l l l 54 Một số site thiết kế riêng cho các tổ chức, sử dụng mạng LAN Mục tiêu : nâng cao thời gian truy cập, dẫn dắt vào sâu trong cấu trúc website à đòi hỏi thông tin phải hấp dẫn,... thiết kế Web 2. 3.5 Hệ thống Menu điều khiển, các liên kết giữa các trang l l l l 35 Hệ thống đk đồ họa phong phú, nhất quán, mang tính gợi nhớ Hệ thống phím ấn đồng nhất, logic Có thể liên kết đến một site khác cũng như quay lại site trước Các liên kết đến các site có giá trị sẽ tăng giá trị chính website của chúng ta Lâm Quang Vũ Vũ Tổng quan về thiết kế Web Ví dụ 36 Lâm Quang Vũ Vũ Tổng quan về thiết. .. 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 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 4.1 Thời gian quản lý l l l l 51 Website cần được cập nhật thông tin để đọc giả luôn cảm nhận được cái mới Nếu phần nào đó được cập nhật à thêm ký hiệu “New” Ghi thời gian cập nhật, số người truy cập… Nếu website phức tạp à... dung được cấu trúc, tổ chức website Cần quan tâm đến vị trí, các thể hiện (có hay không có hiệu ứng) Vị trí logo, định danh công ty phải cố định nhất quán Lâm Quang Vũ Vũ Tổng quan về thiết kế Web 16 3.3 Các trang thành viên l l 49 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 Lâm Quang Vũ Vũ Tổng quan về thiết kế Web Phần 4 – Một số vấn đề cần quan . thiết kế Web 12 Lâm Quang V Lâm Quang V ũ ũ 2. 3 Thiết kế giao diện Website Menu Header Content Logo 5 Tổng quan về thiết kế Web 13 Lâm Quang V Lâm Quang V ũ ũ 2. 3 Thiết kế giao diện Website 2 x 2. 1 Tổng quan về thiết kế Web 1 Tổng quan về thiết kết WEB Chương 2 Tổng quan về thiết kế Web 2 Lâm Quang V Lâm Quang V ũ ũ Phần 1 –Xác định mục đích, yêu cầu của Website cần thiết kế l Mục tiêu,. quan về thiết kế Web 14 Lâm Quang V Lâm Quang V ũ ũ 2. 3 Thiết kế giao diện Website Tablewithin a table Tổng quan về thiết kế Web 15 Lâm Quang V Lâm Quang V ũ ũ 2. 3 Thiết kế giao diện Website Theouter