HTML5移动Web开发任务教程（慕课版） 教案全套 单元设计-单元1-8 初识HTML5-综合项目制作

七、教学过程设计-（1）bootstrap的安装（2学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生教师首先介绍，本单元要完成的项目Bootstrap餐饮类网站首页，然后根据项目描述来展示该项目要实现的效果，接着引出完成该项目所需要的知识点：Bootstrap简介、Bootstrap下载和环境安装、布局容器和导航栏。通过爱课程平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑（1）什么是框架？（2）如何应用bootstrap？查看在线学习平台公告，提前通过平台观看微课程视频、阅读教材预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、1、《移动Web开发》课程在线教学平台教材中国大学MOOC慕课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生引例描述：餐饮类网站首页。设疑：同学们，一个完整的网页需要包含哪些部分？参考以前代码的编写经验，如何实现自适应的效果1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：25分钟教学内容师生活动教学方法教学手段教师学生下载bootstrapBootstrap的基本模板依赖的文件引用布局容器1、引导学生借助在线课程平台获取知识进行自主探究；2、组织学生讨论和分享；3、参数讲解和对比分析；4、通过课件进行归纳小结。1、学生登录在线课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践操练提前做好铺垫。步骤4：讲练结合时间：40分钟教学内容师生活动教学方法教学手段教师学生1、安装bootstrap框架，实现首页效果。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现；3、学生动手实践。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、中国大学MOOC慕课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤5：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、企业专家点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、中国大学MOOC慕课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。从学生的科学精神、技术创新等提升情况探索个性增值评价。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤6：自主创新教学内容师生活动教学方法教学手段教师学生课后作业：框架是页面设计使用的重点，参考实际网站效果，选择一个主题，自主创新设计，要求：1、页面样式、色调统一、和谐；2、版面划分清楚，窗口缩放时版面正常显示；3、实现页面整体布局。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，发挥想象力和创造力，不断提高自身信息素养。七、教学过程设计-（2）Bootstrap布局容器和栅格系统（2学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：Bootstrap的布局容器Bootstrap的栅格系统1、通过爱课程平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑（1）页面中的内容如何居中显示？（2）页面中的内容如何水平分布查看在线学习平台公告，提前通过平台观看微课程视频、阅读教材预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、1、《移动Web开发》课程在线教学平台2、教材3、中国大学MOOC慕课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生引例描述：案例页面的导航栏。设疑：同学们，网页内容水平分布可以如何实现呢？使用框架可以简化设计过程。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：35分钟教学内容师生活动教学方法教学手段教师学生布局容器.container类.container-fluid类栅格系统Col-nCol-lg-nCol-md-n1、引导学生借助在线课程平台获取知识进行自主探究；2、组织学生讨论和分享；3、参数讲解和对比分析；4、通过课件进行归纳小结。1、学生登录在线课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践操练提前做好铺垫。步骤5：讲练结合时间：30分钟教学内容师生活动教学方法教学手段教师学生实践操练：调用Bootstrap导航栏，制作基础导航栏。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、中国大学MOOC慕课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：自主创新时间：5分钟教学内容师生活动教学方法教学手段教师学生引例实现：导航栏效果。创新提升：在引例的基础上，制作菜单折叠，以及显示汉堡按钮的效果。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、中国大学MOOC慕课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：5分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、企业专家点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、中国大学MOOC慕课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。从学生的科学精神、技术创新等提升情况探索个性增值评价。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后作业教学内容师生活动教学方法教学手段教师学生课后作业：根据案例网页效果，使用Bootstrap框架内容，找到对应元素，完成网页头部。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，发挥想象力和创造力，不断提高自身信息素养。七、教学过程设计-（3）Bootstrap制作表单（2学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课的内容，引出本节课主题教师首先介绍接下来要完成本项目的任务三热卖商品模块，完成本项目需要的知识点有：Bootstrap表单和按钮，本节课将讲解如何使用Bootstrap创建表单。通过爱课程平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑（1）怎么确保表单提交的完整性？（2）如何验证邮箱的格式？查看在线学习平台公告，提前通过平台观看微课程视频、阅读教材预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、1、《移动Web开发》课程在线教学平台教材中国大学MOOC慕课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生引例描述：案例页面表单部分。设疑：同学们，如何快速创建一个表单？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：25分钟教学内容师生活动教学方法教学手段教师学生Bootstrap制作表单创建垂直表单创建内联表单创建水平表单改变表单控件的样式1、引导学生借助在线课程平台获取知识进行自主探究；2、组织学生讨论和分享；3、参数讲解和对比分析；4、通过课件进行归纳小结。1、学生登录在线课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践操练提前做好铺垫。步骤4：讲练结合时间：40分钟教学内容师生活动教学方法教学手段教师学生1、创建表单案例。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现；3、学生动手实践。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、中国大学MOOC慕课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤5：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、企业专家点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、中国大学MOOC慕课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。从学生的科学精神、技术创新等提升情况探索个性增值评价。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤6：自主创新教学内容师生活动教学方法教学手段教师学生课后作业：根据课堂演示效果，修改表单控件样式。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，发挥想象力和创造力，不断提高自身信息素养。七、教学过程设计-（4）Bootstrap制作按钮（2学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生（1）回顾上节课的内容，引出本节课主题教师首先介绍，在Bootstrap中提供了定义简单的按钮，学习了表单和按钮知识后,就可以完成本项目任务二网页搜索模块了，本节课将介绍Bootstrap按钮通过爱课程平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑（1）如何插入不同样式的按钮（2）如何根据不同的情境选择对应的类名查看在线学习平台公告，提前通过平台观看微课程视频、阅读教材预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、1、《移动Web开发》课程在线教学平台教材中国大学MOOC慕课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生引例描述：案例页面搜索模块。设疑：同学们，如何快速设置不同的按钮显示方式？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：25分钟教学内容师生活动教学方法教学手段教师学生Bootstrap制作按钮默认按钮样式指定按钮大小1、引导学生借助在线课程平台获取知识进行自主探究；2、组织学生讨论和分享；3、参数讲解和对比分析；4、通过课件进行归纳小结。1、学生登录在线课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践操练提前做好铺垫。步骤4：讲练结合时间：40分钟教学内容师生活动教学方法教学手段教师学生制作网页搜索模块分析模块的页面结构分析实现细节。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现；3、学生动手实践。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、中国大学MOOC慕课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤5：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、企业专家点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、中国大学MOOC慕课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。从学生的科学精神、技术创新等提升情况探索个性增值评价。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤6：自主创新教学内容师生活动教学方法教学手段教师学生课后作业：根据课堂演示案例，修改搜索模块显示效果。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，发挥想象力和创造力，不断提高自身信息素养。常州信息职业技术学院单元设课程：课程：内容：单元8综合项目制作学时：设计摘要教学 课题课程学时安排4学时年级高职二年级所选教材HTML5移动Web开发任务教程，叶品菊，人民邮电出版社，2023年1月一、教学背景创作思路：针对传统教学无法解决的教学难题进行设计，在工学结合模式下，采用案例教学法，依托信息化教学环境，整合数字化教学资源，优化教学过程。以学生为中心，教师为主导，在教学的各环节充分运用VSCode开发工具、在线教学平台等信息化手段解决教学重点难点问题。设计特色 ：1．教学过程成果导向化：根据“体验→探究→应用→创新”学生能力递进培养思路，构建“三阶六环，能力递进”教学模式。以“导→探→析→练→评→创”的形式实施教学活动，引导学生自主探究，降低了学习难度，提高学习兴趣和课堂参与度，教学过程实现“教、学、做、创”大融合；2．教学资源数字化：丰富的课件、经典作品、视频等资源可供学生在线学习；3．网络平台融合化：紧紧围绕VSCode开发工具，融入中国大学MOOC慕课堂、动画、在线教学平台等信息化手段进行教学完成教学目标，突破重点、难点；4．学习评价多元化：结合作品展示、小组汇报等多种方式，采用企业专家评价、学生自评、师生互评等多种手段形成动态化、多元化的评价体系，从技术创新等提升情况探索个性增值评价。二、学习目标与内容1.学习目标 知识目标：掌握Bootstrap的使用；掌握Bootstrap的布局方法；掌握项目答辩要点。能力目标：能使用Bootstrap框架；能使用Bootstrap进行网页的排版；能领悟答辩要点、熟悉评分标准；素质目标：培养学生高效利用时间进行自主学习的能力；培养学生善于收集信息和良好的自学能力；培养学生理论联系实际，善于发现问题并积极寻求解决问题方法的能力。2.学习主要内容 （1）Bootstrap框架的使用（2）Bootstrap的布局方法（3）答辩要点、评分标准3.学习重点及难点教学重点：（1）Bootstrap的布局方法；（2）Bootstrap框架的使用。教学难点：（1）答辩要点、评分标准。三、学情分析授课对象是高职二年级的学生，通过之前静态网页设计技术课程的学习，有一定的网页分析和编写能力，但搭建网页框架、复杂网页效果设置的高阶编程的能力还有所欠缺；学习过程中学习动机不足，自我效能感低，意志力待提升，喜欢形象有趣，能够动手实践的学习，适合“做中学”，并希望在学习中得到即时反馈和评价。四、学习环境选择与学习资源设计1.学习环境（1）教学硬件：多媒体教室；（2）教学软件：极域电子教室、课程在线教学平台等。2.学习资源类型（1）课程在线教学平台（2）教材（3）中国大学MOOC慕课堂3.学习资源内容简要说明爱课程（中国大学MOOC）平台《移动Web开发》在线开放课程有多媒体课件、微视频、试题库等多种数字化资源；使用教材是《HTML5移动Web开发》。五、学习情境创设项目开发是一项长期且不可间断的过程。通过课堂学习之外,在碎片时间多多利用互联网资源,沉浸于开发环境,也是很有必要的。项目有创意、功能完善会给项目加分，个性化的项目演示同样重要。六、教法学法设计（1）引导启发法：运用信息技术营造学习情境，设疑导入，激发兴趣；（2）案例驱动法：设置创设情境、知识探究、应用案例分析、实践操练、总结评价四个教学环节，学生根据掌握的知识和具备的技能来完成任务，并以此推动下一任务的操作；（3）协作讨论法：在设计过程中学生小组协作，互相探讨，直至任务设计的实现。七、教学过程设计-购票网步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：Bootstrap基础Bootstrap布局答辩要点、评分标准通过爱课程平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑（1）综合项目开发流程与要点？（2）如何通过个性化演示与答辩为项目加分？查看在线学习平台公告，提前通过平台观看微课程视频、阅读教材预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、1、《移动Web开发》课程在线教学平台2、教材3、中国大学MOOC慕课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生引例描述：英语学习网首页。设疑：同学们，项目答辩要点是什么？如何紧扣评分标准？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：35分钟教学内容师生活动教学方法教学手段教师学生1.1Bootstrap基础1.2Bootstrap布局1.3项目答辩要点、评分标准解析1、引导学生借助在线课程平台获取知识进行自主探究；2、组织学生讨论和分享；3、参数讲解和对比分析；4、通过课件进行归纳小结。1、学生登录在线课程平台获取知识进行自主探究