BÀI 18 - THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB

Bài 18 - Thực hành tổng hợp thiết kế trang web (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động	Luyện tập	Vận dụng

Khởi động (trang 102): 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.

Gợi ý trả lời:

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ẻ … 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.

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

Hoạt động (trang 102): 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?

Gợi ý trả lời:

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.
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.

2. THỰC HÀNH

LUYỆN TẬP

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.

Gợi ý trả lời:

- Tạo trang dang_ki.html chứa biểu mẫu đăng ký câu lạc bộ:

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ụ:

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.

Gợi ý trả lời:

- 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.
Vận dụng (trang 105): Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành. Viết định dạng theo thiết kế mới và chuyển toàn bộ website sang định dạng mới.

Gợi ý trả lời:

Để áp dụng thiết kế mới cho trang web đã tạo trong phần Thực hành, em cần thực hiện các bước sau:
- Tạo một tệp CSS mới và đặt tên là "style.css" (hoặc tên tùy chọn khác).
- Trong tệp CSS, thêm mã CSS để định dạng các phần tử theo thiết kế mới.
Ví dụ:
/* Định dạng phần banner */
.banner {
background: url("../assets/img/bg-masthead.jpg") no-repeat center center;
background-size: cover;
padding-top: 12rem;
padding-bottom: 12rem;
text-align: center;
color: darkred;
}
.banner h2 {
font-size: 36px;
font-weight: bold;
}
/* Định dạng phần slogan */
.slogan {
background-color: rgb(248, 249, 250);
text-align: center;
padding-right: 0.5rem;
padding-left: 3rem;
padding-top: 7rem;
padding-bottom: 7rem;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: -1;
max-width: 100%;
padding-right: 3rem;
padding-left: 3rem;
}
.block_3 {
flex: 0 0 33.33333333%;
}
.block_3 h3 {
font-size: 24px;
font-weight: bold;
}
.text-content {
font-size: 16px;
color: #333;
}

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH