Lý thuyết Tin học 12 Kết nối tri thức bài 18
Chúng tôi xin giới thiệu bài Lý thuyết Tin học 12 bài 18: Thực hành tổng hợp thiết kế trang web có toàn bộ lý thuyết và câu hỏi trắc nghiệm có trong chương trình sách mới. Thông qua đây các em học sinh đối chiếu với lời giải của mình, hoàn thành bài tập hiệu quả.
Bài: Thực hành tổng hợp thiết kế trang web
A. Lý thuyết Tin học 12 bài 18
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ộ, tùy 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
Yêu cầu: Tạo tệp CSS để trình bày website như Hình 18.2.
-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.
-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
1. Câu trắc nghiệm nhiều phương án lựa chọn
Câu 1: Lớp "block_3" được dùng để định dạng gì?
A. Hình ảnh
B. Văn bản
C. Các ô có độ rộng bằng nhau
D. Banner
Đáp án: C
Giải thích: Lớp "block_3" được dùng để định dạng các ô có độ rộng bằng nhau, chẳng hạn như trong phần slogan.
Câu 2: Để các ô được xếp theo hàng ngang, cần định nghĩa lớp CSS nào?
A. Row
B. block_3
C. Content
D. Header
Đáp án: A
Giải thích: Lớp "Row" được dùng để chứa các ô và hiển thị chúng theo hàng ngang.
Câu 3: Website có thể sử dụng những tài nguyên nào để minh họa?
A. Chỉ ảnh
B. Chỉ video
C. Chỉ văn bản
D. Ảnh và video
Đáp án: D
Giải thích: Website có thể sử dụng các tài nguyên sẵn có như ảnh và video để minh họa.
Câu 4: Cách trình bày nhiều ô trong cùng một hàng giúp gì cho trang web?
A. Tăng tốc độ tải trang
B. Tạo sự cân đối và hài hoà khi hiển thị
C. Giảm dung lượng trang
D. Tăng số lượng trang
Đáp án: B
Giải thích: Cách trình bày nhiều ô trong cùng một hàng giúp tạo sự cân đối và hài hoà khi hiển thị trên trang web.
Câu 5: Để mọi người đăng ký tham gia các câu lạc bộ, trang web cần có thêm trang nào?
A. Trang chủ
B. Trang giới thiệu
C. Trang liên hệ
D. Trang chứa biểu mẫu đăng ký
Đáp án: D
Giải thích: Một trang chứa biểu mẫu đăng ký sẽ giúp mọi người dễ dàng tham gia vào các câu lạc bộ.
Câu 6: Trang web cần có ít nhất bao nhiêu trang chính theo bài học?
A. 1
B. 2
C. 3
D. 4
Đáp án: C
Giải thích: Bài học đề cập rằng website có thể có 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.
Câu 7: Tệp CSS được sử dụng trong thiết kế web để làm gì?
A. Định dạng văn bản
B. Định dạng hình ảnh
C. Định dạng trang web
D. Định dạng âm thanh
Đáp án: C
Giải thích: CSS (Cascading Style Sheets) được sử dụng để định dạng trang web, bao gồm định dạng bố cục, màu sắc, kích thước, vị trí các thành phần, và hơn thế nữa.
Câu 8: Trong ví dụ của bài học, slogan được đặt trong bao nhiêu ô trên một hàng?
A. 1
B. 2
C. 3
D. 4
Đáp án: C
Giải thích: Slogan được đặt trong 3 ô ngang, mỗi ô chiếm 1/3 độ rộng của trang, tạo sự cân đối và hài hòa.
Câu 9: Lớp CSS nào được tạo để hiển thị các ô theo chiều ngang?
A. block_3
B. Row
C. Slogan
D. Content
Đáp án: B
Giải thích: Lớp "Row" được tạo để chứa các ô và hiển thị chúng theo chiều ngang, bao gồm 3 ô trong trường hợp của slogan.
Câu 10: Phần đầu trang của website gồm mấy phần chính theo Hình 18.2?
A. 1
B. 2
C. 3
D. 4
Đáp án: B
Giải thích: Phần đầu trang gồm hai phần nhỏ: Banner và Slogan.
2. Câu trắc nghiệm đúng sai
Câu 1: Chọn Đúng hoặc Sai cho các phát biểu sau:
a) Website cần có một trang chủ và các trang riêng cho từng nhóm hoặc câu lạc bộ.
b) Tất cả các trang của website đều phải tuân theo phong cách trình bày chung thông qua liên kết tới cùng một tệp tin CSS.
c) Các trang thành viên không cần thiết phải có thông tin chi tiết về lịch hoạt động của câu lạc bộ.
d) Trang web không cần có trang chứa biểu mẫu để đăng ký tham gia các câu lạc bộ.
Trả lời
a) Đúng: Trang chủ và các trang riêng cho từng nhóm hoặc câu lạc bộ là yêu cầu cơ bản của dự án.
b) Đúng: Các trang nên tuân theo phong cách trình bày chung bằng cách sử dụng cùng một tệp tin CSS.
c) Sai: Các trang thành viên có thể đăng thông tin chi tiết, lịch hoạt động, thành tích,... tuỳ nhu cầu.
d) Sai: 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 câu lạc bộ.
Câu 2: Chọn Đúng hoặc Sai cho các phát biểu sau:
a) Mỗi thành phần của trang web như đầu trang, nội dung chính, cuối trang, banner, slogan,... nên được định nghĩa bằng một lớp CSS riêng.
b) Banner trong phần đầu trang có thể sử dụng ảnh làm nền và tiêu đề của trang web với cỡ chữ nhỏ.
c) Để hiển thị các ô theo phương ngang trong phần slogan, lớp Row có độ rộng bằng độ rộng trang được sử dụng.
d) Các ô trong lớp "block_3" sẽ được xếp theo chiều dọc nếu không có lớp Row bao quanh.
Trả lời
a) Đúng: Mỗi thành phần có thể được định nghĩa bằng một lớp CSS riêng hoặc sử dụng chung lớp nếu có cùng định dạng.
b) Sai: Banner có thể sử dụng ảnh làm nền và tiêu đề của trang web với cỡ chữ to và màu sắc nổi bật.
c) Đúng: Lớp Row được tạo ra để chứa 3 ô trên và hiển thị chúng theo phương ngang.
d) Đúng: Nếu không có lớp Row, các ô trong lớp "block_3" sẽ được xếp theo chiều dọc khi sử dụng thẻ div.
3. Câu trả lời ngắn
Câu 1: Trang chủ của website có chức năng gì theo bài học?
Đáp án: Trang chủ 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.
Giải thích: Trang chủ là nơi tập trung các thông tin tổng quát và liên kết đến các trang con, giúp người dùng dễ dàng điều hướng và tìm kiếm thông tin về các câu lạc bộ.
Câu 2: Tại sao các trang trong website cần sử dụng cùng một tệp tin CSS?
Đáp án: Để tuân theo phong cách trình bày chung và đảm bảo sự nhất quán trong thiết kế.
Giải thích: Sử dụng cùng một tệp tin CSS cho tất cả các trang giúp giữ nguyên phong cách thiết kế, tạo ra sự thống nhất và chuyên nghiệp cho website, đồng thời dễ dàng quản lý và cập nhật.
Câu 3: Lớp CSS "block_3" được sử dụng để làm gì trong thiết kế trang web?
Đáp án: Để định dạng các ô có độ rộng bằng 1/3 độ rộng trang, như trong phần slogan.
Giải thích: Lớp "block_3" giúp định dạng các ô trên cùng một hàng có cùng kích thước, tạo ra sự cân đối và nhất quán trong hiển thị, đặc biệt là trong phần slogan của trang web.
>>>> Bài tiếp theo: Lý thuyết Tin học 12 Kết nối tri thức bài 19
