第1章Web前端开发职业前景与必要认知
【导读】
随着互联网时代的到来及我国“互联网+”的提出，Web迎来大发展时代，伴之而来的是Web开发专业人才的需求激增。“Web前端开发工程师”是近些年才兴起的一个新岗位，Web前端开发工程师的主要工作是构建一个界面友好、交互性良好的Web页面。该岗位需要掌握哪些知识，具备哪些技能呢？本章从职业发展现状及前景出发，立足岗位需求，向读者介绍网页、网站和网站标准的知识。

本章主要让读者了解Web前端相关知识及Web前端开发职业，对Web前端开发技术有一个初步的认识，并掌握Web前端职业所需要掌握的基础知识。



(1) 了解Web前端开发岗位的现状及发展前景； 
(2) 掌握网页的组成、网站的开发过程及Web标准的相关知识等。

1.1Web前端开发岗位现状
1.1.1职业现状

随着互联网的不断发展，IT行业内又新增了数以百计的岗位，其中“Web前端开发工程师”是近些年才兴起的一个新岗位，Web前端开发的主要工作是构建一个界面友好、交互性良好的Web页面。那么该职位在IT行业内的需求量、薪酬待遇如何呢？我们在“智联招聘”网站上进行检索，以北京地区为参考，检索信息以当前日期为准，如图1.1所示。
通过观察、对比图1.1中检索到的信息不难发现，Web前端开发工程师是确实存在的一个岗位，且需求量大、薪酬待遇高。
Web前端开发工程师的技术难度如何呢？同样，也分别在各主流网站上进行了检索，如图1.2所示。


图1.1




图1.2




通过观察、对比检索到的信息可以得出，Web前端开发工程师的主要专业技术指标有以下几点： 
 熟练掌握HTML5和CSS3。
 熟练掌握JavaScript及JavaScript框架(JQuery、Vue、Angular、React等)中的一种。
 熟练掌握流行的前端响应式框架Bootstrap。
 熟悉各种前端调试工具、解决浏览器的兼容性问题。
1.1.2职业前景
当前中国互联网行业需求量最高的八大职位（不包括职能岗位和销售类岗位）分别是软件开发、新媒体运营、产品经理、软件测试、运维工程师、Web前端开发、UI设计和移动开发工程师。热门岗位中，无论从岗位席位数还是人才需求量来说，技术类岗位的占比都达到了70%。需求量位于前列的为软件开发、运维工师、Web前端开发、UI设计师。
从供需关系来看，人才供给最充足的是软件测试，最紧张的是Web前端开发，运维工程师次之。
1.2Web概述
Web(World Wide Web)即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联的网状结构。
1.2.1网页概述
1. 什么是网页

网页是一个文件，它存放在服务器(可以理解为一台计算机)上，而这台计算机必须与互联网相连才能够访问。网页经由网址(URL)来识别与存取，是万维网(WWW)中的一“页”，网页文件扩展名为.html或.htm。例如，打开浏览器，在地址栏中输入网址www.huayu.edu.cn，显示在浏览器中的就是“山东华宇工学院”的首页，如图1.3所示。

图1.3



