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

Bài 18 - Thực hành tổng hợp thiết kế trang web (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
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
2. Thực hành
Nhiệm vụ 1: Tạo tệp CSS
Nhiệm vụ 2: Tạo các tệp HTML

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

Website cần một trang chủ và các trang riêng cho từng nhóm hoặc từng 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, em có thể thiết kế website với ba thành viên trang tương ứng với trang chủ, trang giới thiệu các câu lạc bộ thể thao và các câu lạc bộ nghệ thuật.
Trang chủ sẽ chứa các thông tin chung nhất về các câu lạc bộ và liên kết tới các trang thành viên - ví dụ như trong Hình 18.1. Minh họa có thể tùy chọn vào các tài nguyên sẵn có - thường là ảnh và video. Các trang thành viên đăng thông tin chi tiết, lịch hoạt động, thành tích,… tùy nhu cầu. Ngoài ra, em có thể tạo thêm một trang chứa biểu mẫu để các bạn đă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 ta 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ữ,…) của 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ù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, cỡ chữ to, màu sắc nổi bật. Ví dụ, CSS để trang web hiển thị như Hình 18.1 được thiết lập như sau:

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

Ví dụ CSS cho slogan như Hình 18.3 được thiết lập như sau:

Với phần nội dung chính và cuối trang, ta thực hiện việc phân tích bố cục và thiết lập CSS hoàn toàn tương tự.
Sau khi hoàn thành, lưu tệp tin dưới tên style.css.

Nhiệm vụ 2: Tạo các tệp HTML

Yêu cầu: Tạo các tệp html index.html, thethao.html và nghethuat.html để tạo trang web theo phân tích ở Nhiệm vụ 1.
Hướng dẫn:
Để sử dụng các thiết lập CSS từ Nhiệm vụ 1, ta cần tạo các khối bằng thẻ div với các lớp CSS đã tạo. Ví dụ, để tạo khối banner cho trang chủ ta làm như sau:

Thực hiện tương tự cho cả ba tệp tin.
Chuẩn bị một số hình ảnh và video các hoạt động tại lớp/trường em để sử dụng trong mỗi trang web.
Tạo các liên kết từ trang chủ đến hai trang còn lại và đặt liên kết tới các trang khác ở phần cuối trang.

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH