网页设计与制作案例教程（HTML5+CSS3）（第2版） 教案全套 徐洪亮

北京市信息管理学校授课教案2023—2024学年度第二学期科目网页设计与制作授课班级2305授课教师徐洪亮学习单元项目1：走进网页世界授课类型新授课教案号01、02任务名称基础任务1：制作“念奴娇·赤壁怀古”网页学情分析本次课是本门课程起始课。多数学生会浏览网页，但对网站、网页制作等没有太多了解，对很多概念不清楚。教学内容分析内容分析：本课选自项目1网页基础的任务1。主要内容是了解网页基础知识和相关术语；了解静态网页和动态网页、绝对路径和相对路径的区别；初步了解Dreamweaver的工作环境及使用方法，能够建立站点及新建网页。思政元素分析：传统文化，带领学生感受中华古诗词的魅力。顽强乐观、积极向上的人生态度，学习作者关注历史和人生的旷达之心，虽经历人生起起落落始终保持着顽强乐观的信念和超然自适的人生态度。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标了解课程内容及要求；初步了解Dreamweaver的工作环境及使用方法，掌握创建站点及新建网站方法，初步了解HTML语言和CSS样式概念；了解网页基础知识和相关术语；了解静态网页和动态网页、绝对路径和相对路径的区别；通过代码格式整理，初步建立行业规范意识，培养精益求精的工匠精神。教学重点掌握创建站点及新建网站方法，初步了解HTML语言和CSS样式概念。教学难点正确区分绝对路径和相对路径。教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习结合自己的上网经历，思考并回答问题：你印象最深刻的网站是哪个？为什么对它印象深刻？思考并回答问题用学生自己的亲身经历引出课程内容，激发学习兴趣，为开始课程学习做准备第一课时情景引入，明确任务（5分钟）介绍课程相关内容、软件、课程要求及评价标准。了解课程相关内容、软件、课程要求及评价标准宏观了解课程，明确本门课程的要求和在专业的重要性，让学生在了解和重视课程的同学，也树立学好课程的信心。超星平台播放CCTV[经典咏流传]之《念奴娇·赤壁怀古》（节选）了解诗词意境及创作背景欣赏、共情带领学生感受中华古诗词的魅力，同时学习作者关注历史和人生的旷达之心、虽经历人生起起落落始终保持着顽强乐观的信念和超然自适的人生态度。带着崇敬之心学习新知识。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究站点创建准备工作及步骤。培养团队合作和知识建构意识发现问题，技术攻关（10分钟）引导学生发现问题：如何添加网页标题？演示并讲解为网页添加网页标题的方法通过提问掌握学生学习效果如何设置标题格式？演示讲解如何将文章标题设置为标题1格式认真观看教师讲解与演示，学习为网页添加标题方法、为标题设置标题1格式的方法掌握标题添加方法，明确title标签是搜索引擎优化的一个重要因素，标题栏必须设置并且应该包含网页的搜索关键字，否则将影响网站的推广和维护。引导学生遵守行业规范。如何添加段落？演示讲解三种段落标签设置方法、讲解样式标签、段落样式与属性认真观看教师讲解与演示，学习为文章添加段落的方法掌握为文章添加段落的方法如何设置图文位置？演示讲解图像标签与浮动样式认真观看教师讲解与演示，学习设置图文环绕的方法掌握设置图文环绕的方法代码混乱，出现问题不好排错？演示讲解调整代码格式，增强代码可读性观看演示培养良好的工作习惯和精益求精的工匠精神动手实践，完成任务（15分钟）布置任务：参考教材，完成任务参考教材操作步骤，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。拓展学习，知识补强（35分钟）讲解网站开发流程理解网站开发流程理解网站开发流程讲解网页常用术语小游戏：连连看（将术语与解释相连）小游戏：找不同（找静态网页与动态网页的不同）小游戏：你的路径谁作主？完成连连看任务完成找不同任务完成路径辨别任务通过游戏帮助学生理解网页常用术语及绝对路径与相对路径的辨别，突破教学难点。讲解网页文件命名规范小游戏：判断正确的文件名理解文件命名规则掌握网页文件命名规范，使访问者更容易找到并访问页面。引导学生遵守行业规范，培养对项目和客户负责的责任心。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思在DW中创建站点环节，学生在选择站点文件夹时易出现错误，不是选择而是打开文件夹，导致路径错误，出现图片无法显示的情况，需要加强练习。

