动态网页制作讲义

更新时间:2023-03-09 02:37:01 阅读量: 综合文库 文档下载

说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

1

动态网页制作讲义

第一部分 动态网页制作的准备

动态网页有着网页的外观,其实质上是建立在B/S(浏览器/服务器)架构上的服务器端脚本程序。制作动态网页有多种方法,我们学习的是在Dreamweaver MX2004平台下,如何制作自己的动态网页。在做网页前,要做一些准备工作。

一、 网页应用程序的概念

1.

动态网页

上网对大多数网民来说,不过是在浏览器中打开一个网页浏览信息,再从一个网页跳转到另一个网页。网页间的跳转通常有3种方式。

? 在浏览器的地址栏中键入网址打开一个网页。

? 点击一个超链接,即当鼠标光标在页面上变成手型时通过单击来打开一个网

页。

? 在网页的文本域中键入相关内容,然后点击旁边的按钮打开一个相关网页如图

1.1所示。

图1.1点击按钮跳转

在最后一种方式中,点击按钮后就会跳转到不同的相关页面中,这是交互式页面所具有的典型特征。这种交互式行为如果单纯地用HTML语言无法实现,它需要在网站的服务器端编写网页应用程序。

有网页应用程序反馈生成的网页就是所谓的动态网页,这个网页就是服务器渔用户进行交互的界面。

2. B/S架构

那么网页应用程序是如何工作的呢?

万维网技术作为Internet上信息资源共享的解决方案,是建立在浏览器/服务器(B/S)架构以及http协议基础上的,其运作模式可以描述为:请求?处理?应答。B/S架构的构成及关系如图1.2所示。

2

URL地址及参数表单提交请求 请求交由应用程序分析处理 应用程序1 访问数据应用程序2 …… 库 数据库 将Web页反馈至浏览器 处理结果-Web页 …… …… 返回访问结果 浏览器服务器图1.2 B/S架构示意图

从浏览器提交的请求通过Web服务器给应用程序服务器,由他调用相关网页应用程序进行处理,处理的结果交给Web服务器,Web服务器把这个网页作为对请求的应答发还给浏览器。

至于对提交的信息如何处理,则交由网站的开发人员编写相关的网页应用程序来决定反馈到浏览器的内容。

综上所述,网页内容的动态发布是Web应用程序的主要实现方法,这种方法同服务器端提供的WWW服务技术密不可分。一般来说,在Internet服务器上可以通过多种途径实现动态内容的发布,最常见的技术包括CGI、ISAPI、ASP等。

二、 ASP基础

1.

ASP概述

ASP是Microsoft提供的一种Web应用程序解决方案。它同IIS高度集成,既易于编写,执行效率也很高,能够有效地避免CGI技术带来的不足。目前,ASP技术已经逐渐被广大用户所接受。我们主要是基于该种技术来介绍Dreamweaver MX2004的使用方法。

尽管Dreamweaver MX2004提供了所谓的服务器行为和各种数据绑定特性,辅助生成ASP代码,无需用户手工编写,但是如果希望更加深入地了解Web应用程序的开发,我们还是了解ASP的一些基本知识。

ASP能与任何Active Scripting语言相容,使用方便,在普通的文本编辑器中即可进行ASP页面的编辑和设计。在执行的过程中ASP脚本是在服务器上运行并产生HTML代码,并在客户端显示页面。ASP代码不会被传送到客户的浏览器中,因而可以避免所写的源程序被他人剽窃,提高程序的安全性。

2.

1) 2) 3) 4) 5)

ASP的功能

处理由浏览器传送到服务器的表单输入。 访问和编辑服务器的数据库表。

读写服务器的文件,是访客计数器等功能。

提供广告轮播器,取的浏览器信息、URL表管理等内置功能。 可以实现在多个页面间共享信息。

3. ASP的内建对象

Active Server Pages提供内建对象,这些对象使用户更容易收集通过浏览器请求发

3

送的信息、响应浏览器以及存储用户信息。 (1)

Application对象

可以使用Application对象存储给定应用程序所有用户使用的共享资源。 ? 集合

Application对象提供了两个集合,可以用来访问存储于全局应用程序空间中的变量和对象。如表1-1所示。 集合 Contents 说明 没有使用元素定义的存储于Application对象中的所有变量(及它们的值)的一个集合。包括Variant数组合Variant类型对象实例的引用。 使用元素定义的存储于Application对象中的所有变量(及它们的值)的一个集合。 表1-1 Application对象及其说明

