DreamWeaver打造Web查询系统

　　本教程假设您对 HTML 、Photoshop 6.0 、ASP 、Access 2000 、Web 配置已经很熟悉，同时对于 Dreamwaver MX 的静态、动态页面制作也有一定基础。如果您对以上技术不是很熟悉，请参考相关书籍，或到本站论坛探讨。
　　本教程是以本人所在城市的一个114电话号码查询程序为主介绍的，功能相对简单。因此，如果您看懂了本教程，那么，不难开发出更高级的程序了。
　　教程共分成8讲，分别是：第一讲：功能设计、第二讲：设计数据库、第三讲：设计网页图像并切图、第四讲：在Dreamweaver MX 中建立站点，并规划站点、第五讲：建立相关各个静态页面、第六讲：将静态页面修改为动态页面、第七讲：编制后台管理程序、第八讲：整体测试。

　　下面进行第一讲：功能设计

　　电话号码查询大家都知道可以通过114电话来查，但查询的结果仅包括电话对应的企业或个人的名称。其它的资料无法得到，而且还需要支付电话费，如果通过网络来实现，将会是很方便的。目前，互联网上的电话号码查询网站很多，他们的功能都很强大，不仅做到了最基本的电话号码查询，同时也包含了企业的资讯、企业的宣传、乃至会员企业的产品销售等活动。他们都属于电子商务类站点了。我们要设计的程序可没有他们那样复杂，那么，我们要实现是什么功能呢？我说一下简单的功能要求：

　　1、通过输入企业名称或户主名称查询电话号码；
　　2、企业资料包含企业的联系方式与经营介绍信息；
　　3、企业可以实现排名，热点企业可以显示在每次查询的企业推荐位置，实现更好的宣传；
　　4、企业的经营类别可以自定义，同时可以按照企业的经营类别查询电话号码；
　　5、没有登记的企业可以在线填写表格实现自动提交；
　　6、提供后台的管理。包括，企业提交表格的审核、企业的显示排名、重点推荐企业的设置等；

　　怎么样，功能是不是还凑合？下面我再说说我们的技术特点：

　　1、通过 Include（包含）的形式组织页面，使程序模块化；
　　2、使用 Photoshop 6.0 设计页面，同时切图，方便从整体角度构造页面布局；
　　3、在数据库中使用“一对多”关系来构造数据库，使其设计的更合理；
　　4、通过 Dreamweaver MX 设计页面，同时应用“数据库行为”来建立网页，使您身感 Dreamweaver MX 功能之强大；
　　5、手工修改 Dreamweaver MX 生成的代码并解释代码，让您开发出自己想要的功能。

　　怎么样，有信心吗？有的话就拿起鼠标，我们一起来！

　　我们的程序所用的数据库选择的微软的 Access 2000 ，选择他的原因是他比较小巧、包含在 Office 2000 中、适合于访问量和数据量不大的应用，同时也易于学习。如果您使用的是 SQL Server 2000 或是其它什么数据库，那么您可以根据本教程在您的数据库系统中建立相应的库。
　　我们打开 Access 2000，首先 Access 会在第一个屏幕让我们选择一个已有的数据库或是新建一个数据库，如果我们是初次使用，可以选择“空 Access 数据库”，这是系统会让我们输入数据库名和选择数据库对应的路径。如果是打开已经建立完毕的数据库，可以在下面的列表框里面选择一个已经存在的。或是选择“更多的文件...”

通过手工的方式定位数据库。如图2-1:

　　不管如何，我们会进入数据库的设计视图。如图2-2:

　　下面，我们新建数据表，在窗口中选择“使用设计器创建数据表”，然后建立两个表，表名分别是行业情况表和电话号码表，分别取名为，hy和tele。

