职业院校教师能力大赛：网站页面设计教案

续表2目录一、HTML5基础...................................................3二、排列页面内容.................错误!未定义书签。三、表单.................................错误!未定义书签。四、CSS基础..........................错误!未定义书签。五、常用样式属性.................错误!未定义书签。六、背景与阴影.....................错误!未定义书签。七、盒子模型.........................错误!未定义书签。八、页面布局与规划.............错误!未定义书签。续表3一、HTML5基础课题名称HTML5基础授课课时2课时授课班级计算机网络技术××班授课时间2020年××月××授课地点机房××授课类型理实一体授课形式混合式学习教材处理所选教材××,××等,全国高等院校信息化专业推荐使用系列教材《HTML5网页设计》,2018.07,××××出版社。内容划分根据普通高等学校高等职业教育（专科）专业目录及专业简介（截至2019年）、信息和通信工程技术人员国家职业标准，我校计算机网络技术专业人才培养方案、课程标准要求，将教材内容整合分解为九个模块。本节选自第一章HTML5基础教学内容根据教学总目标，确定本节教学内容。续表4教学目标知识目标1、掌握W3C标准。2、熟练使用文本、图片以及超链接标签。技能目标1、能准确完整描述W3C标准相关内容。2、准确理解HTML5结构标签的作用。素质目标1、养成自主学习和探索的习惯，不断提升发现问题、分析问题、解决问题的能力。2、学会与人合作，培养团队意识。学情分析授课对象：19级计算机网络技术大一学生。1、知识基础：具备一定的平面设计基础。2、技能基础：能熟练使用电脑，打字速度平均70字/分,未接触代码编写3、学习能力：对网页开发比较感兴趣，有较为丰富的网站使用经验。教学重、难点教学设计根据教学内容和学情分析，因本节课为本课程的第一次课，学生缺乏编码基础，对开发工具不熟悉，因此，在授课过程中，需关注学生的接受程度与掌握程度，适当集合生活化案例，进行知识点讲解，注重知识点细节，帮助学生更好理解。课前：安排学生进行MOOT学习，完成预习笔记，并由学习小组长进行检查和汇总。统计分析学生MOOT学习结果，并组织实施课前测试，通过学习和测试，明确学生预习中的难点，进行针对性的案例准备和讲解准备。课中：进行MOOT学习结果分析，引起学生重视；分析课前测试结果，进行答疑；运用生活化案例，便于学生对知识点的理解；贯穿理实一体化，强化巩固知识点；设置学习小组，组织学生讨论，激发思维。课后：下发课后实践任务，明确提交时间与标准，检测学生掌握情况，持续强化学生操作。最终实现教学目标。教学资源资源名称对教学内容的支撑作用续表5××××课程教学平台课前、课中、课后支持教学《HTML5基础PPT》课中支持教学《HTML5参考手册》课前、课中、课后自学××学习平台课前、课中、课后自学××课堂课中，课后支持教学，教学答疑录屏软件课中支持教学网络资源⑴HTML介绍及开发工具⑵HTML5标签⑶文本和超链接标签⑷图片标签与超链接标签课前、课后助学续表6教学过程环节(用时)内容活动技术手段教师学生课前准备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个特点：理论性强。1、讲解HTML相关1、完善小节1、课程续表7小节：HTML介绍及开发工具(15分钟)学生基础：初次接触，有一定的电脑操作基础。教学策略：1、使用《HTML5网页设计》ppt，展示本课程综合项目，引起学生兴趣。2、小组讨论：HTML5网页有什么特点，有什么作用。3、点评总结。4、小组讨论：同一个网页，如何确保在不同的设备上保持显示的一致性。6、点评总结。概念及原理。2、安排讨论：HTML有哪些特点。3、提问：HTML文档的后缀有哪些。4、随机抽取学生回答并点评。5、讲解记事本编写HTML文件的步骤。6、演示：使用记事本编写helloworld程序。7、讲解Hbuilder编写HTML文件的步骤。8、演示：使用Hbuilder编写helloworld程序9、安排讨论：总结出两种方式编写HTML文件的优缺点。10、点评总结。笔记并标注重难点。2、组内讨论并分享。3、被点名同学进行问题阐述。4、了解使用记事本编写HTML文档的步骤。5、掌握使用Hbuilder编写HTML文档的步骤。6、组内讨论并分享。教学平台。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的标签通常情况下都是成对存在。1、讲解相关标签的作用和含义。2、演示：各标签最终的显示效果。3、总结课堂陷阱产生的问题及规避措施。4、带领学生完善随堂笔记。5、引导学生思考，随机抽取学生回答并点评。1、观看《HTML5基础PPT》。2、记录案例演示中的关键步骤。3、组内讨论课堂陷阱出现的原因及解决措施。4、完善笔记，理清小节知1、课程教学平台。2、《HTML5基础PPT》3、××MOOT学习平台4、××续表85、提问：body标签的作用是什么。6、点评总结。7、随堂实践任务。6、知识点小结。7、演示随堂实践任务并在学习通下发任务。识点5、完成实践任务并在学习通上传会议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、讲解超链接标签的使用。1、讲解相关标签的作用和含义。2、演示：图片标签与超链接标签最终的显示效果。3、讲解标签的使用场景。4、带领学生完善随堂笔记。5、引导学生思考，随机抽取学生回答1、观看《HTML5基础PPT》。2、记录案例演示中的关键步骤。3、组内讨论并阐述讨论结果。4、完善笔记，理清小1、课程教学平台。2、《HTML5基础PPT》3、××MOOT学习平台续表98、演示：超链接的使用。9、归纳小结。10、知识点小结。11、完成实践课任务。并点评。6、知识点小结。7、演示随堂实践任务并在学习通下发任务。节知识点。5、完成实践任务并在学习通上传。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、如何监控学生课后线下学习效果。续表10课前测试（附件一）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：续表11页面2：