? 方法

Application对象的方法允许删除全局应用程序空间的值,控制在该空间内对变量的并发访问。如表1-2所示。 方法 说明 Contents.Remove(“Variable_name”) 从Application.Content集合中删除一个名为Variable_name的变量。 Contents.Remove(All) Lock() 从Application.Content集合中删除所有变量。 所定Application对象,使得只有当前的ASP页面对内容能进行访问。确保通过允许两个用户时读取和修改改制的方法而进行并发操作不会破坏内容。 解除对在Application对象上的ASP网页的锁定。 表1-2 Application方法及其说明

? 事件

Application对象提供了在其启动和结束时触发的两个事件。如表1-3所示。 事件 OnStart OnEnd 说明 当ASP启动时触发。用于初始化变量、创建对象或运行其它代码。 当ASP应用程序结束时触发。其结束时,应用程序中存在的所有变量被取消。 表1-3 Application事件及其说明

(2)

Session对象

StaticObjects Unlock() 可以使用Session对象存储特定的用户会话所需要的信息。当用户在应用程序的页之间跳转时,存储在Session对象中的变量不会清除;而用户在应用程序中访问页时,这些变量始终存在。

? 集合

Session对象提供了两个集合,可以用来访问存储于用户的局部会话空间中的变量

4

和对象。如表1-4所示。 集合 Contents 说明 存储于这个特定Session对象中的所有变量和其值得一个集合,并且这些变量和值没有使用元素进行定义。包括Variant数组和Variant类型对象实例的引用。 通过使用元素定义的、存储于这个Session对象中的所有变量的一个集合。 表1-4 Session对象的集合及其说明 ? 特性

Session对象提供了4个属性,如表1-5所示。 属性 CodePage LCID SessionID Timeout 说明 读/写。定义用于在浏览器中显示页内容的代码页。 读/写。定义发送给浏览器的页面地区标识。 只读。返回会话的会话标识符。 读/写。为这个会话定义以分钟为单位的超时周期。 表1-5 Session对象的属性及其说明

? 方法

Session对象允许从用户级的会话空间删除指定值,并根据需要终止会话。如表1-6所示。 方法 说明 Contents.Romove(“Variable_name”) 从Session.Content集合中删除一个名为Variable_name的变量。 Contents.RemoveAll() Abandon() 从Session.Content集合中删除所有变量。 当网页指向完成时,结束当前用户会话并撤销当前Session对象。 StaticObjects 表1-6 Session对象的方法及其说明

? Session对象的事件

Session对象提供了在启动和结束时触发的两个事件。如表1-7所示。 事件 OnStar OnEnd 说明 当ASP用户会话启动时触发,在用户请求的网页执行之前。用于初始化变量、创建对象或运行其它代码。 当ASP用户会话结束时触发。从用户对应用程序的最后一个页面请求开始,如果已经超出预定的会话超时周期则触发该事件。 表1-7 Session对象的事件及其说明

(3)

Server对象

Session对象提供对服务器上的方法和属性进行的访问。最常用的方法是创建ActiveX组件的实例。Session对象是专为处理服务器上的特定任务而设定的,特别是与服务器的环境和处理活动相关的任务。

? 属性

Server对象的唯一一个属性用于访问一个正在执行的ASP网页的脚本超时值。如

5

表1-8所示。

特性 ScriptTimeout 说明 设置或返回页面的脚本在服务器退出执行和报告一个错误之前可以执行的时间(秒数)。 表1-8 Server对象的属性及其说明 ? 方法

Server对象的方法用于格式化数据、管理网页执行和创建其它对象实例。如表1-9所示。 方法 CreateObject(“identifier”) Excute(“url”) GetLastError() HTMLEncode(“string”) MapPath(“url”) Transfer(“url”) URLEncode(“string”) 说明 创建有identifier标识对象(一个组件、应用程序或脚本对象)的一个实例,返回在代码中使用的一个引用。 停止当前页面的执行,把控制转到在url中指定的网页。 返回ASP ASPError对象的一个引用,这个对象包含该页面在ASP处理过程中发生的最近一次错误的详细数据。 返回一个字符串。该串是输入值string的一个拷贝,但去掉了所有非法的HTML字符。 返回在url中指定的文件或资源的完整物理路径和文件名。 停止当前页面的执行,把控制转到url中指定的页面。 返回个字符串。该串是输入值string的一个拷贝,但是在URL中无效的所有字符。 表1-9 Server对象的方法及其说明 (4)

