Với tóm tắt lý thuyết Tin học lớp 12 Bài 18: Thực hành tổng hợp thiết kế trang web sách Kết nối tri thức hay, chi tiết giúp học sinh nắm vững kiến thức trọng tâm, ôn luyện để học tốt môn Tin học 12.

Tin học 12 Bài 18: Thực hành tổng hợp thiết kế trang web

A. Lý thuyết Tin học 12 Bài 18: Thực hành tổng hợp thiết kế trang web

1. Dự án: Xây dựng website giới thiệu các câu lạc bộ ngoại khoá của trường

Website cần một trang chủ và các trang riêng cho từng nhóm hoặc câu lạc bộ, tuỳ theo số lượng và thông tin hoạt động chi tiết của các câu lạc bộ. Ở mức đơn giản, bạn có thể thiết kế website với ba trang chính: trang chủ, trang giới thiệu các câu lạc bộ thể thao và trang giới thiệu các câu lạc bộ nghệ thuật.

Trang chủ sẽ chứa các thông tin chung về các câu lạc bộ và liên kết đến các trang thành viên, như trong Hình 18.1. Minh hoạ có thể sử dụng các tài nguyên sẵn có như ảnh và video. Các trang thành viên sẽ đăng thông tin chi tiết, lịch hoạt động, thành tích,... tuỳ nhu cầu. Bạn cũng có thể tạo thêm một trang chứa biểu mẫu để mọi người đăng kí tham gia.

Các trang nên tuân theo phong cách trình bày chung bằng cách sử dụng liên kết tới cùng một tệp tin CSS. Để thực hiện ý tưởng này, trước hết bạn cần lên ý tưởng về bố cục của từng phần trong một trang web rồi sử dụng CSS để định dạng (kích thước, vị trí, màu sắc, cỡ chữ,...) cho mỗi phần.

2. Thực hành

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.

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ó cùng định dạng.

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, với cỡ chữ to và màu sắc nổi bật. Ví dụ, CSS để trang web hiển thị như Hình 18.1.

-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, 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 và chứa 3 ô trên.

-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 hoà khi hiển thị. Trong phần nội dung, cách thiết lập tương tự, áp dụng cho việc chia hai cột bằng nhau trên mỗi hàng. Do đó, ta sẽ định nghĩa thêm lớp slogan (Hình 18.3) và lớp 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.

B. Trắc nghiệm Tin học 12 Bài 18: Thực hành tổng hợp thiết kế trang web