动态网页制作精Word文档下载推荐.docx

1、鼠标移到文本、文本变成其它颜色、鼠标特效、常用的搜索引擎、用户注册、用户登录、在线调查、用户管理、订单管理等等等）. 同学们前面都自己利用 FrontPage 制作过自己喜欢的网页，这种网页的文件扩展名是 .htm 或者 .html 。网页上的每一行代码都是同学们预先编写好后，放置到 Web 服务器上的，在发送到客户端的浏览器上不再发生任何变化。这种网页，就称之为静态网页。接下来我们来了解一下静态网页与动态网页的工作原理静态网页的处理流程，如图 5-1 所示。动态网页的处理流程如图 5-2 所示。动态网页和静态网页的相同之处：都是 ASCII 编码文件，都存在着 HTML 代码，都能包含脚本语

2、言代码，都存放在 Web 服务器上，都把用户请求的页面发送到浏览器上。动态网页和静态网页的区别 是：动态网页的文件扩展名不是 .htm 、 .html，而是以 asp 、 jsp 、 php 、 perl 、 .cgi 等形式为文件后缀；动态网页中的某些脚本只能在服务器上运行，而静态网页不能包含在服务器上运行的任何脚本；当 Web 服务器收到用户请求的静态页面后，将把查找结果直接发送到浏览器，而当 Web 服务器收到用户请求的动态页面后，它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理，然后将处理结果传送给浏览器。2.自己动手制作简单的动态 HTML 师：请同学们从网上找两幅自己

3、喜欢的图片并下载到本地机。然后打开 FrontPage, 先将其中的一幅图片插入，使用 DHTML 效果，利用其中的“鼠标悬停”事件，将第一幅图片交换成第二幅图片。生：利用网络，在本地机上完成该任务，同时体会动态 HTML 效果学有余力的同学也可以试一下触发事件中的”网页加载”、”双击”、“单击”等并设置效果类型及效果设置内容。3教师总结 同学们，我们本节课主要是了解了动态 HTML 的实现效果，希望同学们通过课堂上讲解的实例，对动态 HTML 有个大致的了解。教师进一步比较静态网页和动态网页。（1）程序是否在服务器端运行，是区分动态网页和静态网页的重要标志。在服务器端运行的程序、网页、组件，

4、属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如 ASP 、 PHP 、 JSP 、 ASPNET 、 CGI 等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如 Html 页、 Flash 、 JavaScript 、 VBScript 等等，它们是永远不变的。（2）这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的

5、文字和图片信息，但从网站开发、管理、维护的角度来看却有很大的差别。动态网页的一般特点如下：（a）动态网页以数据库技术为基础，可以大大降低网站维护的工作量； （b）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；（c）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。比较静态网页与动态网页的区别表 5-1静态网页 动态网页 扩展名 Html、htmasp 、 jsp 、 php 、 perl 、 .cgi是否以数据库作为基础 noYes能否完成交互功能 yes是否独立于服务器 NY响应流程 查找到后反馈

6、给浏览器得由应用服务器扩展的特殊软件进行处理，后反馈给浏览器优 / 缺点 优点：网页风格灵活多样缺点：维护繁，无法交互实时生成、维护方便、交互性强教学反思：52理解动态HTML5.2理解动态HTML 2学时1知识与技能了解构成动态 HTML 的三大核心技术； 掌握 JavaScript 的编写原则，能够调用 JavaScript 文件；理解什么是CSS样式表；掌握运用CSS进行样式设置的方法和格式；掌握在 HTML 中加入CSS的三种方法。2.过程与方法培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣，培养学生发现美、创造美的能力，提高学生的综合

7、素质。3.情感态度与价值观通过使用 JavaScript 制作动态网页，让学生进一步感受网页制作的美，并合理使用技术来表现美。通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。在静态网页中嵌入或调 JavaScript 文件制作动态网页。在HTML中加入CSS的三种方法。掌握 JavaScript 的编写原则，并用来生成动态网页。CSS 样式设置的方法和格式。教学过程1用 JavaScript 制作动态网页动态HTML是随着浏览器的日益强大而产生的，它不属于一种专门的编程技术，而是一种通过各种技术的综合发展而得以实现的技术应用概念。构成动态HTML的

