第7章电子政务网站设计与网页制作第7章电子政务网站设计与网页制作7.1网站设计与网页制作的一般原则7.2政府网站建设7.3FrontPage2002的应用思考题与习题第7章电子政务网站设计与网页制作7.1网站设计与网页制作的一般原则7.1.1网站的主题和内容1.网站的主题1)主题选材一定要“适度”所谓“适度”是对个人主页或部门主页而言,网站的主页选材千万不要做得太广,主页的内容也不要包罗万象。因为对于一个个人或部门来说,其能力和时间都有限,不可能把每一栏的内容都做得丰富多彩,也不可能有那么多的精力和时间去维护、去更新。当然,对于一个大的政府部门、单位或公司来说,主页选材可以做得比较广,因为它们是有实力和能力做到这一点的。如果没有这个能力,却把主页做得样样俱全,结果只会样样都很肤浅,给人的感觉犹如蜻蜓点水,空洞无物,没有主题,没有特色,结果只能让信息浏览者失望。第7章电子政务网站设计与网页制作2)题材的选择最好是自己擅长或者是与本部门的职能特性结合比较密切的内容比如,擅长网页设计,可以把网页设计的技巧、经验放在自己的主页上,也可以编写一些网页设计的教程等供浏览者学习、下载;对游戏感兴趣,可以设置游戏的排行榜、游戏的技巧、游戏的秘笈;对诗歌感兴趣,可以放置自己的诗词;对足球感兴趣,可以报道最新的球场战况等等。对于一个部门来说,网页的制作应与本部门的职能特性紧密结合。管理职能部门应侧重于管理机构、管理权限、管理内容等的宣传;服务职能部门则应侧重于服务对象、服务范围、服务项目等的宣传。这样在制作时,才不会觉得力不从心或脱离实际。第7章电子政务网站设计与网页制作3)选材不要太滥,目标定位不要太高“太滥”是指到处可见,人人都有的题材;“目标定位太高”是指在这一题材上已经有非常优秀、知名度很高的站点,因而要超过它是很困难的。第7章电子政务网站设计与网页制作2.网页的内容内容是最重要的。网页内容一定要精、专,这是吸引信息浏览者的首要条件。如果网页上的内容空洞无物,让人读起来索然无味,那么这样的网页谁会再次光顾?所以网页上的内容必须有自己的独创性、见解性。如个人网页,可以在网页上尽可能多地放置一些自己的作品。但是对于大多数的个人主页创作者来说,完全靠自己创作的内容毕竟为数不多。大部分人的做法是从报纸、杂志、光盘等媒体中把相关的资料、图片收集整理。建议内容不要全部照搬他人的,应适当加入一些自己的文章、评论或见解。第7章电子政务网站设计与网页制作此外,网页上的内容一定要勤于更新。Internet上不断有新事物出现,每天都有新花样。如果主页从不改变,客户很快就会厌倦。不妨在主页上设置一个“Whatisnew”栏目专门用来发布新内容,或者也可以在页头以大字标题宣布新消息。也可以定期改变主页上的图像,或更改主页的式样。同时,为了保持新鲜感,应及时确保主页提供的是最新信息。一个受欢迎的主页必须做到天天更新甚至几个小时更新一次。第7章电子政务网站设计与网页制作7.1.2网站的组织网站都是由一个个网页组成的,网页的组织是非常关键的,网页组织的好坏直接关系到网站的成功与否。一般来说,一个好的网页应该遵循以下两个原则。1.要包含有一定的信息一个好的网站,在它的网页中应该包含如下几个基本要素。(1)网站的名称。网站的名称是很重要的,一个好的名称,可能一下子就能让人记住。如很多人都知道“Yahoo网站”,但知道它的IP地址或其域名的人就可能不多。(2)网页的标题。如同一篇文章的标题一样,让人一下子就知道这一页的主要内容。第7章电子政务网站设计与网页制作(3)内容。网页的内容非常重要,是浏览者最感兴趣的部分。(4)指向主页的链接或指向网站其他网页的链接。网站设计有一个非常著名的原则——“三次单击”原则,即网站中的任何信息都可以最多单击三次后找到,或单击三次后用户可进入到与本网站链接的任何网站主页或其他网页中。这样做的目的是为了方便访问者的浏览。(5)网站的联络方法。网站可进行双向信息交流,一方面提供信息给访问者,另一方面应该让访问者方便进行交流,比如说访问者发现网页上有错误或其他方面的问题时,可以与其联系。可以在网页中设置网站的联络方法,如提供IP地址、域名、电话、E-mail等。第7章电子政务网站设计与网页制作(6)网站的建立或更新日期。这些信息也是比较重要的,因为它们能够让浏览者很快知道哪些信息是最新的。(7)版权说明。可以在网站中设置一个版权说明,当被侵权时,就会有所帮助。第7章电子政务网站设计与网页制作2.网页的长度要合适一般来说,网页的长度太短的话,就无法容纳足够多的内容,也就无法提供足够多的信息;反之,若网页的长度太长,首先其下载速度过慢,其次不方便浏览者的访问,因为他们需要不断地翻动屏幕,在滚动屏幕的过程中也很容易错过网页中的某些内容。根据经验,网页的篇幅一般限制在2到3页之内为佳。第7章电子政务网站设计与网页制作7.1.3网页的版面设计版面设计是一项非常重要的工作,它涉及到方方面面的内容。因为它要利用有限的空间,将各种文字和图片有效地组合在一起。文字太多,显得沉闷,缺乏生气;图片太多,缺少文字,就显得信息量过少。图片和文字又不能简单地堆放在一起,同时还要考虑色调搭配问题。在设计版面时,应该努力做到整洁、美观、主次分明、图文并茂。版面又因人而异,每个人的兴趣不同,喜欢的版式也不同,因而版面设计便没有定式。那么如何设计好自己的版面呢?一般来说,可以依据以下几个原则来设计版面。第7章电子政务网站设计与网页制作1.尽量简洁简洁是版面设计最重要的原则。因为设计网页的主要目的是为了发布信息,网页上的信息是最精华的、最重要的,除此以外的东西均应处于次要地位。不要将版面弄得过分花哨,虽然访问者会被精美的动画和花哨的图片所吸引,但访问者真正关心的是网页的内容,如果网页的内容是有价值的,那么他们才会经常光顾该网页。第7章电子政务网站设计与网页制作2.主色调色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。如果色彩处理不好,会显得凌乱、庸俗,甚至还觉得刺眼。一般来说,网页中的色彩不要超过三种,并且选用其中的一种色彩作为主色调,居主导地位。下面介绍几种常用的配色方案。(1)暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。第7章电子政务网站设计与网页制作(2)冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。(3)对比色调。即把色性完全相对的色彩搭配在空间里。例如,红与绿、黄与紫、橙与蓝等。这种色彩的搭配,可以产生强烈的对比效果,给人以亮丽、鲜艳、喜庆的感觉。现在很多网站的色彩搭配都很讲究,给人一种赏心悦目的感觉。第7章电子政务网站设计与网页制作3.善用表格利用表格,可以随心所欲地安排页面,使页面的内容整齐有序,层次清晰。另外,当图片较大时,可以将其裁剪成小的图片,再用表格将裁剪好的小图片拼接在一起,这样可以提高下载速度。使用了表格,可使整个版面显得整洁、有序、结构清楚。第7章电子政务网站设计与网页制作7.1.4网站的风格网站的风格要统一。因为一个网站是由很多个网页组成的,如果每个网页的风格都不一样的话,那么一定会使得整个网站显得凌乱、不协调,甚至很容易使浏览者感到迷惑,不知自己是否还在同一个网站内浏览,所以一定要使网站的风格保持一致。特别是在一个网站由多个人来共同开发的情况下,更应注意这个问题。一般来说,要使网站的风格保持一致,可以通过以下几方面来着手。(1)版面设计要一致。如网页的主色调、字体的风格(包括字体的类型、大小、颜色等)等要一致。(2)网页中的有代表性的东西要一致。如网站的名称、网站的徽标、有代表性的图形和动画等均要一致。第7章电子政务网站设计与网页制作(3)导航条的风格要一致。导航条实际上就是一组链接,它可以告诉浏览者目前所在的位置,而且可以使浏览者很方便地转向网站中的其他网页。一般来说,在网站中的每一页都要设置一个导航条,设置导航条的风格要一致,如导航条在网页中的位置要统一,所有的导航条要么都用文本,要么都用图形,如果用的是文本的导航条,那么字体的大小、颜色均要统一。为了保持整个网站的风格统一,最好是使用CSS技术。CSS就是一种叫做样式表(StyleSheet)的技术,也叫层叠样式表(CascadingStyleSheet,CSS)技术。使用CSS技术,可以统一地对所有页面的布局、字体、颜色、行距、缩进量、背景等进行控制。第7章电子政务网站设计与网页制作7.1.5网页的优化精彩的内容,加上漂亮的图片和迷人的动画无疑是吸引网民的一个好方法。但是一张图片的大小往往是几KB甚至达到几十KB,动画则是图片的几倍甚至几十倍,而网民大部分用Modem上网,目前其速度最快也只有56K,所以必须考虑传输带宽的问题。试想一下,如果下载某一页时需要十几秒甚至更长的时间,那么网民还会有耐心去等待吗?还会再次光顾该网站吗?如果能做到既有丰富的内容、漂亮的图片和动画,同时其下载速度又快,那么这样肯定会受到广大网民的欢迎,肯定会再次光顾该网站。对网页进行优化就是要平衡两者,让两者达到最佳状态,这可以从以下几个方面来着手。第7章电子政务网站设计与网页制作1.网页的长度不要过长一般来说,网页的长度不要超过三屏为好。超过三屏会使网页下载速度过慢,很容易使浏览者转向其他的网站。第7章电子政务网站设计与网页制作2.使用的图像宜小而精俗话说“一图顶千言”,一张小小的图片,可以精确地表达意思。再说如果只有文本而没有图片,那么整个网页会显得枯燥无味,引不起网民的兴趣。但是如果图片过多,则会导致传输速度过慢,怎么解决这个问题呢?一般来说,单张图片的容量不得超过30KB,每页图片总量不要超过60KB就可以了。这样的下载速度是可以接受的。如果不得不使用大的图片,那么可以把大图片分割成几个小图片,然后在编辑器中设置间隔为零,这样也可以加快其传输速度。第7章电子政务网站设计与网页制作3.定义图片的尺寸(长度和宽度)定义图片的尺寸虽然不能减少图片的长度,但是可以加快网页下载的速度。因为有些浏览器每收到一张图片,事先要算出图片的尺寸才能显示出来。如果事先设置好,那么浏览器就不必花时间去计算图片的大小。再说如果事先设置好尺寸,那么浏览器在图片还没有完全下载时,就知道图形的大小,这样在下载的过程中它就可以安排图片邻近的文本了,否则的话,只有等图片全部下载完毕后,计算其大小,然后再安排邻近的文本。要设置图片的大小,只要在HTML中加入语句imgsrc=图片名width=w_valueheight=h_value即可。第7章电子政务网站设计与网页制作4.正确选择图片格式表7-1图片格式的比较GIFJPEG压缩比例较小从大到小四种选择最多支持的颜色256色(0~255)全彩(1600万色)渐显功能GIF89a有无背景透明功能GIF89a有无动画GIF89a有无第7章电子政务网站设计与网页制作5.降低颜色数目可以使用Photoshop等绘图软件来降低图片的分辨率,以减少图片的长度。这样做出的图片虽然看起来不及杂志上的那样光滑和细腻,但是只要清楚就可以了,很少有人在意它,关键的是其下载速度。6.慎用动画动画的容量一般是图像的几十倍,所以在一页中动画一般应少于3个,并且每个动画要控制在15KB内。第7章电子政务网站设计与网页制作7.慎用Java程序目前Java程序的运行速度实在太慢,使用Java会使得网页速度至少减慢50%。由于浏览器的版本不同,有时候等候半天,却告诉JavaApplent不能启动。一般来说,每个页面不要使用超过两个以上的Java程序;能够用Javascript替代效果的,则尽量不要使用Java。第7章电子政务网站设计与网页制作8.使用缓存缺省情况下,浏览器在下载一个文件前,会先到缓冲区中查找;如果缓冲区中有相同的文件名则直接调出来,而不是从网站上下载。那些在网站中重复出现的文件,比如徽标、页首或导航条就不必一遍一遍地下载。这样就大大加快了页面的读取速度。如果想禁止某一页的