校园网主页设计研究——基于云南热带作物职业学院

时间:2022-10-02 06:28:11

校园网主页设计研究——基于云南热带作物职业学院

摘要: 随着信息技术的飞速发展,各高校越来越重视信息技术的使用,纷纷建设了自己的校园网站。在校园网站建设中,大多只考虑到功能模块的作用,却忽略了网页界面的视觉效果与交互性。本文以云南热带作物职业学院为例展开了关于校园网主页设计的分析与探讨。

Abstract: With the rapid development of information technology, colleges and universities pay more and more attention to the use of information technology, and have built their own campus sites. In the construction of campus network, most of them only take into account the role of functional modules, but ignore the visual effects and interactivity of web interface. In this paper, with an example of Yunnan Vocational College of Tropical Crops, the design of the campus network home is analyzed and discussed.

关键词: 校园网;界面设计;技术

Key words: campus network;interface design;technology

中图分类号:TP393 文献标识码:A 文章编号:1006-4311(2013)32-0194-02

作者简介:吴光凤(1983-),女,云南巍山人,助教,动画设计专业,现从事计算机动画、网页设计等教学科研工作。

0 引言

高校校园网站承载着信息化教育时代的网络教学、教育管理的基本任务,是信息传递的窗口,担负着对外宣传的桥梁作用。近年来校园网站建设发展迅速,各高校纷纷建立起了自己的校园网站。我院于2003年建立了第一个静态网站,但随着网络应用的不断丰富和教学科研需求的增长,原有的功能模块已不能满足学院的发展需求。为此,我院也进行过多次改版调整。经过调研和资料的查阅,于2012年底进行了校园网站的彻底改版,建立了以ASP技术为核心的动态网站,现已正式运行。在此次校园网站建设中,更加注重网页界面的视觉效果与页面的交互性。下文分析了我院旧版校园网站版面存在的问题,结合新网站的建设,从网页布局、色彩搭配、维护更新等几方面对我院校园网站的主页设计进行探讨。

1 旧版面存在问题

随着学院的发展、规模的不断壮大,旧版校园网主页界面功能及特色已不能彰显我院的综合办学水平,通过对旧版校园网主页的分析研究,发现以下问题:

1.1 版面布局不够合理 网页的版面布局就是对页面中的文字、图形、动画等元素的整体规划,对浏览者来说非常的关键。我院旧版主页采用了“单一型”结构布局方式。整个页面以两条几何长方形分割,页面顶端为学院LOGO、背景图;中间分为两部分,左侧为图片展示区,右侧为新闻动态区。这种布局方式虽然结构清晰,主次分明,但给人以规矩呆板的感觉,很容易让人“看之无味”。

1.2 色彩单一 色彩是人的视觉最敏感的东西,网页界面色彩的选用能直接影响浏览者观赏的心理因素。旧版校园网界面采用了小面积的蓝色做导航的背景,除了内容部分,页面中几乎是大面积的留白。虽看上去清秀、简洁,但总体上显得色彩单一,不能很好的吸引浏览者。

1.3 缺乏特色 特色是一所高校办学的依据所在,旧版面中除了有一张醒目的学院大门照片,其它图片都是零星拼凑的。界面中也没有展现我院特色的元素,没能反映出以热带作物为特色的办学特征。

1.4 维护更新困难 由于旧版校园网是静态页面,更新或更改页面内容需要专业的技术人员,这就导致了大量的信息数据不能及时更新,各个部门的网站建设不见起色。

2 改进措施

2.1 网页布局合理 布局对一个网站的重要性是不言而喻的,这是大家进入网站的第一感观。合理的网站布局能给网站带来一定的优势。网页的构图布局与平面构图布局有着很大的相似之处,但是因为技术的局限,网页构图远不如平面设计那样挥洒自如。此次,新版页面的设计充分体现了网站的功能性、特色性、美观性。整个页面设计采用了“三分栏”式的结构,页面顶端为学院名称、LOGO、导航和宣传图;中间为新闻动态及一些小的功能版块;页面底部为学院风景展示区。这样的页面结构清晰、简洁、美观、大方,看上去一目了然、主次分明。

