网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第14章 动态网页技术 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习的主要内容： 1. 开发环境的设置 2. 数据库的创建 3. 数据库的连接方法 4. 数据记录集的定义与绑定 5. 添加服务器行为

3 14.1 动态网页技术概述 静态网页代码存放于服务器中，其内容始终不 变，直到网页代码被更换。
动态网页、服务器应用程序以及数据库是实现 动态网页技术的重要组成部分。

4 14.1 动态网页技术概述 静态网页工作流程 如下： 1. 浏览器向服务器 发出请求； 2. 服务器查找该页 面；
3. 服务器将该页面 发送到浏览器中。

5 14.1 动态网页技术概述 动态网页的工作流程

6 14.1 动态网页技术概述 动态网页的工作流程如下： 动态网页就可以根据数据库中数据的变化，不断更新 网页中的内容。
1. 浏览器向服务器发出动态请求； 2. 服务器查找该页面并将其传递到应用服务程序； 3. 应用程序扫描该页面指令并通过数据库驱动程序发 送 查询指令到数据库； 4. 将数据库查询结果通过记录集发送到应用服务程序； 5. 应用服务程序将数据插入到页面中并发送到服务器； 6. 服务器将完成的页面发送到浏览器。

7 14.2开发环境设置 静态网页可以直接在浏览器中进行测试和显示， 但是动态网页是一个WEB应用程序，不能直接 在浏览器中打开，需要建立一个WEB应用程序 开发环境。

8 14.2开发环境设置 14.2.1安装IIS 14.2.2设置IIS

9 14.2.1安装IIS IIS（Internet Information Service，Internet 信息服务）是Win7操作系统中的功能组件，提 供强大的Internet（互联网）和Intranet（企业 网）服务功能，可以创建基于ASP的WEB服务 器。 提示：在Win7中安装完IIS后，系统自动设置缺 省站点，名称为Default Web Site，路径为 c:\inetpub\wwwroot，对应的服务器主机名 为localhost。。

10 14.2.2设置IIS 为了动态网页的调试与测试，还需要对IIS进行 设置，如设置站点的虚拟路径。
提示：在缺省站点Default Web Site中，为了调 试多个网站，可以设置多个虚拟目录，一个虚 拟目录对应一个站点。本例中，缺省站点下的 相应虚拟目录文件夹为f:\beauty,虚拟目录的服 务器主机名为localhost/beauty。

11 14.3设计数据库 14.3.1数据库概述 14.3.2创建数据库

12 数据库概述 1．数据库 数据库（DataBase，DB）是按照一定的组织 形式，存储在计算机中的相关数据的集合，它 不仅包括描述事物本身的数据，还包括描述事 物之间的相互关系。 利用二维表格来存储数据的数据库，称为关系 数据库 2．Access数据库

13 14.3.2创建数据库 在Access 2010数据库中，创建数据库就是建 立存放关系数据的数据库文件。一个数据库文 件中可以包含一个或多个表，每个表具有唯一 的名称，各个表即可以独立存在，也可以相互 关联。

14 14.4数据库连接 数据库连接就是通过数据库驱动程序将应用程序与 数据库进行关联，使应用程序可以根据需要向数据 库读取或写入数据。
在数据库连接中，需要先确定数据源（Data Source Name，DSN），再通过数据源建立与应用 程序的连接。

15 14.4数据库连接 14.4.1建立DSN 14.4.2建立数据库连接

16 14.5数据库使用 14.5.1定义记录集 14.5.2数据绑定 14.5.3添加服务器行为

17 14.5.1定义记录集 创建Dreamweaver与数据库连接以后，定义记录集 就是制作基于数据库动态网页的首要工作。
本质上，记录集是根据应用需要，通过数据库查询 语句获得的数据库的一个子集。

18 14.5.2数据绑定 创建记录集之后，就可以在静态页面的指定位置添 加动态数据。
在Dreamweaver环境中，把在页面中添加数据的 操作称为数据绑定，使用简单操作就可以实现。

19 14.5.3添加服务器行为 数据绑定后，需要对动态数据添加各种服务器行 为。 1. 设置插入记录 2. 设置重复区域 3. 设置记录集分页
4. 设置传到详细页面

20 14.6课堂案例-美容美发 14.6.1设计数据库 14.6.2创建虚拟路径和数据源 14.6.3创建动态站点和数据库连接
14.6.4发表留言页面 14.6.5留言详细内容页面 14.6.6留言列表页面

21 14.6课堂案例-美容美发 案例学习目标：学习利用基本的动态网页技术创建留言 系统的方法。 案例知识要点：
1. 留言系统由发表留言页面、留言列表页面和留言详细 内容页面组成。 2. 在Access2010中创建数据库，在IIS中设置虚拟目录， 选择菜单【站点】|【新建站点】，创建站点。 3. 在【数据库】面板中，创建数据库连接；在【绑定】 面板中，将数据库字段与静态页面进行绑定；在【服务 器行为】面板中，添加数据库行为，实现系统的操作功 能。 素材所在位置：光盘/案例素材/ch14/课堂案例-美容美 发。 案例效果，发表留言页面如图14-34所示，留言列表页 面如图14-35所示，留言详细内容页面如图14-36所示。

22

23

24

25 14.7练习案例-电子商务 案例练习目标：练习利用基本的动态网页技术创建留 言系统的方法。 案例操作要点：
1．在Access2010中创建数据库，名称为 commercedata.mdb；字段名称分别为subject（主 题），member（会员姓名）， （电子邮件）， time（日期）和content（内容）。在time字段的 【常规】标签中，设置【默认值】为“=Date()”。 2．在IIS中设置虚拟目录，名称为commerce；文件 夹路径为\commerce。 3．在【数据库】面板中，创建数据库连接，数据源 名称为commercedsn，数据连接名称为 commerceconn。

26 14.7练习案例-电子商务 4．选择菜单【站点】|【新建站点】创建站点，站点名 称为“电子商务”，Web URL为localhost/commerce。 5．在发表留言页面中，设置插入记录服务器行为。在 留言详细内容页面中，创建记录集并进行绑定。在留言 列表页面中，创建记录集并进行绑定，设置重复区域， 记录集分页和转移到详细页面的服务器行为。 6．在每页面代码中，将字符集编码设置charset=utf- 8更改为charset=gb2312 ，保证中文和英文字符都正 确显示，避免出现乱码。 素材所在位置：光盘/案例素材/ch14/练习案例-电子 商务。 案例效果，发表留言页面如图14-79所示，留言列表页 面如图14-80所示，留言详细内容页面如图14-81所示。

27

28

29