KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
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.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 1: Trong quá trình thực hiện dự án xây dựng một website hoàn chỉnh để giới thiệu các câu lạc bộ ngoại khoá, trước khi bắt tay vào việc viết mã lệnh chi tiết, người thiết kế cần phải thực hiện công việc quan trọng nào đầu tiên?
Câu 2: Khi tổ chức cấu trúc và thiết kế cho một website bao gồm trang chủ và nhiều trang thành viên, việc 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ục đích cốt lõi nào sau đây?
Câu 3: Giả sử bạn đang thiết kế ba trang web riêng biệt gồm trang chủ, trang câu lạc bộ thể thao và trang nghệ thuật. Để cả ba trang này đều có cùng một màu nền và phông chữ đồng nhất, phương án thiết kế nào là tối ưu nhất?
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.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 4: Trong quá trình thực hiện nhiệm vụ tạo tệp CSS để thiết lập bố cục cho trang web, để dàn trang các khối nội dung nằm ngang hàng nhau thay vì xếp dọc từ trên xuống dưới, người lập trình sử dụng kĩ thuật nào?
Câu 5: Khi xây dựng phần hiển thị câu khẩu hiệu (Slogan) hoặc nội dung nổi bật gồm ba khối thông tin nằm cạnh nhau, việc thiết lập độ rộng theo phần trăm (ví dụ: width: 33.33%;) mang lại tác dụng chính xác nào cho giao diện?
Câu 6: Bạn đang viết mã CSS để định dạng phần đầu trang (Header - Banner) cho website câu lạc bộ. Để hiển thị một bức ảnh làm nền và căn giữa dòng chữ tiêu đề nổi bật bên trên bức ảnh đó, bạn cần sử dụng kết hợp những thuộc tính nào?
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.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 7: Sau khi đã hoàn tất việc tạo tệp CSS định dạng, bước tiếp theo là tạo cấu trúc khung xương HTML. Để gọi các định dạng từ file CSS áp dụng vào phần tử, người lập trình sử dụng thẻ <div> kết hợp với thuộc tính nào?
Câu 8: Trong quá trình xây dựng cấu trúc của tệp HTML, thao tác lồng ghép các khối nội dung (bằng cách đặt các khối con nằm gọn vào bên trong khối cha) được thực hiện nhằm giải quyết mục đích thiết kế giao diện nào sau đây?
Câu 9: Khi hoàn thành việc tạo mã HTML cho trang chủ (index.html) và trang câu lạc bộ thể thao (thethao.html), bạn muốn tạo một nút nhấn trên trang chủ để người dùng nhấp chuột và chuyển hướng sang trang thể thao. Bạn sẽ sử dụng thẻ nào để tạo sự liên kết này?