山大《网站设计与建设》课件第1章 Web设计综述

1、网 站 设 计 与 建 设Website design and developments第1章 Web设计综述第一部分 Web基础知识3网页、网站、主页、封页与超链接等基本概念Web比传统媒体所具有的独特特征 Web技术以及相关工具Web设计原则 概 述Web 设计最基本原则Web 最小公分母设计原则Web 页面布局设计原则Web 颜色设计原则Web 字体设计原则 Web 设计深刻影响1.1 Internet与Intranet Internet又称为因特网，是一个全球性的计算机互联网络。它既是一个多媒体的通信媒介，又是一个无限的信息资源。它由成千上万个不同规模的网络通过自愿原则采用TCP/IP

2、协议互相连接起来的一个巨型计算机网络。 Intranet是指企业内部网，它采用 Internet 的协议标准，应用 Internet 的现有技术建设的企业内部网络。 1.2 网页，网站，封页与主页WWW的含义是环球信息网(World Wide Web)，也简称为 Web网或“万维网”。 网页 (Web Page)网站 (Web Site) 也叫站点，是指在Internet上，由一组相互关联的文档和各种网页元素组成的集合。 主页（Home Page） 超链接（Hyperlink） 超文本（Hypertext）6封页(Cover Page)在主页前面的网页，内容非常简洁，一般是简易抽象的绘图或fl

3、ash动画，阐述网站当下宣传的主题和意念，网站封页一般显示几秒的很短时间就自动跳转到主页或点击封页也可以直接进入主页。现在很多网站开始流行“封页”设计，但网站不一定一直有封页，封页一个网站顶多有一个。封页相当于书的封皮，主页相当于书的目录，其他网页相当于内容书页。7封页实例Web2.0Web2.0 是相对Web1.0 的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。web2.0网站与web1.0没有绝对的界限。web2.0技术可以成为web1.0网站的工具，一些在web2.0概

4、念之前诞生的网站本身也具有web2.0特性web2.0的核心不是技术而在于指导思想。Web2.0与其说是一种新技术不如说是一种新的理念博客（Blog）、维基（Wiki）等Web 3.0Web 3.0一词包含多层含义，用来概括互联网发展过程中可能出现的各种不同的方向和特征包括将互联网本身转化为一个泛型数据库；跨浏览器、超浏览器的内容投递和请求机制；人工智能技术的运用；语义网；地理映射网；运用3D技术搭建的网站甚至虚拟世界或网络公国等111.3 Web媒体新特征Web多媒体： Web是丰富多彩的多媒体 Web是非线性媒体：用户可以随时跳转到其他网页或网站,传统媒体是线性的。Web交互性：客户可与页

5、面互动与被动地接受广播信息有本质的区别。个性化 ：可提供一对一的客户需求信息。一对一关系：大众媒体的概念和应用对于Internet无效,传统媒体为广播式传播。Web主动性： 主动获得信息。Web平等身份：聊天、博客(部落阁)、BBS、在线游戏和电子商务等。 1211.Web媒体新特征-续Web即时交流：E-email、聊天、在线游戏等。Web提供电子商务：B2C、C2C电子商务网站。 信息搜索能力：有强大的信息搜索能力 如google Web即时性：一旦信息发布，瞬间就可借助Internet传遍世界各地，传统媒体做不到的。Web采用B/S架构： Web站点发布与传统软件C/S不同，省时省力、便

6、于维护与发布。无需培训：易于浏览信息、不需要任何客户培训，无须安装与卸载客户端软件。Web信息易修改、传播速度快和传播成本低。 Web充分使用原有信息：Web信息可以存于数据库中，传统媒体难于使用众多类信息和已有信息。131.4 Web技术和工具Web技术是人类所经历的发展最快的技术B/技术：浏览器/服务器模式，所有页面信息和数据都放置在了服务器端，客户机上只需要有浏览器。 Web常用技术：HTML、DHTML、CSS、XML、AJAX 、JavaScript和Java Applets。 网页设计工具：FrontPage、Dreamweaver、HotDog Professional、Nets

