职业院校教师能力大赛:网站页面设计教案
职业院校教师能力大赛：网站页面设计教案
一、HTML5基础 ............................... 3
二、排列页面内容................. 错误!未定义书签。
三、表单................................. 错误!未定义书签。
四、CSS基础 .......................... 错误!未定义书签。
五、常用样式属性................. 错误!未定义书签。
六、背景与阴影..................... 错误!未定义书签。
七、盒子模型......................... 错误!未定义书签。
八、页面布局与规划 ............. 错误!未定义书签。
一、HTML5基础
课题名称
HTML5基础
授课课时
2课时
授课班级
计算机网络技术××班
授课时间
2020年××月××
授课地点
机房××
授课类型
理实一体
授课形式
混合式学习
教材处理
所选教材
××,××等,全国高等院校信息化专业推荐使用系列教材《HTML5网页设计》,2018.07,××××出版社。
内容划分
根据普通高等学校高等职业教育（专科）专业目录及专业简介（截至2019年）、信息和通信工程技术人员国家职业标准，我校计算机网络技术专业人才培养方案、课程标准要求，将教材内容整合分解为九个模块。
本节选自
第一章 HTML5基础
教学内容
根据教学总目标，确定本节教学内容。
教学目标
知识目标
1、掌握W3C标准。
2、熟练使用文本、图片以及超链接标签。
技能目标
1、能准确完整描述W3C标准相关内容。
2、准确理解HTML5结构标签的作用。
素质目标
1、养成自主学习和探索的习惯，不断提升发现问题、分析问题、解决问题的能力。
2、学会与人合作，培养团队意识。
学情分析
授课对象：19级计算机网络技术大一学生。
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个
特点：理论性强。
学生基础：初次接触，有一定的电脑操作基础。
教学策略：
1、讲解HTML相关概念及原理。
2、安排讨论：HTML有哪些特点。
3、提问：HTML文档的后缀有哪些。
1、完善小节笔记并标注重难点。
2、组内讨论并分享。
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
小节：HTML介绍及开发工具(15分钟)
1、使用《HTML5网页设计》ppt，展示本课程综合项目，引起学生兴趣。
2、小组讨论：HTML5网页有什么特点，有什么作用。
3、点评总结。
4、小组讨论：同一个网页，如何确保在不同的设备上保持显示的一致性。
6、点评总结。
4、随机抽取学生回答并点评。
5、讲解记事本编写HTML文件的步骤。
6、演示：使用记事本编写hello world程序。
7、讲解Hbuilder编写HTML文件的步骤。
8、演示：使用Hbuilder编写hello world程序
9、安排讨论：总结出两种方式编写HTML文件的优缺点。
10、点评总结。
3、被点名同学进行问题阐述。
4、了解使用记事本编写HTML文档的步骤。
5、掌握使用Hbuilder编写HTML文档的步骤。
6、组内讨论并分享。
4、××会议
5、录屏软件
设计目的
1、强化学生对理论性知识点的掌握。
2、掌握使用Hbuilder编写HTML的步骤。
3、理解HTML文档实现的web标准。
4、为后续课程知识点的掌握奠定基础。
5、解决第一个重点知识点。
教学随记
1、学生兴趣较高，积极参与讨论。
2、学生主动反馈问题，及时。
第2个
小节：HTML5标签(15分钟)
特点：注意区分不同标签的含义和书写位置。
学生：对英文单词的读、写能力较弱。
教学策略：
1、边听边操作，强化掌握和理解。
2、课堂陷进：将head标签的结束标签写漏，引发学生思考。
3、点评总结。
1、讲解相关标签的作用和含义。
2、演示：各标签最终的显示效果。
3、总结课堂陷阱产生的问题及规避措施。
4、带领学生完善随堂笔记。
5、引导学生思考，随机抽取学生回答并点评。
6、知识点小结。
1、观看《HTML5基础PPT》。
2、记录案例演示中的关键步骤。
3、组内讨论课堂陷阱出现的原因及解决措施。
4、完善笔记，理清小节知识点
1、课程教学平台。
2、《HTML5基础PPT》
3、××MOOT学习平台
4、××会议
5、录屏软件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。