教育网站设计

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

一、教育网站设计的一些基本原则

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

二、教育网站的总体设计。

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

设计一个教育网站，首先遇到的问题就是如何定位教育网站的主题。主题也就是的网站的题材。教育的涉及面很广，可选择的题材多种多样，在对于题材的选择，要注意以下几个方面

1、主题要小而精。定位要小，内容要精。

2、要有独特性，新颖性，不要你有我有全都有，追求大而全，最后成了什么都没有。一是做自己擅长的，在本领域有优势的，二是发挥网络的优势，做传统媒介做不到的，三是要符合社会需求，四是要做别人没有做过的，或者别人做过的但没有做好的，3、要量力而行，目标不要太高，做自己最擅长，最省时省力省钱的题材，不要去盲目攀比那已有的非常优秀，知名度很高的站点。

定位教育网站CI形象

所谓CI，是借用的广告术语。(CI是英文corporateidentity的缩写)，意思是通过视觉来统一企业的形象。现实生活中的CI策划比比皆是，杰出的例子如：可口可乐、麦当劳、SONY,三菱，全球统一的标志，色彩和产品包装，给人的印象极为深刻。知名的网站，也都十分重视网站的CI形象设计、如雅虎、新浪、搜狐、网易、163等等。

1.设计网站的标志(logo)。logo是站点特色和内涵的集中体现，logo能让用户联想起特定的网站。就象看见了狐狸就想起了搜狐。听见了世界不大，就想起了网大。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。比如：网易是用netease的英文作为标志，新浪用字母sina+眼睛作为标志。2.设计网站的标准色彩。标准色彩指能体现网站型象和延伸内涵的色彩。网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。如所有教育网的绿色调就给人一种安静的感觉，网大的黄色调给人一种活泼向上的感觉。

3.设计网站的标准字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。4.设计网站的宣传标语。也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。如世界不大网大，启迪网创造未来等等。3.确定教育网站的栏目和版块网站的题材确定后，就要考虑栏目的设置问题，栏目的设置要紧扣网站主题，可以把主题按一定的方法分类并将它们作为网站的主栏目，主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。例如启迪网的栏目就依据网站的e-learning主题，划分为幼儿、小学、初中、高中、考研、留学、民办大学、成人高考、外语、计算机、工商管理、行业资质、职业技能等栏目。

在制定栏目的时候，要注意以下几点1、尽可能删除与主题无关的栏目2、尽可能将网站最有价值的内容列在栏目上3、尽可能方便访问者的浏览和查询

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

网站的整体风格创意设计

网站的整体风格及其创意设计是最希望掌握，也是最难以学习的。它没有一个固定的模式可以参照和模仿。给出一个主题，任何两个人都不可能设计出完全一样的网站。风格(style)是抽象的。是指网站整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点声誉等等诸多因素。风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。风格是有人性的。通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。是温文儒雅，是执著热情，是活泼易变,是放任不羁。象诗词中的“豪放派”和“婉约派”。一句话：风格就是与众不同！"创意(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）双向交流栏目。如论坛，留言本，邮件列表等，有调查表明，提供双向交流的站点比简单的留一个“Emailme”的站点更具有亲和力。

（5）版权资料。这是适用于网站内容的版权规定。可以在首页上标示一句简短的版权声明，链接到另—个载有详细使用条款的页面。

（6）联络资料。列出通讯地址、电子邮件地址、公关或营业部门的电话号码等。

（7）网站指南栏目。可以帮助初访者掌握网站的使用并快速找到想要的内容。

（8）资料下载栏目。从方便学习者的角度上看，很多教育信息，最好能让学习者一次性下载脱机浏览，这样可以节约学习者的时间与费用。

（9）还有一些诸如搜索、友情链接、计数器等。

选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。二).设计首页的版面这个和前面的版面设计一样，就不重复了。

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

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

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

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

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

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

教育网站的开发

一、建立教育网站的几种方式有三种方式可以在互联网上建立教育网站：虚拟主机、服务器托管和专线入网。三种形式各有优缺点，适用于不同的用户。虚拟主机：使用特殊的软硬件技术，把一台计算机主机分成一台台“虚拟”的主机，每个虚拟主机都有独立的域名和IP地址（或共享的IP地址），具有完整的INTERNET服务器功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同的服务器程序，互不干扰；而各个用户拥有自己的一部分系统资源（IP地址、文件存储空间、内存、CPU时间等）。在外界看来，每一台虚拟主机和一台独立的主机的表现完全一样。服务器托管：是制将自己的WEB服务器放在能够提供服务器托管业务单位的机房里，实现其与INTERNET连接，从而省去用户自行申请专线接入到INTERNET。能够提供服务器托管的公司一定是通过专线接入INTERNET。这样，INTERNET上的用户就可以通过这条专线访问被托管的服务器。数据通信局提供的服务器托管可以通过10M或100M的网络接口连接INTERNET。被托管的服务器由用户自己维护和管理，在服务器运行稳定后，就可以通过远程登陆来维护了。

