JavaScript及网页特效制作教案.docx
《JavaScript及网页特效制作教案.docx》由会员分享，可在线阅读，更多相关《JavaScript及网页特效制作教案.docx（98页珍藏版）》请在冰豆网上搜索。
JavaScript及网页特效制作教案
编号：
SKZ—WJ—JXZX-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、学生学习基础一般，缺乏动手实践能力
3、大部分学生学习态度较好，学习意愿强，但自主学习能力不强
教
学
任
务
任务：
使用html语言制作个人网站-----个人简介网页
案例：
个人博客网站
重
点
难
点
重点：
HTML语言标签使用
难点：
利用HTML标签直接编写网页。
作业或
考核
请制作一个用于博客系统中个人介绍或者相册、爱好等其中的一个HTML页面，显示内容不限。
参
考
资
料
《精通JavaScript+jQuery》人民邮电出版社
前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。
温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。
温谦等.《CSS设计彻底研究》，人民邮电出版社。
翻转课堂教学设计
序号
步骤
教学内容
教师活动
（方法与手段）
学生活动
时间
分配
评价标准与方法
——课前：
MOOC平台在线学习环节
1
学生自主学习
观看任务1使用html语言制作网页教学视频；
学习课件；
上传视频、课件等相关资料；
观看视频
20分钟
在线学习时长
2
在线测试
完成任务1在线测试题
教师导出成绩并分析结果
在线测试
10分钟
在线测试成绩
3
完成任务作业
用html制作个人博客网站个人简介页面
批阅作业
完成作业
15分钟
作业等级判定
4
在线讨论
学生与学生、教师进行答疑讨论
回复话题
学生发帖，相互线上讨论
15分钟
发帖数量与质量评价
——课中：
面对面翻转课堂教与学环节
1
自主学习检查与讨论
公布学生线上学习情况；
抽查视频相关知识点
抽取学生
记录指导
认真演示
认真观看
5分钟
线上统计结果与抽查结果
2
课前学习总结与答疑
重点提示一下html语法编写规则；并进行答疑
总结学生学习情况
一对一答疑
学生提问；认真听讲
5分钟
测试成绩与课前作业成绩
3
课堂任务下达
教师给出课堂完成的任务:
制作个人博客中相册、爱好等子网页
布置任务
巡回答疑
分析任务
5分钟
任务理解情况
4
分小组完成任务
小组分工与协调完成任务：
分布局设计部分人员、代码编写人员及测试人员。
巡回指导
实战演练；
分组讨论
20分钟
任务完成情况
5
小组评价
小组互评；（相邻小组互相打分，分数现场公布）
学生盘点收获与质疑问答；
抽取学生
记录指导
确定得分依据；
记录结果；
10分钟
小组协作与沟通能力
6
小组优秀作品展示
学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。
观摩；
反思；
记录优缺点；
学生展示；认真听讲
记录；
5分钟
本次任务综合评价（完成率及创新点）
7
教师总结与引导
总结小组任务情况并给予小组点评；
总结表单操作流程与规范
讲授
认真听讲
记录；
反思
5分钟
8
布置下次课前要学习的任务
布置下次课前要学习的任务：
任务2表格
告知
记录
5分钟
线上作业与在线测试完成情况
——课后：
反思总结及拓展提升教与学环节
1
反思总结
翻转课堂任务
反思记录翻转课堂各个环节是否存在问题；任务难度及学生吸收率；
学生进行自发交流总结
20分钟
教师写教学日志；
学生写学习笔记
2
拓展
XHTML及xml语法学习
教师给予课外资源；适当引导学习，
学生进行自主探索学习
20分钟
答疑分享
教学内容
一、任务
制作图文混排的商品介绍页
二、学习目标
使用HTML的基本结构创建网页
使用行级和块级标签组织页面内容
使用图像标签实现图文并茂的页面
三、HTML文档的基本结构
HTML文档的结构
HTML：
HyperTextMarkupLanguage超文本标签语言
HTML：
网页的“源码”
浏览器：
“解释和执行”HTML源码的工具
1、div-ul（ol）-li：
常用于分类导航或菜单等
2、div-dl-dt-dd：
常用于图文混编的场合
3、table-tr-td：
常用于图文布局或显示数据
4、form-table-tr-td：
常用于布局表单
四、总结
行级和块级标签有什么区别？
用途？
块级标签分为几类，分别包含哪些？
常用的4种块状结构是什么？
教案首页
本次课标题：
情景一HTML网页技术
任务2表格应用
授课日期
第2周
授课班级
上课地点
实验楼E区
课时分配
MOOC在线视频学习1课时（60分钟）+面对面翻转课堂教学1课时（60分钟）
教
学
目
标
能力目标
知识目标
1、会使用表格的基本结构实现简单表格
2、会使用表格相关标签实现跨行、跨列的复杂表格
3、会使用表格相关设置进行美化修饰
1、熟悉表格的基本结构
2、熟悉跨行、跨列的复杂表格的操作
学习者特征分析
学生前期已经熟悉线下和线上流程，基本已经有了学习目标；
学生学习缺乏动手实践能力；大部分学生学习态度较好，学习意愿强，但自主学习能力不强
教
学
任
务
教学任务：
1、绘制各类表格
2、表格的美化修饰
案例：
表格的美化-示例5
重
点
难
点
教学重点：
1、表格的绘制
2、表格的美化
教学难点：
2、复杂表格的使用
作业或
考核
编写如下图所示效果对应的html代码
参
考
资
料
《精通JavaScript+jQuery》人民邮电出版社
前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。
温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。
温谦等.《CSS设计彻底研究》，人民邮电出版社。
翻转课堂教学设计
序号
步骤
教学内容
教师活动
（方法与手段）
学生活动
时间
分配
评价标准与方法
——课前：
MOOC平台在线学习环节
1
学生自主学习
学习任务2表格应用教学视频；
学习课件；
上传视频、课件等相关资料；
观看视频
20分钟
在线学习时长
2
在线测试
完成任务2在线测试题
教师导出成绩并分析结果
在线测试
10分钟
在线测试成绩
3
完成任务作业
应用表格完成个人博客网站个人简介页面
发布作业、批阅作业
完成作业
15分钟
作业等级判定
4
在线讨论
学生与学生、教师进行答疑讨论
回复话题
学生发帖，相互线上讨论
15分钟
发帖数量与质量评价
——课中：
面对面翻转课堂教与学环节
1
自主学习检查与课前学习总结
公布学生线上学习情况；
抽查视频相关知识点；
重点提示一下表格应用编写规则
教师抽取学生，总结共同点；
教师总结学生学习情况
学生发言，并提出问题
10分钟
线上统计结果与抽查结果；
测试成绩与课前作业成绩
2
课堂任务操练
用表格完成制作个人博客中相册、爱好等子网页；
制作相册页面：
布局设计部分人员、代码编写人员；
应用常见标签内容；
F12调试；
浏览器兼容性调试；
教师给出课堂完成的任务；
布置任务、巡回答疑
学生分析任务；
提出问题
25分钟
任务理解情况；
任务完成情况
3
小组评价
小组互评；
（相邻小组互相打分，分数现场公布）
学生盘点收获与质疑问答；
教师观摩；
教师纠错并提出更高要求；
确定得分依据；
记录结果；
10分钟
小组协作与沟通能力
4
小组优秀作品展示
应用的标签；
演示有哪些调试手段，列举其一调试过程；
教师观摩；
记录学生演示中注意问题；
学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。
5分钟
本次任务综合评价（完成率及创新点）
5
教师总结与引导
1）本节重点：
应用html标签制作网页；
2）分析页面应用标签注意事项
总结小组任务情况并给予小组点评；
总结表单操作流程与规范
认真听讲
记录；
反思
5分钟
学生发言与在线讨论
6
布置下次课前要学习的任务
表格标签；
表格进行布局；
布置下次课前要学习的任务：
任务2表格
学生记录
5分钟
线上作业与在线测试完成情况
——课后：
反思总结及拓展提升教与学环节
1
反思总结
现代职业教学课程的实施
对学习方法、教学方法的思考
学生进行自发交流总结
20分钟
教师写教学日志；
学生写学习笔记
2
拓展
表格嵌套及美工学习
教师给予课外资源；适当引导学习，
学生进行自主探索学习
20分钟
答疑分享
教学内容
一、表格的基本结构及语法
二、表格的创建
三、表格的美化
教案首页
本次课标题：
情景一HTML网页技术任务3使用表单
授课日期
第3周
授课班级
上课地点
实验楼E区
课时分配
MOOC在线视频学习1课时（60分钟）+面对面翻转课堂教学1课时（60分钟）
教
学
目
标
能力目标
知识目标
会使用表单的基本结构制作表单页面
会使用各种表单元素实现注册页面
能理解post和get两种提交方式的区别
1.掌握表单的基本结构制作表单页面
2.掌握用各种表单元素实现注册页面
3.掌握post和get两种提交方式的区别
学习者特征分析
个别学生不熟悉平台；
学生学习开始有一定的兴趣，部分学生线上完成作业和测试较好
教
学
任
务
教学任务：
表单的基本结构制作表单页面
案例：
精品课程网站首页中建立用户名、密码登陆框。
重
点
难
点
重点：
网站中表单的设计技巧。
难点：
网站的表单的美工。
作业或
考核
规划一个商业站点动态表单部分。
参
考
资
料
《精通JavaScript+jQuery》人民邮电出版社
前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。
温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。
温谦等.《CSS设计彻底研究》，人民邮电出版社。
翻转课堂教学设计
序号
步骤
教学内容
教师活动
（方法与手段）
学生活动
时间
分配
评价标准与方法
——课前：
MOOC平台在线学习环节
1
学生自主学习
任务3使用表单教学视频学习；
课件学习；
上传视频、课件等相关资料；
观看视频
20分钟
在线学习时长
2
在线测试
完成任务3在线测试题
教师导出成绩并分析结果
在线测试
10分钟
在线测试成绩
3
完成任务作业
应用表单完成个人博客网站个人登陆、注册页面
批阅作业
完成作业
15分钟
作业等级判定
4
在线讨论
学生与学生、教师进行答疑讨论
回复话题
学生发帖，相互线上讨论
15分钟
发帖数量与质量评价
——课中：
面对面翻转课堂教与学环节
1
自主学习检查与讨论
公布学生线上学习情况；
抽查视频相关知识点
抽取学生
记录指导
认真演示
认真观看
5分钟
线上统计结果与抽查结果
2
课前学习总结与答疑
现场答疑；
重点提示一下表单元素html代码应用编写规则
总结学生学习情况
一对一答疑
学生提问；认真听讲
5分钟
测试成绩与课前作业成绩
3
课堂任务下达
教师给出课堂完成的任务:
用表格完成制作个人博客中注册登陆等子网页
布置任务
巡回答疑
分析任务
5分钟
任务理解情况
4
分小组完成任务
（1）表单参数编写；
（2）属性参数设置；
巡回指导
实战演练；
分组讨论
20分钟
任务完成情况
5
小组评价
（1）页面完整性；
（2）表单控件应用符合规范
观摩；
互答；
确定得分依据；
记录结果；
10分钟
小组协作与沟通能力
6
小组优秀作品展示
学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。
观摩；
反思；
学生展示；认真听讲
记录；
5分钟
本次任务综合评价（完成率及创新点）
7
教师总结与引导
总结小组任务情况并给予小组点评；
会使用表单控件制作表单
讲授
认真听讲
记录；
反思
5分钟
8
布置下次课前要学习的任务
布置下次课前要学习的任务：
任务4操作CSS
告知
记录
5分钟
线上作业与在线测试完成情况
——课后：
反思总结及拓展提升教与学环节
1
反思总结
表单规范编写
总结表单控件编写方法
学生进行自发交流总结
20分钟
教师写教学日志；
学生写学习笔记
2
拓展
Html5新增语法学习
教师给予课外资源；适当引导学习，
学生进行自主探索学习
20分钟
答疑分享
教学内容
一在线平台测试与作业点评
公布学生在线平台测试与作业成绩，并点评。
二、布置课堂任务单
制作淘宝注册页面：
三、本例表单的html语法结构分析
切换到代码视图模式。
观察页面中的超级链接语法格式。
1.单行文本框的Html代码
姓 名：
E-Mail：
2.多行文本框的Html代码
您使用手机时最常碰到哪些问题？
线路太忙
3.单选按钮的Html代码
年 龄：
未满20岁
20~29
30~39
40~49
50岁以上
4.复选框的Html代码
您曾经使用过哪些厂家的手机？
诺基亚
摩托罗拉
爱利信
三星
5.下拉列表/菜单的Html代码
你使用哪个网？
（可复选）
中国电信
中国联通
中国铁通
中国网通
其他
6.按钮元素的Html代码
四、建立表格的html语法总结
1.表单标记符
HTML中表单标记符为FORM，其主要作用是设定表单的起止位置，并指定处理表单数据程序的URL地址。
其基本语法结构如下：
其中Action用于设定处理表单数据程序URL的地址。
method指定数据传送到服务器的方式。
有两种主要的方式，当method="GET"时，将输入数据加在action指定的地址后面传送到服务器；当method="POST"时则将输入数据按照HTTP输送协议中的POST传输方式传送到服务器。
2.表单输入标记符
INPUT是表单输入标记符，在表单创建中使用频繁，大部分表单内容需要用到此标记符。
其语法如下：
各项的意义是：
type：
text表示输入单行文本。
type：
textarea表示输入多行文本。
type：
password表示输入数据为密码，用“*”表示。
type：
checkbox表示复选框。
type：
radio表示单选框。
type：
submit表示提交按钮，数据将被送到服务器。
type：
reset表示清除表单数据，以利于重新输入。
type：
file表示插入一个文件。
type：
hidden表示隐藏按钮。
type：
image表示插入一个图像。
type：
button表示普通按钮。
3.下拉列表/菜单
要创建列表菜单应使用SELECT标记符，并将每个可独立选取的项用一个OPTION标记符标出来。
创建选项菜单的语法如下：
选项1内容
选项2内容
--更多OPTION标记-->
教案首页
本次课标题：
情景一HTML网页技术任务4操作CSS
授课日期
第4周
授课班级
上课地点
实验楼E区
课时分配
在线视频学习1课时（60分钟）+面对面翻转课堂教学1课时（60分钟）
教
学
目
标
能力目标
知识目标
1.能够正确书写CSS语法
2.能够选择CSS选择器并灵活运用
1.掌握CSS的定义和基本语法
2.掌握CSS选择器（标签选择器、选择器组、类选择器、ID选择器、相邻选择器、后代选择器）
学习者特征分析
学生学习大部分已经线上完成作业；
个别学生线上作业、在线测试未做；自主学习能力不强
教
学
任
务
教学任务：
1.通过CSS定义字体大小
2.6种CSS选择器的使用方法
案例：
精品课程网站首页中建立用户名、密码登陆框。
重
点
难
点
重点：
1.CSS的定义和基本语法
难点：
1.CSS选择器（标签选择器、选择器组、类选择器、ID选择器、相邻选择器、后代选择器）
作业或
考核
比较6种CSS选择器，对它们的使用方法进行总结
参
考
资
料
《精通JavaScript+jQuery》人民邮电出版社
前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。
温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。
温谦等.《CSS设计彻底研究》，人民邮电出版社。
翻转课堂教学设计
序号
步骤
教学内容
教师活动
（方法与手段）
学生活动
时间
分配
评价标准与方法
——课前：
MOOC平台在线学习环节
1
学生自主学习
任务4操作CSS教学视频学习；
课件学习；
上传视频、课件等相关资料；
观看视频
20分钟
在线学习时长
2
在线测试
完成任务4在线测试题
教师导出成绩并分析结果
在线测试
10分钟
在线测试成绩
3
完成任务作业
应用CSS完成个人博客网站个人简介页面
批阅作业
完成作业
15分钟
作业等级判定
4
在线讨论
学生与学生、教师进行答疑讨论
回复话题
学生发帖，相互线上讨论
15分钟
发帖数量与质量评价
——课中：
面对面翻转课堂教与学环节
1
自主学习检查与讨论
公布学生线上学习情况；
抽查视频相关知识点
抽取学生
记录指导
认真演示
认真观看
5分钟
线上统计结果与抽查结果
2
课前学习总结与答疑
现场答疑；
重点提示一下表格应用编写规则
总结学生学习情况
一对一答疑
学生提问；认真听讲
5分钟
测试成绩与课前作业成绩
3
课堂任务下达
教师给出课堂完成的任务:
用CSS完成制作个人博客中相册、爱好等子网页
布置任务
巡回答疑
分析任务
5分钟
任务理解情况
4
分小组完成任务
1）独立CSS文件格式；
2）内嵌css样式；
巡回指导
实战演练；
分组讨论
20分钟
任务完成情况
5
小组评价
（1）CSS应用样式格式是否正确；
（2）CSS样式应用是否符合场合
小组互评；（相邻小组互相打分，分数现场公布）
学生盘点收获与质疑问答；
确定得分依据；
记录结果；
10分钟
小组协作与沟通能力
6
小组优秀作品展示
演示：
制作效果；
制作步骤及为什么这样设置；
CSS应用样式说明
学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。
学生展示；认真听讲
记录；
5分钟
本次任务综合评价（完成率及创新点）
7
教师总结与引导
CSS应用两种方式优缺点；
CSS三种选择器的区分
总结小组任务情况并给予小组点评；
总结表单操作流程与规范
认真听讲
记录；
反思
5分钟
8
布置下次课前要学习的任务
布置下次课
升级会员 