浅谈网页设计制作在水利宣传推广网站建设中的运用

2011-08-15四川省都江堰管理局

湖北农机化 2011年3期

四川省都江堰管理局黄玲

0 前言

自从李冰创建了岷江上游的都江堰水利工程后，蜀地人民才得以安居乐业至今，都江堰工程，充分利用自然资源，变害为利，使人、地、水三者高度和谐统一为人类服务，是全世界迄今为止仅存的一项伟大的 “生态水利工程”。它开创了中国古代水利史上的新纪元，为世界水利史写下了光辉的一页。先人们给子孙万代留下的，不仅是创造了世界治水奇迹的这片风水宝地，而更为珍贵的，是集合一代又一代劳动人民智慧的治水文化精神财富。

在现代科技发展的今天，利用信息网络这个宽广的载体，把先辈们留下的宝贵财富不断地传承和发扬光大，使其能引起更广泛的社会关注，这对加强都江堰物质文化遗产的保护和可持续开发，具有重要的现实意义。本文要讲的是如何通过网页的设计制作来创建都江堰水利宣传推广网站。

1 建站的目标和总体规划要求

遍及全球的互联网络，是人类最大的知识宝库和社会学校，你可以从Internet上获得各方面的资讯，随着它的日益普及，在不久的将来是人们获取信息的主要场所。特别区别于传统纸质或影像媒介，它是很好的交互式平台，在这里，既可以传递信息，又可以让受众回馈其讯息。

我们可以利用网络这一载体，建立一个有利于都江堰水利事业宣传和推广的网站，用它把我们千古流传的治水经验、教训以及当今日新月异的治水科技搜集、总结起来，并传承出去，体现出我们新时代水利事业人的精神风貌，并建立起一个互助交流的平台，通过该平台，可以聆听全世界水利工作者的良好建议，促进水利事业的不断发展再创新台阶。

结合这些实际需要，对网页的设计制作，应先就整体布局、色调搭配方案及各功能版块的规划做好总体安排，然后是收集各种素材（包括图文资料程序等），最后是在安全性较高的硬件与操作系统平台上，选用适合的软件来完成对它的制作。

网页的设计制作，其实是个整合多门不同学科，如视觉设计美学、心理学、计算机信息技术和计算语言科学等和相关知识点融合的过程，是艺术、科学、创意的结合。网页设计的基本原则就是让网络资源和相应浏览者完美地进行交流，所以对整个网站网页的设计要以简洁、明了、美观、有特色、互动性强而又易于操作的基础来实现。

2 网站页面的整体设计构想

2.1 网页色彩搭配

打开一个网站，给浏览者第一印象的既不是网站的内容，也不是网站的版面布局，而是网站界面的色彩。在网页中恰当地运用色彩，能够达到最佳的视觉传达效果。根据我们是水为主题，采用白色为背景基调，各栏目条框底色设为淡蓝，文字颜色以黑色为主，这样给人感觉不喧宾夺主，也犹如水的象征，清新而洁净。总体的色调及对比度应和谐统一。

2.2 网页布局设计

浏览的视觉路径一般是：从上到下，从左到右。好的视觉设计路径应该顺应这样的习惯。网站结构不清晰，目录庞杂，内容东一块西一块，结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。因此，我们把网站的名片，也是它的灵魂所在——具有水利文化气息的全站LOGO标识图形，摆放在网页的最顶端，它代表了网站的形象。

在接下来的横排上，放上栏目导航条，每个栏目可用下拉菜单形式调用与之相关的子栏目页面，为了方便浏览时不同页面间的自由跳转，让网页组成访问流畅的网站，下属子栏目所在页面的结构，应将上部相同位置设成和主页一样的LOGO和导航条，使网站内的页面，都统一规划，统一风格，体现设计者完整的设计思想。

栏目导航条实质是一个网站的大纲索引，根据我们网站的题材，可将栏目设置如下：

(1)首页。方便站内位置定位到主页。

