动态网页制作(精)

信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁1第五章动态网页制作5.1认识动态网页授课题目:§5.1认识动态网页授课时数:1学时课型:新课教学目标：1．知识与技能:了解动态HTML，能够实现简单的动态HTML效果；准确把握静态网页与动态网页的区别，为学生以后自主制作动态网页打下良好的基础。2．过程与方法:通过简单的实例演示，让学生对动态HTML概念有比较具体的认识；利用任务驱动法，让学生学会简单的动态HTML制作。依据学生前面制作网页的基础，首先给出静态网页的概念，有了静态网页的学习，采用比较法，学生会对动态网页有个粗浅的了解。进而通过实例演示，让学生对动态网页有更深一步的了解，达到准确把握动态网页的概念。3.情感态度与价值观：利用精彩的实例，激发学生学习动态HTML网页的制作兴趣，提高学生的审美情趣。重点：实现简单的动态HTML效果;静态网页与动态网页的区别；难点：掌握动态网页的特性；实现简单的动态HTML效果;静态网页与动态网页的区别；动态网页的生成过程教学过程1.教师展示事先做好的简单的动态网页”鼠标指向一图片该图片变成另外一图片”,和一个网页中直接插入一gif动画请学生们就这两个简单的网页展开讨论。（1）分析两个网页的共同点及异同点（2）你看到这第一个网页鼠标指向图片的动，你觉得它是普通意义上的动画吗？希望大家踊跃发言，说出自己的观点。教师总结:并不是网页上所有的”动”的效果都是动态HTML效果.从而引出动态HTML的概念:指即使在脱离网络环境的情况下,网页下载到浏览器以后仍能够随时变换的HTML.(举例:鼠标移到文本、文本变成其它颜色、鼠标特效、常用的搜索引擎、用户注册、用户登录、在线调查、用户管理、订单管理等等等).同学们前面都自己利用FrontPage制作过自己喜欢的网页，这种网页的文件扩展名是.htm或者.html。网页上的每一行代码都是同学们预先编写好后，放置到Web服务器上的，在发送到客户端的浏览器上不再发生任何变化。这种网页，就称之为静态网页。接下来我们来了解一下静态网页与动态网页的工作原理静态网页的处理流程，如图5-1所示。信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁2动态网页的处理流程如图5-2所示。动态网页和静态网页的相同之处：都是ASCII编码文件，都存在着HTML代码，都能包含脚本语言代码，都存放在Web服务器上，都把用户请求的页面发送到浏览器上。动态网页和静态网页的区别是：动态网页的文件扩展名不是.htm、.html，而是以．asp、．jsp、．php、．perl、.cgi等形式为文件后缀；动态网页中的某些脚本只能在服务器上运行，而静态网页不能包含在服务器上运行的任何脚本；当Web服务器收到用户请求的静态页面后，将把查找结果直接发送到浏览器，而当Web服务器收到用户请求的动态页面后，它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理，然后将处理结果传送给浏览器。2.自己动手制作简单的动态HTML师：请同学们从网上找两幅自己喜欢的图片并下载到本地机。然后打开FrontPage,先将其中的一幅图片插入，使用DHTML效果，利用其中的“鼠标悬停”事件，将第一幅图片交换成第二幅图片。生：利用网络，在本地机上完成该任务，同时体会动态HTML效果学有余力的同学也可以试一下触发事件中的”网页加载”、”双击”、“单击”等并设置效果类型及信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁3效果设置内容。3．教师总结同学们，我们本节课主要是了解了动态HTML的实现效果，希望同学们通过课堂上讲解的实例，对动态HTML有个大致的了解。教师进一步比较静态网页和动态网页。（1）程序是否在服务器端运行，是区分动态网页和静态网页的重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP．NET、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如Html页、Flash、JavaScript、VBScript等等，它们是永远不变的。（2）这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看却有很大的差别。动态网页的一般特点如下：（a）动态网页以数据库技术为基础，可以大大降低网站维护的工作量；（b）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；（c）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。比较静态网页与动态网页的区别表5-1静态网页动态网页扩展名Html、htm．asp、．jsp、．php、．perl、.cgi是否以数据库作为基础noYes能否完成交互功能noyes是否独立于服务器NY响应流程查找到后反馈给浏览器得由应用服务器扩展的特殊软件进行处理，后反馈给浏览器优/缺点优点：网页风格灵活多样缺点：维护繁，无法交互优点：实时生成、维护方便、交互性强教学反思：信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁45．2理解动态HTML授课题目:§5.2理解动态HTML授课时数:2学时课型:新课教学目标：1．知识与技能了解构成动态HTML的三大核心技术；掌握JavaScript的编写原则，能够调用JavaScript文件；理解什么是CSS样式表；掌握运用CSS进行样式设置的方法和格式；掌握在HTML中加入CSS的三种方法。2.过程与方法培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣，培养学生发现美、创造美的能力，提高学生的综合素质。3.情感态度与价值观通过使用JavaScript制作动态网页，让学生进一步感受网页制作的美，并合理使用技术来表现美。通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。重点：在静态网页中嵌入或调JavaScript文件制作动态网页。在HTML中加入CSS的三种方法。难点：掌握JavaScript的编写原则，并用来生成动态网页。CSS样式设置的方法和格式。教学过程1．用JavaScript制作动态网页动态HTML是随着浏览器的日益强大而产生的，它不属于一种专门的编程技术，而是一种通过各种技术的综合发展而得以实现的技术应用概念。构成动态HTML的核心技术主要有：客户端的脚本语言（常见的是JavaScriptVBScript）、文件目标模块(DocumentObjectModel)、CSS样式表。常见的名词解释：客户端的脚本语言：指可以直接在客户端进行编写并使页面发生动态变化的脚本语言，而JavaScript和VBScript就是我们最常用的客户端的脚本语言。JavaScript是一种面向浏览器的网页脚本编程语言，JavaScript脚本可以被嵌入HTML文件之中，无需经过编译即在浏览器中运行。在将JavaScript嵌入HTML页面时，必须使用SCRIPT标签，JavaScript代码是包含在SCRIPT标签内的。只有通过SCRIPT标签，浏览器才能够解释其中的脚本或引用写在HTML中的JavaScript代码。SCRIPT标签使用的一般形式如下：ScriptLanguage=JavaScript//JavaScript语句/Script请同学们按要求做书P111的实践2，并调试运行看有什么变化？教师总结：信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁5写在HTML页面中的JavaScript语句只能在当前页面中调用，在编辑网页时，有时会在多个页面中用到相同的JavaScript功能。在这种情况下，就可以将这些JavaScript语名写在一个文件中，只需要编写一次JavaScript语句，就可以被调用多个页面，要修改时也只需要修改一次。这种在多个页面之间共享代码的方法可以有效地减轻代码编写的工作量，这种方法被称为调用JavaScript文件。调用JavaScript文件其格式如下：ScriptLanguage=JavaScriptsrc=文件名.js//JavaScript语句/Script备注：调用文件与网页文件在同一目录下，可直接在src属性中调用；否则，需要指明该文件的路径。还有同学们在手工输入代码是要注意必须是半角状态下，标签必须成对出现（最好输入时成对输入，以防漏输像””、等）。另外：让学生纠正书上的一个错误P112ScriptLanguage=JavaScriptsrc=test.js/Script错误正解：ScriptLanguage=JavaScriptsrc=test.js/Script通过例题向同学解析ScriptLanguage=JavaScript/Script例1插入JavaScript代码htmlheadtitle例上/title/headbodyscriptlanguage=JavaScriptalert(“你好！”)/script/body/html两例题效果图：例2调用JavaScript文件htmlheadtitle例上/title/headbodyscriptlanguage=JavaScriptsrc=”h1.js”/script/body/htmlalert(“你好！”)语句定义在h1.js文件中，相当于超链接，并且h1.js与当前网页在同一个文件夹下面，若不在同一文件夹，则在h3.js前加入所在文件夹名称。信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁63．CSS样式表要想真正理解动态HTML，了解客户端脚本语言是很重要的，但动态HTML的核心技术可不止这一项。在当今的网页制作中,很多的网页都用了CSS，那什么是CSS呢？CSS即CascadingStyleSheet(级联样式单)的缩写，我们又常称这为风格样式单StyleSheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。在谈样式表前，我们先来复习一下上学期学习的HTML语言的基本应用。htmlheadtitle溧阳市埭头中学欢迎您！/title/headbody语句/body/htmlCSS样式表作为当前网页制作中一个常用技术，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。它主要有以下几个优点。A．只需修改一个CSS代码就可以改变页数不定的网页外观和格式，从而使应用样式的网页具有相同的风格，提高了网页编辑效率。B．可以“随心所欲”地控制页面布局和外观。C．在所有浏览器和平台之间上具有较好的兼容性。D．精简网页，提高下载速度。如果你们想做出上图所示这样一个文字样式，那么可以用如下的HTML样式来实现。htmlhead信息技术基础教案（高二年级）备课组成员：狄乐群管敏强唐俊仙陈燕蒋莉莉王洁7title欢迎进入溧阳市埭头中学!/title/headbodyifontface=宋体color=#008000欢迎进入溧阳市埭头中学!/font/i/body/html如果我们用CSS样式表来对HTML文档进行编辑，可以在BODY标签前加入下面的CSS代码虽