Request对象

可以使用Request对象访问任何用HTTP请求传递的信息,包括从HTML表单POST方法或GET方法传递的参数、cookie和用户认证。Request对象能够访问发送给服务器的二进制数据。

? 集合

Request对象提供了5个集合,可以用来访问客户端对Web服务器请求的各类信息。如表1-10所示。 集合 ClintCertificate 说明 当客户端访问一个页面或其它资源时,用来向服务器表述客户证书的所有字段或条目的数值集合,每个成员均为只读。 根据客户地请求,用户系统发出的所有Cookie的值的集合,这些Cookie只对相应的域有效,每个成员均为只读。 METHOD的属性值为POST时,所有作为请求提交的

段中的HTML控件单元的值的集合,每个成员均为只读。 依附于用户请求的URL后面对名称/数值对,作为请求提交的且METHOD属性为GET的,每个成员均为只读。 随同客户端请求发出的HTTP报头值。 表1-10 Request对象的集合及其说明

Cookies Form QueryString ServerVariables 6

? 属性

Request对象属性提供用户请求的字节数量信息,很少用于ASP页。 ? 方法

Request对象的方法允许访问从一个段中传递给服务器的用户请求部分的完整内容。如表1-11所示。 方法 BinaryRead(count) 说明 当数据作为POST请求的一部分发给服务器时,从客户请求中获得count字节的数据。 表1-11 Request对象的方法及其说明

(5) Response对象

可以使用Response对象控制发送给用户的信息,包括直接发送信息给浏览器、重定向浏览器到另一个URL或设置cookie的值。

? 集合

Response对象只有一个集合,集合设置希望放置在客户系统上的cookie的值,直接等同于Request.Cookies集合。如表1-12所示。 集合 Cookies 说明 在当前响应中,发回客户端的所有cookie的值,这个集合为只写。 表1-12 Response对象的集合及其说明 ? 属性

Response对象提供一系列的属性,可以读取和修改,使响应能够适应请求。这些是由服务器设置的,用户不需要设置。

? 方法

Response对象提供了一系列方法,允许直接处理为返回给客户端而创建的页面内容。如表1-13所示。 方法 说明 AddHeader(”name”,”content”) 通过使用name和Content值,创建一个定制的HTTP报头,并增加到响应之中。 AppendToLog(“string”) Clear() End() Write(“string”) 当使用“W3C Extended Log File Format”文件格式时,对于用户请求的Web服务器的日志文件增加一个条目。 当Response.Buffer文True时,从IIS响应缓冲中删除现存的缓冲页面内容。 让ASP结束处理页面的脚本,并返回当前已创建的内容,然后放弃页面的任何的进一步处理。 在当前的HTTP响应信息流和IIS缓冲区写入指定的字符,使之成为返回页面的一部分。 表1-13 Response对象的方法及其说明

说明:至于ASP的相应语法及编程,请参考相关书籍,不作为我们学习的重点。

7

三、 构建ASP的应用程序开发环境

要利用Dreamweaver MX2004完成对Web应用程序的开发,则必须在本机构建完善的开发环境。如图1.3所示显示了Dreamweaver MX2004的开发环境,其核心操作是在本机安装了Web服务器程序,如IIS,然后利用Web服务器程序应设真正的可访问站点,并确保该站点与Dreamweaver MX2004指定的远端站点相一致。

数据库Dreamweaver MX2004计算机COM对象以及JavaBeansWeb浏览器 图1.3 ASP的开发环境

构建本机开发环境操作的第一步,需要将计算机设置成为一台真正的Internet服务器,以提供WWW服务。让我们想象一下,一台位于网络上的真正的Internet服务器,应该具有哪些特征呢?首先,由于它是连接到网络上的,所以要求它安装网卡;其次,它应该具有固定的IP地址,这样当用户在客户端通过在浏览器地址栏中键入URL地址时,就可以通过域名系统找到相应的IP地址并访问该网站;第三,为了能够为用户提供浏览服务,在Internet服务器上必须安装相应的Web服务器程序,以处理用户的请求,并运行用户请求页面。前两点我们就不再多说,在这里主要讲述一下如何安装Web服务器端程序。

1. 安装个人网页服务器(PWS)

个人网页服务器(Personal Web Server)简写成PWS。Windows 98用户应该安装PWS。可以将PWS和Dreamweaver MX 2004安装在同一个Windows系统上,应确保在系统上安装了IE4.0.1或更高的版本,否则将不能安装PWS服务。安装PWS的步骤如下。

