教育类网站UI的设计与制作

教育类网站UI的设计与制作

 教育类网站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.
 

暂时没有评论

真实

多重认证,精挑细选的优质资源 优质老师。

安全

诚实交易,诚信为本。

保密

所有交易信息,都为您保密。

专业

10年专业经验,10年来帮助无数学子。