一个好的教育网站的设计

来源:百度文库 编辑:神马文学网 时间:2024/05/02 05:46:08

一个好的教育网站的设计主要分两个方面: 

1、教育网站的总体设计,包括网站的主题,整体形象,整体风格创意设计等多方面的工作;
2、页面设计,可分为一般页面的设计和首页设计,主要涉及到版面布局,色彩搭配等问题,其中首页的设计在页面设计是最至关重要的。  

教育网站设计的基本原则  

1、要立足于教育,为创新教育、素质教育服务
2、要有创新精神与独特的创意,要有在互联网中生存下去的支点。
3、整体架构要模块化,清晰化,易于使用。
4、网页浏览速度快,更新快,交互性强,导航智能化
5、网页设计简洁明快,注重实用性。
6、网站内容要精,及时更新、便于阅读。
7、网站立足于长期发展,具有开放性,可拓展性,易于维护更新。   

教育网站的总体设计。  

1.定位网站主题和名称;
2.定位网站形象;
3.确定栏目和版块;
4.网站的整体风格创意设计
5.网站的层次结构和链接结构  

定位教育网站主题和名称  

1.设计网站的标志。标志是站点特色和内涵的集中体现,标志能让用户联想起特定 的网站。就象看见了狐狸就想起了搜狐。听见了世界不大,就想起了网大。标志可以是中文,英文字母,可以是符号,图案,可以是动物或者人物等等。比如:网易 是用netease的英文作为标志,新浪用字母sina+眼睛作为标志。   

 2.设计网站的标准色彩。标准色彩指能体现网站型象和延伸内涵的色 彩。网站给人的第一印象来自视觉冲击,确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。如所有教育网的绿 色调就给人一种安静的感觉,网大的黄色调给人一种活泼向上的感觉。  

3.设计网站的标准字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,可以根据需要选择一些特别字体。

4.设计网站的宣传标语。也可以说是网站的精神,网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。如世界不大网大,启迪网创造未来等等。 

确定教育网站的栏目和版块 

网站的题材确定后,就要考虑栏目的设置问题,栏目的设置要紧扣网站主题,可以把主题按一定的方法分类并将它们作为网站的主栏目,主题栏目个数在总栏目中要占绝对优势,这样的网站显的专业,主题突出,容易给人留下深刻印象。 

在制定栏目的时候,要注意以下几点

1、尽可能删除与主题无关的栏目

2、可能将网站最有价值的内容列在栏目上

3、尽可能方便访问者的浏览和查询  

版块比栏目的概念要大一些,每个版块都有自己的栏目。例如,k12的站点分新闻 中心,学生频道、教师频道、家长频道、教育产品、虚拟社区等几大版块,每个版块下面又有自己的主栏目。设置版块时要注意1.各版块要有相对独立性。2.各 版块要有相互关联。3.版块的内容要围绕站点主题。

网站的整体风格创意设计

网站的整体风格及其创意设计是最希望掌握,也是最难以学习的。它没有一个固定的模式可以参照和模仿。给出一个主题,任何两个人都不可能设计出完全一样的网站。  

创意(idea)是网站生存的关键。这里说的创意是指站点的整体创意,因为这个创意而产生这个站点,或者相同的内容,推出的创意不同。  

 创意是传达信息的一种特别方式。创意并不是天才者的灵感,而是思考的结果。根据美国广告学教授詹姆斯的研究,创意思考的过程分五阶段:

1.准备期--研究所搜集的资料,根据旧经验,启发新创意;

2.孵化期--将资料咀嚼消化,使意识自由发展,任意结合;

3.启示期--意识发展并结合,产生创意;

4.验证期--将产生的创意讨论修正;

5.形成期--设计制作网页,将创意具体化

网站的层次结构和链接结构

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。设计网站的链接结构的目的是:使浏览者能用最少的链接,最快的定位到感兴趣的页面上。  

建立网站的链接结构有两种基本方式:

1.树状链接结构(一对一)。类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。 

2.星状链接结构(一对多)。类似网络服务器的链接,每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。 

这两种基本结构都只是理想方式,在实际的网站设计中,总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面,又可以清晰的知道自己的位置。所以,首页和一级页面之间用星状链接结构,最好的办法是:一级和二级页面之间用树状链接结构。

(一)版面布局的原理

版面指的是浏览器看到的完整的一个页面(可以包含框架和层)。由于显示器分辨率的不同的原因,同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。布局,就是以最适合浏览的方式安排图片和文字在页面上的位置。 

版面布局的步骤要经过三个步骤,一是设计草案,这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。二是粗略布局,遵循突出重点、平衡谐调的原则,把需要的功能模块安排到页面上。三是制定方案,将粗略布局精细化,具体化。

常用的版面布局形式有:

(1)“T”结构布局。指页面顶部为横条网站标志+广告条,下方左面为主菜单, 右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。优点是页 面结构清晰,主次分明。容易掌握。缺点是规矩呆板,如果细节色彩上不注意,很容易让人看之无味。

(2)“口”型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大,缺点是页面拥挤,不够灵活。

(3)“三”型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。   

(4)对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。

(5)POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。优点显而易见:漂亮吸引人。缺点就是速度慢。 

(二)网页色彩的搭配