(1) 双击Windows 98光盘上的PWS安装文件。 (2) 按照安装向导进行操作。

(3) 当询问默认Web发布主目录时,接受默认目录:C:\\Inetpub\\wwwroot。 (4) 单击“完成”按钮结束安装过程。

2. 安装因特网信息服务器(IIS)

Windows 2000及Windows XP Professional用户应该安装并运行IIS。安装IIS的具体操作步骤如下。

(1) 在Windows 2000或Windows XP操作界面下选择“开始”?“设置”?“控制

8

面板”,打开“控制面板”对话框,如图1.4所示。

图1.4 控制面板

(2) 双击按钮,然后在打开的“添加/删除程序”对话框中单击“添加/删除

Windows组件”的按钮,如图1.5所示。

图1.5 添加/删除程序对话框

(3) 随即打开“Windows组件向导”对话框。在“组件”选项区域中选中“Internet

信息服务(IIS)” 复选框,如图1.6所示。单击“下一步”按钮进入“Internet信息服务(IIS)”的安装程序,此时系统会提示插入Windows2000/XP的光盘。

9

图1.6“Windows组件向导”

(4) 插入Windows2000/XP的光盘并单击“确定”按钮,系统将自动安装这项服务。

注意:判断是否安装了IIS服务的方法是查找C:\\Inetpub文件夹。如果该文件夹不存在,则该机系统上很可能没有安装IIS。 3.启动因特网信息服务器(IIS)

安装完IIS后,需要启动其Web服务。具体操作步骤如下。 (6) 在Windows 2000或Windows XP操作界面下选择“开始”?“设置”?“控

制面板”,打开“控制面板”对话框。

(7) 单击“管理工具”图标,打开管理工具对话框,如图1.7所示。

图1.7 “管理工具”窗口

(8)

双击

图标,打开“Internet信息服务”对话框,如图1.8所示。

10

图1.8 “Internet信息服务”窗口

(9) (10)

单击“QINKUN”本地计算机选项左边的加号,展开的所有子项是该计算机中当前正在提供的各项服务。 选中其子项“默认的网站”,单击右键,选择“属性”,打开“默认网站属性”对话框,如图1.9所示。

(11)

图1.8 “默认网站属性”对话框

选择“网站”选项卡。在“网站标识”选项下的“描述”文本框中输入关于站点名称的说明,在“IP地址”文本框中输入该服务器在网络中的IP地址(该地址是用来访问、浏览网页时用的,用户在本地进行的设计测试阶段此IP地址可以不设置),如图1.9所示。

11

图1.9“网站”标签选项

(12)

选择“主目录”选型卡。在“本地路径”中显示出网站所存在的物理路径名称C:\\inetpub\\wwwroot,也可以单击右侧的“浏览”按钮来设定其它文件夹。如图1.10所示。

图1.10 “主目录”选项卡

(13)

单击“文档”选项卡。在“启用默认文档”复选框下显示的文档名称是网站的首页名称。一般将首页面确定为index.htm或index.asp,或者单击“添加”按钮经其它首页文件名称添加到列表中,如图1.11所示。

12

图1.11 “文档”选项卡

(14)

单击“确定”按钮,完成使用IIS的设置。

注意:在不设置服务器IP地址的情况下,IIS使用虚拟的IP地址(127.0.0.1),所以在地址栏中输入的IP地址为127.0.0.1。如果在网站的根目录中包含有index.asp文档,那么就可以显示该网页的内容。

小结:这一部分主要介绍了动态网页的一些基本概念,ASP的相关概念以及配置自己ASP应用程序开发环境的方法,为我们下一步学习动态网页的制作打下基础。

13

第二部分 制作留言板

本部分主要以如何打造留言板为主线,讲述制作留言板的全过程。其中涉及到Dreamweaver MX 2004中站点的建立、创建数据源、添加动态内容、添加服务器行为等知识点。大家跟着做完后,可以掌握利用Dreamweaver MX 2004来制作动态网页的基本方法。

一、 留言板的功能分析

留言板分为书写留言、存储留言、显示留言和管理留言等几个模块。用户首先看到的页面是显示留言页面,然后可以选择留言或者对留言进行管理,当然管理留言是有密码保护的。管理模块允许站长回复或者删除留言。具体功能及文件看下图。

显示留言(default.asp)留言板书写及存储留言(add.asp)管理员登录(login.asp、error.htm)删除留言(del.asp)管理留言(admin.asp)回复留言(replay.asp)

