Giáo trình Thiết kế website (Nghề: Thiết kế đồ họa - Trung cấp) là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành dành cho sinh viên chuyên ngành Thiết kế đồ họa ở trình độ Trung cấp. Giáo trình được chia thành 2 phần, phần 1 trình bày những nội dung về: tổng quan WWW- ngôn ngữ HTML; khái quát chung thiết kế Website; phần mềm MacroMedia Dreamweaver;... Mời các bạn cùng tham khảo!
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ú pháp: colspan="số ô muốn gộp lại với nhau" Ví dụ: THƠNG TIN SINH VIÊN Trần Anh Đức 03/08/1993 Nam Kiều Thị Thu Hằng 04/09/1991 Nữ Vương Thị Lê Na 06/10/1991 Nữ Khi ta kết sau: 3.1.4.2 Gộp ô theo chiều dọc - Để gộp theo chiều dọc đặt thuộc tính rowspan vào bên thẻ mở mà ta muốn bắt đầu gộp với nằm phía - Cú pháp: rowspan="số ô muốn gộp lại với nhau" Ví dụ: LẬP TRÌNH WEB HTML 107 CSS JavaScript Khi ta kết sau: 3.1.4.3 Tổng hợp số ví dụ Ví dụ 1: Tạo bảng theo mẫu Thực hiện: Xem ví dụ Họ tên thí sinh Ngày sinh Giới tính Kết thi Tốn Lý Hóa 108 Trần Đức Anh 03/08/1993 Nam 7.25 8.0 3.75 Kiều Thị Thu Hằng 04/09/1991 Nữ 7.0 9.0 4.75 Vương Thị Lê Na 06/10/1991 Nữ 6.5 9.75 2.25 Ví dụ 2: Thực hiện: Xem ví dụ 109 STT Họ tên Giới tính Chức vụ Nam Nữ 1 Trần Đức Anh X Lớp Trưởng 2 Kiều Thị Thu Hằng X Lớp Phó 3 Vương Thị Lê Na X Tổ viên Ví dụ 3: 110 Thực hiện: Xem ví dụ STT Họ tên GVHD Lịch gặp GVHD 1 Nguyễn Lê Thu Trang Th.S Hồ Sỹ Tuy Đức 08/03/2018 2 Nguyễn Thị Diễm 3 Phạm Thị Hồng Đào 4 Nguyễn Thị Kim Sa Th.S Phạm Thị Huyền Quyên 05/03/2018 5 Lê Thị Trang Ví dụ 4: 111 Thực hiện: Xem ví dụ Bảng điểm lớp 9B Toán Lý Hóa STT Họ tên 1 Trần Đức Anh 8.5 3.0 7.75 2 Kiều Thị Thu Hằng 10 9.25 5.75 3 112 Vương Thị Lê Na 2.25 6.0 7.75 Điểm trung bình lớp 3.1.5 Tạo tiêu đề cho bảng - Để tạo tiêu đề cho bảng cần phải đặt thẻ nằm vị trí bên phần tử với cú pháp sau: tiêu đề bảng - Trong đó, value xác định dựa theo hai loại giá trị: top - Tiêu đề nằm phía bảng bottom - Tiêu đề nằm phía bảng Ví dụ: Thực hiện: DANH SÁCH SINH VIÊN Họ tên Ngày sinh Giới tính Trần Anh Đức 113 03/08/1993 Nam Kiều Thị Thu Hằng 04/09/1991 Nữ - Lưu ý: Nếu khơng thiết lập thuộc tính align cho thẻ tiêu đề bảng mặc định nằm phía bảng 3.2 Các trang khung (IFRAME) 3.2.1.Khung gì? - Khung phần tử tạo nên thẻ , có chức gần giống với Tab trình duyệt, dùng để mở & thao tác với trang web - Ví dụ: Phần tử bên khung 3.2.2 Chèn khung vào website Để chèn khung vào bên trang web sử dụng thẻ Cú pháp: 114 - Trong đó, URL đường dẫn đến trang web mà muốn hiển thị bên khung Ví dụ: Xem ví dụ - Dưới số thuộc tính thường sử dụng bên thẻ frameborder - Tùy chỉnh việc hiển thị hay không hiển thị đường viền bao xung quanh khung width - Thiết lập chiều rộng khung height - Thiết lập chiều cao khung srcdoc - Thiết lập nội dung hiển thị bên khung scrolling - Tùy chỉnh việc hiển thị hay không hiển thị scroll khung 3.2.3 Sử dụng khung để làm nơi mở tài liệu - Dưới ví dụ cách sử dụng khung (iframe) để làm nơi mở tài liệu ta nhấp vào liên kết Ví dụ: Xem ví dụ 115HTML
MÈO CƯNG
PHIM
Multimedia trang web Multimedia HTML hay gọi đa phương tiện bao gồm âm thanh, hát, video, đoạn phim hoạt hình trang web 4.1 Multimedia gì? Multimedia bao gồm nhiều định dạng khác Nó bao gồm bạn nghe thấy nhìn thấy Ví dụ: Các hình ảnh, hát, âm thanh, video, đoạn thu âm, phim, hoạt hình,… Các trang web mà hay gặp thường chứa nhiều kiểu định dạng multimedia khác 4.2 Trình duyệt hỗ trợ Ban đầu trình duyệt web hỗ trợ định dạng văn với kiểu chữ số font màu Sau trình duyệt hỗ trợ hiển thị nhiều màu, kiểu chữ đồng thời hỗ trợ hình ảnh! Khi phát triển, trình duyệt lại hỗ trợ video – audio web theo nhiều cách khác tùy theo định dạng Có định dạng phải cài đặt thêm số chương trình trợ giúp (plug-in) để hoạt động HTML5 đời với hy vọng làm nên lịch sử, tạo thay đổi hoàn tồn tương lai multimedia Thay phải cài flash để hiển thị video trước kia, bạn cần sử dụng thẻ đủ Đây điều quan trọng với nhà sản xuất điện thoại thơng minh, họ khơng cịn phải phụ thuộc vào công nghệ flash Adobe, đồng thời giảm áp lực chi phí cho cấu hình phần cứng Các yếu tố động trang Khung nhập – Form 6.1 Định nghĩa sử dụng Tag dùng để tạo "biểu mẫu" HTML cho người dùng 116 Tag dùng để truyền liệu lên máy chủ Tag không nên dùng để điều khiển layout 6.2 Cấu trúc Trong bắt buộc phải có tham số action - Một chứa thành phần trường text, checkbox, radio-button, button submit, - Một chứa thành phần , , , - Bên form chứa tag khác 6.3 Ví dụ- Họ tên:
- Email:
- Ngày sinh:
) Liên kết neo, khai báo thẻ có thuộc tính href giá trị có dấu # tên id khu vực cần truy cập đến (ví dụ: xem nội dung) Hãy thử xem ví dụ sau: Khi nhấp vào liên kết Xem thân tự động nhảy đến khu vực gán thuộc tính id="than-bai" 121 ... giao diện website Mục tiêu - Trình bày khái niệm 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... 11 6 Khung nhập – Form 11 6 6 .1 Định nghĩa sử dụng 11 6 6.2 Cấu trúc 11 7 6.3 Ví dụ 11 7 6.4 Thuộc tính 11 7 Liên kết 12 0... Bài học trình bày cho biết lý doanh nghiệp cần phải có website, 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ố