(1) internet。
internet就是通常所说的互联网，是由一些使用公用标准语言互相通信的计算机连接而成的网络。互联网就是将世界范围内不同国家、不同地区的众多计算机连接起来形成的网络平台。
互联网实现了全球信息资源的共享，形成了一个能够共同参与、相互交流的互动平台。因此，可以说互联网的出现在人类通信技术史上具有里程碑的意义。
(2) WWW(World Wide Web，环球信息网的缩写，也可简称为 Web，中文名叫万维网)是一个基于超文本(Hypertext)方式的信息检索服务工具。这种把全球范围内的信息组织在一起的超文本方法，采用的是由指针链接的超网状结构。Web系统允许超文本指针所指向的目标信息源不仅可以是文本，也可以是其他媒体，如图形、图像、声音、动画等信息，更重要的是可以把分散在不同主机上的资源有机地组织在一起，这种超文本结构与多媒体的结合体，被称为“超媒体”(Hypermedia，现在已变为 UltraMedia)。
Web系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用。WWW的应用已远超原有的设想，成为Internet上最受欢迎的应用之一，它的出现极大地推动了Internet的推广。WWW获得成功的秘诀在于它制定了一套标准的、易于人们掌握的超文本开发语言、信息资源的统一定位格式和超文本传输通信协议，用户掌握后可以很容易地建立自己的网站。
(3) 超链接(Hyper Link)指向 WWW中的资源，如一个网页、声音、文件、网页的一个段落或 WWW中的其他资源等，这些资源可放在任何一个服务器上。一个超链接可以是一些文字，也可以是一张图片。
(4) 统一资源定位器(Uniform Resource Locator，URL)用于描述 Internet上资源的位置和访问方式，也可以把 URL称为网址，它的功能相当于在实际生活中写信的通信地址。如www.huayu.edu.cn就是山东华宇工学院网站的官方网址。
(5) W3C(World Wide Web Consortium，万维网联盟）是国际著名的标准化组织。W3C最重要的工作是发展Web规范，自1994年成立以来，已经发布了200多项影响深远的Web技术标准和实施指南，例如超文本标签(标记)语言(HTML)、可扩展标签(标记)语言(XML)等。这些规范有效促进了Web技术的兼容，对互联网的发展和应用起到了支撑作用。
2. 网页的构成
在Internet早期，网页只能保存纯文本。经过几十年的发展，图像、声音、动画、视频等技术已经在网页中得到广泛应用，网页也发展成为集视听为一体的媒体，并且通过动态网页技术，使用户之间、用户与网站管理者之间进行互动。
从浏览者的角度看，网页中常见的构成元素有文本、图像、音频、视频、动画等。但从专业的角度来讲，这些元素都有自己的名字，可以将它们分为站标、导航条、广告条、标题栏、按钮等。
1) 站标
站标也称为logo，是网站的标志，其作用是使人看到它就能联想到企业。因此，网站的logo通常采用企业的logo。
logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也可以是图文组合，如图1.4和图1.5所示。

图1.4



图1.5



在网页设计中，通常把logo放在页面的左上角，大小没有严格要求。不过，考虑网页显示空间的限制，要求logo的尺寸不能太大。
如果要自己设计网站的logo，应掌握以下设计技巧： 
 保持视觉平衡，讲究线条的流畅，使整体形状美观。
 用反差、对比或边框等强调主题。
 选择恰当的字体。
 注意留白，给人以想象空间。
 运用色彩。
2) 导航条
导航条是网站设计中不可缺少的基础元素之一，它是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。导航条的设计应该引人注目。浏览者进入网站，首先会寻找导航条，通过导航条可以直接地了解网站的内容及信息的分类方式，以判断这个网站上是否有自己需要的资料和感兴趣的内容。
在网页的上端或左侧设置主导航要素的情况是比较普遍的方式，这样能给用户带来很多便利，如图1.6所示。


图1.6


但为了使自己的网站与其他网站区分开，并让人富有创造力，有些网站在导航的构成或设计方面打破了传统的普遍使用的方式，独辟蹊径，自由地发挥自己的想象力，追求导航的个性化，如图1.7所示的个性化导航。


图1.7


导航条是网页界面中非常重要的要素，导航条设计的好坏决定着用户能否方便地浏览网站。一般来说，导航要素应该设计得直观而明确，并最大限度地方便用户。网页设计师在设计网站时应该尽可能地使网站页面间的切换更容易，查找信息更快捷，操作更方便。
网站导航条常见的分类如下。
(1) 横向导航条。
横向导航一般用作网站的主导航，门户类的网站更是如此。由于门户类网站的分类导航较多，且每个频道均有不同的样式，因此在网站的顶部固定一个区域设计统一样式且不占用过多空间的导航是最理想的选择，如图1.8所示的山东华宇工学院首页导航。

图1.8



图1.9


(2) 纵向导航条。
在门户网站中很少用到纵向导航。纵向导航更倾向于表达产品分类。例如，很多购物网站和电子商务网站都提供了对全部商品进行分类的导航菜单，以方便浏览者快速找到想要的内容，图1.9所示的“京东商城”导航。

(3) 下拉式导航条。
下拉式导航可以节省大量的版面空间，对于内容多而分类比较复杂的网站来说，下拉式导航是最适合不过的了。下拉式导航在电子商务类网站的应用较多，它可以帮助浏览者寻找更详细的分类，如图1.10所示。

图1.10


3) 广告条
广告条又称banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。banner的尺寸可以根据页面需要来安排。图1.11所示为山东华宇工学院首页banner。

图1.11


