BÀI 18: THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB
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
Để xây dựng một website hoàn chỉnh, chúng ta cần lên kế hoạch về cấu trúc và giao diện trước khi bắt tay vào viết mã.
- Tổ chức cấu trúc website: Website thường gồm một trang chủ và các trang thành viên chi tiết. Các trang này liên kết với nhau và sử dụng chung một phong cách thiết kế.
- Thống nhất giao diện: Sử dụng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web nhằm đảm bảo sự đồng bộ và tiết kiệm thời gian.
2. THỰC HÀNH
Nhiệm vụ 1: Tạo tệp CSS
Nhiệm vụ này yêu cầu thiết lập bố cục (layout) và định dạng màu sắc, vị trí cho các thành phần trang web.
- Đầu trang (Header – Banner): Sử dụng ảnh nền, căn chỉnh khoảng cách và nội dung chữ nổi bật.
- Thiết lập hàng (Row) và cột (Column): Sử dụng Flexbox để dàn trang các khối nội dung nằm ngang hàng nhau thay vì dọc.
- Chia tỉ lệ kích thước (Slogan/Nội dung): Thiết lập độ rộng phần trăm cho các ô để chia đều không gian.
Nhiệm vụ 2: Tạo các tệp html
Sau khi có CSS, ta tạo khung xương HTML và gắn các lớp (class) đã định nghĩa vào.
- Tạo cấu trúc HTML: Sử dụng thẻ <div> kết hợp với thuộc tính class để gọi các định dạng từ file CSS.
- Lồng ghép các khối: Đặt các khối con vào trong khối cha để tạo bố cục lưới.
- Liên kết trang: Sử dụng thẻ <a> để nối các trang lại với nhau.
