Web前端开发技术（AIGC版） 教案-教学设计 第6单元 瀑布流相册的制作（教案5：2 学时.docx

教学设计

一、基本信息

课程名称

Web前端开发技术

课题名称

6.4瀑布流相册的制作

授课班级

授课时间

授课类型

理实一体化课、新授课

授课地点

机房（有网络）

授课学时

40分钟*2学时

教学方法

主导：项目引领“任务驱动”教学法；辅助：理实一体化教学法、案例演示法、讲练结合法、小组协作法

教学重点

1.运用Flex布局实现瀑布流相册的多列自适应布局

2.相册图片容器样式设计及图片自适应显示控制

教学难点

1.Flex布局实现瀑布流的列间距、对齐方式精准控制

2.结合媒体查询实现不同设备下瀑布流布局的响应式适配

学情分析

1.前置基础：已掌握HTML5标签应用、CSS3基础