图2.1 “留言板”功能模块

二、 所使用的数据表结构分析

留言板中所使用的数据库选用的是Access数据库,具体创建数据库的方法在这里就不再多说。我们在这里介绍一下所使用的数据表结构。

1. 数据表tGuestBook

该表用来存储留言和站长回复。数据表tGuestBook的字段属性及说明如下图2.2所示。

14

图2.2 tGuestBook数据表结构

需要注意的是fTime字段和fReplyContent字段的默认值。 fTime字段的属性如下图2.3所示。

图2.3 fTime字段的属性

应注意到该字段的“默认值”为VBA内置的函数Now()。当添加一条记录时,如果不显示知名该字段的内容,则系统会以当前的日期和时间来填充当前字段。

fReplyContent字段的属性如下图2.4所示。

15

图2.4 fReplyContent字段的属性

2. 数据表tAdmin

该表用于存储管理员的用户名和密码。如果有多个管理员,则可添加多条记录。

图2.5 tAdmin数据表结构

初始状态下管理员的用户名为admin,密码为guestbook。

3. 建立数据库连接(定义系统DSN)

数据库建好之后,需要设定系统DSN(数据源名称)来确定数据库所在的位置以及数据库相关的属性。使用DSN的优点是:如果移动数据库档案的位置或是使用其它类型的数据库,那么只要从新设定DSN即可,不用修改原来使用的程序。

这里以Windows XP环境为例来设定DSN,使用Windows 2000创建的基本方法是

16

一样的。具体操作步骤如下。

(1) 启动控制面板,双击“管理工具”下的“数据源(ODBC)”。

(2) 在打开的“ODBC数据源管理器”对话框中选择“系统DSN”标签,然后

单击“添加”按钮,如图2.6所示。

图2.6 ODBC数据源管理器

(3) 在弹出的“创建数据源”对话框中,选择数据库的驱动程序为“Microsoft

Access Driver(*.mdb)”,然后单击“完成”按钮,如图2.7所示。

图2.7 创建新数据源对话框

(4) 在出现的“ODBC Microsoft Access安装“对话框中,在“数据源名”文

本框中输入“connLOOK”,单击“数据库”栏中的“选择”按钮选择C盘根目录中的look.mdb,然后单击“确定”按钮。如下图2.8所示。

17

图2.8 ODBC Microsoft Access安装对话框

(5) 这时会发现系统数据源名称中已经多了一个“connLOOK”。这就是接下来

要使用的数据库。单击“确定”按钮完成对DSN数据源的创建,如图2.9所示。

图2.9 ODBC数据源管理器

三、 首页的制作分析—显示留言

留言板的首页主要功能是显示留言,文件名为default.asp。我们以此为例,讲述一下在Dreamweaver 2004 MX中创建站点和网页的过程。 1. 内容主体的制作

I.

创建站点及网页

可以使用Dreamweaver 2004 MX来创建自己的单个网页。但是,在大多数情况下,我们可能更希望将这些单独的网页组织起来成为一个站点。Dreamweaver具有强大的站

18

点管理功能。它首先在本地计算机的硬盘上创建本地站点,全局把握站点结构,管理站点中的各种文档,完成对站点的编辑,然后将本地站点发送到远端的Internet服务器上创建真正的站点。如果需要后台数据库编程,则必须选择一种服务器技术,比如ASP或者JSP。必须设置测试服务器的信息,以便Dreamweaver能顺利地使用测试服务器。具体操作步骤如下。

(1) 启动Dreamweaver,选择“站点”?“管理站点”菜单项,弹出“管理站点”

对话框。

(2) 单击“新建”按钮,选择“站点”命令,打开站点定义对话框,如图2.10

所示。

图2.10 “站点定义”对话框

(3) 按照向导,完成定义操作。

? 站点命名。在站点名字文本框中输入站点的名字,这里我们输入“留言板”。 ? 选择使用服务器技术。在其中的下拉列表中选择“ASP VBScript”。

? 定义文件的存储位置。我们在C:\\Inetput\\wwwroot目录下建立一个liuyan

目录,然后定义文件的存储位置为C:\\Inetpub\\wwwroot\\liuyan\\。

? 输入站点的根文件夹的URL。默认的为http://localhost/liuyan/,单击“测

试”按钮,来测试URL是否正确。 ? 选择不使用远程服务器。

