Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Giả sử website của em có nhiều tập html. Có thể hay không chỉ dùng tệp CSS duy nhất để định dạng cho toàn bộ các trang web? Nếu có thể hãy nêu các bước cần thực hiện.
Thảo luận nhóm và đại diện nhóm trả lời phần Khởi động.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời phần Khởi động:
Có thể sử dụng một tệp CSS duy nhất để định dạng cho nhiều trang HTML trong website.
Các bước thực hiện:
Bước 1: Xác định bố cục và viết các đoạn mã CSS cho từng loại đối tượng và lưu trong một tệp style.css
Bước 2: Trong cặp thẻ <head>…</head> của mỗi tệp HTML trong website, ta thêm một dòng mã trỏ tới tệp style.css đã viết ở trên.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thảo luận theo nhóm để trả lời các câu hỏi sau:
1. Tổ chức cấu trúc website như thế nào cho phù hợp?
2. Với mỗi câu lạc bộ sẽ đưa những thông tin gì?
3. Trình bày các trang web như thế nào cho đẹp và thống nhất với nhau?
4. Làm thế nào để website sinh động và đẹp mắt?
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Đại diện nhóm trả lời phần Hoạt động 1.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời phần Hoạt động 1:
1. Tổ chức cấu trúc website: 1 trang chủ, 2 trang con, mỗi trang con giới thiệu 1 CLB.
2. Thông tin cho mỗi câu lạc bộ:
- Trên trang chủ: Thông tin tên CLB, giới thiệu tóm tắt, hình ảnh minh hoạ.
- Trên trang con: Bài viết về hoạt động nổi bật của CLB
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời phần Hoạt động 1:
3. Trình bày trang web:
- Nên dùng cùng 1 kiểu định dạng cho 2 trang con 🡪 tạo 1 tệp CSS quy định các mẫu định dạng chung 🡪 áp dụng cho 2 trang con.
- Tạo 1 trang con 🡪 nhân bản và sửa chữa nội dung để tạo trang thứ 2.
4. Tạo website sinh động và đẹp mắt:
- Chèn các hình ảnh minh hoạ.
- Định dạng màu sắc và phông chữ phù hợp.
- Tạo khung để sắp xếp các nội dung
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Nhiệm vụ 1: Tạo tệp CSS.
Yêu cầu: Tạo tệp CSS để trình bày website như hình 18.2.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Hướng dẫn:
Với bố cục như Hình 18.2, mỗi thành phần (đầu trang, nội dung chính, cuối trang, banner, slogan, ảnh/nội dung) được định nghĩa bằng một lớp riêng hoặc sử dụng chung lớp nếu cùng định dạng.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Phần đầu trang gồm hai phần nhỏ:
- Banner: Có thể sử dụng một ảnh làm nền và tiêu đề là tiêu đề trang web, cỡ chữ to, màu sắc nổi bật. Ví dụ, CSS để trang web hiển thị như Hình 18.1 được thiết lập như sau:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
- Slogan: Trong Hình 18.1, slogan gồm 3 ô trên hàng ngang có định dạng giống nhau, mỗi ô có độ rộng bằng 1/3 độ rộng trang. Vì các ô giống nhau nên ta chỉ cần tạo một lớp CSS (đặt tên là block_3). Tuy nhiên khi sử dụng thẻ div, các ô này sẽ được xếp theo chiều dọc. Để hiển thị theo phương ngang, ta sẽ tạo ra một lớp Row có độ rộng bằng độ rộng trang, lớp Row chứa 3 ô trên.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Cách trình bày nhiều ô trong cùng một hàng được sử dụng phổ biến trong các trang web, tạo sự cân đối và hài hòa khi hiển thị. Trong phần nội dung, cách thiết lập hoàn toàn tương tự, áp dụng cho việc chia hai cột bằng nhau trên mỗi hàng. Do vậy, ta sẽ định nghĩa thêm lớp slogan (Hình 18.3) và lớp nội dung chính (content) để bao phía ngoài lớp Row. Mỗi lớp có thể có thêm các đặc tính trình bày riêng.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Ví dụ CSS cho slogan như Hình 18.3 được thiết lập như sau:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Với phần nội dung chính và cuối trang, ta thực hiện việc phân tích bố cục và thiết lập CSS hoàn toàn tương tự.
Sau khi hoàn thành lưu tệp tin dưới tên style.css.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Nhiệm vụ 2: Tạo các tệp HTML.
Yêu cầu: Tạo các tệp html index.html, thethao.html và nghethuat.html để tạo trang web theo phân tích ở Nhiệm vụ 1.
Hướng dẫn:
Để sử dụng các thiết lập CSS từ Nhiệm vụ 1, ta cần tạo các khối bằng thẻ div với các lớp CSS đã tạo. Ví dụ, để tạo khối banner cho trang chủ ta làm như sau:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Thực hiện tương tự cho cả ba tệp tin.
Chuẩn bị một số hình ảnh và video các hoạt động tại lớp/trường em để sử dụng trong mỗi trang web.
Tạo các liên kết từ trang chủ đến hai trang còn lại và đặt liên kết tới các trang khác ở phần cuối trang.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Luyện tập 1 (trang 105): Tạo trang dang_ki.html chứa biểu mẫu đăng kí câu lạc bộ và bổ sung liên kết tới trang dang_ki trong phần cuối trang của tất cả các trang.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời Luyện tập 1 (trang 105)
- Tạo trang dang_ki.html chứa biểu mẫu đăng ký câu lạc bộ:
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Bổ sung liên kết tới trang đăng ký trong phần cuối của tất cả các trang:
Mở từng tệp HTML khác trên trang web và thêm liên kết tới trang dang_ki.html trong phần cuối (footer) của mỗi trang. Ví dụ:
Gợi ý trả lời Luyện tập 1 (trang 105)
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời Luyện tập 1 (trang 105)
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Luyện tập 2 (trang 105): Thay đổi định dạng và màu sắc của phông chữ trong các vùng khi di chuyển chuột qua.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Gợi ý trả lời Luyện tập 2 (trang 105)
- Ví dụ đoạn code như sau:
Trong ví dụ trên, tất cả các đoạn văn (p) sẽ có màu đỏ và font chữ đậm khi di chuyển chuột qua.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
1. Dự án: Xây dựng website giới thiệu các câu lạc bộ ngoại khóa của trường�2. Thực hành� Nhiệm vụ 1: Tạo tệp CSS� Nhiệm vụ 2: Tạo các tệp HTML
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
1. Làm phần VẬN DỤNG (SGK trang 105)
2. Xem trước Bài 19. Dịch vụ sửa chữa và bảo trì máy tính (SGK trang 102)
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang
Các em làm trắc nghiệm Online để củng cố bài.
1. Đăng nhập vào trang thaycai.net
2. Nháy chọn Tin học 12
3. Nháy chuột vào Trắc nghiệm tin học 12 - Kết nối tri thức
4. Nháy chuột vào Bài 18. Thực hành tổng hợp thiết kế trang web.
Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang