Giáo trình Thiết kế web (Nghề: Thiết kế đồ họa - Cao đẳng) được biên soạn dùng cho chương trình dạy nghề Thiết kế đồ họa đá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ữ; quy trình xây dựng Website; giao diện Website; 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Ô KHOA CÔNG NGHỆ THƠNG TIN VÀ NGOẠI NGỮ GIÁO TRÌNH MƠN HỌC: THIẾT KẾ WEB NGHỀ: THIẾT KẾ ĐỒ HOẠ TRÌNH ĐỘ CAO ĐẲNG 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 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 11 Quy trình xây dựng Website 12 Web page, Website 12 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 21 Các loại giao diện Website 21 Bố cục giao diện Web 21 Xây dựng giao diện Web theo yêu cầu 22 Bài 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ 22 Giới thiệu HTML 23 Các thẻ HTML 23 Các thẻ khung 23 2.2 Thẻ định dạng văn 23 2.3 Thẻ chỉnh nội dung 25 2.4 Liên kết 25 2.5 Thẻ ảnh 25 2.6 Bảng 26 2.7 Form 26 Giới thiệu CSS 34 4.Các lệnh CSS 37 4.1 Background 38 4.2 Định dạng chữ 41 4.3 Các lệnh CSS khác 45 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 79 4.5.Tuỳ chỉnh header va background 82 4.6 Hướng dẫn viết Wordpress 82 4.7.Cách tạo menu Wordpress 86 4.9 Hướng dẫn tạo trang (Add new pages) 90 4.12 Hướng dẫn Widget Wordpress 102 4.15 Tối ưu hố tìm kiếm (SEO) 111 4.18 21 website để tìm theme miễn phí 127 Bài 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE 128 Đăng ký tên miền, hosting 128 1.1 Tên miền – domain 128 1.2 Hosting 128 1.3 Đăng ký dịch vụ 128 Cài đặt Website lên Server 128 2.1 Xác nhận thông tin server 128 2.2 Đưa mã nguồn lên server 128 Phát triển Website 128 3.1 Kiểm tra thử nghiệm nội dung 128 3.2 Phát triển nội dung 128 Bảo mật Website 128 4.1 Hiểm họa Website 128 4.2 Các giải pháp 128 MÔ ĐUN: Thiết kế Web Mã mơ đun: MĐ 38 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 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 toà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 4: Quản trị nội dung Website 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 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 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Đ 21 – 01 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 (NewsReader) để đọc thư người khác, gởi thư trả lời thư khác Usenet Mailing List (danh sách thư tín) danh sách địa thư điện tử nhóm người có nhu cầu chia sẻ ý tưởng với người quan điểm Chỉ cần gửi thư đến địa người mailing list, tất người có tên danh sách thư nhận hồi đáp thư diễn tương tự Hai điểm khác biệt mailing list newgroup là: - Trong mailing list, thư đến gửi trực tiếp vào hộp thư bạn, hộp thư bạn có khả biị đầy cách nhanh chóng, với Newsgroup khơng gặp tình trạng - Với Newsgroup, người nhóm xem thơng tin nhóm, cịn mailing List mang tính cá nhân người khác xem thông tin người Mailing List cách đơn giản để tìm kiếm thơng tin thích hợp cập nhật thường xuyên chủ đề thú vị mà bạn quan tâm } a:active { color:# 662D91; font-variant:small-caps } 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ế
- 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
- 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ó quý độ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: Content Top Model Box Right Left Margin Border Padding 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
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