用WEB方式开发信息咨询系统

用WEB方式开发信息咨询系统

孙敏

摘要:主要介绍了公共服务信息咨询系统利用网页制作的主要技术及具体的实现过程,包括制作工具的简介、

整体的规划工作、利用建立和编辑网页,以及其中存在的技术问题等。

关键词:网页信息咨询

1引言

为了在网络上更好地让别人了解自己,不论是企业还是个人,唯有建立自己的网站,创作自己别具一格的网页。然而,不同的单位或者不同的个人有着自身的不同特点,因此,在制作之中要不断地听取用户方提出的要求,同时还要考虑到今后的发展方向。

基于上述思想的考虑,结合本系统的实际特点,在开发过程中采用了web页方式。采用这种方式不仅可以快捷、方便地实现本系统的所有功能,而且以后可以很方便地放到网络当中实现网络功能。

2开发工具（Dreamweaver）简介

Dreamweaver是作者所见过的最优秀的编辑网页工具,它不仅拥有象一样的图形化界面,而且它的所见即所得功能是其它软件所没有的。

在World Wide Web上的文件是使用一种叫做HTML的标记语言来实现的。它的意思是HyperText Markup Language，其中的HyperText是超文本的意思，它是20世纪60年代美籍丹麦科学家Ted Nelson提出并实现的,它是一种数据结构组织链接方法。在此之前,计算机中的文本组织方式是线性顺序结构,尽管检索、插入、删除等操作简便,但不符合人们的联想思维方式,而超文本是把许多数据信息块根据需要,按其逻辑顺序联结成网状结构。从本质上说,它是一种信息管理技术,以非线性方式给用户提供了组织、存储和检索信息的能力。事实上,每一个网页不只一个HTML文件。HTML语言言不是一种编程语言,只是一种描述性的标记语言。这些标记符用来定义HTML文件中的信息或功能,当浏览器读入HTML 文件后根据标记符去执行相应的显示功能或实现某些功能。

Macromedia公司推出的Dreamweaver，其最精彩之处便是它那强大的多媒体

处理功能。在设计DHTML和css（Cascading Style Sheet层叠样式表）方面表现得极为出色,它利用了JavaScript和DHTML语言代码轻松实现网络元素的动作和交互操作,可谓独出心裁,在这方面超过了许多其它软件。与Macromedia公司其它软件（如Flash，Firework）的完美协作也是DW的一大特点。DW的编辑器不仅可以编辑内部的HTML,而且可以和任何第3方的HTML编辑器进行方便、实时的访问。

正是这些功能和特性,使它成为针对专业网页开发者特别提供的视觉化网页设计工具。Dreamweaver的功能和特性如下。

（1）一流的用户界面。占屏幕约以上的用户界面,除了主菜单外,其他菜单按钮均高度集中在一块块浮动面板上。DW主要的编辑功能菜单用了条浮动菜单栏代替,即对象面板、属性面板、快速启动栏。其中快速启动栏同时集中在状态栏上,对象面板中集成了相当于4个面板的元素（common，form，head，invisible），可以任意移动这些菜单栏位置,尽量留出更多的可视区域。这种界面扩展设计者视野,不再受制于屏幕显示的大小,而DW又提供了标尺刻度及底格功能,你可以直接看到页面的实际显示尺寸,这样就使设计者在页面定位方面更加清晰,无须浏览器预览就清楚主页的整体页面效果。

（2）站点管理功能。自动更新链接、自动复制文件到当前默认站点、自动生成站点地图（map）,并可保存输出、自动在整个站点中寻找坏的链接,利用DW中自带的FTP功能及时远程管理站点,而且也是所见即所得的形式,并完全支持鼠标拖放。

（3）层的概念。创建DHTML页面以DIV开始,可以从objects工具条的Common 集合中插入DIV,然后在属性面板设置层的样式属性,可以用抓取器编辑层。

（4）所见即所得的表格制作网页框架编辑。DW表格编辑功能可选择单格、行、列或做不连续的选取,可以控制表格的内容、背景图、格式及格内的样式,此外还可像使用Word或Excel一样的排序及作格式化。

（5）十分容易地创建各种超链接和图像编辑工具。

（6）支持动态网页（Dynamic HTML）和最新的Internet技术。创建网页动态或交互内容离不开JavaScript，但DW中不用编程就可以实现这些功能。在DW 中，用behavior或action把JavaScript插入页面中，DW有很多JavaScript函数、

图像交换、打开窗口、文档重定向和layer改变可视性的方式。