课程名称网页设计与制作授课类型新授课课时2序号03、04课题名称制作“苏轼”网页学情分析本课前学生了解了本课程内容及要求，学习了网页的基础知识及相关术语，初步掌握了在Dreamweaver中创建站点及新建网页的方法。但对HTML语言及CSS样式的认识还不清晰。教学内容分析内容分析：本课选自项目1网页基础的任务2。主要内容是了解Dreamweaver的工作界面，了解HTML语言和CSS基本书写格式；初识超链接，能够为当前网页添加指向同站点内其他页面的超链接；学习使用<style>标签创建内部样式表。思政元素分析：传统文化，带领学生感受中华古诗词的魅力。顽强乐观、积极向上的人生态度，学习作者关注历史和人生的旷达之心，虽经历人生起起落落始终保持着顽强乐观的信念和超然自适的人生态度。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标了解Dreamweaver工作界面，熟练掌握创建站点及网页的方法；认识超链接；了解HTML语言和CSS样式基本书写格式；掌握<style>标签的使用方法；在代码纠错与优化过程中培养行业规范意识及精益求精的工匠精神。教学重点内部样式表的使用方法。教学难点更改软件默认环境教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习以小组为单位查找资料，了解唐宋八大家的历史背景和人物。查找资料组间分享渗透历史与文化元素，了解唐宋八大家，并为本次课学习做好准备。第一课时情景引入，明确任务（10分钟）点评上次课作品，选择3份典型作品进行代码纠错训练播放苏轼介绍视频导语：本次课与上次课内容关联。上次课制作了“念奴娇•赤壁怀古”网页，本次课来介绍一下这首词的作者。对3份作品进行代码纠错。欣赏、共情通过纠错训练培养学生代码排错能力，培养严谨细致的工匠精神。通过视频引入带领学生感受中华古诗词魅力，学习作者旷达之心、虽经历人生起落始终保持顽强乐观的信念，带着崇敬学习新知。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（5分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（10分钟）引导学生发现问题：如何为标题旁边注解文字添加不同的样式演示讲解span标签的作用如何设置文件间的超链接讲解文件间的超链接设置方法如何为文章中的段落添加样式讲解使用<style>标签创建内部样式表发现案例特殊效果，提出疑问。认真观看教师讲解与演示，学习span标签、超链接及内部样式表的基本使用方法借助PPT讲解及直观的演示让学生理解span标签、超链接及内部样式表的基本使用方法，达成教学重点。动手实践，完成任务（10分钟）布置任务：参考教材，完成任务参考教材操作步骤，自主完成任务自主完成任务，提高知识应用能力第二课时发现问题，技术攻关（35分钟）介绍DW2018工作界面，重点讲解几个重要的新功能了解DW2018工作界面了解工作环境更改DW2018默认界面和布局小游戏：捉迷藏-如何变换拆分视图排列方式查找更改拆分视图排列方式的方法，让它按照自己喜欢的方式布局掌握视图更改技巧更改面板位置拼图游戏：组合我自己的面板重新组合面板能够随意控制面板，掌握界面颜色变幻技巧，能够随需预览，能够在当前工作状态快速进行代码更新，掌握提高工作效率技巧。通过小游戏突破教学难点。更改界面颜色布置任务：为软件换新衣为软件穿新衣实时预览演示实时预览的几个方法掌握实时预览的几个方法快速更改代码介绍快速编辑快捷键掌握快速更改代码方法同时编辑多行演示编辑多行方法掌握编辑多行技巧能够同时编辑多行掌握提高工作效率小技巧分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本课学习较为顺利，大部分学生已经较好的掌握在DW中创建站点，新建网页，正确浏览网页。但个别学生对<style>标签创建内部样式表还不太熟练，需要加强练习。

课程名称网页设计与制作授课类型新授课课时2序号05、06课题名称制作“青春颂歌”网页学情分析学生已对网页基础知识有所了解，能在Dreamweaver中创建站点及网页并对网页文字进行简单格式设置，了解超链接的作用及在“属性”检查器中的创建方法，对网页命名规范、HTML及CSS书写格式有了初步的认识。但对标签还不熟练，需要强化记忆。教学内容分析内容分析：本课选自项目1网页基础的任务3。任务3要求学生根据制作要点提示自己判断需要运用的知识技能，使用哪些HTML元素实现页面结构，使用哪些属性实现需要的样式等，是对学生本项目学习效果的检测，也是对本项目知识技能运用能力的强化。思政元素分析：激发青春热情、奋发图强：学生刚刚开始高中生活，面对新的环境、新的学习生活，会有不适与迷茫。通过任务内容，引导学生思考人生，流年似水，弹指间万物轮回，要珍惜当下，奋发图强，让自己的青春焕发出无限可能。工匠精神：通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标巩固本项目学习效果，培养根据任务制作要求写代码的能力；熟练创建站点、保存网页操作；熟悉HTML语言基本结构和简单CSS样式；在项目制作过程中激发青春热情，勇于面对挑战；在代码纠错与优化过程中培养行业规范意识及精益求精的工匠精神。教学重点正确设置标题及段落样式教学难点如何根据说明判断使用哪些结构标签和样式代码完成任务要求教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习同学们现在正值青春年少，走进新的校园，肯定对高中生活有期待也有迷茫。可以把你的期待和迷茫写下来，与同学或者学长交流分享，共同找到努力奋斗的目标。思考，分享引导学生思考人生，流年似水，弹指间万物轮回，要珍惜当下，奋发图强，让自己的青春焕发出无限可能。第一课时情景引入，明确任务（10分钟）点评上次课作品，选择3份典型作品进行代码纠错训练迈入高中校园，你有怎样的期待和憧憬？正值16、7岁青春年华，你可想过要怎样度过？请同学们说说自己的想法。对3份作品进行代码纠错思考分享纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。学生刚刚开始高中生活，面对新的环境、新的学习生活，会有不适与迷茫。通过项目内容，引导学生思考人生，流年似水，弹指间万物轮回，要珍惜当下，奋发图强，让自己的青春焕发出无限可能。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（5分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（5分钟）预设问题，引导学生发现本案例与前面做过案例的不同之处。组织讨论，启发学生思考解决问题方法发现问题小组讨论并根据教师启发进行实践，寻找解决问题方法培养学生自主探究和解决问题能力。动手实践，完成任务—HTML结构制作（15分钟）布置任务：参考教材能力提升任务的制作要点提示，完成任务HTML结构部分制作自主完成任务HTML结构部分制作实现教学重难点目标：自主完成HTML结构部分制作，提高熟练运用HTML标签完成页面结构设计的能力第二课时动手实践，完成任务—CSS样式制作（30分钟）布置任务：参考教材任务3的制作要点提示，完成任务CSS样式部分制作自主完成CSS样式部分制作实现教学重难点目标：自主完成CSS样式部分制作，提高CSS样式的运用能力分配作品，评价总结（15分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。分组收集北京冬奥会比赛项目介绍，预习项目1任务4通过平台完善笔记，完成测试题目及预习内容帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本案例是学生第一次独立完成任务，大部分学生已经能熟练创建站点、新建网页及浏览网页，能设置简单的CSS样式。但对HTML标签及CSS样式的标准术语记忆还不牢固，需要反复练习，加强记忆。

课程名称网页设计与制作授课类型新授课课时2序号07、08课题名称制作“速度滑冰”网页学情分析学生已对网页基础知识有所了解，能在Dreamweaver中创建站点及网页并对网页文字进行简单格式设置，了解超链接的作用及在“属性”检查器中的创建方法，对网页命名规范、HTML及CSS书写格式有了初步的认识。但对标签还不熟练，需要强化记忆。教学内容分析内容分析：本课选自项目1网页基础的任务4。任务4要求学生通过网页效果图就能判断出制作这个页面所需要运用的知识技能，使用哪些HTML元素能够实现页面结构，使用哪些属性能够实现的样式等。任务4既是对学生本项目知识技能掌握情况和综合运用能力的检验，也是本门课程对学生能力培养的最终教学目标——看到任何网页都能依靠自己的知识储备判断出所需使用的知识技能并实现，这是岗位职业能力需求的最终体现。思政元素分析：奥林匹克精神：通过查找资料了解北京冬奥会比赛项目，提高对冬奥会的认识，学习奥林匹克精神。民族自豪感：通过视频了解冬奥会速度滑冰项目，了解北京冬奥会，感受奥林匹克精神，提升民族自豪感，学习运动员奋勇拼博的意志品质。工匠精神：通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标巩固本项目学习效果，培养看效果图就能独立做出页面的能力；具备灵活运用知识储备实现页面效果的能力；在任务制作过程中提升民族自豪感；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点正确设置标题及段落样式教学难点如何根据说明判断使用哪些结构标签和样式代码完成任务要求教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：分组收集北京冬奥会比赛项目介绍收集北京冬奥会比赛项目介绍通过查找资料了解北京冬奥会比赛项目，提高对冬奥会的认识，学习奥林匹克精神第一课时情景引入，明确任务（5分钟）点评上次课作品，选择3份典型作品进行代码纠错训练播放冬奥会速度滑冰比赛视频导语：2022年北京冬奥会即将开幕，你对冬奥会比赛项目了解吗？对中国运动员参加哪些项目了解吗？对3份作品进行代码纠错。欣赏、共情，组间资料分享。纠错训练培养学生代码排错能力和严谨细致的工匠精神。通过视频了解冬奥会速度滑冰项目，感受奥林匹克精神，提升民族自豪感，学习运动员奋勇拼博的意志品质。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力，并关注到教学重难点小组协作，制定方案（15分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（5分钟）预设问题，引导学生发现本案例与前不同之处。组织讨论，启发学生思考解决问题方法发现问题小组讨论寻找解决问题方法培养学生自主探究和解决问题能力。动手实践，完成任务—HTML结构制作（15分钟）布置任务：参考效果图和刚才对结构的分析，完成任务HTML结构部分制作自主完成任务HTML结构部分制作实现教学重难点目标：自主完成HTML结构部分制作，提高熟练运用HTML标签完成页面结构设计的能力第二课时动手实践，完成任务——CSS样式部分制作（30分钟）布置任务：完成任务CSS样式部分制作自主完成CSS样式部分制作实现教学重难点目标2：自主完成CSS样式部分制作，提高CSS样式的运用能力分配作品，评价总结（15分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。参考本课页面，自选一项冬奥会比赛项目制作一个页面。通过平台完善笔记，完成测试题目及作业帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思学生第一次完成任务4，个别同学能快速对页面结构进行分析并独立完成制作。多数学生有些不知从何入手，还需要加强练习，对HTML标签及CSS样式代码拼写及语法格式加强记忆。

课程名称网页设计与制作授课类型新授课课时2序号09、10课题名称制作“走向远方”网页学情分析在本项目之前学生已学习了网页基础知识，能在Dreamweaver中创建站点及网页并对网页进行简单样式设置，能在“属性”检查器中添加超链接。对网页命名规范、HTML及CSS书写格式有了初步的认识。但对标签还不熟练，需要强化记忆。教学内容分析内容分析：本课选自项目2HTML语言基础的任务1，主要内容是HTML语言的基本概念、基本结构，以及行内样式的设置方法。本课内容是网页制作的基础，学生需要熟练掌握。思政元素分析：奋发进取、勇往直前，通过视频，让学生了解诗歌的背景、寓意，从诗文中感受“人生就要有追求，为目标把风雨抛在脑后”的勇往直前的精神。细致、严谨的职业精神，行业对images文件夹的命名规范，培养学生细致、严谨的工作作风和职业精神。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标了解HTML语言的基本概念；掌握HTML语言的基本结构，能够使用HTML语言编写简单网页；掌握style属性的用法，能够使用style属性设置行内样式；具备行业规范意识。教学重点HTML语言的基本结构；style属性的用法。教学难点文档类型声明教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：面对高中生活，大家遇到了哪些困难？需要得到哪些帮助？与你的小组成员一起讨论，共同成长发布测试思考，讨论，分享完成测试课前预热，获取增值评价“输入”数据，同时，由于学生刚刚开始高中学习和生活，会有很多困难，需要得到帮助，引导学生敞开心扉，直面困难，互相帮助，勇往直前。第一课时情景引入，明确任务（10分钟）点评上次课作品，选择3份典型作品进行代码纠错训练。播放视频《走向远方》汪国真诗歌作品对3份作品进行代码纠错欣赏、共情纠错训练培养学生代码排错能力和严谨细致的工匠精神。通过视频，让学生了解诗歌的背景、寓意，从诗文中感受“人生就要有追求，为目标把风雨抛在脑后”的勇往直前的精神。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（15分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（10分钟）引导学生发现问题：如何设置页面整体背景图像及默认文字大小讲解style属性的用法通过提问掌握学生学习效果如何为标题1设置对齐方式、字体大小及颜色属性探究学习，通过行内样式添加背景图像及设置文字大小参考教材自主探究标题1的对齐方式、字体大小及颜色设置整理p标签及h1标签的格式掌握行内样式用法，了解基本文字属性培养良好的工作习惯和精益求精的工匠精神第二课时动手实践，完成任务（20分钟）布置任务：完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作自主完成结构和基本样式代码编写，提高知识应用能力发现问题，技术攻关（15分钟）讲解HTML语言概念和基本结构详解文档类型声明及H5新规则小游戏：大家来找茬（排错游戏）讲解并演示META标签演示并讲解link与script标签理解HTML语言概念掌握HTML语言基本结构理解文档类型声明及H5新规则了解META标签理解link与script标签通过微课讲解HTML语言，通过小游戏形式调动学生参与积极性，突破教学难点。通过演示讲解使学生明确标签作用，通过演示讲解使学生掌握标签用法。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本次课完成顺利，大部分学生经过前一个项目的学习后，对HTML基本概念及基本操作掌握较好，使得本课的知识点学习较为顺利。