8、核心技术主要有：客户端的脚本语言（常见的是JavaScript VBScript）、文件目标模块 （Document Object Model） 、 CSS 样式表。常见的名词解释：客户端的脚本语言：指可以直接在客户端进行编写并使页面发生动态变化的脚本语言，而JavaScript 和 VBScript就是我们最常用的客户端的脚本语言。JavaScript是一种面向浏览器的网页脚本编程语言，JavaScript脚本可以被嵌入HTML文件之中，无需经过编译即在浏览器中运行。在将 JavaScript 嵌入 HTML 页面时，必须使用 标签， JavaScript 代码是包含在 标签内的。只有通过

9、标签，浏览器才能够解释其中的脚本或引用写在 HTML 中的 JavaScript 代码。/JavaScript语句/Script请同学们按要求做书P111的实践2，并调试运行看有什么变化？教师总结：写在HTML页面中的JavaScript 语句只能在当前页面中调用，在编辑网页时，有时会在多个页面中用到相同的 JavaScript功能。在这种情况下，就可以将这些JavaScript语名写在一个文件中，只需要编写一次JavaScript语句，就可以被调用多个页面，要修改时也只需要修改一次。这种在多个页面之间共享代码的方法可以有效地减轻代码编写的工作量，这种方法被称为调用JavaScript文件。调

10、用JavaScript文件其格式如下： src= 文件名.js备注：调用文件与网页文件在同一目录下，可直接在src 属性中调用；否则，需要指明该文件的路径。还有同学们在手工输入代码是要注意必须是半角状态下，标签必须成对出现（最好输入时成对输入，以防漏输像”、src=test.js错误正解：通过例题向同学解析headtitle例上/headbodyscript language= src=”h1.js”/script/body/html例1插入JavaScript代码 alert（“你好！”）alert（“你好！”）语句定义在h1.js文件中，相当于超链接，并且h1.js与当前网页在同一个文件夹

11、下面，若不在同一文件夹，则在h3.js前加入所在文件夹名称。两例题效果图：3 CSS样式表要想真正理解动态HTML，了解客户端脚本语言是很重要的，但动态HTML的核心技术可不止这一项。在当今的网页制作中,很多的网页都用了CSS，那什么是CSS呢？CSS即Cascading Style Sheet（级联样式单）的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。在谈样式表前，我们先来复习一下上学期学习的

12、HTML语言的基本应用。溧阳市埭头中学欢迎您！语句CSS样式表作为当前网页制作中一个常用技术，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。它主要有以下几个优点。A 只需修改一个CSS代码就可以改变页数不定的网页外观和格式，从而使应用样式的网页具有相同的风格，提高了网页编辑效率。B 可以“随心所欲”地控制页面布局和外观。C 在所有浏览器和平台之间上具有较好的兼容性。D 精简网页，提高下载速度。如果你们想做出上图所示这样一个文字样式，那么可以用如下的HTML样式来实现。欢迎进入溧阳市埭头中学!ifont face=宋体 color=#008000/font

13、/i如果我们用CSS样式表来对HTML文档进行编辑，可以在标签前加入下面的CSS代码虽然上图的CSS代码和HTML代码内容不同，但它们实现的功能是一致的，其核心语句也是等效的，下表将两种代码进行了比较。定义CSS代码HTML文字的字体Font-family: 文字的斜体Font-style:italicI/I文字的颜色Color:greenfont color=green文字的大小Font-size:font size=N在HTML中加放CSS代码，其方法并不是只有一种，在不同的情况下，可以采用不同的方式，下面向同学们介绍三种。1 嵌入式样式表：只适合用于某一标签中所谓嵌入式样式表很简单，只需

