Slide bài giảng Khoa học máy tính 12 Kết nối bài 18: Thực hành tổng hợp thiết kế trang web

Tóm lược nội dung

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.

Bài làm rút gọn:

Có thể.

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?

Bài làm rút gọn:

1. Trang chủ chứa thông tin chung về các câu lạc bộ và liên kết tới các trang thành viên. Các trang thành viên sẽ chứa thông tin chi tiết, lịch hoạt động, thành tích và có thể có một trang đăng ký tham gia.

2. Trên trang giới thiệu của mỗi câu lạc bộ, em có thể đưa ra thông tin như:

+ Tên câu lạc bộ, 

+ Các hoạt động của câu lạc bộ, 

+ Thành tích nổi bật của câu lạc bộ.

+ Các hoạt động và sự kiện quan trọng, 

+ Thành viên và huấn luyện viên, 

3. 

+ Sử dụng CSS để định dạng các phần tử trong trang web như kích thước, vị trí, màu sắc, cỡ chữ và kiểu chữ. 

+ Sử dụng cùng một tệp CSS để đảm bảo phong cách trình bày chung cho tất cả các trang.

4. 

+ Sử dụng các tài nguyên như ảnh và video để làm cho trang web trở nên sinh động. 

+ Em có thể sử dụng các hiệu ứng CSS như hover, transition và animation để thêm tính động và hiệu ứng tương tác cho trang web. 

+ Đồng thời, đảm bảo trang web có thiết kế thẩm mỹ, sử dụng màu sắc hài hòa, hình ảnh chất lượng cao và bố cục hợp lý để tạo sự hấp dẫn cho người dùng.

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.

Bài làm rút gọn:

Em 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 của em, 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, em 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.

- Sau khi tạo xong trang "dang_ki.html", em cần 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 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.

Bài làm rút gọn:

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

Sau đây là 1 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.

Bài làm rút gọn:

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.

Sau đây là một 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;

}