启点在线企业网站
启点在线网站管理
启点在线企业网站
启点在线企业网站
启点在线企业网站
视觉设计 - 首页 •
DreamWeaver打造Web查询系统
发布日期:2015-7-27 14:19:47
本教程是以本人所在城市的一个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=&lt;%=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 自动给你生成一个网站,你一行都不用改。没有那种好事的。


关于我们 新闻中心 成功案例 产品中心 下载中心 网站地图 关注我们








扫一扫
TOP
LINKS: 启点在线 |  A5源码 |  ASP集中营 |  WEB元素 |  deviantart | 
Kdesign-The official website ADD:CHINA·GUANGDONG  TEL:Contact our QQ  FAX:Contact our QQ
COPYRIGHT 2017 KDESIGN™ Design:Kelvinvt ALL RIGHTS RESERVED.  ICP:14066162
 kelvinvt  kelvinvt  在线客服
TOP
Scan the QR code