网页设计与制作综述.ppt

《网页设计与制作综述.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作综述.ppt（99页珍藏版）》请在三一办公上搜索。

1、网页设计与制作案例教程（第2版）,第1章 网页设计与制作综述,网页设计与制作案例教程（第2版）,本章学习内容,1.1 学习任务:认识网页1.2 学习任务:认识网站1.3 学习任务:第2章 网页版式设计与色彩搭配,网页设计与制作案例教程（第2版）,1.1 学习任务:认识网页,本节学习任务 认识什么是网页，了解网页的类型，为学习网页设计与制作打好基础。1.1.1 什么是网页 网页是一种可以在互联网上传输、能被浏览器识别和翻译成页面并显示出来的文件，网页是网站的基本构成元素。在联网的计算机上安装浏览器后，在浏览器的地址栏中输入诸如的网址，即可在浏览器中打开网页，如图1-1所示。,网页设计与制作案例教

2、程（第2版）,1.1 学习任务:认识网页,图1-1,网页设计与制作案例教程（第2版）,1.1 学习任务:认识网页,1.1.2 网页类型 网页分为静态网页和动态网页两种类型。1静态网页 在网站设计中，使用纯HTML格式的网页通常称为静态网页，它运行于客户端。早期的网站一般都是由静态网页组成的，它们是以.htm、.html为扩展名。,网页设计与制作案例教程（第2版）,1.1 学习任务:认识网页,静态网页的基本特点归纳如下。每个静态网页都有一个固定的URL，且网页URL的扩展名为.htm、.html格式。网页内容发布到网站服务器上之后，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，

3、也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。静态网页的交互性较差，在功能方面有较大的限制。,网页设计与制作案例教程（第2版）,1.1 学习任务:认识网页,2动态网页 采用了动态网页技术，在服务器端运行的网页和程序被称为动态网页，它们会根据编写的程序访问数据库，并动态地生成页面。动态网页的优点是效率高、更新快、移植性强，可以根据先前制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最大

4、利用和节省服务器上的物理资源。,网页设计与制作案例教程（第2版）,1.1 学习任务:认识网页,动态网页的基本特点归纳如下。动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。动态网页实际上不是存在于服务器上的独立网页文件，只有当用户请求时，服务器才生成并返回一个完整的网页。动态网页中URL的字符“?”对搜索引擎检索存在一定的问题。搜索引擎一般不可能从一个网站的数据库中检索全部网页，或者出于技术方面的考虑，搜索引擎不会去抓取网址中“?”后面的内容，因此，采用动态网页的网站在进行搜索引擎检索设计时

5、，需要做一定的技术处理才能适应搜索引擎的要求。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,本节学习任务 认识什么是网站，理解网址与域名，熟悉网页的基本构成元素，了解设计网页制作常用软件和技术。1.2.1 什么是网站 网站是提供各种信息和服务的平台，如用户熟悉的新浪、搜狐、京东网、当当网等都是典型网站。网站由许多网页组成，也可以通俗地理解成网站是存储在某个服务器上的，包含了网页、图片、数据库和多媒体信息等资源的一个文件夹。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,提示：在Dreamweaver中，网页设计都是以一个完整的Web站点为基本对象的，所有的资源

6、和网页的编辑都在此站点中进行，建议不要脱离站点环境，初学者要养成良好的习惯。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,1.2.2 网址与域名1网址 浏览网页时，在浏览器地址栏中输入的诸如这样的字符串就是一个网址，浏览器访问网页是通过统一资源定位器（Uniform Resource Locator，URL）的方式来实现的。这里所说的网址实际上有两个内涵，即IP地址和域名地址。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,2域名 域名就是网站的名称，企业在注册域名时一般都会申请一个符合网站特点的域名，甚至会把域名看做企业的网上商标。在Internet中，域名

7、与IP地址之间是一一对应的，它们之间的转换工作称为域名解析，这项工作专门由域名系统（Domain Name System，DNS）来完成。此外使用域名也便于网址的分层管理和分配。一个完整的域名通常由几个层次组成，不同层次之间用“.”隔开，例如，其中为域名，sina是第三层次域名，com是第二层次域名，cn是国家顶级域名。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,1.2.3 网页基本元素 设计网页时要组织好页面的基本元素，同时再配合一些特效，这样才能构成一个图文并茂、绚丽多彩的网页。网页包括文本、图像、音频、视频、动画和超链接等基本元素。1文本 文本是网页传递信息的主要载体

