giáo trình thiết kế website

THIẾT KẾ WEB GV: TRẦN PHI HẢO KHOA: KHOA HỌC MÁY TÍNH TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT – HÀN Email: haovyy@gmail.com CHƯƠNG I: Giới thiệu Internet website I.1 Giới thiệu I.1.1 Giới thiệu Internet I.1.2 Dịch vụ Word wide web I.1.3 Giới thiệu HTML, Javascript I.2 Các nguyên tắc thiết kế Website       Được phát minh Tim Berners Lee (1989, CERN, CH) “cho phép xem thơng tin truy cập mạng định danh tài nguyên toàn cầu đơn nhất” 1990 – Trình soạn thảo siêu văn 1991 – Máy chủ Web server (info.cern.ch),và trình duyệt web văn đời 1993 – Trình duyệt Mosaic phát triển NCSA 1994 – Hội đồng World Wide Web (W3C) sáng lập;    Giới thiệu: ◦ WWW hệ thống website tồn cầu, web site liên kết với thông qua siêu liên kết ◦ Một hay nhiều web site đặt web server, xác định thông qua địa IP hay tên miền web server (sử dụng DNS để phân giải tên miền thành IP tương ứng) Tính chất: Là dịch vụ thông tin đa phương tiện, phân tán dựa tảng siêu văn ◦ Phân tán: Thông tin đặt nhiều host khắp giới ◦ Đa phương tiện: văn bản, hình ảnh, âm thanh, video ◦ Siêu văn bản: Các kỹ thuật siêu văn cho phép truy cập thông tin thông qua định danh tài nguyên Mục đích: Cung cấp truy cập đến tài nguyên mạng ◦ Các tài nguyên Web FTP, News,… ◦ Kết hợp nhiều dịch vụ với    Giới thiệu: Là tập hợp tài liệu hay trang web (web page) liên kết với thông qua siêu liên kết Tổ chức website: Cách bố trí tài liệu, trang web ◦ Cung cấp nhìn tổng thể, rõ ràng trang web ◦ Kết hợp trang web thành chủ đề Cách thức tổ chức website: ◦ Thông qua thư mục ◦ Thông qua liên kết để kết nối trang hợp lý I.1.2.2 Tổ chức website 11/07/14  Giới thiệu: ◦ Là trang mặc định web site người dùng truy cập vào website thơng qua tên miền IP web server chứa website ◦ Do người phát triển web thiết lập, trang index.html, index.php, main.php,… ◦ Trang chủ chứa liên kết đến trang khác web site  Đặc điểm ◦ Cấu trúc đơn giản ◦ Dễ tạo liên kết ◦ Phải đặt tên file ý nghĩa để tránh nhầm lẫn ◦ Khi số lượng file hạn chế (50 file liệu 30 file hình ảnh) việc tìm kiếm dễ dàng Tuy nhiên, số lượng file tăng lên việc tổ chức theo hình thức khơng hiệu 45 b Cấu trúc phân cấp ◦ Sử dụng thư mục cấp thư mục gốc để chứa liệu Các file kiểu (.GIF, PDF) có liên quan nội dung (ví dụ: kế hoạch kinh doanh năm 2008) nhóm lại thư mục 46  Đặc điểm ◦ Linh động ◦ Dễ dàng mở rộng cấu trúc ◦ Dễ quản lý 47 48 49 Hạn chế việc bắt người đọc phải suy nghĩ  Nội dung rõ ràng, có tính “tự giải thích” Ví dụ: http://www.viettel.com.vn http://www.vietnamworks.com  50  Khơng làm thời gian người sử dụng người sử dụng muốn dùng thử dịch vụ công cụ bạn 51  Gây ý đọc giả ◦ Thơng thường hình ảnh tạo ý tốt text ◦ Mắt người nhạy cảm với màu sắc, hình khối chuyển động ◦ Ví dụ:  http://www.fpt.vn  Cố gắng quảng bá hình ảnh cách trực tiếp, dễ hiểu Ví dụ: http://www.sandybeachdanang.com/ 53  Sử dụng ngơn từ cách hiệu Ví dụ: http://www.sfone.com.vn/ 54  Không nên thiết kế phức tạp, cố gắng đơn giản hóa: Đây lưu ý quan trọng thiết kế web Ví dụ: www.google.com  Sử dụng hiệu ứng khoảng trống để làm bật yếu tố  Truyền thơng đến người sử dụng ngơn ngữ hình ảnh (visual language): nguyên tắc ◦ Tổ chức: cấu trúc phù hợp, đồng nhất, ◦ Hiệu quả: đơn giản, rõ ràng, dễ phân biệt ấn tượng ◦ Truyền thông: tùy thuộc đối tượng sử dụng để kết hợp tốt phương pháp truyền thơng sử dụng màu sắc, hình ảnh, chữ viết,…  Mật độ từ khoảng 18 từ/line 50 đến 80 ký tự/line 57  Tạo niềm tin cho người sử dụng: Sử dụng ngôn ngữ theo vùng lãnh thổ, quốc gia, Ví dụ: www.google.com.vn  Kiểm thử ◦ Trong q trình thiết kế, phải ln ln kiểm thử hoạt động chỉnh sửa lỗi ◦ Kiểm tra việc truy cập từ phía người sử dụng trường hợp user nhiều user 58 I’m Diego Maradona The end ... tổng thể, rõ ràng trang web ◦ Kết hợp trang web thành chủ đề Cách thức tổ chức website: ◦ Thông qua thư mục ◦ Thông qua liên kết để kết nối trang hợp lý I.1.2.2 Tổ chức website 11/07/14  Giới thiệu:... tài nguyên Web FTP, News,… ◦ Kết hợp nhiều dịch vụ với    Giới thiệu: Là tập hợp tài liệu hay trang web (web page) liên kết với thông qua siêu liên kết Tổ chức website: Cách bố trí tài liệu,...CHƯƠNG I: Giới thiệu Internet website I.1 Giới thiệu I.1.1 Giới thiệu Internet I.1.2 Dịch vụ Word wide web I.1.3 Giới thiệu HTML, Javascript I.2 Các nguyên tắc thiết kế Website       Được