在banner的制作过程中需要注意以下几点： 
 banner可以是静态的也可以是动态的。现在使用动态的居多，容易引起浏览者的注意。
 banner的体积不宜过大，尽量使用GIF格式的图片与动画或Flash动画，因为这两种格式的动画文件体积小，载入时间短。
 banner的文字不要太多，只要达到一定的提醒效果就可以，通常一两句企业广告语即可。
 banner中的图片颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果，因为GIF格式文件仅支持256种颜色，颜色的连续变换会出现明显的断层甚至光斑，影响效果。
4) 标题栏
这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题，是各版块内容的概括。它使得网页内容的分类更清晰明了，大大地方便了浏览。
标题栏可以是文字加不同颜色背景，也可以是图片。一般的大型网站都采用前者，一些内容少的小网站采用后者，如图1.12所示。

图1.12


5) 按钮
在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页的按钮被单击之后，网页会实现相应的操作，比如页面跳转，或者信息搜索等，如图1.13所示。

图1.13


设计按钮时，要注意以下几点： 
 要保证按钮与页面的协调，不能太抢眼，也不宜使用过多的颜色。
 如果按钮上有字则尽量使用单色或渐变背景，保证字迹的清晰。
 当页面上有多个按钮的时候，应分清主次，根据版面的需要改变按钮的颜色或者大小。
3. 网页的布局类型
网页的基本元素有了，如何让这些元素合理、有序地排列起来，形成优美的网页呢？这就是网页布局。常见的网页布局类型主要包括国字形、匡字形、三字形、川字形、封面型等。合理的页面布局，不仅会给浏览者赏心悦目的感觉，还能增加网站的吸引力。
(1) 国字形。也称同字形，即最上面是网站的标题以及横幅广告条，接下来是网站的主要内容，最左侧和最右侧分列一些小条目内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这是使用最多的一种结构类型，如图1.14所示。


图1.14


(2) 匡字形。也称拐角形，这种结构与国字形结构很相近，上面是标题及广告横幅，下面左侧是一窄列的链接等，右侧是很宽的正文，下面也是一些网站的辅助信息，如图1.15所示。

(3) 三字形。这是一种比较简洁的布局类型，其页面在横向上被分隔为三部分，上部和下部放置一些标志、导航条、广告条和版权信息等，中间是正文内容，如图1.16所示。
(4) 川字形。整个页面在垂直方向上被分为3列，内容按栏目分布在这3列中，最大限度地突出栏目的索引功能，如图1.17所示。




图1.15




图1.16




图1.17


常见的网页布局类型还包括标题文本型、封面型、Flash型等。
标题文本型即页面内容以文本为主，最上面一般是标题，下面是正文的格式。

封面型基本出现在一些网站的首页，大部分由一些精美的平面设计和动画组合而成，在页面中放几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型的网页布局大多用于企业网站或个人网站。
Flash型是指整个网页就是一个Flash动画，这是一种比较新潮的布局方式。其实，这种布局与封面型在结构上是类似的，无非使用了Flash技术。
1.2.2网站概述
1. 网站

因特网起源于美国国防部高级研究计划管理局建立的阿帕网。网站(website)开始是指在因特网上，根据一定的规则，使用HTML(标准通用标记语言下的一个应用)等工具制作的用于展示特定内容的相关网页的集合。网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。国内比较知名的门户网站有新浪、搜狐、网易； 电子商务网站有京东、苏宁、当当等。
2. 网站前端开发
1) 网站设计
(1) 确定网站主题的原则。
 主题要小而精。
 题材应结合本身的特点和优势。
 题材不要太滥，目标不要太高。
(2) 网站整体规划。
整体规划主要包括网站的目标、网站的名称、网站的功能、网站的内容、网站的风格、网站的结构以及网站的技术实现等。 
① 网站的目标。
建设一个网站从一开始就应该有一个明确的目标，可以从以下几点来考虑： 
 明确网站将来的访问对象，即明确网站的服务对象。
 明确网站提供的服务项目。
 明确网站的发展定位，确定网站的发展方向。