8、，如图1-2所示。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,2图像 图像给人的视觉效果要比文字强烈得多，在网页中灵活运用图像可以起到点缀的效果，如图1-3所示。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,3动画 动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。但如果网页中存有太多的动画，会使浏览者眼花缭乱，无心细看，所以现在对动画制作的要求越来越高。在网页中加入的动画一般是GIF格式的动画和Fla

9、sh动画等。4超链接 在一个完整的网站中，通常包括站内链接和站外链接。在网页中单击链接对象，即可实现在不同页面之间的跳转或者访问其他网站，以及下载文件或发送E-mail等功能。网页是否能够实现如此多的功能，取决于超链接的规划。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,5音频和视频 在网上浏览时，时常可以发现一些网页设置了背景音乐，伴随着轻柔优美的乐曲，使浏览者在网上冲浪成了更加惬意的休闲活动。加入音乐后，网页文件变大，下载时间就会增加。在网页中加入视频，使得网页形象生动、易于理解。常见的网络视频有视频短片、远程教学、视频聊天、视频点播和DV播放等。但是，在应用视频时要考虑

10、网速问题，如果视频播放不流畅也会影响浏览效果。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,1.2.4 网页制作常用软件和技术 1网页编辑排版软件Dreamweaver Dreamweaver是一款由Macromedia公司（现已被Adobe公司并购）开发的专业网页编辑工具，是一个优秀的所见即所得的网页编辑器。它集网页设计与多网站管理于一身，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页面和Web应用程序进行设计、编码和开发。网页设计者利用它可以轻而易举地制作出跨平台和跨浏览器的网页。,网页设计与制作案例教程（第2版）,1.2 学习任务：认

11、识网站,2网页图像处理软件Photoshop和Fireworks Photoshop是Adobe公司最为著名、也最为流行的专业平面图像处理软件，一直占据着图像处理软件的领袖地位。Photoshop支持多种图像及色彩模式，使用Photoshop可以设计出网页的整体效果图，并且可以设计网页Logo、网页按钮和网页宣传广告等图像。Fireworks是Macromedia公司发布的一款用来设计网页图形的编辑软件。使用Fireworks工具可以在单个文件中创建和编辑位图和矢量图像、设计网页效果、修剪和优化图形以减少其文件大小，并能制作出精美的GIF动画。,网页设计与制作案例教程（第2版）,1.2 学习任

12、务：认识网站,3网页动画制作软件Flash Flash是Macromedia公司推出的矢量动画制作软件，是当今功能最丰富、最优秀的动画制作软件之一，它和Dreamweaver、Fireworks一起被誉为“网页设计三剑客”。Flash以界面简洁、功能强大而见长，具有强大的动画编辑功能，能把动画、音效、交互方式完美地融合在一起，是动画设计初学者和专业动画制作人员的首选。使用Flash可以制作体积非常小的幻灯片、小游戏、MTV、广告等动画效果，是最主要的Web动画形式之一。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,4网页标签语言HTML HTML是用来制作网页的标签语言。HT

13、ML是Hyper Text Markup Language的英文缩写,即超文本标签语言。用HTML编写的超文本文档称为HTML文档，必须使用.html或.htm为文件扩展名，它不需要编译，直接由浏览器执行。HTML是网页技术的核心与基础，不管是制作静态网页，还是编写动态交互网页，都离不开HTML语言。所以，要灵活地实现想要的网页效果，必须了解HTML语言。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,5网页脚本语言JavaScript 使用HTML只能制作出静态的网页，无法独立完成与客户端动态交互的网页。JavaScript是一种通用的、跨平台的、基于原型的、面向对象的脚本语

