BÀI THỰC HÀNH SỐ 10 - THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB (TRANG 103)

Bài thực hành số 10 - Thực hành tổng hợp thiết kế trang web (trang 103)

Thực hành tổng hợp thiết kế trang web (trang 103). Đây là phần thực hành của bài 18 - Thực hành tổng hợp thiết kế trang web - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

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.

Code tham khảo file styles.css ➺ Tải file

Code tham khảo file index.html ➺ Tải file

Code tham khảo file thethao.html ➺ Tải file

Code tham khảo file nghethuat.html ➺ Tải file

Lưu ý:
- Trên đây chỉ là code tham khảo, chỉ đáp ứng được các yêu cầu tối thiểu. Các em phải chỉnh sửa lại code để trang web sinh động hơn.
- Tất cả các file phải lưu trong cùng thư mục.
- Form đăng ký tham gia CLB là sử dụng form của Google, nếu muốn viết code cho form thì phải viết thêm code cho file xuly.php và cài thêm phần mềm hỗ trợ sever thì mới sử dụng được nút submit.
Chỗ nào chưa rõ thì trao đổi trực tiếp với thầy. Chúc các em tạo được trang web như mong muốn.

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Kết nối tri thức
☞ Lý thuyết tin học 12 - Kết nối tri thức
☞ Thực hành tin học 12 - Kết nối tri thức
☞ Gợi ý trả lời tin học 12 - Kết nối tri thức
☞ Trắc nghiệm tin học 12 - Kết nối tri thức
☞ Bài giảng điện tử tin học 12 - Kết nối tri thức

BÀI THỰC HÀNH SỐ 10 - THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB (TRANG 103)

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem