网页设计与制作案例教程（HTML5+CSS3）（第2版） 教案第2学期

北京市信息管理学校授课教案2025—2026学年度第二学期科目网页设计与制作授课班级2504授课教师徐洪亮学习单元项目8：走进表单美化师-使用CSS样式设置表单样式授课类型新授课教案号1、2任务名称任务1：制作“邮箱大师”网页学情分析在本项目之前学生已掌握HTML和CSS基本语法规范，已学习了使用CSS设置文本样式、使用CSS设置图像样式、使用CSS设置列表样式、使用CSS设置表格样式。文本、图像和列表样式掌握良好，简单表格掌握良好，复杂表格的设计与制作熟练度还略有不足，可以借助项目8的任务4中表格+表单的应用上加强。教学内容分析内容分析：项目8的主题是使用CSS设置表单样式。表单是网页浏览者与网络服务器之间进行信息传递的主要工具，主要用于用户注册/登录、在线调查、产品订单和对象搜索设置等功能。网站管理者可以通过表单收集、分析用户的反馈信息，作出科学的、合理的决策，它是网站管理者和浏览者之间沟通的重要桥梁。本项目的主要任务是掌握各种表单元素的使用方法，掌握设置表单样式的CSS代码，能够使用CSS对表单进行美化，能够制作出符合网站需求的各种表单页面。本次课是项目8的任务1，主要内容是文本、选择、按钮等表单元素的使用方法，以及CSS样式美化表单元素的方法。思政元素分析：隐私意识，不管注册邮箱还是注册网站都要填写一些个人信息，提醒学生关注隐私条款，尤其是对于如何收集和使用个人信息、如何使用cookies或同类技术以及可能共享、转让和披露的个人信息说明等。安全意识，不管注册邮箱还是网站都要提高安全意识，邮箱要选择正规、行业领头的品牌电子邮件服务提供商，网站只访问正规网站，防钓鱼。保护好自己的帐号密码，防止被他人盗用从事非法活动。遵纪守法，遵守互联网法律法规，不乱发垃圾邮件和负面信息，不做非法用途，不盗取别人邮箱。工匠精神：通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标掌握文本、选择、按钮等表单元素使用方法，能够根据需要在网页中插入表单标签；掌握设置表单样式的CSS代码，能够使用CSS对表单进行美化；举一反三，能够制作出符合网站需求的各种表单页面；提高学生隐私意识、安全意识和遵纪守法意识。教学重点文本、密码、选择、按钮等表单元素的使用和美化方法教学难点清除浮动影响教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习通过教学平台发送调查问卷，了解有多少同学有电子邮箱，用的是哪个电子邮件服务提供商。查看结果，统计本班同学电子邮件使用比例，使用最多的电子邮件服务提供商。填写问卷通过问卷了解同学们使用电子邮件比例，是辅助课程需要，也是对这个年龄段学生电子邮件使用情况的调查。通过调查也可以让学生更好地进入学习状态。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练导语：从今天开始，我们将进入项目8表单的学习。对于表单大家是不陌生的，我们无论注册邮箱、注册QQ号还是注册各类网站，都填写过注册表单。同学们填写注册表单的时候，有没有关注过页面上的“服务条款”和“隐私政策”链接？对“隐私政策”的作用进行说明，提醒学生关注其中对于如何收集和使用个人信息、如何使用cookies或同类技术以及可能共享、转让和披露的个人信息说明等。举例说明正规网站和钓鱼网站的区别，提醒学生不管注册邮箱还是网站都要提高安全意识，邮箱要选择正规、行业领头的品牌电子邮件服务提供商，网站只访问正规网站，防钓鱼。保管好自己的帐号密码，防止被他人盗用从事非法活动。以己为例，展示垃圾邮件的烦恼，教育学生要有职业道德，不管将来从事什么工作，不要乱发垃圾邮件，这只会引起用户反感。同时更要遵纪守法，不发负面信息，不做非法用途，不盗取别人邮箱。导语：我们今天要制作的是邮箱大师电子邮箱注册页面，这个任务参考的是2018年网易的邮箱注册页版本，随着时间推移，现在的网易电子邮件注册页面已经更新了版本，新版本的页面更加简洁了。网站是要经常更新维护并与时俱进的，这是我们网站专业学生必须要有的意识。对3份作品进行代码纠错。回答问题。了解隐私政策的作用及要关注的问题。了解正规网站和钓鱼网站的区别，提高安全意识。了解遵守职业道德和法律法规。了解网站更新与维护常识，了解快生活时代网页的设计越来越趋向于简洁。纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。提高学生隐私和信息安全意识，提升信息安全素养。互联网不是法外之地，通过提醒养成学生遵守职业道德和互联网法律法规意识，不乱发垃圾邮件和负面信息，不做非法用途，尤其不能利用网络安全知识和技术优势盗取别人邮箱和信息。提高防范意识。提高专业素养：要了解网站是需要经常更新与维护的，所以在设计之初和代码书写时都要考虑方便日后维护因素。提高设计理念案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务能力。借助PPT直观演示讲解表单工具面板，讲解文本、密码、列表、按钮等常用表单元素作用、标签、使用方法及常用属性设置。讲解<a>标签的tabindex和title属性观看演示。借助PPT讲解及直观的演示让学生掌握文本、选择、按钮等表单元素使用方法，能够根据需要在网页中插入表单标签，达成教学目标1。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。提高团队合作和知识主动建构意识。动手实践，完成任务（15分钟）布置任务：完成页头和页脚部分的结构与样式的制作掌握新知识完成页头和页脚部分的制作利用已具备的知识完成页头和页脚部分的制作（结构+样式）第二课时发现问题，技术攻关（10分钟）提出问题：教材上结构部分header与section标签都有一个clearfix的类名，这是什么意思？直接演示浮动影响的问题，讲解清除浮动影响的必要性以及清除方法，讲解clearfix的使用方法。布置任务：使用浮动方法实现左边的表单与右边的边栏并列效果，并使用clearfix方法清除浮动对邮箱标题及页脚的影响。思考问题。了解浮动影响及清除浮动影响的必要性，掌握清除浮动影响的方法，理解clearfix的用法及每行样式代码的意思。使用浮动方法实现左边的表单与右边的边栏并列效果，并浮动的影响。通过提出问题、演示讲解，使用学生了解清除浮动影响的必要性，掌握clearfix的清除浮动方法，突破教学难点。浮动属性在前面多个任务均有涉及，只做了应用，此处讲解浮动原理，并通过直观演示浮动影响让学生进一步掌握。动手实践，完成任务（25分钟）布置任务：自主完成主体内容区结构的制作。讲解表单的CSS样式：提问案例的CSS部分每行代码的含义并讲解其作用。布置任务：完成全部样式制作完成任务。回答问题，理解每行代码的作用继续完成任务。通过讲解、演示与问答让学生掌握使用CSS美化表单元素的方法，达成教学重点。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务。总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思这个任务相比之前的任务，难度提升很大，学生学起来有一点吃力，需要耐心和细致的讲解，给学生足够的练习时间。

