教育类网站UI的设计与制作
一、网站开发需求分析
一般来讲，校园网站应比普通的互联网信息平台更有针对性、更具校园特色，并易于查询和使用，更能满足学校与外界沟通交流的需求。抚州职业技术学校对其拟建的门户网站提出的主要要求有以下几点。
（1）宣传学校办学理念，展示办学设施、教师队伍、专业设置、就业情况，提高学校的社会知名度；
（2）适时发布学校管理、教学、招生等相关信息，为求学者提供相关咨询服务；
（3）获取社会各界对学校教育教学情况的评价和意见、建议；
（4）建立与兄弟院校进行交流学习的平台；
（5）向社会各界推荐毕业生，为毕业生提供就业信息。
二、网站风格定位
校园网站就是学校的网上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。凭借百花齐放的院系（班级）网站群，学校门户网站就可成为一道独特的校园风景线。网页的风格不是某个设计项目相同，网站就有整体感，而是要各个设计项目的配合应用，才能达到完美的网站风格设计。对于本项目介绍的校园网站以抚州职业技术学校为例，从色彩、排版、特效三个方面来学习该网站的风格定位。
1．色彩
色彩永远是网页设计中最重要的一环。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。
本项目中采用一种色彩，先选定主色调为橙色，这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。
在页面中借助浅灰色的背景图像，采用了留白艺术给人一个遐想的空间，让人感觉心情舒适、畅快。同时，也对于协调页面的均衡起到相当大的作用。
2．排版
在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。
本项目就是采用骨骼型排版形式，网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。
3．特效
网页中的特效运用适当，会给网页带来画龙点睛的效果。本项目中的动画效果处理的比较好，动感适度。
在本网站中有两种动画效果：一是采用Flash软件制作了网站的广告；二是采用Java Script脚本制作了滚动图片。
三、网站建设方案
1．页面风格创意设计
该项目网站的页面颜色初步拟定采用橙色为基础色，在此色调的基础上进行颜色渐变的展开，通过色彩的运用突出本网站要传达的求知、务实、健康、热烈、庄严等元素，使网站收到良好的创意效果。
2．网站栏目划分
根据我们对用户的了解，特建立以下栏目。
?学校概况 ?新闻中心 ?教学管理 ?多彩校园 ?专业设置
?校报校刊 ?学生工作 ?给我留言 ?视频新闻 ?校园快讯
?校园文化 ?专业简介 ?知识小宝库 ?校园生活 ?学生风采
?职教动态
3．网站建设拓扑图
图1 网站拓扑图
四、网站设计文字报价明细
静态页面设计报价明细如下表：
工 作 项 目 项 目 要 求 页 数 单 价（元） 合 计（元）
首页 1 XXX XXX
子页 不限 XXX XXX
Banner设计 类型为*.gif的动画格式 N XXX XXX
Logo设计 类型为*.gif的图片格式 N XXX XXX
总 计 XXX
服务器空间、域名价格明细如下表：
项 目 名 称 功 能 要 求 个 数 单 价（元） 合 计（元）
国际域名 英文国际域名（*.com） 1 XXX XXX
企业邮局 300M独立邮局空间，最多可分50个用户 -- XXX XXX
合 计 XXX
五、网站效果图
“抚州职业技术学校”网站，包含了学校概况、专业设置、新闻中心、教学管理、多彩校园、职教动态等诸多栏目，体现了校园网站的信息容量大，服务于教师、学生、家长的主导思想，同时也表现出学校坚持为教育教学中心服务，为学生的学习和生活服务，营造良好的人文环境的精神面貌。
参考文献
1.韩宝玉,刘改.《网站前台设计综合实》.电子工业出版社.2010
2.张静兰《.网页设计与制作》.北京理工大学出版社
3.孟庆林 等《.数字媒体—UI设计》.清华大学出版社.2015.11
4.张贵、陈俊荣《网页程序设计》清华大学出版社、2001.
5.刘万辉《网页设计与制作实例教程》人民邮电出版社、2013.02.
