Giáo án tích hợp AI Tin học 12 THUD Bài 18: Thực hành tổng hợp thiết kế trang web
Giáo án điện tử Tin học 12 (Định hướng TH ứng dụng) Bài 18: Thực hành tổng hợp thiết kế trang web. Sách kết nối tri thức mới nhất cho năm học 2026 - 2027. Có tích hợp video AI, điều chỉnh cấu trúc, kiến thức phù hợp với năm học mới để tạo ra một bản powerpoint hoàn thiện và chất lượng. Thầy/cô chỉ cần tải về và giảng dạy. Có thể chỉnh sửa dễ dàng.
=> Giáo án điện tử Tin học 12 TH ứng dụng Kết nối tri thức (Tích hợp video AI)
Các tài liệu bổ trợ
BÀI 18: THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB
I. NỘI DUNG CHI TIẾT BÀI HỌC
Xây dựng cấu trúc website Website cần trang chủ và các trang riêng cho từng nhóm hoặc câu lạc bộ. Trang web được thiết kế với các thành phần chính bao gồm: đầu trang (header), nội dung chính và cuối trang (footer). Sử dụng chung một tệp CSS để trình bày định dạng thống nhất cho toàn bộ các trang web.
Kỹ thuật bố cục trang web Sử dụng thẻ div để tạo các khối nội dung và áp dụng lớp CSS để định dạng. Bố cục nhiều cột: Sử dụng thuộc tính display: flex cho khối chứa (lớp Row) và chia tỷ lệ chiều rộng cho các khối con (ví dụ: width: 33.3333333% cho 3 cột). Ví dụ thiết lập lớp CSS cho khối banner: .banner { background: url("../assets/img/bg-masthead.jpg") no-repeat center center; background-size: cover; padding-top: 12rem; padding-bottom: 12rem; text-align: center !important; color: darkred !important; }
II. KIẾN THỨC TRỌNG TÂM
Phân tích cấu trúc website thành các thành phần logic như header, nội dung, footer trước khi bắt đầu thiết kế.
Sử dụng linh hoạt thẻ div kết hợp với các lớp CSS để tạo bố cục linh hoạt cho trang web.
Áp dụng kỹ thuật Flexbox (display: flex) là phương pháp tối ưu để dàn trang, chia cột và căn chỉnh các phần tử.
Tách biệt nội dung (HTML) và định dạng (CSS) giúp quản lý và thay đổi giao diện toàn bộ website một cách dễ dàng.
Việc đồng bộ liên kết giữa trang chủ và các trang con giúp người dùng điều hướng website thuận tiện.
III. BỐ CỤC SLIDE PPTX
Slide 1: THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB Chủ đề 4, Bài 18
Slide 2: LẬP KẾ HOẠCH XÂY DỰNG WEBSITE Xác định cấu trúc website gồm trang chủ và các trang con nội dung
Slide 3: PHÂN TÍCH BỐ CỤC TRANG WEB Chia website thành header, nội dung chính và footer
Slide 4: KỸ THUẬT DÀN TRANG VỚI CSS Sử dụng thẻ div và thuộc tính display flex để tạo bố cục cột
Slide 5: THIẾT LẬP ĐỊNH DẠNG CSS Sử dụng một tệp CSS duy nhất để áp dụng định dạng thống nhất
Slide 6: TẠO LIÊN KẾT VÀ HOÀN THIỆN Xây dựng tệp HTML và liên kết các trang trong website