1.1 网页中的基本概念 – 学习内容
1．万维网（WWW）万维网（World Wide Web，WWW）是 Internet 的多媒体信息查询工具，由三部分组成：客户机、服务器和 HTTP，它是促使 Internet 迅速发展和普及的重要技术。用户只要在 WWW 浏览器中的 Web 页面上轻松点击链接，就可以转到相应的信息服务资源中去。多媒体的 Web 界面带来生动活泼的效果，简单和直观的操作手段给用户提供了很大的便利。WWW 的服务范围包括学术交流与研究、电子邮件、电子购物、网络应用、可视会议、多媒体教学、影视节目等。除了公共信息部门提供 WWW 服务外。一些企业甚至个人也建立了自己的 Web 网站，作为联系世界、展示形象的窗口。
2．网页和网站网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地讲，网站就是由网页组成的。网页可由文字、图像、动画、声音和程序等多种媒体信息链接组成，通过链接实现与其他网页或网站的关联和跳转。网页一般又称为 HTML 文件，它存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，在浏览器内输人网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户的计算机，然后通过浏览器认识并解释网页的内容。所谓网站，是在互联网上，根据一定的规则，使用 HTML 等工具制作的用于展示特定内容的相关网页的集合。它由域名、网站源程序和网站空间三部分构成。网页的内容体现网站的全部功能。通常把进入网站首先看到的网页称为首页或主页（Homepage）。首页是一个网站的门面，也是访问量最大的一个网页，其文件名一般默认为 index 或 default 等。当访问者在地址栏中输人网址后，按 Enter 键就可以直接进入网站的首页
3．浏览器浏览器是指可以显示网页服务器或者文件系统的 HTML 文件内容，并让用户与这些文件交互的一种软件。网页浏览器主要通过 HTTP 协议与网页服务器交互并获取网页，这些网页由 URL 指定，文件格式通常为 HTML。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。大部分的浏览器不仅支持除 HTML 之外广泛的格式，例如 JPEG、PNG、GIF 等图像格式，并且能够扩展支持众多的插件（plugins）。另外，许多浏览器还支持其他 URL 类型及其相应的协议，如 FTP、Gopher 和 HTTPS（HTTP 协议的加密版本）等。HTTP 内容类型和 URL 协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。浏览器是最经常使用到的客户端程序。个人电脑上常见的网页浏览器包括微软的 Internet Explorer、Netscape、Mozilla 的 Firefox、Apple 的 Safari 和 Google 的 Chrome 等。同一个网页在不同的浏览器上可能有不同的显示效果，所以在网页设计和制作的过程中不能只考虑在一种浏览器中的显示效果，应尽可能考虑在多种浏览器下的显示效果。
4．URLURL（Uniform Resource Locator，统一资源定位符）也被称为网页地址，是因特网上标准资源的地址，是用于完整地描述 Internet 上网页和其他资源的地址的一种标识方法。在 Internet 上所有资源都有一个独一无二的 URL 地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是 Internet 上的站点。简单地说，URL 就是 Web 地址，俗称“网址”。URL 的一般格式如下：访问协议://主机域名或 IP 地址［：端口号］/路径/文件名例如 http://www.tup.tsinghua.edu.cn/book/Showbook.html，其中 http 为超文本传输协议，www.tup.tsinghua.edu.cn 是服务器名，/book/是文件夹，Showbook.html 是文件名。
5．Internet 协议协议（Protocol）是关于信息格式及信息交换规则的描述。在信息技术中，协议就是—些特殊规则的集合，它被通信的接收方和发送方认可，接收到的信息和发送的信息均以这种规则加以解释。在网络的各层中存在着许多协议。接收方与发送方同层的协议必须一致，否则一方将无法识别另一方发出的信息，以这种规则规定双方完成信息在计算机之间的传送过程。协议就好比每个国家都有自己特定的交流准则和交流方式，协议在 Internet 上统一了人们的交流方式。任何一种协议都有 3 个组成部分：语法、语义和同步。语法定义了怎样进行通信，语义定义了什么是通信，同步关系到何时通信以及通信双方相互应答的次序。
6．IP 地址IP 地址是网上的通信地址，是计算机、服务器和路由器的端口地址，每—个 IP 地址在全球都是惟一的，是远行 TCP/IP 的惟一标识。每台 Internet 上的计算机由一个独有的 IP 地址来惟一标识。目前 Internet 使用的是 IPv4 版本，IP 地址是一个由 32 位的二进制数组成的号码，该号码分为 4 段，每段 8 位，每段取值范围为 0~255。例如 202.99.2.60。
7．HTTPInternet 的基本协议是 TCP/ IP 协议，然而在 TCP/ IP 模型最上层的是应用层 （Application layer），它包含所有高层的协议。高层协议有文件传输协议 FTP、电子邮件传输协议 SMTP、域名系统服务 DNS、网络新闻传输协议 NNTP 和 HTTP 协议等。HTTP 协议（Hypertext Transfer Protocol,超文本传输协议）通常出现在 URL 最前边，是用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它保证计算机快速准确地在网络上传输超文本文档。例如 http://www.baidu.com/index.htm 中，http://用于通知 baidu.com 服务器显示 Web 页，通常不用输入。
9．静态网页与动态网页在网站设计中，纯粹 HTML 格式的网页通常被称为静态网页，静态网页每个网页都有一个固定的 URL，且网页 URL 以.htm、.html、.shtml 等常见形式为后缀，而不含有“?”。静态网页一经编写完成，其显示效果就确定了。在 HTML 格式的网页上，也可以出现各种动态的效果，如 GIF 格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的，与动态网页是不同的概念。动态网页是内容根据具体情况发生变化的网页，它以数据库技术为基础，随不同客户、不同时间，返回不同的网页。常用的动态网页技术有 JSP、ASP、PHP、ASP.NET 等。区分动态网页与静态网页的基本方法是：第一看后缀名；第二看是否能与服务器发生交互行为。静态网页的后缀是．htm、. html、. shml、. xml 等，例如 http: //www.wntc.edu.cn/cmgcx/index.html 就是一个静态网页，动态网页的后缀通常是.asp、.aspx、.jsp、.php 等，并且通常在 URL 中带有“?”，例如 http://www.tsinghua.edu.cn/qhdwzy/index.jsp 就是一个动态网页的 URL。静态网页相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。用户编的是什么它显示的就是什么，不会有任何改变。静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型网站。
1.2 页面组成元素 – 学习内容
现在的网页已经不再是简单的文字和图像组合，而是添加了各种设计元素，这使网页变得更加丰富多彩。组成网页的最基本元素通常包括网站 LOGO、BANNER、导航栏、文本和图像、动画、超级链接、表单和多媒体等。对网页中所要求的各种媒体素材都应该事先准备，并通过合适的软件对其做好预处理工作。素材准备工作如果做不好，对网页质量的影响十分明显，因此素材的制作和编辑是一个非常重要的环节。
1．LOGO网站 LOGO，也叫网站标志。它是一个站点的象征，一般放在网站首页的左上角或显眼位置，访问者能明显地看到它。成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。一个好的标识可以很好地树立公司形象，所以网站标识应体现网站的特色、内容及其内在的文化内涵和理念，如新浪用字母 sina 和大眼睛作为标志。LOGO 的设计要遵循人们的认识规律，设计创意往往来源于网站的名称和内容，一般由网站的英文名称、网址、标志图形和主题描述等构成，如果是中文网站，其构成元素还要包括网站的中文名称。LOGO 设计追求的是以简洁、符号化的视觉艺术形象把网站的形象和理念长留于人们心中。
2．BANNERBANNER 一般翻译为网幅广告、旗帜广告和横幅广告等。BANNER 通常为一幅表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。横幅广告的标准尺寸是 468*60 像素，而弹出窗口广告一般为 360*300 像素。BANNER 可以是使用 GIF 格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。BANNER 的设计原则包括具有鲜明的色彩、语言具有号召力、文字的字体清晰和图形位置合适这 4 个方面
3．导航栏导航栏是用户在规划好站点结构、开始设计主页时必须考虑的一项内容。导航栏的作用就是让浏览者在浏览站点时，不会因为迷路而中止对站点的访问。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主页以及其他重要页面。在设计站点中的诸页面时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易地转向站点的其他主要网页。一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏的实现方式也很多，可以采用脚本语句，也可以利用动画或图像按钮，甚至可以直接采用文本链接，这要根据网站的具体需求来确定。
4．文本和图像文本一直是人类最重要的信息载体和交流工具，网页中的信息也以文本为主，从某种意义上说，文本是网页存在的基础。在网页中，虽然文字不像图像那样能够很快地引起浏览者的注意，但却能够准确地表达信息的内容和含义。网页设计与制作者还可以通过设置字体、字号、颜色、底纹和边框等属性来改变文本的视觉效果，通过不同格式的区别，突出显示重要的内容。用户还可以通过网页中设计的各种文本列表来清晰地了解一系列项目。图像能快速引起浏览者注意、提供信息、展示作品、装饰页面以及表达个人情调和风格。现在不使用图像的网页几乎没有。通常在网页中使用的图像主要是 GIF、JPEG、 PNG 格式。其中使用最广泛的是 GIF 和 JPEG 两种格式。
5．动画动画是构成网页的重要元素之一，由于网页制作工具往往不具备很强的动画制作功能，所以通常需要使用专门的动画制作工具来制作动画。目前，最常用的网页动画软件是 Flash、ImageReady 和 Gif Animation 等，使用较多的动画格式通常有 GIF 动画和 SWF 动画。动画能提供信息、展示作品、装饰网页、动态交互等，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果，甚至有的网站中的所有网页也全部都是用 Flash 完成
6．超链接在网上用鼠标点击一段文字或一幅图片，就会有一个新的页面被打开，这就是超链接技术。超链接技术是 WWW 流行起来的原因。链接源可以是带下划线的文本，也可以是图像或图像切片，甚至可以是一些不可见的程序代码。当链接源被鼠标单击激活后，其链接目的端将会显示在 Web 浏览器上，并根据目的端的类型不同选择以不同的方式打开。
7．表单表单通常用于填写申请或提交信息的交互页面，如电子邮箱、主页空间、QQ 密码等申请页面以及论坛、留言簿等都是通过表单来实现交互的。通常表单的用途是：收集联系信息、接收用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录等。网站所有者可以通过表单从浏览者那里收集所需要的信息，从而实现网上交流；而浏览者则可以通过表单将填写好的信息反馈给网站管理者
8．声音和视频声音是多媒体网页的一个重要组成部分。从目前来看，网络上使用范围最广的音频格式主要有 MP3、MIDI 和 WAV 等。设计者在采用音频前需要考虑其用途、格式、文件大小、声音品质和浏览器兼容差别等因素。比如，一般来说，不要使用声音文件作为背景音乐，那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，使播放音乐变得可以控制。不同浏览器对声音文件的处理方法是非常不同的，彼此之间很可能不兼容。多数浏览器不用插件也可以支持 MIDI、RM 和 AVI 等。视频文件的采用让网页变得精彩而有动感。网络上的许多插件也使得向网页中插入视频文件变得非常简单，另外目前互联网上还有很多专门提供视频的网站，比较流行的视频网站有优酷、土豆和乐视网等。
1.3 网站规划与网页设计 – 学习内容
我们所见到的网站，虽然在规模、内容和功能上各不相同，但网站设计制作的基本流程是相似的。从简单的个人网站到复杂的门户型网站，都遵循着一个基本的制作流程。同时，网站的定位、策划、创意和风格，网站的版面布局，网页的色彩应用及网页的艺术原则等都直接关系到网站的生存和效果评估。下面我们就从网站的策划、版面的设计、网页色彩应用与网页设计原则几个方面对网站建设和网页设计做具体介绍。
一、网站的策划网站的前期策划是一个网站成功与否的关键，也是进行网站建设和网页制作整个流程中的第一步。策划的目的是为了完成需求分析，确定网站的主题、目标、规模、风格和类型等。网站的主题就是将要创建的网站的主要内容，也就是网站的题材。一个网站必须有一个明确的主题。现实生活中可选的题材很多，因此在创建一个网站之前，需要先进行一项市场调查，比较同类型的网站的经营状况和主要问题，借鉴他们的优缺点，并以此作为参考。题材没有好坏之分，只有设计失败的网站，没有选择失败的题材。无论什么样的题材，只要巧妙精心地设计，都可以设计出一个好的网站来。网站的规模和大小由自身的实际情况决定，这关系到网站的后期维护和发展的方向。网站要想给别人留下深刻的印象，必须要有自己独特的风格。风格是一个抽象性的东西，如图 1.3-1 和 1.3-2 所示，大家觉得网易是平易近人的，IBM 是严肃的等，这些都是网站留给浏览者的综合印象。风格的形成不是一次定位就可以完成的，需要在实践中不断修正和调整。具体可以从网站的 LOGO、网站的标准色彩、网站的宣传标语、网站的语气和人称、网站的字体和符号设计等几个角度考虑。
网站按照其功能和结构形式大体上可以分为 4 类，即门户网站、职能网站、专业网站和个人网站。门户型网站注重信息量和浏览率，如新浪（www.sina.com.cn）、搜狐（www.sohu. com），雅虎中国（yahoo.com.cn）及网易（www.163.com）等。职能网站具有专门的功能，以政府网站、电子商务网站等为主，如中国外交部网站（www.fmprc.gov.cn）、阿里巴巴旗下的淘宝网（www.taobao.com）等。专业网站的专业性非常强，它一般只涉及生活中的某一个领域，但内容却十分专业，多为一些专业人士提供服务。有代表性的网站如网页特效代码网站（http://www.jscode.cn）、凤凰网（http://www.ifeng.com）和黄金书屋（http://www.goldbook.cn）等。个人网站一般是个人为了兴趣爱好、求职或展示个人才华等目的而建设的网站。由于该类网站都为个人而建，一般都带有明显的个人色彩。无论从内容、风格、样式和布局上都形形色色、包罗万象。这类网站在网上随处可见，优秀的也比较多，有兴趣自己也可以创建一个。
二、网页版面布局设计网页制作本质上就是排版，是以浏览器作为阅读平台的电子出版物的图文排版。网页设计表面上看是一种全新的视觉表现形式，但仔细想想，网页设计与日常所见的传统报刊排版并没有太多不同，只不过在单一静止的图文编辑基础上添加了新的交互元素和多媒体元素，它们的基本原理是相通的。网页版面布局是个性思维的展示，因此没有固定的网页版式模式，设计者可以根据自己的喜好随心所欲地设计。版面布局也是创意性的问题，但要比站点整体的创意策划容易、有规律得多。下面就来谈谈版面布局的设计步骤、设计原则和常见布局类型。
1．设计步骤（1）构思构图在真正开始页面布局设计之前，都要对页面的整体布局进行认真的构思。在这个阶段，可以借鉴他人的布局经验，参考他人的布局结构，吸取别人的精华，融入到自己的整体构思中。要充分发挥艺术想象力，锐意创新、大胆突破，结合现有的网页素材考虑，进行整合创作。构思结果一定要有自己的独特创意，并要考虑技术实现的可行性。有时候，尽管构思巧妙，见解独到，但用现在的计算机技术和网络技术却不能实现，创意也就变成了空想。（2）绘制草图网页布局设计就像写文章一样，要事先打草稿——绘制草图。新建页面就像一张白纸，没有任何表格和框架，没有约定俗成的条条框框的约束，可以尽可能地发挥你的想象力，将想到的“景象”画上。绘制草图就是把头脑中构思的页面布局轮廓具体化的过程，可以在纸上绘画，也可以用软件在计算机上绘制。在头脑中构思时，没有受到空间和技术因素的限制，思维的“翅膀”可能飞得很远，但当在纸上或计算机上实现时却可能发现，有些想法是无法实现的，或者发现有些地方不太合理。因此，在绘制过程中必须对头脑中的“蓝图”做必要的修正。绘制草图属于创造阶段，不讲究细腻工整，不必考虑细节功能，只要以粗陋的线条勾画出创意的轮廓即可。可以尽可能多画几张，最后选定一个满意的方案作为继续创作的脚本。（3）草图细化和方案确定草图细化和方案确定就是在绘制出来的轮廓草图上，具体摆布页面元素，包括网站的站标、导航栏、栏目标题、广告、图片和搜索引擎等。按照平面设计的规律做出平面的基本样式。这一步可以用一些图像处理软件（如 Photoshop、PageMaker 和 Illustrator 等）在计算机上完成。在具体布局页面元素时，可以借鉴平面构图的一些基本原则，如平衡、呼应、对比和疏密等。这个阶段的设计结果仍然是草图，但是已经是一个布局完善的设计方案了，除了文字内容之外，其他所有内容应该基本接近将来网页的实际效果。这个方案供客户和技术开发人员讨论确定最后方案时参考。（4）量化描述量化描述就是确定各种页面元素的具体尺寸。主要包括下面几个方面。① 网页的外形尺寸。网页的宽度受计算机显示器的大小和分辨率制约。在浏览网页时，人们能够看到页面宽度只是显示屏的一部分，因为浏览器的菜单栏、工具栏、边框和滚动条要占去一部分的屏幕空间。现阶段，用户的显示器一般都在 19 寸及以上，分辨率至少设置为 1024*768。这样，显示屏的最小宽度就是 1024 像素。但是，当使用浏览器浏览网页时，浏览器窗口右边的滚动条一般占据 20 像素，所以，网页的安全宽度至少应为 1000 像素。而且随着以后显示器屏幕的尺寸不断加大，这个宽度还可以再增加。② 页面的高度可以不受 768 像素的限制，根据网页内容确定，但一般不要超过 3 屏（约 2300 像素）。太长了，拖动垂直滚动条观看也是不方便的。③ 图形图像的尺寸。图形图像的尺寸应该根据具体的布局要求确定，也是以像素为单位。在确定大小的同时，也应该确定它们在页面中的相对位置。④ 字体大小。指定网页文本，如标题文字、段落文字的大小。图像化的标题文字应该作为图像处理。⑤ 色彩代码。一页网页往往采用多种颜色搭配，包括标准色、背景色、文字颜色等。这些元素的颜色应该用 RGB 颜色值或 HTML 颜色代码（十六进制颜色代码）标明。⑥ 网页的文件大小。初步估算网页文件的大小，一般应该控制在 50KB 左右，网页文件过大会影响下载速度。（5）方案实施根据上述步骤确定的最终方案用图像处理软件（如 Photoshop 和 Fireworks）进行网页布局设计并切图输出网页。然后用网页编辑软件（如 Dreamweaver 或 Frontpage）编辑输出的网页，往网页中添加相应的内容。至此，一个完整的网页就设计制作完成。
2．布局设计原则网页版面的布局要做到主次分明、中心突出、大小搭配、相互呼应、图文并茂、相得异彩。在布局设计过程中可以从以下几点去考虑。（1）正常平衡：亦称“匀称”。多指左右、上下对照形式，主要强调秩序，可以给人以稳重、诚实、可信赖的效果。（2）异常平衡：即非对照形式，但也要讲求平衡和韵律，要在不均衡的布局中体现出更宏观的韵律节奏，这种布局能达到强调性、不安性、高注目性的效果，如图 1.3-3 所示。
对比：所谓对比，不仅利用色彩、色调等技术来表现，在布局方面也可采用疏密、曲直、正斜的对比体现灵活现代的效果
凝视：所谓凝视是利用页面中人物的视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状，凝视的焦点通常是页面中最希望宣传的重点
空白：空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页作品的优越感，这种表现方法对体现网页的格调十分有效。在内容过于丰富的页面中，安排适当的空白可以减轻浏览者的阅读疲劳，过于紧密的文字容易使读者产生反感
另外还有一些常识性技巧，如网页的白色背景太虚，可以加些色块，可以用线条和符号串联；左面文字太多，右面则可以插一张图片保持平衡；表格太规矩，可以添加一些线条修饰等。网页的布局技巧千差万别，需要读者在实践中充分发挥自己的创造能力，构建不同于其他网站的版面设计。
3．常见布局类型网络上的网页布局类型各不相同却各有特色，这里我们选择最能被大众接受的布局类型来做介绍，使读者明白如何划分网页的布局类型。常见的布局类型主要是“同”字型、“匡”字型、“吕”字型和自由式布局等。（1）“同”字型布局“同”字型布局（又叫“国”字型布局）的结构特点是：页面顶部为水平放置的主导航栏，其下大体上分为左中右三栏，左边一般放置内容导航、二级栏目或热点内容等；右边一般放置站点图片链接、动画广告、搜索引擎、友情链接和注册登录信息等；中间为主要内容板块。如中国人民大学首页就属于这种布局
种结构布局是互联网上最常见的布局，其优点是：页面结构清晰、直观、平衡均衡和主次分明。缺点是版次过于呆板、僵化，往往给人一种“单调乏味”的感觉。因此，采用这种布局结构时，必须在设计过程中更加注重色彩的搭配和细节的处理，调节页面的整体韵律，弥补它的不足。（2）“匡”字型布局“匡”字型布局（又叫“拐角型”布局）是把“同”字型布局右边的内容移到底部而成，它们的结构特点和优缺点也大体相同。如北京交通大学首页就属于这种布局
（3）“吕”字型布局“吕”字型布局的特点是把页面分为上下两大块，其中每一块都具有同字型结构的特点。这种结构在设计技术上采用上下两个表格进行页面元素的定位，两个表格之间往往插入条幅广告。这种布局能够容纳大量信息，目前各大型门户网站的二级模块通常都是采用“吕”字型的布局。如“新浪体育”、“网易新闻”和“搜狐财经”等网页。
（4）自由式布局自由式布局打破上述结构的规规矩矩，尽情挥洒。页面布局就像一张宣传海报，极具创意。这种页面常常以一幅精美的图片作为设计中心，导航栏则作为次要的设计元素，自由摆布，起到点缀、修饰和均衡的作用。一些时尚网站常常采用这种布局，如艺术设计、时装服饰和化妆品等站点。这种布局的优点是漂亮、现代、轻松和明快，极具美感，给人以美的享受。如中国地质大学和中央音乐学院网站首页就属于这种布局，如图 1.3-10 和图 1.3-11 所示。
1.4 网页的色彩搭配及应用 – 学习内容
一、网页色彩搭配的原理网页的色彩是树立网站形象的关键之—，网页的背景、文字、图标、边框和链接等应该采用什么样的色彩，应该搭配什么色彩才能最好地表达网站的内涵和主题呢?下面将介绍网页色彩搭配的一些原理。1．色彩的鲜明性网页的色彩要鲜明，容易引人注目。具有鲜明色彩的网页往往能吸引浏览者的注意，给浏览者留下比较深刻的印象。2．色彩的独特性网页要有与众不同的色彩，使网页具有自己独特的风格，这样才能充分表达出网页的个性，给浏览者留下深刻的印象。3．色彩的艺术性网页设计也是一种艺术活动，因此必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则。大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。不同的色彩会产生不同的联想。选择色彩要和网页的内涵相关联。4．色彩搭配的合理性网页设计虽然属于平面设计的范畴，但又与其他平面设计不同，它在遵循艺术规律的同时，还要考虑人的生理特点。色彩搭配一定要合理，结人—种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。
二、网页色彩搭配的技巧网页配色很重要，网页颜色搭配得好坏与否会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不好的色彩搭配则会让访问者产生抵触情绪。下面就来讲述网页色彩搭配的一些技巧。1．使用单色尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整从色彩的饱和度和透明度也可以使单一色彩产生变化，使网站避免单调。2．使用邻近色所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色、红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。3．使用对比色对比色可以突出重点，产生强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。4．黑色的使用黑色是一种特殊的颜色，如果使用恰当、设计合理，往往能产生很强烈的艺术效果，黑色一般用来作为背景色，与其他纯度色彩搭配使用。5．背景色的使用背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。6．色彩的数量一般初学者在设计网页时往往使用多种颜色，使网页变的很花哨，缺乏统一、协调和内在的美感。事实上，网站用色并不是越多越好，一般控制在 3 种色彩以内，通过调整色彩的各种属性来产生变化。
三、网页色彩选择标准选择网页色彩，在遵从艺术规律的同时，还应考虑人的生理特点。色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用容易造成视觉疲劳的纯度很高的单一色彩。在选择网站颜色时，应遵循以下标准。1．了解网站所要传达的信息和品牌在设计初始，了解网站所要传达的信息是非常重要的。只有了解了网站将要体现的内涵，才可以选择能加强这些信息的颜色。2．了解网站的访问群体文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应也会有所不同。因此在选择色彩搭配时，必须了解网站的最终用户，了解他们的色彩心理和审美观念。例如年轻族群一般比较喜欢鲜艳的色彩。但这样的颜色却引不起高年龄层的兴趣。3．不要使用过多的颜色网页色彩中，除了黑色和白色以外，另外选择 2-3 种颜色就够了。通常保守的做法是不超过 3 种色彩。太多的颜色会导致混乱，也会分散访问者的注意力。4．在文字的部分使用对比色网页中的文字等阅读部分，颜色太接近将无法产生足够的对比效果，也会妨碍访问者阅读。通常文字部分采用白底黑字的阅读效果最好。5．选择颜色要注意时效性大量浏览网时会发现，同一个色彩很容易充斥着整个互联网，且访问者很快就对流行色彩感到麻木。因此从另外一个角度来看，如同历年时装流行色循环往复一样，设计师可以使用几十年前的流行色彩，引起人们的怀旧之情。6．选择色盘时应考虑功能性的颜色网页是一个交互式的信息平台，大量的页面连接和交互操作构成了不同页面间的相互联系。因此在设计色彩搭配时，应将关键信息部分建立功能性的颜色。例如在网页中应该有醒目的网页标题，具有鼠标指向互动显示的超链接等。7．注意网站色差问题每一个网站开发人员都知道，即使是网络通用颜色，在跨平台显示时都会有些不同。因此在设计网页色彩搭配时，应该校正页面色彩的 Gamma 值，并在不同的系统平台上测试网站色彩，以便检测色彩搭配是否合理。
四、常见的几种配色方案下面介绍一些常见的网页配色方案。1．红色红色代表热情、活泼、热闹、温暖、幸福、吉祥。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，还是一种容易造成人视觉疲劳的颜色，
2．黄色黄色代表明朗、愉快、高贵、希望。黄色是各种色彩中最为娇气的一种颜色
3．蓝色蓝色代表深远、永恒、沉静、理智、诚实、公正、权威。蓝色是一种在淡化后仍然能保持较强个性的颜色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力
4．白色白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其他任何色，都会影响其纯洁性，使其性格变得含蓄。白色代表纯洁、纯真、朴素、神圣、明快。5．紫色紫色的明度在所有彩色的色料中是最低的。紫色代表优雅、高贵、魅力、自傲、神秘。在紫色中加入白色，可使网页变得优雅、娇气，并充满女性的魅力。6．绿色绿色代表新鲜、充满希望、和平、柔和、安逸、青春。绿色是具有黄色和蓝色两种成分的颜色。7．灰色在商业设计中，灰色具有柔和、高雅的意象，而且属于中间色，男女皆能接受，所以灰色也是永远流行的主要颜色。在许多的高科技产品中，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。使用灰色时，大多利用不同的层次变化组合或用它配合其他色彩，才不会使页面给人过于平淡、沉闷、呆板、僵硬的感觉
8．黑色黑色是内涵最为丰富和复杂的，黑色有很强大的感染力．它能够表现出特有的高贵，显得严肃、庄严、坚毅，另外黑色还有恐怖、烦恼、忧伤、消极、沉睡、悲痛等印象。黑色与白色表现出了两个极端的亮度，这两种颜色的搭配使用通常可以表现出都市化、现代的感觉。因为黑色和白色的搭配有一种特殊的严肃感，所以还经常用于如结婚典礼等庄重的场合。黑色是一种流行的主要颜色，适合和许多色彩作搭配。黑色具有高贵、稳重、科技的意象，许多科技网站的用色，如电视、摄影机、音响等网站的色彩大多采用黑色，如图 1.4-5。
1.5 网页的设计原则 – 学习内容
尽管网页设计和网站的开发有多种多样的方式和技巧，但要完成一个完美的、既让浏览者爱好又便于日后维护的网站，在设计时必须要牢记以下网页设计原则。
1．内容第一、形式第二牢记内容第一的原则。网站作为一个媒体，提供给浏览者最主要的还是网站的内容，浏览者访问网站的最终目的是为了获取自己想要的知识。内容丰富有价值且外观漂亮的网站，才能获得高的点击率。尽管现在有很多关于如何提高网站艺术效果，提高网页艺术表现形式的技术和技巧，但网站设计者时刻不要忘记这一点：没有人愿意在一个没有内容的网站上流连忘返。
2．重点信息要醒目突出一个网站很重要的就是标题，标题就像路牌一样，访问者在网站上逛来逛去全靠它指路了。标题要意义清晰、描述性强，另外网页标题对搜索引擎检索也存着重要影响。相对的，促销性的内容要适可而止。没人喜欢看网页中闪烁不停、阻碍阅读正文的广告。而且事实浏览过几个网页的人，都能很快地“训练”出对广告视而不见的能力。不要以为把广告堆在重要信息中就可能使人被迫“注意”到那些广告，让浏览者产生反感就是您失败的起点。
3．网页文件的命名原则网页文件命名的指导思想是：尽可能使自己和工作组的每一个成员都能够方便地理解每一个文件的意义，并且同一种大类的文件能够按照名称排列在一起，以便计算机查找、修改或替换操作。网页文件名称建议统一采用小写的英文、数字和下划线的组合，每个栏目首页的文件名统一用 index.html。
4．设置合理的网站目录网站目录建立的好坏对浏览者并没有多大影响，但对于网站本身的后期维护意义重大。所以，网站目录的设置应遵从以下一些建议。（1）不要将所有文件都放在根目录下，这样不利于文件管理，并且影响网络文件的上传速度。（2）按栏目内容建立子文件夹，每个主文件夹下都应建立独立的 images 文件夹存放素材。（3）不要使用中文名称的目录，那样可能对网页元素的正确显示造成困难。目录的层次结构不要太深，要遵循“三次单击”的原则。（4）其他需要经常更新的栏目或程序代码、特效脚本文件等一般都存放在特定文件夹中。所有需要下载的内容最好也存放在一个件夹中。
5．确保链接的有效性这个问题看似不起眼，其实却是最影响访问者心情的大问题，除非浏览者自己的网络出现故障，无论那家网站哪个网页都打不开，否则他一定会心生不满，并对继续浏览你的网站失去兴趣。类似地，也不要用些“本页正在建设中，请稍后再来访问”之类的话充塞您的网站，访问者并不会如您所愿地过几天再来看您的建设进度，当他们等待了半天，却只打开了一个没有任何内容可看的坏页或“建设中”网页时，几乎所有人都会选择关闭，并且再也不会回来。为了保证网站在更新或作平移的时候确保链接正确，网站中所有路径建议都采用相对路径。
6．流畅的访问速度除了服务器的稳定快速外，决定访问速度的主要是网页的大小。在浏览网页时，其实就是将服务器端的网页数据向本地电脑传输的过程，当传输速度一定时，网页数据量越大，下载和显示的速度就会越慢。所以通常在制作网页时，要求页面代码和插图等内容必须经过优化处理，并控制在几十千字节上下。Flash 动画也应该尽量简短，排除那些只作为“形象宣传片”式的动画。虽然高级的 Flash 动画可以通过编程的手段提供一般 HTML 网页所不具备的功能，但即使对网站有实际利益，也应尽量简短。尽量少使用背景音乐。很明显，不是所有浏览者都能欣赏您的审美情趣，突如其来的声音可能是他面临尴尬的境地。尤其当您是使用普通的<bgsound>方式添加背景音乐时，浏览者在网页中既无法关闭它，也无法改变其音量，假如此时他的音乐没有关闭，并且音量开得比较大，那么他最有可能的选择就是立即关掉您的网页，甚至从此再也不会回来。
7．清晰的导航结构在网页中无法找到自己期望的内容，无疑是一件令人不愉快的事情，这往往不是因为浏览者找错了地方，而是开发者没有合理地提供“路标”。所有的超级链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识让人看得明白，千万别光顾视觉效果的热闹而让人不知东南西北。链接文件的颜色最好用约定俗成的：未访问的，蓝色；访问过的，紫色或栗色。如果一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗体，或者在鼠标经过的地方立即变换成其他颜色。总之，文本链接一定要和页面的其他文字有所区分，给读者以清楚的导向。清晰的导航还要求进入目的页的点击次数不宜超过三次。如果三次以上还看不到想要的内容，访问者可就没有耐心了！许多设计者把他们的网站地图放在网站上，这种做法却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息，他们对于您的网站是如何工作的并没有兴趣。如果您觉得的网站需要地图，那很可能是需要改进您的导航结构和工具条的形式。
8．良好的兼容性现在普通上网用户使用的多是 IE 浏览器，但仍然有不少人喜欢 Navigator、 Firefox 或者 Opera 等浏览器，并且同样是 IE 浏览器，也不是所有用户都在使用最新的 IE8 或 IE9 的版本，不同版本间对网页代码的支持是不尽相同的。如果不是客户群非常集中的专业网站，则一定要考虑代码的兼容性，不要让那些使用非 IE 浏览器的用户看到您网站混乱的一面。多做兼容性测试和改进，对于任何一个大网站都是必需的工作。也不要太过追求最新的技术，程序开发人员往往乐此不疲，尝试新技术并在网站建设过程中锻炼自己这方面的经验。通常在网络应用这方面，新技术并不能带来访问效率的突飞猛进，相反，它可能使您的网站出现非常多的兼容性麻烦，比如近年来时兴的 CSS+DIV 技术就是如此，该技术确实是 W3C 推荐的，但各个浏览器厂商却并未完全支持该技术，在许多版本的浏览器中，CSS+DIV 制作的页面可能无法再现设计者的目的，甚至变得混乱，如果再加上没有经过很多的兼容性测试，那么毫无疑问，这个网站会被很多用户抵制。
9．慎用多媒体元素这里所指多媒体元素包括图像、声音、视频和动画等元素。好的多媒体元素可以让网页增色不少，同时也可以活跃界面，增加浏览者的兴趣。但在使用这些多媒体元素的时候一定要考虑传输时间问题。根据经验和统计，如果一个网站在 20s 以内还没有打开，多数浏览者都会放弃继续浏览，所以，尽量采用一般浏览器都支持的格式和大小适合的元素，保证网页的浏览顺畅。
10．真实有效的客服信息尽管很多时候不能要求访问者提供真实的联络信息，但不论什么时候，写在网页上的联系方式都应该是真实有效的，这直接关系到网站在产品营销时的获利可能，并且代表着比网络更为真实的、现实中您的企业的信誉问题。提供失效了的联系方式和咨询表单（如在线订购表格、在线投稿表格等）都是非常愚蠢的做法，访问者肯定从此对您的网站以致公司丧失信心。
本章主要讲述了网页相关的基本概念和知识，以及制作网页时需要注意的一些事项、网页设计的艺术原则、网页的实用布局结构、网页的色彩搭配等网页设计知识，最后介绍了网页制作的流程。使大家对网页设计有个初步的整体认识，为后面制作复杂的网页奠定基础。