学习单元项目8：走进表单美化师-使用CSS样式设置表单样式授课类型新授课教案号3、4任务名称任务2：制作“速递网在线下单”网页学情分析上次课通过项目8的任务1学习了文本、选择、按钮等常用表单元素的使用方法，还学习了使用CSS美化表单元素的方法。学生对表单元素不陌生，对常用表单元素的使用方法掌握比较快，但对一些属性记忆不太牢，还不能灵活应用。教学内容分析内容分析：项目8主题是使用CSS设置表单样式。本次课是项目8的任务2，主要内容是学习域集、单选按钮、复选框等表单元素的使用方法，及使用CSS美化表单元素方法与技巧。思政元素分析：感恩，以疫情期间快递员给人们生活带来的便利和对抗击疫情的巨大贡献为切入点，引导学生知道感恩。尊重，不管从事哪一份职业，要感恩每一份奉献，也尊重每一份劳动和付出。工匠精神：通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标掌握域集、单选按钮、复选框等表单元素的使用方法，能够根据需要在网页中插入表单标签。掌握设置表单样式的CSS代码，能够使用CSS对表单进行美化。举一反三，能够制作出符合网站需求的各种表单页面。学会感恩和尊重。教学重点域集、单选按钮、复选框等表单元素的使用和美化方法教学难点理解并掌握input[type=XXX]选择器的写法教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习请学生上网浏览主流网站中表单型网页效果，归纳表单类型，以及各种表单元素的适用情况。发布测试浏览表单型网页，归纳各种表单元素的适用情况。完成测试。课前预热，获取增值评价“输入”数据，引导学生了解各种类型的表单元素适用的范围，为课上学习做好准备。第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练。播放几个疫情期间快递员送货的温馨场面，以及武汉封城期间的快递员志愿者团队服务场景。导语：2019年一场突如其来的疫情，武汉的封城，全国人民的居家隔离，让大多消费者转向了网购，原本的只需留少量人值班“春节淡季”的快递，一下子压力激增，由于大部分员工已回家过年，并且隔离政策需求也无法提前回来上岗，留守员工放弃该有的假日主动加班加点，解决人们生活所急。还有如武汉快递小哥汪勇这样的4000多名志愿者团队，义务接送医护人员，无偿的为医护人员提供泡面和水，他们为抗击疫情做出了很大的贡献，值得我们每一个人感谢。我曾听到过一些人对快递的职业嗤之以鼻，一方面享受快递带来的便利，一方面又瞧不起这份工作，其实360行行行出状元，不管从事哪一份职业，我们要感谢每一份奉献，也要尊重每一份劳动和付出。今天，我们将以速递网为例，制作一个在线下单页面。对3份作品进行代码纠错。观看视频。回想居家生活期间快递带来的便利，感恩有这样一批辛苦付出的人。纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。以疫情期间快递员给人们生活带来的便利和对抗击疫情的巨大贡献为切入点，引导学生知道感恩。也懂得尊重每一份劳动和付出。案例展示，分析任务（15分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务能力。借助PPT直观演示讲解表单工具面板，讲解域集、单选按钮、复选框等表单元素作用、使用方法及常用属性设置。观看演示与讲解。通过教师示范，帮助学生学习域集等表单元素的作用、使用方法及常用属性设置，达成教学重点。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单。通过制定方案，提高页面制作要点的分析能力，提高团队合作和知识主动建构意识。动手实践，完成任务（10分钟）布置任务：完成页头和页脚部分的结构与样式的制作完成任务。利用已具备的知识完成页头和页脚部分的制作（结构+样式）第二课时发现问题，技术攻关（10分钟）要求学生完成主体部分的制作预设问题：不管文本、密码、邮件、电话、搜索、时间、按钮，还是单选钮、复选框、文件域等，这些表单元素标签都是input，只是类型（type）属性不一样，那么在定义样式的时候，怎么区分这些元素？结合学生的回答引导学生思考：要给每个元素都用class命名，然后用类选择器区分，这样确实能够区分，但要给每个元素都起名，是不是很麻烦?而且类名太多了也容易混乱。提供更好的解决方案input[type=XXX]，解释选择器的用法。尝试完成任务。思考、分析问题，在已建构的知识中寻求问题解决方案。发现新问题。学习并掌握新的选择器写法。通过问题提出与分析，一点点引导学生思考，发现并接受一种新的选择器写法，从而突破本次课教学难点。学习就是一个求索的过程，孜孜以求也是一种工匠精神的体现。求索的过程也有利于培养学生终身学习能力。动手实践，完成任务（25分钟）布置任务：完成页主体部分的结构与样式的制作。完成任务。利用已具备的知识完成页面的制作（结构+样式）分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务。总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。参考教材操作要点提示，完成项目8能力提升有兴趣的同学尝试完成项目8能力挑战，检验自己的学习成果通过平台完善笔记，完成测试题目。自主完成能力提升任务尝试完成能力挑战任务帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思来自于真实案例的快递下单页面，有了邮箱大师打底，学生接受起来相对比较容易。本案例结构相似度高，制作难度比邮箱小一些，学生对重点知识掌握良好。

