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

平台支撑项目导向课程思政2 3 3课题名称HTML5基础授课课时2课时授课班级计算机网络技术××班授课时间2020年××月××授课地点机房××授课类型理实一体授课形式混合式学习教材处理所选教材内容划分根据普通高等学校高等职业教育(专科)专业目录及专业简介(截至2019年)、信息和通信工程技术人员国家职业标我校计算机网络技术专业人才培养方案、课程标准要求，将教材内容整合分解为九个模块。序号第一章础第二章排列页面内容列表标签任务页面章任务一：注注班而面表单控件的使用任务户注册页面任务!编辑页面第四章础分分切任切物物章页面布同与规划任息列表页面任任任章背景与阴影任背景与阴影的使用导航菜里果放果章盒子模型非行榜盒子模型的使用而果第八章常用的样式属性常见样式的使用单在任制作div混含布局综合“E乐购”网站设计与一；“E乐购”首页及精品推荐板块网站站点开发仕务一:ET“产品分本和牵环⑩园班本节选自第一章HTML5基础教学内容根据教学总目标，确定本节教学内容。 4网页网页开发工具【至点】HTML5基础图片标签与超链接标签图片标签【重点】超链按标签【难点】教学目标知识目标2、熟练使用文本、图片以及超链接标签。技能目标素质目标1、养成自主学习和探索的习惯，不断提升发现问题、分析问题、学情分析授课对象：19级计算机网络技术大一学生。1、知识基础：具备一定的平面设计基础。2、技能基础：能熟练使用电脑，打字速度平均70字/分，未接触代码编写3、学习能力：对网页开发比较感兴趣，有较为丰富的网站使用经教学重、难点HTML的基本概名网页网页开发工具【至点】HTML5草础 图片标签与超链接标签图片标签【重点1超筋按标签【难点】教学设计根据教学内容和学情分析，因本节课为本课程的第一次课，学生缺乏编码基础，对开发工具不熟悉，因此，在授课过程中，需关注学生的接受程度与掌握程度，适当集合生活化案例，进行知识点讲解，注重知识点细节，帮助学生更好理解。课前：安排学生进行M0OT学习，完成预习笔记，并由学习小组长进行检查和汇总。统计分析学生M0OT学习结果，并组织实施课前测试，通过学习和测试，明确学生预习中的难点，进行针对性的案例准备课中：进行MOOT学习结果分析，引起学生重视；分析课前测试结果，进行答疑；运用生活化案例，便于学生对知识点的理解；贯穿理实一体化，强化巩固知识点；设置学习小组，组织学生讨论课后：下发课后实践任务，明确提交时间与标准，检测学教学资源资源名称对教学内容的支撑作用5××××课程教学平台课前、课中、课后支持教学《HTML5基础PPT》课中支持教学《HTML5参考手册》课前、课中、课后自学××学习平台课前、课中、课后自学××课堂课中，课后支持教学，教学答疑录屏软件课中支持教学网络资源(1)HTML介绍及开发工具知识要点(2)HTML5标签知识要点学习HTML文档基本结构(3)文本和超链接标签日知识要日知识要课前、课后助学 6图片标签图片标签教学过程环节(用时)内容活动技术手段教师学生课前准备2、发放测试卷(见附件一)3、在学委群发放××课堂授课1、检查MOOT学习情况，检查预习笔记，2、准备并下发测3、申请××会议1、自主学习课程。2、完成预习3、完成测试1、课程教学平台学习平台会议4、网络学习资源设计目的1、促进学生知识内化。2、了解自学情况，调整教学策略。3、促进学生对知识点的了解和掌握。4、帮助学生明确课程重难点。教学随记1、全部同学完成测试。2、测试结果基本正确。3、全部同学完成MOOT学习，完成预习笔记。课程导入(5分钟)1、分析测试结果与MOOT学1、调出测试结果况，解决共性问2、明确课中学习1、抓住学习1、课程教学平L5基础学习平台会议1、讲解HTML相关1、完善小节1、课程 7HTML介绍及开发工具(15分学生基础：初次接触，有一定的电脑操作基础。教学策略：1、使用《HTML5网页设计》ppt,展示本课程综合项目，引如何确保在不同的设备上保持显示的一致性。6、点评总结。3、提问：HTML文档的后缀有哪些。4、随机抽取学生5、讲解记事本编写HTML文件的步骤。事本编写helloworld程序，7、讲解Hbuilder编写HTML文件的world程序9、安排讨论：总结出两种方式编写HTML文件的优10、点评总结。笔记并标注重难点。2、组内讨论3、被点名同学进行问题4、了解使用记事本编写HTML文档的5、掌握使用Hbuilder编档的步骤。6、组内讨论教学平L5基础学习平台会议5、录屏软件设计目的5、解决第一个重点知识点。教学随记第2个特点：注意区分不同标签的含学生：对英文单词的读、写能力较弱。教学策略：4、知识点小结：HTML5的标1、讲解相关标签最终的显示效果。3、总结课堂陷阱产生的问题及规避措施。4、带领学生完善随堂笔记。5、引导学生思考随机抽取学生回答并点评。《HTML5基2、记录案例演示中的关键步骤。3、组内讨论课堂陷阱出现的原因及4、完善笔记理清小节知1、课程教学平L5基础学习平台 86、知识点小结，7、演示随堂实践任务并在学习通下发任务识点5、完成实践任务并在学习通上传会议5、录屏软件设计目的教学随记1、学生兴趣较高，积极参与讨论。2、学生主动反馈问题，及时在线沟通。第3个小节：文本和超链接标签(15分钟)特点：注意区别不同标签的关1、边听边操作，强化掌握和理<h1>、<h2>、<h3>…<h6>标签4、讲解段落标签的效果。6、讲解强调标签<strong>标签9、随堂实践任务，1、讲解相关标签最终的显示效果。3、讲解各标签的4、带领学生完善5、引导学生思考，随机抽取学生回7、演示随堂实践任务并在学习通《HTML5基础PPT》。2、记录案例演示中的关3、组内讨论并阐述讨论5、完成实践任务并在学1、课程教学平L5基础学习平台会议5、录屏软件设计目的2、通过效果理解记忆各标签的使用。教学随记1、学生兴趣较高，积极参与讨论。2、学生主动反馈问题，及时在线沟通。3、学生对标签的书写还不够熟悉。第4个小节：图片与超链接标签(30分钟)1、边听边操作，强化掌握和理7、讲解超链接标签的使用。1、讲解相关标签的与超链接标签最终3、讲解标签的使用4、带领学生完善随5、引导学生思考，随机抽取学生回答《HTML5基础PPT》。2、记录案例演示中的关3、组内讨论并阐述讨论记，理清小1、课程教学平2学习平台 97、演示随堂实践任务并在学习通下发5、完成实践任务并在学会议5、录屏软件设计目的1、掌握本章节难点。2、掌握图片标签的使用，掌握常见属性的设置。3、掌握超链接的使用，理解超链接的使用场景。教学随记1、学生对图片标签较有兴趣。2、授课中，互动较多。3、遇到的问题，进行留言。课程总结(10分钟)1、总结。2、出口考(附件二)、1、总结本节课重、3、学习通上传课1、课程教学平台设计目的教学随记2、完成了课堂目标。课后拓展1、查阅资料，自主学习。2、下发课堂录屏，反复对重难1、线上线下与同学探讨学习1、利用课余时间，查阅资料，自主学2、观看下发的课堂录屏。1、课程教学平台2、网络资源 L5开发设计目的1、进行知识点反复强化。2、提供课堂回放，方便学生复习。教学反馈教学效果课堂评价1、线上教学，学生的积极性较高，整堂课都积极参与互动。2、大部分同学都能及时在××会议平台反馈遇到的问题。教学特色1、使用理实一体化教学，学生能快速进入思考，提升动手能力。2、贯穿多种教学方法，灵活多变，激发学生兴趣，引导学生思考并参与到教学反思1、如何确保学生在线上教学时，都能高效准2、如何监控学生课后线下学习效果。 课前测试(附件一)4、在图片标签中，使用属性设置显示图片的位置。课后测试(附件二)1、Hbuilder提供了创建和管理站点的工具，使用这些工具创建站点，可以方便的管理站点中的目录及文件，使用Hbuilder新建的站点名称是HTML5实践任务。站点建立后，新建页2、使用HTML5的标准文档结构制作一个HTML页面。e①localhost8080/第一章/摩码/安姓宝例2/Demo2.html①localhost8080/第一章/摩码/安姓宝例2/Demo2.htmlx8Clocahox8080/第一载/码实消*B/Lemo_3htmlQ☆【诗文解释】【词语解释】:【诗文赏析】个千人所，万人的王属部在名国小F课：htVtalabaaucenvins47leobteul4、使用HTML5标签制作诗人李白介绍页