JavaScript及网页特效制作教案

1编号：SKZ—WJ—JXZX-14《JavaScript及网页特效制作》教案（2015～2016学年第一学期）适用软件技术专业院系（部）信息工程系班级教师2教案首页本次课标题：情景一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设计彻底研究》，人民邮电出版社。3翻转课堂教学设计序号步骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法——课前：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分钟本次任务综合评价（完成率及创新点）47教师总结与引导总结小组任务情况并给予小组点评；总结表单操作流程与规范讲授认真听讲记录；反思5分钟8布置下次课前要学习的任务布置下次课前要学习的任务：任务2表格告知记录5分钟线上作业与在线测试完成情况——课后：反思总结及拓展提升教与学环节1反思总结翻转课堂任务反思记录翻转课堂各个环节是否存在问题；任务难度及学生吸收率；学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展XHTML及xml语法学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享5教学内容一、任务制作图文混排的商品介绍页二、学习目标使用HTML的基本结构创建网页使用行级和块级标签组织页面内容使用图像标签实现图文并茂的页面三、HTML文档的基本结构HTML文档的结构HTML：HyperTextMarkupLanguage超文本标签语言HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具6htmlheadtitle我的第一个网页/title/headbodyHelloWorld!/body/html1、div-ul(ol)-li：常用于分类导航或菜单等2、div-dl-dt-dd：常用于图文混编的场合3、table-tr-td：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单四、总结行级和块级标签有什么区别？用途？块级标签分为几类，分别包含哪些？常用的4种块状结构是什么？7教案首页本次课标题：情景一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设计彻底研究》，人民邮电出版社。8翻转课堂教学设计序号步骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法——课前：MOOC平台在线学习环节1学生自主学习学习任务2表格应用教学视频；学习课件；上传视频、课件等相关资料；观看视频20分钟在线学习时长2在线测试完成任务2在线测试题教师导出成绩并分析结果在线测试10分钟在线测试成绩3完成任务作业应用表格完成个人博客网站个人简介页面发布作业、批阅作业完成作业15分钟作业等级判定4在线讨论学生与学生、教师进行答疑讨论回复话题学生发帖，相互线上讨论15分钟发帖数量与质量评价——课中：面对面翻转课堂教与学环节1自主学习检查与课前学习总结公布学生线上学习情况；抽查视频相关知识点；重点提示一下表格应用编写规则教师抽取学生，总结共同点；教师总结学生学习情况学生发言，并提出问题10分钟线上统计结果与抽查结果；测试成绩与课前作业成绩2课堂任务操练用表格完成制作个人博客中相册、爱好等子网页；制作相册页面：布局设计部分人员、代码编写人员；应用常见标签内容；F12调试；浏览器兼容性调试；教师给出课堂完成的任务；布置任务、巡回答疑学生分析任务；提出问题25分钟任务理解情况；任务完成情况3小组评价小组互评；（相邻小组互相打分，分数现场公布）学生盘点收获与质疑问答；教师观摩；教师纠错并提出更高要求；确定得分依据；记录结果；10分钟小组协作与沟通能力4小组优秀应用的标签；演示有哪些调试手段，教师观摩；记录学生演示中注意学生演示本次任务中的5分钟本次任务综合评价（完9作品展示列举其一调试过程；问题；制作流程及优点所在，阐明自己不足之处。成率及创新点）5教师总结与引导1）本节重点：应用html标签制作网页；2）分析页面应用标签注意事项总结小组任务情况并给予小组点评；总结表单操作流程与规范认真听讲记录；反思5分钟学生发言与在线讨论6布置下次课前要学习的任务表格标签；表格进行布局；布置下次课前要学习的任务：任务2表格学生记录5分钟线上作业与在线测试完成情况——课后：反思总结及拓展提升教与学环节1反思总结现代职业教学课程的实施对学习方法、教学方法的思考学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展表格嵌套及美工学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享10教学内容一、表格的基本结构及语法二、表格的创建1112三、表格的美化1314教案首页本次课标题：情景一HTML网页技术任务3使用表单授课日期第3周授课班级上课地点实验楼E区课时分配MOOC在线视频学习1课时（60分钟）+面对面翻转课堂教学1课时（60分钟）教学目标能力目标知识目标会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别1.掌握表单的基本结构制作表单页面2.掌握用各种表单元素实现注册页面3.掌握post和get两种提交方式的区别学习者特征分析个别学生不熟悉平台；学生学习开始有一定的兴趣，部分学生线上完成作业和测试较好教学任务教学任务：表单的基本结构制作表单页面案例：精品课程网站首页中建立用户名、密码登陆框。重点难点重点：网站中表单的设计技巧。难点：网站的表单的美工。作业或考核规划一个商业站点动态表单部分。参考资料《精通JavaScript+jQuery》人民邮电出版社前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。温谦等.《CSS设计彻底研究》，人民邮电出版社。1516翻转课堂教学设计序号步骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法——课前：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分钟本次任务综合评价（完成率及创新点）177教师总结与引导总结小组任务情况并给予小组点评；会使用表单控件制作表单讲授认真听讲记录；反思5分钟8布置下次课前要学习的任务布置下次课前要学习的任务：任务4操作CSS告知记录5分钟线上作业与在线测试完成情况——课后：反思总结及拓展提升教与学环节1反思总结表单规范编写总结表单控件编写方法学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展Html5新增语法学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享18教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。二、布置课堂任务单制作淘宝注册页面：三、本例表单的html语法结构分析切换到代码视图模式。观察页面中的超级链接语法格式。1.单行文本框的Html代码姓  名：INPUTTYPE=TEXTNAME=UserNameSIZE=40BRE-Mail：INPUTTYPE=TEXTNAME=UserMailSIZE=40VALUE=username@mailserverBR2.多行文本框的Html代码您使用手机时最常碰到哪些问题？BRTEXTAREANAME=UserTro