14、言，它不同于一般的程序设计语言，它不需要事先进行编译，而是嵌入到HTML文本中，由客户端浏览器对其进行解释执行。JavaScript是动态特效网页设计的最佳选择，它的作用在于控制网页中的对象元素，实现网页浏览者与网页内容之间的动态交互。,网页设计与制作案例教程（第2版）,1.2 学习任务：认识网站,6动态交互式网页编程语言 在当前的网站开发中，动态网页已经成为和用户交互必不可少的形式。常用的动态交互式网页设计语言有ASP、PHP、JSP、ASP.net等。有关它们的介绍请参看第14章。,网页设计与制作案例教程（第2版）,1.3学习任务：第2章 网页版式设计与色彩搭配,网页设计与制作案例教程（第

15、2版）,对于一个网页，在设计过程中，首先要进行前期规划。前期规划的主要目的主要是从形式上对网页进行整体把握，包括网页版式设计和色彩搭配两个方面。网页的版式设计指网页各种多媒体元素进行合理组合，网页的色彩搭配指网页各种多媒体元素的配色方案。,网页设计与制作案例教程（第2版）,本章学习内容,2.1 案例分析2.2 网页版式设计2.3 网页色彩基本原理2.4 色彩视觉效果及配色2.5 实训,网页设计与制作案例教程（第2版）,2.1 案例分析：不同风格网页作品欣赏与解析,Internet上的网页不计其数，风格各异，有的网页看起来热情奔放，让人心潮澎湃，有的网页则有强烈神秘气息，吸引年轻人的眼球，有的网

16、页沉稳庄重，有的网站轻松活泼。网页给浏览者带来的视觉感受，是由其页面版式、色彩等风格决定的。下面给出几个比较有代表性的网页。,网页设计与制作案例教程（第2版）,网页作品欣赏之一：可口可乐公司网页,网页设计与制作案例教程（第2版）,赏析,网页版面设计采用四角对称型，主色调采用红色。四角对称的版式设计，稳重、权威、大方，符合公司类网站的形象需求；网页四周及底部用很多看似零散但有序的点进行点缀，一方面淡化了四角对称相对呆板的弊端；一方面增强了网页的生动活泼感；整体采用大红色的暖色调，迎合了年轻人热情奔放性格特点，适合消费群体的口味。可见，网页无论是版式还是色彩的选择，都符合公司的需要和消费群体的特点

17、。,网页设计与制作案例教程（第2版）,网页作品欣赏之二：某饰品网上商城主页,网页设计与制作案例教程（第2版）,赏析,该网页采用曲线型版式设计，主色调采用橙色。这是一个商务营销类网站，销售的主要产品是时尚饰品。网站的主要浏览者是年轻人。为此，采用曲线型版式设计，主要内容、图片和导航都依照曲线进行排列，设计简洁，过渡自然，美观大方，符合所销售商品的特点，同时给浏览者美妙的视觉享受。橙色作为一种暖色调，特别适合商务类网站使用。暖色能够拉近网页内容和浏览者之间的距离，橙色给消费者温馨浪漫的氛围，也符合所售商品的特质。因此，采用曲线型版式和橙色作为主色调，达到很好的效果。,网页设计与制作案例教程（第2版

18、）,网页作品欣赏之三：某房地产公司售楼主页,网页设计与制作案例教程（第2版）,赏析,该网页采用中轴型版式设计。通常销售类网站都采用暖色系或者中性色系，采用极端的黑色背景镶嵌金黄色内容并不多见。但这不失一个优秀的网页。设计师根据网页的宣传目的和预期浏览者的特点，很好的实现了其所宣传产品（楼盘）高贵典雅、气质非凡并略显神秘气息的特质和预期浏览者迫切需要了解楼盘信息的略带朦胧的心理感受。那么，网页是如何做到这一点的呢？首先，网页采用了中轴对称式布局，给人以稳定，庄重，严肃的感觉；其次，采用了黑色背景搭配金黄色内容，给人安静，稳重，神秘的感觉，由此不难看出，两者相结合便很好的达到预期目的。,网页设计与

19、制作案例教程（第2版）,网页作品欣赏之四：苹果公司网站首页,网页设计与制作案例教程（第2版）,赏析,网页采用四横的骨骼式设计，整体色彩采用黑白灰色调。从色彩及版式看，网站秉承了苹果创始人乔布斯的极简风格，苹果在网页设计上并没有花费太大笔墨。骨骼式架构是公司网站通用的架构，容易被浏览者接收，黑白灰是永恒的时尚色。中间大块区域被商品占据，实用意图明显。可见，无论从版式还是配色，无处不透露着苹果公司的文化氛围和价值理念，很容易被苹果的粉丝所认可。,网页设计与制作案例教程（第2版）,2.2 学习任务：网页版式设计,浏览网页时，通常的时间顺序是：网页版式，网页导航，网页内容。由此可以看出，网页设计有三个