学习单元项目9：走近盒子模型授课类型新授课教案号5、6任务名称基础任务：根据布局图创建简单的盒模型页面学情分析在前期项目的学习中，学生已经掌握了HTML语言的基本结构和常见标签，掌握了文字、图像、列表、表格、表单等CSS样式，能够制作较简单页面，为学习比较抽象的页面布局做好了知识储备。在本项目中将学习盒子模型的概念及计算，学习使用盒子模型进行布局的方法，掌握解决实际开发中遇到的盒子模型相关问题的方法。教学内容分析内容分析：本课选自项目9走近盒子模型的基础任务，根据布局图创建简单的盒子模型页面，用时2课时。主要内容是学习盒子模型的概念，以及IE盒模型与W3C盒模型的计算方法。思政元素分析：专业热情，了解Web前端专业资讯、培训方向，关注本专业就业情况，增强学生的专业热情。工匠精神，代码纠错和代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标掌握盒子模型的基本概念；掌握盒子模型的计算方法；教学重点根据结构图或效果图建立盒子模型教学难点计算每个元素所占的宽度和高度教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：观看微课《盒子模型的概念》观看视频，完成学习通过观看微课视频，让学生了解盒子模型的基本概念，对即将学习的知识有所了解。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时情景引入，明确任务（5分钟）邀请学生复述课前任务中盒子模型的概念。提出问题：生活中的盒子模型与盒子模型概念的对应关系复述、分析盒子模型概念，思考盒子模型和生活汇总的盒子的对应关系通过对生活中的盒子与盒子模型概念的分析，帮助学生进一步理解盒子模型的概念，为制作盒模型页面打下基础案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识发现问题，技术攻关（10分钟）引导学生发现问题：如何计算每个元素所占的宽度和高度？认真观看教师讲解与演示，学习IE盒子模型和W3C盒子模型的计算方法掌握IE盒子模型和W3C盒子模型的计算方法及区别。动手实践，完成任务（15分钟）布置任务：参考教材及超星学习平台的操作视频，完成简单盒模型页面的制作。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时动手实践，完成任务（30分钟）1、布置任务：继续参考教材及超星学习平台的操作视频，完成简单盒模型页面的制作。。2、收集典型操作问题3、巡视给予帮助。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。解决问题，知识补强（10分钟）请出现问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提示的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的可能。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。分配作品，评价总结（5分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思盒子模型比较简单，但很重要，学生接受的比较好。