网页的色彩是树立网站形象的关键之一,网页的背景,文字,图标,边框,超链接等 等都要用到色彩。不同的颜色会给浏览者不同的心理感受,如红色,能使人产生冲动,愤怒,热情,活力的感觉;绿色,显得和睦,宁静,健康,安全;黄色,具有 快乐,希望,智慧和轻快的个性。每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽 宁,阴深。合理的搭配色彩,能更好的表现主题,吸引用户的注意力。

网页色彩搭配的原理是;

(1)色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。
(2)色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。
(3)色彩的合适性。色彩要和网站的主题和表现内容相吻合。
(4)色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和网页的内涵相关联。
 

网页色彩搭配中要注意不要将所有颜色都用到,尽量控制在三种色彩以内,背景和前文的对比要大,突出主要文字内容,常见配色方法有。
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。

(三)网页字体的设计
字体(Font)的设置相对来说比较简单,下面是网页中字体一般设计原则,
1.字体不宜过多,不要使用超过3种以上的字体。字体太多则显得杂乱,没有主题。
2.字号要合适,字号过大,会浪费版面空间,字号过小,又不能吸引用户注意力,还容易使眼睛疲劳。
3.不同内容的字号要有所区别,原则上标题的字体较正文大,颜色也应有所区别。     
4.特殊的字体要转成图象。

(四)网页中表格的运用

表格(table)是页面的重要元素,是页面排版的主要手段。但由于浏览器在读 取网页html原代码时,是读完整一个table才将表格中的内容显示在屏幕上,而且显示也有优先级,先读到的先显示。如果一个大表格中含有多个子表格, 必须等大表格读完,才能将子表格一起显示出来。有些站点等待很久却什么也出不来,按“停止”按钮却一下显示出页面,就是这个原因。

因此,我们在设计页面表格的时候,应该做到:
1.整个页面不要都套在一个表格里,尽量拆分成多个表格;
2.单一表格的结构尽量整齐;
3.表格嵌套层次尽量要少,越复杂,嵌套层次越多的表格下载速度越慢。

首页的设计

在全面考虑好网站的栏目,链接结构和整体风格之后,就可以正式动手制作首页。这有三项工作要做。  
1、确定首页的功能模块
2、设计首页的版面
3、处理技术上的细节 

一).确定首页的功能模块

首页的内容模块是指需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:

(1)主菜单。包括网站的主要栏目。
(2)广告条(banner)。这个是网站必不可少的。
(3)标题。标题必须清楚无误地标示你的网站。标题可以是名称、标语徽号或图像。
(4)双向交流栏目。如论坛,留言本,邮件列表等,有调查表明,提供双向交流的站点比简单的留一个“Email me”的站点更具有亲和力。

处理技术上的细节

网页制作上有许多技术细节,诸如如何适应不同的浏览器,在不同的不同分辨率下保持不变形,如何减速少垃圾代码等等,首页相比其它页面来说,技术上要求更加严格,不能出错。

首页设计要注意的几个问题

1、简洁明快。首页是吸引用户注意的关键所在,设计上要以清楚醒目为上,让人一目了然。不要过于繁杂,堆砌太多的细节,

2、浏览速度快。一般来说,首页的下载时间超过十至十五秒,很多用户就会失去耐心,提高浏览速度,就要尽可能的减小首页的数据量,少用图像,特别是大的图像。另外要尽量减少表格嵌套,不要把所有内容都放在一个大表里。 

3、使首页易于漫游。首页的其实就是一张大的导航图,设计上要尽量使浏览更快捷更方便。能让用户迅速定位到感兴趣的页面上。

4、保持新鲜感。如果首页从不改变,用户很快会厌倦。应时刻确保主页提供的是最新信息。可以在首页上预告即将有新资料推出,可吸引用户再来测览,或是在页头以大字标题宣布新消息,或是定期改变主页上的图像、主页的式样。


网页制作与开发 

1、网页开发工具的选择,包括网页制作工具、素材制作工具的选择。页面制作工具有很多种,对于初学者,Microsoft FrontPage,Netscape编辑器,Adobe Pagemill, Claris Home Page等工具比较适合,对于专业网站的设计,可选用DreamWeaver,HotDog Professional,HomeSite,HotMetal Pro等工具,网页素材制作工具包括图象制作处理工具,动画制作处理工具,声音制作处理工具,视频制作处理工具等,这类工具在有很多网站作了专门的归类整理。    

2、网页的制作。网页制作是网站开发中至关重要的一环,网页制作的好坏,直接影响到网站的成败。在网页制作中要注意以下问题

一、控制页面的数据量,提高用户的浏览速度。

二、分解大型表格,加快页面显示。

三、图象的运用,页面要做的生动,不可避免的要用到图象,图象处理的好坏,对网页的效果影响很大,可以从心下几点来考虑,1、选取择合适的图象格式,2、少用图片来叙述内容,3、尽量减少图象的数目,4、在HTML代码中,标记图像的显示高度和宽度,5、尽可能重用图象。

四、能用HTML和JavaScript实现的,最好不用Java Applet和ActiveX来做。五、少用背景音乐。 

网站的调试

这一阶段主要是测试网站的稳定性,整体功能,检查可能存在的教学上、技术上的错误。