课程名称网页设计与制作授课类型新授课课时2序号11、12课题名称制作“我的空间”网页学情分析上次课，学生学习了HTML语言的基本概念及基本结构，用HTML语言编写了一个简单的网页，进一步熟悉了<title>标签，学习了文档头部<head>标签及<meta>、<link>、<style>、<script>等标签的意义与用法。教学内容分析内容分析：本课选自项目2HTML语言基础的任务2。通过这个任务，学生将详细学习HTML语言的核心----标签。熟练掌握HTML常用标签是做网页的基本要求。另外，学生还将学习HTML5的常用结构标签，了解新规则，保持知识更新，与时俱进。思政元素分析：健康的生活方式，通过页面内容学习健康的生活方式和积极向上的人生态度。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标熟练掌握HTML的基本结构和常用标签的用法；熟练使用行内样式；理解块元素、行内元素和行内块元素；具备行业规范意识。教学重点HTML常用标签的用法教学难点块级元素、行级元素和行级块元素教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：以小组为单位查找资料，向大家推荐健康、积极的生活方式。发布测试。查找资料，组间分享完成测试课前预热，获取增值评价“输入”数据，引导学生学习健康的生活方式和积极向上的人生态度。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练导语：个人博客、个人空间是目前网络应用的重要内容之一，今天我们就来体验制作一个简单的个人空间。对3份作品进行代码纠错纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路欣赏作品，了解任务效果。通过页面内容学习健康的生活方式和积极向上的人生态度引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（15分钟）引导学生发现问题：如何为页面添加图像及背景图像？如何在页面上添加网页文字并设置标题与段落格式通过提问掌握学生学习效果如何添加超链接如何添加水平线通过提问掌握学生学习效果参考教材自主探究，在页面添加图像及背景图像自主探究，添加文字并设置标题与段落格式自主探究，超链接的添加方法自主探究，为页面添加一条水平线通过预设问题、自主探究，学习添加网页基本内容，巩固行内样式格式第二课时动手实践，完成任务（25分钟）布置任务：完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作自主完成任务结构和基本样式代码编写，提高知识应用能力发现问题，技术攻关（10分钟）讲解单标签与标签对抢答游戏详解块级元素、行级元素和行级块元素分类游戏记标签游戏猜词游戏理解HTML标签分类、文档类型声明及H5新规则通过游戏记标签通过小游戏调动学习积极性、强化记忆，掌握HTML标签分类、文档类型声明及H5新规则，突破教学难点分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本课多数学生能顺利完成教学内容，对知识点理解掌握较好。个别学生对块级元素、行级元素和行级块元素理解有混淆，需在后续课程中加强练习，以加深理解。

课程名称网页设计与制作授课类型新授课课时2序号13、14课题名称制作“垃圾分类人人有责”网页学情分析本课前，学生已经学习了网页基础知识和HTML语言基础知识，能够熟练在DW中创建站点和网页，能够用HTML常用标签编写简单网页，但在熟练程度上还有待提高。比如代码格式报错时，不能顺利找出原因；标签写法不熟练，导致录入错误，影响页面正常显示等。教学内容分析内容分析：本课选自项目2HTML语言基础的任务3。任务3要求学生根据制作要点提示自己判断需要运用的知识技能，使用哪些HTML元素实现页面结构，使用哪些属性实现需要的样式等，是对学生本项目学习效果的检测，也是对本项目知识技能运用能力的强化。思政元素分析：环保意识，通过视频，引导学生学习垃圾分类知识、建立垃圾分类意识、提升环保意识和尊重他人劳动成果的品格。借助提高项目培养学生勤于练习、勇于实践的职业精神。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标巩固HTML基本结构、常用标签等知识点，能够熟练运用本项目知识点完成指定页面制作；在项目制作过程中培养勤于练习、勇于实践的职业精神；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点HTML标签及样式应用教学难点正确判断结构标签与样式应用教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：小组为单位查找资料，学习垃圾分类的知识，并制作一份倡导垃圾分类的宣传海报。发布测试分组查找、了解垃圾分类的知识，制作海报，组间分享完成测试课前预热，获取增值评价“输入”数据，同时引导学生了解垃圾分类的知识，提升环保意识。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练播放“垃圾分类”宣传片导语：现在，全社会都在倡导“垃圾分类”，这是一项利国利民的好事。在日常生活中践行垃圾分类，是青年学生也是每个人的社会责任。对3份作品进行代码纠错欣赏、共情纠错训练培养学生代码排错能力和一丝不苟的工匠精神。通过视频引导学生学习垃圾分类知识、建立垃圾分类意识、提升环保意识和尊重他人劳动成果的品格。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（5分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（5分钟）预设问题，引导学生发现本案例与前面做过案例的不同之处。组织讨论，启发学生思考解决问题方法发现问题小组讨论根据教师启发进行实践，寻找解决问题方法培养学生自主探究和解决问题能力。动手实践，完成任务—HTML结构制作（15分钟）布置任务：参考任务3的制作要点提示，完成任务HTML结构部分制作自主完成任务HTML结构部分制作实现教学重难点目标：自主完成HTML结构部分制作，提高熟练运用HTML标签完成页面结构设计的能力第二课时动手实践，完成任务—CSS样式制作（30分钟）布置任务：参考任务3的制作要点提示，完成任务CSS样式部分制作自主完成CSS样式部分制作实现教学重难点目标：自主完成CSS样式部分制作，提高CSS样式运用能力分配作品，评价总结（15分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，完成评价。完成自评与组内互评。梳理知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试及预习内容帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本次课多数学生能理解操作要点提示内容，找到相应的标签或样式代码，但代码拼写错误较多，导致页面不能正常显示，需要加强代码记忆训练。