网站的目标定位要冷静、认真地去思考，不要好高骛远，这样才能够实实在在确定网站的目标。
② 网站的名称。
确定网站的主题之后，就可以确定网站的名称。名称至关重要，它对网站的形象和宣传推广具有重大的影响。因此，网站的名称应该正气、易记、有特色。
③ 网站的功能。
网站的功能设计在网站的建设当中起着相当重要的作用，是整个网站规划中最为核心的一步。设计出新颖强大的功能，对于网站的建设、推广和营销来说是非常重要的一环。设计网站功能时，设计者应以网站的目标、内容为基础，从考虑如何实现网站目标，体现网站内容出发。
④ 网站的内容。
网站的内容设计是网站规划的一项重点工作，它直接影响到一个网站的受欢迎程度。因此，网站的内容结构必须清晰，注意突出网站的形象和特色。网站内的网页应由多种成分组成，但图像和多媒体信息的使用要适中。网站的内容结构应以用户方便浏览为原则，尽量选择突出网站特色的内容。
⑤ 网站的风格。
网站的风格是一个抽象的概念，是指网站的整体形象给浏览者的综合感觉。它是通过网页元素来体现的，网页色彩、平面构成、文字、图像等元素都会直接影响网站的风格。 
⑥ 网站的结构。
网站的结构就是对网站的内容、功能进行一个层次化的组织，包括网站的目录结构和链接结构。清晰的目录结构有利于站点的维护，而优秀的链接结构有利于使用最少的链接，达到最大的链接效果。
(3) 收集素材。
在制作网页之前，应首先收集好制作网页时要使用的素材，包括文字资料、图片、动画、声音、视频等。收集的素材要保证其真实性和合法性。对于一些原始的素材还可以使用Photoshop、Fireworks、Flash等软件进行处理，使其可以更好地应用于网页。
提供网页素材下载的网站有素材网、网页制作大宝库、中国站长站和素材中国等。图1.18所示为素材中国的网站。


图1.18


2) 网站前端制作
网站前端制作是将Web页面或App等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
1.3Web标准
Web前端开发作为计算机行业中的一个岗位，它也应该符合一定的行业标准，让从业者有据可循。
1.3.1Web标准概念
Web标准，即网站标准。实际上，Web标准并不是某一个标准，而是一系列标准的集合。由于Web设计越来越趋向于整体与结构化，对于网页设计者来说，理解Web标准首先要理解结构(内容)和表现分离的意义，结构(内容)和表现的分离是Web标准中最重要的标准之一，所谓的结构(内容)和表现分离就是结构(内容)在单独的一个文件中，表现样式在另一个单独的文件中，通过在两者之间建立起的链接关系，将表现样式中的样式效果应用到结构(内容)，从而使结构(内容)呈现出所需要的样式效果。在Web标准中构成网页的三个主要内容是结构(内容)、表现(CSS样式)、行为。
1. 结构(内容)
结构(内容)就是网页页面实际要向客户传递的信息，它可能包含文字信息、图片信息、视频信息等，而一个页面结构（内容）是由标题、段落、列表等组成的，如图1.19所示。


图1.19


2. 表现(CSS样式)
如何让上述结构(内容)看起来更加美观、大方，给用户更好的体验呢？这就需要通过表现样式来实现，如图1.20所示。

图1.20


这就好比内容就是我们人本身，而表现就是各种各样漂亮的衣服和装饰品，穿戴上漂亮衣服和装饰品的我们看起来更加漂亮，更加有气质。
3. 行为
对于现代网页来说，我们更强调用户的体验和与用户的友好交互。行为就是对内容的交互及操作。也就是说，设计网页不仅仅考虑向用户传递内容，还需要考虑用户的感受，要与用户进行交流互动。例如，在网上购物，首先需要注册成为会员，才能实现在网上购物、查看订单和物流信息等，这就是最为常见的交互行为，如图1.21所示。


图1.21


