Bài 18. Thực hành tổng hợp thiết kế trang web

SAU BÀI HỌC NÀY EM SẼ:

Giả sử website của em có nhiều tệp HTML. Có thể dùng chỉ một tệp CSS duy nhất để định dạng cho toàn bộ các trang web không? Nếu có thể, hãy nêu các bước cần thực hiện.

NGOẠI KHOÁ CỦA TRƯỜNG

Hoạt động

Thảo luận theo nhóm để trả lời các câu hỏi sau:

Website cần một trang chủ và các trang cho từng nhóm hoặc từng câu lạc bộ, tuỳ theo số lượng và nhu cầu thông tin 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 trang thành viên 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 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 hoạ có thể tuỳ chọn dựa vào các tài nguyên sẵn có, thường là ảnh và video. Các trang thành viên chứa thông tin chi tiết, lịch hoạt động, thành tích, tuỳ 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

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 trong 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 { background: url(' /assets/img/bg-masthead. jpg ) no-repeat center center; background-size cover; padding 12rem; padding-bottom: 12rem; textalign: center important; color: darkred important; top

Cách trình bày nhiều ô trong một hàng hoàn toàn tương tự, được sử dụng phổ biến trong các trang web, áp dụng cho việc chia thành hai cột trở lên trên mỗi hàng. 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:

slogan { background-color: rgb( 248, 249 , 250) !important; text-align: center !important; width 100%; padding-right: 0.Srem; padding-left: 3rem; padding-top Zrem; padding-bottom 7rem; } row { display: flex; flex-wrap: wrap; margin-top max-width: 100%; padding-right: 3rem; padding-left: 3rem; } block_3 { flex: 0 0 auto; width: 33.33333333%; 21;

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

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

<div class= banner <h2>CLB ngoại khoá trường THPT Nguyễn Bỉnh Khiêm</h2> <ldiv> Với khối slogan, ta cần tao ba thẻ div như đã phân tích, phần nội cần hiển thị của ô nẳm trong khối thẻ div trong <div class= slogan' <div class= row <div class= block_3 <h3>Năng động< /h3> <p class= 'text-content\">Hoạt động năng nổ và hiệu quả< /p> <div class= block 3 <h3>Đam mê</h3> <p class= text-content Cháy hết mình trong các cuộc chơi</p> <div class= block 3\"> <h3>Toả sáng</h3> <p class= text-content Giành những giải thưởng cao nhất</p> <ldiv> </div> </div> lớp dung từng cùng:

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 ở cuối trang.

LUYỆN TẬP

VẬN DỤNG

Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành. Viết CSS định dạng theo thiết kế mới và chuyển toàn bộ website sang định dạng mới.