课程名称网页设计与制作授课类型新授课课时2序号15、16课题名称制作“菜鸟加油”网页学情分析本课前，学生已经学习了网页基础知识和HTML语言基础知识，能够熟练在DW中创建站点和网页，能够用HTML常用标签编写简单网页，具备了独立编写简单页面的能力。但在熟练程度上还有待提高。比如代码格式报错时，不能顺利找出原因；标签写法不熟练，导致录入错误，影响页面正常显示等。教学内容分析内容分析：本课选自项目2HTML语言基础的任务4。任务4要求学生通过网页效果图就能判断出制作这个页面所需要运用的知识技能，使用哪些HTML元素能够实现页面结构，使用哪些属性能够实现的样式等。任务4既是对学生本项目知识技能掌握情况和综合运用能力的检验，也是本门课程对学生能力培养的最终教学目标——看到任何网页都能依靠自己的知识储备判断出所需使用的知识技能并实现，这是岗位职业能力需求的最终体现。思政元素分析：爱岗敬业，通过页面内容，引导学生面对新的环境或学习新的内容时，不抱怨现实条件，以积极的心态努力发现自己的特长或寻找适合自己的学习方法。工匠精神：通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标能够熟练运用本项目知识点完成指定页面制作；在项目制作过程中培养爱岗敬业的职业精神，不抱怨现实条件，积极学习，不断进取；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神；教学重点HTML标签及样式的灵活运用教学难点正确判断结构标签与样式属性的应用教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：查找资料，了解优秀职业人需要具备哪些基本素养，这也是我们学生努力的方向。发布测试查找资料，了解优秀职业人需要具备的基本素养并分享完成测试课前预热，获取增值评价“输入”数据，同时引导学生向优秀职业人学习。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练导语：我们大多数人将来都要走向职场，成为职业人。面对陌生的环境和工作，我们应该以什么样的态度去对待呢？对3份作品进行代码纠错纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。同时通过页面内容，引导学生面对新的环境或学习新的内容时，不抱怨现实条件，以积极的心态努力发现自己的特长或寻找适合自己的学习方法。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（15分钟）引导学生发现问题如何设置无序列表和有序列表格式？演示并讲解无序列表和有序列表如何设置页面整体背景色通过提问掌握学生学习效果如何设置DIV宽度和居中如何设置超链接样式发现问题观看演示，探究无序列表与有序列表、设置背景颜色、设置页面位置及设置超链接样式等方法培养学生自主探究和解决问题能力。第二课时动手实践，完成任务（35分钟）布置任务：参考效果图和刚才对结构及样式的分析，完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作实现教学重难点目标：自主完成任务，提高知识应用能力分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。以小组为单位查找资料，了解《满江红》全文、创作背景等，为下次课做准备通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本课要求学生根据效果图自己判断HTML结构和CSS样式，有少部分学生能够独立完成页面制作，多数学生能写出基本的HTML标签，但是还不能正确设置CSS样式，需在后面的学习中加强练习。

课程名称网页设计与制作授课类型新授课课时2序号17、18课题名称制作“古诗词欣赏”网页学情分析在本项目之前学生已学习了HTML语言的基本语法结构及规则，本项目主要学习内容是制作网页的另一项重要技术-CSS样式，要学习常用CSS样式的含义及用法。CSS样式包含大量英文单词，对于英语基础薄弱的学生来说是一个难题，需要反复练习，做到从不认识到熟悉再到掌握，掌握不牢将对后面的学习形成障碍。教学内容分析内容分析：本课选自项目3CSS样式基础的任务1。本课重点是学习CSS样式的概念、基本结构、写法及规范，这部分知识在前两个项目中已经部分涉及，但没有进行系统讲解，本课内容要系统地对这些知识进行梳理，纠正学生的一些错误认识，为后面的学习打下基础。思政元素分析：爱国情怀，在《满江红》激情澎湃的朗诵声中、在页面的制作过程中，学生阅读、理解诗词的内容，激发学生的爱国情怀，体会诗人为国奉献的伟大精神，树立奋发图强、报效祖国的精神风骨和信念。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标了解CSS语言的概念，掌握CSS语言的基本结构；了解CSS语言中的注释语句的作用及写法；初步掌握为HTML文档添加CSS样式的方法；了解CSS样式的书写顺序及规范；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点CSS语言基本结构及样式规范教学难点CSS语言基本结构及样式规范教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：以小组为单位查找资料，了解《满江红》全文、创作背景等，并进行组间分享发布测试查找资料，了解《满江红》全文、创作背景等，组间分享完成测试课前预热，获取增值评价“输入”数据，引导学生阅读古诗词，了解创作背景及内涵，渗透历史与文化元素，并为本次课学习做好准备。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练。播放配乐诗朗诵《满江红》。导语：《满江红·怒发冲冠》一般认为是宋代岳飞的词作。全词情调激昂，慷慨壮烈，显示出一种浩然正气和英雄气质，表现了作者报国立功的信心和乐观奋发的精神。对3份作品进行代码纠错。欣赏、共情。纠错训练培养学生代码排错能力和严谨细致的工匠精神。在充满激情的配乐诗朗诵中激发爱国情怀，体会诗人为国奉献的伟大精神，在激情中进入创作。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（15分钟）引导学生发现问题：讲解CSS语言的概念、基本结构、语句的作用及写法。演示在网页中加入CSS样式的方法讲解CSS样式的书写顺序及规范理解CSS语言的概念、基本结构、语句的作用及写法学习在网页中加入CSS样式的方法完成教学目标：掌握CSS语言的概念、基本结构、语句的作用及写法完成教学目标：掌握在网页中加入CSS样式的方法第二课时动手实践，完成任务（35分钟）布置任务：完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作自主完成任务结构和基本样式代码编写，提高知识应用能力分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本课内容在前面的课程中已经有涉及，所以多数学生能很好的理解和掌握。但有个别学生CSS样式书写顺序容易混淆，需要加强练习。

