书名：网站设计 开发 维护 推广 从入门到精通
ISBN：978-7-115-42501-0
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
本书全面、详实地介绍了网站设计、开发、维护、推广的具体方法和步骤。其中不仅包括静态网页的制作、动态网站的开发、网站的推广与宣传等内容，还包括综合性的整站建设案例。此外，附录中还包括“网页制作常见问题精解”等有助于读者速学、速查的内容。
全书共分为19章，以“入门篇→网页设计与制作篇→动态网站开发篇→网站发布与维护篇→综合案例篇”为线索具体展开，涵盖了制作网页、开发网站等方面的内容。书中涉及大量的实例，难度由低到高、循序渐进，并注重技巧的归纳和总结。
本书语言简洁、内容丰富，适合网页设计与制作人员、网站建设与开发人员、大中专院校相关专业师生、网页制作培训班学员、个人网站爱好者与自学者阅读。
互联网信息技术彻底改变了人们的生活和工作。越来越多的企业和个人建立起网站来宣传自己。人才市场上对网页制作和网站建设人员的需求大大增加，但是网站建设是一项综合性技能，包括网站策划、网页设计和动态网站的开发等几部分，真正完全懂得这几项技能的网页设计师则相对较少，因此我们编写了本书。本书首版在2006年出版后，销量在同类书籍中一直名列前茅，经过十多次重印，销售达三万多册，并且获得了2007年最佳科技图书奖。2013年升级第二版后，又经过多次重印。本次改版不但更新了所有的操作实例步骤，还重点增加了Web标准与Div布局方面的内容。
本书分为入门篇、网页设计与制作篇、动态网站开发篇、网站发布与维护篇、综合案例篇和附录六个部分，详细介绍了如何进行网站的前期策划，如何综合使用Dreamweaver CC、Photoshop CC、Flash CC等网页制作和美化工具来建设网站，如何在ASP环境下建设动态网站，以及数据库的创建、网站的推广与宣传等内容。附录中还包括了网页制作中各种常见的问题，能够帮助读者速学、速查。
知识系统、全面：本书从基础知识开始讲起，逐步介绍网页的制作、图像和动画的设计、动态网站的开发、网站的管理和维护等，最后给出了综合实例，力求还原一个真实的网站建设任务，让读者的学习更有针对性。
基础+实例：为了使读者能够真正掌握网页设计的技巧，书中通过大量实例，全面介绍了网页设计和网站建设的各个环节。在讲解时对操作过程中的每一个步骤都有详细说明，不论是初学者，还是有一定基础的读者，只要根据这些步骤一步一步地操作，就能顺利完成整个实例。
本书配备了PPT电子课件，便于老师课堂教学和学生把握知识要点。
附录中给出了网页制作常见问题精解，能够帮助读者及时解决网页制作过程中出现的各种常见问题。
网页设计与制作人员
网站建设与开发人员
大中专院校相关专业师生
网页制作培训班学员
个人网站爱好者与自学者
本书写作人员中既包括资深网页设计培训教师，又包括一线的网页制作和网站建设人员，这使得本书理论与实践并重，方法与技巧并存。在编写过程中，我们力求精益求精，但难免存在一些不足之处，读者使用本书时如果遇到相关技术问题，请发邮件至1005431430@qq.com与我们联系。
编 者
■ 第1章 网页设计基础
■ 第2章 网站页面配色和创意
利用Dreamweaver CC中的可视化编辑功能，可以快速创建网页而不需要编写任何代码，这对于网页制作者来说，工作变得很轻松。文本是网页中最基本和最常用的内容，是网页信息传播的重要载体。学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的。
学习目标
在具体学习网页设计与制作前，需要了解什么是静态网页和动态网页，动态网页是怎么交互的，为以后的学习打好基础。
在网站设计中，纯粹HTML格式的网页通常称为“静态网页”，早期的网站一般都是由静态网页制作的，静态网页是以.htm、.html、.shtml和.xml等为后缀。在HTML格式的网页上，也可以出现各种动态的效果，如GIF格式动画、Flash滚动字幕等。这些“动态效果”只是视觉上的，与下面将要介绍的动态网页不同。
静态网页的特点简要归纳如下。
图1-1 宣传介绍性的静态网页
纯粹的静态网页网站通常需要手工制作网页，对于网站维护人员有一定的专业要求，并且当网站内容更新较多时，手工制作静态网页会显得相当繁琐，于是通过后台信息发布方式的动态网站技术很快在网站中得到普及应用。
所谓动态网页，就是该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的后缀一般根据不同的程序设计语言来定，如ASP文件的后缀为.asp。动态网页能够根据不同的时间、不同的来访者而显示不同的内容，还可以根据用户的即时操作和即时请求，使动态网页的内容发生相应的变化。如常见的BBS、留言板、搜索系统和聊天室等就是用动态网页来实现的。图1-2所示为交友网站中的会员搜索系统。
图1-2 会员搜索系统
如果在下拉列表中选择不同的查询条件，单击“查询”按钮后会显示不同的网页内容，这就是动态网页所具有的典型特征。这种交互式的行为利用单纯的HTML语言是无法实现的，它需要将内容存储在数据库中，在服务器端利用动态编程语言来实现，如ASP、PHP、JSP等。这样的程序不仅能处理从浏览器端表单提交的数据，而且可以根据这些数据动态地反馈给用户。
制作网页第一件事就是要选定网页制作软件。虽然用记事本手工编写源代码也能做出网页，但这需要对编程语言相当了解，并不适合于广大的网页设计爱好者。由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作。
Flash、Dreamweaver和Photoshop这三款软件相辅相成，是制作网页的首选工具，其中Dreamweaver主要用来制作网页文件，利用Dreamweaver制作出来的网页兼容性好，制作效率也很高；Flash用来制作精美的网页动画；Photoshop用来处理网页中的图形。
Dreamweaver是Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具。
Dreamweaver CC是最新推出的网页制作软件，它提供了方便快捷的工具，不仅使得网页制作过程更加直观，同时也大大简化了网页制作步骤，以快速制作网站雏形、设计、更新和重组网页。图1-3所示为Dreamweaver CC的工作界面。它是由菜单栏、插入栏、文档窗口、属性面板以及浮动面板组组成，整体布局显得紧凑、合理、高效。
图1-3 Dreamweaver CC的工作界面
Photoshop是Adobe公司推出的图像处理软件，目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展，Photoshop已历经数次版本更新，目前最新版本为Photoshop CC。图1-4所示为利用Photoshop CC设计的网页图像。
图1-4 Photoshop CC设计的网页图像
Flash是一款动画创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其他可交互的内容。Flash可以用来制作简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。
要正确、高效地运用Flash CC软件来制作动画，必须了解Flash CC的工作界面及各部分功能。Flash CC的工作界面由菜单栏、工具箱、属性面板、时间轴、舞台和面板等组成，如图1-5所示。
图1-5 Flash CC的工作界面
网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但它们有许多相近之处，应加以利用和借鉴。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。
网页在设计上与平面设计有许多共同之处，如报纸等，因此也要遵循一些设计的基本原则。熟悉一些设计原则，再对网页的特殊性作一些考虑，便不难设计出美观大方的页面来。网页页面设计有以下基本原则，熟悉这些原则将对页面的设计有所帮助。
在一个页面上，必须考虑视觉的中心，这个中心一般在屏幕的中央或者在中间偏上的部位。因此，重要的文章和图像一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。
较长的文章或标题，不要编辑在一起，要有一定的距离；同样，较短的文章，也不能编排在一起。对待图像的安排也是这样，要互相错开，使大小图像之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。
文字和图像具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图像太多，缺少文字，必然会减少页面的信息容量。因此，最理想的效果是文字与图像的密切配合，互为衬托，既能活跃页面，又使页面中有丰富的内容。
保持简洁的常用做法是使用醒目的标题，这个标题常常采用图形表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。一般每页使用的字体不超过三种，一个页面中使用的颜色只需两三种。
要保持一致性，可以从页面的排版下手：各个页面使用相同的页边距、文本；图形之间保持相同的间距；主要图形、标题或符号旁边留下相同的空白。
格式美观的正文、和谐的色彩搭配、较好的对比度、具有较强可读性的文字、生动的背景图案、大小适中的页面元素、布局匀称、不同元素之间有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。
考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多。主题颜色通常只需要两三种，并采用一种标准色。
在网页的视觉构成中，点、线和面既是最基本的造型元素，又是最重要的表现手段。在布局网页时，点、线、面是需要最先考虑的因素。只有合理安排好点、线、面的相互关系，才能设计出具有最佳视觉效果的页面，充分表达出网页的最终目的。网页设计实际上就是处理好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。
在网页中，一个单独而细小的形象可以称之为点，如一个汉字可以称为一个点。点也可以是一个网页中相对微小单纯的视觉形象，如按钮、Logo等。图1-6所示为点的视觉构成。
图1-6 点的视觉构成
点是构成网页的最基本单位，起到让页面活泼生动的作用。使用得当，甚至可以起到画龙点睛的作用。
一个网页往往需要由数量不等、形状各异的点来构成。点的形状、方向、大小、位置、聚集、发散，能够给人带来不同的心理感受。
点的延伸形成线，线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一，是决定页面形象的基本要素。线分为直线和曲线两种。线的总体形状有垂直、水平、倾斜、几何曲线、自由线这几种。
线是具有情感的。如水平线给人开阔、安宁、平静的感觉；斜线具有生动、不安、速度和现代感；垂直线具有庄严、挺拔、力量和向上的感觉；曲线给人柔软流畅的女性特征；自由曲线是最好的情感抒发手段。将不同的线运用到页面设计中，会获得不同的效果。
水平线的重复排列形成一种强烈的形式感和视觉冲击力，能够让人第一眼就产生兴趣，达到了吸引访问者注意力的目的。
自由曲线的运用，打破了水平线的庄严和单调，给网页增加了丰富、流畅、活泼的气氛。水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比，从而将视觉中心有力地衬托出来。图1-7所示为使用线条布局的网页。
图1-7 使用线条的网页
面是点和线的组合，具有一定的面积和质量，占据的空间更多，因而相比点和线来说视觉冲击力更大、更强烈。
面的形状可以大概分为以下几种。
图1-8 使用圆角矩形的网页
面具有自己鲜明的个性和情感特征，只有合理地安排好面的关系，才能设计出充满美感、艺术而实用的网页。
网站就是把一个个网页系统地链接起来的集合，按其内容的不同可分为个人网站、企业类网站、娱乐休闲类网站、行业信息类网站、门户网站和购物类网站等，下面分别进行介绍。
个人网站一般是个人为了兴趣爱好或展示个人等目的而建的网站，具有较强的个性化特色，带有很明显的个人色彩，无论是内容、风格，还是样式，都形色各异，包罗万象。个人网站是由一个人来完成的。相对于大型网站来说，个人网站的内容一般比较少，但是技术的采用不一定比大型网站的差。很多精彩的个人网站的站长往往就是一些大型网站的设计人员。图1-9所示为个人网站。
图1-9 个人网站
随着信息时代的到来，网站作为企业的名片越来越受到重视，成为企业宣传品牌、展示服务与产品乃至进行所有经营活动的平台和窗口。企业网站是企业的“商标”，在高度信息化的社会里，创建富有特色的企业网站是最直接的宣传手段。通过网站可以展示形象，扩大影响力，提高知名度。图1-10所示为企业类网站。
图1-10 企业类网站
娱乐休闲类网站大都是以提供娱乐信息和流行音乐为主的网站，如很多在线游戏网站、电影网站和音乐网站等，它们可以提供丰富多彩的娱乐内容。这类网站的特点也非常显著，通常色彩鲜艳明快、内容丰富，多配以大量图片，设计风格或轻松活泼、或时尚另类。图1-11所示为娱乐休闲类网站。
图1-11 娱乐休闲类网站
随着互联网的发展、网民人数的增多以及网上不同兴趣群体的形成，门户网站已经明显不能满足不同上网群体的需要。一批能够满足某一特定领域上网人群及其特定需要的网站应运而生。由于这些网站的内容服务更为专一和深入，因此人们将其称为行业信息类网站，也称为垂直网站。行业信息类网站只专注于某一特定领域，并通过提供特定的服务内容，有效地把对某一特定领域感兴趣的用户与其他网民区分开来，并长期持久地吸引着这些用户，从而为其发展提供理想的平台。图1-12所示为行业信息类网站搜房网。
图1-12 行业信息类网站
门户类网站将无数信息整合、分类，为上网者打开方便之门。绝大多数网民通过门户类网站来寻找自己感兴趣的信息资源，巨大的访问量给这类网站带来了无限的商机。门户类网站涉及的领域非常广泛，是一种综合性网站，如搜狐、网易和新浪等。此外这类网站还具有非常强大的服务功能，如搜索、论坛、聊天室、电子邮箱、虚拟社区和短信等。门户类网站的外观通常整洁大方，用户所需的信息在上面基本都能找到。
目前国内较有影响力的门户类网站有很多，如新浪（www.sina.com.cn）、搜狐（www.sohu. com）和网易（www.163.com）等。图1-13所示为门户类网站新浪首页。
图1-13 门户类网站
随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚。凭借丰富的商品、实惠的价格、快捷的送货，网购已成为人们购物首选方式。网上购物也为商家有效地利用资金提供了帮助，而且通过互联网来宣传自己的产品覆盖面更广，因此现实生活中涌现出了越来越多的购物网站。
在线购物网站在技术上要求非常严格，其工作流程主要包括商品展示、商品浏览、添加购物车和结账等。图1-14所示为购物类网站。
图1-14 购物类网站
文本是人类重要的信息载体和交流工具，网页中的信息也是以文本为主。虽然文字不如图像直观形象，但是却能准确地表达信息的内容和含义。在确定网页的版面布局后，还需要确定文本的样式，如字体、字号和颜色等，还可以将文字图形化。
在网页中，中文默认的标准字体是宋体，英文默认是The New Roman。如果在网页中没有设置任何字体，在浏览器中将以这两种字体显示。
字号大小可以使用磅（pt）或像素（px）来确定。一般网页常用的字号大小为12磅左右。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在同一页面中，如果字体种类少，则版面雅致、有稳重感；如果字体种类多，则版面活跃、丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
行距的变化也会对文本的可读性产生很大影响，一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即字用10磅，则行距用12磅。如图1-15所示，行距太小，字体看着很不舒服，而行距适当放大后，字体感觉比较合适。
图1-15 行距太小
行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位，如line-height：20pt或line-height：150%。
所谓文字的图形化，即把文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计师，既可以按照常规的方式来设置字体，也可以对字体进行艺术化处理。无论怎样，一切都应该围绕如何更出色地实现设计目标。
将文字图形化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心，图1-16所示为图形化的文字。
图1-16 图形化的文字
创建网站是一个系统工程，有一定的工作流程，只有遵循这个步骤，按部就班地进行，才能设计出一个令人满意的网站。因此在制作网站前，先要了解网站建设的基本流程，这样才能制作出更好、更合理的网站。
网站主题是建立的网站所要包含的主要内容。一个网站必须要有一个明确的主题，特别是对于个人网站。一个人没有能力，也没这个精力制作一个内容大而全的综合网站，所以必须要找准自己最感兴趣的内容，将它做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。
提示
对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要试图去制作一个包罗万象的站点，这往往会让网站失去特色，也会带来高强度的劳动，给网站的及时更新带来困难。
规划一个网站，可以先用树状结构把每个页面的内容大纲列出来。尤其当要制作一个很大的网站的时候，特别需要把架构规划好，也要考虑到以后的扩充性，以免做好以后再更改整个网站的结构。
网站规划包含的内容很多，如网站结构、栏设置、网站风格、颜色搭配、版面布局及文字图片的运用等。只有在制作网页之前把这些方面都考虑到了，才能在制作时胸有成竹，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。图1-17所示为网站整体结构图。
图1-17 网站整体结构图
首先，要新建一个新的总目录，如 D:/我的网站，来放置建立网站的所有文件，然后再在这个目录下建立两个子目录：“文字资料”“图片资料”。放入目录中的文件名最好全部用英文小写，因为有些主机不支持大写和中文。
可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成Word文档保存在“文字资料”子目录下。收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。
只有文本内容的网站对于访问者来讲是枯燥乏味、缺乏生机的。如果加上艺术内容素材，如静态图片、动态图像及音像等，网页将充满动感与生机，也将吸引更多的访问者。这些素材主要来自于以下四个方面。
图1-18 从网上搜集图片
提示
图片应尽量精美而小巧，不要盲目追求大而全，要在网页的美观与网络的速度两者之间取得良好的平衡。
在整体规划好网站和搜集资料完成后就需要设计网页图像了，网页图像设计包括Logo、标准色彩、标准字、宣传广告和首页等。
图1-19 设计网站标志
提示
需要说明的是，使用非默认字体只能用图片的形式，因为浏览者的计算机里很可能没有安装特别字体，否则辛辛苦苦地设计制作便可能付之东流了。
图1-20 设计的网站宣传广告
图1-21 设计网站首页
下面就需要按照规划逐步制作网页了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序进行制作。所谓先大后小，就是在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
页面设计制作完成后，如果还需要动态功能的话，就需要开发动态功能模块。网站中常用的功能模块有搜索功能、留言板、新闻信息发布、在线购物、技术统计、论坛及聊天室等。
搜索功能可以使浏览者在短时间内从大量的资料中找到自己所需的资料。这对于资料非常丰富的网站来说非常有用。要建立搜索功能，就要有相应的程序以及完善的数据库支持，可以快速地从数据库中搜索到所需要的资料。
留言板、论坛及聊天室是为浏览者提供信息交流的地方。浏览者可以围绕产品、服务或其他话题进行讨论、提出问题、提出咨询，或者得到售后服务。但是聊天室和论坛是比较占用资源的，一般不是大中型的网站没有必要建设论坛和聊天室。图1-22所示为留言页面。
图1-22 留言页面
提供方便直观的页面文字信息的更新维护界面，提高工作效率、降低技术要求，非常适合用于经常更新的栏目或页面，图1-23所示为新闻发布系统的页面。
实现电子交易的基础，用户将感兴趣的产品放入自己的购物车，以备最后统一结账。当然，用户也可以修改购物的数量，甚至将产品从购物车中取出。用户选择结算后系统自动生成本系统的订单。图1-24所示为购物系统的页面。
图1-23 新闻信息发布系统
图1-24 购物系统
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看。上传工具有很多，可以采用Dreamweaver自带的站点管理功能上传文件，也可以采用专门的FTP软件上传。利用这些FTP工具，可以很方便地把网站发布到服务器上。网站上传以后，要在浏览器中打开自己的网站，逐页逐个链接地进行测试，发现问题，及时修改，然后再上传测试。
网站也要维护更新内容，保持内容的新鲜，不要做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。
网站维护包括网页内容的更新、目录的管理、计数器文件的管理及网站的定期推广服务等。更新是指在不改变网站结构和页面形式的情况下，为网站的固定栏目增加或修改内容。
网页做好之后，还要不断地对其进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接或加入广告链等。
网站推广是企业网站获得有效访问的重要步骤，合理而科学的推广计划能令企业网站收到接近期望值的效果。网站推广作为电子商务服务的一个独立分支正显示出其巨大的魅力，并越来越引起企业的高度重视和关注。
（1） 、 和 这三款软件相辅相成，是制作网页的首选工具，其中 主要用来制作网页文件，制作出来的网页兼容性好、制作效率也很高； 用来制作精美的网页动画； 用来处理网页中的图形。
（2）网站就是把一个个网页系统地链接起来的集合，如新浪、搜狐和网易等。网站按其内容的不同可分为 、 、 、 、 和 等。
简述网页版面布局的原则。
人类的视觉对于色彩最为敏感。网页色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，即网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些色彩强烈的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。
学习目标
色彩的魅力是无限的，它可以让本来很平淡无味的东西变得漂亮、美丽。随着信息时代的快速到来，网页也开始变得多姿多彩。人们不再局限于简单的文字与图片，而是要求网页看上去漂亮、舒适。所以网页设计师不仅要掌握基本的网站制作技术，还需要掌握网站的风格、配色等设计艺术。
为了能更好地应用色彩来设计网页，先来了解一下色彩的基本概念。自然界中色彩五颜六色、千变万化，但是最基本的只有三种（红、黄、蓝），其他的色彩都可以由这三种色彩调和而成，这三种色彩称为“三原色”。平时所看到的白色光，经过分析在色带上可以看到它包括红、橙、黄、绿、青、蓝、紫七色，各颜色间自然过渡，其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。
无论是平面设计，还是网页设计，色彩永远是非常重要的一环。当距离显示器较远的时候，人们首先看到的不是优美的版式或者美丽的图片，而是网页的色彩。如图 2-1 所示，远距离看网页看到的是网页的色彩。
在网页设计时应注意以下几个原则。
图2-1 网页色彩
现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列，其他的色彩都属于彩色。任何一种彩色都具备三个属性：色相、明度和纯度。其中非彩色只有明度属性。
图2-2 明度
图2-3 暖色
图2-4 冷色
图2-5 色彩均衡
对于网页来说，创建完美的色彩是至关重要的。颜色是一个强有力的、高刺激性的设计元素，用好了往往能收到事半功倍的效果。颜色能激发人的感情，完美的色彩可以使网页充满活力，能向访问者表达准确的信息。当色彩运用得不适当的时候，表达的意思就不完整，甚至可能表达出一种错觉。
色彩搭配既是一项技术性工作，同时也是一项艺术性很强的工作，因此在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，这样才能设计出色彩鲜明、性格独特的网站。
网页的色彩是树立网站形象的关键之一。网页的背景、文字、图标、边框及链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好地表达网站的内涵和主题呢？下面是网页色彩搭配的一些原理。
网页的色彩要鲜明，容易引人注目，图2-6所示为色彩鲜明的网页。
要有与众不同的色彩，网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。图2-7所示的网页采用了独特的色彩。
图2-6 色彩鲜明的网页
图2-7 网页采用独特的色彩
网站设计也是一项艺术活动，因此必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。不同色彩会使人产生不同的联想，色彩的选择要和网页的内涵相关联。
网页设计虽然属于平面设计的范畴，但又与其他平面设计不同，它在遵循艺术规律的同时，还需考虑人的心理特点。合理的色彩搭配，给人一种和谐、愉快的感觉。避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。
到底用什么色彩搭配好看呢？下面是网页色彩搭配的一些常见技巧。
尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。
所谓邻近色，就是在色带上相邻近的颜色，如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一，如图2-8所示。
图2-8 临近色
对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用，如图2-9所示。
图2-9 使用对比色
黑色是一种特殊的颜色，如果使用恰当、设计合理，往往产生很强烈的艺术效果。黑色一般用作背景色，与其他纯度色彩搭配使用。
背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景要与文字的色彩对比强烈一些，如图2-10所示。
图2-10 背景色
一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。
下面介绍一些常见的网页配色方案。
图2-11 红色
图2-12 黄色
图2-13 蓝色
图2-14 绿色
一个网站如果想确立自己的形象，就必须具有突出的个性。尤其在电商网站的页面设计中，要想达到吸引买家、促成买家购买的目的，就必须依靠网站自身独特的创意，因此创意是网站存在的关键。好的创意能巧妙、恰如其分地表现主题、渲染气氛，增加页面的感染力，让人过目不忘，并且能够使页面具有整体协调的风格。
创意是引人入胜、精彩万分、出奇不意的想法；创意是捕捉出来的点子，是创作出来的奇招。创意并不是天才者的灵感，而是思考的结果，是将现有的要素重新组合。在网站页面设计中，创意的中心任务是表现主题。因此，创意阶段的一切思考，都要围绕着主题来进行。图2-15所示为页面的创意设计。
图2-15 创意设计
好的创意必须具有审美性。一种创意如果不能给浏览者以好的审美感受，就不会产生好的效果。创意的审美原则要求所设计的内容健康、生动、符合人们的审美观念。图2-16所示为设计美观的页面。
创意自身必须与创意目标相吻合，必须能够反映主题、表现主题。网站页面设计必须具有明确的目标性，网站页面设计的目的是为了更好地体现网站内容。图2-17所示的创意的目标是为了突出葡萄酒的生产。
图2-16 创意的审美原则
图2-17 目标原则
系列原则符合“寓多样于统一之中”这一形式美的基本法则，是在具有同一设计要素或同一造型、同一风格或同一色彩、同一格局等基础上进行连续的发展变化，既有重复的变迁，又有渐变的规律。这种系列变化，给人一种连续、统一的形式感，同时又具有一定的变化，增强了网站的固定印象和可信度。图2-18所示为创意的系列原则。
设计时要坚持简洁原则。
图2-18 创意的系列原则
一是要明确主题、抓住重点，不能本末倒置、喧宾夺主。
二是注意修饰得当，要做到含而不露、蓄而不发，以朴素、自然为美。图2-19所示为设计简洁的网站页面。
图2-19 设计简洁的网站页面
在创意过程中，需要设计师新颖的思维方式。好的创意是在借鉴的基础上，利用已经获取的设计形式，来丰富自己的知识，从而启发创造性的设计思路。下面介绍常用的创意方法。
联想是艺术形式中最常用的表现手法。在设计页面的过程中通过丰富的联想，能突破时空的界限，扩大艺术形象的容量，加深画面的意境。人具有联想的思维心理活动特征，它来自于人类潜意识的本能，也来自于认知和经验的积累。通过联想，人们在页面对象上看到自己或与自己有关的经验，美感往往显得特别强烈，从而使对象与产品中引发了美感共鸣，其感情的强度总是激烈、丰富、合乎审美规律的心理现象。从如图2-20所示的大床和台灯可以联想到商务酒店。
图2-20 富于联想
对比是一种趋向于对立冲突的艺术美中最突出的表现手法。在网站页面设计中，把网站页面中所描绘的产品的性质和特点放在鲜明的对比中来表现，互比互衬，从对比所呈现的差别中，实现集中、简洁和曲折变化。通过这种手法更鲜明地强调或提示产品的特征，给浏览者以深刻的视觉感受。图2-21所示为巧用对比。
图2-21 巧用对比
夸张是一种求新的变化，通过虚构把对象的特点和个性中美的方面进行夸大，赋予人们一种新奇与变化的情趣。按其表现的特征，夸张可以分为形态夸张和神情夸张两种类型。通过夸张手法的运用，可为网站页面的艺术美注入浓郁的感情色彩，使页面的特征性鲜明、突出、动人。图2-22所示，大胆夸张，突出钻戒。
图2-22 大胆夸张
比喻是指在设计过程中选择两个各不相同，而在某些方面又有些相似性的事物，“以此物喻彼物”，比喻的事物与主题没有直接的关系，但是某一点上与主题的某些特征有相似之处，因而可以借题发挥，进行延伸转化，获得“婉转曲达”的艺术效果。与其他表现手法相比，比喻手法比较含蓄隐伏，有时难以一目了然，但一旦领会其意，便能给人以意味无尽的感受。图2-23所示为善用比喻的页面。
图2-23 善用比喻
以小见大中的“小”，是页面中描写的焦点和视觉兴趣中心，它既是页面创意的浓缩和升华，也是设计者匠心独具的安排，因而它已不是一般意义的“小”，而是小中寓大，以小胜大的高度提炼的产物，是简洁的刻意追求。如图2-24所示的图中，鞋所占用的面积比较小，但是却是视觉的中心。
图2-24 以小见大
流行时尚的创意手法是通过鲜明的色彩、单纯的形象以及编排上的节奏感，体现出流行的形式特征。设计师可以利用不同类别的视觉元素，给浏览者强烈、不安定的视觉刺激感和炫目感。这类网站以时尚现代的表现形式吸引年轻浏览者的注意。图2-25所示为流行时尚的创意。
图2-25 流行时尚的创意
（1）自然界中色彩五颜六色、千变万化，但是最基本的只有三种（红、黄、蓝），其他的色彩都可以由这三种色彩调和而成，这三种色彩称为 。
（2）现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于 系列，其他的色彩都属于 。
简要说出网页色彩搭配的一些原理。
玻璃钢生产厂家中山玻璃钢景观雕塑制造淮北玻璃钢休闲椅公司固原玻璃钢树池定制珠海玻璃钢花盆定做福建玻璃钢雕塑哪家好鹤壁玻璃钢雕塑批发宜宾玻璃钢树池湛江玻璃钢设备外壳厂百色玻璃钢摆件批发临沂玻璃钢休闲椅批发黑河玻璃钢公仔雕塑公司株洲玻璃钢动物雕塑哪家好香港玻璃钢外壳价格聊城玻璃钢装饰工程公司玉林玻璃钢医疗外壳德阳玻璃钢厂浙江玻璃钢卡通雕塑厂家直销威海玻璃钢摆件批发黑龙江玻璃钢花瓶价格镇江玻璃钢树池生产厂家唐山玻璃钢花盆公司青岛玻璃钢装饰公司淮北玻璃钢种植池价格商洛不锈钢雕塑加工漳州玻璃钢景观雕塑哪家好来宾玻璃钢医疗外壳三明玻璃钢沙发廊坊玻璃钢造型哪家好铜川玻璃钢休闲椅生产厂家玉溪玻璃钢机械外壳制造歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅：唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人？开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运