转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
DreamWeaver打造Web查询系统         ★★★★

DreamWeaver打造Web查询系统

作者:闵涛 文章来源:闵涛的学习笔记 点击数:700 更新时间:2009/4/23 12:25:43

  本教程假设您对 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 站点 都建立完毕了。以后我们构建动态网页便可以轻松完成了。
  放下鼠标,拿起手柄,玩一会魂斗罗,轻松一下。


[聊天工具]Gmail推出新功能:Web Clip__天极Yesky  [聊天工具]Web MSN你玩了吗__天极Yesky
[系统软件]Web Browser Express 概述  [系统软件]对Internet Explorer Web 控件做一点修改
[常用软件]小技巧:三步实现Web迅雷录制PPLive节目  [常用软件]天网防火墙:打开WEB和FTP服务
[VB.NET程序]使用VB.Net做一个配置web.config功能的WinForm(原…  [VB.NET程序]vb.net控件、web service简述
[VB.NET程序]使用vbscript脚本调用web服务  [VB.NET程序]*** Web 存储系统窗体:窗体注册表 (new)***
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台