课程名称网页设计与制作授课类型新授课课时2序号19、20课题名称制作“服务奥运精彩人生”网页学情分析在本项目之前学生已学习了HTML语言的基本语法结构及规则，本项目主要学习内容是制作网页的另一项重要技术-CSS样式，要学习常用CSS样式的含义及用法。CSS样式包含大量英文单词，对于英语基础薄弱的学生来说是一个难题，需要反复练习，做到从不认识到熟悉再到掌握，掌握不牢将对后面的学习形成障碍。教学内容分析内容分析：本课选自项目3CSS样式基础的任务2。本课主要内容是在制作“服务奥运精彩人生”网页的过程中学习CSS样式表的4种引入方法，以及每种方法的特点、适用范围，同时学习3种选择器的区别、写法、用法，这部分知识在前两个项目中已经部分涉及，但没有进行系统讲解，本节内容要系统地对这些知识进行梳理，纠正学生的一些错误认识，为后面的学习打下基础。思政元素分析：社会责任意识、奉献意识，学生在课前查找资料的过程中了解志愿者工作的性质、志愿者的精神内涵、北京冬奥会志愿者服务情况等资料，在这一过程中被志愿者精神感染、被志愿者行为感动，提升自身的社会责任意识和奉献意识。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标掌握CSS样式表的四种引入方法，了解这四种方法的区别及应用范围；掌握几种选择器的类型、区别及用法；掌握选择器的集体声明和嵌套声明的方法；了解选择器的优先级别及命名规范；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点选择器的类型及用法教学难点4种样式表的区别及适用范围教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：查找有关志愿服务的资料，了解2022冬奥会志愿服务情况。发布测试查找资料，对志愿精神、志愿服务、志愿者进行了解。完成测试课前预热，获取增值评价“输入”数据。同时学生在查找资料的过程中被志愿者精神感染、被志愿者行为感动，提升自身的社会责任意识和奉献意识。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练。播放《不负韶华青春有我》视频，重温2022年北京冬奥会中志愿者服务的情况，和学生进行讨论，引导学生将感动转化为社会责任意识、奉献意识。对3份作品进行代码纠错。欣赏、共情。纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。通过播放视频，学生受志愿者的事迹感动，教师引导学生将这份情怀升华为社会责任意识、奉献意识。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（15分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（10分钟）引导学生发现问题：CSS样式表有几种引入方法？讲解导入样式表的4种方法、区别、适用范围根据行业规范重点讲解链接外部样式表文件的方法CSS样式如何控制HTML元素？讲解并演示3种选择器的使用、区别、适用范围学习创建并链接样式表文件学习3种选择器的使用、区别、适用范围突破教学重、难点：掌握创建并链接样式表4方法，3种选择器的使用、区别、适用范围了解行业规范的相关知识。第二课时动手实践，完成任务（35分钟）布置任务：完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作自主完成任务结构和基本样式代码编写，提高知识应用能力分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本课中有两个点学生出现问题较多，一个是链接外部样式表的语法格式，学生记忆不牢固；另一个ID选择器和类选择器的引用格式，学生容易混淆，在后面的课程中需加强练习。

课程名称网页设计与制作授课类型新授课课时2序号21、22课题名称制作“女排精神，不只是金牌”网页学情分析在本项目之前学生已学习了HTML语言的基本语法结构及规则，本项目主要学习内容是制作网页的另一项重要技术-CSS样式，要学习常用CSS样式的含义及用法。CSS样式包含大量英文单词，对于英语基础薄弱的学生来说是一个难题，需要反复练习，做到从不认识到熟悉再到掌握，掌握不牢将对后面的学习形成障碍。教学内容分析内容分析：本课选自项目3CSS样式基础中的任务3。本节课的重点是通过制作“女排精神，不只是金牌”网页，进一步巩固CSS样式的相关知识，增强通过效果图分析页面结构和样式的能力，为独立制作页面打好基础。思政元素分析：女排精神，通过课前观看电影《夺冠》、查找中国女排的相关资料、课上讨论和交流感受等一系列活动，丰富学生对“女排精神”内涵的认识，在女排事迹的感召下，点燃心中的激情，树立“明知难赢，也要拼搏”的奋斗精神，并在学习过程中自觉的践行这一精神。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标巩固本项目学习效果，培养看效果图就能独立做出页面的能力；具备灵活运用知识储备实现页面效果的能力；在项目制作过程中渗透中国传统文化知识和民族情结；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点分析页面结构和所用样式的能力教学难点分析页面结构和所用样式的能力教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：观看电影《夺冠》，查找资料，了解“女排精神”的由来、内涵。组间分享交流感受。发布测试观看电影《夺冠》，查找资料，了解“女排精神”的由来、内涵。组间分享交流感受。完成测试课前预热，获取增值评价“输入”数据，同时通过观看电影等任务，让学生了解中国女排艰苦奋斗的历程，感受“女排精神”的内涵。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练组织学生交流自己体会的“女排精神”，以及作为学生可以怎么践行“女排精神”。对3份作品进行代码纠错讨论、共情纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。通过讨论和交流丰富学生对“女排精神”内涵的认识，在女排事迹的感召下，点燃心中的激情，树立“明知难赢，也要拼搏”的奋斗精神，并在学习过程中自觉的践行这一精神。案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（5分钟）1.预设问题，引导学生发现本案例与前面做过案例的不同之处。2.组织讨论，启发学生思考解决问题方法发现问题小组讨论并根据教师启发进行实践，寻找解决问题方法培养学生自主探究和解决问题能力。动手实践，完成任务—HTML结构制作（10分钟）布置任务：参考任务3的制作要点提示，完成任务HTML结构部分制作自主完成任务HTML结构部分制作实现教学重难点目标：自主完成HTML结构部分制作，提高熟练运用HTML标签完成页面结构设计的能力第二课时动手实践，完成任务—CSS样式制作（30分钟）布置任务：参考任务3的制作要点提示，完成任务CSS样式部分制作自主完成CSS样式部分制作实现教学重难点目标：自主完成CSS样式部分制作，提高CSS样式的运用能力分配作品，评价总结（15分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本课中多数学生能理解操作要点并选用正确的CSS样式代码，但随着代码量的增加，出现混淆和记忆不牢固的情况比较多，需在后面的课程中加强练习。