14、要在每个要应用样式的HTML的标记后写上CSS属性就可以了。这种方法很直接，如果想规定一个标签中的文字为红色，字体大小为10pt,则可以书写为：table style=color:red;font-size:10pt注意：这种方式主要用于对具体标签具体的调整，其作用范围只限于本标签。这种加放的样式表的方式并没有充分体现出CSS样式表的优越性，该尽量少用。2内联样式：只适合用于当前页面应用样式style type=text/css!- 样式表CSS内容-/style3外部样式表：可以就应用于多个页面当中link href=路径/样式表文件名.css rel=stylesheet type=样式表

15、格式的引用 格式名有点与无点时的引用引用内容放在*有点：span class=样式名/span例1内联样式表：例1定义不带点的h1样式表；定义带点的h2样式表； h1font-family:”宋体”;green;font-style:italic;.h2font-size:12pt; color:blue; text-decoration:underline;引用不带点的h1样式表来修饰文字“欢迎进入机器人做学玩网站！”；引用带点的h2样式表来修饰文字“从做中学，在学中做”；h1欢迎进入机器人做学玩网站！/h1span class=”h2”从做中学，在学中做例2外联样式表样式表定义在文件h3.

16、css中，href=h3.css相当于超链接h3.css，并且h3.css与当前网页在同一个文件夹下面，若不在同一文件夹，则在h3.css前加入所在文件夹名称。例2/h3或教师发放练习资料，学生自主练习。学生在操作中常出现的问题：A 标签的输入必须成对出现，在输入时形成一种良好的书写习惯。B 别把src 输成scrC ”h3”引号、代码一定要在半角状态下输入,中文输入后马上切换到半角英文状态下D text别输成是testE 外联引用时注意网页文件是否与样式文件在同一个文件夹下，否则写清路径。5.3 应用动态HTML及5.4 ASP脚本的应用1学时掌握用 JavaScript 实现强制浏览者点击

17、某链接；要求学生能够根据不同的操作系统设置ASP的运行环境 IIS；要求学生创建一个ASP文件，理解ASP的简单应用。采用任务驱动法， 以完成该节 JavaScript 的学习；介绍了ASP的运行环境以及设置的方法，不同的操作系统中设置方法也略有不同。知道基于 B/S 模式的动态网页的简单制作方法，并让学生动手自己制作一个 ASP 程序。培养学生的创新能力与探索精神，利用动态网页制作原则合理地修饰自己的网站。培养学生的动手能力，并能体会到ASP的交互性的特点。在动态网页设计中，JavaScript是创建生动的网页中十分重要的一个部分，它能够使得页面在保持美观的基础上平添一份活力。在这一节中，我

18、们将以几个JavaScript实例来和大家一起把我们的网页修饰的更加生动。由于同学们以前没有学过JavaScript代码，我们现在用的教学中所使用的代码都是从网站上下载下来现成代码，只要求同学们会代码嵌入即可，不要求同学们能读懂代码。通常选一段合适的源代码，复制并粘贴到指定的位置（可以是HEAD区也可以是BODY区），就可以完成一个JavaScript效果。给学生提供几个现成的源代码，让学生体验一下代码复用的优越性，来修饰自己的网站。另外在插入JavaScript特效时还要注意以下问题：.首先是确定版权问题。并不是所有网上的代码都可以无偿使用，只有免费资源才可以下载使用，现在我们用于教学中不存

19、在版权问题。.判断是否要修改。有些文字内容得根据自己网页的特性需要修改一下。.确定插入位置和如何插入。动态设计原则：1 尽量精简，不要使用太多的动画2 过度的闪烁让人头痛3 合理使用滚动字幕、变换的选择以及持续的动画前面我们介绍了几种动态技术，像，JavaScript等，其实我们上网也经常会用到另外一种动态技术，下面我们一起来学习下，了解一下ASP的运行环境以及设置的方法ASP 作为服务器端的动态网络技术，需要进行专门的环境配置，但是对我们初级网页制作者， ASP 的运行环境还是很容易达到的。（1） Microsoft Internet Information Server version 3

