网页设计维护

避免一味使用层次式结构
– 访问者不应该每次都要至少单击四、五次才能到达 某一网页，这就是搜索引擎之所以流行的原因
38
站点结构 5-4
完全杂乱型结构：
– 基本思想是：组织结构并不重要，访问者 只是在站点中游逛，并不特意寻找什么。 他们可以点击他们看到的任何链接，但不 能保证一定能够回到曾访问过的某个网页
区域的超链接
如果将上述各个超链接分别用图形按钮 来替代的话，就可以实现导航按钮
12
可导航性 4-3
制作一个内容表格（Table Of Content，TOC），用户只需点击一下 就可以浏览到不同的内容。这样，既可 以节省时间，又可以节省屏幕空间
TOC中的网页名称最好与网页的标题一 致
13
欢迎网页：访问者直接进入你的站点时， 他们看到的第一张网页就是欢迎网页
欢迎网页上应该放什么呢？只要能够表 达是谁建立的网站，只要使标题能够表 达内容的大意就足够了
23
醒目的屏幕
醒目的屏幕：就是在欢迎网页之前出现 的网页，也叫做入口通道。在醒目的屏 幕上只有一个链接，它的作用就是使你 进入欢迎网页
– 使用线性结构的关键是：不要将它应用到 整个站点
37
站点结构 5-3
层次式站点结构：
– 基本思想是：将内容按某种标准分组，然后提供组 成员的列表。一个组中的每个项目也可以是一个组。 前面所有的例子都采用的是层次结构
– 它是组织站点的一种很有效的方式，它的结构图容 易画，也使小组开发和维护更容易
17
设计原则 3-1
如果你准备设计一个商用网站，那么最好请一 位专家。对于一定要坚持自己完成网页布局的 人，需要记住以下11点：
– 确定网站的基本设计（外观和感觉等），其它所有 的东西都要建立在它的基础之上
– 确定一种基本网页结构并始终坚持它。观察任何杂 志，分析其中文字和图形是如何排列的。为了一致 性，应该使文本和图形之间的水平间距保持相同的 像素数－－至少5个像素
– 完全杂乱型结构：在该结构中，网页之间互 相链接，单这些链接没有任何组织性
– 层次式站点结构：介于上述两者之间的结构
36
站点结构 5-2
线性站点结构：
– 它假设每个人都希望看到所有的东西。有 时，我们的线性结构可能对站点的某一部 分合适。假如有一个虚拟博物馆展览站点， 在大多数博物馆展览中，材料因为某种原 因是按照特殊的顺序安排的，对这一部分 内容可以使用线性结构
面中有太多不同的内容，就应该采取下面2种措 施：
– 除非该页是终结网页，否则你就应该把相关材料组织 在一起，然后再链接到其上。尽可能地将链接分组， 并把网页链接分组的列表放在网页的顶部
– 确定哪些内容是重要的，把不必要的信息去掉
颜色、色调、图形及文本风格和大小都对表现主 题有很大作用，它们会给访问者留下某种印象 （这是你无法阻止的）。这方面没有捷径可走
– 不要使用这种结构，它只适用于非常小的 站点。如果访问者是那些可以免费上网而 又不愿意学习的大学生，这种结构还可能 工作，否则它就会失败
39
站点结构 5-5
建立结构合理的站点：
– 访问者只要单击一两次就能找到他们所要 的网页，而且他们可以重新找到这个内容
中关村国际软件人才教育联盟 第三讲
网页设计维护
1
目标
网页设计目标 网页组成及内容 网页设计原则 划分站点 划分内容 站点结构 维护多页站点
2
网页设计目标
网页设计必须着重考虑访问者会对你的 网站有什么感觉－－它应该实现一致性、 可预测性、可导航性，并且在体现一个 明确目的的基础上具有良好的视觉效果 和交互性
FAQ
资金
与我们联 系
财经报道
投资者信 息
白皮书
32
划分站点 5-5
按照访问者（客户、新闻界、投资人、程序员及其
它）的类型：
欢迎网页
顾客
新闻界
寻找工作 者
投资人
程序员
产品列表 购买信息 在线购物 升级信息 优秀客户
工作列表
财经报道
投资者信 息
组织图表
奖励评论
特征列表
33
划分内容 2-1
确定了站点的结构之后，还必须将每一 部分内容进一步进行划分
– 仔细考虑各种技巧（动画、字幕等）。不要把 所有技巧都拿出来放在一个网页上
– 尽量少使用不同的字体。推荐最多使用两种字 体－－一种用于标题和次标题，另一种用于主 体部分
19
设计原则 3-3
– 减少网页中图形文件的数量。首先确定网页 中需要什么，然后再考虑在不使用图形的情 况下如何表达你想要表达的信息
销售 产品列表 购买信息 在线购物
市场
技术支持
特征列表 升级信息 优秀客户 奖励评论 新闻稿件
FAQ 与我们联
系
超链接
资金
财经报道 投资者信
息
科研 白皮书
研发信息
31
划分站点 5-4
按照内容的类型：
欢迎网页
产品信息 及定购
产品列表 购买信息 在线购物 升级信息 优秀客户 奖励评论 特征列表
发布网页
– 组织或个人的徽标 – 联系方式 – 导航栏或导航按钮 – 连到内容表格的链接 – 连到站点搜索网页的链接 – 连到站点映像图的链接（网站地图） – 地址下拉列表 – 内容（如果是终结网页的话） – 连到一组网页的链接（如果是一个链接页面的话）
5
把设计重点放在主题上
主题：这一页能够表达什么意思 网页的主题应该简洁明了。如果你发现在一个页
– 导航会比较混乱 – 加载时间较长 – 打印将更复杂－－如果内容分在几个页面中
对网管来说：
– 不对内容进行划分 – 维护需要更有组织性－－文件数量众多
28
划分站点 5-1
对内容进行划分的方式有3种：
– 按照内容的来源 – 按照内容的类型 – 按照访问者类型
按照内容的来源
– 如果你所在的组织很大，拥有很多部门， 那么你就可以按照内容来自哪个部门对内 容进行划分
3
网页的组成
第一件事就是要确定每个网页所要传达 的信息。每个页面都将以某种方式直接 或间接地实现站点的总体目标
例如：一个产品列表网页：
产品清单
保持联系
即时反馈
批发价格
4
网页内容
总的来说，所有网页都应包含下列特定内容：
– 发布网页的组织或个人的名字 – 进入欢迎网页的途径
其它可选的项目：
为了能够把精力集中到主题上，在定下设计方案 后就应该坚持它，不要回过头来乱做改动
抵制不断地向站点中加入好看的东西这种诱惑的 最好办法就是：把网站的创建工作分配给两个人 或者两个小组
8
一致性
整个站点应该确保有相同的外观。不仅 仅是指图片的一致，而且是指细节上的 一致
样式表可以帮助你进行这项工作－－比 如，你可以保证所有段落都有相同的缩 进，而且所有段落的上方和下方都有相 同数量的空白
– 确定自己的调色板并始终使用它。如果颜色是藏青 色、紫红色和白色，那么链接就不应该使用绿色
18
设计原则 3-2
– 要有目标。很多站点会犯这样的错误－－就是 为访问者提供成百上千个与其它站点的链接， 这就使访问者很难再回到你的站点。如果你要 链接到其它站点，应该在一个新的窗口中打开
– 人们习惯于从左到右、从上到下阅读。最好把 最重要的部分放在网页的左上角
– 这种方法中，web站点的组织结构在一定 程度上反映了单位的组织结构
29
划分站点 5-2
某个单位的组织结构图：
总经理
销售和市场
顾客服务 技术支持 资金
生产
销售
工资
市场
会计
科研
30
划分站点 5-3
针对上述组织结构，根据部门的职能设计以下站点结构 （一个方框并不意味着只有一个网页）：
欢迎网页
使用它的原因是为了引起访问者的高度 注意，但可能事与愿违（图形加载太慢 引起反感）
一定要确保在任何分辨率下不会滚屏
24
对网页进行测试
要在你所能想到的、访问者可能会使用 的所有浏览器中、所有平台上、所有屏 幕分辨率下进行测试。不能假设一切都 是相同的
25
创建多页站点
WEB站点都具有多个网页 将内容划分为多页既有有利的一面，也
9
可预测性
没有人真正喜欢惊奇，网页中的元素应 该按照访问者期待的那样显示出来－－ 比如，不要将文本的样式定义为兰色带 下划线，因为这与访问者心目中的链接 样式相同，而它又不能链接
10
可导航性 4-1
导航：使站点访问者能方便快捷地到达他想去 的地方
常用的导航控件有：导航栏、导航按钮、内容 表格、站点搜索、站点映像
15
交互性
访问者希望所有的网页都具有一定程度 的交互性。对于链接网页和欢迎网页， 这正是它们要做的工作。而对于内容网 页，访问者也希望能够与站点进行交互
– 可以使用超链接和图像映像与你的网站内 部或其它站点进行链接，这样就可以提供 一定的交互能力
– 可以使用表单
16
速度
你应该仔细考虑你希望访问者下载的数 据量。当你使用许多非常大的图形（充 满整个屏幕的背景图、很大的图像映像、 文本的图形表示）来设计网页时，你其 实是在告诉访问者：你不尊重他们的时 间
– 在你为访问者提供他们所需要的信息同时， 考虑有没有这样的地方：访问者可能希望从 这里到达多个地方。如果有，就结束本页， 让访问者选择要访问的地方；如果没有，就 继续本页
– 不要总想着内容恰好充满一屏，访问者并不 介意在阅读时上下滚屏
35
站点结构 5-1
站点结构与网页之间互相链接的方式有关