Lý thuyết Tin 12 Kết nối tri thức Bài 18: Thực hành tổng hợp thiết kế trang web

Voucher giảm giá Shopee dịp 15-08

Với tóm tắt lý thuyết Tin học 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 nhất, ngắn gọn sẽ giúp học sinh lớp 12 nắm vững kiến thức trọng tâm, ôn luyện để học tốt môn Tin 12.

Lý thuyết Tin 12 Kết nối tri thức Bài 18: Thực hành tổng hợp thiết kế trang web

Quảng cáo

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.

Quảng cáo

Lý thuyết Tin 12 Kết nối tri thức Bài 18: Thực hành tổng hợp thiết kế trang web

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.

Quảng cáo

Lý thuyết Tin 12 Kết nối tri thức Bài 18: Thực hành tổng hợp thiết kế trang web

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.

Quảng cáo

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

Lý thuyết Tin 12 Kết nối tri thức Bài 18: Thực hành tổng hợp thiết kế trang web

Xem thêm tóm tắt lý thuyết Tin học lớp 12 Kết nối tri thức hay khác:

Sách VietJack thi THPT quốc gia 2024 cho học sinh 2k6:

Săn shopee giá ưu đãi :

ĐỀ THI, GIÁO ÁN, GÓI THI ONLINE DÀNH CHO GIÁO VIÊN VÀ PHỤ HUYNH LỚP 12

Bộ giáo án, đề thi, bài giảng powerpoint, khóa học dành cho các thầy cô và học sinh lớp 12, đẩy đủ các bộ sách cánh diều, kết nối tri thức, chân trời sáng tạo tại https://tailieugiaovien.com.vn/ . Hỗ trợ zalo VietJack Official