20、关键因素，依次决定网页的艺术性、技术性和实用性。其中，网页版式是首先吸引浏览者的因素，版式设计的重要性可想而知。,网页设计与制作案例教程（第2版）,版式设计概述2.2.2 网页版式的尺寸和构成要素2.2.3 网页的版式设计风格网页版式设计原则2.2.5 网页版式设计的视觉流程2.2.6 网页版式设计的步骤,网页设计与制作案例教程（第2版）,版式设计概述,网页的版式设计至关重要。在互联网上不计其数的网页中，如何使自己的网页脱颖而出，成为同类网页中浏览者的首选呢？很明显，仅仅有好的内容是远远不够的，网页的外观同样重要。内容再好，没有一个赏心悦目并具一定视觉冲击力的外观，必然会影响浏览者的阅读兴趣。

21、互联网经济又称为为注意力经济，如何增强画面的视觉效果、吸引大众的注意力，成为网页设计的首要工作。网页版式设计同报刊杂志等平面媒体的版面设计有很多相通之处。所谓网页的版式设计，是指将网页的各种构成要素根据主题需求予以有机组合，进行必要的关系设计，进行一种视觉的关联和合理配置。网页的构成要素主要有：网页标志、网页名称、导航条、图片、色彩、字体、多媒体等。一个成功的网页版式设计不仅能提高网页的注意价值，而且有利于该网页主题的信息传达并增强浏览者的视觉留存，达到良好的预期效果。,网页设计与制作案例教程（第2版）,2.2.2 网页版式的尺寸和构成要素,和书籍报刊等一般印刷品不同，网页的尺寸是由浏览者控制

22、的。网页版面指的是在浏览器上看到的完整的一个页面。用不同种类、版本的浏览器浏览同一个网页，效果有可能不同；浏览器的工作环境不同，显示效果也不尽一样。为此，在网页版式设计中，要规定默认的尺寸大小。提示：网页版式尺寸和显示器的分辨率有关，早期的大小通常为800600像素，目前一般为1024768像素，对某些宽频电脑，分辨率达1280800像素。随着电脑显示器分辨率的不断提高，网页版式尺寸还会发生变化。,网页设计与制作案例教程（第2版）,2.2.2 网页版式的尺寸和构成要素（续）,网页版式的构成要素主要有：网页标志、网页标题、导航条、图片、多媒体、色彩、字体等。网页标志 网页的标志应是该网页的特色和

23、内涵的集中体现，通常出现在网页左上角，是网页整体风格的集中体现。网页标题 网页标题通常在网页上方用大而醒目的文字标示，清晰直白地表明该网页的名称或目的，在内容上给浏览者首要和最直观的提示。导航条 网页的导航条是浏览者在一个网站的页面与页面之间跳转连接的枢纽，它外观形态的醒目和链接的条理性设计将直接影响网站的浏览率。,网页设计与制作案例教程（第2版）,2.2.2 网页版式的尺寸和构成要素（续）,图片 网页中图片的运用可以增加内容的形象性，能够更直观地表现或渲染主题，因此它在页面元素的编排中也是一个重要组成部分。大面积的图片布局易表现感性诉求，有朝气和真实感；小面积的图版给人精致的感觉，使人视线集

24、中；大小图片的搭配使用，可以产生视觉上的节奏变化和画面空间的变化。图片少则页面显得平稳，图片多则页面显得活泼。多媒体 网页借助于视频、音频、动画等多媒体表现形式，可以增强网页的动感活力，吸引浏览着的注意，比单纯图文混排的静态页面宣传效果更好。色彩 网页的色彩包括网页的标准色彩、文字链接的色彩、图片的主色彩、页面的背景色和边框色彩等。色彩的适当选用能体现网页的外观形象，延伸网页的内涵形象。字体 网页的字体主要包括网站的标志、标题、导航栏及正文主要字体以及字体的风格，如字体的粗细、颜色等。在此基础上发挥字体的图形性、装饰功能，对字体的自身趣味适当表现，以提高浏览者的阅读兴趣。,网页设计与制作案例教

