浅谈高校校园网网站的版面设计

摘要：随着Internet的网络科技不断进步，尤其是在高校之中，校园网络的覆盖更是迅速普及发展，目前，校园网站的建设不仅仅是了帮助学校对外宣传的窗口这单一的工具，更能体现的是高校的整体的面貌和教学管理水平，因此，校园网站的建设要为教师提供交流备课教学、校内外消息、学生家长发表意见提供更好的多功能的载体是现在专业人员值得研究的主要课题之一，本文阐述了关于校园网站的版面设计的观点进行分析、探讨，仅供参考。

关键词：校园网站 版面设计

中图分类号：G250.73 文献标识码：A 文章编号：1007-9416（2012）10-0155-01

1、校园网站版面设计要求

（1）整体形象设计：首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括banner、菜单、标题、版权等模块设计。首页布局清晰合理，突出重点，风格简约，能迅速分辨出网站的重点内容，有省、市、区及相关学校网站的链接；频道及栏目内容清晰，有统一的分类风格，准确的栏目名称，网站有具体的网站地图，查询及链接方便。有独特的LOGO，各层级页面均包含设计上的协调一致的标识图案及文字

（2）页面风格设计：模块布局宗旨在于方便访问者浏览，所以在主题动画下设置版内导航条。大致页面布局力求风格统一、内容丰富。如今的多媒体Web网页具有强大的交互功能，多种媒体方式如文字、图片、动画、声音等同时存在。文字是一种简洁有效的媒体，输入方便，处理速度快，适合网速较慢的情况下大面积布局。图片可以给人以较为直观的感受，以及更为感性的认识。网站信息要及时，每周如学校介绍，教学成果，教学计划等信息至少7条。

（3）颜色调配设计：各板块采用与网站首页同一色系的颜色，整个板块内部也尽量保持风格一致。网页效果上应该所有网页有统一的色彩风格和主色调，同时能够体现学校网站的特色；采用淡雅型的配色方案，避免有大面积色块出现。

2、版面设计方案

2.1 校园网站的整体布局设计

一般校园的网站布局分成上中下、左中右、左右、上下、与上下左右之混合几类，也就是说这些布局之间是不能把他们分开的，注意这几者之间的关系，在布置网站主页版头、内容、版尾的时候要根据它们的比例关系合理的布置结构，另外要根据布局的结构比例把内容和其他区别出来，有大小的视觉对比，要避免平均的布局，另外要注意细节上的布局，要注意通常要注意的就是标题与内容的关系以及这些块放置的位置。

2.2 校园网站的色彩搭配

校园网站的色彩的搭配在整个的网站版面的设计之中是很重要的设计环节，每一样的颜色都会有不同的意义的，网站色调的搭配符合它所要表达的主题。因此，在进行颜色设计的时候要注意色调要统一，整个网站色调统一。网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。两种或两种以上的色彩合理搭配，产生统一谐调的效果，称为色彩调和。色彩调和是求得视觉统一，达到人们心理平衡的重要手段。另一方面在设计的时候尽量把色调控制在三-五种颜色之内，在网站的页面主要的字体、颜色搭配分别用在 重要的、比较重要的、一般的，不要有太多的颜色。

3、校园网站版面的整体风格和创意

（1）风格（style）是抽象的。风格的字面意思在现代汉语词典中有两个含义：1）气度；作风。2）一个时代、一个流派或一个人的文艺作品所表现的主要的思想特点和艺术特点。显然，我们这里所谈的风格属于后种解释，是指整的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。比如大学的网站要给人庄重、富有内涵的印象。有风格的校园网站与普通校园网站的区别在于：普通校园网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的校园网站后你能有更深一层的感性认识。

（2）创意（idea）是网站生存的关键。很多校园网站都是一个面孔，就是没有好的创意或者是没有创意。有的人认为这些很难，需要有天赋，其实不然。创意并不是天才者的灵感，而是思考的结果。

4、结语

由此可以看出，校园的网站是外界了解学校的一个窗口，也是宣传学校建设新成就，展示校园蓬勃发展新形象的重要平台。能够充分发挥学校网络窗口提升学校社会影响力、知名度的作用，因此，校园网站的版面设计不单单是靠好的版面设计，版面设计合理、颜色搭配要协调、要根据主体结构设计风格和创意，只有这样称得上是一个优秀的校园网站。

参考文献

[1]译者：朱锷.《设计中的设计》（日）原研哉.出版社：山东人民出版社.

[2]译者：刘正捷.《可用性工程》（美）Jakob Nielsen.出版社：机械工业出版社.

[3]《多媒体课堂--网页设计师必修》.出版社：电子工业出版社.

[4]王烽源.教育信息化网站的设计与开发[J].河北能源职业技术学院学报，2008，（2）：74-76.

[5] 彭为，陶利，陈晓明等.Dreamweaver+动态网站设计与典型实例[M].北京：清华大学出版社，2008.

[6]胡昌斗.高校图书馆的网页优化与网站建设[J].图书馆论坛，2005，（3）：98.

[7]杨林.普通高校网站主页设计思路探讨[J].保山师专学报，2006，（5）：9.

[8]吴方.网页的色彩设计思考[J].江苏广播电视大学学报，2002，（6）：69.