专线上网：通过申请相应速率的DDN线路连接到INTERNET上。通过这条专线您的服务器就可以被INTERNET访问了。这种方式，用户的服务器就放在自己的机房中，方便自己维护和管理。但用户要申请数据线路。

从价格角度看，这三种方式的成本投入是依次增加的。虚拟主机最为经济，每月只需支付几百元的租用费，采取远程登录的方式就可以实现对站点的维护和更改，自己的网站就可以被访问，而且速度与浏览互联网中的其他网站没有区别。服务器托管的价格界于虚拟主机和专线入网之间，一般月租金几千元，而专线入网的费用每个月要上万元。教育网站的开发过程

教育网站的开发是一个系统的工程，分成前期策划，中期制作，后期推广三个阶段，前期策划主要包括市场调研、网站总设计，可行性论证、开发团队的组织；中期制作包括、信息的收集处理加工、底层技术的开发、页面的的开发、网站的调试、监评与修正等，当然，网站的制作工作是一个直要做的工作，不是一发布就结束了；三是后期推广阶段，包括网站的宣传推广、网站的具体运作等。具体过程和要做的工作

（1）

相关网站的比较与市场调研。现在网上重复的内容太多，很多信息都是拷来拷去，你有我有全都有，没有自己的特色。进行相关网站的研究，找出当前网站建设中的盲点，做别人没有做过的，或是别人做过却没有做好的，避免重复建设，争创自已的特色。教育网站要生存下去，还要对市场进行充分的调研，确定用户需求，确保网站能拥有固定的用户群。（2）

教育网站的设计。教育网站的设计工作主要有，一、是网站的整体设计，这包括教育网站主题定位，栏目和版块的确定，网站的整体风格创意设计，网站的层次结构和链接结构设计。二、是页面设计，这包括版面的布局，色彩的搭配，字体的设置，导航的策略，交互界面的设计等细致辞的工作；三、网站的推广策略设计。（3）

可行性论证。一般来说，除了个人办的教育网站或是小规模的教育网站，教育网站的建设要投入相当的人力、物力、财力，是一个复杂的系统工程，必须要经过可行性论证，提交的可行性论证报告一般可包括以下内容：1、教育网站的发展现状与趋势分析（国内外）2、相关教育网站对比分析3、教育网站的总体设计4、教育网站建设的现有条件分析5、教育网站建设的投入（人、财、物）6、教育网站建设的组织管理（人、财、物）7、教育网站的开发计划、进度8、教育网站的运营及可持续发展。9、教育网站的宣传推广10、

教育网站应用前景分析11、

教育网站的效益分析（4）

组织开发团队，人员的培训与管理。做一个真正有价值的网站，就要有一个团结、高效、创新的集体，这个集体的成员来自各行各业，有编程人员，有美工人员，文字编辑人员，教育教学专家等等，对他们要进行适当的培训，掌握网站建设方面的知识，以适应建站的工作，另外，集体间的相互学习，共同进步也是十分重要的。对人员的有效的管理是网站成功的一个重要保证。（5）

具体栏目信息内容的收集。这主要是指对教育信息的采集、加工，整理，归类及使用。有的教育信息是现有的，有的教育信息则要专门约稿，专门制作，教育信息的新颖独特是网站成功的一个重要保证。（6）

底层技术开发。1、

网站平台的选择。可以做为教育网站的平台有很多种，如Unix，Linux，NT等等，对于大多数的教育单位来说，可以选用NT平台，它界面友好，容易使用，对管理者的要求不高，而且做为微软的同一个系列产品，掌握起来比较快，Linux也是不错的选择，它代码开放，使用免费，而且发展迅速，对经费不足的教育部门是具有一定的吸引力。2、

底层开发工具的选取。可以选择利用ISAPI、CGI、PHP、ASP、SQL等等，目前来看，对大多数的教育部门，ASP是比较好的选择，学习起来简单，开发效率高，开发难度低，使用ASP，用户可以将HTML页、脚本命令以及ActiveX组件组合在一起，形成交互式的网页或基于Web的强大应用程序。目前，因特网上的大多数应用都可以用ASP来完成，而且ASP应用程序非常容易开发和修改。3、

开发工作。现在开发网站的技术比较成熟，大部分的网站开发可自行完成，当然，部分难度很大的底层技术在市场上购买，另外，对很多教育部门来说，与网络公司联合开发制作教育网站不失为一个好的方案，这样可以集中全力在网站的教育内容上，而不必考虑太多的技术细节。（7）

网页制作与开发1、

网页开发工具的选择，包括网页制作工具、素材制作工具的选择。页面制作工具有很多种，对于初学者，MicrosoftFrontPage，Netscape编辑器，AdobePagemill，ClarisHomePage等工具比较适合，对于专业网站的设计，可选用DreamWeaver，HotDogProfessional，HomeSite，HotMetalPro等工具，网页素材制作工具包括图象制作处理工具，动画制