JavaScript及网页特效制作教案.docx

1、JavaScript及网页特效制作教案编号：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的标签学习者特

2、征分析1、学生已经学习过网页设计，有一定的基础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分

5、钟小组协作与沟通能力6小组优秀作品展示学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思；记录优缺点； 学生展示；认真听讲记录；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平台在线学

9、习环节1 学生自主学习学习 任务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分

12、钟答疑分享教学内容一、表格的基本结构及语法二、表格的创建三、表格的美化教案首页本次课标题：情景一 HTML网页技术 任务3 使用表单授课日期第3周授课班级上课地点实验楼E区课时分配MOOC在线视频学习1课时（60分钟） + 面对面翻转课堂教学1课时（60分钟） 教学目标能力目标知识目标会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别1.掌握表单的基本结构制作表单页面2.掌握用各种表单元素实现注册页面3.掌握post和get两种提交方式的区别学习者特征分析个别学生不熟悉平台；学生学习开始有一定的兴趣，部分学生线上完成作业和测试较好教学任务教学

13、任务：表单的基本结构制作表单页面 案例：精品课程网站首页中建立用户名、密码登陆框。重点难点重点：网站中表单的设计技巧。难点： 网站的表单的美工。作业或考核规划一个商业站点动态表单部分。参考资料精通JavaScript+jQuery人民邮电出版社前沿科技.精通CSS+DIV网页样式与布局 ，人民邮电出版社。温谦等. HTML+CSS网页设计与布局从入门到精通，人民邮电出版社。温谦等. CSS设计彻底研究，人民邮电出版社。 翻转课堂教学设计 序号步 骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法课前：MOOC平台在线学习环节1 学生自主学习任务3使用表单教学视频学习；课件学习；上传

14、视频、课件等相关资料； 观看视频20分钟在线学习时长2在线测试完成任务3在线测试题教师导出成绩并分析结果 在线测试10分钟在线测试成绩3完成任务作业应用表单完成个人博客网站个人登陆、注册页面批阅作业完成作业15分钟作业等级判定4在线讨论学生与学生、教师进行答疑讨论回复话题 学生发帖，相互线上讨论15分钟发帖数量与质量评价课中：面对面翻转课堂教与学环节1自主学习检查与讨论公布学生线上学习情况；抽查视频相关知识点抽取学生记录指导 认真演示认真观看5分钟线上统计结果与抽查结果 2课前学习总结与答疑现场答疑；重点提示一下表单元素html代码应用编写规则总结学生学习情况一对一答疑 学生提问；认真听讲5分

15、钟测试成绩与课前作业成绩3课堂任务下达教师给出课堂完成的任务:用表格完成制作个人博客中注册登陆等子网页布置任务巡回答疑分析任务5分钟任务理解情况4分小组完成任务（1）表单参数编写；（2）属性参数设置；巡回指导 实战演练；分组讨论 20分钟任务完成情况5小组评价（1）页面完整性；（2）表单控件应用符合规范观摩；互答；确定得分依据； 记录结果；10分钟小组协作与沟通能力6小组优秀作品展示学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思； 学生展示；认真听讲记录；5分钟本次任务综合评价（完成率及创新点）7教师总结与引导总结小组任务情况并给予小组点评；会使用表单控件制作表单讲授认真

16、听讲记录；反思5分钟8布置下次课前要学习的任务布置下次课前要学习的任务：任务4操作CSS告知记录5分钟线上作业与在线测试完成情况课后：反思总结及拓展提升教与学环节1反思总结表单规范编写总结表单控件编写方法学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展Html5新增语法学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享教学内容一 在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。二、 布置课堂任务单 制作淘宝注册页面：三、本例表单的html语法结构分析切换到代码视图模式。观察页面中的超级链接语法格式。1.单行文本框的Html代码 姓 

17、 名：E-Mail：2.多行文本框的Html代码您使用手机时最常碰到哪些问题？线路太忙 3.单选按钮的Html代码年  龄：未满20岁20293039404950岁以上 4.复选框的Html代码您曾经使用过哪些厂家的手机？诺基亚摩托罗拉爱利信三星 5.下拉列表/菜单的Html代码 你使用哪个网？（可复选）中国电信中国联通中国铁通中国网通其他6.按钮元素的Html代码 四、建立表格的html语法总结1.表单标记符 HTML中表单标记符为FORM，其主要作用是设定表单的起止位置，并指定处理表单数据程序的URL地址。其基本语法结构如下： FORM action= URL

