第6单元HTML语言和动态交互.docVIP

第6单元 HTML语言和动态交互 授课单元名称 1.HTML语言 2. JavaScript程序 教学设计 知识能力要求 1、了解HTML语言的语法规则，熟悉常用的HTML文本格式标记和含义； 2、了解JavaScript程序的语法规则，熟悉JavaScript程序在网页中的应用； 3、具备利用以已学知识设计和制作网页的实际能力。 4、在网页制作的实践中提高学习能力、创新能力和团队协作能力。 主要教学方法 采用任务驱动教学方法。整个教学过程围绕完成模仿任务“江西外语外贸职业学院信息管理系”网站和开放任务“江西外语外贸职业学院学生工作处网站”展开。本次课结合分析“江西外语外贸职业学院信息管理系”网站部分页面的代码以学习HTML语言、JavaScript程序等教学内容，给部分页面添加JavaScript程序从而增加动态效果而展开教学。 主要教学互动点 1、分析“江西外语外贸职业学院信息管理系”网站部分页面的代码时引导学生思考和回答问题。 2、边学边做，引导学生与学生、教师与学生间的交流。 采用教辅手段 利用多媒体系统进行教学和演示。 教学内容处理 重点讲解HTML语言、JavaScript程序， HTML语言、JavaScript程序等内容的教学结合分析“江西外语外贸职业学院信息管理系”网站部分页面的代码，给部分页面添加JavaScript程序从而增加动态效果而展开。 教学环节 提出任务 网站是由网页组成的，每一个网页就是一个文件，用户通过浏览器阅读HTML文件，并将其翻译为丰富多彩的文字和画面。JavaScript是在HTML之后出现的脚本语言，在HTML代码中嵌入JavaScript程序，可以使网页产生动态效果。 请同学们观察和分析“江西外语外贸职业学院信息管理系”网站主页代码，并在该页面嵌入相应JavaScript程序。 任务分析 一个网页就是一个MTHL语言文件，它是通过浏览器的解释，才呈现在我们面前五彩缤纷页面。的通过分析熟悉HTML代码，有助于我们更好、更精确地设计和制作网页。 我们常会看到网页中的各种效果：纷纷飘落的小雪、滚动字幕、加载网页的同时弹出一个新的页面……，我们也学会了在网页中添加行为，这些功能，其本质都是有JavaScript来扮演的。 在HTML代码窗口中，可以直接插入一段JavaScript代码。本课程中要求学生熟悉HTML语言，会对HTML代码做必要的修改，熟悉和学会使用不同的JavaScript代码，对编写JavaScript代码不做要求。 完成该任务的教学 一、观察“江西外语外贸职业学院信息管理系”网站主页代码并讲解 1）网页和HTML语言的关系 1、一个空白网页的HTML代码（空白网页的HTML代码分析、HTML标记的特点） 2、在空白网页上输入一行文本（观察代码变化） 3、在网页中插入图像（观察代码变化） 2）HTML语言的语法规则 1、HTML语言的基本结构 2、HTML语言的语法 3）常用的HTML文本格式标记和含义 1、标题字号标记 2、字体颜色标记 3、字体对齐标记4、字体标记 5、字号标记 6、分段标记 7、换行标记（举例说明） 8、插入图片标记 4）插入其它标记 1、 插入图片和水平分隔线标记 2、插入锚点标记 3、插入超级链接标记 4、表格和表格属性标记 二、对“Sshg.htm” 代码分析 三、讲解并给“江西外语外贸职业学院信息管理系”网站部分页面添加JavaScript程序 1）什么是JavaScript JavaScript的基本特点 2）一个JavaScript应用的实例 在网页上插入一个图片，添加行为：当鼠标指向图片时，弹出信息框“江西外语外贸职业学院信息管理系”，观察前后代码的变化。 3） JavaScript的语法规则 4）JavaScript应用实例 给“江西外语外贸职业学院信息管理系”网站部分页面添加JavaScript程序：显示系统时间、弹出窗口、纷纷飘落的雪花等 四、边学边练，完成任务 学生边学边练习，完成给“江西外语外贸职业学院信息管理系”网站部分页面添加JavaScript程序的任务，然后给“江西外语外贸职业学院学生工作处” 网站部分页面添加JavaScript程序，增加动态效果。 教学评价 对学生完成该任务情况进行评价（可以采用学生自评、互评和教师评价相结合的方法），记录为平时成绩。 总结 1、了解和熟悉HTML语言的语法规则、熟悉JavaScript程序在网页中的应用，可以在网页设计中更加得心应手，达到更好的效果。 2、总结练习情况，请同学们通过网络、书籍等多种渠道收集JavaScript程序，应用于个人网站设计中，也可提供给其他同学共享。 课后作业 复习和预习，收集Ja