课程名称网页设计与制作授课类型新授课课时2序号23、24课题名称制作“中国传统文化-琴棋书画”网页学情分析在本项目之前学生已学习了HTML语言的基本语法结构及规则，本项目主要学习内容是制作网页的另一项重要技术-CSS样式，要学习常用CSS样式的含义及用法。CSS样式包含大量英文单词，对于英语基础薄弱的学生来说是一个难题，需要反复练习，做到从不认识到熟悉再到掌握，掌握不牢将对后面的学习形成障碍。教学内容分析内容分析：本课选自项目3CSS样式基础中的任务4。任务4要求学生通过网页效果图就能判断出制作这个页面所需要运用的知识技能，使用哪些HTML元素能够实现页面结构，使用哪些属性能够实现的样式等。任务4既是对学生本项目知识技能掌握情况和综合运用能力的检验，也是本门课程对学生能力培养的最终教学目标——看到任何网页都能依靠自己的知识储备判断出所需使用的知识技能并实现，这是岗位职业能力需求的最终体现。思政元素分析：传统文化，学生在制作“中国传统文化-琴棋书画”网页过程中，了解中国悠久的历史及深厚的传统文化，激发爱国热情和民族情怀，了解“琴棋书画”等高雅艺术的同时感受生活的美好，提高审美情趣。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标巩固本项目学习效果，培养看效果图就能独立做出页面的能力；具备灵活运用知识储备实现页面效果的能力；在课前学习及任务制作过程中培养学生的环保意识；在代码纠错与优化过程中养成行业规范意识及精益求精的工匠精神。教学重点通过效果图独立分析制作页面的能力。教学难点通过效果图独立分析制作页面的能力。教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习布置任务：以小组为单位查找资料，了解“中国传统文化-琴棋书画”的具体含义，进行组间分享发布测试查找资料，组间分享完成测试课前预热，获取增值评价“输入”数据，同时引导学生了解中国悠久的历史及深厚的传统文化，提高审美情趣，激发爱国热情和民族情怀。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练播放视频《中国传统文化-琴棋书画》对3份作品进行代码纠错欣赏、共情纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。同时引导学生了解中国悠久的历史及深厚的传统文化，激发爱国热情和民族情怀，了解“琴棋书画”等高雅艺术的同时感受生活的美好，提高审美情趣。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。发现问题，技术攻关（10分钟）预设问题，引导学生发现本案例与前面做过案例的不同之处。组织讨论，启发学生思考解决问题方法发现问题小组讨论并根据教师启发进行实践，寻找解决问题方法培养学生自主探究和解决问题能力。动手实践，完成任务—HTML结构制作（10分钟）布置任务：参考教材能力提升任务的制作要点提示，完成任务HTML结构部分制作自主完成任务HTML结构部分制作实现教学重难点目标：自主完成HTML结构部分制作，提高熟练运用HTML标签完成页面结构设计的能力第二课时动手实践，完成任务—CSS样式制作（30分钟）布置任务：参考教材任务4的制作要点提示，完成任务CSS样式部分制作自主完成CSS样式部分制作实现教学重难点目标：自主完成CSS样式部分制作，提高CSS样式的运用能力分配作品，评价总结（15分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。以小组为单位，仿照本节课案例制作介绍一项中国传统文化的网页，要求CSS样式书写正确、规范通过平台完善笔记，完成测试题目及作业内容帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思多数学生能根据效果图分析页面结构和基本CSS样式，但是存在代码记忆不牢固的问题，需加强练习，强化代码记忆，减少拼写错误造成的页面无法正常显示的情况。

