Giáo trình Thiết kế website (Nghề Thiết kế đồ họa Trung cấp)

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN TRƯỜNG CAO ĐẲNG CƠ ĐIỆN XÂY DỰNG VIỆT XÔ KHOA CÔNG NGHỆ THƠNG TIN VÀ NGOẠI NGỮ GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ WEBSITE NGHỀ: THIẾT KẾ ĐỒ HỌA TRÌNH ĐỘ TRUNG CẤP TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Chương trình khung quốc gia nghề Thiết kế đồ họa xây dựng sở phân tích nghề, phần kỹ thuật nghề kết cấu theo môđun, môn học Để tạo điều kiện thuận lợi cho sở dạy nghề trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo môđun, môn học đào tạo nghề cấp thiết Thiết kế website mơ đun đào tạo nghề biên soạn theo hình thức tích hợp lý thuyết thực hành Trong trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu thiết kế lập trình web nước, kết hợp với kinh nghiệm thực tế sản xuất Mặc dầu có nhiều cố gắng, không tránh khỏi khiếm khuyết, mong nhận đóng góp ý kiến độc giả để giáo trình hồn thiện MỤC LỤC BÀI 1: TỔNG QUAN VỀ WWW-NGÔN NGỮ HTML 10 Lịch sử WWW 13 1.1 Giới thiệu WWW 13 1.2 Giao thức WWW 14 Nhập môn ngôn ngữ HTML 30 2.1 Giới thiệu HTML 30 2.2 Cấu trúc HTML 30 2.3 Các thẻ HTML 31 2.3.3 Thẻ chỉnh nội dung 33 2.3.4 Liên kết 33 2.3.5 Thẻ ảnh 34 2.3.6 Bảng 34 2.3.7 Form 34 2.4 Multimedia, video 44 BÀI 2: KHÁI QUÁT CHUNG THIẾT KẾ WEBSITE 46 Tổng quan 46 1.1 Website ? 46 1.2 Tại doanh nghiệp lại cần website? 46 1.3 Lợi ích có website? 48 1.4 Để website hoạt động, cần gì? 50 1.5 Qui trình thiết kế website? 50 1.6 Cần chuẩn bị gì? 50 1.7 Thời gian & chi phí cần đầu tư cho website? 50 1.8 Các yêu cầu tối thiểu Webiste? 51 1.9 Tên miền gì? 51 Phân loại website 52 Bố cục giao diện Web 53 Các mơ hình thiết kế Web 56 4.1.Cửa hàng, siêu thị điện tử 56 4.2 Đấu giá trực tuyến (online aution) 56 4.3 Sàn giao dịch B2B 56 4.4 Cổng thông tin portal 56 4.5 Mơ hình giá động (dynamic pricing models) 56 4.6 Website thông tin phục vụ việc quảng bá, quảng bá 57 4.7 Website giới thiệu thông tin doanh nghiệp 57 Các bước thiết kế trang web 57 BÀI 3: PHẦN MỀM MACROMEDIA DREAMWEAVER 61 Giới thiệu MacroMedia Dreamweaver 61 1.1 Dreamweaver gì? 61 1.2 Tính Dreamweaver 62 1.3 Cài đặt 62 1.4 Kích hoạt sử dụng Dreamweaver CS6 67 Trang văn trang 70 2.1 Giới thiệu CSS 70 2.2 Các lệnh CSS 73 2.3 Class id 82 2.4 Các thuộc tính khác 84 Bảng biểu (Table) trang khung (Frame) 101 3.1 Bảng biểu (Table) 101 3.2 Các trang khung (IFRAME) 114 Multimedia trang web 116 4.1 Multimedia gì? 116 4.2 Trình duyệt hỗ trợ 116 Các yếu tố động trang 116 Khung nhập – Form 116 6.1 Định nghĩa sử dụng 116 6.2 Cấu trúc 117 6.3 Ví dụ 117 6.4 Thuộc tính 117 Liên kết 120 7.1 Tạo thẻ liên kết 120 7.2 Liên kết neo (Anchor Link) 121 BÀI 4: XÂY DỰNG WEB ĐỘNG VỚI NGÔN NGỮ MÃ NGUỒN MỞ 122 Tổng quan Ngôn ngữ mã nguồn mở 122 1.1 Giới thiệu mã nguồn mở 122 Thao tác ngôn ngữ mã nguồn mở 125 2.1 Web server 125 2.2 Wordpress 135 Xử lý web mã nguồn mở 152 3.1 Cách đăng Post 152 3.2 Ý nghĩa chức trang tạo Post 161 3.3 Cách tạo Page WordPress 170 3.4 Menu WordPress 187 3.5 Theme WordPress 194 3.6 Plugin 200 3.7 Quản trị người dùng (users) WordPress 209 BÀI TẬP MỞ RỘNG 217 TÀI LIỆU THAM KHẢO 222 MƠ ĐUN: THIẾT KẾ WEBSITE Mã mơ đun: MĐ 18 Thời gian thực mô đun: 90 Giờ; (Lý thuyết: 27 giờ; Thực hành: 60 giờ; Kiểm tra: giờ) I Vị trí tính chất mơ đun: - Vị trí: Mơ đun bố trí sau sinh viên học xong môn học chung, môn sở chuyên ngành đào tạo chun mơn nghề - Tính chất: Là mô đun chuyên môn nghề II Mục tiêu mô đun: - Về kiến thức + Trình bày cấu trúc Website; + Trình bày quy trình xây dựng phát triển Website; + Trình bày vấn đề liêu quan đến an toàn bảo mật Website - Về kỹ năng: Tạo Website dựa ngôn ngữ HTML, CSS, Javascrip, XML ; - Về lực tự chủ trách nhiệm + Biết sử dụng kiến thức đồ họa để thiết kế trang Web + Cần cù, chủ động học tập, đảm bảo an toàn học tập III Nội dung mô đun: Nội dung tổng quát phân phối thời gian: Số TT Tên chương mục Tổng số Bài 1: Tổng quan WWWNgôn ngữ HTML Lịch sử www Nhập môn ngôn ngữ HTML Bài 2: Khái quát chung thiết kế Website Tổng quan Phân loại Website Bố cục website Các mơ hình thiết kế Web Các bước thiết kế trang web Bài 3: Phần mềm MacroMedia Dreamweaver Giới thiệu MacroMedia Dreamweaver Thời gian Thực hành, thí Lý nghiệm, thuyết thảo luận, Bài tập 2 1 4 1 2 1 1 0 1 34 26 1 Kiểm tra Trang văn trang Bảng biểu (Table) trang khung (Frame) Multimedia trang web Các yếu tố động trang Khung nhập – Form Liên kết Bài 4: Xây dựng Web động với ngôn ngữ mã nguồn mở Tổng quan Ngôn ngữ mã nguồn mở Thao tác ngôn ngữ mã nguồn mở Xử lý web mã nguồn mở Cộng 4 1 3 8 44 1 1 14 7 28 4 15 10 35 30 90 27 60 * Ghi chú: Thời gian kiểm tra tích hợp lý thuyết với thực hành tính vào thực hành Nội dung chi tiết Bài 1: Tổng quan WWW-Ngôn ngữ HTML Thời gian: * Mục tiêu bài: - Trình bày lịch sử WWW; - Trình bày cấu trúc trang HTML * Nội dung bài: Lịch sử www Nhập môn ngôn ngữ HTML Bài 2: Khái quát chung thiết kế Website Thời gian: * Mục tiêu bài: - Trình bày yêu cầu thiết kế giao diện; - Xác định nguồn tài nguyên thông tin; - Biết cách tổ chức thơng tin trang chủ; - Có khả phân tích cấu trúc site * Nội dung bài: Tổng quan Phân loại Website Bố cục website Các mơ hình thiết kế Web Các bước thiết kế trang web Bài 3: Phần mềm MacroMedia Dreamweaver Thời gian: 34 * Mục tiêu bài: -Trình bày chế độ hiển thị trang Web - Đưa File vào Web - Tạo bảng biểu Frame - Tạo ứng dụng bảng liên kết trang Web - Xây dựng ứng dụng Multimedia - Sử dụng tốt công cụ hỗ trợ thiết kế Web * Nội dung bài: Giới thiệu MacroMedia Dreamweaver Trang văn trang Bảng biểu (Table) trang khung (Frame) Multimedia trang web Các yếu tố động trang Khung nhập – Form Liên kết Bài 4: Xây dựng Web động với ngôn ngữ mã nguồn mở Thời gian: 44 * Mục tiêu bài: - Cài đặt, cấu hình IIS Xampp - Sử dụng tốt joomla, Drupal, nukeviet… - Sử dụng tốt đối tượng, tiện ích ngơn ngữ mã nguồn mở * Nội dung bài: Tổng quan Ngôn ngữ mã nguồn mở Thao tác ngôn ngữ mã nguồn mở Xử lý web mã nguồn mở IV Điều kiện thực mô đun: Phịng học chun mơn hóa/ Nhà xưởng: Phịng học đủ điều kiện để thực mô đun Trang thiết bị máy móc: Máy chiếu(nếu có) Giấy A4, loại giấy Các hình vẽ ví dụ minh hoạ Máy tính Học liệu, dụng cụ, nguyên vật liệu: Bộ tranh giấy phim dùng để dạy mô đun Thiết Kế Web Tài liệu hướng dẫn mô đun Thiết kế Web Tài liệu hướng dẫn học tập thực hành mơ đun Thiết kế Web Giáo trình Mơ đun Thiết kế Web Các điều kiện khác Phần mềm ứng dụng Microsoft office Bảng đen V Nội dung phương pháp đánh giá: Nội dung - Kiến thức: Được đánh giá qua kiểm tra viết, trắc nghiệm đạt yêu cầu sau: Định hướng kết cách thiết kế Web site Biết cách tổ chức thơng tin trang chủ Có khả thiết kế giao diện Có khả xác định nguồn tài nguyên thông tin Biết cách tổ chức thơng tin trang chủ Có khả phân tích cấu trúc site - Kỹ Đánh giá kỹ thực hành sinh viên thực hành Thiết kế Web đạt yêu cầu sau: Có khả đưa File vào Web Có khả tạo bảng biểu Frame Cài đặt, cấu hình IIS ASP Sử dụng tốt đối tượng, tiện ích ASP Xây dựng ứng dụng Multimedia Sử dụng tốt công cụ hỗ trợ thiết kế Web - Năng lực tự chủ trách nhiệm: Cần cù, chủ động học tập, đảm bảo an toàn học tập Phương pháp: Kiểm tra định kỳ, kiểm tra thường xuyên kiểm tra kết thúc mô đun qua tự luận, trắc nghiệm, tập thực hành thái độ q trình học mơ đun VI Hướng dẫn thực mơ đun: Phạm vi áp dụng chương trình: Chương trình mơ đun sử dụng để giảng dạy nghề Thiết kế đồ họa trình độ cao đẳng Hướng dẫn phương pháp giảng dạy, học tập mô đun: Đối với giáo viên: Sử dụng phương pháp dạy học trực quan, giảng giải, giải thích, hướng dẫn mẫu, theo dõi, uốn nắn Đối với sinh viên: Sinh viên trao đổi với nhau, thực thực hành, rèn luyện để hình thành kỹ Thực tập thực hành giao Những trọng tâm cần ý - Trọng tâm môn học : 1,2,3 Tài liệu cần tham khảo Xây dựng website ngôn ngữ mã nguồn mở BÀI 1: TỔNG QUAN VỀ WWW-NGÔN NGỮ HTML Mã bài: MĐ 18 – 01 Giới thiệu: Bài học nhằm giới thiệu sơ lược lịch sử World Wide Web (www), URL, giao thức HTTP ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language,)Internet dịch vụ Web, môi trường tạo Web, trang web tĩnh web động công cụ tạo Web Mục tiêu: - Hiểu trình bày khái niệm thuật ngữ ngành thiết kế website; - Hiểu trình bày lịch sử WWW; - Hiểu trình bày cấu trúc trang HTML Nội dung  Các khái niệm thuật ngữ Internet gì? Internet hệ thống thơng tin tồn cầu truy nhập cơng cộng gồm mạng máy tính liên kết với Hệ thống truyền thông tin theo kiểu nối chuyển gói liệu (packet switching) dựa giao thức liên mạng chuẩn hóa (giao thức IP) Hệ thống bao gồm hàng ngàn mạng máy tính nhỏ doanh nghiệp, viện nghiên cứu trường đại học, người dùng cá nhân phủ tồn cầu Lợi ích Internet Internet có nhiều lợi ích sống thường ngày:  Đọc báo, xem tin tức Online  Lướt Facebook, xem phim, nghe nhạc trực tuyến  Gửi nhận Mail, tìm kiếm thơng tin mạng  Mua bán, học tập, chí chữa bệnh qua mạng  … Nói tóm lại, Internet mang lại CỰC KỲ tiện ích cho người, cung cấp khối lượng thông tin Khổng Lồ Các cách thức thông thường để truy cập Internet quay số, băng rộng, không dây, vệ tinh qua điện thoại cầm tay Dịch vụ Internet  Web, E-Mail, FTP, hội thoại Website - trang web, trang mạng, tập hợp trang web, thường nằm tên miền tên miền phụ World Wide Web Internet Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Website xây dựng từ tệp tin HTML 10 Cũng có vài trường hợp, khu vực tùy chỉnh liên kết riêng menu Dashboard, có lọt vào mục Tools, Appearance, đa phần nằm Settings nên mò trước Như plugin TinyMCE Advanced có khu vực tùy chỉnh phần Settings, click vào để bắt đầu thiết lập Tất nhiên khơng có plugin có thiết lập giống plugin nên bạn ý đọc kỹ phần tập mò cách sử dụng cho quen Sau tùy chỉnh xong bạn phải ấn nút Save Change để thay đổi có hiệu lực Giai đoạn Kiểm tra Chúng ta vừa cài plugin TinyMCE Advanced tùy chỉnh rồi, biết plugin có tác dụng khu vực soạn thảo nội dung chắn để kiểm tra phải vào phần soạn thảo nội dung mà kiểm tra 208 Lời kết Trong hướng dẫn chi tiết giai đoạn bạn nên làm tiến hành cài plugin vào website WordPress mình, hy vọng với giai đoạn bạn tìm cài plugin phù hợp dành cho bạn Nhưng lưu ý rằng, cài plugin vào mà đôi lúc plugin có xung đột với nhau, nên có số lời khuyên cho bạn là:  bạn Hạn chế cài q nhiều plugin ảnh hưởng đến tốc độ website Không nên cài hai nhiều plugin có chức na ná  Không nên cài plugin chia sẻ nguồn khơng uy tín bảo mật  Ưu tiên tìm cài plugin WordPress.Org  Thường xuyên cập nhật plugin, có phiên thơng báo qua Dashboard bạn cần click cập nhật tự động 3.7 Quản trị người dùng (users) WordPress 209  Khi website WordPress tạo ra, điều khơng có nghĩa có bạn quyền sử dụng quản trị website, mà bạn cịn tạo thêm người dùng (hoặc mở chức tự đăng ký để người khác tự đăng ký (Mở Settings -> General đánh dấu vào “Anyone can register“) thiết lập họ vào nhóm người dùng mà bạn cần Mỗi nhóm người dùng có sẵn WordPress có quyền riêng mà đó, nhóm quyền cao Administrator – phép sử dụng toàn quyền có Dashboard bạn Để lấy ví dụ nhé, giả sử bạn muốn thêm người dùng đăng lên website bạn họ khơng có quyền sửa khác sao? Hoặc người dùng quyền sửa mà khơng có quyền tạo đăng lên website? Đó lúc mà cần sử dụng tính quản trị người dùng có WordPress Nó đơn giản lại mạnh mẽ với độ tùy biến cao, đặc biệt bạn cịn tạo nhóm người dùng với quyền bạn tự thiết lập thông qua plugin 3.7.1 Tạo người dùng (user) quản lý Để tạo thêm người dùng, bạn truy cập vào Dashboard –> Users –> Add New, bạn cần khai báo thông tin cho người dùng muốn tạo Các thông tin khơng có chữ required khơng bắt buộc khai báo 210 Username: Tên đăng nhập người dùng để đăng nhập vào website  E-mail: Email người dùng cần tạo  First: Tên người dùng  Last Name: Họ người dùng  Website: Địa website họ  Password: Thiết lập mật cho họ  Repear Password: Nhập lại mật  Send Password?: Gửi mật username qua email họ (tự động)  Role: Nhóm thành viên cần thiết lập cho người dùng (xem kỹ phần Tìm hiểu nhóm thành viên) Nhập xong thơng tin người dùng, bạn ấn vào nút Add New User để bắt đầu tạo người dùng  Sau tạo xong người dùng, bạn xem danh sách người dùng có website Dashboard –> Users –> All Users 211 Để sửa thông tin người dùng, bạn cần ấn vào tên người dùng cần sửa 3.7.2 Vai trị nhóm người dùng (User Role) Như lúc tạo thêm người dùng bạn thấy, phần Role cho phép bạn chọn năm nhóm người dùng Subscriber, Contributor, Author, Editor, Administrator Vậy ý nghĩa nhóm gì, quyền đặc trưng nhóm sao? Mình giải thích trọn vẹn để bạn hiểu rõ vai trị nhóm người dùng Tổng quan vai trị nhóm Tuy bạn thấy WordPress có nhóm người dùng lúc tạo người dùng mới, thực tính đầy đủ mặc định WordPress có tất nhóm người dùng, bao gồm: Super Admin – Nhóm người dùng cao có quyền quản trị tồn hệ thống thực WordPress có tính tạo mạng website nội tên WordPress MultiUser Ngoài ra, Super Admin có quyền xóa người dùng nhóm Administrator  Administrator – Nhóm người dùng có quyền sử dụng tồn tính có website WordPress, không bao gồm website khác mạng website nội  Editor – Nhóm có quyền đăng viết lên website (publish) quản lý post khác người dùng khác  Author – Nhóm có quyền đăng lên website quản lý post họ  Contributor – Nhóm có quyền viết khơng phép đăng lên mà gửi để xét duyệt (Save as Review) quản lý post họ  Subscriber – Người dùng nhóm quản lý thông tin cá nhân họ Chi tiết vai trị nhóm  212 Nếu giải thích vài chữ bạn hiểu vai trị nhóm, bạn có biết quyền WordPress biểu diễn chữ kiểu “quyen_han”, tức chữ viết thường có dấu “_” để ngăn cách Lý cần bạn hiểu sau dùng plugin để tùy biến quyền nhóm người dùng, nên tốt bạn nên xem qua để hiểu chi tiết quyền nhóm người dùng Dưới bảng chi tiết quyền hạn nhóm người dùng trang hướng dẫn WordPress Tên quyền Supe r Adm in manage_network Y manage_sites Y manage_network _users Y manage_network _plugins Y manage_network _themes Y manage_network _options Y unfiltered_html Y activate_plugins Y Y create_users Y Y (single site) delete_plugins Y Y delete_themes Y Y (single site) Adminis trator Edi tor Auth or Contri butor Subsc riber 213 delete_users Y Y edit_files Y Y edit_plugins Y Y (single site) edit_theme_opti ons Y Y edit_themes Y Y (single site) edit_users Y Y (single site) export Y Y import Y Y install_plugins Y Y (single site) install_themes Y Y (single site) list_users Y Y manage_options Y Y promote_users Y Y remove_users Y Y switch_themes Y Y update_core Y Y (single site) update_plugins Y Y (single 214 site) update_themes Y Y (single site) edit_dashboard Y Y moderate_comm ents Y Y Y manage_categori es Y Y Y manage_links Y Y Y edit_others_post s Y Y Y edit_pages Y Y Y edit_others_page s Y Y Y edit_published_p ages Y Y Y publish_pages Y Y Y delete_pages Y Y Y delete_others_pa ges Y Y Y delete_published _pages Y Y Y delete_others_po sts Y Y Y delete_private_p Y Y Y 215 osts edit_private_post s Y Y Y read_private_pos ts Y Y Y delete_private_p ages Y Y Y edit_private_pag es Y Y Y read_private_pag es Y Y Y edit_published_p osts Y Y Y Y upload_files Y Y Y Y publish_posts Y Y Y Y delete_published _posts Y Y Y Y edit_posts Y Y Y Y Y delete_posts Y Y Y Y Y read Y Y Y Y Y Y Cấp độ nhóm người dùng Ngồi việc biểu diễn quyền hạn thơng qua bảng trên, WordPress cịn sử dụng hệ thống cấp độ từ 01 đến 10 để biểu diễn quyền hạn nhóm người dùng Mặc dù bạn thấy số plugin có cho phép bạn chỉnh quyền theo thang cấp độ thời điểm trở đi, bạn không cần quan tâm tính xóa bỏ khỏi WordPress từ phiên 3.0 q dư thừa 216 BÀI TẬP MỞ RỘNG Thiết kế website theo mẫu sau Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Thiết kế website theo mẫu sau (http://www.flowers.com) 217 Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn) 218 Thiết kế website theo mẫu sau (http://vnexpress.net) 219 Thiết kế website theo mẫu sau (http://www.codeproject.com) 220 Thiết kế website theo mẫu sau (http://www.bttvn.com ) 221 TÀI LIỆU THAM KHẢO Thiết Kế Web Với Dreamweaver – Trường đại học FPT – Nhà xuất Bách Khoa Hà Nội Tự Học Thiết Kế Trang Web Bằng HTML – Đậu Quang Tuấn – Nhà xuất Giao thông vận tải HTML5 Và CSS3: Thiết Kế Trang Web Thích Ứng Giàu Tính Năng – Jermy Osborn & Nhóm AGI Creative – Nhà xuất Bách Khoa Hà Nội 222 ... Website; - Phân loại loại Website; - Trình bày bố cục Website; - Phân biệt mơ hình thiết kế Website; - Trình bày wuy trình thiết kế Website Nội dung Tổng quan 1.1 Website ? Website tập hợp trang... lợi ích mà website mang lại, điều kiện cần đủ thiết kế xây dựng website, quy trình xây dựng website, mơ hình thiết kế website bố cục giao diện website Mục tiêu - Trình bày khái niệm Website; -... đam mê ưa thích thiết kế web vùng đất màu mỡ cho bạn khám phá thêm nhiều điều lạ thiết kế website Để có website tốt phần mềm thiết kế web tốt thơi chưa đủ Trên số phần mềm thiết kế web thông dụng