Thiết kế web cơ bản

HỌC VIỆN CƠNG NGHỆ BƢU CHÍNH VIỄN THƠNG BÀI GIẢNG PT IT THIẾT KẾ WEB CƠ BẢN THIẾT KẾ VÀ SÁNG TẠO ĐA PHƢƠNG TIỆN T C GIẢ THS BÙI THỊ THU HUẾ Hà nội - 2014 LỜI NÓI ĐẦU Giáo trình “Thiết kế web bản” dùng cho sinh viên tham khảo, thuộc lĩnh vực công nghệ Đa phương tiện, với hai đơn vị học trình Nội dung tài liệu đề cập (i) Tổng quan website thiết kế website; (ii) Thiết kế giao diện website; (iii) Công nghệ phát triển website Trong vài năm lại đây, giáo trình thiết kế web trình bày cho sinh viên đại học công nghệ thông tin Nội dung giáo trình liên quan đến thiết kế tương tác, thiết kế giao diện phần đề cập đến kĩ thuật lĩnh vực thiết kế website Tài liệu đánh số chương mục theo chữ số Ả rập Một số hình vẽ bảng biểu chương có giá trị minh hoạ Một số hình vẽ trích từ tài liệu tham khảo, để tiện đối chiếu có thơng tin sâu IT Nội dung trình bày vấn đề lĩnh vực website thiết kế website, số nguyên lý nguyên tắc thiết kế website đảm bảo khả sử dụng thói quen người dùng Nội dung tài liệu tập trung vào sở lý thuyết thiết kế giao diện website Do nội dung cần trình bày liên quan kĩ thuật lập trình, dành cho sinh viên chuyên ngành thiết kế, nên số kiến thức kỹ thuật dừng lại mức nhất, đủ để sinh viên tạo lên website mã nguồn mở Trong chương có thuật ngữ thích Tiếng Anh giúp đọc giả hiểu rõ từ gốc sử dụng PT Nội dung website, sản phẩm đa phương tiện tương tác gắn liền với công nghệ Một số thông tin liên quan đến kĩ thuật, thiết bị có nghĩa thời đoạn, mang tính minh họa Sinh viên sử dụng thiết bị phần mềm tương đương để thực xử lí liệu đa phương tiện Tác giả xin chân thành cám ơn cán Viện Công nghệ thông tin truyền thơng CDIT, Học viện Cơng nghệ bưu viễn thơng PTIT trợ giúp để hồn thành tài liệu MỤC LỤC MỤC LỤC DANH MỤC HÌNH VẼ DANH MỤC BẢNG BIỂU CHƢƠNG TỔNG QUAN 10 1.1 Tổng quan website thiết kế website 10 Các thuật ngữ khái niệm 10 1.1.2 Lịch sử hình thành phát triển công nghệ web 11 1.1.3 Những công nghệ phát triển web 16 1.1.4 Phân loại website 23 1.1.5 Quy trình phát triển website 27 1.1.6 Những vấn đề liên quan đến thiết kế website 33 1.2 IT 1.1.1 Các nguyên lý nguyên tắc thiết kế giao diện website 35 1.2.1 Mục tiêu thiết kế giao diện website 35 1.2.2 Các nguyên lý nguyên tắc đảm bảo khả sử dụng 36 1.2.3 Những hướng dẫn thiết kế website đảm bảo trải nghiệm người dùng 47 Đánh giá giao diện website 52 PT 1.3 1.3.1 Mục đích đánh giá 52 1.3.2 Các phương pháp đánh giá 52 1.4 Bài tập 60 CHƢƠNG THIẾT KẾ GIAO DIỆN WEBSITE 61 2.1 Tổ chức điều hƣớng website 61 2.1.1 Tổ chức website 61 2.1.2 Điều hướng website 72 2.1.3 Site map 90 2.2 Thiết kế giao diện Website 97 2.2.1 Trang 97 2.2.2 Dàn trang 105 2.2.3 Văn 116 2.2.4 Màu sắc 128 2.2.5 Hình ảnh 138 2.2.6 Các thành phần đa phương tiện khác 144 2.3 Bài tập 151 CHƢƠNG CÔNG NGHỆ PHÁT TRIỂN WEBSITE 152 3.1 Phát triển website với mã nguồn mở 152 3.1.1 Khái niệm mã nguồn mở 152 3.1.2 Giới thiệu mã nguồn mở cho phát triển website 152 3.1.3 Phát triển website với Wordpress 154 3.2 HTML 157 3.2.1 Tổng quan HTML 157 3.2.2 Một số thẻ HTML 158 3.2.3 Danh sách bảng HTML 160 3.2.4 Tạo liên kết HTML 168 3.2.5 Chèn thành phần trang vào HTML 172 3.2.6 Giới thiệu HTML5 175 3.3 CSS 176 Tổng quan CSS 176 3.3.2 Các thành phần CSS 176 3.3.3 Định dạng văn với CSS 183 3.3.4 Giới thiệu CSS3 187 3.4 IT 3.3.1 JavaScript 190 Cơ JavaScript 190 3.4.2 Nhúng JavaScript vào trang web 191 3.4.3 Sự kiện với JavaScript 194 3.4.4 Xử lý với nhiều trình duyệt 194 PT 3.4.1 3.5 Bài tập 196 TÀI LIỆU THAM KHẢO 197 PHỤ LỤC 198 PHỤ LỤC 209 DANH MỤC HÌNH VẼ Hình 1-1 Mơ hình Client – Server Website 17 Hình 1-2 Tài liệu mẫu cấu trúc HTML 18 Hình 1-3 Ví dụ CSS 19 Hình 1-4 Ví dụ cấu trúc JavaScript HTML 19 Hình 1-5 Ví dụ Plugin HTML 20 Hình 1-6 Tổng quan CGI 21 Hình 1-7 Trang web hướng văn 24 Hình 1-8 Trang web thiết kế GUI 25 Hình 1-9 Thiết kế Web ẩn dụ 25 Hình 1-10 Trang web thực nghiệm 25 Hình 1-11 Sơ đồ cấu trúc website 30 IT Hình 1-12 Phác thảo khối trang chủ 31 Hình 1-13 Thiết kế trang chủ 32 Hình 1-14 Sắp xếp liệt kê 37 Hình 1-15 Hệ thống phân cấp sâu, không đảm bảo nguyên tắc 3-CLICK 38 Hình 1-16 Ví dụ trình tải trang web trình duyệt (Nguồn: Web Design: 40 PT Hình 1-17 Khoảng cách độ rộng mục tiêu 41 Hình 1-18 Mục tiêu bên trái yêu cầu nhấp chuột vào vị trí đặt liên kết (Firefox); Mục tiêu bên phải có khơng gian điểm ảnh nhấp chuột lớn (Apple) 42 Hình 1-19 Giao diện FreshBooks nhóm đối tượng tương tự vào nhóm 43 Hình 1-20 Sự cố xảy người dùng nhấn nhầm nút 43 Hình 1-21 Các điểm Magic pixel hình 44 Hình 1-22 Tương phản chữ màu 44 Hình 1-23 Lựa chọn màu trắng để làm bật nội dung 46 Hình 1-24 Kích thước hộp search Google 47 Hình 1-25 Kích thước hộp Search Apple 47 Hình 1-26 Laber đặt phía 48 Hình 1-27 Ứng dụng chuyển động thị giác thiết kế 48 Hình 1-28 Giao diện người dùng đẹp tạo ấn tượng 49 Hình 1-29 Liên kết website ln để màu xanh 50 Hình 1-30 Sử dụng khơng gian trắng thiết kế website 51 Hình 1-31 Người dùng khơng quan tâm đến quảng cáo 51 Hình 1-32 Nhận dạng trang chủ 56 Hình 1-33 Lệnh Ping xác định đáp ứng máy chủ 59 Hình 1-34 Báo cáo chất lượng website cơng cụ đánh giá 59 Hình 2-1 Thuần tuyến tính 61 Hình 2-2 Thiết kế tương tác với hình thức tuyến tính 62 Hình 2-3 Tuyến tính thay 62 Hình 2-4 Tuyến tính tùy chọn 62 Hình 2-5 Tuyến tính ngắn trang 63 Hình 2-6 Lưới 63 Hình 2-7 Sắp xếp mặt hàng theo dạng lưới 64 Hình 2-8 Cấu trúc hẹp 64 IT Hình 2-9 Cấu trúc rộng 65 Hình 2-10 Cấu trúc yêu cầu tìm ngược 65 Hình 2-11 Cấu trúc phân cấp website đơn giản 66 Hình 2-12 Cấu trúc phân cấp website với liên kết quay lại 67 Hình 2-13 Tổ chức lưới đầy đủ 67 PT Hình 2-14 Hình thức hỗn hợp 68 Hình 2-15 Tổ chức dạng kết hợp tuyến tính 68 Hình 2-16 Cấu trúc hub and spoke cấu trúc gần giống 69 Hình 2-17 Thuần web 69 Hình 2-18 Cấu trúc website từ viễn cảnh người dùng 70 Hình 2-19 Đường dẫn website thực tế phức tạp 71 Hình 2-20 Phân loại điều hướng 73 Hình 2-21 Khu vực điều hướng trang chủ 74 Hình 2-22 Ba loại kết hợp điều hướng điều hướng vị trí 75 Hình 2-23 Điều hướng vị trí từ menu 75 Hình 2-24 Điều hướng nhúng thẳng đứng 76 Hình 2-25 Điều hướng theo ngữ cảnh 76 Hình 2-26 Điều hướng liên kết nhúng với định dạng nội dung khác 77 Hình 2-27 Điều hướng liên kết nhúng với liên kết website khác 77 Hình 2-28 Điều hướng liên kết liên quan 78 Hình 2-29 Liên kết nhanh đặt menu drop – down 79 Hình 2-30 Điều hướng footer 80 Hình 2-31 Điều hướng tiện ích trang Vitaminshoppe 81 Hình 2-32 Liên kết điều hướng trang Google 81 Hình 2-33 Điều hướng sử dụng liên kết logo website Apple.com 82 Hình 2-34 Lựa chọn quốc gia website 83 Hình 2-35 Lựa chọn quốc gia Google News 83 Hình 2-36 Điều hướng liên kết nội trang 84 Hình 2-37 Xác định vị trí người dùng qua trang nhãn 85 Hình 2-38 Ví dụ thước đo độ sâu mơ tả nhãn trang 86 Hình 2-39 Liên kết chép 88 Hình 2-40 Màn hình phân bố cho điều hướng trái 89 IT Hình 2-41 Điều hướng phải 89 Hình 2-42 Ví dụ vị trí đặt điều hướng site map 91 Hình 2-43 Site map văn 91 Hình 2-44 Site map trình bày dạng bảng 92 Hình 2-45 Sử dụng biểu tượng cho mô tả site map văn 92 PT Hình 2-46 Site map dạng Flowchart 93 Hình 2-47 Site map đồ họa xếp dạng hình trịn 93 Hình 2-48 Site map đồ họa dạng 3D 94 Hình 2-49 Site map đồ họa ẩn dụ 94 Hình 2-50 Thiết kế site map dạng menu drop down 95 Hình 2-51 Site map có chức đánh dấu vị trí người dùng 95 Hình 2-52 Trình duyệt hiển thị tất trùy chọn 97 Hình 2-53 Top trình duyệt phổ biến ngày 98 Hình 2-54 Đo không gian Canvas 100 Hình 2-55 Trang chủ thể qua cấu trúc layout 102 Hình 2-56 Các thành phần trang web 104 Hình 2-57 Tỷ lệ vàng 106 Hình 2-58 Tỷ lệ vàng mối quan hệ số 106 Hình 2-59 Hình xốy ốc tỷ lệ vàng 107 Hình 2-60 Trang twitter áp dụng tỷ lệ vàng thiết kế 107 Hình 2-61 Tỷ lệ 1/3 thiết kế layout 108 Hình 2-62 Nguyên tắc tỷ lệ 1/3 áp dụng cho xác định vị trí đặt logo website 109 Hình 2-63 Looking room áp dụng hiệu thiết kế website 110 Hình 2-64 Looking room áp dụng khơng hiệu thiết kế website 110 Hình 2-65 Bố cục tam giác áp dụng vào thiết kế layout 111 Hình 2-66 Sắp xếp bố cục cân đối xứng trang chủ 112 Hình 2-67 Cân không đối xứng thiết kế layout 113 Hình 2-68 Hệ thống lưới 960 với 12 cột 114 Hình 2-69 Thiết kế hệ thống lưới 960, 12 cột cho trang web 114 Hình 2-70 Hệ thống lưới 960 với 16 cột 115 Hình 2-71 Khoảng trắng website 115 Hình 2-72 Khoảng trắng chủ động bị động 116 IT Hình 2-73 Font chữ an tồn phù hợp với hệ điều hành Mac OS Windows 117 Hình 2-74 Một số kiểu font chữ serif 118 Hình 2-75 Font chữ đại sử dụng làm tiêu đề tạp chí 119 Hình 2-76 Slab serif sử dụng trang pallian creative 119 Hình 2-77 Phông chữ Sans serif Serif dùng cho nội dung văn 120 PT Hình 2-78 Trang web sử dụng sans serif cho tiêu đề serif cho nội dung 120 Hình 2-79 Font chữ handwritten 121 Hình 2-80 Sử dụng phông chữ viết tay để gây ý 121 Hình 2-81 Font chữ Novelty 122 Hình 2-82 Thiết kế trang Hype nation 122 Hình 2-83 Các font chữ Dingbat 123 Hình 2-84 Kích thước chữ 123 Hình 2-85 Trình bày cỡ chữ khác trang web 124 Hình 2-86 Ví dụ kerning 125 Hình 2-87 Ví dụ letter spacing 125 Hình 2-88 Ví dụ leading 126 Hình 2-89 Một số lỗi sử dụng lề hai bên 126 Hình 2-90 Vịng trịn màu 128 Hình 2-91 Sử dụng màu đỏ làm màu chủ đạo trang web 131 Hình 2-92 Màu đỏ sử dụng tạo điểm nhấn trang web 131 Hình 2-93 Màu cam sử dụng tạo ý trang web 132 Hình 2-94 Màu vàng sử dụng website 132 Hình 2-95 Màu xanh sử dụng trang web thể tự nhiên 133 Hình 2-96 Sử dụng màu xanh dương thiết kế trang web 134 Hình 2-97 Màu tím sử dụng màu chủ đạo trang web 134 Hình 2-98 Sử màu đen cho trang web 135 Hình 2-99 Màu trắng tạo hiệu tương phản tốt trang web 135 Hình 2-100 Màu xám sử dụng phổ biến website 136 Hình 2-101 Màu nâu sử dụng thiết kế web 137 Hình 2-102 Sự khác hình ảnh bipmat vector 139 Hình 2-103 (a) Dạng gif hiển thị suốt, (b) Dạng gif hiển thị hình ảnh động 140 Hình 2-104 So sánh định dạng hình ảnh 141 IT Hình 2-105 Website The Bam Creative 142 Hình 3-1 Thống kê mã nguồn mở sử dụng website 152 Hình 3-2 Giao diện DashBroad 155 Hình 3-3 Chú giải định dạng danh sách định nghĩa HTML 162 Hình 3-4 Danh dách theo thứ tự với thẻ

163 PT Hình 3-5 Trang web minh họa danh sách cách thức khác 164 Hình 3-6 Bảng đơn giản – tồn liệu nằm dòng 167 Hình 3-7 Dùng thẻ để bổ sung tiêu đề bảng 168 Hình 3-8 Các site đơn vị PTIT với liên kết URL kèm theo 169 Hình 3-9 Danh sách nhảy trang nằm đầu trang sử dụng liên kết đến dấu neo đặt tên phía hồ sơ 170 Hình 3-10 Trang web có chèn hình ảnh logo 174 Hình 3-11 Mơ hình tổ chức liên kết với file CSS bên 180 Hình 3-12 Cấu trúc Media queries CSS3 187 Hình 3-13 Ví dụ nhúng JavaScript vào HTML 191 Hình 3-14 Nhúng JavaScript vào trình xử lý kiện 193 DANH MỤC BẢNG BIỂU Bảng 1.1 Đo khả sử dụng 54 Bảng 2.1 Các vấn đề thiết kế website 96 Bảng 2.2 Không gian cavas nhỏ cho độ phân giải hình khác 100 Bảng 2.3 Bit số lượng màu 129 Bảng 2.4 Màu sắc HTML 130 Bảng 2.5 Gợi ý sử dụng định dạng Audio 147 Bảng 3.1 Bảng thuộc tính thẻ BODY 159 Bảng 3.2 Bảng thẻ định dạng văn 160 Bảng 3.3 Bảng thẻ tạo bảng 165 Bảng 3.4 Ý nghĩa tham số thẻ định dạng bảng biểu 166 Bảng 3.5 Ý nghĩa tham số thẻ liên kết 169 IT Bảng 3.6 Thuộc tính thẻ cho màu liên kết 172 Bảng 3.7 Tham số thẻ hình ảnh 173 Bảng 3.8 Đơn vị chiều dài CSS 178 Bảng 3.9 Đơn vị màu sắc CSS 179 Bảng 3.10 Bảng media type sử dụng CSS3 187 PT Bảng 3.11 Bảng media feature sử dụng CSS3 188 Bảng 3.12 Bảng thuộc tính giá trị web fonts cho CSS3 189 Bảng 3.13 Danh sách kiện JavaScript 194 _ Chất lƣợng nội dung: Có đủ trả lời chi tiết câu hỏi đơn giản ngƣời dùng hay khơng? Có Khơng Có đủ chi tiết để trả lời câu hỏi phức tạp ngƣời dùng khơng? Có Khơng Nội dung có xuất xác trung thực khơng? Có Khơng IT Nếu khơng, mơ tả để chứng thực cho điều _ Có lỗi tả đƣợc hiển thị rõ ràng website khơng? Có Khơng PT Có lỗi tả nghiêm trọng nút bấm tiêu đề khơng? Có Khơng Có lỗi ngữ pháp đƣợc hiển thị rõ ràng website khơng? Có Khơng Nếu có mơ tả lỗi này: _ Mô tả phong cách nội dung trình bày website (e.g., vui tƣơi, kinh doanh, nghiêm trọng, hài hƣớc, ) _ Phong cách có phù hợp với nội dung trình bày khơng? Có Khơng Nếu khơng, lý sao: _ Nội dung có đƣợc cập nhật website khơng? 202 Có Khơng Cập nhật có cần thiết khơng? Có Khơng _ TECHNOLOGY USAGE HTML: kiểm tra lỗi http://validator.w3.org Báo cáo kết Báo cáo kết IT CSS: Kiểm tra lỗi http://jigsaw.w3.org/css-validator/ PT TRÌNH DUYỆT HỖ TRỢ Website có làm việc với trình duyệt Netcape Mozilla không? phiên nào? _ Website có làm việc với trình duyệt Internet Explorer? Ở phiên nào? _ Website có làm việc với trình duyệt Opera? Ở phiên nào? _ Xác trình duyệt khác đƣợc hỗ trợ? _ Website có định nghĩa trình duyệt mà khơng làm việc khơng? Có Khơng Nếu tồn vấn đề tƣơng thích, có giải thích website khơng? Có Khơng ĐIỀU HƢỚNG Vị trí yếu tố điều hƣớng: 203 Điều hƣớng (chọn nhiều): Trên đỉnh trang Dưới trang Trái Phải Điều hƣớng thứ cấp (chọn nhiều): Trên đỉnh trang Dưới trang Trái Phải Điều hƣớng cấp ba (Chọn nhiều): Trên đỉnh trang Dưới trang Trái Phải IT Website có sử dụng liên kết hỗ trợ khơng? Có Khơng Tính thống vị trí điều hƣớng: [ (ngẫu nhiên )–5 (rất ổn định) ] _ PT Bình luận vị trí điều hƣớng: _ Có sử dụng hệ thống phân cấp điều hƣớng không? Mô tả: _ Số lƣợng trung bình thành phần điều hƣớng trang: _ Số lƣợng trung bình thành phần điều hƣớng cụm điều hƣớng: _ Có dạng thay điều hƣớng đƣợc cung cấp không? Mô tả: _ Có nút điều hƣớng kiểu ―back‖ website khơng? Có Khơng Có nút ―back-to-top‖ cho trang dài website khơng? Có Khơng Nhãn điều hƣớng có rõ ràng khơng: [ (khơng rõ ràng)–5 (rất rõ ràng) ] 204 _ Có ý phạm vi sử dụng cho nhãn khơng? Có Khơng Tổ chức nhãn điều hƣớng gì? Thứ tự ABC Ngẫu nhiên Khác IT Thông tin phản hồi điều hƣớng đƣợc làm việc với hình thức nào? Loại Font Kích thước Font Màu sắc Vị trí Trạng thái ấn Gạch Âm Other Phản hồi điều hƣớng có hữu ích khơng? Có Khơng PT Nếu kết liên kết file download (ví dụ PDF), kích thƣớc file download có rõ ràng khơng? Có Khơng Các màu liên kết có biến đổi từ màu mặc định xanh, đỏ tím khơng? Có Khơng Nếu có, kết hợp màu có hợp lý khơng? _ Màu sắc liên kết có sử dụng thống trang web khơng? Có Không Làm để xác định đƣợc vị trí tại? URL Nhãn trang Thước đo độ sâu Màu sắc Phong cách thiết kế TÌM KIẾM 205 Website có hệ thống tìm kiếm nội khơng? Có Khơng Làm để truy cập vào tìm kiếm? Bên trang Trang riêng Cả hai Tìm kiếm tích hợp với thiết kế nhƣ nào? Loại tìm kiếm Văn Tham số Cả hai IT Nếu sử dụng tham số, mô tả tham số tìm kiếm: Tìm kiếm theo định dạng Đơn giản Nâng cao Sự rõ ràng hình thức tìm kiếm —[1 (tồi) –5 (tuyệt vời)] _ PT Có hƣớng dẫn cho hình thức tìm kiếm khơng? Có Khơng TÌM KIẾM Website có mơ tả site map khơng? Có Khơng Website có cần site map khơng? Có Không Nguyên nhân: _ Phƣơng pháp truy cập đến site map? Được liên kết tất trang Liên kết đặt trang Sử dụng đến hệ thống tìm kiếm Phạm vi site map? Tất Site 206 Một số trang Các phần Không xác định phạm vi Định dạng loại site map? Đồ họa Văn Site map động hay tĩnh? Tĩnh Động Bình luận site map: PHÂN PHỐI Trang lớn website gì? Bao nhiêu byte? _ IT Kích thƣớc trung bình trang web website bao nhiêu? _ PT Thời gian tải trang trung bình trang lớn bao nhiêu? Modem speeds (56Kbps) _ ISDN (128Kbps) Cable (600Kbps +) DSL/T1/Ethernet (1Mbps +) _ Thời gian tải trang thực có tƣơng tự nhƣ tính tốn khơng? Có Khơng Nếu khơng, thời gian thực tế bao nhiêu? _ CHẤM ĐIỂM CUỐI CÙNG Chấm điểm —[ (tồi) –5 (rất tuyệt vời) ] _ _ Lý lại cho điểm nhƣ vậy: _ _ 207 208 PT IT PHỤ LỤC HƯỚNG DẪN CÀI ĐẶT WORDPRESS TRÊN LOCALHOST Các công cụ chuẩn bị  CuteFTP : Phần mềm trao đổi liệu lên hosting/server : phần mềm hỗ trợ upload tập tin, thư mục máy tính lên hosting bạn để hoạt động PT IT website  XAMPP: Phần mềm tạo localhost  Phần mềm chỉnh sửa code: Notepad++, hỗ trợ bạn viết code sửa code tốt mà lại nhẹ, dễ sử dụng Cài đặt localhost với XAMPP  Giới thiệu XAMPP: gói cài đặt localhost tích hợp tất thành phần cần thiết : Apache, MYSQL, PHP, Perl  Bản XAMPP for Windows 1.8.2 & 1.8.3 với thông số sau: Các thành phần XAMPP Apache 2.4.9, MySQL 5.6.16, PHP 5.5.11, phpMyAdmin 4.1.12, OpenSSL 1.0.1, XAMPP Control Panel 3.2.1, Webalizer 2.23-04, Mercury Mail Transport System 4.63, FileZilla FTP Server 0.9.41, Tomcat 7.0.42 (with mod_proxy_ajp as connector), Strawberry Perl 7.0.42 Portable  Yêu cầu hệ thống : XAMPP 1.8.2 (with PHP 5.4): Windows 2003, 2008, 2012, XP, Vista, 7, XAMPP 1.8.3 (with PHP 5.5): (Important: XP or 2003 not supported) 2008, 2012, Vista, 7,  XAMPP chương trình tạo máy chủ Web (Web Server) máy tính cá nhân (Localhost) tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server 209 PT IT công cụ PHPmyadmin Xampp download sử dụng miễn phí tại: https://www.apachefriends.org/download.html  Cách cài đặt sau:  Chạy chương trình cài đặt XAMPP Installer, xuất bảng chọn ngôn ngữ, chọn English nhấn Ok  Khi xuất bảng Welcome to the Xampp Setup Wizard, nhấn Next  Trong License Agrement chọn I accept the Agreement, nhấn Next  Trong Select Destination Location, chọn nơi cài đặt Xampp Lưu bước nên chọn ổ dĩa khác với ổ dĩa cài Windows để sau dễ cài đặt cấu hình cho Xampp Chọn đường dẫn D:\xampp (cài thư mục xampp ỗ dĩa D), nhấn Next  Trong XAMPP Options, để nguyên mặc định XAMPP nhấn Install 210   Chương trình tiến hành cài đặt sau nhấn Finish để kết thúc việc cài đặt, chương trình hỏi bạn có muốn mở bảng điều khiển Xampp hay khơng, chọn No cần chỉnh thêm vài thông số Thư mục gốc (Web Root) để chứa trang web mặc nhiện Xampp D:\xampp\htdocs Tất Website thư mục chứa Website phải đặt vào thư mục Web Root (htdocs) hoạt động Nếu muốn bạn thay đổi thư mục Web Root, bạn nên tạo thư mục Web Root khác nằm bên ngồi thư mục Xampp để dễ sử dụng Thí dụ tạo thư mục Web Root nằm ổ dĩa D: có tên WWW cách mở File httpd.conf nằm thư mục cài đặt Xampp D:\xampp\apache\conf\ (D:\xampp\apache\conf\httpd.conf) chương trình Notepad chương trình soạn thảo văn Tìm đến dịng DocumentRoot "D:/xampp/htdocs" sửa lại thành DocumentRoot "D:/www" dòng sửa lại thành , Save đóng File lại Lưu dấu sổ / \ đường dẫn phải xác Mở bảng điều khiển chương trình Xampp cách nhấn đúp chuột vào Icon XAMPP Control Panel nằm Desktop Nếu xuất bảngxuất bảng Windows Security Alert chọn Unblock Trong điều khiển Xampp, chọn Start để khởi động Apache MySQL Nhấn vào nút X (góc bên phải) để tắt bảng điều khiển, bạn mở bảng điều khiển lúc cách nhấn chuột biểu tượng Xampp nằm khay hệ thống (góc bên phải hình) PT IT  211  Bây thư mục gốc (Web Root) để chứa trang web D:\www Có thể Copy File thư mục D:\xampp\htdocs vào thư mục D:\www, sau mở chương trình duyệt web (Internet Explorer, Firefox ), ô địa nhập vào: http://localhost lên bảng thông số XAMPP việc cài đặt thành công  Một số lưu sử dụng XAMPP  MYSQL: User: root Password: (khơng có password)  APACHE: Khơng start APACHE đổi cổng mặc định 80 -> 8080( file httpd.config), tắt bật lại APACHE Các bƣớc cài đặt WordPress Localhost Bƣớc 1: PT IT Trước tiên tải WordPress máy (Phiên wordpress 3.9.2 khuyến nghị nên sử dụng wordpress 3.8.1 để đảm bảo tính ổn định) Sau giải nén tập tin tải máy, thấy thư mục tên wordpress Trong thư mục wordpress bao gồm thư mục wp-include, wp-admin, wp-content tập tin php index.php, wp-config-sample.php,… Bƣớc Copy thư mục wordpress vừa giải nén vào thư mục có đường dẫn chứa XAMPP (ví dụ D:/xampp/htdocs ) Bƣớc 3: Tạo database cho website cách truy cập địa http://localhost/phpmyadmin (đảm bảo Apache sever Mysql bảng điều khiển XAMPP start ) 212  Tại bảng điều khiển nhập thông tin để create database:  Tên database : wordpress  Kiểu liệu : utf8-genenal-ci  Ấn button Create để tạo Bƣớc Cài đặt web theo trình tự sau Bật trình duyệt truy cập đường dẫn : http://localhost/wordpress PT IT -  Kích đường dẫn Create a Configuration File để tiếp tục 213 IT  Kích "Let's go ! " để tiếp tục PT  Nhập thông số bao gồm:  Database user Name (tên database vừa create phía )  User Name ( tên quản trị MySQL):mặc định root  Password (mật quản trị Mysql)  Thông số Database Host Table Prefix giữ nguyên  Kích "Run the install" 214 IT PT  Nhập thơng số hình trên:  Site Title : tiêu đề trang web  Username: Tên người quản trị trang web  Password: mật cho tài khoản quản trị  Email: địa email quản trị  Kích Install Wordpress  Đăng nhập thông tin hệ quản trị CMS wordpress tài khoản admin password vừa tạo  Giao diện quản trị CMS: 215 216 PT IT ... đến lĩnh vực website thiết kế website Qua người đọc có nhìn tổng quan lĩnh vực phát triển website, tầm quan trọng thiết kế website vấn đề liên quan đến thiết kế website Thiết kế website không... lĩnh vực website thiết kế website, số nguyên lý nguyên tắc thiết kế website đảm bảo khả sử dụng thói quen người dùng Nội dung tài liệu tập trung vào sở lý thuyết thiết kế giao diện website Do... ? ?Thiết kế web bản? ?? dùng cho sinh viên tham khảo, thuộc lĩnh vực công nghệ Đa phương tiện, với hai đơn vị học trình Nội dung tài liệu đề cập (i) Tổng quan website thiết kế website; (ii) Thiết kế