教育网站设计

教育网站设计 主讲 汤跃明 教育网站的设计主要分两个方面 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 确定教育网站的栏目和版块 网站的题材确定后 就要考虑栏目的设置问题 栏目的设置要紧扣网站主题 可以把主题按一定的方法分类并将它们作为网站的主栏目 主题栏目个数在总栏目中要占绝对优势 这样的网站显的专业 主题突出 容易给人留下深刻印象 在制定栏目的时候 要注意以下几点 1 尽可能删除与主题无关的栏目2 尽可能将网站最有价值的内容列在栏目上3 尽可能方便访问者的浏览和查询 网站的整体风格创意设计 网站的整体风格及其创意设计是最希望掌握 也是最难以学习的 它没有一个固定的模式可以参照和模仿 给出一个主题 任何两个人都不可能设计出完全一样的网站 风格 style 是抽象的 是指网站整体形象给浏览者的综合感受 这个 整体形象 包括站点的CI 标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 语气 内容价值 存在意义 站点声誉等等诸多因素 风格是独特的 是站点不同与其他网站的地方 或者色彩 或者技术 或者是交互方式 能让浏览者明确分辨出这是你的网站独有的 风格是有人性的 通过网站的外表 内容 文字 交流可以概括出一个站点的个性 情绪 是温文儒雅 是执著热情 是活泼易变 是放任不羁 象诗词中的 豪放派 和 婉约派 一句话 风格就是与众不同 创意 idea 是网站生存的关键 这里说的创意是指站点的整体创意 因为这个创意而产生这个站点 或者相同的内容 推出的创意不同 创意是传达信息的一种特别方式 创意并不是天才者的灵感 而是思考的结果 根据美国广告学教授詹姆斯的研究 创意思考的过程分五阶段 1 准备期 研究所搜集的资料 根据旧经验 启发新创意 2 孵化期 将资料咀嚼消化 使意识自由发展 任意结合 3 启示期 意识发展并结合 产生创意 4 验证期 将产生的创意讨论修正 5 形成期 设计制作网页 将创意具体化 网站的层次结构和链接结构 网站的链接结构是指页面之间相互链接的拓扑结构 它建立在目录结构基础之上 但可以跨越目录 设计网站的链接结构的目的是 使浏览者能用最少的链接 最快的定位到感兴趣的页面上 一般的 建立网站的链接结构有两种基本方式 1 树状链接结构 一对一 类似DOS的目录结构 首页链接指向一级页面 一级页面链接指向二级页面 立体结构看起来就象蒲公英 这样的链接结构浏览时 一级级进入 一级级退出 优点是条理清晰 访问者明确知道自己在什么位置 不会 迷 路 缺点是浏览效率低 一个栏目下的子页面到另一个栏目下的子页面 必须绕经首页 2 星状链接结构 一对多 类似网络服务器的链接 每个页面相互之间都建立有链接 立体结构象东方明珠电视塔上的钢球 这种链接结构的优点是浏览方便 随时可以到达自己喜欢的页面 缺点是链接太多 容易使浏览者迷路 搞不清自己在什么位置 看了多少内容 这两种基本结构都只是理想方式 在实际的网站设计中 总是将这两种结构混合起来使用 我们希望浏览者既可以方便快速的达到自己需要的页面 又可以清晰的知道自己的位置 所以 首页和一级页面之间用星状链接结构 最好的办法是 一级和二级页面之间用树状链接结构 网页的设计 一 版面布局的原理 版面指的是浏览器看到的完整的一个页面 可以包含框架和层 由于显示器分辨率的不同的原因 同一个页面的大小可能出现640 480像素 800 600像素 1024 768像素等不同尺寸 布局 就是以最适合浏览的方式安排图片和文字在页面上的位置 版面布局的步骤要经过三个步骤 一是设计草案 这属于创造阶段 不讲究细腻工整 不必考虑细节功能 只以粗陋的线条勾画出创意的轮廓即可 二是粗略布局 遵循突出重点 平衡谐调的原则 把需要的功能模块安排到页面上 三是制定方案 将粗略布局精细化 具体化 常用的版面布局形式有 1 结构布局 指页面顶部为横条网站标志和广告条 下方左面为主菜单 右面显示内容的布局 因为菜单条背景较深 整体效果类似英文字母 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等工具 网页素材制作工具包括图象