网页设计ppt课件_其它模板_PPT模板_实用文档

网页设计主讲 : 秦旭剑1网页设计一、网络概述 1、网页设计的载体——网络媒体的问世与演进连接亚洲不同国家、领域、行业的INTERNET国际 计算机分组交换网络是迄今为止世界最为成功跟覆盖面 最大的国际网络。它源于1980年的德国，采用了TCP/IP 协议。目前，网络未把世界上150个国家跟地区、数万个 区域网联结在一起，网络用户达数亿。22、网络的表现形式——网站之设计（二维设计的新舞台） 随着网络工具的快速普及跟入网用户的不断增多，上网已成 为一种时尚。34二、网页艺术设计的特点 1.交互性与持续性 网页不同于传统媒体之处，就在于信息的动态更新跟即时交互性。 2.多维性 多维性源于超级链接，主要表现在网站设计中对导航的设计上。53.多种媒体的综合性 随着网路带宽的降低、芯片处理速率的提升并且跨平台的多媒体文件格式的推 广，必将推动设计者综合利用多种媒体元 素来设计网页，以满足和丰富浏览者对网 络信息存储质量提出的更高要求。典型的有在线音乐、在线广播、网上 电影、网上直播等。4.版式的不可控性 网页版式设计与特色印刷版式设计有着极大的差别： (1) 印刷品设计者可以指定使用的纸板和纸张，而网站设计者却不能要求浏览 者使用什么样的手机或浏览器；(2)网络正进入不断发展之中，不象印 刷那样基本具有了成熟的印刷标准；(3) 网页设计过程中有关Web的每一 件事都可能随时出现变化。

6这一切说明，网络应用尚处在发展之中，关于网络应用也很难在 各个方面都建立出统一的标准，这必然引起网页版式设计的不可控制 性。其详细表现为：(1) 网页页面会按照当前浏览器窗口大小自动格式化输出； (2) 网页的浏览者可以控制网站页面在浏览器中的显示模式； (3) 不同种类、版本的浏览器观察同一个网页页面网页课件模板，效果会有所不同； (4) 用户的浏览器工作环境不同，显示效果也会有所不同。把所有这种弊端归结为一点，即网站设计者无法控制页面在用户端的 最终显示效果，但这也正是网页设计的吸引人之处。75.技术与艺术结合的紧 密性网络科技主要体现为客 观原因，艺术趣味主要体现 为主观原因，网页设计者应 该积极主动地掌握现有的各 种网络科技规律，注重技术 和艺术紧密结合，这样能够 穷尽技术之长，实现艺术想 象，满足浏览者对网站信息 的高质量需求。89三、建立网站 1、认识网页和网站 网站是由网页集合而成，而你们通过浏览器看到的场景就是网页，网页说具体了是一个html文件，浏览器是拿来解读这份文件的。 2、建立一个网站就像建造一幢高楼大厦，有一个详细的程式跟很多细节。网站设计策划是把详细的要求跟设计的体现从意念到准确的 过程。

2．1．网站总策划 2．2. 网站的基本功能表述 2．3. 用户界面与设计样式意念的纲要103、网页设计 3．1．定位网站的主题 题材的选取 美国《个人电脑》杂志（PC Magazine评出的2001年度排名前100位的全球著名网站的十类题材，这针对读者进行网站设计，提 供了一些参考价值。第一类：网上求职 第二类：网上聊天/即时信息/ICQ 第三类：网站社区/讨论邮件列表 第四类：计算机技术 第五类：网页/网站开发 第六类：娱乐网站 第七类：旅行 第八类：参考/资讯 第九类：家庭/教育 第十类：生活/时尚113．2. 网页结构层次上的设计艺术 走迷宫只是在做游戏时就会首生乐趣，但即使在日常生活中我们遭遇迷宫，那则是很痛苦的事情。如果受众在 点击WEB的详细内容跟深层页面时不易找到顺畅的模式跟 导航标志，不明晰或不易懂就犹如进入迷宫，其结果是受 众只有放弃进入。因此，在网络广告中建立大家公认且熟 知、清晰、简洁、易懂的网站导航平台是非常重要的。121、在图书馆查找图书的场景进入图书馆否是否询问找示意图否找书架区域寻找书架标识是自已在恰当 的位置吗否还有还有信心吗彻底没信心了找架层 浏览 是否找到 是 几乎没有 找服务员 是是找人提问回答是否靠谱是找书室再问人找个更好的服务员找书架还有浏览还有信心吗是否找到 否没有找出口132、在网上购书的场景进入网页否是否习惯搜索是单击某个栏目找搜索框否 是单击某个子栏目寻找所需 要的信息认为自已在正否确的栏目吗是否找到 是输入词汇结果能否可靠是 从中找出 你的目标 逐项查找否 改进提问的方法也有 是否还有信心还有还有信心吗几乎没有没有购买是 是否找到 否彻底没自信了离去143、“别使我动脑”的概念 美国知名的网站优化设计大师斯蒂夫.克鲁格说过，他推崇的第一原则就是“别使我动脑”。

