ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƢỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH Thiết kế và cấu hình website NGHỀ QUẢN TRỊ MẠNG MÁY TÍNH Trình độ cao đẳng (Ban hành theo Quyết định số: 70 /QĐ-CĐN ngày 11 tháng 01 năm 2019 của Hiệu trưởng trường Cao đẳng nghề An Giang) Tên tác giả: Đổ Văn Nhớ Năm ban hành: 2018 1 TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể đƣợc phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. LỜI GIỚI THIỆU Trong những năm qua, dạy nghề đã có những bƣớc tiến vƣợt bậc cả về số lƣợng và chất lƣợng, nhằm thực hiện nhiệm vụ đào tạo nguồn nhân lực kỹ thuật trực tiếp đáp ứng nhu cầu xã hội. Cùng với sự phát triển của khoa học công nghệ trên thế giới, lĩnh vực Công nghệ thông tin nói chung và ngành Quản trị mạng ở Việt Nam nói riêng đã có những bƣớc phát triển đáng kể.
Chƣơng trình dạy nghề Quản trị mạng đã đƣợc xây dựng trên cơ sở phân tích nghề, phần kỹ năng nghề đƣợc kết cấu theo các môđun. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình theo các môđun đào tạo nghề là cấp thiết hiện nay. Mô đun 20: Thiết kế và cấu hình website là mô đun đào tạo chuyên môn nghề đƣợc biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu Thiết kế website trong và ngoài nƣớc, kết hợp với kinh nghiệm trong thực tế.
Mặc dầu có rất nhiều cố gắng, nhƣng không tránh khỏi những khiếm khuyết, rất mong nhận đƣợc sự đóng góp ý kiến của độc giả để giáo trình đƣợc hoàn thiện hơn. Xin chân thành cảm ơn! An Giang, ngày 15 tháng 04 năm 2018 Tham gia biên soạn Đổ Văn Nhớ 2 MỤC LỤC ĐỀ MỤC TRANG LỜI GIỚI THIỆU. 2 BÀI 1: NGÔN NGỮ HTML. KHÁI QUÁT VỀ TRANG WEB.
CẤU TRÚC CƠ BẢN CỦA TRANG WEB. CÁC THẺ HTML CƠ BẢN. 8 BÀI 2: CSS CƠ BẢN. LẬP KẾ HOẠCH VÀ QUẢN LÝ, THAO TÁC TRÊN WEBSITE.
CÁC ĐỊNH DẠNG CSS. 12 Bài 3: CÀI ĐẶT VÀ SỬ DỤNG JOOMLA. CÀI ĐẶT VÀ CẤU HÌNH JOOMLA. SỬ DỤNG CÁC CHỨC NĂNG CHÍNH CỦA JOOMLA.
CÀI ĐẶT VÀ SỬ DỤNG COMPONENT, MODULE, PLUGIN VÀ TEMPLATE. 45 BÀI 4: SỬ DỤNG CÁC ĐỐI TƢỢNG JOOMLA. SỬ DỤNG CÁC ĐỐI TƢỢNG HỖ TRỢ LẬP TRÌNH JOOMLA.TÌM HIỂU CẤU TRÚC TỔ CHỨC THƢ MỤC JOOMLA. TÌM HIỂU CẤU TRÚC URI.
LÀM VIỆC VỚI CÁC ĐỐI TƢỢNG: REQUEST, FACTORY, SESSION,. 61 BÀI 5: QUẢN TRỊ CƠ SỞ DŨ LIỆU TRONG JOOMLA. CẤU HÌNH KẾT NỐI CƠ SỞ DỮ LIỆU TRONG JOOMLA. SỬ DỤNG CÁC HÀM TRUY VẤN DỮ LIỆU TỪ DATABASE.
SỬ DỤNG JTABLE. 66 BÀI 6: SỬ DỤNG COMPONENT. GIỚI THIỆU CẤU TRÚC COMPONENT JOOMLA. SỬ DỤNG MÔ HÌNH MVC TRONG COMPONENT.
TẠO CÁC DẠNG HIỂN THỊ FEED, PDF, RAW. SỬ DỤNG THAM SỐ. 72 BÀI 7: SỬ DỤNG MODULE. GIỚI THIỆU CẤU TRÚC MODULE JOOMLA.
SỬ DỤNG THAM SỐ. TẠO LAYOUT CHO MODULE. SỬ DỤNG HELPER FILE. 76 BÀI 8: SỬ DỤNG PLUGIN.
GIỚI THIỆU CẤU TRÚC PLUGIN JOOMLA. SỬ DỤNG EVENT VÀ LISTENERS. 78 BÀI 9: SỬ DỤNG EXTENSION.SỬ DỤNG CÁC LỚP HỖ TRỢ LẬP TRÌNH. SỬ DỤNG HELPER.
SỬ DỤNG SESSION, BROWSER,. 81 BÀI 10: SỬ DỤNG TEMPLATE. GIỚI THIỆU CẤU TRÚC TEMPLATE JOOMLA. SỬ DỤNG CSS, JAVASCRIPT VÀ HÌNH ẢNH.
ĐỊNH NGHĨA POSITION CHO MODULE VÀ COMPONENT TRONG TEMPLATE. XÂY DỰNG TEMPLATE CHO FRONT-END VÀ BACK-END. 86 BÀI 11: SỬ SỤNG API. SỬ DỤNG CÁC API JOOMLA.
SỬ DỤNG CÁC CLASS: DATE, FILE, ARRAY, TREE,. 88 CÁC THUẬT NGỮ CHUYÊN MÔN. 90 TÀI LIỆU THAM KHẢO. 91 4 GIÁO TRÌNH MÔ ĐUN Tên mô đun: THIẾT KẾ VÀ CẤU HÌNH WEBISTE Mã mô đun: MĐ 20 I.
VỊ TRÍ, TÍNH CHẤT CỦA MÔ ĐUN 1. Vị trí: thuộc nhóm Mô đun chuyên môn nghề 2. Tính chất: Là Mô đun chuyên môn bắt buộc trong ngành quản trị mạng máy tính hệ Cao đẳng II. MỤC TIÊU CỦA MÔ ĐUN - Kiến thức: + Nêu và ứng dụng các thẻ HTML + Tổ chức thông tin trên trang chủ web + Định hướng được các cách liên kết đến các trang web + Đưa ra được ý tưởng về giao diện + Có khả năng sử dụng dụng các thẻ HTML + Trình bày được thế nào là Hệ thống quản trị nội dung CMS, hiểu rõ ưu nhược điểm khi sử dụng hệ thống quản trị nội dung CMS để xây dựng website + Trình bày được hệ thống quản trị nội dung Joomla.
+ Trình bày được quy trình cài đặt và cấu hình Joomla. + Hiểu biết các đối tượng trong Joomla. + Hiểu rõ cấu trúc các đối tượng: Component, Module, Plugin, Extention, Template, API trong Joomla. - Kỹ năng: + Sử dụng các thẻ HTML để thiết kế được trang web + Thiết kế được giao diện của các trang trên website + Thực hiện cài đặt và cấu hình được Joomla + Tìm kiếm và cài đặt sử dụng các thành phần mở rộng: Component, Module, Plugin.
+ Tạo được các thành phần mở rộng đơn giản. + Cài đặt và sử dụng được template. Tạo mới template. - Năng lực tự chủ và trách nhiệm.
+ Cẩn thận, tỉ mỉ, tự giác học tập và nghiên cứu. Nội dung của mô đun Thời gian (giờ) Tên các bài trong TT Tổng Lý Thực Kiểm mô đun số thuyết hành tra 1 Bài 1: Ngôn ngữ HTML 20 5 13 2 5 2 Bài 2: Css cơ bản 25 10 13 2 3 Bài 3: Cài đặt và sử dụng Joomla 4 2 2 4 Bài 4: Sử dụng các đối tượng Joomla 4 2 2 5 Bài 5: Quản trị cơ sở dữ liệu trong joola 4 2 2 6 Bài 6: Sử dụng Componet 4 2 2 7 Bài 7: Sử dụng Module 8 2 5 1 8 Bài 8: Sử dụng Plugin 4 2 2 9 Bài 9: Sử dụng Extension 4 2 2 10 Bài 10: Sử dụng Template 4 1 3 11 Bại 11: Sử dụng API 5 1 4 12 Bài 12: Ôn tập 4 4 Cộng 90 30 54 6 6 BÀI 1: NGÔN NGỮ HTML Giới thiệu: HTML là kiến thức cơ bản mà bất cứ ai muốn học lập trình web hoặc học thiết kế web đều phải biết. Tất cả các trang web dù xử lý phức tạp đến đâu đều phải trả về dưới dạng mã nguồn HTML để trình duyệt có thể hiểu và hiển thị lên được. Mục tiêu: - Trình bày và sử dụng được cấu trúc của một trang HTML - Thiết kế được trang web bằng ngôn ngữ HTML Nội dung chính: I.
KHÁI QUÁT VỀ TRANG WEB Ngôn ngữ đánh dấu siêu văn bản (html) chỉ rõ một trang Web sẽ được hiển thị như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử html, bạn có thể: Điều khiển hình thức và nội dung của trang Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu html Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash và các Java Applet vào tài liệu html Tài liệu html tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web hiển thị như thế nào. Trình duyệt đọc các file có đuôi .html và hiển thị trang web đó theo các lệnh có trong đó.
Ví dụ, theo cú pháp html dưới đây sẽ hiển thị thông điệp “My first html document” <html> <head> <title>Welcome to html</title> </head> <body> <H3>My first html document</H3> </body> </html> Trình duyệt thông dịch những lệnh này và hiển thị trang web như hình sau: Hình 1.1 Trang web cơ bản html 7 II. CẤU TRÚC CƠ BẢN CỦA TRANG WEB Một tài liệu html gồm 3 phần cơ bản: Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết thúc bằng thẻ đóng html </html> <html> </html> Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>.
Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm. Phần thân: phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình.
Phần thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body> Ví dụ: <html> <head> <title>Welcome to the world of html</title> </head> <body> <P>Chào mừng các bạn đến với Khoa CNTT</P> </body> </html> III. CÁC THẺ HTML CƠ BẢN 1. Thẻ <h>: trình bày tiêu đề cho phần nội dung hiển thị trên trang web. Cú pháp: <hn> Nội dung tiêu đề </hn> với n: từ 1 đến 6 b.
Ví dụ: <h1> Xin chào các bạn ! </h1> <h2> Thiết kế web với html </h2> 2. Thẻ <a>: liên kết đến trang web cục bộ hoặc trang web khác a. Cú pháp: <a href=” địa chỉ liên kết”> Nội dung tiêu đề </a> b. Ví dụ: <a href=”http://agvc.vn”> Trường cao đẳng nghề An giang </a> 3.
Thẻ <img>: hiển thị hình ảnh a. Cú pháp: 8 <img src=”địa chỉ hình ảnh” alt=”thuộc tính” width =”chiều dài” height=”chiều cao” /> b. Ví dụ: <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142" /> 4. Thẻ <b>, <i>, <u>: in đậm, in nghiêng, gạch chân a.
Cú pháp: <b>Nội dung </b> <i> Nội dung </i> <u> Nội dung </u> b. Ví dụ: <b>Quản trị mạng máy tính </b> <i>Quản trị mạng máy tính </i> <b><i>Quản trị mạng máy tính </i> </b> 5. Thẻ <br>: xuống dòng a. Cú pháp: Nội dung vẳn bản <br/> b.
Ví dụ: <b>Khoa công nghệ thông tin </b> <br/> <i>Quản trị mạng máy tính</i> 6. Thẻ <ul>, <ol>: tạo danh sách không thứ tự và có thứ tự a. Cú pháp: <ul><li></li></ul> <ol><li></li></ol> b. Ví dụ: <h2>Danh sách không có thứ tự </h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>Danh sách có thứ tự</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 7.
Thẻ <p>, <div>: định dạng đoạn văn bản a. Cú pháp: <p align=”vị trí” >Nội dung</p> align=” left, right, center” b. Ví dụ: <p align=” center”>Thiết kế web với HTML cơ bản</p> 8. Thẻ <table>: tạo bảng a.
Cú pháp: <table> <tr><td>Nội dung dòng 1 cột 1</td></tr> 9 <tr><td>Nội dung dòng 2 cột 1</td></tr> </table> b.