kl800.com省心范文网

网页设计维护_图文

中关村国际软件人才教育联盟 第三讲

网页设计维护
1

中关村国际软件人才教育联盟

目标
? ? ? ? ? ?

?

网页设计目标 网页组成及内容 网页设计原则 划分站点 划分内容 站点结构 维护多页站点
2

中关村国际软件人才教育联盟

网页设计目标
?

网页设计必须着重考虑访问者会对你的 网站有什么感觉--它应该实现一致性、 可预测性、可导航性,并且在体现一个 明确目的的基础上具有良好的视觉效果 和交互性

3

中关村国际软件人才教育联盟

网页的组成
?

?

第一件事就是要确定每个网页所要传达 的信息。每个页面都将以某种方式直接 或间接地实现站点的总体目标 例如:一个产品列表网页:
产品清单

保持联系

即时反馈

批发价格

4

中关村国际软件人才教育联盟

网页内容
?

总的来说,所有网页都应包含下列特定内容:
– 发布网页的组织或个人的名字 – 进入欢迎网页的途径

?

其它可选的项目:
– – – – – – – – – 组织或个人的徽标 联系方式 导航栏或导航按钮 连到内容表格的链接 连到站点搜索网页的链接 连到站点映像图的链接(网站地图) 地址下拉列表 内容(如果是终结网页的话) 连到一组网页的链接(如果是一个链接页面的话)
5

中关村国际软件人才教育联盟

把设计重点放在主题上
? ?

主题:这一页能够表达什么意思 网页的主题应该简洁明了。如果你发现在一个页 面中有太多不同的内容,就应该采取下面2种措 施:
– 除非该页是终结网页,否则你就应该把相关材料组织 在一起,然后再链接到其上。尽可能地将链接分组, 并把网页链接分组的列表放在网页的顶部 – 确定哪些内容是重要的,把不必要的信息去掉

?

颜色、色调、图形及文本风格和大小都对表现主 题有很大作用,它们会给访问者留下某种印象 (这是你无法阻止的)。这方面没有捷径可走
6

中关村国际软件人才教育联盟

网页分类
?

?

终结网页(terminal page):是指那 些主要功能是提供内容(而不是链接) 的网页。这是访问者想最终得到的东西: 内容 网站一般是由欢迎网页、链接网页和终 结网页组成。我们可以把欢迎网页看作 树的根,把链接网页看作树干和树枝, 而将终结网页看作树叶
7

中关村国际软件人才教育联盟

不要陷入诱惑
?

?

?

当你开始考虑图形、字体、颜色、动画等因素时, 很可能把网页的主体思想给忽略了。这时就应该 协调好这两方面的关系 为了能够把精力集中到主题上,在定下设计方案 后就应该坚持它,不要回过头来乱做改动 抵制不断地向站点中加入好看的东西这种诱惑的 最好办法就是:把网站的创建工作分配给两个人 或者两个小组

8

中关村国际软件人才教育联盟

一致性
?

?

整个站点应该确保有相同的外观。不仅 仅是指图片的一致,而且是指细节上的 一致 样式表可以帮助你进行这项工作--比 如,你可以保证所有段落都有相同的缩 进,而且所有段落的上方和下方都有相 同数量的空白

9

中关村国际软件人才教育联盟

可预测性
?

没有人真正喜欢惊奇,网页中的元素应 该按照访问者期待的那样显示出来-- 比如,不要将文本的样式定义为兰色带 下划线,因为这与访问者心目中的链接 样式相同,而它又不能链接

10

中关村国际软件人才教育联盟

可导航性 4-1
?

?

?

导航:使站点访问者能方便快捷地到达他想去 的地方 常用的导航控件有:导航栏、导航按钮、内容 表格、站点搜索、站点映像 导航栏使用最简单,它可以是文本、表格中的 文本或图形映像。导航栏应该出现在每个网页 的相同位置上。很多网站使用框架以使导航栏 或导航按钮静止不动,而内容和链接可以在另 一个框架中进出
11

中关村国际软件人才教育联盟

可导航性 4-2
?

