Chươ ng II: Các bước thiết kế web Chương Các tiêu chuẩn thiết kế web: 2.1 Các tiêu chuẩn thiết kế Thiết kế cho loại Browser khác – Tương thích web browser, hệ ñiều hành, loại hình,… – Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Lynx,… Tiến trình thiết kế web Tương thích loại hệ ñiều hành Theo sở thích người sử dụng ðộ phân giải hình kích thước cửa sổ Tốc ñộ kết nối Màu sắc, ñộ sáng phông chữ Thiết kế web Khoa CNTT Thiết kế web Thiết kế hình - PC Khoa CNTT Internet Explorer on Macintosh Thiết kế web Khoa CNTT Một thiết kế tốt 2.2 Tiến trình thiết kế web Nội dung quan trọng, nội dung ñơn ñộc làm cho tác dụng trang web Một thiết kế web ñược gọi tốt khi: Phân tích ý tưởng, mục tiêu, hoạch ñịnh kế hoạch Hoạch ñịnh cấu trúc website Tạo trang ñơn ñưa nội dung vào Thử nghiệm, kiểm tra ñánh giá Tải lên server thử nghịêm lần cuối Duy trì hoạt ñộng quản lý website - Dễ hiểu - Tạo ấn tượng vào - Dễ sử dụng - Dễ nhìn cảm nhận - WYSIWYG (WYSIWYW) Thiết kế web Khoa CNTT Thiết kế hình - Macintosh Live Area in Internet Explorer on Windows Thiết kế web Khoa CNTT Thiết kế web Khoa CNTT Bước 1: Phân tích ý tưởng, mục tiêu, hoạch ñịnh kế hoạch Chủ ñề website – tin tức Xác ñịnh xác mục tiêu trang cách ngắn gọn Lập website ñể làm gì?cung cấp cho user?cho user làm website Xác ñịnh vấn ñề giải quyết, chủ ñề website website thuộc loại gì?sẽ có tính gì? Xác ñịnh người dùng Ai user chính?họ thuộc tầng lớp nào?dự ñoán tốc kết nối user, HðH, kích thước hình, tần xuất truy cập Liệt kê nguồn tài nguyên Trang thiết bị, công cụ phần mềm, trình ñộ chuyên môn mình, làm, cần giúp? Xây dựng bảng tiến ñộ thực Thiết kế web Khoa CNTT Chủ ñề website – Diễn ñàn Thiết kế web Khoa CNTT Thiết kế web Khoa CNTT Chủ ñề website – Giáo dục - ðào tạo Chủ ñề website – Mua bán online Thiết kế web Khoa CNTT 10 Bước 2: Hoạch ñịnh cấu trúc website Phân loại trang web thiết kế: Cá nhân Doanh nghiệp Thương mại Phần nội dung chính: Liệt kê mục nội dung website => website có trang Chọn lựa cách thiết kế: Dạng bảng Dạng khung Dạng Templates, Masterpage Phác thảo sơ ñồ website Thiết kế web Khoa CNTT 11 Thiết kế web Khoa CNTT 12 Bước 3: Tạo trang ñơn ñưa nội dung vào Các thành phần website Trang chủ (HomePage) N i dung ph n quan tr ng nh t – Mọi website ñều ñược thiết lập quanh Homepage Tạo,kiểm tra, hiệu chỉnh, ñánh giá, trang riêng lẻ - Nếu thông tin không cần thay ñổi nên dùng web tĩnh => nhanh hơn, an toàn – ðiều kiện ñể website thành công – Lưu ý sử dụng hệ thống ñồ họa Hệ thống Menu, Logo, ñịnh danh - Nếu thông tin thay ñổi thường xuyên => web ñộng - Nếu có nhiều trang có bố cục giống => dùng masterpage cho tất trang ñó – Hệ thống menu phải rõ ràng, ñầy ñủ giúp ñọc giả hình dung ñược cấu trúc, tổ chức website – Cần quan tâm ñến vị trí, thể (có hay hiệu ứng) Làm việc theo module - Nên chia thành module ñể dễ quản lý sử dụng VD: Module menu, module kết nối CSDL, module hiển thị kết quả,… –Vị trí logo, ñịnh danh công ty phải cố ñịnh quán Các trang thành viên Thiết kế web Khoa CNTT 13 Thiết kế giao diện - frame Thiết kế web Khoa CNTT Thiết kế web Khoa CNTT 14 Thiết kế giao diệndiện- Table within a table 15 Thiết kế web Khoa CNTT Thiết kế giao diện – cấu trúc phức tạp 16 Kiểu chữ, màu sắc Phông chữ phụ thuộc vào yếu tố: – ðặc ñiểm thông tin – ðộc giả – Trình duyệt, ñộ phân giải – Ngôn ngữ sử dụng Gam màu thống toàn Website Font tiếng Việt: Chỉ dùng Unicode Thiết kế web Khoa CNTT 17 Thiết kế web Khoa CNTT 18 Hiển thị thông tin tóm tắt – chi tiết Thông tin tóm tắt – chi tiết Tóm tắt thông tin có số lợi ñiểm: – ðọc giả có thời gian ñể ñọc tài liệu hình – Luôn có nhu cầu muốn tìm phần thông tin chủ ñịnh, không nên chia cắt nhỏ, tóm lược ngắn – Hình thức cách tổ chức ñồng gây thất vọng kinh nghiệm tìm kiếm, khám phá – Thông tin ngắn gọn, súc tích thích hợp với hình máy tính (bị giới hạn tầm nhìn) Thông tin chi tiết ñi vào vấn ñề, nội dung cụ thể Thiết kế web Khoa CNTT 19 Thiết kế web Bước 4: Thử nghiệm, kiểm tra ñánh giá Khoa CNTT 20 Tạo virtual Directory Khởi tạo IIS cách: Dùng IIS Tạo Virtual Directory ñể kiểm tra (hoặc Apache Sever) – Start-> Programs-> Administartive Tools-> Internet Information Service – Hoặc classic Start-> Settings->Control Panel-> Administartive Tools-> Internet Information Service Kiểm tra hoạt ñộng liên kết (nội + ngoại) nguồn tài nguyên Thử với nhiều trình duyệt khác ðánh giá chung kết Thiết kế web Khoa CNTT 21 Thiết kế web Tạo virtual Directory (tt) • Nhấp vào nút gõ KienTuan hộp Alias – Nhấp phải (right click) vào Default Web Site, chọn New, Virtual Directory Khoa CNTT 22 Tạo virtual Directory (tt) Bố trí virtual directory KienTuan Thiết kế web Khoa CNTT 23 Thiết kế web Khoa CNTT 24 Tạo virtual Directory (tt) Tạo virtual Directory (tt) Nhấp vào nút dùng ñể chọn sub folder D:\03CT\ KienTuan Thiết kế web Khoa CNTT 25 Thiết kế web Khoa CNTT 26 Bước 5: Tải lên server thử nghịêm lần cuối Tạo virtual Directory (tt) Dùng tên KienTuan tên trang web với ñiều kiện Documents KienTuan Properties phải có chứa trang web ñó Mua tên miền – Tên miền = Tên website – Tên ngắn – Gợi nhớ – Dễ ñọc, không gây nhầm lẫn – Thể ñược tên công ty nhãn hiệu công ty Thuê chỗ hosting Tải lên thử nghiệm Thiết kế web Khoa CNTT 27 Thiết kế web Mua tên miền Khoa CNTT 28 Thuê chỗ hosting Hệ ñiều hành Dung lượng Băng thông Ngôn ngữ hỗ trợ Hệ quản trị CSDL hỗ trợ Email POP3 SSL … Thiết kế web Khoa CNTT 29 Thiết kế web Khoa CNTT 30 Windows hosting Linux hosting http://www.tranquang.vn Thiết kế web Khoa CNTT 31 Thiết kế web Các trang web mạng cho free Các trang web mạng cho free – www.somee.com – www.freewebpage.org 105MB 3GB monthly bandwidth FTP access ASP, ASP.NET MS Access Databases Dạng ñịa chỉ: http://user.somee.com • • • • • • – www.webng.com • • • • • Thiết kế web 150MB FTP access 500MB/m Upload: 10Files (max: 8MB) Linux http://user.freewebpage.org/ – www.freespaces.com 350MB 10GB/m ASP MS Access http://user.webng.comKhoa www.webng.com/user CNTT 33 Tên miền + Hosting Free • • • • • Thiết kế web 50MB 1,5GB/m Upload: 10files (max: 8MB) No FTP access http://user.freespaces.com/ www.freespaces.com/user34 Khoa CNTT ðưa ðưa website lên mạng Internet Freespaces.com Thiết kế web 32 Tên miền + Hosting Free Tên miền + Hosting Free • • • • • • Khoa CNTT Cách I: Dùng tiên ích nhà cung cấp web hosting Vào www.freespaces.com ->Login: Khoa CNTT 35 Thiết kế web Khoa CNTT 36 ðưa ðưa website lên mạng Internet ðưa ðưa website lên mạng Internet Copy file từ máy user lên máy chủ Thiết kế web Khoa CNTT 37 ðưa ðưa website lên mạng Internet Khoa CNTT Khoa CNTT 38 ðưa ðưa website lên mạng Internet Cách 2: Dùng chương trình FTP Dùng Core FTP Lite (WS FTP, FTP Cute,…) Thiết kế web Thiết kế web Core FTP Lite: Menu: File->connect: 39 Thiết kế web Khoa CNTT 40 Thử nghịêm lần cuối ðưa ðưa website lên mạng Internet Thử trang nhiều cách kết nối khác Thử trang tình trạng mức ñộ truy cập cao (giờ cao ñiểm) Thử trang với nhiều dạng người dùng khác nhiều loại máy tính với hình khác Thử lại (Test, test and test!!!) ðánh giá chung kết Thiết kế web Khoa CNTT 41 Thiết kế web Khoa CNTT 42 Bước 6: Duy trì hoạt ñộng quản lý website Ai quản lý website Hàng ngày cần ñưa thông tin gì? – Website cần ñược cập nhật thông tin ñể ñọc giả cảm nhận ñược – Ghi thời gian cập nhật, số người truy cập… Liên kết trang, quảng cáo – Tạo liên kết ñến 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í: Thuê ñặt logo, quảng cáo, Thu phí thành viên, … Thiết kế web Khoa CNTT 43 Thiết kế web Khoa CNTT 44 ... quán Các trang thành viên Thiết kế web Khoa CNTT 13 Thiết kế giao diện - frame Thiết kế web Khoa CNTT Thiết kế web Khoa CNTT 14 Thiết kế giao diệndiện- Table within a table 15 Thiết kế web Khoa... nội dung website => website có trang Chọn lựa cách thiết kế: Dạng bảng Dạng khung Dạng Templates, Masterpage Phác thảo sơ ñồ website Thiết kế web Khoa CNTT 11 Thiết kế web Khoa CNTT 12 Bước 3:... 38 ðưa ðưa website lên mạng Internet Cách 2: Dùng chương trình FTP Dùng Core FTP Lite (WS FTP, FTP Cute,…) Thiết kế web Thiết kế web Core FTP Lite: Menu: File->connect: 39 Thiết kế web Khoa CNTT