职业院校教师能力大赛：网站页面设计教案
目录
一、HTML5基础...............................
3
二、排列页面内容.................错误!未定义书签。
三、表单.................................错误!未定义书签。
四、CSS基础..........................错误!未定义书签。
五、常用样式属性.................错误!未定义书签。
六、背景与阴影.....................错误!未定义书签。
七、盒子模型.........................错误!未定义书签。
八、页面布局与规划.............错误!未定义书签。
一、HTML5基础
课题名称
HTML5基础
授课课时
2课时
授课班级
计算机网络技术××班
授课时间
2020年××月××
授课地点
机房××
授课类型
理实一体
授课形式
混合式学习
教材处理
所选教材
××,××等,全国高等院校信息化专业推荐使用系列教材《HTML5网页设计》,2018.07,××××出版社。
内容划分
根据普通高等学校高等职业教育（专科）专业目录及专业简介（截至2019年）、信息和通信工程技术人员国家职业标准，我校计算机网络技术专业人才培养方案、课程标准要求，将教材内容整合分解为九个模块。
本节选自
第一章HTML5基础
教学内容
根据教学总目标，确定本节教学内容。
教学目标
知识目标
1、掌握W3C标准。
2、熟练使用文本、图片以及超链接标签。
技能目标
1、能准确完整描述W3C标准相关内容。
2、准确理解HTML5结构标签的作用。
素质目标
1、养成自主学习和探索的习惯，不断提升发现问题、分析问题、解决问题的能力。
2、学会与人合作，培养团队意识。
学情分析
授课对象：计算机网络技术大一学生。
1、知识基础：具备一定的平面设计基础。
2、技能基础：能熟练使用电脑，打字速度平均70字/分,未接触代码编写
3、学习能力：对网页开发比较感兴趣，有较为丰富的网站使用经验。
教学重、难点
教学设计
根据教学内容和学情分析，因本节课为本课程的第一次课，学生缺乏编码基础，对开发工具不熟悉，因此，在授课过程中，需关注学生的接受程度与掌握程度，适当集合生活化案例，进行知识点讲解，注重知识点细节，帮助学生更好理解。
课前：安排学生进行MOOT学习，完成预习笔记，并由学习小组长进行检查和汇总。统计分析学生MOOT学习结果，并组织实施课前测试，通过学习和测试，明确学生预习中的难点，进行针对性的案例准备和讲解准备。
课中：进行MOOT学习结果分析，引起学生重视；分析课前测试结果，进行答疑；运用生活化案例，便于学生对知识点的理解；贯穿理实一体化，强化巩固知识点；设置学习小组，组织学生讨论，激发思维。
课后：下发课后实践任务，明确提交时间与标准，检测学生掌握情况，持续强化学生操作。
最终实现教学目标。
教学资源
资源名称
对教学内容的支撑
作用
××××课程教学平台
课前、课中、课后
支持教学
《HTML5基础PPT》
课中
支持教学
《HTML5参考手册》
课前、课中、课后
自学
××学习平台
课前、课中、课后
自学
××课堂
课中，课后
支持教学，教学答疑
录屏软件
课中
支持教学
网络资源
⑴HTML介绍及开发工具
⑵HTML5标签
⑶ 文本和超链接标签
⑷图片标签与超链接标签
课前、课后
助学
教学过程
环节
(用时)
内容
活动
技术手段
教师
学生
课前准备
1、检查××平台学习情况。
2、发放测试卷（见附件一）
3、在学委群发放××课堂授课地址。
1、检查MOOT学习情况，检查预习笔记。
2、准备并下发测试卷。
3、申请××会议并下发。
1、自主学习MOOT对应课程。
2、完成预习笔记。
3、完成测试
1、课程教学平台
2、××MOOT学习平台
3、××会议
4、网络学习资源
设计目的
1、促进学生知识内化。
2、了解自学情况，调整教学策略。
3、促进学生对知识点的了解和掌握。
4、帮助学生明确课程重难点。
教学随记
1、全部同学完成测试。
2、测试结果基本正确。
3、全部同学完成MOOT学习，完成预习笔记。
课程导入
(5分钟)
1、分析测试结果与MOOT学习情况，解决共性问题。
2、明确课中学习重、难点。
3、明确笔记要点。
1、调出测试结果与MOOT学习情况，解决共性问题。
2、明确课中学习重、难点。
3、明确笔记要点。
1、抓住学习重、难点。
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
4、××会议
第1个
小节：HTML介绍及开发工具(15分钟)
特点：理论性强。
学生基础：初次接触，有一定的电脑操作基础。
教学策略：
1、使用《HTML5网页设计》ppt，展示本课程综合项目，引起学生兴趣。
2、小组讨论：HTML5网页有什么特点，有什么作用。
3、点评总结。
4、小组讨论：同一个网页，如何确保在不同的设备上保持显示的一致性。
6、点评总结。
1、讲解HTML相关概念及原理。
2、安排讨论：HTML有哪些特点。
3、提问：HTML文档的后缀有哪些。
4、随机抽取学生回答并点评。
5、讲解记事本编写HTML文件的步骤。
6、演示：使用记事本编写hello world程序。
7、讲解Hbuilder编写HTML文件的步骤。
8、演示：使用Hbuilder编写hello world程序
9、安排讨论：总结出两种方式编写HTML文件的优缺点。
10、点评总结。
1、完善小节笔记并标注重难点。
2、组内讨论并分享。
3、被点名同学进行问题阐述。
4、了解使用记事本编写HTML文档的步骤。
5、掌握使用Hbuilder编写HTML文档的步骤。
6、组内讨论并分享。
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
4、××会议
5、录屏软件
设计目的
1、强化学生对理论性知识点的掌握。
2、掌握使用Hbuilder编写HTML的步骤。
3、理解HTML文档实现的web标准。
4、为后续课程知识点的掌握奠定基础。
5、解决第一个重点知识点。
教学随记
1、学生兴趣较高，积极参与讨论。
2、学生主动反馈问题，及时在线沟通。
第2个
小节：HTML5标签(15分钟)
特点：注意区分不同标签的含义和书写位置。
学生：对英文单词的读、写能力较弱。
教学策略：
1、边听边操作，强化掌握和理解。
2、课堂陷进：将head标签的结束标签写漏，引发学生思考。
3、点评总结。
4、知识点小结：HTML5的标签通常情况下都是成对存在。
5、提问：body标签的作用是什么。
6、点评总结。
7、随堂实践任务。
1、讲解相关标签的作用和含义。
2、演示：各标签最终的显示效果。
3、总结课堂陷阱产生的问题及规避措施。
4、带领学生完善随堂笔记。
5、引导学生思考，随机抽取学生回答并点评。
6、知识点小结。
7、演示随堂实践任务并在学习通下发任务。
1、观看《HTML5基础PPT》。
2、记录案例演示中的关键步骤。
3、组内讨论课堂陷阱出现的原因及解决措施。
4、完善笔记，理清小节知识点
5、完成实践任务并在学习通上传
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
4、××会议
5、录屏软件
设计目的
1、强化学生对HTML5结构标签的理解。
2、熟悉HTML5各标签的作用。
教学随记
1、学生兴趣较高，积极参与讨论。
2、学生主动反馈问题，及时在线沟通。
第3个小节：文本和超链接标签（15分钟）
特点：注意区别不同标签的关键字。
学生：掌握了HTML5的结构，明确内容标签的书写位置。
教学策略：
1、边听边操作，强化掌握和理解。
2、对比教学：引导学生思考<h1>、<h2>、<h3>...<h6>标签的不同点。
3、点评总结。
4、讲解段落标签的效果。
5、演示：区别标题标签与段落标签。
6、讲解强调标签<strong>标签的用法。
7、提问：常见的文本对齐方式有哪些。
8、点评总结。
9、随堂实践任务。
1、讲解相关标签的作用和含义。
2、演示：各标签最终的显示效果。
3、讲解各标签的使用场景。
4、带领学生完善随堂笔记。
5、引导学生思考，随机抽取学生回答并点评。
6、知识点小结。
7、演示随堂实践任务并在学习通下发任务。
1、观看《HTML5基础PPT》。
2、记录案例演示中的关键步骤。
3、组内讨论并阐述讨论结果。
4、完善笔记，理清小节知识点。
5、完成实践任务并在学习通上传。
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
4、××会议
5、录屏软件
设计目的
1、进一步加强学生对HTML5标签的理解。
2、通过效果理解记忆各标签的使用。
教学随记
1、学生兴趣较高，积极参与讨论。
2、学生主动反馈问题，及时在线沟通。
3、学生对标签的书写还不够熟悉。
第
4个小节：图片与超链接标签（30分钟）
特点：注重操作。
学生：逐步熟悉标签的使用。
教学策略：
1、边听边操作，强化掌握和理解。
2、问题引入：网页如何显示一张图片。
3、讲解图片标签的使用。
4、演示：图片标签的效果。
5、归纳小结。
7、讲解超链接标签的使用。
8、演示：超链接的使用。
9、归纳小结。
10、知识点小结。
11、完成实践课任务。
1、讲解相关标签的作用和含义。
2、演示：图片标签与超链接标签最终的显示效果。
3、讲解标签的使用场景。
4、带领学生完善随堂笔记。
5、引导学生思考，随机抽取学生回答并点评。
6、知识点小结。
7、演示随堂实践任务并在学习通下发任务。
1、观看《HTML5基础PPT》。
2、记录案例演示中的关键步骤。
3、组内讨论并阐述讨论结果。
4、完善笔记，理清小节知识点。
5、完成实践任务并在学习通上传。
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
4、××会议
5、录屏软件
设计目的
1、掌握本章节难点。
2、掌握图片标签的使用，掌握常见属性的设置。
3、掌握超链接的使用，理解超链接的使用场景。
教学随记
1、学生对图片标签较有兴趣。
2、授课中，互动较多。
3、遇到的问题，进行留言。
课程总结
(10分钟)
1、总结。
2、出口考（附件二）。
3、学习通上传课后实践任务。
1、总结本节课重、难点。
2、发放试题。
3、学习通上传课后实践任务。
1、完成测试。
1、课程教学平台
设计目的
1、了解学生课中学习情况。
2、强化重难点知识掌握。
教学随记
1、出口考参与率100%，正确率100%。
2、完成了课堂目标。
3、学生兴趣较高。
课后拓展
1、查阅资料，自主学习。
2、下发课堂录屏，反复对重难点强化。
1、线上线下与同学探讨学习
1、利用课余时间，查阅资料，自主学习。
2、观看下发的课堂录屏。
1、课程教学平台
2、网络资源
3、《HTML5开发手册》。
设计目的
1、进行知识点反复强化。
2、提供课堂回放，方便学生复习。
教学反馈
教学效果/
课堂评价
1、线上教学，学生的积极性较高，整堂课都积极参与互动。
2、大部分同学都能及时在××会议平台反馈遇到的问题。
3、实践任务完成较好。
教学特色
1、使用理实一体化教学，学生能快速进入思考，提升动手能力。
2、贯穿多种教学方法，灵活多变，激发学生兴趣，引导学生思考并参与到整个学习中来。
教学反思
1、如何确保学生在线上教学时，都能高效准时。
2、如何监控学生课后线下学习效果。
课前测试（附件一）
1、网页通常是HTML语言编写的扩展名为或的文件。
2、一个HTML页面分为头部和主体部分，分别采用和表示。
3、网页链接中的文件路径分为和。
4、在图片标签中，使用属性设置显示图片的位置。
5、在HTML中使用标签设置标题，使用标签设置段落。
课后测试（附件二）
1、Hbuilder提供了创建和管理站点的工具，使用这些工具创建站点，可以方便的管理站点中的目录及文件，使用Hbuilder新建的站点名称是HTML5实践任务。站点建立后，新建页面“1.1.html”，然后运行查看。
2、使用HTML5的标准文档结构制作一个HTML页面。
3、使用HTML5的h、p、br等文本标签制作唐诗页面，要求使用正确合适的标签排版页面。
4、使用HTML5标签制作诗人李白介绍页面，并在唐诗页面中添加图片以及超链接。
页面1：
页面2：