(2)新闻。主要是水事及相关类新闻资讯。

(3)资料库。它相当于图书馆，汇集了与都江堰有关的史料、工程现状、水利技术、学术资料等有价值的文献、图片和视频，可通过设置搜索引擎的方式来方便查找和下载。

(4)部门。介绍各部门的职责及联系方式等。

(5)公告。可以发布水文、水质监测等一些实时监测信息和通知等，提高办事效率。

(6)bbs讨论区。可以通过这个窗口扩大对外接触和宣传，这里是交流的园地，可以解答有关问题和得到宝贵的建议，不断改进，更好地为受众服务。

(7)留言板。这种互动交流的方式，既能得到很好的反馈信息，又能激励访问者再次回到网站。

(8)政策法规。通过相关法律、法规的宣传及案例的研究，来唤起受众对水利工程的保护意识。

(9)开发（保护）方案征求。为了更好地保护都江堰工程，对它的合理利用一定要走良性循环开发的道路，向全世界征求不管是通过旅游还是水电开发还是其它方式的好的方案，都能集思广议，帮我们找到最好的解决办法，让古堰青春永焕。

为了加强网站的宣传推广，在页面底部要放上友情链接，这样可以与其它相链接的网站共享访问者资源，同时，还可以利用在搜索引擎上注册，植入交换式广告链接等方式，来增大访问量。在网页的最底部位置，放上网站的摘要信息和网管的维护入口。

2.3 网页内容设计

如果网页内容面积大、字数多，会使读者产生视觉疲劳，因此可以将网页内容进行分栏、分块，可把公告、新闻、论坛、资料库、开发（保护）方案征求等栏目的最新信息设立几大版块，置于首页的醒目位置，通过超链接可以直接对其内容页面读取，同时还要注意留白，不要让网页给人感觉太撑。版面设计应突出文字内容，辅以一定的音频、图形图像、动画、视频等素材，使其做到既重点突出，又有可视性。

3 网页制作

3.1 工具软件

完成了网站的设计，接下来就是选取好的网页制作工具，这样可起到事半功倍的效果。

在所见即所得的可视化网站HTML开发工具中，易上手的当数Dreamweaver和Frontpage了。Frontpage的制表功能比较强大、简单易用，而Dreamweaver的功能则更加全面丰富，支持各种代码的性能好，能够快速高效地创建极具表现力和动感效果的网页。目前使用最多的还是Dreamweaver。

除此之外，还有图片编辑工具，如 Photoshop、Fireworks等。Photoshop是功能非常强大的专业图形软件，可以制作任何你想要的平面效果。他的缺点是体积庞大，操作比较复杂，非专业人员很难熟练掌握。Fireworks是一个提供网页制图的应用软件，它擅长将较大的图形文件做不等份的分割，各自保存为不同文件格式、不同压缩方法的图形文件，然后再编写复杂、内嵌式的隐形表格，把这些分割过的小图形文件拼凑起来。

动画制作工具，如Flash、Cool3d等。Flash使用矢量图形和流媒体播放技术，在观看大段影片时不必等到影片全部下载完后，而是边看边下载，从而减少网页浏览者等待的时间，它通过使用关键帧和元件，使生成的动画文件非常小。Flash强大的交互式动画编辑功能使得设计者可以随心所欲地设计出高质量的动画。

还有网页特效工具，如有声有色等，可以根据需要灵活运用。如可用Photoshop制作美化图片，设计网站LOGO，用Flash制作广告栏动画，还可以制作仿真的灌溉工程的功能介绍视频等。

CSS级联样式表在网页中使用最为广泛，可以布局、定位，使网页更加灵活。它可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。通过外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS可称得上WEB设计领域的一个突破。作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。通过DIV+CSS进行布局,可控制页面内文字、图片的大小样式等。

而BBS、留言板、网站新闻公告系统，资料库的检索等涉及交互式动态网页的制作，可用VBScript或JavaScript等语言编程，配合ASP调用SQL的数据库来制作完成。