文本导航栏看起来如下:
– [Home] [Support] [Service] – 方括号中的每个项目都是连到站点中相应 区域的超链接

?

如果将上述各个超链接分别用图形按钮 来替代的话,就可以实现导航按钮

12

中关村国际软件人才教育联盟

可导航性 4-3
?

?

制作一个内容表格(Table Of Content,TOC),用户只需点击一下 就可以浏览到不同的内容。这样,既可 以节省时间,又可以节省屏幕空间 TOC中的网页名称最好与网页的标题一 致

13

中关村国际软件人才教育联盟

可导航性 4-4
?

?

站点映像:又称网站地图,迅速给用户 提供一个关于整个网站的概貌 站点映像不应包含太多的细节:
– 会增加加载的时间 – 有可能使文本变小,从而造成阅读困难

14

中关村国际软件人才教育联盟

可导航性 5-5
?

?

站点下拉列表:访问者只需点击一下就 可以到达任何地方。列表长度视你的要 求而定 站点搜索:可以在每个网页上都有搜索 域,也可以链接到一个独立的搜索网页。 如果访问者经验丰富,可使用前者;反 之,可以使用后者。不管哪种情况,你 都应该使用一个单独的网页来显示搜索 结果
15

中关村国际软件人才教育联盟

交互性
?

访问者希望所有的网页都具有一定程度 的交互性。对于链接网页和欢迎网页, 这正是它们要做的工作。而对于内容网 页,访问者也希望能够与站点进行交互
– 可以使用超链接和图像映像与你的网站内 部或其它站点进行链接,这样就可以提供 一定的交互能力 – 可以使用表单
16

中关村国际软件人才教育联盟

速度
?

你应该仔细考虑你希望访问者下载的数 据量。当你使用许多非常大的图形(充 满整个屏幕的背景图、很大的图像映像、 文本的图形表示)来设计网页时,你其 实是在告诉访问者:你不尊重他们的时 间

17

中关村国际软件人才教育联盟

设计原则 3-1
?

如果你准备设计一个商用网站,那么最好请一 位专家。对于一定要坚持自己完成网页布局的 人,需要记住以下11点:
– 确定网站的基本设计(外观和感觉等),其它所有 的东西都要建立在它的基础之上 – 确定一种基本网页结构并始终坚持它。观察任何杂 志,分析其中文字和图形是如何排列的。为了一致 性,应该使文本和图形之间的水平间距保持相同的 像素数--至少5个像素 – 确定自己的调色板并始终使用它。如果颜色是藏青 色、紫红色和白色,那么链接就不应该使用绿色
18

中关村国际软件人才教育联盟

设计原则 3-2
– 要有目标。很多站点会犯这样的错误--就是 为访问者提供成百上千个与其它站点的链接, 这就使访问者很难再回到你的站点。如果你要 链接到其它站点,应该在一个新的窗口中打开 – 人们习惯于从左到右、从上到下阅读。最好把 最重要的部分放在网页的左上角 – 仔细考虑各种技巧(动画、字幕等)。不要把 所有技巧都拿出来放在一个网页上 – 尽量少使用不同的字体。推荐最多使用两种字 体--一种用于标题和次标题,另一种用于主 体部分
19

中关村国际软件人才教育联盟

设计原则 3-3
– 减少网页中图形文件的数量。首先确定网页 中需要什么,然后再考虑在不使用图形的情 况下如何表达你想要表达的信息 – 减少图形文件的大小。有两种方法:
减小文件的尺寸(宽度和高度) ? 减小图像的位深
?

– 不要使用背景图形。如果必须使用的话,则 可以使用一个很小的背景图形,将其进行平 铺 – 能使用文本的地方尽量使用文本
20

中关村国际软件人才教育联盟

空白的有效使用
?

?

空白在网页设计中起着非常重要的作用, 它极大地改善了网页的质量。空白能起 到调节、缓和的作用 你可以使用空白引起人们对标题、题目 甚至列表的注意。为什么一个带加重号 的列表能引人注目呢?正是空白产生了 这种效果

21

中关村国际软件人才教育联盟

最佳的网页长度
?

?

