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

KHỞI ĐỘNG

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.

Giải rút gọn:

Em có thể sử dụng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web trên website của Em.

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 1:Thảo luận theo nhóm

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?

Giải rút gọn:

1. Tổ chức cấu trúc website: Xác định các trang chính và nội dung cần hiển thị trên mỗi trang, bao gồm trang chủ và các trang giới thiệu các câu lạc bộ thể thao và nghệ thuật.

2. Cung cấp thông tin chi tiết cho mỗi câu lạc bộ: Bao gồm tên, mô tả, thành viên, huấn luyện viên, hoạt động, sự kiện và thành tích.

3. Thiết kế trang web: Sử dụng CSS để định dạng kích thước, vị trí, màu sắc, cỡ chữ và kiểu chữ, đồng thời duy trì phong cách trình bày chung.

4. Tạo trang web sinh động: Sử dụng ảnh, video và hiệu ứng CSS như hover, transition và animation để làm cho trang web trở nên sống động và tương tác. Đảm bảo thiết kế thẩm mỹ và hấp dẫn với màu sắc hài hòa và bố cục hợp lý.

LUYỆN TẬP

Câu 1: 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.

Giải rút gọn:

- Để 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, bạn có thể làm như sau:

+ Tạo tệp tin HTML mới và đặt tên là "dang_ki.html".

+ Trong tệp tin "dang_ki.html", tạo biểu mẫu đăng ký câu lạc bộ bằng cách sử dụng các phần tử HTML như <form>, <input>, và <button>.

+ Thiết kế biểu mẫu theo yêu cầu, bao gồm các trường nhập thông tin và nút gửi đăng ký.

+ Sau khi hoàn thành biểu mẫu, bạn có thể thêm CSS để định dạng giao diện biểu mẫu theo ý muốn, sử dụng các lớp CSS để tạo kiểu cho các phần tử trong biểu mẫu.

+ Bổ sung liên kết tới trang "dang_ki.html" trong phần cuối trang của tất cả các trang khác trong website.

Câu 2: 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.

Giải rút gọn:

Để 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, em có thể sử dụng hiệu ứng hover trong CSS.

Ví dụ:

VẬN DỤNG

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.

Giải rút gọn:

Để á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;

}