《Web标准网页设计》教学设计(教案)全.docx

Web标准设计课程第1单元教学设计（20122013学年第二学期）单元名称：Web标准介绍所属系部：信息工程系制定人：合作人：制定时间：力训练 任 务任务1 .完成班级网站注册页面的结构的开发；任务2.完成班级网站新闻页面结构的开发；任务3.完成班级网站中班级日志结构的开发；任务4.使用XHTML标签开发班级网站首页的结构。本次课中涉及到的有关核心外语词汇严格类型（STRICT）过渡类型（TRANSITIONAL）框架类型（FRAMESET）文件类型声明（DOCTYPE declaration）本次课所需教学资料1 .主教材：Web编程入门经典HTML、XHTML和CSS编著：（美）Jon Duckett出版社：清华大学出版社；2 .任务指导书l_2o3 .参考 w3school 在线教程：Web 标准_百度百科：1 .htmQQ空间4 .任务书1_2 （报告书）。5 .教学课件1_2O6 .案例：班级网站的结构单元教学过程步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）成的任务1.能够掌握XHTML1.下达任务书、任1.下载语法规那么务指导书任务书告知2.熟练书写规范的2.共享学习资源2.任务（教XHTML代码、能够使用3.告知本次课学指导书学内规范的XHTML代码制习内容及目标3.查阅保刖容、作网页结构资料+5目3.能够看懂互联网4.回答的）上网页的源代码，能够任务准备的参考互联网上的网站设问题计自己的网站。1 .学习使用XHTMLl.Web标准构成1.回答代码规范。总结问题引入2.在XHTML文档2.提出任务2.思考（任的首部加入文档类型声3.提出问题HTML设计10务项明。4.讲授网页的过程目）3 .介绍本次课需完操练 1（掌 握步 骤和 基本 技 能）1 .举例介绍XHTML 代码规范2 .举例分析XHTML 与HTML的区别1 .课件展ZF2 .提出问题（XHTML 与 HTML区别）3 .讲授知识点（XHTML代码规范）4 .讲授案例:注册 页面的结构。5 .安排学生完成任务1,教师辅导。L听讲、思考2.模拟案例完成任 务50操练 2（掌 握步 骤和 基本 技 能）1.文档类型声明的 使用。5 .在 XHTML 文 档的首部加入文档类 型声明4.在完 成教师讲授 的例子的基 础上完成任 务120注：每个步骤占用的行数，可以按照实际需要，像“步骤1”那样增减。深化（加 深对 基本 能力 的体 会）1.熟悉使用DIV设 计网页的结构、定义文 档的节1 .DIV定义文档 的节2 .DIV 力口 CSS 布 局和table布局区别3 .布置任务2,辅 导为辅1 .听讲、思考2 .学生完成任务书 中的任务。100+课外归纳知识 和能力）1 .如何创立更严谨 纯洁的网页？2 .规范代码有什么 好处？1 .整理归纳2 .高度概括3 .课件展示1 .文字 记录2 .记忆 训练3 .查阅 资料10作业1.完成任务书1_2课后体会Web标准设计课程第3单元教学设计（20122013学年第二学期）单元名称： CSS样式制作导航栏所属系部：信息工程系制定人：合作人： 制定时间：Web标准设计课程单元教学设计专业英语词汇单元标题CSS样式制作导航栏课次位置3教学学时10授课班级上课地点一体化教室上课时间教学目标能力目标知识目标素质目标1 .能够熟练在 XHTML网页中引用CSS 样式2 .能够熟练设置网页 中文本和段落的样式3 .能够给网页添加背 景颜色、图片4 .能使用CSS样式设 置链接5 .能够熟练的应用 CSS样式美化表格、表单 的样式6 .掌握本单元涉及的1 .CSS语法结构2 .CSS引用3 .CSS字体和段 落样式设计4 .CSS控制页面 二匕甲5 .CSS美化链接6 .CSS美化表格、 表单7 .有关的英文术 语。1 .培养良好的编 码规范习惯。2 .培养严密的逻 辑思维、独立思考、 独立设计、独立调试 的能力。3 .培养积极主动 解决问题的意识与能 力。能力训练任务任务1.在网页中引用CSS任务2.字体和段落样式设计任务3.控制页面背景和美化链接任务4.CSS美化表格表单任务5.班级网站导航栏的制作本次课中涉及到的有关核心外语词汇选择器(selector)文字排列(text-alignment)字体尺寸(font-size)透明(transparent )本次课所需教学资料1 .主教材：Web编程入门经典HTMLv XHTML和CSS编著：（美）JonDuckett出版社：清华大学出版社；2 .任务指导书2_lo3 .参考 w3school 在线教程：Web 标准一百度百科：1 .htmQQ空间4 .任务书2（报告书）。5 .教学课件2。6 .案例：班级网站的美化单元教学过程步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）告知1 .能够熟练在XHTML网页中引用CSS 样式2 .能够熟练设置网页的背景颜色、背景图片3 .能够熟练设置网页 中链接的样式4 .掌握本单元涉及的 专业英语词汇5 .能够熟练设置表 格、表单的样式1 .下达任务书、 任务指导书2 .共享学习资 源3 .告知本次课 学习内容及目标1 .下载任 务书2 .任务指 导书3 .查阅资 料4 .回答任 务准备的问题保刖+5（教学内容、目的）1.能够在XHTML网1 .班级网站结页中插入CSS样式：外部 构设计总结1.回答问引入（任 务项 目）样式表、内部样式表、内 联样式表。2 .在已经做好的班级 网站结构上添加背景图 片、设置背景色。3 .引用CSS样式设置 班级网站的文本、段落的 样式。4 .引用CSS样式设置 班级网站上链接的样式。5 .设置网页上表格、表单的样式。2 .提出任务.提出问题3 .讲授2.思考表现与结构相别离的优点20操练1（掌 握步 骤和 基本技能）式:什么是css、css语法2.XHTML文档引用CSS样式：外部样式表、内部样式表、内联样式表置班级网站的文本、段落 的样式。3.讲授案例:班3.引用CSS样式设级网站新闻页面引1.简单介绍CSS样1 .课件展示.讲授知识点（CSS基础：语法 与引用）用CSS样式。4 .安排学生完 成任务1、任务2, 教师辅导。1 .听讲、思考2 .模拟案例完成任务1、2100+课外操练2（掌握步骤和基本技能）1 .举例介绍如何设置 网页的背景颜色、背景图 片。1 .课件展示.讲授知识点（CSS背景设置）2 .讲授案例:班 级网站新闻页面背1.听讲、思2.模拟案例完成任务360+课景设置。4.安排学生完成任务3,教师辅导Web标准设计课程单元教学设计8 .有关的英文术语。单元标题Web标准介绍课次位置1教学学时2授课班级上课地点一体化教室上课时间教 学 目 标能力目标知识目标素质目标1 .了解Web标准。2 .能够根据网页源 代码看出哪些网页是基 于Web标准设计的。3 .能够理解Web标 准每局部的作用。4 .能够阅读有关的 英文术语。1 .什么是web标准2 .web标准的重要性3 .CSS布局与Table表 格布局的区别4 .基于web标准的网 站欣赏5 .了解结构化语言 XHTML 与 XML6 .了解表现标准语言 CSS7 .了解行为标准语言 JavaScript1 .培养良好的 编码规范习惯。2 .培养学生收 集、选择、处理素材 的能力。3 .培养积极主 动解决问题的意识 与能力。操练3（掌握步骤和基本技能）操练4（掌 握步 骤和基本技能）I.举例介绍css设置链接的样式。1.举例介绍CSS如何 设置表格样式。1 .课件展示2.讲授知识点（锚标签样式设置）3.讲授案例：网站中链接的样式设4.安排学生完 成任务3,教师辅导1 .课件展示.讲授知识点（CSS设置表格）2 .讲授案例:班 级网站新闻页面字体设置。4.安排学生完成任务4,教师辅导1 .听讲、思考2 .自主完成任务340+课夕卜1.模拟案例完成任务460+课夕卜操练4（掌握步 骤和基本 技能）1.举例介绍CSS如何 设置表单样式。1 .课件展示2 .讲授知识点 （CSS设置表单）3 .讲授案例:班 级网站新闻页面字 体设置。4 .安排学生完 成任务4,教师辅导1.模拟案例完成任务460+课外深化 （加深 对基 本能 力的 体会）1.完成班级网站导航栏的制作1.布置任务5, 教师辅导为主。1.学生自主完善任务595+课外归纳（知识 和能 力）1 .网页中表现与别离 的好处2 .多个样式表如何统 一为一个样式表1 .整理归纳2 .高度概括3 .课件展示1.文字记录2.记忆训练3.查阅资料10作业1.完成任务书2_1课后体会注：每个步骤占用的行数，可以按照实际需要，像“步骤1”那样增减。Web标准设计课程第4单元教学设计（20122013学年第二学期）单元名称：CSS类和ID选择器单独设计XHTML元素的样所属系部：信息工程系制定人：合作人： 制定时间：«Web标准设计课程单元教学设计本次课所需教学资料单元标题CSS类和ID选择器单独设计XHTML元素的样式课次位置4教学学时2授课班级上课地点一体化教室上课时间教学目标能力目标知识目标素质目标1.能够熟练使用 CSS类和ID选择器2.能够区分CSS类 选择器和ID选择器1 .CSS类选择器2 .CSS的ID选择 器3 .有关的英文术 语1 .培养良好的编 码规范习惯。2 .培养严密的逻 辑思维、独立思考、 独立设计、能力。3 .培养积极主动 解决问题的意识与能 力。能力训练任务任务1.使用CSS类选择器指定文档中某一类元素的样式任务2.使用CSS的ID选择器指定文档中某一个元素的样式任务3.在班级网站的网页上使用CSS的ID选择器和类选择器本次课中涉及到的有关核心外语词汇透明(transparent )1 .主教材:Web编程入门经典HTML、XHTML和CSS编著:（美）JonDuckett出版社：清华大学出版社；.任务指导书2_2o2 .参考 w3school 在线教程： :Web 标准一百度百科： :1 .htmQQ空间.任务书2_2 （报告书）。3 .教学课件2_2。6.案例：班级网站的美化单元教学过程步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）告知（教学 内容、 目的）1 .能够熟练使用 CSS类和ID选择器2 .能够区分CSS 类选择器和ID选择器1 .下达任务书、任 务指导书2 .共享学习资源3 .告知本次课学 习内容及目标1 .下载任务 书2 .任务指导 书3 .查阅资料4 .回答任务 准备的问题前+5引入（任务工程）1 .使用CSS类选 择器指定文档中某一 类元素的样式2 .使用CSS的ID 选择器指定文档中某 一个元素的样式1 .CSS文字样式' 背景样式设计总结2 .提出任务3 .提出问题4 .讲授1.回答下列问题操练1 （掌握 步骤 和基 本技 能）1.学习使用CSS 类选择器指定文档中 某一类元素的样式1 .课件展示2 .讲授知识点 （CSS类选择器）3 .讲授案例：使用 类选择器指定班级网 站中新闻网页面P标 签的样式。4 .安排学生完成 任务1,教师辅导。1 .听讲、思考2 .模拟案例完成任务10操练2（掌 握步 骤和 基本 技能）1.使用CSS的ID选择器指定文档中 某一个元素的样式1 .课件展ZF2 .讲授知识点（ID 选择器）3 .讲授案例：使用 ID选择器指定班级网 站中新闻网页面中一 个特定标签的样式。4 .安排学生完成 任务2,教师辅导。1 .听讲、思 考2 .回答下列问题（班级网站中需 要ID选择器指 定特殊样式的标 签）3 .模拟案例 完成任务20深化（加深 对基 本能 力的 体会）1.能够区分CSS类选择器和ID选择器1.分CSS类选择器和ID选择器的区别1 .听讲、思考2 .学生自主完成任务30+课外归纳（知 识和 能力）1 .在网页中需要 统一样式的标签使用 类选择器2 .在网页中指定 特殊样式的标签使用 ID选择器1 .整理归纳2 .高度概括3 .课件展ZF1 .文字记录2 .记忆训练3 .查阅资料作业1.完成任务书2_2课后体会注：每个步骤占用的行数，可以按照实际需要，像“步骤1”那样增减。Web标准设计课程第5单元教学设计（20122013学年第二学期）单元名称： CSS盒模型处理XHTML元素 所属系部：信息工程系制定人：合作人：制定时间：2013.1Web标准设计课程单元教学设计单元标题CSS盒模型处理XHTML元素课次位置5教学学时4授课班级上课地点一体化教室上课时间教学目标能力目标知识目标素质目标1 .学会使用DIV 和 SPAN2 .能够熟练设置 文档元素的内容大 小、内边距、边距以 及与其他元素之间的 间距1 .DIV 和 SPAN2 .CSS盒模型介绍3 .CSS边总巨4 .CSS边框5 .有关的英文术语1 .培养良好的编 码规范习惯。2 .培养严密的逻 辑思维、独立思考、 独立设计、的能力。3 .培养积极主动 解决问题的意识与能 力。能力训练任务任务1.在网页中使用DIV和SPAN；任务2.设置网页中块模型的边距；任务3.设置网页中块模型的边框；本次课中涉及到的有关核心外语词汇框模型(Box Model)本次课所需教学资料能 力 训 练 任 务任务1.介绍Web标准及其组成。任务2.介绍课程总的任务：班级网站。本次课中涉及到的有关核心外语词汇结构(Structure)表现(Presentation)行为(Behavior)可扩展标识语言(The Extensible Markup Language)可扩展超文本标识语言(The Extensible HyperText Markup Language)层叠样式表(Cascading Style Sheets)文档对象模型(Document Object Model)本次课所需教学资料1 .主教材:Web编程入门经典HTML、XHTML和CSS编著：（美）JonDuckett出版社：清华大学出版社；2 .任务指导书l_k3 .参考 w3school 在线教程：Web 标准_百度百科：1 .htm4 .任务书1（报告书）。5 .教学课件1。6 .案例：班级网站单元教学过程步骤教学内容及能力/知识教师活动学生活动时间1 .主教材:Web编程入门经典HTML、XHTML和CSS编著:（美）JonDuckett出版社：清华大学出版社；.任务指导书2_3。2 .参考 w3school 在线教程： :Web 标准一百度百科： :1 .htmQQ空间.任务书2_3 （报告书）。3 .教学课件2_3。6.案例：班级网站的美化单元教学过程步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）告知（教学 内容、 目的）1 .学习DIV和 SPAN标签的使用2 .能够熟练设置 文档元素的内容大 小、内边距、边距以 及与其他元素之间 的间距1 .下达任务书、 任务指导书2 .共享学习资源3 .告知本次课学 习内容及目标1 .下载任务 书2 .任务指导 书3 .查阅资料4 .回答任务 准备的问题课前+5引入（任务工程）任务1.在网页 中使用DIV和 SPAN；任务2.设置网 页中块模型的边距；任务3.设置网 页中块模型的边框；1 .提出任务2 .提出问题3 .讲授1 .回答下列问题2 .思考问题（内联标签和 块标签）10操练1 （掌握 步骤 和基 本技 能）1.介绍DIV和SPAN的使用1.课件展ZF2提出问题（找 出XHTML标签中的 块级标签和行内标 签）3 .讲授知识点 （DIV 和 SPAN）4 .安排学生完成 任务1,教师辅导。5 .总结学生编程 过程中的问题。1 .听讲、思 考2 .回答下列问题 （XHTML标签 中的块级标签）3 .模拟案例 完成任务145注：每个步骤占用的行数，可以按照实际需要，像“步骤1”那样增减。操练2 （掌握 步骤 和基 本技能）1 .定义一个p （块元素）标签的大 小、 边框、2 .在定义了 p标 签的内容大小、边框 后设置p标签的内边 距和外边距。1 .课件展ZF2 .讲授知识点（框模型）3 .讲授案例：设 置元素的边距。4 .安排学生完成 任务2,教师辅导。1.模拟例如完成任务245深化（加深 对基 本能力的 体会）1.设置元素的边框1 .课件展ZF2 .讲授案例：设 置元素的边框。3 .安排学生完成 任务3,教师辅导。1.学生自主完善任务360+课外归纳（知识 和能 力）1 块级元素和行 内元素2 .什么是框模 型？3 .框模型用途？1 .整理归纳2 .高度概括3 .课件展示1.文字记录2.记忆训练3.查阅资料15作业1.完成任务书2_3课后体会Web标准设计课程第6单元教学设计（20122013学年第二学期）单元名称：CSS样式对文档元素进行定位、浮动、布局网页所属系部： 信息工程系制定人：合作人：2013.1制定时间：Web标准设计课程单元教学设计本次课所需教学资料单元标题CSS样式对文档兀素进行定位、浮动、布局网页课次位置6教学学时10授课班级上课地点一体化教室上课时间教学目标能力目标知识目标素质目标1 .能够熟练的对文 档元素进行定位和浮 动2 .能够进行简单的 网页布局1.CSS定位与浮 动2.CSS对网页进 行布局3.有关的英文术 语。1 .培养良好的编 码规范习惯。2 .培养严密的逻 辑思维、独立思考、 独立设计、的能力。3 .培养积极主动 解决问题的意识与能 力。能力训练任务任务1.使用CSS样式对文档元素进行定位与浮动任务2.使用CSS样式对页面进行两列和三列布局任务3.对班级网站新闻页面进行布局本次课中涉及到的有关核心外语词汇定位(Positioning)1 .主教材:Web编程入门经典HTML、XHTML和CSS编著:（美）JonDuckett出版社：清华大学出版社；.任务指导书2_4O2 .参考 w3school 在线教程： :Web 标准一百度百科： :1 .htmQQ空间.任务书2_4 （报告书）。3 .教学课件2_4O6.案例：班级网站的美化单元教学过程步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）告知（教学内容、目的）1 .能够熟练的 对文档元素进行定 位和浮动2 .能够进行简 单的网页布局1 .下达任务书、任 务指导书2 .共享学习资源3 .告知本次课学 习内容及目标1 .下载任务 书2 .任务指导 书3 .查阅资料4 .回答任务 准备的问题课前+5引入（任务工程）1 .使用CSS样 式对文档元素进行 定位2 .使用CSS样 式对页面进行两列 和三列布局3 .对班级网站 新闻页面进行布局1 .框模型总结2 .提出任务3 .提出问题4 .讲授1.回答下列问题20操练1 （掌握 步骤 和基 本技 能）1 .介绍CSS定 位2 .介绍 position 属性3 .对元素进行 定位1.课件展ZF2提出问题（一切 皆为框）3 .讲授知识点（定 位概述、相对定位）4 .讲授案例：对网 页中的div元素进行 绝对、相对定位。5 .安排学生完成 任务1,教师辅导。1 .听讲、思 考2 .回答下列问题（列举身边的 对象属性及方 法）3 .模拟案例 完成任务180操练2 （掌握 步骤 和基 本技 能）4.使用CSS样 式对文档元素进行 浮动1 .课件展示2 .讲授知识点（浮 动）3 .讲授案例：对网 页中的多个div元素 进行排列。4 .安排学生完成 任务1,教师辅导。1 .模拟案例完成任务165操练4 （掌握 步骤 和基 本技 能）5.使用CSS样 式对页面进行两列 和三列布局1 .课件展ZF2 .讲授知识点（网 页布局）3 .讲授案例：网页 的两列三列布局1 .模拟案例完成任务290深化（加深 对基 本能 力的 体会）6.对班级网站新闻页面进行布局1.DIV+CSS 布局2.布置任务3,教 师辅导为主。1 .听讲、思 考2 .学生自主 完善任务3180+课外注：每个步骤占用的行数，可以按照实际需要，像“步骤1”那样增减。归纳（知识 和能 力）1 .再一次思考 表现与结构相别离 的好处2 .DIV+CSS 布 局的优势1 .整理归纳2 .高度概括3 .课件展ZF1 .文字记录2 .记忆训练3 .查阅资料10作业1.完成任务书2_4课后体会Web标准设计课程第7单元教学设计（20122013学年第二学期）单元名称： 动态制作网页内容、添加消息框所属系部： 信息工程系制定人：合作人：制定时间：2013.1目标告知（教学内容、目的）1 .了解Web标准。2 .能够根据网页源 代码看出哪些网页是 基于Web标准设计的。3 .能够理解Web标 准每局部的作用。4 .能够阅读有关的 英文术语。1 .下达任务书、 任务指导书2 .共享学习资 源3 .告知本次课 学习内容及目标4 .告知本课程 总的任务5 .告知课程考 核要求5（分钟）Web标准设计课程单元教学设计本次课所需教学资料单元标题动态制作网页内容、添加消息框课次位置7教学学时6授课班级上课地点一体化教室上课时间教学 目标能力目标知识目标素质目标1 .掌握将JavaScript脚 本嵌入网页中、制作交互式 网页的方法2 .熟练使用JavaScript 消息框3 .掌握流程控制语句4 .能够阅读有关的英 文术语。1 .在网页中加入脚本2 .JS语句3 .JS变量4 .JS注释5 .JS表达式与运算符6 .JS if.else7 .JS循环8 .JS消息框9 .有关的英文术语。1 .正确运用 JavaScript分析问题和解 决问题的能力。2 .培养严密的逻辑思 维、独立思考' 独立设计、 独立调试的能力。3 .培养积极主动解决 问题的意识与能力。能力训 练任务任务1.在网页三个位置上加入脚本任务2.使用javascript脚本，实现加、减' 乘、除等一些基本运算任务3.在网页中加入消息框任务4.根据输入，给出不同的提示任务5.运用for循环，输出九九乘法表本次课中涉及到的有关核心外语词汇脚本(script)类型(type)变量(variables)警告框(alert)确认框(confirm)提示 框(prompt)1 .主教材：Web编程入门经典HTMLv XHTML和CSS编著：（美）Jon Duckett出版社：清华大学出版社；.主教材：JavaScript基础与实例教程编著：陈会安 出版社：中国电力出版社;2 .任务3指导书；.参考 w3school 在线教程； DIV 和 CSS 教程网；上lueidea 蓝色理想网站建设； 建站学网站。3 .任务书3（报告书）；6.教学课件3_1 ；单元教学过程步骤教学内容及能力/知识目 标教师活动学生活动时间（分钟）告知（教学 内容、 目的）1 .能够参考互联网 上的网站设计自己的网 站风格。2 .能够根据页面源 代码分清网页是基于 Web标准设计的还是是 非基于Web标准设计 的。1 .下达任务书' 任务 指导书2 .共享学习资源3 .告知本次课学习内 容及目标L下载任务书'任务指导书2.查阅资料5引入（任务 工程）1 .通过运行简单的 JavaScript小程序让学生 了解JavaScript在网页 制作中的作用2 .引入如何学习 JavaScript1 .提出任务2 .提出问题3 .讲授1 .听讲、思考2 . 思 考JavaScript 作用20操练1（掌握1 .在网页中加入脚 本1 .课件展ZF2 .提出问题（网页中1 .听讲、思考2 .模拟案例1完65步骤和 基本技 能）2.JS基本语句3.JS变量的使用如何加入JavaScript）3 .讲授知识点4 .讲授案例1：网页 中加入JavaScript并输出 欢迎字样5 .安排学生完成任务 1,教师辅导6 .总结学生编程过程 中出现的问题。成任务1操练2 （掌握 步骤和 基本技能）1 .学会使用JS注释2 .掌握JS表达式与 运算符1 .课件展示2 .提出问题（网页中 的运算）3 .讲授知识点（表达 式与运算符）4 .安排学生完成任务 2,教师辅导5 .总结学生编程过程 中出现的问题1 .听讲、思考2 .模拟案例2完成任务280操练3 （掌握 步骤和 基本技能）1 .条件表达式2.JS消息框1 .课件展示2 .提出问题（网页中 如何使用条件语句）3 .讲授知识点（条件 语句）4 .讲授案例：根据输 入给出不同的输出5 .安排学生完成任务 3、4,教师辅导6 .总结学生编程过程 中出现的问题1 .听讲、思考2 .自主完成任务445+课 外深化（加深 对基本 能力的 体会）1.JS循环1 .课件展示2 .提出问题（网页中 如何使用循环语句）3 .讲授知识点（循环 语句）4 .讲授案例：计算循 环次数5 .安排学生完成任务 5,教师辅导6 .总结学生编程过程 中出现的问题1 .思考45课外归纳（知识 和能 力）1 . 熟练掌握 JavaScript中的基本语句2 .掌握每个案例的思 相 /心1 .整理归纳2 .高度概括3 .课件展示1 .文字记录2 .记忆训练3 .查阅资料10作业1.完成任务书3_1课后体会注：每个步骤占用的行数，可以按照实际需要，像“步骤1”那样增减。Web标准设计课程第8单元教学设计（20122013学年第二学期）单元名称： JavaScript函数和对象所属系部：信息工程系制定人：合作人：制定时间：2013.1Web标准设计课程单元教学设计单元标题JavaScript函数和对象课次位置8教学学时8授课班级上课地点一体化教室上课时间教学目标能力目标知识目标素质目标1 .了解JS函数2 .掌握内置函数3 . 了解JS对象概念4 .掌握常用的内置对象的使用1 .JS函数2 .JS内置函数3 .JS又怪4 .JS常用内置对 象5 .有关的英文术 语。1 .正确的使用 javascript实现需要的特 效。2 .培养严密的逻辑 思维、独立思考、独立 设计、独立调试的能力。3 .培养积极主动解 决问题的意识与能力能力训练任务任务1.函数的调用任务2.内置函数的使用任务3.String对象的使用任务4.使用Data对象取得和设置时间任务5.使用Math对象本次课中涉及到的有关核心外语词汇文档对象模型(Document Object Model)框架(Frame)框架集(Frameset) 浏览器对象(Navigator)资源地址(Sample Rate Convertor)窗 口事件(Window Events)对齐(Align)本次课所需教学资料1 .主教材：Web编程入门经典HTML、XHTML和CSS编著：（美）Jon Duckett出版社：清华大学出版社；2 .主教材：JavaScript基础与实例教程编著：陈会安 出版社：中国电力 出版社；3 .任务3_2指导书；4 .参考 w3school 在线教程； DIV 和 CSS 教程网；蓝色理想网站建设； 建站学网站。5 .任务书3_2 （报告书）；6 .教学课件3_2；单元教学过程步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）告知（教学内容、1 .能够在网页中显示当前日期和时间2 .掌握在网页中1 .下达任务书、任务指导书2.共享学习资源1 .下载任务书、任务指导书2 .查阅资料10目的）添加计时器、循环图片广告3 .告知本次课学习内容及目标引入（任务工程）1 .通过演示网页 中显示当前日期和时 间进入课程2 .演示循环显示 的广告展示案例效果1 .显示当前日期的效果演示2 .提出任务3 .提出问题4 .讲授1.听讲、思考2.思考js函数的使用35操练1 （掌握 步骤 和基 本技 能）1 .掌握在JS如何 使用函数，使用函数 的好处2 .掌握JS面向对 象编程思想，并比拟 跟java中面向对象的 区别1 .课件展ZF2 .提出问题（网页 显示当前日期）3 .讲授知识点（函 数的使用）4 .讲授案例1 ：网 页中显示当前日期和 时间，并进行测试， 借此讲解函数的使 用。5 .安排学生完成 任务1,教师辅导。6 .总结学生编程 过程中的问题。1 .听讲、思考2 .回答下列问题3 .模拟案例1完成任务190操练2 （掌握 步骤 和基 本技 能）1.通过学习函数 来实现网页中JS日期 对象的使用1 .提出问题（网 页显示当前日期）2 .讲授知识点 （Date对象的使用）3 .讲授案例2：网 页中显示当前日期和 时间，并进行测试， 借此讲解函数的使 用。4 .安排学生完成 任务2,教师辅导。5 .总结学生编程 过程中的问题。操练3 （掌握 步骤 和基 本技 能）1.在页面中使用JS计时器实现广告页 的实现1 .提出问题（网 页显示循环广告）2 .讲授知识点 （setTimeout 的使用）3 .讲授案例2：网 页中显示循环广告， 并进行测试，借此讲 解函数的使用。4 .安排学生完成.完成任务2.完成案例2代码编写。1 .思考面向对象优点。90+课外1 .听讲、思考.自主完成任务390+课外任务3,教师辅导。5.总结学生编程 过程中的问题。深化（加深 对基 本能 力的体会）1 .使用 setTimeout 实现走马灯效果2.充 分理解js中面向对象 的思想1 .使用 setTimeout 方法实现走马灯效 果。2 .布置任务。3 .教师辅导为主1.听讲、思考2.学生自主完善任务435+课外归纳（知识 和能 力）1 .熟练使用Date 对象实现网页中显示 日期功能。2 .熟悉面向对象 方法解决问题的思 路。3 .理解面向对象 的好处。4 .熟练使用 setTimeout方法实现 循环广告的效果1 .整理归纳2 .高度概括3 .课件展示1 .文字记录2 .记忆训练3 .查阅资料