? 单击“完成”按钮,完成站点的创建工作。 (4) 创建留言板的首页(显示留言),文件名为Default.asp。它是一个静态网

页,具体操作步骤省略。其中需用表格对页面排版,插入图片以及输入文字。初始页面如图2.11所示。

19

图2.11 留言本主页面初始画面

II.

创建数据源

动态网页的最主要特点就是结合后台数据库自动更新Web页面,而数据是通过记录集这一中间媒介来实现数据在网页生的绑定的。

在Dremaweaver中创建数据源的步骤如下。 (1) 定义数据库连接。

? 在Dremaweaver面板组中打开“应用程序”面板。

? 然后选择“数据库”标签,单击“+”按钮,在弹出的快捷菜单中选择“数

据源名称”选项。

? 打开“数据源名称”对话框,在“连接名称”文本框中输入“connLook”,

数据源名称中选择我们先前所定义的系统DSN“connLook”,如图2.12所示。

? ? (2)

?

?

图2.12 “数据源名称”对话框

单击“测试”按钮,测试一下是否能够与数据库正确连接。 单击“确定”按钮,完成设置。 建立记录集。

选择“绑定”标签,单击“+”按钮,在弹出的快捷菜单中选择“记录集(查询)”选项,打开“记录集”对话框。 在记录集名称中输入“rsGuestBook”,在“连接”下拉列表中选择

20

connLOOK,选择数据表他GuestBook中的全部记录,并且按照fID字段的降序排序,如图2.13所示。

图2.13 创建记录集

? 单击“确定”按钮,完成设置。完成后的“绑定”面板如图2.14所示。

图2.14 “绑定”面板

III. 绑定数据

(1)

绑定姓名、留言、时间和站长回复等动态数据到相应位置。直接拖动记录集中的字段名到页面中的相应位置即可完成操作,如图2.15所示。

21

图2.15 绑定动态数据后的结果

(2)

对Oicq图片的处理,使得当鼠标移到该图片上时,可以显示“某某人的OICQ号码是XXXX”。

? 选中Oicq图片,在属性面板中单击“快速标签选择器”,如图2.16所示。

图2.16 选择快速标签选择器 ? 在编辑标签窗口中添加Alt属性为:

