Giáo trình thiết kế web (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ƠN HỌC: THIẾT KẾ WEB NGHỀ: THIẾT KẾ ĐỒ HOẠ 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 đƣợc 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 đƣợc xây dựng sở phân tích nghề, phần kỹ thuật nghề đƣợc 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ề đƣợc biên soạn theo hình thức tích hợp lý thuyết thực hành Trong q 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, nhƣng không tránh khỏi khiếm khuyết, mong nhận đƣợc đóng góp ý kiến độc giả để giáo trình đƣợc 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Đ 38 Vị trí, ý nghĩa, vai trị Mơ đun: - Vị trí: Mơ đun đƣợc 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ề Mục tiêu mô đun: - Về kiến thức + Trình bày đƣợc cấu trúc Website; + Trình bày đƣợc quy trình xây dựng phát triển Website; + Trình bày đƣợc vấn đề liêu quan đến an toàn bảo mật Website - Về kỹ năng: Tạo đƣợc 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 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Đ 21 – 01 Giới thiệu: Internet hệ thống thơng tin tồn cầu đƣợc truy nhập cơng cộng gồm mạng máy tính đƣợc 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 đƣợc 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 đƣợc internet dịch vụ internet; - Phân loại đƣợc WWW; - Thiết lập đƣợc quy trình xây dựng web; - Mơ tả đƣợc trình duyệt web - Thực thao tác an toà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 đƣợc truy nhập cơng cộng gồm mạng máy tính đƣợc 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 đƣợc 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 đƣợc 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 đƣợc 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ừ) đƣợc gửi dạng mã hoá hay dạng thơng thƣờng đƣợc 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 đƣợc chữ, cịn truyền đƣợc dạng thơng tin khác nhƣ 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 đƣợc 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 nhƣ 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, nhƣ 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 nhƣ 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 đƣợc 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 Simple CSS Standard Edition WallPearl website ảnh hƣởng đến thứ hạng website website có thứ hạng khơng tốt khơng chủ đề nội dung Vì thế, nhƣ cảm thấy không cần thiết, tiến hành chèn thẻ rel=”nofollow” vào đâu có liên kết trỏ ngồi, ngoại trừ khu vực bạn trao đổi text link :D  Nếu nhƣ bạn muốn tự động gắn thêm thẻ rel=”nofollow” vào tất liên kết trỏ ngồi (ngoại trừ blogroll) nên sử dụng plugin WP External Link 4.15.4 Tăng tốc blog Tốc độ tải trang blog bạn có phần quan trọng việc máy tìm kiếm đánh mục website Website tải nhanh bot tìm kiếm làm việc đƣợc nhanh hơn, nhờ mà đánh mục đƣợc nhiều trang cho lần “thăm viếng” Hơn nữa, tốc độ tải trang yếu tố định blog bạn có đƣợc nhiều ngƣời truy cập hay khơng trở thành thành viên thân thuộc website mà tốc độ tải trang thuộc hàng “tốc độ rùa” Vì thế, để cải thiện tốc độ cho blog bạn, có số gợi ý nhƣ sau:  Chọn nhà cung cấp hosting ổn định có tốc độ tải trang tốt Sử dụng Javascript CSS tốt, có nén chúng lại  plugin WP Minify Hạn chế sử dụng nhiều plugin, nên sử dụng plugin thật cần  thiết mà bạn làm cách thủ công đƣợc Tham khảo viết plugin nên có cho WordPress Sử dụng cache cho website, thật cần thiết cho  website nào, sử dụng plugin WP Super Cache W3 Total Cache để tạo cache cho website để tăng tốc độ truy cập cách đáng kể 4.15.5 Tạo chiều sâu cho liên kết liên quan Sẽ thật bổ ích viết bạn có chèn số liên kết có liên quan, điều giúp cho ngƣời đọc dễ dàng điều hƣớng đến viết có liên quan để tìm thêm thơng tin, nhƣ thẻ viết đƣợc chèn liên kết viết ngƣời đọc dễ dàng tìm viết có chủ đề để đọc Hơn nữa, điều giúp cho bot tìm kiếm có thêm hội đánh mục viết 115 Simple CSS Standard Edition WallPearl Có cách để tạo chiều sâu liên kết:  Tạo danh sách viết liên quan  Trỏ link đến thẻ viết Với WordPress làm điều khơng khó khăn, bạn sử dụng plugin sau kết hợp với nhau:  Yet Another Related Post Plugin – Tự động tạo danh sách viết liên quan viết cách dựa vào độ tƣơng quan chữ, thẻ category Auto Link Best Tag – Tự động tạo liên kết tag có mặt  viết Có thể tùy chỉnh số lần hiển thị link tag viết SEO Smart Link Pro - Đây plugin giúp bạn tự động thêm liên kết vào  số từ khóa cụ thể tự động hiển thị viết Ngồi tính phiên Pro giúp bạn tạo redirect cho số liên kết mà bạn muốn giấu đƣờng dẫn, ví dụ nhƣ http://thachpham.com/go/dreamhost hỗ trợ lƣu danh sách từ khóa Plugin có phiên miễn phí nhƣng hồn tồn vơ dụng với từ khóa tiếng Việt khơng hỗ trợ bảng mã UTF-8 từ khóa liên kết, thành chữ mà có dấu tịt ngịi ln Vì đính kèm link download Pro trên, bạn tải sử dụng mà không cần tốn chi phí  SEO Auto Links & Related Posts - Tới thời điểm plugin tốt để tạo liên kết sâu tự động hoàn toàn miễn phí WordPress Khơng tự động chèn liên kết vào số từ khóa định, tags hay categories, mà cịn hỗ trợ bạn tạo danh sách viết liên quan đẹp mắt, hỗ trợ ảnh thumbnail slide bên phải hình Theo lời khuyên bỏ qua SEO Smart Link Pro mà sử dụng này, không áy náy chuyện quyền Và cịn cách thủ cơng nhƣng vơ hiệu tự tay chèn liên kết đến viết có liên quan mật thiết đến nội dung 4.15.6 Thiết lập XML Sitemap Robots.txt XML Sitemap định dạng nội dung chứa đƣờng dẫn viết, thƣ mục, tag v.v….và tất nhƣ đồ chi tiết trang web Từ đó, webmaster muốn thơng báo trang web lên máy tìm kiếm dùng sitemap gửi lên trang tìm kiếm Các bot tìm kiếm tiến hành phân tích thu thập liên kết có sitemap tiến hành đƣa lên cỗ máy tìm kiếm So với cách thu thập liệu thông thƣờng từ việc crawl trang web, sitemap giúp cho bot tìm kiếm dễ dàng xác định cấu trúc website, hỗ trợ thời gian đánh mục liên kết Vì vậy, bạn muốn website nhanh chóng đƣợc biết đến trang tìm kiếm tạo sitemap từ thành lập website 4.15.7 Hƣớng dẫn tạo sitemap xml với Google XML Sitemap 116 Simple CSS Standard Edition WallPearl Google XML Sitemap – Đây plugin tạo sitemap phổ biến WordPress chuẩn xác sitemap để dễ dàng tƣơng thích hoạt động tốt máy tìm kiếm nhƣ Yahoo, Google, Bing Bạn tùy chọn loại bỏ đánh sitemap số trang tùy chỉnh độ ƣu tiên trang Sau tải kích hoạt plugin, bạn kiểm tra xem đƣờng dẫn sitemap bạn có hoạt động đƣợc khơng, kiểm tra cách truy cập vào http://yourdomain.com/sitemap.xml Nếu trang màu xanh dƣơng liệt kê đƣờng dẫn coi nhƣ cài đặt thành cơng Cịn website báo khơng tìm thấy file sitemap.xml bạn tiến hành tạo file sitemap.xml sitemap.xml.gz, sau upload lên thƣ mục gốc website CHMOD cho thành 666 4.15.8 Gửi sitemap lên Google Để gửi sitemap lên Google bạn truy cập đăng nhập vào trang Google Webmaster Tool Nhấp vào nút Thêm trang web nhập địa blog bạn vào Bƣớc xác nhận bạn chủ nhân website cách thêm đoạn thẻ vào website tải tập tin xác nhận sau upload lên thƣ mục gốc website Sau xác nhận xong, bạn vào Tối ƣu hóa -> Sơ đồ trang web, nhấp vào nút thêm sơ đồ trang web nhập sitemap.xml Sau lƣu lại chờ thông báo 4.15.9 Sử dụng Robots.txt File robots.txt đƣợc hiểu file dùng để điều khiển trình đánh mục website Trong file robots bạn xác định thƣ mục không cần đánh mục để giúp cho bot đỡ thời gian đánh mục website bạn, đồng thời che giấu số thƣ mục nhảy cảm Để tạo file robots.txt bạn tạo thủ cơng trình soạn thảo văn đơn giản (nhƣ 117 Simple CSS Standard Edition WallPearl notepad) lƣu lại với tên robots.txt upload lên thƣ mục gốc website Hoặc bạn sử dụng công cụ Robots.txt Generation Giả sử bạn sử dụng WordPress file robots.txt nhƣ sau:  User-agent: * Disallow: /wp-admin/ Disallow: /wp-includes/ Disallow: /wp-content/ Đoạn User-agent:* nghĩa cho phép tất bot tìm kiếm thi hành lệnh dƣới Cịn đoạn Disallow ngăn chặn bot lập mục cho thƣ mục Các bạn thêm thứ cần thiết mà bạn không muốn bot thu thập gửi lên máy tìm kiếm 118 Simple CSS Standard Edition WallPearl 4.16 Danh sách plugin WordPress tốt Chắc hẳn sử dụng WordPress khó khăn việc lựa chọn plugin, chí ngƣời sử dụng WordPress lâu năm có lúc phân vân việc lựa chọn plugin có q nhiều plugin giống nên khơng biết dùng tốt Các plugin danh sách đƣợc đánh giá để xếp hạng thơng qua chức năng, hỗ trợ, cập nhật thƣờng xuyên chắn khơng có đoạn mã độc hại đƣợc đính kèm Hiện danh sách xếp hạng plugin gồm:  Các plugin bảo mật tối ƣu tốt Các plugin SEO tốt  Các plugin bán hàng tốt   Các plugin có ích Các plugin có tiềm  Quy trình kiểm tra plugin bao gồm Test thử host online  Kiểm tra mã độc qua file đính kèm   Theo dõi change log plugin để biết đƣợc plugin có đƣợc update thƣờng xuyên Kiểm tra đánh giá ngƣời sử dụng khác  Vì vậy, bạn hồn tồn n tâm với danh sách Tuy nhiên, không gian danh sách có hạn nên khơng ghi rõ chức ra, bạn vào trang tải plugin đọc phần mô tả xem screenshot, xin lỗi bất tiện Nếu bạn sử dụng phát lỗi, liên lạc với phatnguyen@kent-international.edu.vn để kiểm tra giảm thứ hạng Ngoài ra, bạn biết đƣợc plugin hay giới thiệu cho Các bạn vào http://wordpress.org/download/ để download plugin bên dƣới Những plugin SEO tốt Tên Wordpress SEO by Yoast SEO Ultimate All in One SEO Google XML Sitemap WP External Links Tác giả Joost de Valk SEO Design Solutions Michael Torbert Arne Brachhold Victor Villaverde Laan Đánh giá Dễ dùng tốt Đa chức Dễ sử dụng Tạo sitemap tốt Dễ sử dụng Những plugin bảo mật tối ưu hóa tốt Tên Tác giả 119 Đánh giá Simple CSS Standard Edition BulletProof Security Better WP Security 6Scan Security Akismet WP 2-Step Verification WallPearl Edward Alexander Bit51 6Scan Automattic As247 Mạnh mẽ Dễ sử dụng Tiện dụng Trùm chống spam lớp bảo mật Những plugin làm trang bán hàng tốt Tên Tác giả Đánh giá WooEcommerce WooThemes Dễ dùng eShop Rich Pedley Tốt nhƣng khó dùng Ecwid Ecwid Team Gọn nhẹ PayPal Simple Cart Ruhul Amin Đơn giản Ready! Ecommerce Shopping Ready Shopping Đa tính Cart Những plugin có ích Plugin SEO, bảo mật hay làm trang bán hàng có ích nhƣng để dễ tham khảo xin tách ra, 20 plugin dƣới plugin nên dùng bạn có nhu cầu Tác giả Đánh giá Newsletter Sign-Up DvanKooten Tạo form đăng ký nhận tin dễ dàng EWWW Image Optimizer Nosilver4u Nén ảnh dung lƣợng lớn Jetpack Wordpress Đa chức WP Super Cache Donncha O Caoimh Dễ sử dụng Contact Form Takayuki Miyoshi Dễ sử dụng BackWPUp Daniel Hüsken Không thể thiếu Lightbox Plus Dan Zappone Không thể thiếu nRelated Post Plugin nRelate & SlipFire Không thể thiếu Yet Another Related Post Micho Đơn giản – mạnh mẽ WP Mashsocial Widget Ahmad Awais Đẹp – Tiện dụng WP Page Navi Lester „GaMerZ‟ Nên sử dụng Chan GRAND FIAGAllery Rattus Đẹp mắt User Role Editor Vladimir Garagulya Nên dùng blog có nhiều author Facebook Facebook Tƣơng tác Wordpress với Facebook Disqus Comment System Disqus Dễ sử dụng 120 Simple CSS Standard Edition BJ Lazy Load Special Recent Post Fancier Author Box Better Wordpress Recent Comment External Links Shortcode Ultimate Liveblog Use Google Libraries BJ Lazyload WallPearl Bjørn Johansen Luca Grandicelli ThematoSoup Khang Minh Nên dùng Nên dùng Nên dùng Nên dùng Denis de Bernardy Hỗ trợ SEO Vladimir Anokhin Bộ shortcodeđẹp Automatic Đăng status giống nhƣ mạng xã hội Jczorkmid Bjornjohansen Không thể thiếu Khơng thể thiếu Những plugin có tiềm Đây plugin tốt nhƣng ngƣời biết đến, có hội trở thành plugin phổ biến ngày không xa Tên Tác giả Đánh giá Schema Creator Norcross Tạo microdata cho viết dễ dàng Wordfence Security Mmaunder Bảo vệ file toàn diện CSS & Javascript Evgeniy Tối ƣu hóa JS CSS Optimizer Kotelnitskiy WP Retina TigrouMeow Resize ảnh tốt Auto SEO Phillip.Gooch SEO đơn giản Infinite WP Client InfiniteWP Multi Blog Client FAQ Manager IndiaNIC Tạo quản lý trang F.A.Q Wordpress Video Contus Support Tạo gallery cho video chuyên nghiệp Gallery Drop Shadow Boxes Stevehenty Tạo hộp đổ bóng Simple Instagram Rollybueno Tƣơng tác với tài khoản Instagram Live Chat Danycode Khung chat đơn giản Easy PayPal Manojtd Cổng toán PayPal đơn giản Codepress Admin Codepress Sắp xếp kiểu hiển thị WpColumns admin SlideDesk Lite Dtelepathy, Kynatro Slide ảnh chuyên nghiệp Content Simple Footnote Nacin Thêm ghi cho viết Advanced Youtube Embedplus Đăng video từ youtube đa Embed Easy Rotetor DWUser Slide ảnh đơn giản 121 Simple CSS Standard Edition WallPearl Social Login Claude Schlesser A Better Search Live Chat Robot Post View Count Ultimate TinyMCE Solioquy Lite Mikko Saari Acobot Juliobox Josh Lobe Griffinjt Bình luận, đăng nhập tài khoản mạng xã hội Tối ƣu chức tìm kiếm Chat tự động Hiển thị lƣợt xem viết Khung soạn viết trực quan Tạo slide ảnh định dạnh Responsive 4.17 28 plugin kết nơí WordPress với ứng dụng Google Google thật làm chủ giới công nghệ không với dịch vụ phổ biến Google Search Google Email (Gmail) mà làm cho ngày chịu phụ thuộc nhiều vào gã “tay to” với nhiều ứng dụng nhƣ Google Calendar, Google Alert, Google Plus, Google Picasa, Youtube Và bạn trung thành với dịch vụ Google, hẳn muốn tích hợp chúng vào blog để dễ dàng kiểm soát quản lý hơn, đồng thời giúp chia sẻ tốt dịch vụ chia sẻ Google Google Page Rank Badget Dễ dàng chèn hình ảnh hiển thị Page Rank website, thích hợp để “khoe” PR Google+ Plugin Nếu bạn muốn chèn nút +1 vào đâu blog mà khơng muốn tốn nhiều thời gian nên dùng plugin Plugin làm việc WordPress Multi User (WordPress MU) 122 Simple CSS Standard Edition WallPearl WordPress Social Login Thêm tính đăng nhập, bình luận tài khoản mạng xã hội khác Google Plus Favicon Plugin tự động hiển thị favicon blog avatar Google Plus bạn Gravatar Google Images Nếu blog bạn có q nhiều comment nhƣng dùng Gravatar để hiển thị avatar bạn cho hiển thị hình ảnh tự động từ Google Images để làm đẹp blog, ngƣợc lại ngƣời dùng có avatar hiển thị avatar ngƣời dùng Google Picasa Viewer Hiển thị gallery ảnh từ tài khoản Picasa viết trang shortcode, đồng thời hỗ trợ widget hiển thị TubePress 123 Simple CSS Standard Edition WallPearl Hiển thị widget video clip tài khoản bạn Youtube blog WordPress Hỗ trợ chèn showcase đẹp mắt tiện lợi Youtube Simple Gallery Không phức tạp nhƣ TubePress, plugin giúp bạn chèn showcase video từ Youtube vào viết dễ dàng, hỗ trợ xem video popup-lightbox đẹp CodeArt – Google Mp3 Player Chơi định nhạc định dạng mp3 player Google, nhẹ tiện lợi Chỉ hoạt động bạn dùng link mp3 trực tiếp Google Maps Plugin Chèn phần đồ từ Google Map vào viết dễ dàng Chỉ cần nhấn vào nút chèn Google Map viết, tìm địa điểm cần chèn có đồ từ Google Map vào viết mà không cần trải qua số bƣớc phức tạp nhƣ làm thủ công Convert Address to Google Map Tự động chuyển đổi địa dạng chữ thành Google Map, kích hoạt địa nằm cặp thẻ Comprehensive Google Map Chèn đồ vào blog từ Google Map, hỗ trợ hiển thị đồ đẹp mắt dễ sử dụng 124 Simple CSS Standard Edition WallPearl WP Google Drive Tự động backup tất liệu blog upload vào tài khoản Google Drive bạn, có hỗ trợ tự động backup theo chu kỳ Google Document Enbedder Hiển thị nội dung file văn Google Document WordPress Điểm đặc biệt plugin không yêu cầu ngƣời dùng cài thêm Flash hay PDF cho trình duyệt WordPress Google Form Nếu nhƣ bạn thƣờng xuyên sử dụng Google Form vào blog plugin bạn nên sử dụng Plugin cho phép hiển thị form Google Form lên viết trang WordPress giống nhƣ hiển thị form bình thƣờng, xem ảnh để biết thêm chi tiết Easy Adsense Chèn widget quảng cáo từ tài khoản Google Adsense dễ dàng vào viết Hỗ trợ hiển thị widget footer Adsense Plugin Chèn quảng cáo Google Adsense vào viết, chỉnh sửa màu sắc font chữ cho quảng cáo trang quản trị 125 126 Google Analytics Dashboard Nếu bạn ngại thƣờng xuyên vào trang chủ Google Analytics để xem thống kê website mang vào trang Dashboard WordPress với plugin Ngồi hỗ trợ chèn widget hiển thị lƣợt truy cập đếm lƣợt xem trang viết, nên dùng cho tất ngƣời Google XML Sitemap Tự động tạo sitemap định dạng xml để submit lên máy tìm kiếm nhằm hỗ trợ SEO cho WordPress Google Site Verification Plugin Một số dịch vụ Google liên quan đến website phải yêu cầu bạn chứng thực website việc thêm thẻ meta vào website upload file xác nhận lên hosting làm thời gian, plugin giúp bạn vƣợt qua cơng đoạn với cú click Google Authorship Widget Chèn widget hiển thị avatar từ Google Plus, đồng thời hỗ trợ hiển thị avatar Google Plus kết tìm kiếm máy tìm kiếm để kết bạn bật Xem thêm Google Calendar Event Chèn widget hiển thị kiện tài khoản Google Calendar vào WordPress Stout Google Calendar Chèn widget hiển thị lịch Google Calendar cho phép chỉnh sửa màu sắc Google Libraries 126 127 Nếu blog bạn sử dụng nhiều plugin javascript gây trở ngại đến tốc độ website hao tốn nhiều băng thông Plugin cho phép bạn dùng plugin javascript có thƣ viện thay sử dụng file javascript website, tiết kiệm băng thông cải thiện tốc độ cho blog Google Font Tùy chọn hiển thị font chữ đẹp vào blog WordPress đƣợc lấy từ thƣ viện Font Google Feedburner Plugin Tự động chuyển link RSS mặc định blog link RSS Feedburner Google Alert Hiển thị báo cáo từ Google Alert Dashboard WordPress Google Custom Search 127 128 Chèn chức tìm kiếm viết blog từ Google vào blog, hỗ trợ tùy chỉnh màu sắc, kiểu hiển thị Với plugin bạn thấy đƣợc lợi ích dịch vụ nhỏ Google lớn đến mức nào, có tới dịch vụ Google phải phụ thuộc vào nhiều Cịn bạn sao? Hiện bạn sử dụng dịch vụ Google? 4.18 21 website để tìm theme miễn phí Để tìm giao diện miễn phí dành cho WordPress khơng có khó WordPress phổ biến giới, có hàng trăm website cung cấp theme miễn phí dành cho bạn lựa chọn, nhƣng vấn đề nên tìm giao diện miễn phí đâu để chắn theme khơng bị chèn quảng cáo, mã độc làm ảnh hƣởng đến hoạt động website bạn WordPress Theme Showcase Fresheezy Graph Paper Press BlogOhBlog TopWPThemes WooThemes ThemeLab WpThemeFree BestWPThemes 10 ArcSin Templates 11 Design Disease 12 Free Theme Layout 13 SkinPress 14 WordPress Theme Base 15 Rock Kitty Theme 16 WP Skins 17 Templates Browse 18 Free WordPress Themes 19 FreeWpThemes.net 20 WPTemplates 21 WordPress Theme Generator – Tự thiết kế theme WordPress 128 129 Bài XUẤT BẢN VÀ DUY TRÌ WEBSITE Mã bài: MĐ21– 05 Mục tiêu Trình bà đƣợc quy trìn xây dựng Website; Làm đƣợc thủ tục để triển khai Web lên hệ thống mạng Internet; Kiểm thử phát triển Website; Cẩn thận tỉ mỉ kiểm tra lỗi phát triển Web Nội dung Đă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 129 ... 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. .. diện website - Phân loại đƣợc websiet; - Thiết lập đƣợc quy trình xây dựng web; - Xây dựng đƣợc website theo yêu cầu - Thực thao tác an tồn với máy tính Các loại giao diện Website Thiết kế website... nhân phủ tồn cầu Mục tiêu: - Trình bày đƣợc internet dịch vụ internet; - Phân loại đƣợc WWW; - Thiết lập đƣợc quy trình xây dựng web; - Mơ tả đƣợc trình duyệt web - Thực thao tác an toàn với