25、程（第2版）,2.2.3 网页的版式设计风格,根据网页中元素组合方式不同，可以将网页版式分为骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型等十种类型。,网页设计与制作案例教程（第2版）,1骨骼型,是一种规范的、理性的分割方法，类似报刊的版式。骨骼型又称为分栏式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,2满版型,页面以图像充满整版。主要以图像为诉求点，也可将部分

26、文字罗列于图像之上，效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,3分割型,把整个页面分成上下或左右两部分，分别安排图片和文字。有图片的部分感性而具活力，文字部分则理性而平静。可以通过调整图片和文字所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文字使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,4

27、中轴型,沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,5曲线型,图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,6倾斜型,页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,7对称型,对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的

28、手法，以避免呆板。左右对称的页面版式比较常见。四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,8焦点型,焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。（1）中心。以对比强烈的图片或文字置于页面的视觉中心。如图所示。（2）向心。视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。

29、（3）离心。视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,9三角型,网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,10自由型,自由型的页面具有活泼、轻快的风格。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,网页版式设计原则,网页各种多媒体元素进行有机组合，就是网页版式设计。所谓有机组合，

30、通常指网页版式形式与内容的统一。采用哪种版式并不是设计者的想当然，不同的网站主题对网页构成元素编排方式的要求是不同的，要通过明确建立网站的目的、为谁提供产品或服务、能提供什么样的产品或服务、网站的目标受众特点等一系列定位之后，才能决定。如商务类网站版式的平易近人、娱乐类网站版式的生动活泼、科技类网站版式的严谨周密都是根据网站的特点来确定的。只讲花哨的表现形式或过于强调独特的设计形式而脱离内容，只重视网页形式上的美感而淡化了主题思想的逻辑，将削弱网页主题的诉求效果，是不足取的。版式始终应为内容服务，设计者只有深入领会主题内容的精神，再融汇自己的思想，找到一个较完美的表现方式，才能真正体现出网站独

31、具的分量和特有价值。,网页设计与制作案例教程（第2版）,2.2.5 网页版式设计的视觉流程,视觉流程是网页版式设计的重要内容，可以说，视觉流程运用的好坏，是设计者技巧成熟与否的表现。页面中不同的视觉区域，注目程度不同，给人心理上的感受也不同。一般而言，上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富于活力；右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯，设计时可以把

32、重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按重要性依次放置其他内容。,网页设计与制作案例教程（第2版）,2.2.6 网页版式设计的步骤,一个优秀的网页，是从网页版式设计开始的。通常，网页版式设计要经历构思、粗略布局、完善布局、深入优化等阶段。1构思2粗略布局3完善布局4深入优化,网页设计与制作案例教程（第2版）,2.3 学习任务：色彩构成及网页中的色彩,只要是艺术设计，不管是数万年前的原始壁画创作，现代的产品设计、平面设计、室内装潢，都离不开色彩。当然网页设计也是这样。色彩在艺术设计中地位非常重要。对于初学者来说，色彩搭配却很难掌握，网页中的背景，文字，LOGO，导航，

33、图片，这些基本元素应该采用什么样的色彩，如何进行搭配才能最好的表达出设计的预想呢？,网页设计与制作案例教程（第2版）,2.3.1 色彩的基本理论2.3.2 色彩的视觉效果,网页设计与制作案例教程（第2版）,本节学习任务了解色彩的基本概念，掌握光的三原色理论，掌握色彩的三个基本属性；了解色彩给人带来的视觉效果。,网页设计与制作案例教程（第2版）,2.3.1 色彩的基本理论,大自然为何是五颜六色的？因为光照射到物体的表面发生折射产生了色彩。人的眼睛是根据所看见的光的波长来识别颜色的。如霓虹灯，它所发出的光本身带有颜色，能直接刺激人的视觉神经而让人感觉到色彩。可见光谱中的大部分颜色可以由三种基本色光