（7）时间线（timeline）。时间线是DW中最精彩的内容,因为它在实现网页动画时没有用到ActiveX以及任何插件或Java applets。DW通过改变层和页面图片在不同时间上的属性来制作动画。用时间线制作动画可以改变的属性有层的位置、大小、透明度或改变各层的上下位置关系,还可以对页面的各种行为进行设置,使得编辑的网页更富于变化、更精彩。

（8）CSS（Cascading Style Sheet）的应用。DW具有强大的编辑层叠样式表的能力,这一点是其它网页编写软件所不及的,可以用“use css selector”创建一个类或用“Redefine HTML Tag”创建一个新的样式表。

（9）建立映象图。映象图是一种超级图像,它可以将WEB网页中一幅图像各个部分链接到其它网页、地址或资源,也就是在一幅图的不同部分建立不同的链接。

（10）可以定制自己的WorkSpace，DW内置了可能用到的大多数对象和Action,也可以根据自己的需要定制自己的Action和对象,因为它们只是带有JavaScript的HTML，同时可以与Microsoft ASP融合。

3用DW设计和开发信息咨询系统

3.1系统需求调查阶段

信息咨询系统属于一种公共服务咨询系

统,它是为了方便大家查询所需信息而制作

的,所以在完成所有功能的基础上,要考虑

到本系统的实用性及易用性。考虑到种种因

素,我们想到用WWW技术中以网页形式浏览信

息的方法来实现本系统。因为这种方式不仅

方便信息的浏览,而且将来放到网上也方便

信息的发布,同时以这种方式开发的系统不

受操作系统平台的限制,可以跨越几乎所有

的平台,在任何平台上只需要安装一个浏览

器,就可以访问用HTML，Vbscript，JavaSc-

图1设计流程图ript开发的Internet应用，可以简单地移植需求分析

整体设计创意设计素材收集编码与集成制作测试与运行

到任何平台上。这种方式可以通过Web服务器为用户提供信息界面,而数据库则是信息服务的核心,两者通过开放性的数据库接口（ODBC）进行连接,同时通过执行SQL命令,让用户在浏览器画面中输入、更新和删除站点服务器的数据库信息,以网页的形式完全可以实现本系统的所有功能。图1是该系统的设计流程。

3.2应用系统的车不设计阶段

通过对材料的分析和听取客户的要求与建议之后,在网页结构设计上我们力求层次鲜明、结构简练，以便为以后的维护与完善打下良好的基础,同时也要做到简洁明快、美观大方、内容丰富、功能完善。

3.3应用系统的详细设计阶段

这是最重要的一个阶段,也是任务最繁重的一个阶段。它包括各个页面的功能、外观与美工实现（包括素材、背景音乐框架布局等选材与安排）。

首先是采集和制作素材。它是系统集成的基础，包括文字制作、音乐声音制作、图形图像制作、动画制作,其中的文字、图形、图像、声音、动画、视频等都是在应用系统中可显示给用户的媒体元素。

文字包括各种字体、尺寸、格式及色彩,它是计算机文字处理程序的基础,通过对文字显示方式的组织,应用系统可以使显示的信息更易于理解。本系统中文字处理方式是在Dreamweaver文档窗口中,像使用文本编辑软件一样插入文本,然后设定文本格式。文本格式的设计可以通过属性面板设置文字的属性参数,也可以通过Dreamweaver中的层叠样式表来设置。

图形图像制作中关键在于图像的扫描、编辑。图像文件的大小也是非常值得考虑的,它影响到图像从硬盘读入内存的传送时间。为了减少该时间,就应该采用图像压缩技术,对图像的编辑可以采用相关的软件，如photoshop，fireworks。

音频的制作。利用Sound Recorder（录音机）可以对来自大量声音源里面的声音进行数字化的记录。这些声音源包括麦克风、CD、MIDI设备以及其它的声音设备,记录下来的声音将以波形文件（.wav）的格式存储到磁盘里面,它可以嵌入文档中使用。音频信号集成到应用系统中,可提供其它任何媒体不能取代的效果,不仅烘托气氛,而且增加活力。音频信息增强了对其它类型媒体所表达的信息的理解。

动画（Animation）的制作。动画的实质是一幅幅静态图像的连续播放,它可以增强人的视觉感受,制作的工具是用Cool3D或于DW配套的flash。

背景图片的收集。