不要老想着让整个网页正好放满一屏而 不需要滚动,真正应该做的是使你所做 的看起来是完整的 应该尽力避免水平滚屏,不要让访问者 跨页查看内容

22

中关村国际软件人才教育联盟

设计一个有效的欢迎网页
?

?

欢迎网页:访问者直接进入你的站点时, 他们看到的第一张网页就是欢迎网页 欢迎网页上应该放什么呢?只要能够表 达是谁建立的网站,只要使标题能够表 达内容的大意就足够了

23

中关村国际软件人才教育联盟

醒目的屏幕
?

?

?

醒目的屏幕:就是在欢迎网页之前出现 的网页,也叫做入口通道。在醒目的屏 幕上只有一个链接,它的作用就是使你 进入欢迎网页 使用它的原因是为了引起访问者的高度 注意,但可能事与愿违(图形加载太慢 引起反感) 一定要确保在任何分辨率下不会滚屏
24

中关村国际软件人才教育联盟

对网页进行测试
?

要在你所能想到的、访问者可能会使用 的所有浏览器中、所有平台上、所有屏 幕分辨率下进行测试。不能假设一切都 是相同的

25

中关村国际软件人才教育联盟

创建多页站点
? ?

WEB站点都具有多个网页 将内容划分为多页既有有利的一面,也 有不利的一面,无论是对网管人员还是 访问者都是如此

26

中关村国际软件人才教育联盟

多页站点的优点
?

对访问者来说:
– 不必阅读站点上的所有内容就能够(理论 上)找到他们想要的内容 – 可供选择的内容更多 – 访问者所需要的信息都在站点上

?

对网管来说:
– 容易管理 – 容易更新--不同网页的更新频率不同
27

中关村国际软件人才教育联盟

多页站点的缺点
?

对访问者来说:
– 导航会比较混乱 – 加载时间较长 – 打印将更复杂--如果内容分在几个页面中

?

对网管来说:
– 不对内容进行划分 – 维护需要更有组织性--文件数量众多

28

中关村国际软件人才教育联盟

划分站点 5-1
?

对内容进行划分的方式有3种:
– 按照内容的来源 – 按照内容的类型 – 按照访问者类型

?

按照内容的来源
– 如果你所在的组织很大,拥有很多部门, 那么你就可以按照内容来自哪个部门对内 容进行划分 – 这种方法中,web站点的组织结构在一定 程度上反映了单位的组织结构
29

中关村国际软件人才教育联盟

划分站点 5-2
?

某个单位的组织结构图:
总经理

销售和市场 销售 市场

顾客服务

技术支持

资金 工资 会计

生产

科研

30

中关村国际软件人才教育联盟

划分站点 5-3
?

针对上述组织结构,根据部门的职能设计以下站点结构 (一个方框并不意味着只有一个网页):
欢迎网页

销售

市场

技术支持 FAQ 与我们联 系

资金

科研

产品列表 购买信息 在线购物

特征列表 升级信息 优秀客户 奖励评论 新闻稿件

财经报道 投资者信 息

白皮书 研发信息

超链接
31

中关村国际软件人才教育联盟

划分站点 5-4
?

按照内容的类型:
欢迎网页

产品信息 及定购 产品列表 购买信息 在线购物 升级信息 优秀客户 奖励评论 特征列表

发布网页

FAQ

资金

与我们联 系

白皮书

财经报道 投资者信 息

32

中关村国际软件人才教育联盟

划分站点 5-5
?

按照访问者(客户、新闻界、投资人、程序员及其 它)的类型: 欢迎网页
顾客 新闻界 寻找工作 者 工作列表 投资人 程序员

产品列表 购买信息 在线购物 升级信息 优秀客户 奖励评论 特征列表

财经报道 投资者信 息 组织图表

33

中关村国际软件人才教育联盟

划分内容 2-1
?

?

?

确定了站点的结构之后,还必须将每一 部分内容进一步进行划分 以前面所讲的“新闻”网页为例,是把 所有信息放在一个网页中呢,还是将其 分成多个页面?如何决定? 需要考虑的一些因素有:
– 访问者希望马上能看到的信息是什么?不 要根据材料的长度来判断,而应该考虑材 料的使用
34