34、按不同的比例混合而成，这三种基本色光的颜色就是红（Red）、绿（Green）、蓝（Blue）三原色光。这三种光以相同的比例混合、且达到一定的强度，就呈现白色（白光）；若三种光的强度均为零，就是黑色（黑暗）。这就是加色法原理，加色法原理被广泛应用于电视机、监视器等主动发光的产品中。在网页设计中，也是运用了加色法原理。提示：根据减色法原理，颜料的三原色有青（Cyan）、品红（Magenta）和黄（Yellow），多用在在印刷、油漆、绘画等场合。颜料的三原色及其理论不作为本书讨论内容。,网页设计与制作案例教程（第2版）,2.3.1 色彩的基本理论(续),色彩，可分为无彩色和有彩色两大类。前者如黑、白

35、。灰，后者如红、黄蓝等七彩。有彩色就是具备光谱上的某种或某些色相，统称为彩调。与此相反，无彩色就没有彩调。无彩色有明有暗，表现为白、黑，也称色调。有彩色表现很复杂，但可以用三组特征值来确定。其一是彩调，也就是色相；其二是明暗，也就是明度；其三是饱和度，也就是纯度、彩度。色相、明度、饱和度称为色彩的三属性。明度和色相合并为二线的色状态，称为色调。,网页设计与制作案例教程（第2版）,2.3.1 色彩的基本理论(续),色相（Hue）简写H，表示色的特质，是区别色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。明度（Value）简写V，表示色

36、彩的亮度，也即是色彩的明暗度。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。饱和度（Chroma）简写C，表示色的纯度，亦即是色的饱和度。具体来说，是表明一种颜色中是否含有白或黑的成份。假如某色不含有白或黑的成份，便是纯色，彩度最高；如含有越多白或黑的成份，它的彩度亦会逐步下降。,网页设计与制作案例教程（第2版）,2.3.2 色彩的视觉效果,研究表明，色彩能给人的心理带来刺激，能影响人的情绪。例如，在红色环境中，人的脉搏会加快，血压有所升高，情绪兴奋冲动。正是由于色彩对人类心理的情绪化作用，色彩在艺术设计中才具有如此重要的作用。,网页设计与制作案例教程（第2版）,1色彩的心理感觉,

37、不同的颜色给人带来不同的心理感受。红色红色是所有色彩中对视觉感觉最强烈和最有生气的色彩，它炽烈似火，壮丽似日，热情奔放如血，是生命崇高的象征。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。红色的这些特点主要表现在高纯度时的效果，当其明度增大转为粉红色时，就戏剧性地变成温柔、顺从和女性的性质。绿色 介于冷暖色彩之间，代表新鲜，充满希望、和平、青春，显得和睦，宁静，健康。从心理上，绿色令人平静、松驰而得到休息。绿色是大自然中植物生长、生机昂然、清新宁静的生命力量和自然力量的象征。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。橙色橙色常象征活力、精神饱满和交谊性。也是一种激奋的色彩，具有轻快，欢

38、欣，热烈，温馨，时尚的效果。黄色黄色是明度级最高的色彩，它光芒四射，轻盈明快，生机勃勃，具有温暖、愉悦、提神的效果，常为积极向上、进步、文明、光明的象征。具有快乐，希望，智慧和轻快的个性，它的明度最高。,网页设计与制作案例教程（第2版）,蓝色是最具凉爽，清新，专业的色彩。蓝色代表深远、永恒、沉静、理智、诚实、公正、权威，它是最具凉爽、清新特点的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛。紫色是红青色的混合，是一种冷红色和沉着的红色，它精致而富丽，高贵而迷人。偏红的紫色，华贵艳丽；偏蓝的紫色，沉着高雅，常象征尊严、孤傲或悲哀。白色白色代表纯洁、纯真、朴素、神圣和明快。具有洁白，明快，纯真，

39、清洁的感受。黑色具有深沉，神秘，寂静，悲哀，压抑的感受。灰色在商业设计中，灰色具有中庸，平凡，温和，谦让，中立和高雅的感觉。灰色是永远的流行色。在很多高科技产品中，都采用灰色表达高级、科技的形象。使用灰色时，多用于和其他色彩搭配，以防产生过于平淡、呆板、沉闷的感觉。,网页设计与制作案例教程（第2版）,2色彩的冷暖,冷暖色彩给人的心理情感上带来的变化是很丰富的。客观地讲，色彩本身并无冷暖的温度变化，引起冷暖变化的原因，是人的视觉对色彩引起的心理冷暖感觉联想。暖色用户见到红色、橙色、黄色、红紫色、橘红色等颜色后，马上联想到火焰、太阳、炉子、热血等物像，感觉到温暖、热烈等信息。儿童网站采用暖色调给人