学习单元项目9：走近盒子模型授课类型新授课教案号7、8任务名称能力提升：创建三列布局的盒子模型学情分析在本项目基础任务的学习中，学生已经掌握了盒子模型的概念，以及IE盒模型和W3C盒模型的计算方法，能够根据布局图制作较简单的盒模型页面，为学习比较复杂的盒模型布局做好了知识储备。在本项目中将学习三列盒子模型的创建方法，掌握解决实际开发中遇到的盒子模型相关问题的方法。教学内容分析内容分析：本课选自项目9走近盒子模型的能力提升任务，创建三列布局的盒子模型，用时2课时。主要内容是三列盒模型的创建方法，以及box-sizing属性的含义。思政元素分析：专业热情，了解Web前端专业资讯、培训方向，关注本专业就业情况，增强学生的专业热情。工匠精神，代码纠错和代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标掌握三列盒子模型的创建方法；掌握2种box-sizing属性值；教学重点根据结构图或效果图建立三列盒子模型教学难点掌握box-sizing属性教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：登录超星学习平台，复盘盒子模型相关知识，对掌握不够扎实的知识重点学习。完成任务通过对前期所学知识进行复习、查漏补缺，为完成综合项目做好准备。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时情景引入，明确任务（5分钟）展示上节盒模型效果图，分析效果图中的布局特点：两列布局回顾，思考效果图的布局特点，从布局视角审视页面元素的位置关系通过对上节课盒模型的布局分析，回顾知识的同时，培养学生的布局意识。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析页面构成元素和布局特点：三列布局分析页面构成元素和布局特点解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识发现问题，技术攻关（10分钟）引导学生发现问题：保持一个盒子的真实占有宽度不变？box-sizing属性：语法格式：box-sizing:content-box|border-box|inherit;content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制认真观看教师讲解与演示，学习box-sizing属性的语法格式及属性值含义掌握box-sizing两种属性值的含义及区别。动手实践，完成任务（15分钟）布置任务：参考教材及超星学习平台的操作视频，完成三列布局的盒模型制作。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时动手实践，完成任务（30分钟）1、布置任务：继续参考教材及超星学习平台的操作视频，完成三列布局盒模型的制作。2、收集典型操作问题3、巡视给予帮助。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。解决问题，知识补强（10分钟）请出现问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提示的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的可能。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。分配作品，评价总结（5分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思三列布局是在两列基础上加以变化，学生理解的比较快，完成度高。学习单元项目9：走近盒子模型授课类型新授课教案号9、10任务名称能力挑战：制作“专业宣传”网页学情分析在本项目能力提升的学习中，学生已经掌握了三列盒子模型的创建方法，以及box-sizing的两种属性值的含义及区别，能够根据布局图制作三列盒模型，为学习比较复杂的盒模型布局做好了知识储备。在本项目中将学习综合型布局盒子模型的创建方法，掌握解决实际开发中遇到的盒子模型相关问题的方法。教学内容分析内容分析：本课选自项目9走近盒子模型的能力挑战任务，创建综合型布局的盒子模型，用时4课时，本节课为第3、4课时。主要内容是综合布局盒模型的创建方法，以及伪元素。思政元素分析：专业热情，了解Web前端专业资讯、培训方向，关注本专业就业情况，增强学生的专业热情。工匠精神，代码纠错和代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标掌握综合型布局盒子模型的创建方法；掌握常见伪元素的含义和使用方法；教学重点根据结构图或效果图建立综合型盒子模型教学难点掌握常见伪元素的含义和使用方法；教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：从学习平台下载自己的作业代码（header部分和footer部分），熟悉代码，总结问题。平台查看任务效果图，对页面主体部分结构进行分析。查看代码进行复习，总结问题。通过查看代码对任务进行复习，从效果图中分析页面主体部分结构，为制作页面做好准备。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时情景引入，明确任务（5分钟）展示学生课前提交的图文资料，进行分类和筛选。提出任务：如何将专业资料制作成专业宣传页面？观看提交的图文资料，思考如何将其制作成专业宣传页面。观看提交的资料，了解专业发展，筛选资料作为网页素材。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析页面构成元素和布局特点：综合布局分析页面构成元素和布局特点解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识发现问题，技术攻关（10分钟）引导学生发现问题：什么是伪元素？CSS伪元素:first-line伪元素:first-letter伪元素伪元素和类多重伪元素:before伪元素:after伪元素观看微课，学习常见伪元素掌握常见伪元素及使用方法。动手实践，完成任务（15分钟）布置任务：参考教材及超星学习平台的操作视频，完成“专业宣传”页面主体部分的制作。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时动手实践，完成任务（30分钟）1、布置任务：继续参考教材及超星学习平台的操作视频，完成“专业宣传”页面主体部分的制作。2、收集典型操作问题3、巡视给予帮助。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。解决问题，知识补强（10分钟）请出现问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提示的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的可能。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。分配作品，评价总结（5分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本节课中学生继续学习了综合型布局盒子模型的创建方法和常见伪元素及使用方法。学生能够按照方案完成页面布局较为复杂的主体部分的制作，能够基本理解伪元素的含义和伪元素的使用方法。学习单元项目10：标准流布局网页设计与制作授课类型新授课教案号11、12任务名称基础任务：制作“谷穗儿机构”网页学情分析在上一项目中，学生学习了盒子模型，能够理解盒子模型的概念及其在网页制作中的作用；掌握了使用CSS控制页面元素外观和位置的基本方法；初步建立了网页布局的理念。从本项目开始，将详细学习常用的网页布局方式。教学内容分析内容分析：本课选自布局篇项目10标准流布局网页设计与制作的基础任务。本节主要内容是在制作“谷穗儿机构”网页的过程中理解标准流的概念，学习对页面整体及各局部的大小进行控制的方法，以及处理标准流布局中垂直外边距的合并问题。思政元素分析：信守承诺，讲诚信通过页面内容，引导学生从事电子商务交易时，要讲诚信。诚信即诚实守信，是人类社会千百年传承下来的道德传统，它强调诚实劳动、信守承诺。在电子信息时代，各行各业都应该恪守诚信。感受工匠精神，通过每次课开头的代码纠错与项目收尾的代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标1.掌握标准流的基本概念2.能够进行流布局设计，能够对页面整体及各局部的大小进行控制。3.在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点标准流的概念及布局方法教学难点标准流布局中垂直外边距的合并问题教法学法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习介绍一个你印象最深的电子商务门户网站。通过上网搜集资料，介绍一个你印象最深的电子商务门户网站，做成PPT在课堂上讲解。引导学生在查找、筛选和整理门户网站资料的过程中，了解企业网站在电子信息时代的作用。第一课时情景引入，明确任务（10分钟）1.点评上次课作品，选择3份典型作品进行代码纠错训练2.请3位同学介绍自己印象最深的电子商务门户网站。1.对3份作品进行代码纠错2.认真听讲，从专业角度思考这些电子商务网站的优秀之处提高代码排错能力，培养学生严谨细致一丝不苟的工匠精神通过学生讲解，加强对电子商务网站的认识，促进自己的专业学习。案例展示，分析任务（10分钟）展示项目完成效果观察任务效果，思考制作思路欣赏作品，通过页面内容体会诚信的重要性。在电子信息时代，各行各业都应该恪守诚信。引导学生分析页面整体布局特点页头部分nav正文部分content页脚部分footer分析网页特点和页面构成元素解析任务，知识建构准备培养学生分析任务的能力小组协作，制作定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习小组讨论，探究页面HTML结构及基本CSS样式，并填写任务单通过制定方案，提高页面制作要点的分析能力，提高团队合作和知识主动建构意识。动手实践，完成任务（15分钟）布置任务：完成页面的整体布局完成整体布局的HTML结构和CSS样式利用已具备的知识完成页面的整体布局（结构+样式）第二课时发现问题：技术攻关（10分钟）解释什么是标准流布局学习标准流布局的概念学习流布局的概念，达成教学重点：进一步理解网页布局理念动手实践，完成任务（35分钟）布置任务：制作页头部分引导学生分析页头的结构与样式布置任务：完成页头部分的制作随老师讲解进行页面分析完成页头部分制作培养从外到内，从上到下的设计与制作理念提高项目分析与制作能力第三课时动手实践，完成任务（45分钟）布置任务：制作内容部分引导学生分析内容部分的结构与样式布置任务：完成内容部分的所作巡视指导随老师讲解进行页面分析完成内容部分制作培养从外到内，从上到下的设计与制作理念提高项目分析与制作能力第四课时动手实践，完成任务（10分钟）布置任务：制作页脚部分引导学生分析页脚部分的结构与样式布置任务：完成页脚部分的制作随老师讲解进行页面分析完成页脚部分制作培养从外到内，从上到下的设计与制作理念提高项目分析与制作能力发现问题，技术攻关：（15分钟）问题：演示标准流布局中垂直外边距的合并问题2.讲解问题解决方案理解这种现象，配合学习平台上的技术攻关视频掌握问题解决方法突破教学难点，在实际应用中经常会遇到垂直外边距的合并问题，学生在编码过程中也容易忽略相关属性的设置，通过讲解进行知识点的强化。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务。总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。2.完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思标准流布局的概念相对简单，容易理解，学生经过本次课学习，较好地掌握了标准流布局的制作方法。后面稍加练习，知识运用将会更加熟练。学习单元项目10：标准流布局网页设计与制作授课类型新授课教案号13、14任务名称能力提升：制作“UI设计院——博客”网页学情分析本课前学生已学习了盒子模型及流布局的概念，能理解网页布局理念，使用较好掌握用CSS样式来控制网页中各HTML元素的大小、位置、显示样式等，能对网页进行流布局设计，但在熟练程度及灵活运用上还需要加强。教学内容分析内容分析：本课选自布局篇项目10标准流布局网页设计与制作的能力提升任务。能力提升任务要求学生根据制作要点提示自己判断需要运用的知识技能，使用哪些HTML元素实现页面结构，使用哪些属性实现需要的样式等，是对学生本项目学习效果的检测，也是对本项目知识技能运用能力的强化。思政元素分析：终身学习的意识：互联网+时代，知识、技能日新月异。通过页面内容引导学生意识到只有永远保持学习的习惯，具备终身学习的意识，不断学习新知识、新技能才能成为优秀的职业人，才能不被社会淘汰；工匠精神：通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标1.掌握标准流的基本概念2.能够进行流布局设计，能够对页面整体及各局部的大小进行控制。3.培养严谨细致的工作态度教学重点根据制作要点提示判断结构、样式代码教学难点根据制作要点提示判断结构、样式代码教法学法项目教学法教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习以小组为单位了解什么是“互联网+时代”？对职业人有哪些基本要求？发布课前测试查找资料，了解“互联网+时代”及其对职业人的要求。完成课前测试。课前预热，获取增值评价“输入”数据，同时引导学生培养终身学习的意识第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练2.布置任务：小组派代表讲述“互联网+时代”对职业人的要求对3份作品进行代码纠错2．小组派代表讲述“互联网+时代”对职业人的要求纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。同时引导学生培养终身学习的意识案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析内容分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务能力。小组协作，制定方案（15分钟）引导学生阅读教材中的制作要点。小组讨论探究制作方案。3.填写任务单。阅读材料小组讨论，探究页面HTML结构及基本CSS样式。3.填写任务单。引导学生根据教材中的制作要点制定方案，提高判断网页结构和样式的能力，达成教学重难点。提高团队合作和知识主动建构意识。动手实践，完成任务（10分钟）布置任务：完成任务结构部分自主完成任务结构部分自主完成任务代码编写，提高知识应用能力。第二课时动手实践，完成任务（35分钟）布置任务：完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作自主完成任务结构和基本样式代码编写，提高知识应用能力分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务。总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。梳理本次课知识点，听取教师评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，并为下节课学习做好准备。教学反思本课页面为标准流布局，结构清晰简洁，学生掌握较好，能顺利根据操作提示完成任务。个别学生不看操作提示独立完成任务，完成情况良好。今后可适当调整难度，针对不同程度学生分层设置案例。

