任务6-5：整合网站首页所有区域-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

教学过程设计 任务6-5：整合网站首页所有区域。 （2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务 引入 项目分析 教师讲授 启发引入 多媒体 教师：问题提问 学生：问题讨论 知识讲解 (1) header区域：包含网站logo、响应式导航栏和内联表单。 (2) carousel区域：轮播图展示区。 (3) 领养要求区域：使用网格系统设置，在PC端水平排列，在移动端垂直排列。 (4) animal展示区域：根据区域右上角不同动物种类的点击索引，切换区域展示的动物图片。 (5) 横幅区域：使用布局容器和背景属性设置实现PC端和移动端图像全覆盖。 (6) footer区域：使用布局容器和媒体查询实现内容自适应PC端和移动端。 启发讲解 讨论归纳 多媒体 课件演示 教师：知识讲解 学生：记录笔记 师生互动交流 示范 操作 操作1：整合“流浪动物领养”网站首页所有区域。 问题引导 操作演示 分析归纳 多媒体 系统演示 老师：操作演示 学生：观摩思考 老师：归纳总结 实战 训练 实战1：完成“流浪动物领养”网站首页。 动手实践 做中学 多媒体 系统操作 学生：实践操作 老师：巡视检查 评估 讨论 (1) 展示学生实战任务完成的效果。 (2) 评估讨论实战任务完成的正确性。 (3) 评估讨论实战任务完成的规范性； (4) 记载学生实战认为完成的考核结果。 教师启发 讨论归纳 分数激励 实训项目单 学生：演示交流 老师：点评激励 课堂 总结 (1) 归纳总结Bootstrap综合项目。 教师讲解 多媒体 课件演示 学生：整理笔记 老师：引导创新 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $