《JavaScript及网页特效制作教案》由会员分享，可在线阅读，更多相关《JavaScript及网页特效制作教案（87页珍藏版）》请在金锄头文库上搜索。
1、编号：SKZWJJXZX-14 JavaScript及网页特效制作教案（2015 2016 学年第 一 学期）适用 软件技术 专业 院系（部） 信息工程系 班 级 教 师 教案首页本次课标题：情景一 HTML网页技术 任务1 使用html语言制作网页授课日期第1周授课班级上课地点实验楼E区课时分配MOOC在线视频学习1课时（60分钟） + 面对面翻转课堂教学1课时（60分钟） 教学目标能力目标知识目标1.能够利用网页设计工具编写HTML标签2.能够利用HTML制作纯文本网页1.了解HTML的含义2.掌握HTML开发环境 3.掌握常见HTML的标签学习者特征分析1、 学生已经学习过网页设计，有一
2、定的基础2、 学生学习基础一般，缺乏动手实践能力3、 大部分学生学习态度较好，学习意愿强，但自主学习能力不强教学任务任务： 使用html语言制作个人网站-个人简介网页案例：个人博客网站重点难点重点：HTML语言标签使用 难点：利用HTML标签直接编写网页。作业或考核请制作一个用于博客系统中个人介绍或者相册、爱好等其中的一个HTML页面，显示内容不限。 参考资料精通JavaScript+jQuery人民邮电出版社前沿科技.精通CSS+DIV网页样式与布局 ，人民邮电出版社。温谦等. HTML+CSS网页设计与布局从入门到精通，人民邮电出版社。温谦等. CSS设计彻底研究，人民邮电出版社。翻转课堂
3、教学设计 序号步 骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法课前：MOOC平台在线学习环节1 学生自主学习观看任务1使用html语言制作网页教学视频；学习课件；上传视频、课件等相关资料； 观看视频20分钟在线学习时长2在线测试完成任务1在线测试题教师导出成绩并分析结果 在线测试10分钟在线测试成绩3完成任务作业用html制作个人博客网站个人简介页面批阅作业完成作业15分钟作业等级判定4在线讨论学生与学生、教师进行答疑讨论回复话题 学生发帖，相互线上讨论15分钟发帖数量与质量评价课中：面对面翻转课堂教与学环节1自主学习检查与讨论公布学生线上学习情况；抽查视频相关知识点抽取学生
4、记录指导 认真演示认真观看5分钟线上统计结果与抽查结果 2课前学习总结与答疑重点提示一下html语法编写规则；并进行答疑总结学生学习情况一对一答疑 学生提问；认真听讲5分钟测试成绩与课前作业成绩3课堂任务下达教师给出课堂完成的任务:制作个人博客中相册、爱好等子网页布置任务巡回答疑分析任务5分钟任务理解情况4分小组完成任务小组分工与协调完成任务：分布局设计部分人员、代码编写人员及测试人员。巡回指导 实战演练；分组讨论 20分钟任务完成情况5小组评价小组互评；（相邻小组互相打分，分数现场公布）学生盘点收获与质疑问答；抽取学生记录指导确定得分依据； 记录结果；10分钟小组协作与沟通能力6小组优秀作品
5、展示学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思；记录优缺点； 学生展示；认真听讲记录；5分钟本次任务综合评价（完成率及创新点）7教师总结与引导总结小组任务情况并给予小组点评；总结表单操作流程与规范讲授认真听讲记录；反思5分钟8布置下次课前要学习的任务布置下次课前要学习的任务：任务2表格告知记录5分钟线上作业与在线测试完成情况课后：反思总结及拓展提升教与学环节1反思总结翻转课堂任务反思记录翻转课堂各个环节是否存在问题；任务难度及学生吸收率；学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展XHTML及xml语法学习教师给予课外资源；适当引导学习，学生进行自
6、主探索学习20分钟答疑分享教学内容 一、任务 制作图文混排的商品介绍页 二、学习目标 使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面三、HTML文档的基本结构HTML文档的结构 HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单 四、
7、总结行级和块级标签有什么区别？用途？ 块级标签分为几类，分别包含哪些？ 常用的4种块状结构是什么？教案首页本次课标题：情景一 HTML网页技术 任务2 表格应用授课日期第2周授课班级上课地点实验楼E区课时分配MOOC在线视频学习1课时（60分钟） + 面对面翻转课堂教学1课时（60分钟） 教学目标能力目标知识目标1、会使用表格的基本结构实现简单表格2、会使用表格相关标签实现跨行、跨列的复杂表格3、会使用表格相关设置进行美化修饰1、熟悉表格的基本结构2、熟悉跨行、跨列的复杂表格的操作学习者特征分析学生前期已经熟悉线下和线上流程，基本已经有了学习目标；学生学习缺乏动手实践能力；大部分学生学习态度较
8、好，学习意愿强，但自主学习能力不强教学任务教学任务：1、绘制各类表格2、表格的美化修饰案例：表格的美化-示例5重点难点教学重点：1、表格的绘制2、表格的美化教学难点：2、复杂表格的使用作业或考核编写如下图所示效果对应的html代码参考资料精通JavaScript+jQuery人民邮电出版社前沿科技.精通CSS+DIV网页样式与布局 ，人民邮电出版社。温谦等. HTML+CSS网页设计与布局从入门到精通，人民邮电出版社。温谦等. CSS设计彻底研究，人民邮电出版社。翻转课堂教学设计 序号步 骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法课前：MOOC平台在线学习环节1 学生自主学
9、习学习 任务2表格应用教学视频；学习课件；上传视频、课件等相关资料； 观看视频20分钟在线学习时长2在线测试完成任务2在线测试题教师导出成绩并分析结果 在线测试10分钟在线测试成绩3完成任务作业应用表格完成个人博客网站个人简介页面发布作业、批阅作业完成作业15分钟作业等级判定4在线讨论学生与学生、教师进行答疑讨论回复话题 学生发帖，相互线上讨论15分钟发帖数量与质量评价课中：面对面翻转课堂教与学环节1自主学习检查与课前学习总结公布学生线上学习情况；抽查视频相关知识点；重点提示一下表格应用编写规则教师抽取学生，总结共同点；教师总结学生学习情况 学生发言，并提出问题10分钟线上统计结果与抽查结果
10、；测试成绩与课前作业成绩2课堂任务操练用表格完成制作个人博客中相册、爱好等子网页；制作相册页面：布局设计部分人员、代码编写人员；应用常见标签内容；F12调试；浏览器兼容性调试； 教师给出课堂完成的任务；布置任务、巡回答疑 学生分析任务；提出问题25分钟任务理解情况；任务完成情况3小组评价小组互评；（相邻小组互相打分，分数现场公布）学生盘点收获与质疑问答；教师观摩；教师纠错并提出更高要求；确定得分依据； 记录结果；10分钟小组协作与沟通能力4小组优秀作品展示应用的标签；演示有哪些调试手段，列举其一调试过程；教师观摩；记录学生演示中注意问题；学生演示本次任务中的制作流程及优点所在，阐明自己不足之处
11、。5分钟本次任务综合评价（完成率及创新点）5教师总结与引导1） 本节重点：应用html标签制作网页；2） 分析页面应用标签注意事项总结小组任务情况并给予小组点评；总结表单操作流程与规范认真听讲记录；反思5分钟学生发言与在线讨论6布置下次课前要学习的任务表格标签；表格进行布局；布置下次课前要学习的任务：任务2表格学生记录5分钟线上作业与在线测试完成情况课后：反思总结及拓展提升教与学环节1反思总结现代职业教学课程的实施对学习方法、教学方法的思考学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展表格嵌套及美工学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享教学内容一、表格的基本结构及语法二、表格的创建三、表格的美化教案首页本次课标题：情景一 HTML网页技术 任务3 使用表单授课日期第3周授课班级上课地点实验楼E区课时分配MOOC在线视频学习1课时（60分钟） + 面对面翻转课堂教学1课时（60分钟） 教学目标能力目标知识目标 会使用表单的基本结构制作表单页面 会使用各种表单元