　　这里需要注意的是，我们通过在tele表里面建立hy_id字段，实现对行业表之间“一对多关系”的建立，以方便以后扩充行业情况。同时，在电话表里面除了设置基本的电话信息外，还设置了一些标志性字段。例如：Is_Top、Is_Good、Is_Pass。意义为：如果Is_Top的值是1，则此条信息将在电话号码本中的顶部显示。Is_Good 为推荐标志，如果此字段为1，则表示将用红字显示此条电话号码。而Is_Pass则表示，如果用户在线填写表单，那么填写的内容将不马上显示到查询结果中，而是需要以后通过我们的审核，审核通过后才能显示出来。那么，如果该字段为1，则表示已经通过审核。以上三个字段默认值均为0。
　　至此，我们的数据库便建立完毕了。大家主要注意的是关系的建立和标志性字段的建立。这些将有效的提高我们程序的功能。
　　在下一部分中，我们将介绍设计网页图像并切图，让我们的网页有个最初的视觉效果。

　　如果网页中没有图像，那么效果一定很糟。对于网页图像的制作，每位朋友都有自己的制作方法。比如，有的朋友喜欢每用到一个图像画一个图像；有的朋友喜欢直接在别的网站找些Gif动画图像或将素材库里面的素材修改后直接插入到自己的网页中。至于那种方法比较好，我不准备评价，毕竟各有各的好处。
　　在这里，我说说我做网页的步骤：第一步是先用Photoshop建立一个760宽1000多象素高的画布，在这个花布上完成每个页面图像的绘制。如果网页中有Flash动画，便留下位置，以后在Flash中制作。第二步是将画好的页面切图。第三步，在Dreamweaver MX 中拼合这些切图。第四步，画下一个页面。周而复始，直至把所有的页面都画完。
　　这就是我画页面的步骤，当然，画页面也可以在Fireworks或Imageready中完成，用他们做页面的同时还可以建立动画或下拉菜单等更好的视觉效果。但因为我们主要以程序为主，因此就没有太追求更好的视觉效果。还有一部分人喜欢动态Flash站，他们的制作顺序只有Flash、ASP（如果用ASP做后台编程环境）和数据库，我也将在以后推出一个【用Flash MX 2004 ＋ Dreamweaver MX 2004 ＋ ASP ＋ Access2000 打造Flash留言本】的教程中介绍。
　　最后说一下，以上的步骤是一个人建立网站时的步骤。如果您的网站规模比较大，有专门的程序员编写程序，也有相应的美工设计界面，至于数据库，甚至还有专门建立数据库的人员。那么建立的方法将不会仅仅这几步。毕竟我们网友中有很多人是一个人搞网站，什么都由一个人来，那么本教程将很适合您。（但这种形式不是正规的形式，就像一个公司只有一个人搞，这样的公司怎么能搞大呢。但在我国互联网发展初期，只能如此了 ^_^）
　　网页的切图保存在程序包中，里面包含整站切图和已经切好的小图片。至于如何切图，请参看你的Photoshop书籍。

　　经过画网页和切图，我们的网页布局设计已经全部搞定，剩下的事就可以建立网页了。如果现在您发现有些功能没有考虑到，还需要修改数据库或重新修改网页切图。那么我可以很严厉的告诉您：“设计阶段你干什么去了？！现在才发现程序的不足！”不过，现在想到也不算太晚，毕竟比全完成了在发现好（这是给您吃了一个宽心丸，但尽量别出现这样的问题）
　　我们的页面是通过 Dreamweaver MX 排版的。在排版前，需要构建站点（可不要告诉我，您没有构造站点的习惯），构建站点是建立动态网站所必须的。因此不能忽律。我个人强烈不推荐使用Frontpage制作动态网站。
　　首先，在PWS或IIS中建立一个web站点，建立方法请参照有关书籍。由于我的机器只能安装win98，因此我选用的是PWS（痛苦啊），请看下图4－1：

　　然后，在web站点所在的文件夹内建立相应的目录结构，这个步骤可以在资源管理器中完成。图4－2：

