厦门大学门户网站设计

厦门大学门户网站设计说明

作者：吴汤海

索引：

? ? ?

安装说明 设计思路 技术特点

安装说明

作品完成度

完成约90%，少量页面未完成，不过由于和其他页面的相似性，那些页面较容易完成，如果设计被最终采纳，能很快的完成并投入使用。

安装方法

把网页目录复制到服务器虚拟站点的根目录即可，默认的主页是index.htm 开发工具

? DreamWeaver：网页制作 ? FireWorks：图片处理 ? Swish：Flash制作

设计思路

Logo和Banner

根据参赛规程，需要体现厦大“侨·台·特·海”的特点，这里主要以Banner的设计来体现，Banner以厦门大学的地理位置就开头，使不熟悉厦门大学的人也一目了然，知道厦门大学位于东南明珠厦门，毗邻台湾海峡，紧接着出现学校的特色照片，突出几个主题：

? 华侨领袖（校主陈嘉庚） ? 悠久历史、优良传统 ? 学校新貌、特区学府 ? 莘莘学子、人才辈出

最后出现校训和校名，突出厦大人一直不忘校主的教导，奋斗至今。 整体框架

网站的整体页面我采用了一般企业学校网站所通用的布局，即标题（上）、导航条（中左）、正文（中右）、脚注（下），是页面看起来美观、信息量足有不至于显得拥挤。

标题位置采用抽象化的波浪设计，一方面体现厦门大学位于海上花园的特色，另一方面又能保持页面的庄重感，不至于太过花哨（毕竟这是一个学校的门户，而不是商业网站）。 色调搭配

由于学校地处海边，所以在首页的整体色调，我采用了海蓝作为主色调，根据网页的四个部分，标题位置为深蓝，已达到醒目的作用，同时与波浪线条搭配，正文部分则采用白底黑字，增强对比度，方便用户阅读信息。 网页层次 ? 首页系列 ? 内容页面 ? 文档 ? 外部链接

技术特点

网页技术

考虑学校主页信息量多、访问量大，但是信息内容相对稳定，更新频率不高，所以制作整个网站的总体技术，我放弃了ASP.NET之类的动态网页技术，而选择了静态的HTML技术加上JavaScript，这样能更好的节约服务器资源消耗，同时也可以很好的满足对访问速度的要求。

仿Windows菜单

作为一个门户网站，对整个厦门大学网络资源的信

息导航功能不容忽视，单单只有一个网站地图是不够的，一个好的门户网站应该让访问者能随时从网站的一个页面到航到他需要访问的任何一个其它页面，所以我根据网站地图用JavaScript制作了一个仿Windows的菜单，本菜单就像大家平时使用的Windows开始菜单一样，简单、易用、层次排列，就算是计算机的初学者，应该也可以很容易的学习如何使用，让每个访问者都能随心所欲的访问厦门大学门户网站的任何一个资源。

搜索引擎

网站地图和菜单的设计可以让访问者更方便的浏览厦门大学网站的资源，可是如果访问者有基于查询的信息，那怎么办呢？为了方便这些人的需要，我专门为网站作了一个搜索引擎，使用JavaScript数据库，只需要一个Js数据文件，不依赖Access和SQL那些专门的数据库，介绍了网站在安装和部署上的麻烦。

DreamWeaver模板

为了方便以后首页内容的修改和更新，我在设计网站的时候还是用了DreamWeaver的模板技术，根据网页的层次设计了Main、E-Main、Content等几个模板，放在Templates目录下面，日后需要对网站的整体风格或者信息进行修改，只需要修改dwt模板文件即可。所有类似网页都能自动更新。

本文来源：https://www.bwwdw.com/article/nqoa.html