7、cape Communicator、IBM RSA、Eclipse、Web Page Maker和BEA WebLogic Workshop等。由于HTML网页文件是一个纯ASCII文档，任何一个编辑器都可以编辑该类型文件 最好的网站设计方法：手工编码加上所见即所得的工具。 141.5 Web设计最基本原则Web最基本设计原则：Web内容永远是第一位的，多媒体外观设计与设计技术始终是第二位的。Web内容是第一位的与Web客户是第一位的，是一致的。Web客户是指浏览网站的主要用户群。站点在设计时既应该专注客户的共性，也应该兼顾个性。15Web客户特点80%的Web客户只扫描网页的关键字和短语普通

8、客户读Web内容比纸张慢25%。Web客户和站点设计关系：Web设计必须吸引人，以客户为本，引导他快速找到他所需要的内容。Web客户不希望网页充斥无关内容和混乱图像。内容很重要，布局和传递也很重要。用可以赢得客户的布局特性来创建网页。确定当前网页设计客户资源环境最好的方法就是访问一些著名网站，了解这些网站的设计。网站设计还要特别考虑你的客户群，针对不同的客户群可能客户环境差别是很大的 171.6 Web最小公分母设计原则网站设计人员：最新的硬件、软件和插件。设计基础指导原则：最小公分母设计：使用大众客户群最低的环境设计网站，让更多的客户能顺畅浏览网站。15吋显示器。分辨率：800*60036.

9、6Kb/s ModemIE6或更早兼容Google Chrome、FireFox和360安全浏览器极少用户会花时间下载插件(flash插件除外)参照著名网站的设计(最有效)网站设计还要特别考虑你的客户群 800*600 1024*768 1280*1024返回1.7 Web页面与传统软件用户界面 都依赖于图形用户界面（GUI），即含有同样的基本设计构件：窗口、图标、菜单和指针。Web页面更注重的是信息的展示，而传统软件界面更注重的是系统功能的实现 Web站点比传统软件更专注于内容 “Web内容永远都是第一位的” 241.8 Web页面布局Web 页面布局：是对页面的整体规划，即对页面划分成不同

10、的区域，用于放置不同的页面元素。网页布局直接影响到网站的外观和结构,页面布局按照导航元素放置的位置进行分类。 25 Web页面布局设计原则 1/2页面布局应该遵循翻转金字塔样式：首先提供给用户一个摘要列表，然后是对细节的链接或者引用。 页面布局是设计人员向用户展示信息的方式，必须具有逻辑性、易于理解，并遵守它。一定不要设计左右拖动页面，可以上下拖动页面，而且不易拖动过长，客户往往会忽视页面下面的内容。借鉴成功相似网站的页面布局。 26Web页面布局设计原则 2/2对于整个网站每个页面的布局应该相对保持协调一致，不应该有大的跳跃感觉。页面布局对于一个网站不易过多，应该根据网站内容合理地设计页面布

11、局。同类型网页应该有相同和非常相似的页面结构。切忌不要边设计边修改页面布局，否则会浪费很多时间和精力，一旦确定就不要轻易修改。公共布局格式：按导航元素放置的方式分类左边空白布局上边空白布局分布式左边和上边空白布局右边空白布局上边和中部布局上下布局分布式布局艺术风格布局左边空白布局左边空白布局上边空白布局上左边空白布局右边空白布局上下边空白布局分布式布局艺术风格布局网页布局元素网页布局：在建立网站前应首先考虑网站的外观和结构。从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的元素：布局、字体、颜色、图像以及其它多媒体。页面布局是设计人员向用户展示信息的方式，必须规划

12、一个结构，要具有逻辑性、易于理解，并遵守它。网页布局元素包括页面规划布局、边界、字体、颜色、图像以及表格等：框架：规划页面布局，允许同时显示多个页面。表格：规划页面布局，在单元格上可以放置各种网页元素，容易排版。导航：控制用户在网站内的移动。段落：在页面上分组文本字符。图像：提供视觉吸引、信息和导航。列表：组织并强调某些信息条目。颜色：提供网站整体色彩感觉，增加可读性、易于分类。边距：控制显示内容距浏览器窗口边界的距离。边界：为HTML表和框架提供可见的边界。空白：减少页面元素混乱，分开页面上的元素 空白在网页设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素

13、。切记不要将尽可能多得信息放在一个网页中，应该有合理的、简明的分类，不要强迫客户从一堆信息中艰难地挑出所需要的信息，要让客户自己选择是否进入更深的链接获得信息。也不要只为了让页面变短而分割页面，除非是在逻辑断点处。每一个页面都应该是独立完整的。 页面布局技术(1)层叠样式表(CSS)能完全精确的定位文本和图片浏览器是否支持CSS技术(2)表格页面布局：边界为0(3)框架页面布局(4)透明GIF页面布局 占位图像 (5) Flash页面布局页面布局技术：页面尺寸切记在网页设计过程中，一定不要左右拖动页面，只能上下拖动页面，而且也不能拖动过长，客户往往会忽视页面下面的内容。1.9 颜色与Web设计

