Web前端开发之网页设计 教案 单元6 Bootstrap综合项目实战.docx

《Web前端开发之网页设计 教案 单元6 Bootstrap综合项目实战.docx》由会员分享，可在线阅读，更多相关《Web前端开发之网页设计 教案 单元6 Bootstrap综合项目实战.docx（6页珍藏版）》请在第一文库网上搜索。

1、Web前端开发之网页设计课程教学单元设计教学单元6Bootstrap综合项目实战授课教师：授课班级：学时：16教学条件预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件教学索材教材、教学文档、教学课件、案例项目库、教学平台等教学目标设计知识目标：BoOtStr叩下载与安装(2) BoOtStr叩的布局容器(3) Bootstrap的网格系统(4) BootStr叩的导航栏(5) Bootstrap的表单(6) BootStr叩的按钮(7) BootStr叩的轮播插件能力目标：(1)掌握BOOtStraP的安装。(2)掌握BootStraP的布局容器。熟悉Bootstra

2、p中的网格系统。(4)掌握使用BoOtStr叩制作导航栏。(5)掌握使用Bootstrap制作表单。(6)掌握使用Bootstrap制作轮播事件。教学内容(1) BOotStraP下载与安装。(2) Bootstrap的布局容器。(3) Bootstrap的网格系统。(4)使用BOotStraP制作导航栏。(5)使用Bootstrap制作表单。(6)使用Bootstrap制作轮播事件。重点：(1)使用bootstrap组件。(2)将各区域组合成完整的网页。难点t(1)网格系统的应用。轮播插件的应用。教学过程设计任务6T：项目描述与BOOtStraP概述。(2学时)主要步骤教学内容教学方法教学手

3、段师生活动任务引入Bootstrap综合项目描述教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)BootstrapfS介。Bootstrap的优势。(3)Bootstrap布局容器。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：BOotStraP下载和环境安装。操作2：使用B。IStraP提供的容器类演示布局容器的具体用法。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：Bootstrap下载和环境安装。实战2：使用容器类制作不同的布局容器。动手实践做中学多媒体系统操作学生：实践操作老师：巡

4、视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结Bootstrap的基本模板。归纳总结BOotStraP中不同的容器类制作不同的布局容器。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业制作“流浪动物领养”网站首页横幅区域。作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务6-2：掌握Bootstrap网格系统。(4学时)主要步源教学内容教学方法教学手段师生活动任务引入网格系统工作原理教师

5、讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) Bootstrap网格系统。(2) offset列偏移列排序媒体查询启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用.co1-网格系统实现不同的布局效果。操作2：offsetpushpu11实现列偏移与列排序。操作3：使用媒体查询实现不同设备页面呈现不同样式。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：制作“流浪动物领养”网站首页领养要求区域。实战2：制作“流浪动物领养”网站首页footer区域动手实践做中学多媒体系统操作学生：实践操作老师

6、：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结Bootstrap网格系统。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业制作“流浪动物领养”网站首页anima1展示区域。作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务6-3：掌握BOotStraP基础组件：导航栏、表单及按钮。(4学时)主要步骤教学内容教学方法教学手段师生活动任务引入响应式导航栏教师讲授启发引入多媒体教师：问题提问学生：问题讨论知

7、识讲解(1)Bootstrap导航栏。Bootstrap表单。(3)Bootstrap按钮。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用nav标签定义导航容器。操作2：使用31、1i定义导航菜单。操作3：使用bootstrap提供的类设置折叠导航。操作4：使用bootstrap提供的类制作堆叠表单和内联表单操作5：使用bootstrap提供的类制作不同的按钮问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：制作响应式导航栏动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完

8、成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结Bootstrap导航栏。(2)归纳总结Bootstrap表单。归纳总结Bootstrap按钮教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业制作“流浪动物领养”网站首页header区域。作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务6-4：掌握Bootstrap轮播插件。(4学时)主要步骤教学内容教学方法教学手段师生活动任务引入轮播事件教师讲授启发引入多媒体教师：问题提问学生：问

9、题讨论知识讲解(1)轮播容器轮播计数器轮播图片(4)图片描述轮播控制器(6)声明式触发轮播启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：设计轮播容器操作2：设计轮计数器操作3：设置轮播图片操作4：添加图片描述操作5：设计轮播控制器操作6：声明式触发轮播问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：实现图片轮播动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；记载学生实战认为完成的考核结果。教师启发讨论归纳

10、分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结bootstrap轮播事件。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业制作“流浪动物领养”网站首页carouse1区域。作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务6-5：整合网站首页所有区域。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入项目分析教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) header区域：包含网站IOg0、响应式导航栏和内联表单。(2) CaroUSeI区域：轮播图展示区。领养要求区域：使用网格系统设置,在PC端水平排列，在移动端

11、垂直排列。(4)anima1展示区域：根据区域右上角不同动物种类的点击索引，切换区域展示的动物图片。横幅区域：使用布局容器和背景属性设置实现PC端和移动端图像全覆盖。(6)footer区域：使用布局容器和媒体查询实现内容自适应PC端和移动端。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：整合“流浪动物领养”网站首页所有区域。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：完成“流浪动物领养”网站首页。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结Bootstrap综合项目。教师讲解多媒体课件演示学生：整理笔记老师：引导创新