1.3.2Web标准语言
应用Web标准语言是实现Web标准的第一步，下面来介绍Web标准语言。
1. 结构化标准语言——HTML
网页上的文字、图形、图像、动画、视频、音频等多媒体信息是如何呈现出来的呢？答案就是通过HTML，HTML作为一种描述性的标记语言，用于描述超文本中的内容和结构。当浏览器接收到HTML文件后，就会解释执行里面的标记，然后把标记相对应的功能或内容表现出来。
HTML最早源于SGML(Standard General Markup Language，标准通用化标记语言)。2000年，W3C公布发行了XHTML 1.0版本。不过XHTML并没有成功，而HTML5便因此孕育而生。
2012年12月17日，W3C宣布凝结了大量网络工作者心血的HTML5规范正式定稿，确定了HTML5在Web网络平台奠基石的地位。
2014年10月底，W3C宣布HTML5正式定稿，网页进入了HTML5开发的时代。
2. 表现标准语言——CSS 
CSS(Cascading Style Sheets，层叠样式表单)简称为样式表，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS能将样式的定义与HTML文件内容分离，只要建立定义样式的CSS文件，并且让所有的HTML文件都调用这个CSS文件所定义的样式即可。
早在2001年5月，W3C就着手开发CSS第3版规范——CSS3规范，它被分为若干个相互独立的模块。CSS3的产生大大简化了编程模型，它不是仅对已有功能的扩展和延伸，更多的是对Web UI设计理念和方法的革新。CSS3配合HTML5标准，将引起一场Web应用的变革，甚至是整个Internet产业的变革。
3. 行为标准语言——JavaScript
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。JavaScript是一种解释型脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，是广泛用于客户端的脚本语言。
ECMAScript是ECMA( European Computer Manufacturers Association，欧洲计算机制造商协会)国际以JavaScript为基础制定的标准脚本语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上JavaScript和JScript是ECMA262标准的实现和扩展。
1.3.3如何制作网站才符合Web标准
要想制作出符合Web标准的网站，光理解概念还是不够的，必须要在不断的实践中掌握技巧，在不断学习中提高网站架构设计方面的经验。下面简单介绍制作Web标准网站的准则。
1. 使用Web标准语言
制作的网站只有使用了Web标准语言，才是实现Web标准的第一步。
2. 结构和表现分离
1) 结构语义化
HTML5提供了相当丰富的语义化标签，要充分利用好这些标签，一方面使网页的内容结构更加清晰，另一方面便于搜索引擎的抓取和收录。如标题应该包含在h1～h6中，段落文字应该包含在<p>中，列表项应放在<ul>、<ol>、<dl>中，头部内容包含在<header>中。
2) CSS控制表现
网页的外观样式应由CSS文件统一控制，在控制样式及给选择器命名时，建议做到以下规范： 
 多个单词组成的长名称使用短横线()来命名。
 .id标识是唯一的，一般用在JavaScript中，class可以重复使用，一般用来给样式选择器命名。