18、 method= GET/POST 其中Action用于设定处理表单数据程序URL的地址。 method指定数据传送到服务器的方式。有两种主要的方式，当method=GET时，将输入数据加在action指定的地址后面传送到服务器；当method=POST时则将输入数据按照HTTP输送协议中的POST传输方式传送到服务器。 2.表单输入标记符 INPUT是表单输入标记符，在表单创建中使用频繁，大部分表单内容需要用到此标记符。其语法如下： 各项的意义是： type：text表示输入单行文本。 type：textarea表示输入多行文本。 type：password表示输入数据为密码，用“*”表示。

19、type：checkbox表示复选框。 type：radio表示单选框。 type：submit表示提交按钮，数据将被送到服务器。type：reset表示清除表单数据，以利于重新输入。 type：file表示插入一个文件。 type：hidden表示隐藏按钮。 type：image表示插入一个图像。 type：button表示普通按钮。3.下拉列表/菜单要创建列表菜单应使用SELECT标记符，并将每个可独立选取的项用一个OPTION标记符标出来。创建选项菜单的语法如下： 选项1内容 选项2内容 教案首页本次课标题：情景一 HTML网页技术 任务4 操作CSS授课日期第4周授课班级上课地点实验楼

20、E区课时分配在线视频学习1课时（60分钟） + 面对面翻转课堂教学1课时（60分钟） 教学目标能力目标知识目标1.能够正确书写CSS语法2.能够选择CSS选择器并灵活运用1.掌握CSS的定义和基本语法2.掌握CSS选择器（标签选择器、选择器组、类选择器、ID选择器、相邻选择器、后代选择器）学习者特征分析学生学习大部分已经线上完成作业；个别学生线上作业、在线测试未做；自主学习能力不强教学任务教学任务：1. 通过CSS定义字体大小2. 6种CSS选择器的使用方法 案例：精品课程网站首页中建立用户名、密码登陆框。重点难点重点：1. CSS的定义和基本语法难点：1.CSS选择器（标签选择器、选择器组、

21、类选择器、ID选择器、相邻选择器、后代选择器）作业或考核比较6种CSS选择器，对它们的使用方法进行总结参考资料精通JavaScript+jQuery人民邮电出版社前沿科技.精通CSS+DIV网页样式与布局 ，人民邮电出版社。温谦等. HTML+CSS网页设计与布局从入门到精通，人民邮电出版社。温谦等. CSS设计彻底研究，人民邮电出版社。翻转课堂教学设计 序号步 骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法课前：MOOC平台在线学习环节1 学生自主学习 任务4操作CSS教学视频学习；课件学习；上传视频、课件等相关资料； 观看视频20分钟在线学习时长2在线测试完成任务4在线测试

22、题教师导出成绩并分析结果 在线测试10分钟在线测试成绩3完成任务作业应用CSS完成个人博客网站个人简介页面批阅作业完成作业15分钟作业等级判定4在线讨论学生与学生、教师进行答疑讨论回复话题 学生发帖，相互线上讨论15分钟发帖数量与质量评价课中：面对面翻转课堂教与学环节1自主学习检查与讨论公布学生线上学习情况；抽查视频相关知识点抽取学生记录指导 认真演示认真观看5分钟线上统计结果与抽查结果 2课前学习总结与答疑现场答疑；重点提示一下表格应用编写规则总结学生学习情况一对一答疑 学生提问；认真听讲5分钟测试成绩与课前作业成绩3课堂任务下达教师给出课堂完成的任务:用CSS完成制作个人博客中相册、爱好等

23、子网页布置任务巡回答疑分析任务5分钟任务理解情况4分小组完成任务1）独立CSS文件格式；2）内嵌css样式；巡回指导 实战演练；分组讨论 20分钟任务完成情况5小组评价（1）CSS应用样式格式是否正确；（2）CSS样式应用是否符合场合小组互评；（相邻小组互相打分，分数现场公布）学生盘点收获与质疑问答；确定得分依据； 记录结果；10分钟小组协作与沟通能力6小组优秀作品展示演示：制作效果；制作步骤及为什么这样设置；CSS应用样式说明学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。 学生展示；认真听讲记录；5分钟本次任务综合评价（完成率及创新点）7教师总结与引导CSS应用两种方式优缺点；CSS三种选择器的区分总结小组任务情况并给予小组点评；总结表单操作流程与规范认真听讲记录；反思5分钟8布置下次课前要学习的任务布置下次课