40、以一种可爱温馨的感觉。冷色用户见到草绿、蓝绿、天蓝、深蓝等色后，很容易联想到草地、太空、冰雪、海洋等物像，产生广阔、寒冷、理智、平静等感觉。蓝色或绿色是大自然赋予人类的最佳心理镇静剂。人们都有这样的体会，当心情烦躁时，到公园或海边看看，心情会很快恢复平静。这是绿色或蓝色对心理调节的结果。医学专家研究表明，人在看到冷色系列的色调时，皮肤温度会降低1至2摄氏度，减少脉搏次数4至8次，降低血压、减轻心脏负担。例如蓝色和绿色，是希望的象征，给人以宁静的感觉，可以降低眼内压力，减轻视觉疲劳，安定情绪，使人呼吸变缓，心脏负担减轻，降低血压。比如，医院的网站一般采用平安镇静为主流的蓝色调。,网页设计与制作案

41、例教程（第2版）,中性色介于暖色系和冷色系之间的色彩是中性色。中性色给人的心理感觉相对较为柔和。,网页设计与制作案例教程（第2版）,3色彩的软硬,色彩的软硬感与明度有关系，明度高的色彩给人以柔软、亲切的感觉。明度低的色彩则给人坚硬、冷漠的感觉。在网站设计中，可利用色彩的软硬感来创造舒适宜人的色调。,网页设计与制作案例教程（第2版）,4色彩的大小,很多因素可以影响色彩的对比效果，色彩的大小就是其中最重要的因素之一。由于色彩有前后的感觉，因而暖色、高明度的色彩有扩大、膨胀感，冷色、低明度色有减小、收缩感觉。一般说来，暖色有扩散性并能够引起人们的注意，因而它们的前进感比较强；而冷色有收敛性且不大引人

42、注意，因而有滞后感。按大小感觉的划分，色彩的排列顺序为：红、黄、橙、绿、蓝、青。充分利用色彩的大小感觉也是常见的一种表达方法。,网页设计与制作案例教程（第2版）,5色彩的进退,网站色彩的前后感觉也是不容易忽视的，人眼晶状体对于距离的变化是非常精密和灵敏的，但是它总是有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长的暖色如红、橙色等，在视网膜上形成内侧映像；波长短的冷色如蓝、紫等色，则在视网膜上形成外侧映像。蓝、紫等光波短的色彩成像后感觉比较远，在同样距离内感觉就比较后退。相反，黄色就感觉近，有前进感。凡对比度强的色彩搭配具有前进感，对比度弱的色彩搭配就具

43、有后退感；膨胀的色彩具有前进感，收缩的色彩具有后退感；明快的色彩具有前进感，暧昧的色彩具有后退感。色彩的前进、后退感是色彩设计者共同感兴趣的问题，其实在绘画中常被用来加强画面空间层次，如画面背景或天空退远可选择冷色，色彩对比度也应减弱；为了使前景或主体突出，应选择暖色，色彩对比度也应加强。,网页设计与制作案例教程（第2版）,2.4 学习任务：网页中的色彩及配色,在艺术设计中，色彩的视觉冲击效力是最强的。一个网页首先呈现给浏览者的不是网页的版面布局，也不是网页的内容，而是网页的色彩。正是由于网页色彩的重要性，一个网页是否能够吸引人，网页的配色显得尤为重要。本节学习任务了解网页色彩的概念，掌握在网

44、页中色彩的数字表达方式，掌握网页的配色原理及技巧。,网页设计与制作案例教程（第2版）,2.4.1 网页色彩2.4.2 网页配色原理2.4.3 网页配色技巧,网页设计与制作案例教程（第2版）,2.4.1 网页色彩,在网页设计中，我们用到的色彩模式称为RGB模式。是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色。RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0255范围内的强度值。例如：纯红色R值为255，G值为0，B值为0；灰色的R、G、B三

