Giáo trình Thiết kế web (Nghề: Sửa chữa và lắp ráp máy tính - Cao đẳng) là tài liệu học tập thuộc môn học đào tạo nghề Sửa chữa và lắp ráp máy tính đáp ứng cho hệ đào tạo Cao đẳng. Giáo trình kết cấu gồm 5 bài và chia thành 2 phần, phần 1 trình bày những nội dung về: các định nghĩa và thuật ngữ; giao diện Web; ngôn ngữ HTML - CSS;... 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Ơ GIÁO TRÌNH MƠN HỌC: THIẾT KẾ WEB NGHỀ: SỬA CHỮA VÀ LẮP RÁP MÁY TÍNH TRÌNH ĐỘ CAO ĐẲNG Ban hành kèm theo Quyết định số: /QĐ- ngày tháng năm 20 …… ……………… Ninh Bình, năm 2019 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 NĨI ĐẦU Chương trình khung quốc gia nghề Quản trị mạng máy tính 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ế web 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 ngồi 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 Ninh Bình 2019 Biên Soạn Thạc sỹ: Phạm Anh Đức MỤC LỤC Bài 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ Internet dịch vụ Internet 1.1 Internet 1.2 Lợi ích Internet 1.3 Dịch vụ Internet Giới thiệu WWW 12 Quy trình xây dựng Website 12 Web page, Website 13 Trình duyệt Web 13 5.1 Khái niệm trình duyệt Web 13 5.2 Các trình duyệt Web 13 5.3 Một số thao tác với trình duyệt Web 13 Bài 2: GIAO DIỆN WEB 20 Các loại giao diện Website 20 Bố cục giao diện Web 28 Xây dựng giao diện Web theo yêu cầu 29 Bài 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ 30 Giới thiệu HTML 30 Các thẻ HTML 30 Các thẻ khung 30 2.2 Thẻ định dạng văn 31 2.3 Thẻ chỉnh nội dung 32 2.4 Liên kết 32 2.5 Thẻ ảnh 33 2.6 Bảng 33 2.7 Form 33 Giới thiệu CSS 42 4.Các lệnh CSS 45 4.1 Background 46 4.2 Định dạng chữ 48 4.3 Các lệnh CSS khác 52 Bài 4: MÃ NGUỒN MỞ 63 Giới thiệu mã nguồn mở 64 1.1 Khái niệm mã nguồn mở 64 4: Quản trị nội dung Website Wordpress 69 4.1 Làm việc với AdminCP 69 4.2 Cài đặt Plugin cho WordPress 71 4.3 Cài đặt Themes cho WordPress 74 4.4 Chỉnh giao diện CSS Theme 80 4.5.Tuỳ chỉnh header va background 83 4.6 Hướng dẫn viết Wordpress 83 4.7.Cách tạo menu Wordpress 87 4.9 Hướng dẫn tạo trang (Add new pages) 91 4.12 Hướng dẫn Widget Wordpress 103 4.15 Tối ưu hố tìm kiếm (SEO) 112 4.18 21 website để tìm theme miễn phí 128 Bài 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE 129 Đăng ký tên miền, hosting 129 1.1 Tên miền – domain 129 1.2 Hosting 129 1.3 Đăng ký dịch vụ 129 Cài đặt Website lên Server 129 2.1 Xác nhận thông tin server 129 2.2 Đưa mã nguồn lên server 129 Phát triển Website 129 3.1 Kiểm tra thử nghiệm nội dung 129 3.2 Phát triển nội dung 129 Bảo mật Website 129 4.1 Hiểm họa Website 129 4.2 Các giải pháp 129 MÔ ĐUN: Thiết kế Web Mã mơ đun: MĐ 26 Vị trí, ý nghĩa, vai trị 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 chuyên mơn nghề - Tính chất: Là mơ đun chun mơn nghề 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 + Bố trí làm việc khoa học đảm bảo thời gian xây dựng vận hành Website + Cần cù, chủ động học tập, đảm bảo an tồn học tập Nội dung mơ đun: Nội dung tổng quát phân phối thời gian: Thời gian Thực Số hành, thí Tên chƣơng mục Tổng Lý Kiểm tra TT nghiệm, số thuyết thảo luận, Bài tập Bài 1: Các định nghĩa 3 thuật ngữ Internet dịch vụ Internet 0.5 0.5 1.1 Internet 1.2 Lợi ích Internet 1.3 Dịch vụ Internet Giới thiệu WWW 0.5 0.5 2.1 Dịch vụ WWW 2.2 Giao thức WWW 0.5 0.5 Quy trình xây dựng Website Web page, Website 0.5 0.5 4.1 Web page 4.2 Website Trình duyệt Web 0.5 0.5 5.1 Khái niệm trình duyệt Web 5.2 Các trình duyệt Web 5.3 Một số thao tác với trình duyệt Web 6: Phần mềm thiết kế Web Bài 2: Giao diện Web Các loại giao diện Website 2 Bố cục giao diện Web Xây dựng giao diện Web theo yêu cầu Bài 3: Ngôn ngữ HTML CSS Giới thiệu HTML Các thẻ HTML 2.1 Các thẻ khung 2.2 Thẻ định dạng văn 2.3 Thẻ chỉnh nội dung 2.4 Liên kế - Link 2.5 Ảnh – Img 2.6 Bảng – Table 2.7 Biểu mẫu – Form 2.8 Multimedia, video 3.Giới thiệu CSS 4.Các lệnh CSS 4.1 Định dang khung 4.2 Định dạng chữ 4.3 Sắp xếp khối Xây dựng giao diện Web tử file PSD Xây dưng Web chuẩn SEO Bài 4: Mã nguồn mở Giới thiệu mã nguồn mở 1.1 Khái niệm mã nguồn mở 1.2 Các loại mã nguồn mở 2.Web server 2.1 Khái niệm Web server 2.2 Tác dụng Web Server 2.3 Cài đặt Web server Cài đặt Wordpress 3.1 Giới thiệu Wordpress 3.2 Cài đặt Wordpress 0.5 0.5 16 1 12 10 41 11 28 0.5 0.5 14 0.5 0.5 12 10 23 14 0.5 0.5 2 1 12 1 4: Quản trị nội dung Website Wordpress 4.1 Tạo danh mục 4.2 Tạo viết 4.3 Quản lý viết, quản lý ảnh 4.4 Quản lý người dùng 4.5 Quản lý bố thành phần khác Cấu trúc mã nguồn Wordpress 6: Theme Wordpress 6.1 Thay đổi Theme Wordpress 6.2 Tìm cài đặt Theme Wordpress 6.3 Chỉnh sửa Theme Wordpress 7: Plugin Wordpress 7.1 Tác dụng Plugin Wordpress 7.2 Các Plugin Bài 5: Xuất trì Website Đăng ký tên miền, hosting 1.1 Tên miền – domain 1.2 Hosting 1.3 Đăng ký dịch vụ Cài đặt Website lên Server 2.1 Xác nhận thông tin server 2.2 Đưa mã nguồn lên server Phát triển Website 3.1 Kiểm tra thử nghiệm nội dung 3.2 Phát triển nội dung Bảo mật Website 4.1 Hiểm họa Website 4.2 Các giải pháp Cộng 6 2.5 1.5 0.5 0.5 1 1.5 0.5 90 29 58 Bài CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ Mã bài: MĐ 26 – 01 Giới thiệu: 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 Mục tiêu: - Trình bày internet dịch vụ internet; - Phân loại WWW; - Thiết lập quy trình xây dựng web; - Mơ tả trình duyệt web - Thực thao tác an tồn với máy tính Nội dung chính: Internet dịch vụ Internet 1.1 Internet 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 1.2 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 1.3 Dịch vụ Internet 1.3.1 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 (website tĩnh) vận hành CMS chạy máy chủ (website động) Website xây dựng nhiều ngơn ngữ lập trình khác (PHP,.NET, Java, Ruby on Rails ) Email - Thư điện tử (từ chữ Electronic mail) hệ thống chuyển nhận thư từ qua mạng máy tính Email phương tiện thông tin nhanh Một mẫu thơng tin (thư từ) gửi dạng mã hố hay dạng thơng thường chuyển qua mạng máy tính đặc biệt mạng Internet Nó chuyển mẫu thơng tin từ máy nguồn tới hay nhiều máy nhận lúc Ngày nay, email truyền gửi chữ, cịn truyền dạng thơng tin khác hình ảnh, âm thanh, phim, đặc biệt phần mềm thư điện tử kiểu cịn hiển thị email dạng sống động tương thích với kiểu tệp HTML FTP (File Transfer Protocol - Giao thức truyền tập tin) thường dùng để trao đổi tập tin qua mạng lưới truyền thông dùng giao thức TCP/IP (chẳng hạn Internet - mạng ngoại - intranet - mạng nội bộ) Hoạt động FTP cần có hai máy tính, máy chủ máy khách) Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi trình chủ, lắng nghe yêu cầu dịch vụ máy tính khác mạng lưới Máy khách chạy phần mềm FTP dành cho người sử dụng dịch vụ, gọi trình khách, khởi đầu liên kết với máy chủ Một hai máy liên kết với nhau, máy khách xử lý số thao tác tập tin, tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy mình, đổi tên tập tin, xóa tập tin máy chủ v.v Vì giao thức FTP giao thức chuẩn công khai, cơng ty phần mềm nào, hay lập trình viên viết trình chủ FTP trình khách FTP Hầu tảng hệ điều hành máy tính hỗ trợ giao thức FTP Hiện thị trường có nhiều trình khách trình chủ FTP, phần đơng trình ứng dụng cho phép người dùng lấy tự do, không tiền 1.3.2 Gopher, News Group, Newsletter Các dịch vụ phổ biến khác Gopher dịch vụ tương đối Internet, Gopher cho phép truy nhập thông tin Internet theo thực đơn Thông tin Gopher văn hay đồ họa Newsgroup Nhóm thảo luận : Dịch vụ cho phép nhóm người dùng trao đổi, san sẻ ý tưởng truyền đạt thông tin với người đồng ý nghĩ đề tài mà tất thành viên nhóm quan tâm Usenet Tập hợp vài ngàn nhóm thảo luận (Newgroup) Internet Những người tham giao vào Usenet sử dụng chương trình đọc tin 10 Ví dụ 3: Ví dụ tạo cho liên kết hiệu ứng màu sắc giống ví dụ có thêm số hiệu ứng: liến kết có khung viền màu đen, kích cỡ font 14px; liên kết mouse over có light cyan; liên kết thăm có light yellow a{ border:1px solid #000; font-size:14px } a:link { color:#00FF00 }a:hover { background-color:#00BFF3; color:#FF00FF; font-size:1.2em; text-decoration:blink } a:visited { background-color:#FFF568; color:#FF0000; text-decoration:none } a:active { color:#662D91; font-variant:small-caps } Ba ví dụ tí gợi ý khả kết hợp thuộc tính CSS với pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web Cũng xin nói ln ví dụ Pearl trình bày khác thật trơng khơng dễ nhìn, Pearl khơng có nhiều thời gian để chăm chút ví dụ Cái mà Pearl muốn nói làm bạn hiểu tác dụng thuộc tính để vận dụng cho trang web 4.3.2 Class & ID Trong học trước, học thuộc tính CSS background, color, font,… Tuy nhiên, bạn nhận áp dụng thuộc tính CSS cho thành phần ví dụ h1, h2, p, a, img,… tồn thành phần trang web nhận thuộc tính Vậy có để nhóm lại số thành phần để áp dụng thuộc tính đặc biệt Ví dụ bạn muốn liên kết menu trang web in hoa, có kích cỡ lớn so với liên kết nội dung phải làm nào? Đây vấn đề mà giải chương Nhóm phần tử với class : Ví dụ có đoạn mã HTML sau :Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
- Hà Nội
- TP Hồ Chí Minh
- Đà Nẵng
- Thừa Thiên Huế 54
- Khánh Hòa
- Quãng Ninh
- Tiền Giang
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
- Hà Nội
- TP Hồ Chí Minh
- Đà Nẵng
- Thừa Thiên Huế
- Khánh Hòa
- Quãng Ninh
- Tiền Giang
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
- Hà Nội
- TP Hồ Chí Minh
- Đà Nẵng
- Thừa Thiên Huế
- Khánh Hòa
- Quãng Ninh 55
- Tiền Giang
Khơng có q độc lập, tự do.
Yêu cầu dùng CSS tô đậm từ độc lập, tự Để giải vấn đề này, thêm thẻ vào đoạn HTML sau:Khơng có q độc lập, tự do Và viết CSS cho yêu cầu trên: nhanmanh { font-weight:bold } Nhóm khối phần tử với thẻ : Cũng , thẻ trung hòa thêm vào tài liệu HTML với mục đính nhóm phần tử lại cho mục đích định dạng CSS Tuy nhiên, điểm khác biệt dùng để nhóm khối phần tử nhóm nhiều khối phần tử Trở lại ví dụ danh sách tỉnh, thành phần class trước giải vấn đề cách nhóm phần tử với sau: Danh Sách Các Tỉnh, Thành Phố Việt Nam: Right Left Margin Border Padding Top Model Box Trong CSS, box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối không 57 gian bao quanh thành phần
Và đoạn CSS cho mục đích là: #tp { color:#FF0000 } #tinh { color:0000FF } Trong hai học trên, học qua id, class, , lợi ích việc nhóm, đánh dấu phần tử để dùng CSS để tạo kiểu trình bày đặc biệt Có thể số bạn chưa học qua HTML khó khăn việc nắm bắt kiến thức Tuy nhiên, yêu cầu mà Pearl đưa bạn vận dụng phần tử CSS 4.3.4 Box Model Trong CSS, box model (mô hình hộp) mơ tả cách mà CSS định dạng khối khơng gian bao quanh thành phần Nó bao gồm padding (vùng đệm), border (viền) margin (canh lề) tùy chọn Hình bên mơ tả cấu trúc minh họa mơ hình hộp cho thành phần web Mơ hình hộp mơ hình lý thuyết lý tưởng Bên xét mơ hình hộp đối tượng web cụ thể: Ví dụ: Chúng ta có đoạn HTML sau: Top Content