中关村国际软件人才教育联盟

划分内容 2-2
– 访问者是否会打印这些信息?不要把他们可 能要打印的信息进行划分。比如一个说明书、 一个有关软件包的评论文章 – 在你为访问者提供他们所需要的信息同时, 考虑有没有这样的地方:访问者可能希望从 这里到达多个地方。如果有,就结束本页, 让访问者选择要访问的地方;如果没有,就 继续本页 – 不要总想着内容恰好充满一屏,访问者并不 介意在阅读时上下滚屏
35

中关村国际软件人才教育联盟

站点结构 5-1
?

站点结构与网页之间互相链接的方式有关
– 线性站点结构:在该结构中,你迫使访问者 单击一个链接进入另一个网页,而在那里仍 然没有选择余地 – 完全杂乱型结构:在该结构中,网页之间互 相链接,单这些链接没有任何组织性 – 层次式站点结构:介于上述两者之间的结构

36

中关村国际软件人才教育联盟

站点结构 5-2
?

线性站点结构:
– 它假设每个人都希望看到所有的东西。有 时,我们的线性结构可能对站点的某一部 分合适。假如有一个虚拟博物馆展览站点, 在大多数博物馆展览中,材料因为某种原 因是按照特殊的顺序安排的,对这一部分 内容可以使用线性结构 – 使用线性结构的关键是:不要将它应用到 整个站点

37

中关村国际软件人才教育联盟

站点结构 5-3
?

层次式站点结构:
– 基本思想是:将内容按某种标准分组,然后提供组 成员的列表。一个组中的每个项目也可以是一个组。 前面所有的例子都采用的是层次结构 – 它是组织站点的一种很有效的方式,它的结构图容 易画,也使小组开发和维护更容易

?

避免一味使用层次式结构
– 访问者不应该每次都要至少单击四、五次才能到达 某一网页,这就是搜索引擎之所以流行的原因

38

中关村国际软件人才教育联盟

站点结构 5-4
?

完全杂乱型结构:
– 基本思想是:组织结构并不重要,访问者 只是在站点中游逛,并不特意寻找什么。 他们可以点击他们看到的任何链接,但不 能保证一定能够回到曾访问过的某个网页 – 不要使用这种结构,它只适用于非常小的 站点。如果访问者是那些可以免费上网而 又不愿意学习的大学生,这种结构还可能 工作,否则它就会失败
39

中关村国际软件人才教育联盟

站点结构 5-5
?

建立结构合理的站点:
– 访问者只要单击一两次就能找到他们所要 的网页,而且他们可以重新找到这个内容

?

一些有用的规则:
– 在站点上建立一个搜索选项,要求该站点 必须是索引的 – 在每个网页的相同位置放置导航控件 – 不要害怕不同部门之间的链接 – 选择一种结构一直使用它
40

中关村国际软件人才教育联盟

维护多页站点 2-1
主要工作包括: ? 定期对网页外观进行美化
– 当你的公司准备修改市场广告材料时 – 为了利用最新技术时
?

定期运行链接检查软件
– 如果你的站点多于10张网页,就应该利用 这种软件,它可以测试出站点的所有链接

?

每天对站点进行测试
41

中关村国际软件人才教育联盟

维护多页站点 2-2
?

保持最新的索引,这样搜速才是准确的
– 使用站点索引软件

?

?

定期检查和修正内容,使他总能保持最 新 使你的竞争者或者合作伙伴的信息保持 最新

42

中关村国际软件人才教育联盟

HTML网上行
? ?

比老师更加渊博的老师 – 互联网 打开网页
– IE菜单—查看—源文件 – IE菜单—文件—另存为 – 学习其他的优秀的HTML设计

?
?

可以查看CSS 可以查看Javascript
43

中关村国际软件人才教育联盟

总结

44


网页设计维护_图文.ppt

网页设计维护 - 中关村国际软件人才教育联盟 第三讲 网页设计维护 1 目标 ?

网页设计-站点发布与维护._图文.ppt