20、0/40on WindowsNT Server（IIS） （2） Microsoft Personal Web Server on Windows 95/98（PWS） 以上任何一种环境都可以进行 ASP 编程， 与一般的程序不同， ASP 程序无需编译， ASP 程序的控制部分是使用 JavaScript 、 VBScript 等脚本语言来设计的。接下来，对设置 IIS 进行详细的讲解，在这里除了按照学生教材上的配置 IIS 设置虚拟目录的方法，详细讲解一下 IIS 的安装与配置，此处以 Winxp 下的安装为例，其他操作系统会略有不同。安装 IIS 若操作系统中还未安装 IIS 服务器，可

21、打开“控制面板”，然后单击启动 “添加 / 删除程序”， 在弹出的对话框中选择 “添加 / 删除 Windows 组件”，（如图 5-7 所示）在 Windows 组件向导对话框中选中“ Internet 信息服务（ IIS ）”，然后单击“下一步”，按向导指示，完成对 IIS 的安装（如图 5-8 所示）。图 5-7 Windows 组件向导 1图 5-8 Windows 组件向导 2启动 Internet 信息服务（ IIS ） Internet信息服务简称为IIS，单击Windows开始菜单所有程序管理工具Internet 信息服务（ IIS ）管理器，即可启动“ Internet 信息

22、服务”管理工具（如图 5-9 所示）。图 5-9 Internet 信息服务（ IIS ）管理器配置 IIS IIS 安装后，系统自动创建了一个默认的 Web 站点，该站点的主目录默认为 C:Inetpubwww.root。用鼠标右键单击“默认 Web 站点”，在弹出的快捷菜单中选择“属性”，此时就可以打开站点属性设置对话框（如图 5-10 所示），在该对话框中，可完成对站点的全部配置。图 5-10 默认 Web 站点属性 主目录与启用父路径 单击“主目录”标签，切换到主目录设置页面（如图 5-11 所示），该页面可实现对主目录的更改或设置。注意检查启用父路径选项是否勾选，如未勾选将对以后的程

23、序运行有部分影响，如图 5-12 “主目录配置选项”所示。图 5-11 默认 Web 站点主目录设置 图 5-12 默认 Web 站点启用父路径设置 设置主页文档 单击“文档”标签，可切换到对主页文档的设置页面，主页文档是在浏览器中键入网站域名，而未制定所要访问的网页文件时，系统默认访问的页面文件。常见的主页文件名有 index.htm、index.html、indexasp、 indexphp 、 indexjap 、 default.htm 、 default.html 、 defaultasp 等。IIS 默认的主页文档只有 default.htm 和 defaultasp，根据需要，利

24、用“添加”和“删除”按钮，可为站点设置所能解析的主页文档。启动与停止 IIS 服务 在 Internet 信息服务的工具栏中提供有启动与停止服务的功能。单击“启动”可启动 IIS 服务器；单击“停止”则停止 IIS 服务器。编写第一个 ASP 程序 ASP 文件是以 asp 为扩展名的文本文件，创建 ASP 文件是非常简单的。大家熟悉的文本工具都可以编写，如果在 html 中添加脚本，只需要将网页文件名后缀 .html 或者 .htm 更改为 asp, 然后保存到 Web 站点目录里即可。关于语法只做简单讲解 在静态网页中，要区分 html 命令标识和普通字符，可以在 html 命令标识的两端分别加上“ ”分隔符。例如：bhello world!/b, 结果：将用粗体显示字符。而在动态网页中，要区分服务器端的 ASP 脚本和其他字符，可以用“ ”包含 ASP 的命令加以区别。在以后的大量程序中会看到都是使用这种标记来进行区分的，它使在开发时很容易区分一个普通的脚本程序和 ASP 程序。我们通过一个简单而经典例子来体验一下 ASP 编程