3. W3C
一个符合Web标准的网站，首先得要实现结构和表现分离，并且使得结构页面和样式文档都能通过W3C的代码校验。
W3C提供了一个校验网站脚本各方面语法的程序，地址可以到W3C的官方网站(https://www.w3.org)查询。
1.3.4Web标准的优势
 文件下载与页面显示速度更快。
 内容能被更多的用户(包括失明、视弱、色盲等残障人士)所访问。
 内容能被更广泛的设备(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等)所访问。
 用户能够通过样式选择定制自己的表现界面。
 所有页面都能提供适于打印的版本。
 更少的代码和组件，容易维护。
 带宽要求降低(代码更简洁)，成本降低。举个例子，当ESPN.com使用CSS改版后，每天节约超过2MB带宽。
 更容易被搜寻引擎搜索到。
 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版。
 提供打印版本而不需要复制内容。
 提高网站易用性。在美国，有严格的法律条款(Section 508)来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。
 由于结构清晰，数据的集成、更新和处理更加方便灵活。










第2章设计“盛和景园”网站
【导读】
网站设计是网站开发的第一步，网站的设计效果直接决定了网页的效果和网站开发的成败。因此在进行页面设计之前，需要进行充分而必要的准备。首先是网站需求分析的建立，分析网站的功能及建站的目的，确定用户群和网站内容等确定网站主题； 在确定了主题之后，接下来进行网站的整体规划，包括网站的目标定位、网站的风格设计、网站的页面创意设计； 在网站策划好后，就是搜集建站所需的相关资料和素材了。其次是页面设计的具体实现，使用Photoshop等图像处理软件进行页面效果图设计。页面效果图主要包括网站的首页效果图和子页效果图。将效果图设计好后交给客户查看，客户查看后提出修改意见，设计人员根据客户意见进行修改，并确定最终网站的页面效果。

2.1任务一： “盛和景园”房产网站需求分析的建立

通过本任务的学习，掌握网站需求分析的建立。

在进行网站开发之前，首先要对网站进行需求分析，包括网站的主题、网站的整体规划及素材准备等。

网页的色彩是树立网站形象的关键之一。网页的背景、文字、图标、边框、超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好地表达出预想的内涵呢？这就需要对色彩知识有一个了解。下面从色彩的基本知识、色彩的三要素、色彩分析以及网页中的色彩搭配等几方面分别进行介绍，为网页中色彩的准确应用奠定基础。
1. 色彩的基本知识
显示器的颜色属于光源色。所以颜色以光学颜色RGB为主。在显示器屏幕内侧均匀分布着红色(red)、绿色(green)、蓝色(blue)的荧光粒子，当接通显示器电源时显示器发光并以此显示出不同的颜色。显示器的颜色是通过光源三原色的混合显示出来的。显示器可以显示出多达1600万种颜色。 
网页颜色主要是由3种基本颜色组成的，它们是红、绿、蓝，其他的颜色是由这3种颜色调和而成的。
例如，黄=红+绿，紫色=红+蓝，白色=红+绿+蓝。
用6个十六进制数来表示红、绿、蓝3种颜色的含量，组成一个6位的十六进制数，就是RGB颜色。
例如，红色为#FF0000，绿色为#00FF00，蓝色为#0000FF，白色为#FFFFFF。
通常情况下，RGB各有256级亮度，一共可以组合出256×256×256=16777216，简称1600万色，也称为24位色。

(1) 网页的颜色是由三基色构成的，所以颜色值可以采用rgb 代码的背景颜色，如红色(rgb(255,0,0))。如果设置的颜色包含透明度的设置，采用rgba代码的背景颜色，如rgba(255,0,0，0.8)，即不透明度为80%红色背景。
(2) 在网页表现样式中，当采用十六进制代码表示颜色时，如果有些颜色代码是可以缩写的，那就尽量缩写，其规则是： 当前两位一样，中间两位一样，最后两位也一样(当然包括6个值都一样)，此时就可以缩写成3位的形式。如#003366可以缩写为#036； #ffffff可以缩写为#fff。
(3) 在网页表现样式中，还可以采用颜色名称。如red(红色)、seagreen(海绿)。建议采用十六进制代码来表示颜色，因为对于颜色名称不可能记住那么多。
2. 色彩的三要素
1) 色相
色相也叫色泽，是色彩最基本的特征，反映颜色的基本面貌。色相是一种色彩区别于另一种色彩的最主要因素。

图2.1



色相最基本的代表色是红、黄、绿、青、紫5种。这5种颜色在人们的心理方面有明确的特征，色相的心理反应特征是暖色或冷色。色相之间的关系可以用色相环表示，如图2.1所示，除了主要的5种色相外，橙、黄绿、蓝绿、蓝紫和紫红成为中间色相。人的眼睛可以分辨出约180种不同色相的颜色。

2) 明度
明度是指色彩的深浅、明暗，取决于反射光的强度。任何色彩都存在明暗变化。其中，黄色明度最高； 紫色明度最低； 绿、红、蓝、橙的明度相近，为中间明度。另外，在同一色相的明度中还存在深浅的变化。如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。有明度差的色彩更容易调和。如紫色(#993399)与黄色(#ffff00)、暗红(#cc3300)与草绿(#99cc00)、暗蓝(#0066cc)与橙色(#ff9933)等。
3) 纯度
纯度是指色彩的鲜艳程度，也称色彩的饱和度。其取决于该颜色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越大； 消色成分越大，饱和度越小，如图2.2所示。

图2.2


一种颜色的纯度越高，色彩就越鲜艳，如果纯度逐渐降低，就会越来越暗淡。以蓝色为例，向纯蓝色中加入一点白色，纯度下降而明度上升，变为淡蓝色。继续加入白色的量，颜色会越来越淡，纯度下降，而明度持续上升。反之，加入黑色或灰色，则相应的纯度和明度同时下降。
所有色彩都由三原色组成，因此原色的纯度最高。
3. 色彩分析
不同的颜色会给浏览者不同的心理感受。
1) 红色
红色是一种激奋的色彩； 有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉； 被用来传达有活力、积极、热诚、温暖、前进等含义的形象与精神，如图2.3所示。

图2.3


2) 绿色
绿色介于冷暖两种色彩的中间，给人和睦、宁静、健康、安全的感觉，如图2.4所示。


图2.4


3) 紫色
紫色色彩心理象征着女性化，代表着高贵和奢华、优雅和魅力，也象征着神秘与庄重、神圣和浪漫，如图2.5所示。


图2.5