2.2 色彩搭配和谐统一 色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配。此次设计网页,我们高度重视色彩的搭配。一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜色。我院新版校园网主页色调以灰、白、蓝色为主。灰色显得庄重、沉稳;白色代表着纯洁、洁净之意;蓝色显得清爽,也暗示着学院科学技术的发展。页面背景采用了灰色,顶端是蓝色天空的渐变效果,两色结合给人以舒适、亲切之感。页面中的导航背景及主要标题文字则采用了蓝色,显得和谐统一。页面中有部分留白,能给人带来轻松和快乐,这也是网页色彩的艺术性所在。

2.3 导航设置清晰 导航是网页设计的重点,我们在设计一个网站的时候,常常从导航入手,不夸张的说,导航的设计甚至决定了整个网站的风格。导航的作用是让浏览者了解目前所处位置,以及当前页面在整个网站中的位置。导航的设置体现了网站的架构层级,能够帮助浏览者快速学习和了解网站内容和组织方式,从而形成很好的位置感。我院新版校园网主页导航放置在页面顶端,打开页面就能第一眼映入眼帘,设计清晰合理,链接关系正确,使得变更扩展方便。如:“学院概况”一项中,当鼠标经过还能显示下拉菜单—“学院简介”、“学院领导”、“历史沿革”。这样就更加方便浏览者的查阅,使得页面之间有了更好的交互性。

2.4 突出特色 在新版校园网主页中,我们将学院LOGO醒目的放置在页面的最顶端,这是学院文化的象征。作为我院,一所以热带作物农业为主的高职院校,热作专业无疑是学院的特色重点专业。为了在校园网主页设计中突出这一特色,我们在导航的下方留出了较大区域,通过动画展示了以热带作物橡胶林、茶树林、咖啡园为代表的热带农业景象,充分的体现出了学院的特色。在页面底部还设置了专栏,展现学院的风光,让浏览者有身临其境的感觉。

2.5 技术先进

2.5.1 网站开发环境 新版校园网主页的设计主要采用了:asp、HTML、CSS、JavaScript、VBScript程序开发语言和标准SQL数据库开发语言,运用Macromedia Dreamweaver cs3来实现。其次,网页图片处理也是网页制作一个非常重要的组成部分,图片是网页内容最有视觉冲击力的表现方法,因此,图片在网页中具有非常重要的作用,不管这些图片是作为内容还是作为修饰而存在。我们采用了图片处理软件Adobe Photoshop CS3,对于一些简单的图片处理工作用Fireworks即可完成,而对于复杂和性能要求高的图片比如jpg格式的图片得采用Photoshop去处理效果更佳。页面中的动画效果采用了Macromedia Flash cs 3来制作,它能给人以视觉和听觉的冲击,显得生动、有趣。

2.5.2 主要技术 新版界面主要采用的关键技术是ASP。ASP是(Active Server Page)的缩写,意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。采用ASP技术有以下优点:

①ASP的运行速度快,而且它为使用HTML脚本和ActiveX服务器组件构建Web应用程序提供了一个框架,可以通过将脚本嵌入HTML页内来创建ASP文档;②可以和HTML或其它脚本语言(VBScript,JavaScript)相互嵌套;③是一种在WEB服务器端运行的脚本语言,程序代码安全保密;④可以轻松的存取各种数据库。

3 结语

校园网是高校的重要组成部分,网站主页的设计关乎院校的形象。一个布局合理、色彩搭配和谐、特色鲜明的页面能够吸引浏览者的注意力与喜爱。而先进技术的使用能增强页面的交互性,大大减轻网站维护的工作量,从而实现集互动性、实用性、技术性、可靠性为一体的建站原则。校园网主页界面的设计是技术与艺术的融合。

参考文献:

[1]崔朝晖.浅议独立学院网站主页的设计[J].信息系统工程,2010(12).

[2]何宋正富.浅谈高职院校的校园网建设[J].教育与职业,2010(02).

[3]孙荣.浅论高校校园网站界面设计的视觉创意[J].常州工学院学报,2007(04).

[4]刘莹.论Web2.0网站的用户界面设计[J].艺术教育,2010(12).

上一篇:基于上海42家企业的中职校企文化互动实践研究 下一篇:科技创新对区域经济发展影响的实证分析——以...