其次是每个页面框架布局,背景和内容的选择。整个布局要先从网页的封面做起,作为封面最主要的就是背景图像具有代表性的文字和音乐的选材了,选择明快的背景音乐和具有典型意义的背景,可以更加突出主题。页面框架的布局要根据每个页面显示的具体内容作合理的安排。在此系统中,布局是文档左边显示提要,右边显示正文,这样文本行长度适宜于阅读,同时也便于浏览其它内容。同时在页面框架中应该有明确的标题告诉访问者现在身在何处,如何返回上一页等,否则,访问者很容易在错综复杂的网页中迷失。对页面中的内容可以用颜色来修饰,它有很多好处,它可以强调屏幕上的信息格式和内容,把用户注意力吸引到重要信息上。对同类信息使用同种颜色可以帮助用户对相关信息进行提取,不同的颜色显示还可以增强用户的兴趣。但是如果颜色搭配不当,会导致相反的效果。例如,前景色和背景色的对比度不宜过大,否则会使字符难以辨认和阅读。每次显示的颜色不宜过多,过多就会不利于区分颜色的含义,如果要使用过多的颜色,就要选择合适对比度的颜色组合。同时为了美观大方,要适当地把一些动态按钮、特效字、动画加入到网页中（在DW中用在层上粘贴图片来实现）,从而拉近与来访者的距离。

对于静态网页来说就是它的布局或外表,对于动态网页来说就是它的行为与反应。用技术实现网页与数据库的动态交互性是一种很好的方法,用户可以在浏览器页面中输入、更新和删除数据库中的信息,由服务器对数据库进行相应的操作。

3.4系统的集成制作、测试和运行

各个小功能模块完成后,需用DW中的超链方式把各个小模块连接到一起,然后在多种浏览器上浏览,检查是否运行有错,在确定没有错误后交给用户。

布局清楚、易于浏览的网页自然会吸引很多人,但是好的网页的内容也应随时间的变化而不断地更新。即具有时效性。这就要求在网页的日常维护上下功夫,它不可能一劳永逸,它需要管理人员对其不断更新与完善。

4开发过程中遇到的问题

在本系统的开发过程中,曾遇到下列技术问题。

（1）实现树状目录结构。在本系统的太原市地图查询子模块中,由于需要查询的机关、企事业单位较多,所以一并列出将会显得页面太杂、不易快速定位,鉴于此,把它们分类汇总,采用了树状目录结构。采用这种结构不仅可以使页面看上去简单明了,而且方便了用户在查询过程中的快速定位。在实现此功能时,最初采用了技术Java applet但此种技术开发与维护困难,且在实际使用过程中字号不能调整,不便于触摸屏的触摸,所以采用了现在的这种页面连接转换方式。这种方式不仅实现简单,而且人人都能看懂,便于以后的扩充与维护。

（2）页面定时返回。根据本系统的实际需要,除首页以外的每一个页面都应有定时返回首页的功能。最初采用了HTML语言的定时重定向技术,但这种技术灵活性差,不能根据实时情况重新定义时间,只能按页面打开的时间计算。所以最后采用在页面中加入一个ActiveX的定时控件,通过设置此控件的interval属性达到定时功能,但此属性最多只能设置一分多钟,通过控制其它变量来达到实现更长时间定时的功能。为了满足实时要求,在页面的鼠标移动和鼠标按下事件中,可以通过改变变量的值来实现。

（3）在浏览器当中拖动图片的功能。在系统开发过程中,有一些图片的尺寸大于屏幕,但本系统在使用当中为不允许有滚动条出现为方便触摸屏操作,所以为了看到整个图片,就必须具有拖拽功能。这一点可以通过HTML4.0中的层来实现。在页面当中,层是可以拖动的,所以可以把图片放到层的当中,通过用JavaScript控制层的拖动来实现图片的拖动。但在使用过程中,因为触摸屏对触摸的设定有两种方式点击方式和拖动方式,但设置为拖动方式时,由于对屏幕上的点击不灵敏,所以这种技术最后没有被采用,而是通过把图片缩小的办法来达到目的。

5结束语

制作过程中,工作量比较大,需涉及的面很广，如在该系统的制作过程中仅特效便用了photoshop，Cool3D等有关图像、文字处理软件,另外还有VBscript，JavaScript的应用也丰富了主页的内容,但缺点与谬误在所难免,敬请各位指正。

参考文献

[1]温谦,于忠秋,温颜.巧学巧用Dreamweaver制作网页[M].北京：人民邮电

出版社,2000

[2]韩木可,陈希,范建华.Visual Basic快速开发WEB指南[M].北京电子工业

出版，2000