第 10章 动态网页制作技术
《网页设计与制作》
网页设计与制作 2
? 10.1 DHTML
? 10.2 XHTML
? 10.3 PHP
? 10.4 JSP
? 10.5 ASP.NET
网页设计与制作 3
10.1 DHTML
? 动态网页技术的产生
? 什么是 DHTML
? DHTML特性
? DHTML实例
网页设计与制作 4
动态网页技术的产生
传统的 HTML是静态的，当它被加载
到浏览器后，不会对用户的操作发生相应
的变化，而动态 HTML则意味着 Web页面
对用户有响应，即动态 HTML能自动变化。
动态网页技术包括动态页面技术和动
态内容技术两部分。
网页设计与制作 5
什么是 DHTML
DHTML（ Dynamic Hypertext Mark
Language） 是近年来网络发展进程中最振奋人心，
也是最具实用性的创新之一。所谓动态 HTML，
就是指即使脱离网络环境，网页装载入浏览器以
后仍然能够随时变换内容的 HTML。
它的核心技术主要包括客户端的脚本程序
语言、文档目标模型 DOM（ Document Object
Model） 和层叠样式表 CSS（ Cascading Style
Sheets） 三部分。
网页设计与制作 6
DHTML特性
? 执行效率高
? 实现交互功能
? 可下载字体
? 元素自由定位
? 数据感知、捆绑和动态表单
网页设计与制作 7
DHTML实例
<html>
<head>
<title>DHTML 示例 </title>
<script language="JavaScript">
<!--
ns = ( document.layers )? true, false
ie = ( document.all )? true, flase
function init( )
{ if (ns) block = document.blockDiv
if (ie) block = blockDiv.style
block.xpos = parseInt( block.left )
block.ypos = parseInt( block.top )
}
网页设计与制作 8
function slide( )
{ if ( block.xpos<500 )
{ block.xpos = block.xpos + 3
block.left = block.xpos
setTimeout( "slide( )",30 ) } }
function moveTo( obj,x,y )
{ obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos }
//-->
</script>
</head>
网页设计与制作 9
<body bgcolor = "#00FFFF" onLoad = "init( )">
<center>
<font color = red face = "宋体 " size = 5>
<b>DHTML示例 </b> </font>
<hr noshade>
[<a href = "javascript:slide( )">单击此处图片开始
滑动 </a>]
[<a href = "javascript:moveTo( block,50,80)">单击
此处图片回复原位 </a>]
</center>
<div ID = "blockDiv" style = "position:absolute;
left:50; top:80;">
<img src = "..\tu ku\mouse.jpg" border = 1>
</div>
</body> </html>
网页设计与制作 10
网页设计与制作 11
10.2 XHTML
? 什么是 XHTML
? XHTML与 HTML,XML
? XTML特性
? XTML使用示例
网页设计与制作 12
什么是 XHTML
扩展超文本标记语言（ Extended
Hypertext Markup Language,XHTML） 是
由负责制定 Web标准的万维网协会（ W3C）
开发，是 HTML的官方后继技术，在 W3C
于 2000年公布了 XHTML 1.0之后,HTML
已经不再继续发展。而且, W3C的 XHTML
2.0的工作草案也于 2002年 8月开始发布。
网页设计与制作 13
XHTML与 HTML,XML
? HTML是从 SGML标准中派生出来的用于
Web的标记语言规则。
? XML与其根源 SGML一样，也是元语言，
其规则是用于创建 XML应用。
? XHTML就是一种 XML应用，它采用
XML的 DTD（ Document Type Definition，
文档类型定义），并运行在支持 XML的
系统上。
网页设计与制作 14
XTML特性
? XHTML的实现目标
? 文档类型定义 DTD
? 遵循规则
XTML使用示例
<?xml version = "1.0" encoding = "GB2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>带 XML声明的 Transitional DTD格式的文档 </title>
</head>
<body> <h1>XHTML 1.0 示例 1</h1>
<img src = "..\tu ku\mouse.jpg" >
<p>这是一个简单的 XHTML示例 </p> <hr />
</body> </html>
网页设计与制作 16
10.3 PHP
? PHP简介
? PHP的功能和特性
? PHP与其他 CGI的比较
? PHP的安装和配置
? PHP示例
网页设计与制作 17
PHP简介
引用 PHP的官方站点 www.php.net的定
义来说,PHP是一种服务器端、跨平台、
HTML嵌入式的脚本语言。
PHP名字的含义是超文本预处理器
PHP（ PHP,Hypertext Preprocessor） 而其
中的 PHP又是 Personal Home Page Tools的
缩写。
网页设计与制作 18
PHP的功能和特性
? 对数据库的广泛支持
? 基于服务器端、运行效率高
? 良好的开放性和可扩展性
? 嵌入 HTML,容易学习掌握
? 面向对象编程
? 对网络通信协议的广泛支持
? 跨平台
? 图像处理
PHP与其他 CGI的比较
程序语言 PHP ASP JSP
操作系统 均可 Win32 均可
Web服务器 几种 IIS 多种
执行效率 快 快 快
稳定性 佳 中等 一般
开发时间 短 短 较短
程序语言 PHP VBScript、
JavaScript
Java
网页结合 佳 佳 差
学习门槛 低 低 较低
函数支持 多 少 不定
系统安全 佳 极差 佳
使用站点 超多 多 多
网页设计与制作 20
PHP的安装和配置
由于 PHP跨平台的特性, 使得 PHP的安装架构
有多种组合, 如：
? Windows 95/98/me + PWS + MYSQL + PHP
? Windows 2000/NT + IIS + MYSQL + PHP
? Windows 95/98/me/2000/NT + Apache +
MYSQL + PHP
? Unix/Linux + Apache + MYSQL + PHP
网页设计与制作 21
PHP示例
<html>
<head>
<title> PHP示例程序 </title>
</head>
<body>
<?php
echo,hello world!”;
>
</body>
</html>
网页设计与制作 22
10.4 JSP
? 什么是 JSP
? JSP技术特性
? 用 JSP开发 Web的几种主要方式
? JSP运行环境
? JSP示例程序
网页设计与制作 23
什么是 JSP
JSP（ Java Server Pages） 是由 Sun
Microsystems公司倡导，许多公司一起参与建立
的一种动态网页技术标准，它在动态网页的创建
中有强大而特殊的功能。
JSP技术提供了一种简单的方法来创建动态
网页, JSP是一种服务器端的脚本语言 。
可以说,JSP是 Java平台上 用于编写诸如
HTML,DHTML,XHTML和 XML等含有动态生
成内容的 Web页面的应用程序技术，是开发动态
网站快速而有效的工具。
网页设计与制作 24
JSP技术特性
? 把应用程序内容的生成与页面显示分离
? 一次编写，各处运行
? 使用可重用的组件
? 采用标记简化页面开发
? 完善的存储管理和安全性
? 支持多种动态网页格式
? 技术开放性
? Java的优越性
网页设计与制作 25
用 JSP开发 Web的几种主要方式
? 直接使用 JSP
? JSP + JavaBeans
? JSP + JavaBeans + Servlet
网页设计与制作 26
JSP运行环境
一般说来,JSP程序开发工作可以在
Windows环境下编写源代码，然后在
UNIX/Linux环境下进行最后的调试和运行，
这样配合可使开发效率达到最高。
网页设计与制作 27
JSP示例
<html>
<head>
<title>JSP示例 </title>
</head>
<body>
<%@ page language = "java" %>
<% =,hello world!” %>
</body>
</html>
网页设计与制作 28
10.5 ASP.NET
? 什么是 ASP.NET
?,NET框架
? ASP.NET的特性
? ASP.NET的安装与配置
? ASP.NET示例
网页设计与制作 29
什么是 ASP.NET
活动服务器页面（ Active Server Pages，
ASP） 是微软推出的开发 Web动态网站的重要、
快速、有效的工具，它是位于服务器端的脚本环
境。
ASP.NET是建立在公共语言运行环境
（ Common Language Runtime,CLR） 上的，
ASP.NET是,NET框架应用程序的执行引擎，可以
用在服务器端构造一个强大的 Web应用程序的编
程框架。这是微软公司对 ASP.NET的定义。
网页设计与制作 30
.NET框架
Microsoft,NET是微软公司于 2000年 6月提
出的一个新概念, 全称为, Microsoft,NET下一
代互联网软件和服务战略, 。
从微软的网站上我们得到如下的解释：
Microsoft?,NET是 Microsoft XML Web services平
台。 XML Web services允许应用程序通过 Internet
进行通信和共享数据，而不管所采用的是哪种操
作系统、设备或编程语言。 Microsoft,NET平台
提供创建 XML Web services并将这些服务集成在
一起以供所需。对个人用户的好处是无缝的、吸
引人的体验。
网页设计与制作 31
ASP.NET的特性
? ASP.NET通过编译来执行，增强了性能
? 跨语言集成
? Web窗体
? 良好的适应性
? 数据缓存技术
? 服务器端控件
? 简易性
? 可定制性和可扩展性
? 安全可靠性
网页设计与制作 32
ASP.NET的安装与配置
在软件方面 ASP.NET只能在带有 IIS 4.0的
Windows NT4.0 Server（ 或更高版本）上运行，
最好是 Windows 2000 Server（ 带 IIS 5.0）； 数据
库为 SQL Server 7.0以上或者 Access 2000； 浏览器
为 Internet Explorer 5.01以上版本； ASP.NET的操
作平台,NET Framework SDK,可到微软的网站
http://msdn.microsoft.com/downloads/default.asp上
下载。推荐配置是,Windows 2000 Server + SQL
Server 2000 + IE 5.5 +,NET Framework SDK。
网页设计与制作 33
ASP.NET示例
<% @ page language = "C#" %>
<html>
<head>
<title>ASP.NET示例 </title>
</head>
<body>
<% =,hello world!” %>
</body>
</html>
《网页设计与制作》
网页设计与制作 2
? 10.1 DHTML
? 10.2 XHTML
? 10.3 PHP
? 10.4 JSP
? 10.5 ASP.NET
网页设计与制作 3
10.1 DHTML
? 动态网页技术的产生
? 什么是 DHTML
? DHTML特性
? DHTML实例
网页设计与制作 4
动态网页技术的产生
传统的 HTML是静态的，当它被加载
到浏览器后，不会对用户的操作发生相应
的变化，而动态 HTML则意味着 Web页面
对用户有响应，即动态 HTML能自动变化。
动态网页技术包括动态页面技术和动
态内容技术两部分。
网页设计与制作 5
什么是 DHTML
DHTML（ Dynamic Hypertext Mark
Language） 是近年来网络发展进程中最振奋人心，
也是最具实用性的创新之一。所谓动态 HTML，
就是指即使脱离网络环境，网页装载入浏览器以
后仍然能够随时变换内容的 HTML。
它的核心技术主要包括客户端的脚本程序
语言、文档目标模型 DOM（ Document Object
Model） 和层叠样式表 CSS（ Cascading Style
Sheets） 三部分。
网页设计与制作 6
DHTML特性
? 执行效率高
? 实现交互功能
? 可下载字体
? 元素自由定位
? 数据感知、捆绑和动态表单
网页设计与制作 7
DHTML实例
<html>
<head>
<title>DHTML 示例 </title>
<script language="JavaScript">
<!--
ns = ( document.layers )? true, false
ie = ( document.all )? true, flase
function init( )
{ if (ns) block = document.blockDiv
if (ie) block = blockDiv.style
block.xpos = parseInt( block.left )
block.ypos = parseInt( block.top )
}
网页设计与制作 8
function slide( )
{ if ( block.xpos<500 )
{ block.xpos = block.xpos + 3
block.left = block.xpos
setTimeout( "slide( )",30 ) } }
function moveTo( obj,x,y )
{ obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos }
//-->
</script>
</head>
网页设计与制作 9
<body bgcolor = "#00FFFF" onLoad = "init( )">
<center>
<font color = red face = "宋体 " size = 5>
<b>DHTML示例 </b> </font>
<hr noshade>
[<a href = "javascript:slide( )">单击此处图片开始
滑动 </a>]
[<a href = "javascript:moveTo( block,50,80)">单击
此处图片回复原位 </a>]
</center>
<div ID = "blockDiv" style = "position:absolute;
left:50; top:80;">
<img src = "..\tu ku\mouse.jpg" border = 1>
</div>
</body> </html>
网页设计与制作 10
网页设计与制作 11
10.2 XHTML
? 什么是 XHTML
? XHTML与 HTML,XML
? XTML特性
? XTML使用示例
网页设计与制作 12
什么是 XHTML
扩展超文本标记语言（ Extended
Hypertext Markup Language,XHTML） 是
由负责制定 Web标准的万维网协会（ W3C）
开发，是 HTML的官方后继技术，在 W3C
于 2000年公布了 XHTML 1.0之后,HTML
已经不再继续发展。而且, W3C的 XHTML
2.0的工作草案也于 2002年 8月开始发布。
网页设计与制作 13
XHTML与 HTML,XML
? HTML是从 SGML标准中派生出来的用于
Web的标记语言规则。
? XML与其根源 SGML一样，也是元语言，
其规则是用于创建 XML应用。
? XHTML就是一种 XML应用，它采用
XML的 DTD（ Document Type Definition，
文档类型定义），并运行在支持 XML的
系统上。
网页设计与制作 14
XTML特性
? XHTML的实现目标
? 文档类型定义 DTD
? 遵循规则
XTML使用示例
<?xml version = "1.0" encoding = "GB2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>带 XML声明的 Transitional DTD格式的文档 </title>
</head>
<body> <h1>XHTML 1.0 示例 1</h1>
<img src = "..\tu ku\mouse.jpg" >
<p>这是一个简单的 XHTML示例 </p> <hr />
</body> </html>
网页设计与制作 16
10.3 PHP
? PHP简介
? PHP的功能和特性
? PHP与其他 CGI的比较
? PHP的安装和配置
? PHP示例
网页设计与制作 17
PHP简介
引用 PHP的官方站点 www.php.net的定
义来说,PHP是一种服务器端、跨平台、
HTML嵌入式的脚本语言。
PHP名字的含义是超文本预处理器
PHP（ PHP,Hypertext Preprocessor） 而其
中的 PHP又是 Personal Home Page Tools的
缩写。
网页设计与制作 18
PHP的功能和特性
? 对数据库的广泛支持
? 基于服务器端、运行效率高
? 良好的开放性和可扩展性
? 嵌入 HTML,容易学习掌握
? 面向对象编程
? 对网络通信协议的广泛支持
? 跨平台
? 图像处理
PHP与其他 CGI的比较
程序语言 PHP ASP JSP
操作系统 均可 Win32 均可
Web服务器 几种 IIS 多种
执行效率 快 快 快
稳定性 佳 中等 一般
开发时间 短 短 较短
程序语言 PHP VBScript、
JavaScript
Java
网页结合 佳 佳 差
学习门槛 低 低 较低
函数支持 多 少 不定
系统安全 佳 极差 佳
使用站点 超多 多 多
网页设计与制作 20
PHP的安装和配置
由于 PHP跨平台的特性, 使得 PHP的安装架构
有多种组合, 如：
? Windows 95/98/me + PWS + MYSQL + PHP
? Windows 2000/NT + IIS + MYSQL + PHP
? Windows 95/98/me/2000/NT + Apache +
MYSQL + PHP
? Unix/Linux + Apache + MYSQL + PHP
网页设计与制作 21
PHP示例
<html>
<head>
<title> PHP示例程序 </title>
</head>
<body>
<?php
echo,hello world!”;
>
</body>
</html>
网页设计与制作 22
10.4 JSP
? 什么是 JSP
? JSP技术特性
? 用 JSP开发 Web的几种主要方式
? JSP运行环境
? JSP示例程序
网页设计与制作 23
什么是 JSP
JSP（ Java Server Pages） 是由 Sun
Microsystems公司倡导，许多公司一起参与建立
的一种动态网页技术标准，它在动态网页的创建
中有强大而特殊的功能。
JSP技术提供了一种简单的方法来创建动态
网页, JSP是一种服务器端的脚本语言 。
可以说,JSP是 Java平台上 用于编写诸如
HTML,DHTML,XHTML和 XML等含有动态生
成内容的 Web页面的应用程序技术，是开发动态
网站快速而有效的工具。
网页设计与制作 24
JSP技术特性
? 把应用程序内容的生成与页面显示分离
? 一次编写，各处运行
? 使用可重用的组件
? 采用标记简化页面开发
? 完善的存储管理和安全性
? 支持多种动态网页格式
? 技术开放性
? Java的优越性
网页设计与制作 25
用 JSP开发 Web的几种主要方式
? 直接使用 JSP
? JSP + JavaBeans
? JSP + JavaBeans + Servlet
网页设计与制作 26
JSP运行环境
一般说来,JSP程序开发工作可以在
Windows环境下编写源代码，然后在
UNIX/Linux环境下进行最后的调试和运行，
这样配合可使开发效率达到最高。
网页设计与制作 27
JSP示例
<html>
<head>
<title>JSP示例 </title>
</head>
<body>
<%@ page language = "java" %>
<% =,hello world!” %>
</body>
</html>
网页设计与制作 28
10.5 ASP.NET
? 什么是 ASP.NET
?,NET框架
? ASP.NET的特性
? ASP.NET的安装与配置
? ASP.NET示例
网页设计与制作 29
什么是 ASP.NET
活动服务器页面（ Active Server Pages，
ASP） 是微软推出的开发 Web动态网站的重要、
快速、有效的工具，它是位于服务器端的脚本环
境。
ASP.NET是建立在公共语言运行环境
（ Common Language Runtime,CLR） 上的，
ASP.NET是,NET框架应用程序的执行引擎，可以
用在服务器端构造一个强大的 Web应用程序的编
程框架。这是微软公司对 ASP.NET的定义。
网页设计与制作 30
.NET框架
Microsoft,NET是微软公司于 2000年 6月提
出的一个新概念, 全称为, Microsoft,NET下一
代互联网软件和服务战略, 。
从微软的网站上我们得到如下的解释：
Microsoft?,NET是 Microsoft XML Web services平
台。 XML Web services允许应用程序通过 Internet
进行通信和共享数据，而不管所采用的是哪种操
作系统、设备或编程语言。 Microsoft,NET平台
提供创建 XML Web services并将这些服务集成在
一起以供所需。对个人用户的好处是无缝的、吸
引人的体验。
网页设计与制作 31
ASP.NET的特性
? ASP.NET通过编译来执行，增强了性能
? 跨语言集成
? Web窗体
? 良好的适应性
? 数据缓存技术
? 服务器端控件
? 简易性
? 可定制性和可扩展性
? 安全可靠性
网页设计与制作 32
ASP.NET的安装与配置
在软件方面 ASP.NET只能在带有 IIS 4.0的
Windows NT4.0 Server（ 或更高版本）上运行，
最好是 Windows 2000 Server（ 带 IIS 5.0）； 数据
库为 SQL Server 7.0以上或者 Access 2000； 浏览器
为 Internet Explorer 5.01以上版本； ASP.NET的操
作平台,NET Framework SDK,可到微软的网站
http://msdn.microsoft.com/downloads/default.asp上
下载。推荐配置是,Windows 2000 Server + SQL
Server 2000 + IE 5.5 +,NET Framework SDK。
网页设计与制作 33
ASP.NET示例
<% @ page language = "C#" %>
<html>
<head>
<title>ASP.NET示例 </title>
</head>
<body>
<% =,hello world!” %>
</body>
</html>