14、 当访问一个网站时，给我们的第一感觉是什么？是颜色。 色彩以一种“隐蔽”的方式传达的各种信息 几乎每一个成功的企业都有企业文化颜色，微软公司的颜色是天蓝色、Oracle公司的颜色是红黑色、IBM公司的颜色是蓝色等发光物体三基色：红、绿、蓝 (RGB)不发光物体的印刷四色：青、洋红、黄、黑 (CMYK) 青(C)、洋红(M)、黄(Y)和黑(K) 色彩都具有三个要素：色调、饱和度、亮度（或明度） 色调（Hue，简称：H）：指颜色的种类，它反映了颜色的基本面貌和性质。如：红、绿、蓝等各种颜色。色调H的单位是度，表示在颜色环上所处位置的角度；饱和度（Saturation，简称：S）：指颜色的深浅程度或

15、浓淡程度。一般鲜艳的色彩其饱和度都比较高，较刺眼，故饱和度高的颜色一般不用作网页背景。饱和度S的单位是百分比。亮度（Brightness，简称：B）： 指颜色的明暗程度。如白色亮度高，黑色亮度低；黄色亮度最高，紫色亮度最低。亮度B的单位是百分比。Photoshop拾色器颜色格式两种数值格式：RGB值十六进制数值RGB：“0，255，0” 绿十六进制数：“#00FF00” 绿颜色数为16777216种颜色(256256256，224) 浏览器支持的216个颜色(另40个用于OS)抖动：浏览器将颜色近似为它所支持的最近安全颜色的过程。颜色和Web设计色环：将色彩按“红黄绿青蓝紫红”依次过渡渐变，就

16、可以得到一个色环。在色环中，可以将颜色分为：暖色系、中性系和冷色系 配色方案单色方案色调H值得到基本颜色，再通过调整亮度B以及饱和度S得到其他几种相近颜色。 相似色方案色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案 配色方案补色方案在色彩圆环上沿直径相对应的两种颜色构成一对互补色，绿色和红色为互补色，绿色旁边的深绿色和蓝绿色以及红色旁边的橙红色以及深红色就构成了一组双重互补色 三合一色方案三色方案是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。红、黄、蓝是一个三色方案， 58Web颜色设计原则(1/2)：最直接的视觉冲击网站应该使用企业原有CI颜色，需要简洁、新

17、颖、舒服、大方，充分体现企业的文化形象。网页色系要整个网站需要保持一致。网站的色系可以分为暖色系、中性系和冷色系几种。色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等。Web三色原则：除了黑色和白色以外，主要颜色原则上不要超过三种，太多的颜色会导致网页色彩杂乱，令人厌烦。 5925.颜色确定原则 (2/2)选择一种适合的配色方案网页元素应该选择与网站主体相一致的色调图像的颜色应该尽可能的少，从而减少图片尺寸应使用浏览器支持的216个Web安全颜色 颜色确定原则：最直接的视觉冲击尽可能使用浏览器支持的216个颜色颜色数目不应使用过多,除了黑色和白色以外，选择三到四个颜色就足够了 所有

18、页面颜色要与主页保持一致颜色形成一种风格：图像、文字、底色网站的色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等，这不单只是将颜色搭配得当就算完美，还要配合网站主题及信息内容。 使用户感到简洁、新颖、舒服、大方，充分体现公司企业的形象1.10. 字体和Web设计网页中的文本有两种：HTML文本图形文件格式的文字图像 最常用的英文字体是Times New Roman(Macintosh为Times)Arial(Macintosh为Helvetica)，最常用的中文字体是宋体英文字体分两类: Serif（衬线）有那种边边角角的字体。比如说Times New Roman常用于印刷业，可以用来清楚地分辨出每一个字母，因此读者浏览那些字数比较多的段落就变得很轻松。 Sans-SerifArial特征就是简洁大方。几乎所有的广告、标志，幻灯片，系统、程序和网页使用这种字体这是因为显示器的分辨率低，而字体不能减小。如果用Serif字体，那些边边角