　　需要说明的是，我在我本机E盘的pcitw文件夹中建立了一个站点。然后分别建立了114、common、db三个文件夹。分别为114的栏目文件夹、通用文件夹和数据库文件夹。在114文件夹下面再建立images和manage文件夹，用于保存114栏目需要用到的图片和以后的管理页面。而Connections文件夹为Dreamweaver MX 自动生成的，用于保存数据库的连接情况，以后会用到（其它的文件夹为我机器上的其它站点，不用参考）

　　至此，我们的web站点和web站点的目录结构已建立完毕。目录结构的建造过程也可以在Dreamweaver mx 中的站点窗口中完成。剩下来的就是在Dreamweaver MX 中建立站点。
　　打开Dreamweaver Mx，选择菜单－>新建站点，在高级标签页中分别设置站点信息。在本地信息类中设置站点的本地情况，在“本地根文件夹”中输入刚才建立的Web站点的绝对路径（E:/pcitw）；访问方式如果在本地，可以输入 http://localhost/。请看图4－3：

　　如果测试在本机进行，那么远程信息类可以不设置。下面设置测试服务器类，并根据情况输入资料。在服务器类型中选择 ASP Vbscript （如果你喜欢用其它语言编写ASP可以选择相应的选项）访问方式选择本地/网络，表示在本地测试页面。在测试服务器文件夹输入刚才建立的Web文件夹的绝对路径，这里必须对应。最后在url前缀中输入本地文件的访问方式 http://localhost/详细情况请看图 4-4:

　　其它的类别设置由于本教程未用到，因此不予介绍了。
　　ok，我们的web站点、web站点目录情况、dreamweaver Mx 站点 都建立完毕了。以后我们构建动态网页便可以轻松完成了。
　　放下鼠标，拿起手柄，玩一会魂斗罗，轻松一下。

　　经过前几节的制作，网站前期的准备工作已初步完成，本节建开始建立114的各个页面。页面文件的安排是

　　这样的：
　　top_114.asp：是所有页面的顶端，位于网站根目录下的 /common 文件夹下面；
　　buttom.htm：是所有页面的底端，也位于网站根目录下的 /common 文件夹下面；
　　以上两个文件都是通过ASP的include命令包含在相应的页面中，这样做的目的是使网站模块化，减少工作量。

　　index.asp：114的主页
　　search.asp：电话号码查询结果页面；
　　seek_tel.asp：查询表单，由于每个页面都包含查询部分，因此本部分也做成一个单独的文件被其它文件包

　　含；
　　login_tel.asp：在线填写登记的页面；
　　disp_tele.asp：显示相信信息的页面，页面包含电话号、号码对应的单位、单位介绍等；
　　login_ok.asp：在线填写登记完成时候显示的页面；

　　各位在这里只需要注意排版方面的技巧，其它的没有什么太多的。另外，要用http的形式访问这些页面，也

就是http://localhost/114/index.asp来看主页。

一、建立数据库连接

　　在第四步，我们的站点就已经建立好了。在构造动态页面之前，我们先在 Dreamweaver MX 中建立和数据

　　库之间的连接,请按下面步骤进行：
　　　1、在应用程序选项卡里面选择数据库项目，然后点击加号按钮并选择“自定义连接字符串”,如图6-1:

　　　2、在数据源设置对话框内，分别输入数据源名称和连接字符串。连接字符串用于连接数据库，在这里我

　　们先按绝对路径的格式输入："driver={Microsoft Access Driver (*.mdb)};dbq=E:/pcitw/db/cy114db_2004.mdb"
　　　3、在这里需要注意的是，在引号内的所有内容必须按找格式书写，数据库的路径和文件名根据实际情况

　　填写，如图6－2：

　　经过上面3个步骤，数据库的连接便建立完毕。这时在看数据库面板，便能显示出数据库结构来。如图6－3：

　　数据库连接的建立，实质上是在我们的根目录下建立了一个 Connections 文件夹，并在该文件夹内建立了一