电子商务网站这个概念更确立，就是要体现商务，可以是网上购物的、可以是在线票务的、可以是网上的交易系统，总之就 是使客户在网络上推动商务目的。现在电子商务网站大体会有两 个 部 分 B2B （ 商 家 对 商 家 ） 、 B2C （ 商 家 对 普 通 零 散 用 户 ） ， B2C是电子商务网站设计的最高境界，如果无法作出成功的B2C 网站这么别的哪些企业展示网站以及B2B的商务网站之类就都不 算什么了，原因也很简单，就是因为上面所提过的人和人的差 异。下面是一个用户浏览一个网站的过程图，这张图有助于我们 了解客户浏览网站的整个过程。我们可以按照这张图列出的方法 细心观察检测之后客户在网站上完成一个工作之后在每一个步骤 里所用的时间、都做了些什么，并记录下来仔细分析这种数据， 这些数据只是我们优化动作的根据。15164、确定网站的目录结构和链接结构 # 网站的目录结构 建立目录结构的一些建议： 1．不要将所有文件都保存在根目录下 2．按栏目内容创建子目录 在设定网站的目录结构时，需要留意的问题有： （1）不要使用英文昵称的目录名。 （2）不要使用过长的目录名。 （3）尽量使用含义明确的目录名，尽量做到“见名知意”。

（4）目录的层次不要太多，建议不要超过3层。 3、网页制作的基本方法 # 网站的链接结构 一般状况下，建立网站的链接结构有下列三种基本形式： ①树状链接结构 层状结构（如图2-1所示）类似于目录系统的树型结构，由网页文件的主页开始，依次划分为一级标题、二级标题等等， 逐级细化，直至提供给浏览者具体信息。17主页页面1页面2页面3一级标题页面4页面5页面6图2-1树状链接结构页面7二级标题18②线性链接结构 线性结构（如图2-2所示）类似于数据结构中的线性表，用于组织原本的线性排序方式存在的信息，可以鼓励浏览者按部就班地 浏览整个网页文件。这种结构通常都用在含义是平行的页面上。主面面面123图2-2 线性结构链接结构的设计，在实际的网页制作中是相当重要的一环，采用 什么样的链接结构将直接影响至版面的发力。通常状况下，网站文件 的构架是层状结构和线性结构相结合的。也就形成了第三种情况。 ③ Web结构Web结构（如图2-3所示）类似于Internet的构成结构，各网页 之间产生网状连接，允许用户随意浏览。19主页页面1页面2页面3一级标题页面4页面5 页面6 页面7二级标题 页面8图2-3 Web结构 205、网络导航的惯例 导航的设计是否遵循他们的日常习惯是网络广告作用大小的关键所在，任何事物都有它的惯例；楼宇空间的示意图总是在进楼 的入口的两边；街道的路标总是在街的拐角处；书的目录总是在书 的后面，而页码总是在上角或下角。

人们明白找什么东西到哪儿去 找，如果找不到也极少到别处乱找。因而，我们应懂得跟遵守惯例， 如果打破某一事项的惯例都会发生许多烦心事，在网络广告中经常 使信息的传播中断。21固定导航 固定导航在网页的主页上战有明显的位置，一般在设计上会采 用比较规正的方式，且在这一网站中的每个页面上居于同样的位 置。固定导航应包括更常用的五种元素：网站标志、栏目、公共 服务、返回主页和搜索功能。 做好导航 每个页面都应有导航图标，应当减少强迫用户使用工 具栏中的往前和向后按钮。你的设计必须使客户无法迅速地找到 他们所应的东西。绝大多数好的站点在每一页同样的位置上都有 相同的导航条，使浏览者能够从每一页上访问网站的任何个别。 固定导航如要如同业务熟练且服务周到的导游，随时告知你现 在在那，你可以到何处去，并需要如何走跟东南西北各有哪些精 彩的景点。22以下分别介绍这五种元素的常规设计跟注意事项。 （1） 网络标识设计 网络标识无论是图形、文字或文字缩写，它都代表着一个区域或一个大空间的名称。在网络这个虚拟的空间中人往往没有位置感。 在逻辑上网站的标志要进入整个网站设计的最高层面。（网站的层 次依此排序示意如下）：某网站 网站栏目 子栏目 子子栏 某页面 页面某个区 区域内不同内容23在设计方式上让网站标志置于可视层次结构的最高层面有多种 方法：将标志设计在页面更明显、最上方的构图区域；使其置于 明度反差最高的层面；在底色上使用最高的统一计划；标识的字 号最大或阴影面积较大；把其它内容框在网站标志之内。