网页设计-站点发布与维护. - 《网页设计教案》 第八章 站点发布与维护 第8章 网页的安家---站点发布与维护 目标要求 目标要求 ? 讲课提纲 本章主要介绍站点...

网页设计原理及网站维护._图文.ppt

网页设计原理及网站维护. - 网页执行原理 ? 静态网页 ? ? ? 最初的都是

WebPlus_网页制作与维护_图文.ppt

WebPlus_网页制作与维护 - WebPlus 网页制作与维护 1 主要内容 ? 建站及网站信息维护 ? 权限管理 模板制作 ? 2 第一部分 建站及网站信息维护 ? 添...

网站建设与维护_图文.ppt

网站技术解决方案 网站内容规划 网页设计 网站维护 网站测试 网站发布与推广 网站...()注重图文结合形势,把单调文字变化为易懂图形 ()多方面考虑错误结果,并有应对...

网页制作:项目15__发布和维护网站--_图文.ppt

网页制作:项目15__发布和维护网站-- - 网页设计与制作 Dreamweaver 8 主讲: 项目十五 网页设计与制作 发布和维护网站 Dreamweaver 8 项目十五...

网页设计与制作第14章 发布和维护网站_图文.ppt

网页设计与制作第14章 发布和维护网站 - 第14章 发布和维护网站 本章将结合实际操作介绍配置IIS 服务器、发布和维护网站的基本知识。 学习目标 掌握配置IIS服务器...

网站建设与维护模板_图文.ppt

建设网站目的及功能定位 网站技术解决方案 网站内容规划 网页设计 网站维护 网站...(4)注重图文结合形势,把单调文字变化为易懂图形 (5)多方面考虑错误结果,并有...

网页设计与制作项目十四 发布和维护_图文.ppt

网页设计与制作项目十四 发布和维护 - 项目活动十四 发布与维护网站 复习提问:

网站的发布与维护_图文.doc

网站的发布与维护 - 《网站的发布与维护》 一、教学设计部分 1. 教学内容分析 本课的主要内容与地位 本节课涉及的教学内容网站发布的整个过程,包括:网站的检查...

第9章网页制作与维护_图文.ppt

第9章网页制作与维护 - 第9章 网页制作与维护 第9章 网页制作与维护 知识点: 网页的版式、导航设计页面内容编排原则 HTML文档的结构、常用标记...

网页设计与制作项目化教程 8 站点的测试、上传与维护_图文.ppt

网页设计与制作项目化教程 站点的测试、上传与维护 项目导读网站制作完成后,如

网站设计与维护第1讲概述_图文.ppt

网站设计维护第1讲概述_工学_高等教育_教育专区。最新版网站设计维护课件

第10章 站点的测试、发布、管理与维护(网页设计与....ppt

第10章 站点的测试、发布、管理与维护(网页设计与制作共11章) - 简要介

...教学课件 黄建华 第10章 网站安全维护_图文.ppt

现代网页设计及网络建设技术 教学课件 黄建华 第10章 网站安全维护 - 教材其

网站和网页设计._图文.ppt

网站和网页设计. - 网站和网页设计 朱晓菊 Web设计概念纵览 Web设计起源于使用专用的Web开发技术简单地在Web 页上复制印刷材料。网站设计人员需要了解...

网站设计与规划网站的测试上传与维护-PPT精选文档_图文.ppt

网站设计与规划网站的测试上传与维护-PPT精选文档 - 第9章 网站的测试、上传与维护 主讲:××× 本章要点 ? ? ? ? 如何进行网站测试及主要测试的项目 上传...

网页设计说明书_图文.doc

网页设计说明书 - 一、制作网站的市场调查 了解凯里、天柱、锦屏、黎平、从江、榕

网页设计PPT_图文.ppt

网页设计PPT - 学习网站设计制作的意义? 沟通信息 宣传窗口 个性展示 工作需要 Have a look 通过这次讲座我们要了解… Main Point 网站设计要素 让大...

网页设计 PPT课件_图文.ppt

网页设计 PPT课件 - 第1章 网站设计概论 要求: 主要内容 一、网站基本知识 二、网站设计 三、网站的开发流程 四、常用网站开发工具 本章习题 一、网站基本知识...