　　个和我们指定数据源名相同的asp文件。熟悉asp的朋友马上就能看明白了，里面原来是一个变量定义。页就是：MM_db114_STRING = "driver={Microsoft Access Driver (*.mdb)};dbq=E:/pcitw/db/cy114db_2004.mdb"，如果我们上

　　传到网站上，那么这段代码可要修改，否则是连接不上数据库的。如何修改，我们将在以后说明。如图6－4：

　　至此，我们已经建立了数据库的连接，以后任何操作，只要涉及数据库的，都要用到刚才建立的连接。当然，如果你的网站需要很多数据库，那么你将建立多个数据库连接。因为一个连接只能对应一个数据库。

　　二、将 index.asp 转换为动态页面

　　从本小节开始，我们逐步将前面建立的静态页面转换为动态页面，使其和数据库相结合，以完成我们最终的页面。
　　首先我们要把首页转换为动态页面。在首页中，仅有右侧的“超值推荐”部分需要从数据库中读取数据，因此，我们的目的是从数据库中的 tele 表中读取 Is_Good 字段值为1的记录并按降序显示就可以了。
　　ok，开始工作。第1步，建立数据集.在绑定面板，选择 记录集(查询) 菜单，并在对话框内根据图 6－5所示

　　选择相应的内容。至此，数据集已设置完毕，绑定面板已经显示了数据表的字段情况。下面进行第2步，将公司名称拖动到页面中，以在页面中显示该字段内容。参看图 6－6：

　　到现在为止，我们已经将数据库中的一条记录显示在网页上了，但我们的目的不是显示一条记录，而是显示10条记录。因此，我们还要构造重复区域行为，只有那样才能将我们指定的记录数目显示到网页中。要构造重复区域行为，请选择“服务器行为”面板中的“重复区域”，并根据图6－7设置，注意，选择重复区域行为时一定要选择要设置的表格行，也就是html的<tr>部分。

　　最后，我们设置但点击某个企业时候应该显示详细页面的连接，也就是调用 disp_tele.asp 显示电话号对应企业或个人的详细信息，在这里，我们是通过id参数的形式传递给 disp_tele.asp 页面的。选择页面上的动态文本，然后在地址栏中输入如下内容：disp_tele.asp?company_id=<%=rs_cztj("id") %>，如图6-8：

　　二、将 disp_tele.asp 和 right_114.asp 转换为动态页面

　　天啊，刚得到消息，11月5号才供应暖气，我还得挺几天。痛苦啊！
　　今天说说 disp_tele.asp 页面的构造，本页面的功能是显示详细的企业或个人资料。页面功能不是很复杂，Let's Go!
　　在这里，我们首先约定，本页面的调用格式为：“ disp_tele.asp?company_id=&hy_id=”以便在显示详细信息的同时显示该电话号对应企业的行业推荐企业。我们不用 Dreamweaver MX 自带的那个转到详细页行为，我们都是手工填写代码。
　　首先在页面中构造一个记录集，以显示指定的电话号对应企业的详细资料，注意url参数部分，参见图6－9：

　　记录集建立完毕后，将字段依次拖动到页面的相应位置中。以显示字段内容。

　　然后，在构造相关行业类别对应的推荐企业记录集。本部分由于但是保存为单独网页，因此要修改right_114.asp文件。本步操作需要使用高级记录集定义对话框，并手工填写部分代码。参见图6－10：

　　把公司名称拖动到页面中，并建立重复区域行为。最后手工修改 Dreamweaver MX 生成的代码，以便具有当没有类别参数时候显示的超值推荐。修改内容参见图6-11：

　　说明，其中黄色部分为修改了的位置。

　　ok，经过上面的修改，无论调用参数是否提供hy_id都将根据我们的意图显示相应的超级推荐了。也就是如果没有参数将显示所有的推荐（前10个），如果有则显示相应类别的前10个。
　　本节即将结束，在这里需要提醒各位，Dreamweaver MX 生成的代码最好要研究明白了。不要期望 Dreamweaver MX 自动给你生成一个网站，你一行都不用改。没有那种好事的。