Giáo án tích hợp AI Tin học 12 KHMT Bài 18: Thực hành tổng hợp thiết kế trang web

Xem mẫu

Giáo án điện tử Tin học 12 (Định hướng Khoa học máy tính) 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.

I. NỘI DUNG CHI TIẾT BÀI HỌC

Phân tích bố cục: Xác định các thành phần chính như Header (Banner, Slogan), Phần nội dung chính, và Footer.
Tổ chức tệp: Tạo cấu trúc trang chủ (index.html) và các trang riêng cho từng nội dung, sử dụng liên kết để kết nối các trang.
Thiết kế CSS chung: Sử dụng một tệp style.css duy nhất để định dạng thống nhất toàn bộ trang web.

Dàn hàng ngang: Sử dụng lớp bao ngoài (row) kết hợp với thuộc tính display: flex để dàn các khối (block_3) nằm ngang đồng đều.
Tối ưu hóa hiển thị: Sử dụng thuộc tính flex-wrap để đảm bảo các thành phần tự động xuống hàng khi không đủ không gian.
Ví dụ tiêu biểu:

CSS

.row { display: flex; flex-wrap: wrap; }

.block_3 { flex: 0 0 auto; width: 33.3333333%; }

II. KIẾN THỨC TRỌNG TÂM

Một website chuyên nghiệp cần có bố cục rõ ràng giữa đầu trang, nội dung chính và cuối trang.
Sử dụng tệp CSS ngoài là phương pháp tối ưu để quản lý và đồng bộ giao diện cho toàn bộ hệ thống trang web.
Thuộc tính display: flex là công cụ mạnh mẽ để tạo bố cục dàn trang theo hàng ngang hoặc cột dọc.
Việc chia nhỏ nội dung vào các thẻ div với các class cụ thể giúp kiểm soát định dạng chi tiết từng phần tử.
Website nên bao gồm trang chủ và các trang chi tiết được liên kết chặt chẽ với nhau để người dùng dễ dàng điều hướng.

III. BỐ CỤC SLIDE PPTX

Slide 1: Tiêu đề
- Tiêu đề: BÀI 18: THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB
- Nội dung: Họ và tên, Năm học 2026 - 2027.
Slide 2: Phân tích dự án
- Tiêu đề: Cấu trúc Website
- Nội dung: Các phần chính: Banner, Slogan, Nội dung chính, Footer.
Slide 3: Kỹ thuật dàn trang
- Tiêu đề: Dàn hàng ngang với Flexbox
- Nội dung: Sử dụng display: flex, flex-wrap và phân chia tỉ lệ width.
Slide 4: Quản lý mã nguồn
- Tiêu đề: Tổ chức tệp tin
- Nội dung: Tầm quan trọng của tệp style.css dùng chung và cấu trúc thư mục HTML.
Slide 5: Thực hành
- Tiêu đề: Các bước thực hiện
- Nội dung: Xây dựng HTML, viết CSS, kiểm tra liên kết giữa các trang.
Slide 6: Tổng kết
- Tiêu đề: Hoàn thiện Website
- Nội dung: Đánh giá tính thẩm mỹ, thống nhất và khả năng điều hướng của website.