学习单元项目10：标准流布局网页设计与制作授课类型新授课教案号15、16任务名称能力挑战：制作“简历工厂”网页学情分析学生已经完成了项目10标准流布局网页设计与制作的基础知识学习，较好掌握了标准流布局的制作方法。但如何灵活运用所学知识解决实际问题，在实际任务中应用这些知识技能实现想要的网页效果的能力还需要进一步加强。教学内容分析内容分析：本课选自项目10标准流布局网页设计与制作的能力挑战。能力挑战要求学生通过网页效果图就能判断出制作这个页面所需要运用的知识技能，使用哪些HTML元素能够实现页面结构，使用哪些属性能够实现的样式等。能力挑战既是对学生本项目知识技能掌握情况和综合运用能力的检验，也是本门课程对学生能力培养的最终教学目标——看到任何网页都能依靠自己的知识储备判断出所需使用的知识技能并实现，这是岗位职业能力需求的最终体现。思政元素分析：工匠精神：学生现在是高二年级，即将走上实习岗位。一份优秀的简历将是留给实习单位的第一印象。而认真学习专业技能，才是一份优秀简历的基础。通过页面内容引导学生为了自己将来的职业生涯而努力学习，不断进取；通过代码纠错与代码优化，培养学生严谨细致的工作习惯和精益求精的工匠精神。教学目标巩固本项目学习效果，培养根据UI设计图编写代码的能力；具备灵活运用知识储备实现页面效果的能力；在代码纠错与优化过程中逐步养成行业规范意识及精益求精的工匠精神。教学重点能够通过效果图分析出制作要点教学难点能够通过效果图分析出制作要点教法学法项目教学法主要教学手段及资源机房实训案例、教材、PPT、微课、操作视频、超星学习平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动第一课时情景引入，明确任务（10分钟）点评上次课作业，选择3份典型作业进行代码纠错训练。导语：同学们现在是高二年级了，即将进入实习阶段。如果现在应聘实习岗位，你将如何向面试官介绍你自己呢？对3份作品进行代码纠错。思考并回答问题。纠错训练帮助学生回顾上次课学习内容，提高代码排错能力，培养严谨细致一丝不苟的工匠精神。通过问题引导学要认真学习专业技能，为了实习时交出一份优秀的简历而努力。案例展示，分析任务（15分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果。引导学生分析网页特点和页面构成元素结构分析（重点分析单元格的合并与拆分及上、下行内容的对齐效果设置，这是学生容易忽略并出错的地方）内容分析样式分析（重点分析首字下沉需要做的结构处理）请学生代表分享页面分析结果，并进行评价。分析网页特点和页面构成元素学生代表总结分析结果，并聆听评价。解析任务，知识建构准备，培养学生分析任务能力。小组协作，制定方案（20分钟）平台发布任务单，引导学生小组讨论和探究网页制作方案。请学生代表分享本组方案，并进行评。填写任务单。小组讨论，探究页面HTML结构及基本CSS样式。学生代表分享方案。填写任务单。小组探究网页制作方案，培养学生通过效果图分析出制作方案的能力，突破教学重难点。第二课时动手实践，完成任务（35分钟）布置任务：完成任务结构部分和基本样式制作自主完成任务结构部分和基本样式制作自主完成任务结构和基本样式代码编写，提高知识应用能力分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务。总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本页面主要以文字为主，结构和样式较简单，学生基本能独立完成任务。标准流布局结构简洁，易于掌握。多数学生能达到熟练运用CSS进行布局的程度。为后面浮动布局的学习打下了良好的基础。学习单元项目11：浮动布局网页设计与制作授课类型新授课教案号17、18任务名称基础任务：制作UI设计院网站首页(主体部分)学情分析在前期项目的学习中，学生已经掌握了盒子模型的概念、计算方法，以及流布局的原理及使用，具备了初步对页面进行布局的意识及知识，能够制作较简单的整体页面，为学习比较抽象的浮动布局做好了知识储备。在本项目中将学习浮动布局的原理及使用，梳理较复杂页面的布局分析方法，掌握使用浮动布局进行页面布局时产生的问题的解决方法。教学内容分析内容分析：本课选自项目11浮动布局网页设计与制作的基础任务，制作UI设计院网站首页，用时4课时，本次课为第3、4课时。主要内容是进一步掌握实现浮动布局的4种方法、clear属性的含义、能够清除浮动带来的影响的方法，通过学习培养学生对较复杂页面的结构进行分析的能力，制作浮动布局网页。思政元素分析：专业热情，了解UI设计专业资讯、培训方向，关注本专业就业情况，增强学生的专业热情。工匠精神，代码纠错和代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标进一步掌握实现浮动布局的4种方法。掌握clear属性的含义。掌握清除浮动带来的影响的方法。教学重点掌握清除浮动带来的影响的方法教学难点掌握清除浮动带来的影响的方法教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：在学习平台上推送学习资料《伪元素选择器》，请学生复习伪元素的相关知识。发布测试题，请学生完成。检查答题情况，根据结果调整教学策略。学生通过平台复习《伪元素选择器》的相关知识。完成测试。通过平台自学和知识测试，学生复习前期知识点，为本次课做准备。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时情景引入，明确任务（5分钟）展示问题页面及代码，请同学观察元素设置float属性后周围元素的位置变化。提出问题:参考浮动布局的原理，思考出现问题的原理？观看、分析问题页面，回顾浮动布局原理，分析出现问题的原因。通过对问题页面的分析，了解元素设置float属性后会对周围元素产生影响，明确清除浮动元素带来的影响的操作的必要性。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析布局分析样式分析分析网页特点和页面构成元素解析任务，知识建构准备，培养学生分析任务的能力小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识解决问题，技术攻关（10分钟）引导学生探究如何解决浮动带来的影响。示范清除浮动影响的三种方法，学习清除浮动影响的操作。请学生写入代码，使用目前企业采用的方法，即添加伪元素的方法。清除浮动影响的三种方法：给浮动元素添加行内样式：clear=”both”添加空div，并设置clear属性为both添加伪元素方法<divclass="box1clearfix">………</div>.clearfix:after{display:block;content:"";height:0;visibility:hidden;clear:both;}.clearfix{zoom:1;认真观看教师讲解与演示，学习清除浮动带来的影响的方法。掌握clear属性的含义及使用方法，掌握清除浮动影响的三种方法，能够解决网页布局中的问题。培养学生自主探究的精神。使用符合行业规范的解决方法，培养学生认真负责的工作态度和精益求精的工匠精神。动手实践，完成任务（15分钟）布置任务：参考教材及超星学习平台的操作视频，完成UI设计院网站首页主体部分的制作。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时动手实践，完成任务（35分钟）1、布置任务：继续参考教材及超星学习平台的操作视频，完成UI设计院网站首页主体部分的制作。2、发现问题及时给予指导。参考教材操作步骤及超星学习平台的操作视频，自主完成任务自主完成任务，在实践过程中达成教学重点目标。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思本节课中学生需要掌握清除浮动带来的影响的三种方法，解决任务实施过程中的实际问题，通过本节课的学习，学生对理论知识掌握较好，但针对出现问题的原因的分析还不够准确和熟练，经常在解决问题的过程中花费较多时间，因为是初学，所以此情况属于正常，可以在后面的任务训练中提高能力。

学习单元项目11：浮动布局网页设计与制作授课类型新授课教案号19、20任务名称能力提升：制作学校网站新闻列表(header和footer部分)学情分析在本项目基础任务的学习中，学生学习了浮动布局的原理、制作浮动布局的4种方法、清除浮动带来的影响的方法等，并在项目实施中进行了应用，学生对理论知识的掌握情况较好，但在较复杂页面的结构分析、以及如何将知识转化为实际解决问题的方法上还有欠缺，需要在更多的任务实施中查漏补缺，进一步提高。教学内容分析内容分析：本课选自项目11浮动布局网页设计与制作的能力提升任务，制作学校网站新闻列表，用时4课时，本次课为第1、2课时。主要内容是应用浮动布局原理及方法制作较复杂页面，页面包括两列布局、三列布局和多列布局，可以进一步提高学生页面结构分析和实现页面的能力。思政元素分析：集体荣誉感，通过制作学校网站新闻列表了解学校资讯、获奖信息等，为获奖师生感到荣幸的同时提升集体荣誉感，产生向榜样学习的动力。工匠精神，通过代码纠错与代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标提升页面结构分析能力提高浮动布局制作能力教学重点掌握浮动布局页面的分析和制作能力教学难点代码排错和解决布局问题的能力教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：关注学校公众号，浏览新闻，了解学校的最新资讯。整理关注的新闻，提交图文资料。完成任务、提交资料通过搜集资料，让学生了解学校的最新资讯，关注学校相关的获奖信息，增强学生的集体荣誉感。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时情景引入，明确任务（5分钟）展示学生课前提交的图文资料，进行分类和筛选。提出任务：如何将新闻资料制作成新闻列表页面？观看提交的图文资料，思考如何将其制作成新闻列表。观看提交的资料，感受师生通过努力赢得的各项荣誉，筛选资料作为网页素材。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析布局分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识动手实践，完成任务（25分钟）布置任务：参考教材及超星学习平台的操作提示，完成学校网站新闻列表的header和footer部分的制作。参考教材操作步骤及超星学习平台的操作提示，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时动手实践，完成任务（25分钟）1、布置任务：继续参考教材及超星学习平台的操作提示，完成学校网站新闻列表的header和footer部分的制作。2、收集典型操作问题。3、巡视给予帮助。参考教材操作步骤及超星学习平台的操作提示，自主完成任务自主完成任务，在实践过程中达成教学重点目标。解决问题，知识补强（10分钟）请出现布局问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提示的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的次数。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思这是学习浮动布局的第二个任务，属于提升能力的任务，所以页面比基础任务要复杂一些，学生刚开始分析页面时一时摸不到头脑，不知如何下手，但经过小组讨论探究逐步找到解决方法，都能够比较顺利的对页面结构进行分析，但布局制作的过程还是比较缓慢，知识理解和操作熟练程度需要进一步提升。

学习单元项目11：浮动布局网页设计与制作授课类型新授课教案号21、22任务名称能力提升：制作学校网站新闻列表(主体部分)学情分析在本项目基础任务的学习中，学生学习了浮动布局的原理、制作浮动布局的4种方法、清除浮动带来的影响的方法等，并在项目实施中进行了应用，学生对理论知识的掌握情况较好，但在较复杂页面的结构分析、以及如何将知识转化为实际解决问题的方法上还有欠缺，需要在更多的任务实施中查漏补缺，进一步提高。教学内容分析内容分析：本课选自项目11浮动布局网页设计与制作的能力提升任务，制作学校网站新闻列表，用时4课时，本次课为经3、4课时。主要内容是应用浮动布局原理及方法制作较复杂页面，页面包括两列布局、三列布局和多列布局，可以进一步提高学生页面结构分析和实现页面的能力。思政元素分析：集体荣誉感，通过制作学校网站新闻列表了解学校资讯、获奖信息等，为获奖师生感到荣幸的同时提升集体荣誉感，产生向榜样学习的动力。工匠精神，通过代码纠错与代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标提升页面结构分析能力提高浮动布局制作能力教学重点掌握浮动布局页面的分析和制作能力教学难点代码排错和解决布局问题的能力教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：从学习平台下载自己的作业代码（header部分和footer部分），熟悉代码，总结问题。平台查看任务效果图，对页面主体部分结构进行分析。查看代码进行复习，总结问题。通过查看代码对任务进行复习，从效果图中分析页面主体部分结构，为制作页面做好准备。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析布局分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识动手实践，完成任务（25分钟）1、布置任务：继续参考教材及超星学习平台的操作提示，完成学校网站新闻列表的主体部分的制作。2、收集典型操作问题。3、巡视给予帮助。参考教材操作步骤及超星学习平台的操作提示，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时解决问题，知识补强（10分钟）请出现布局问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提醒和预防的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的可能。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。动手实践，完成任务（25分钟）继续参考教材及超星学习平台的操作提示，完成学校网站新闻列表的主体部分的制作。参考教材操作步骤及超星学习平台的操作提示，自主完成任务自主完成任务，在实践过程中达成教学重点目标。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思这是学习浮动布局的第二个任务，属于提升能力的任务，所以页面比基础任务要复杂一些，本次课制作页面的主体部分，相对header和footer部分难度更高，经过前面的学习和训练，学生都能够比较顺利的对页面结构进行分析，通过问题页面的分析和改错，学生解决问题的能力也有了进一步的提高，只是操作熟练程度需要进一步提升。

学习单元项目11：浮动布局网页设计与制作授课类型新授课教案号23、24任务名称能力挑战：制作咔嚓摄影网(header和footer部分)学情分析在本项目基础任务的学习中，学生学习了浮动布局的原理、制作浮动布局的4种方法、清除浮动带来的影响的方法等，并在项目实施中进行了应用；在能力提升任务的学习和实施过程中大部分学生提高了制作浮动布局页面的能力，加强了代码排错能力，能够应对较复杂的页面布局，但还需要在更多的任务实施中查漏补缺，进一步提高。教学内容分析内容分析：本课选自项目11浮动布局网页设计与制作的能力挑战任务，制作咔嚓摄影网首页，用时4课时，本次课为第1、2课时。主要内容是应用浮动布局原理及方法制作较复杂页面，页面包括两列布局、三列布局和多列布局，可以进一步提高学生页面结构分析和实现页面的能力。思政元素分析：欣赏祖国大好河山，通过制作咔嚓摄影网让学生领略祖国的大好河山、地大物博，从而心生向往，产生民族自豪感。工匠精神，通过代码纠错与代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标提升页面结构分析能力提高浮动布局制作能力教学重点掌握浮动布局页面的分析和制作能力教学难点代码排错和解决布局问题的能力教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：在学习平台发布资料《常见布局问题汇总》。请同学们利用休息时间拍摄北京的美景，作为网页素材。在学习平台阅读学习资料，完成学习。拍摄北京优美风景图片，提交文件。学生通过学习平台阅读学习资料，熟悉常见布局错误代码，提高任务实施过程中代码排错的能力。拍摄照片作为任务网页的素材，提升学生的学习兴趣。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时情景引入，明确任务（5分钟）展示优秀摄影作品。筛选照片作为网页素材。观看提交的图片资料，感受祖国的大好河山。观看提交的资料，感受祖国的大好河山，激发学生的爱国情怀，筛选资料作为网页素材。案例展示，分析任务（5分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析布局分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识动手实践，完成任务（25分钟）1、布置任务：参考UI设计图，完成咔嚓摄影网的header和footer部分的制作。2、收集典型操作问题。3、巡视给予帮助。参考UI设计图，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时解决问题，知识补强（10分钟）请出现布局问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提示的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的次数。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。动手实践，完成任务（25分钟）布置任务：继续参考UI设计图，完成咔嚓摄影网的header和footer部分的制作。参考UI设计图，自主完成任务自主完成任务，在实践过程中达成教学重点目标。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思这是学习浮动布局的第三个任务，属于能力挑战任务，页面比基础任务和能力提升任务提高了难度，同时没有提供操作视频或操作提示，要由学生独立完成结构分析、结构代码编写和样式编写，对于学生来说是一个检验和挑战。大部分学生能够完成，但还有一部分掌握不够扎实的学生速度较慢，出错较多，排错能力不够，需要老师的指导和更多的实践。

学习单元项目11：浮动布局网页设计与制作授课类型新授课教案号25、26任务名称能力挑战：制作咔嚓摄影网(主体部分)学情分析在本项目基础丿的学习中，学生学习了浮动布局的原理、制作浮动布局的4种方法、清除浮动带来的影响的方法等，并在项目实施中进行了应用；在能力提升任务的学习和实施过程中大部分学生提高了制作浮动布局页面的能力，加强了代码排错能力，能够应对较复杂的页面布局，但还需要在更多的任务实施中查漏补缺，进一步提高。教学内容分析内容分析：本课选自项目11浮动布局网页设计与制作的能力挑战任务，制作咔嚓摄影网首页，用时4课时，本次课为第3、4课时。主要内容是应用浮动布局原理及方法制作较复杂页面，页面包括两列布局、三列布局和多列布局，可以进一步提高学生页面结构分析和实现页面的能力。思政元素分析：欣赏祖国大好河山，通过制作咔嚓摄影网让学生领略祖国的大好河山、地大物博，从而心生向往，产生民族自豪感。工匠精神，通过代码纠错与代码优化，培养学生严谨细致的工作习惯；在行业规范中培养学生认真负责的工作态度和精益求精的工匠精神。教学目标提升页面结构分析能力提高浮动布局制作能力教学重点掌握浮动布局页面的分析和制作能力教学难点代码排错和解决布局问题的能力教学方法任务驱动教学地点及资源机房实训案例、教材、PPT、微课、操作视频、超星学习通平台使用教材《网页设计与制作案例教程——HTML5+CSS3》教学环节（时间分配）教学内容设计意图教师活动学生活动课前学习发布任务：从学习平台下载自己的作业代码（header部分和footer部分），熟悉代码，总结问题。平台查看任务效果图，对页面主体部分结构进行分析。查看代码进行复习，总结问题。通过查看代码对任务进行复习，从效果图中分析页面主体部分结构，为制作页面做好准备。帮助学生养成课前预习的良好习惯，拓展学习时间，养成较强的学习规划意识。第一课时案例展示，分析任务（10分钟）展示任务完成效果观察任务效果，思考制作思路。欣赏作品，了解任务效果引导学生分析网页特点和页面构成元素结构分析内容分析布局分析样式分析分析网页特点和页面构成元素。解析任务，知识建构准备，培养学生分析任务的能力。小组协作，制定方案（10分钟）平台发布任务单，引导学生小组讨论和探究学习。小组讨论，探究网页整体结构的划分。培养团队合作和知识建构意识动手实践，完成任务（25分钟）1、布置任务：继续参考UI设计图，完成咔嚓摄影网的主体部分的制作。2、收集典型操作问题。3、巡视给予帮助。参考UI设计图，自主完成任务自主完成任务，在实践过程中达成教学重点目标。第二课时解决问题，知识补强（10分钟）请出现布局问题的学生展示代码和网页效果。查看代码，探究出现问题的原因。展示问题代码和网页效果可以让学生看到更多可能出错的原因，对学生起到提醒和预防的作用。培养学生严谨细致的工作习惯及精益求精的工匠精神。请学生分析讲解错误原因，提出修改意见，观察效果。找到原因的同学提出修改意见，修改后观察效果。代码排错对提高学生编写代码的能力是一种有效的方法，也可以减少犯相同错误的可能。给其他同学排错成功也可以大大提升学生的自信，增强学习兴趣，培养对专业的热情。动手实践，完成任务（25分钟）继续参考UI设计图，完成咔嚓摄影网的主体部分的制作。参考UI设计图，自主完成任务自主完成任务，在实践过程中达成教学重点目标。分配作品，评价总结（10分钟）借助超星平台分组任务功能，随机分配作品。布置线上自评与组内互评任务总结本次课重难点，点评学生表现。接收作品，查看效果和代码，完成作品评价。完成自评与组内互评。跟随教师梳理本次课知识点，听取评价。通过多元评价，引导学生树立客观公正的评价意识和实事求是的工作精神。教师总结提炼，帮助学生养成归纳总结的学习习惯。课后巩固将知识点整理到笔记本上。完成测试题目。通过平台完善笔记，完成测试题目。帮助学生巩固所学知识，获取增值评价“输出”数据，为下节课学习做好准备。教学反思这是学习浮动布局的第三个任务，属于能力挑战的任务，页面比基础任务和能力提升任务提高了难度，同时没有提供操作视频或操作提示，要由学生独立完成结构分析、结构代码编写和样式编写，对于学生来说是一个检验和挑战。经过前面课程的学习大部分学生能够完成，但还有个别学生速度较慢，出错较多，排错能力不够，需要老师的指导和更多的实践。

学习单元项目12：定位布局网页设计与制作授课类型新授课教案号27、28任务名称基础任务：制作精品购物网(header和主体部分)学情分析在前期项目的学习中，学生学习了浮动布局的原理与技巧、4种float属性、以及清除浮动带来的影响的方法等，通过三个页面的学习与巩固，大部分学生基本具备了制作浮动布局页面的能力，具有一定的代码