另外，网站标志的外形造型设计和平面设计的标示标识的规律 相同，标志可以是日文，英文字母，可以是符号，图案等等要求 醒目、简洁、易读、易记忆。 比如：YAHOO是用YAHOO的英文成为标志，新浪用SINA加眼 睛作为标志。标志的设计时尚来自你的网站的名称跟内容。24（2）网络栏目设计 栏目一词借用于杂志，本是一栏或多栏 内固定内容的归纳与 界定。随着报纸内容 的较多又发生了不同 的版块。而在空间无 限的网络中栏目的标 题可以准确颁在主页 当中，而最需在首页 的起初、标识的次一 级层次上发生，通过 它可以连接不同页面。25内容多的广告或大型集团公司、社会服务机构、大型行业的 WEB广告还能设计出在每一栏目下的子栏目，这样层次分明，使用 方便。需留意的是，栏目标题下的背景需有颜色块，以示可以点击， 这一层次的色调不宜与整体版面底色的明暗反差过大。（3）公共服务设计 公共服务相同是网络的重要链接，它并不具备目录的用途， 而是连接网络的一些必不可少的重要元素特别是商业性网站、商业 广告、电子商务等网站这一公共服务的设定最是不可缺少。26返回主页 在主页的不同层次的页面上需要存在的固定导航是“返回主页”的链接，它能使用户随时再次快捷地返回至原先的地方。

给用户一 种归属感和安全感，不至于迷失方向。目前有许多网站在各页面的 层面上将网站标志与返回主页合二为一，这时一个有效的方式，既 明确又节省空间，值得借鉴。 （4）搜索设计因为一些网页或主页的信息量会很高，因此，WEB上每一个页 面上都要设有搜索框或是一个搜索页面的链接。这样可以极大地提 高用户的使用强度，为这些惯于使用搜索的上网者提供方便。27（5）检索凸舌设计 检索凸舌是网络中的既一种链接形式，它是从现实生活中提炼出来的一种有效的检索方式，它可把很多的内容分区管理并作 出显著标识，使人容易方便地找到跟打开相应的栏目。在网站不 同层次的页面中，“凸舌”可以强调供予以我们必须查找的目录， 并借助点击迅速地开启相应的页面找到所需的信息。 检索凸舌的优势如下：1、一目了然 2、凸舌既整齐又生动 3、生动地体现受众的 选择286、网站的颜色 色彩是戏剧表现的重要要素之一,它是 光刺激耳朵传导到大 脑中枢而形成的一种 感觉。色调及黑、白、 灰的三色空间关系不 论在设计而是在绘画 方面都起着重要的作 用。网站给人的第一 印象来自其视觉效果， 确定网站的标准色彩 是非常重要的一步。 不同的色调搭配形成 不同的效果，并能影 响到浏览者的情绪。