45、个值相等（除了0和255）；白色的R、G、B都为255；黑色的R、G、B都为0。RGB图像只使用三种颜色，就可以使它们按照不同的比例混合，在屏幕上重现16777216种颜色。,网页设计与制作案例教程（第2版）,在 RGB 模式下，每种 RGB 成分都可使用从 0（黑色）到 255（白色）的值。例如，亮红色使用 R 值 246、G 值 20 和 B 值 50。当所有三种成分值相等时，产生灰色阴影。当所有成分的值均为 255 时，结果是纯白色；当该值为 0 时，结果是纯黑色。网页HTML语言中的色彩表达即是用这三种颜色的数值表示，例如：红色是color(255,0,0)十六进制的表示方法为(FF0

46、000)。白色为(FFFFFF)，我们经常看到的bgColor=#FFFFFF就是指背景色为白色。下图是网页设计软件中的颜色面板。可以看到，颜色可以在面板右下角用红绿蓝或者色调、饱和度、亮度色个属性表示出来。提示：Web安全色是指能在不同操作系统和不同浏览器之中同时安全显示的216种颜色。早期，在网页设计中，为了适应不同浏览器的兼容性，通常将网页的颜色控制到Web安全色范围之内。随着浏览器性能的提高，Web安全色的范围也越来越广了。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,2.4.2 网页配色原理,网页色彩搭配不仅是一项技术性工作，更是一项艺术性很强的工作。好的设计

47、师总能用自己独到的艺术素养将网页想要表达的情感通过色彩表达出来，达到良好的效果。网页色彩搭配设计时，首先要考虑网站本身特点，然后结合一定的艺术规律，这样才能设计出特色鲜明的网页。1色彩的适合性就是说色彩和网页所要表达的内容气氛相适合。这和不同色彩所要表达的情感有严格的关系。如用粉色体现女性站点的柔性，用深蓝色表现公司网站的严肃权威，用橙色表达商务网站的亲切时尚，用黑色体现游戏类网站的神秘，用浅绿色体现儿童网站的天真活泼。当你确定了网站的主题之后，网站的基调也就基本确定了。突破常规也未必是不可，除非你想有与众不同的艺术想象力。,网页设计与制作案例教程（第2版）,2色彩的鲜明性,网页的色彩要鲜明，

48、这样才能引起浏览者兴趣。一般说来，要选择一个主色调，然后再根据主色调确定其他颜色。虽然有很多种色彩存在于一个网页之中，但是因为有了主要的色彩。网页的特色还是以主色调为基础，使得网页个性鲜明。,网页设计与制作案例教程（第2版）,3色彩的独特性,有的时候，可以在一个网页中增加一种或若干种个性鲜明的色彩。这种尝试显然是比较冒险的，但是通过合理把握色彩的大小和与其他色彩之间的关系，使得整个网页显得更加活泼，这样也能给浏览者留下深刻印象。,网页设计与制作案例教程（第2版）,2.4.3 网页配色技巧,首先，网页设计用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，

49、在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。无论使用彩色，还是用黑白色设计网页，都要遵循一定的原则和技巧。,网页设计与制作案例教程（第2版）,1彩色搭配的技巧,使用一种色彩所谓的使用一种色彩，并不是指的是仅仅用一种颜色。这里是指先选定一种色彩，然后通过调整透明度或者饱和度，产生新的色彩。这样的页面看起来色彩统一，并且有层次感。使用邻近色邻近色就是在色环上相邻近的颜色。色彩的分布如下图所示。在色环中，任何一种颜色临近的颜色都有两种。相近的三种颜色搭配的时候，给人舒适自然的视觉效果

50、，因此在设计中经常使用。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,使用对比色所谓对比色，就是在色环上相对的两种色彩。由于色环上相对的颜色在色彩的冷暖等视觉效果是完全相反的，因此在使用时候对比极为强烈。为了达到较好的效果，可以适当调整对比色的亮度。,网页设计与制作案例教程（第2版）,网页设计与制作案例教程（第2版）,2非彩色搭配,黑白是最基本和最简单的搭配，白字黑底，黑底白字，对比强烈，简洁明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果对于网页中的某个元素，实在找不出合