网页设计维护

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
避免一味使用层次式结构
– 访问者不应该每次都要至少单击四、五次才能到达 某一网页,这就是搜索引擎之所以流行的原因
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
站点结构与网页之间互相链接的方式有关
– 线性站点结构:在该结构中,你迫使访问者 单击一个链接进入另一个网页,而在那里仍 然没有选择余地
以前面所讲的“新闻”网页为例,是把 所有信息放在一个网页中呢,还是将其 分成多个页面?如何决定?
需要考虑的一些因素有:
– 访问者希望马上能看到的信息是什么?不 要根据材料的长度来判断,而容 2-2
– 访问者是否会打印这些信息?不要把他们可 能要打印的信息进行划分。比如一个说明书、 一个有关软件包的评论文章
可导航性 4-4
站点映像:又称网站地图,迅速给用户 提供一个关于整个网站的概貌
站点映像不应包含太多的细节:
– 会增加加载的时间 – 有可能使文本变小,从而造成阅读困难
14
可导航性 5-5
站点下拉列表:访问者只需点击一下就 可以到达任何地方。列表长度视你的要 求而定
站点搜索:可以在每个网页上都有搜索 域,也可以链接到一个独立的搜索网页。 如果访问者经验丰富,可使用前者;反 之,可以使用后者。不管哪种情况,你 都应该使用一个单独的网页来显示搜索 结果
你可以使用空白引起人们对标题、题目 甚至列表的注意。为什么一个带加重号 的列表能引人注目呢?正是空白产生了 这种效果
21
最佳的网页长度
不要老想着让整个网页正好放满一屏而 不需要滚动,真正应该做的是使你所做 的看起来是完整的
应该尽力避免水平滚屏,不要让访问者 跨页查看内容
22
设计一个有效的欢迎网页
导航栏使用最简单,它可以是文本、表格中的 文本或图形映像。导航栏应该出现在每个网页 的相同位置上。很多网站使用框架以使导航栏 或导航按钮静止不动,而内容和链接可以在另 一个框架中进出
11
可导航性 4-2
文本导航栏看起来如下:
– [Home] [Support] [Service] – 方括号中的每个项目都是连到站点中相应
6
网页分类
终结网页(terminal page):是指那 些主要功能是提供内容(而不是链接) 的网页。这是访问者想最终得到的东西: 内容
网站一般是由欢迎网页、链接网页和终 结网页组成。我们可以把欢迎网页看作 树的根,把链接网页看作树干和树枝, 而将终结网页看作树叶
7
不要陷入诱惑
当你开始考虑图形、字体、颜色、动画等因素时, 很可能把网页的主体思想给忽略了。这时就应该 协调好这两方面的关系
– 减少图形文件的大小。有两种方法:
减小文件的尺寸(宽度和高度) 减小图像的位深
– 不要使用背景图形。如果必须使用的话,则 可以使用一个很小的背景图形,将其进行平 铺
– 能使用文本的地方尽量使用文本
20
空白的有效使用
空白在网页设计中起着非常重要的作用, 它极大地改善了网页的质量。空白能起 到调节、缓和的作用
有不利的一面,无论是对网管人员还是 访问者都是如此
26
多页站点的优点
对访问者来说:
– 不必阅读站点上的所有内容就能够(理论 上)找到他们想要的内容
– 可供选择的内容更多 – 访问者所需要的信息都在站点上
对网管来说:
– 容易管理 – 容易更新--不同网页的更新频率不同
27
多页站点的缺点
对访问者来说:
相关文档
最新文档