课程名称网页设计与制作授课类型新授课课时2序号25、26课题名称制作“古人书房佳联赏析”网页学情分析在本项目之前学生已学习了HTML及CSS基本语法结构及规则。学生具备了独立编写简单结构网页的能力，比如页面中只包含文字及背景图像或一张图像。在灵活运用所学知识方面还有待提高。教学内容分析内容分析：本课选自项目4使用CSS设置文字样式中的任务1，主要学习内容是文字样式的常用属性。文字是网页的最主要元素，文字样式是网页制作的基础，需要学生重点掌握。思政元素分析：传统文化，对联是汉语独特的艺术形式，是中华传统文化的瑰宝。通过对对联吸引学生兴趣，感受这一中华传统文化的魅力。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标掌握CSS文字样式常用属性及使用方法理解网页元素的长度单位及元素特性。在项目内容中感受中华传统文化的魅力在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点文字样式常用属性及使用方法教学难点元素的长度单位及元素特性教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动第一课时课前学习以小组为单位查找资料，了解对联的含义以及对联在中国传统文化中的地位。发布测试查找资料、组间分享完成测试课前预热，获取增值评价“输入”数据，同时渗透历史与文化元素，感受中华传统文化的魅力，并为本次课学习做好准备。情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练。对对联游戏：引导小组介绍中国古代对联特点对3份作品进行代码纠错。小组介绍中国古代对联特点，简单了解中国古代对联纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。通过对对联吸引学生兴趣，感受中华传统文化的魅力。案例展示，分析任务（10分钟）展示任务完成效果布置准备工作：创建站点文件夹及素材文件夹下载并存放好素材文件在DW中创建站点并保存网页分析任务结构部分特点：结构标签分析标签特点分析正文段落分析对联格式分析CSS样式分析：页面背景分析DIV样式分析观察任务通过教学平台下载素材，创建站点，做好项目准备工作。分析任务加强对页面背景、宽度及居中属性的理解欣赏作品，了解任务效果。熟悉站点管理规范，做好项目实施前的准备工作通过任务分析提升学生对HTML结构部分标签的熟练度，和对页面背景、宽度及居中属性的理解小组协作，制定方案（15分钟）组织学生以小组为单位制定任务实施方案邀请学生展示方案，并进行点评小组讨论，制定方案展示方案，聆听评价通过小组讨论，培养学生的团队合作和沟通表达能力。发现问题，技术攻关（10分钟）请学生完成任务预设难题：学生对文字样式理解不透彻，出现混淆。及时叫停。组织学生进行游戏：文字样式—抢答游戏：详解文字样式及属性CSS元素的长度单位—抢答游戏：讲解CSS网页元素的长度单位请学生分享学习收获，并点评。组织学生将知识点填到任务单中尝试完成任务发现问题参与游戏，理解文字样式与网页元素的长度单位知识点分享收获，聆听评价填写任务单通过预设问题、互动学习、总结方法帮助学生掌握文字样式常用属性及使用方法，突破教学难点第二课时动手实践，完成任务（40分钟）完成HTML结构部分制作：整理代码格式，增强代码可读性CSS样式部分：完成页面背景、宽度与居中设置完成标题及段落样式设置分析特殊对联样式：完成最后一副长对联样式设置；检查并优化代码，增强代码可读性完成HTML结构部分制作，并整理代码格式完成页面背景、宽度与居中、标题及段落样式设置，分析并完成最后一副长对联样式设置，并检查优化代码。完成HTML结构部分制作，在实训中加强理解。同时培养良好的工作习惯和精益求精的工匠精神。完成页面背景、宽度与居中、标题及段落样式设置，将分析结果落实完成任务，同时培养良好的工作习惯和精益求精的工匠精神。分配作品，评价任务（5分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务。总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本节课学生知识点掌握情况良好，能够按照要求完成页面背景、宽度与居中、标题及段落样式设置，能够按照方案完成页面的制作。但个别学生仍存在代码格式不对齐的情况，需要在后边的课程中继续提升学生的代码规范意识。

课程名称网页设计与制作授课类型新授课课时2序号27、28课题名称制作“中国名花”网页学情分析上次课中，学生详细学习了CSS文字样式常用属性，包括：字体、字号、颜色、加粗、倾斜等，以及CSS网页元素的长度单位，学生基本能够独立设置文字样式，但对属性写法记忆不牢，对CSS样式书写顺序上还需进一步练习。教学内容分析内容分析：本课选自项目4使用CSS设置文字样式中的任务2。本节重点是使用CSS设置段落样式，主要涉及段落的对齐方式、缩进、行间距和段间距等。另外，还可以进行上画线、下画线的修饰效果。恰当设置段落样式，将使网页文字效果更加整齐、规范。思政元素分析：传统文化，花植根于中国文化中，尤其与人文精神绾结在一起的是人品与花格的渗透，人格寄托于花格，花格依附于人格。通过任务引入，引导学生感受中国传统花文化。工匠精神，通过任务开始的代码纠错与任务收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标掌握CSS段落样式常用属性及使用方法了解span标签作用掌握清除行内块元素默认空白的技巧在任务学习过程中感受中国传统花文化在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点CSS段落样式常用属性及使用方法教学难点清除行内块元素默认空白的技巧教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动第一课时课前学习以小组为单位查找资料，了解中国人都喜欢什么花以及原因有哪些？发布测试查找资料、组间分享完成测试课前预热，获取增值评价“输入”数据，同时感受中华传统文化中的花文化的魅力，并为本次课学习做好准备。情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练小组介绍中国有哪些传统名花？大家喜欢它的原因是什么？说说你喜欢什么花？它的花语是什么？对3份作品进行代码纠错小组介绍，个人分享。纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。通过任务引入，引导学生感受中国传统花文化。案例展示，分析任务（20分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析背景分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务能力。引导学生发现问题，如何正确设置CSS段落样式？展示案例，讲解CSS段落样式常用属性及使用方法。发布案例，请学生在菜鸟在线编辑器中修改代码，设置不同段落效果。请学生代表总结学习成果，并进行评价。发现问题。观看演示。接收案例，修改代码。学生代表总结，聆听评价。通过预设问题、讲解案例、修改代码、总结特点，帮助学生掌握CSS段落样式常用属性及使用方法，达成教学重点。培养学生发现问题、解决问题的能力。小组协作，制定方案（15分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。第二课时发现问题，技术攻关（10分钟）请学生完成任务。预设难题：学生不知如何清除行内块元素默认空白。教师及时叫停。发送学习资料。请学生代表说明解决方法，并进行评价。请学生将解决方法填到任务单中。