alt=\的OICQ号码是<%=(rsGuestBook.Fields.Item(\

22

(3)

? ? ? ? E-Mail图片的处理。希望当点击该图片时可以立即对该留言作者发送邮件。

单击E-Mail图片,在其“属性”面板中单击“链接”文本框右侧的“浏览”图标弹出“选择文件”对话框。

在“选择文件名自”选项中选择“数据源”单选钮,表示从数据源中得到所需要的文件。

在“域”列表框中展开已经建立的数据集,选择“fE_Mail”动态数据,此时URL文本框中会显示该动态数据的代码。

在这段代码前面加上mailto:,使浏览者点击后能够立即发送邮件。

(4)

图2.17 绑定动态数据

对主页图片的处理。主页图片的处理效果和E-Mail图片的处理效果基本相同,只不过这一次点击后是链接到留言者的主页,所以在“链接”文本框中绑定的是“fHomePage”动态数据,无须添加“mailto:”。

IV. 添加重复区域

在显示数据以及查询中会遇到在一个页面显示多条记录的情况,Dreamweaver提供

了“重复区域”服务器行为用来解决这个问题。它可以显示一条记录,也可以显示多条记录。

我们这里要对留言部分重复区域应用服务器行为,使之能够在一个页面上显示10条留言,具体操作步骤如下。

(1) 选择包含数据的整个表格,作为重复区域。

(2) 选择“服务器行为”面板中的“服务器行为”标签,单击“+”按钮,选择

“重复区域”命令。

(3) 在弹出的对话框中使用默认设置。

(4) 单击“确定”按钮,可看到在选定的表格上方出现“重复”灰色标签表示

重复区域设置完成,如图2.18所示。

23

图2.18 设置重复区域

2. 隐藏图标

网友在留言时如果没有填写Oicq、E-Mail、主页地址,那么相应的图片就不应该显示出来,具体操作步骤如下:

(1) 选中Oicq图片并转到代码窗口,然后在该图片对应的代码前后添加如

下代码。

<% if(rsGuestBook.Fields.Item(\

alt=\的OICQ号码是<%=(rsGuestBook.Fields.Item(\<%End If%>

(2) 为Email图片添加如下代码。

<%if(rsGuestBook.Fields.Item(\

(3) 为主页图片添加如下代码。

<% if(rsGuestBook.Fields.Item(\

3. 添加导航按钮

当留言数量超过10条时,可利用“插入”工具栏中的“应用程序”类别在页面中添加翻页按钮,步骤如下。

(1) 将光标定位到表格左上角单元格内,然后单击“插入”工具栏“应用程序”

类别中的“插入记录集导航条”活动对象图标,如图2.19所示。

24

图2.19 单击“插入记录集导航条”活动对象图标

(2) 在随后弹出的“记录集导航条”对话框中进行入下图2.20所示的设置。

图2.20 “记录集导航条”对话框

现在,我们的留言板首页基本上已经做完,我们可以按下 F12 进行页面预览,如图2.21所示。

图2.21 基本完成的default.asp页面

25

四、 发表留言

留言板块的最主要的功能就是对留言内容的验证、留言内容写入数据库以及记录网友的个人信息等功能,使用Dreamweaver可以很容易地实现。 1.

校验表单

(1) 先制作发表留言的页面Add.asp,需要使用的对象有表格和表单,如下图2.22

所示。此页面设定了“姓名”和“留言”内容必填,在Dreamweaver总可以使用“检查表单”行为来检测这两个文本框中是否已有数据。

图2.22 Add.asp初始页面

(2) 选择标签选择器中标签,如下图2.23所示。

图2.23 选择form

(3) 选择“窗口”?“行为”菜单项,弹出“行为”面板。单击“+”按钮,从

弹出的菜单中选择“检查表单”菜单项,如下图2.24所示。

图2.24 选择“检查表单”菜单项

26

(4) 在随后弹出的“检查表单”对话框中进行设置。在“命名的栏位”列表框中

选择与姓名对应的一栏,选中“必需的”复选框,如图2.25所示。对留言内容也一样进行设置。

图2.25 “检查表单”行为对话框

(5) 单击“确定”按钮返回页面,这样留言者在没有填写姓名或留言内容的情况

下就会出现提示信息。如果留言者输入了Oicq号码,则必须是数值,如果输入了Email地址则必须合法。

2. “插入记录”服务器行为

我们需要把留言者输入的信息写入到数据库中,这就需要使用Dreamweaver中的“插入记录”服务器行为。

打开“服务器行为”面板,单击“+”按钮,在弹出的菜单中选择“插入记录”菜单项,打开“插入记录”对话框,在对话框中进行参数设置,如图2.26所示。

? 【连接】:connLOOK。 ? 【插入到表格】:tGuestBook。 ? 【插入后,转到】:Default.asp。 ? 【获取值自】:表示当form1表单执行提交操作时,由该表单获得数据。 ? 【表单元素】:该文本框中显示的是form1表单内各类表单元素。

图2.26 “插入记录”对话框

27

3. 记住个人信息

我们希望在留言者输入了个人信息后,下一次在留言时能自动能够地填写个人信息,这就需要使用到Cookies。

在该页中设置Cookies来记住留言者第一次留言时填写的姓名、Oicq、邮件和主页地址的信息,这样当该留言者在一次留言时,就可以省去对这些内容的填写。 (1) 打开代码检查器窗口(按F10键),查找“***Insert Record:constrtuct a sql

insert statement and execute it”字样,在If(CStr(Request(“MM_insert”))<>””) then语句之后加入存储Cookies的语句:

If (CStr(Request(“MM_insert”))<>””)Then

Response. Cookies (“rcName”) =Request. Form (“fName”) Response.Cookies (“rcName”).Expires=Date+100 Response. Cookies (“rcOIcq”) =Request.Form (“fOIcq”) Response.Cookies (“rcOIcq”).Expires=Date+100

Response.Cookies (“rcE_Mail”) =Request. Form (“fE_Mail”) Response. Cookies (“rcE_Mail”).Expires=Date+100

Response.Cookies(“rcHomePage”)=Request.Form(“fHomePage”) Response.Cookies(“rcHomePage”).Expires=Date+100 End If

(2) 打开数据“绑定”面板,单击“+”按钮,在弹出的菜单中选择“请求变量”,

弹出“请求变量”对话框,进行设置,如图2.27所示。

图2.27 “请求变量”对话框

(3) 单击“确定”按钮返回页面。选择表单中的“fName”文本框,将在“绑定”

面板中建立的“rcName”变量绑定到文本框的初始值属性上,这样就完成了该效果的设置。其他的rcOICQ、rcE_Email和rcHomePage变量的建立和绑定方法与此相同。绑定后的结果如图2.28所示。

28

图2.28完成的Add.asp页面

五、 管理留言

1. 管理留言页面的制作

(1) Admin.asp页面的设置。打开Admin.asp页面,只要简单地绑定姓名、留言

和站长回复的动态数据即可,加入导航信息操作以及设置重复区域的操作与Default.asp页相同,这里就不再说明,制作完的页面如下图2.29所示。

图2.29 Admin.asp页面组成

(2) 选择“站长回复”文字,打开“服务器行为”面板,单击“+”按钮,然后

在弹出的菜单中选择“转到详细页”菜单项,弹出“转到详细页”对话框,进行设置,单击“确定”按钮,完成站长回复页的链接,如图2.30所示。

29

图2.30 设置“站长回复”动态链接

2. 删除留言页面的链接。

删除留言功能是在该页作为一个将选择后的参数传递到“del.asp”页再执行删除操作的动作。在该页的静态页面中已经建立了表单元素,现在要将“rsGuestBook”中的“fID”动态数据绑定到复选框的Value属性上。 (1) 选中页面中的复选框

,再选中“绑定”面板中的动态数据fID,然后单

击“绑定”按钮。如下图2.31所示。

图2.31 绑定到复选框

(2) 将该表单的动作设置为“del.asp”,如下图2.32所示。

图2.32 设置表单属性

注意:表单对象中有一个“删除”按钮,它的“按钮名称”(Name)属性一定要为空,如图2.33所示。

30

图2.33 “按钮名称”属性为空

六、 删除及回复留言

1. 删除留言

Del.asp为删除留言页面。在该页面中,主要是根据Admin.asp传递过来的fID值,利用“命令”对话框的设置来执行删除动作。

打开数据“绑定”面板,单击“+”按钮,然后在弹出的菜段中选择“命令(存储过程)”菜单项,弹出“命令”对话框,如图2.34所示。

图2.34 设置“命令”对话框

对“命令”对话框的设置如表2-1所示。 参数 名称 连接 类型 SQL 变量 设置 commDel connLOOK 删除 DELETE FROM tGuestBook WHERE strCondition 名称:strCondition 运行值:Replace(Request.Form,”&”,” or ”) 表2-1 “命令”对话框的各项设置

单击“确定”按钮,返回页面。

31

2. 回复留言

这个页面是利用修改记录集作为站长回复。利用由Admin.asp传递过来的fID值来取得记录,如图所示进行设置。然后根据“记录集”中的内容绑定姓名和留言动态数据到页面,站长回复对应的是多行文本框。将站长回复的动态数据绑定到该文本框的“初始值”上,最后修改“记录集”即可完成页面的制作。

图2.35 创建“记录集”

七、 登录机制

1. 登录用户

在进入站长回复的管理页面之前,一般都要进行用户密码验证。在这个留言板系统中是利用Dreamweaver自带的“用户身份验证”服务器行为来制作用户验证页面。 (1) 打开Login.asp页面,这里已经制作好登录用的表单,对应的用户名和密码

文本框分别为“Aadmin”和“Apassword”。

图2.36 “登录”页面显示

32

(2) 打开“服务器行为”面板,单击“+”按钮,然后在弹出的对话框中选择“用

户身份验证”?“登录用户”菜单项,在弹出的对话框中进行如下图所示的设置。

图2.37 设置“登录用户”服务器行为

(3) 单击“确定”按钮,完成设置。这样就完成该给页面用户验证行为。

2. 限制未登录用户访问

Admin.asp、del.asp和reply.asp页面都需要防止非授权用户的访问,所以需要添加“限制对页访问”的服务器行为。

在Admin.asp、del.asp和reply.asp页面中打开“服务器行为”面板,单击“+”按钮,在弹出的菜单中选择“用户身份验证”?“限制对页的访问”,在弹出的对话框中进行设置。

图2.38 设置“限制对页的访问”服务器行为

小结:利用Dreamweaver的服务器行为,不用输入一行代码便可完成一个留言板的制作。熟练掌握服务器行为是创建动态网站的基础所在。

要完成一个留言板的制作还需要准备下列素材和配置下述环境: 1) 配置并使用“因特网信息服务器”,如IIS或PWS服务。 2) 定义Dreamweaver MX 2004动态站点。 3) 创建用于存储/提取客户留言的数据库。 4) 创建DSN连接。

5) 构建留言板系统所需的相互关联的链接页面。

33

本文来源:https://www.bwwdw.com/article/ogjg.html

Top