“标准色彩”是指可 体现网站形象跟延伸 内涵的底色。29如IBM的深蓝色，肯德基的蓝色 ， windows 视 窗 标 志 上 的红蓝黄绿色块，都是我们认为最贴切，很和谐。如果将IBM改用绿色以及黄金色，我们会有哪些感觉？一般来说，一个网站的标准颜色不少于三种，太多则令人眼花缭乱。标准颜色应用于网站的标识，标题，主菜单和主色调。给人以整体统一的觉得。至于其它颜色也可以使用，只是成为点缀和展现，绝不能喧宾夺主。色彩总的应用方法需要是“总体协调，局部对比”，也就是：主页的整体色调效果需要是和谐的，只有局部的、小范围的地方可以有一些强烈颜色的对比。在色调的利用上，可以按照主页内容的必须，分别采取不同的主色调。30317、网站的标准图标和照片 和标准颜色一样，标准图标是指用于标识网页课件模板，标题，菜单的特有字体。一般我们网站默认的图标是字体 和12px。图片问题主要存在size过大的弊端，网页中通常 应用两种格式的照片jpeg和gif，动画不要用很多大家都偏爱用GIF动画来装饰网页， 但是很多很乱的动画会使浏览者注意力分散，视觉 疲劳。有很多网站都在使用记数器，最好不用记数器。32338、网站的版式设计 网站的最后表现集中在他的视觉图标上，网页作为一种 视觉语言，其特别讲究视觉元 素编排和布局，虽然网页的设 计不同于平面设计，但他们有 许多相似之处，版式设计通过 诸多视觉要素的视觉空间组合， 表达和谐统一视觉感受。

1.主次分明，中心突出。 在一个页面上，必然考虑视觉 的中心，这个中心通常在屏幕 的中央，或者在后面偏上的部 位。因此，一些重要的文章跟 图片通常可以安排在这个部位， 在视觉中心以外的地方就可以 安排这些稍微次要的内容，这 样在页面上就突出了重点，做 到了主次有别。342.大小搭配，相互契合。较长的文章或标题，不要编排在一 起，要有一定的距离，同样，较短的文章，也不能编排在一起。 对待图片的安排只是这种，要相互隔开，造成大小之间有一定 的间隔，这样可以让页面错落有致，避免重心的偏离。353. 图 文 并 茂 ， 相得益彰。文字跟 图片具有一种相互 补充的视觉关系， 页面上文字很多， 就变得枯燥，缺乏 生气。页面上照片 太多，缺少文字， 必然经常避免页面 的信息容量。因此， 最理想的效果是文 字与照片的紧密配 合，互为衬托，既 能活跃页面，又让 主页有丰富的内容。364. 表格是网站页面中更重要的排版方网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率，应该最低 照 顾 到 800×600的用户（分辨率800×600 的 显 示 尺寸 780×428 、 分 辨率 1024×768 的 显尺寸1007×600 ） ， 所以页面更宽不要超过780，一定不要让用户横向拖页面。

379、使用知名的软件 如果网页上有声音或视频，要确保使用者通过使用某个知名的软件，能够看见或发现。如果访问者没有所规定的插件，将不得不到 其它站点去下载，这样访问者有也许就不会返回了。许多站点让 QuickTime、RealPlay和 Shockwave插件。因为，许多访问者并 不乐意浪费太多时间跟金钱去下载可能仅使用一次的插件。3810 、 使 网 站 具 有 交互功能 一个静 态网页仍然给人 一种呆板的觉得， 缺少一种活力跟 生气。最好在网 站上提供一些回 答问题的工具以 及其它带有交互 性能的设计，使 得访问者能从网 站上获取交互的 信息，从而让访 问者有一种参与 网络建设的新鲜 感跟成就感。3911、测试网站 在你的网站率先公布之前，必须进行 有用的检测。在设计 网站时应使用最新的 软件，但是不要忘了 人们并不会使用最新 的浏览器，所以要照 顾到当时的浏览器。 在上载网页时需要测 试所有的链接跟导航 工具条。用图像、文 本跟不必要的漫画 GIFs来充斥网页， 即使有足够的空间， 在设计时也需要减少 使用。40四、通常我们设计的重点都会集中在里面所讲的一些项目中。 下边我们举一些小反例来表明怎样进行优化性设计，并预测一下现在这些网站所犯的出错，。

我们先看一个大多数网站就会犯下的文字错误，文字是构成网页的更重要的元素之一，我们文字可以用文字的形状、大 小跟位置来区别它们的重要性，分为标题、内容之类。 网站的弊端就是在于“链接”，我们可以充分的借助链接引导 用户阅读它们感兴趣的东西，或者鼓励人们阅读我们期望他看 见的东西。我们今天就可以去优化一下以前的网站了，去掉首 页大片的文字，根据需要改成链接。41还有一个各个商业网站就会犯下的出错，就是在让用户填写 注册信息的之后必须必填的栏目太多。我们将要介绍了两个关于改进网页设计的事例，由于这种的 例子众多我们也不——列举，要在实际的设计中去总结。并不是 最漂亮的网页就是最好的网页，实用性与艺术性结合更重要。42