《网页制作与网站建设从入门到精通》第一部分入门篇

第一部分入门篇

第1章■ 网页设计基础

第2章■ HTML入门

第3章■ 网站建设基础

第4章■ 网页中的色彩知识

第1章网页设计基础

为了使网页初学者能够对网页设计有个总体的认识，本章首先介绍了网页设计的基本技术，如超文本标记语言HTML、网页脚本特效语言JavaScript和动态网页程序ASP，接着介绍如何设计网页和网页设计的基本原则，以及网页制作的常用工具 Dreamweaver、Flash 和Photoshop，从而为后面设计制作更加复杂的网页打下良好的基础。

学习目标

超文本标记语言HTML

网页脚本语言JavaScript

动态网页

如何设计网页

常用网页设计软件

1.1 预备知识

在学习网页设计之前，先来了解一下网页设计中常用的语言。超文本标记语言HTML是学习网页设计的基础，但是HTML语言的功能十分有限，无法达到人们的预期设计，以实现令人耳目一新的动态效果。这样，各种脚本语言和动态网页开发语言应运而生，使得网页设计更加多样化。

1．超文本标记语言HTML

通过浏览器浏览网页时，看到的其实是超文本文件。它一方面通过“超级链接”相互关联，另一方面又内含多媒体对象，因此称为“超文本”。在Internet上，使用超文本标记语言来描述超文本文件，客户端的浏览器则负责“解释”这些超文本，最终生成访问者看到的页面形式。

HTML语言由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素名称不分大小写。一个元素可以有多个属性，属性及其属性值同样不分大小写，各个属性用空格分开。“属性名＝属性值”合起来构成一个完整的属性。元素由标记构成，大多数标记是成对出现的，分起始标记<>符号和结尾标记</>符号，以便和页面的内容区分开来。

下面是一个基本的超级文本网页代码，其浏览效果如图1-1所示。

<head>

<title>我的个人网页</title>

<!--

body {

　background-image: url();

}

-->

</style></head>

<body>

　<tr>

　　</div></td>

　</tr>

</table>

</body>

</html>

图1-1 浏览效果

2．网页脚本语言JavaScript

JavaScript 是目前网页设计最容易学又最方便的语言。利用 JavaScript 可以轻易地做出漂亮的数字钟、有广告效果的跑马灯及显示浏览器停留的时间。这些特殊效果可以大大提高网页的互动性、吸引更多的人访问。图1-2所示是利用网页脚本语言制作的滚动公告特效。

脚本语言有以下几个特性。

在客户端执行。完全在用户的计算机上运行，无需经过服务器。

面向对象。具有内置对象，也可以直接操作浏览器对象。

动态变化。可以对用户的输入做出反应，也可以直接对用户输出。

简单易用。JavaScript脚本语言简单，初学者能快速掌握。

只能与HTML语言一起使用，要通过浏览器解释执行。

图1-2 利用脚本语言制作的滚动公告特效

3．动态网页

动态网页使用 HTML＋ASP 或 HTML＋PHP 或 HTML＋JSP 等来实现。动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后缀。

动态网页的特点简要归纳如下。

动态网页以数据库技术为基础，大大降低了网站维护的工作量。

采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理和订单管理等。图1-3所示是百度网站的主页，在文本框中输入关键字后可以查询相关信息。

动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。

动态网页中的“？”，在进行搜索引擎检索时存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

图1-3 百度搜索

1.2 如何设计网页

网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。网页设计中最重要的东西，并非在软件的应用上，而是在对网页设计的理解以及设计制作的水平上，在于自身的美感以及对页面的把握上。

1.2.1 网页设计的任务

网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下3类。

第一类是资讯门户类站点，像新浪、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。图1-4所示是搜狐网站的主页，可以看到网站提供的大量信息。

图1-4 搜狐网站主页

第二类是资讯和形象相结合的网站，像一些大型公司、国内高校等网站。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，又要突出企业、单位的形象。图1-5所示是资讯和形象结合的网站。

图1-5 资讯和形象结合的网站

第三类则是形象类网站，如一些中小型公司或单位的网站。这类网站一般较小，有的仅有几页，需要实现的功能也较为简单，此类网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。图1-6所示是形象类网站。

图1-6 形象类网站

当然，这只是从整体上来看，网站的具体情况还要具体分析，不同功能的站点还要区别对待。网站设计最重要的一点，就是满足客户的要求，它也属于设计的任务。明确了设计的任务之后，接下来要考虑的就是如何完成这个任务了。

1.2.2 网页设计的实现

设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成；第二部分为网页的设计制作，这一过程是在计算机上完成的。

设计网页的第一步是设计版面布局。可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，要以最适合的方式将图片和文字排放在页面的不同位置。常用的网页设计软件有Dreamweaver、Fireworks、Flash 以及Photoshop，这些都是很不错的软件。接下来要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。虽然在草图上定出了页面的大体轮廓，但是灵感一般都是在制作过程中产生的。设计一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作的过程中，会碰到许多问题，其中最敏感的莫过于页面的颜色了。处理的方法是，先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，并且有和谐、悦目的视觉效果。

1.2.3 网页设计的基本原则

设计是有原则的，网页设计遵循以下几个原则：统一、连贯、分割、对比及和谐。

统一是指网页的整体性，一致性。网页的整体效果是至关重要的，网页中各个版块设计风格要一致协调。图1-7所示的网页整体看起来就比较统一。

连贯是指要注意页面的相互关系。设计中要注意各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分融洽得犹如一气呵成。

分割是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使浏览者一目了然。图1-8所示设计的网页分成了若干小块。

图1-7 网页整体统一

图1-8 网页分成若干小块

对比就是通过矛盾和冲突，使设计更加富有生气。对比的手法很多，如多与少、曲与直、强与弱、长与短、粗与细、主与次、黑与白、动与静、美与丑等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。图1-9所示的网页设计中运用了对比效果。

图1-9 网页设计中运用对比效果

和谐是指整个页面符合美的法则，浑然一体。网页不仅仅是色彩、形状、线条等的随意混合。

1.3 常用网页设计软件

制作网页第一件事就是要选定网页制作软件。虽然用记事本手工编写源代码也能做出网页，但这需要对编程语言相当了解，并不适合于广大的网页设计爱好者。由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作。Flash、Dreamweaver 和 Photoshop 这三款软件相辅相成，是制作网页的首选工具，其中Dreamweaver主要用来制作网页文件，制作出来的网页兼容性好、制作效率也很高；Flash用来制作精美的网页动画；Photoshop用来处理网页中的图形。

1．网页编辑排版软件Dreamweaver

Dreamweaver CS6 是一个所见即所得的网页编辑工具，能够使网页和数据库关联起来，支持最新的HTML和CSS，可用于Web站点、Web页和Web应用程序的设计、编码和开发。Dreamweaver CS6 含有一个简洁、高效的界面，且性能也得到了改进。它不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中。图1-10所示是利用Dreamweaver CS6制作的排版网页。

2．网页动画制作软件Flash

现在非常流行的Adobe公司出品的Flash互动网页制作工具，是一款功能非常强大的交互式矢量多媒体网页制作工具。它能够轻松输出各种各样的动画网页，而且不需要特别繁杂的操作，也比 Java 小巧精悍。它的动画效果、互动效果、多媒体效果十分出色。由于 Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。这是一款十分适合动态 Web 制作的工具。图 1-11 所示是利用 Flash CS6 制作的网页动画。

图1-10 利用Dreamweaver CS6制作网页

图1-11 利用Flash CS6制作网页动画

3．网页图像制作软件Photoshop

Photoshop 是 Adobe 公司推出的图像处理软件，目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展，Photoshop已历经数次版本更新，目前最新版本为 Photoshop CS6。图 1-12 所示是利用 Photoshop CS6 设计的网页图像。

图1-12 利用Photoshop CS6设计网页图像

1.4 经典习题与解答

1.4.1 填空题

（1）网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为______类。

（2）设计网页的第一步是______。可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，要以最适合的方式将图片和文字排放在页面的不同位置。

1.4.2 简答题

简述网页设计的基本原则。

第2章 HTML入门

HTML（即超文本标记语言）是WWW的描述语言。HTML文本是由HTML标记组成的描述性文本，HTML 标记可以用于说明文字、图形、动画、声音、表格和链接等。HTML的结构包括头部（head）和主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

学习目标

掌握HTML基本语法

掌握页面布局与文字标记

掌握多媒体

掌握表格标记

掌握超级链接标记

掌握框架标记

掌握表单常用标记

2.1 HTML 的基本语法

HTML 是英文 HyperText Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。所谓超文本，是因为它可以加入图片、声音、动画和视频等内容。

2.1.1 HTML 基本语法结构

超文本文档分为头部和主体两部分。文档头部是对这个文档进行的一些必要的定义，文档主体中是要显示的各种文档信息。

<html>

　<head>

　　网页头部信息

　</head>

　　<body>

　　　网页主体正文部分

　　</body>

</HTML>

其中<HTML>在最外层，表示这对标记间的内容是HTML文档。也可以省略<html>标记，因为.html或.htm文件被浏览器默认为是HTML文档。<head>之间为文档的头部信息，如文档标题等，若不需头部信息则可省略此标记。<body>标记一般不能省略，它表示正文内容的开始。

下面是一个最基本的超文本文档结构。

<html>

<head>

<title>最简单的超文本文档</title>

</head>

<body>

<h3>欢迎光临我的主页</h3>

<br>

<hr>

　这是我第一次做主页，欢迎提出您的建议！

</font>

</center>

</body>

</html>

在浏览器中浏览效果如图2-1所示。

图2-1 浏览效果

HTML的任何标记都由“<”和“>”符号围起来，称为标记，是用来分割标记文本的元素，从而形成文本的布局、文字的格式及五彩缤纷的画面。在起始标记的标记名前加上符号“/”便是其终止标记，如</table>。

1．单标记

某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思。这类标记的语法如下：

<标记名称>

最常用的单标记是<br>, 它表示换行。

2．双标记

另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分构成，必须成对使用。其中，始标记告诉Web 浏览器从此处开始执行该标记所表示的功能；而尾标记告诉Web 浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。这类标记的语法如下。

<标记>内容</标记>

其中“内容”部分就是要被这对标记施加作用的部分。

3．标记属性

许多单标记和双标记的始标记内可以包含一些属性。其语法如下。

<标记名字属性 1 属性 2 属性 3 … >

各属性之间无先后次序，属性也可省略，如单标记<hr>表示在文档当前位置画一条。

2.1.2 创建HTML 文件

HTML的格式非常简单，是由文字和标记组合而成的纯文本文件，几乎任何的文字编辑器，如 Windows 中的记事本、写字板都可以用来编写 HTML 文件，只要将文件存成 ASCII纯文本格式，并且以.htm或.html为扩展名即可。

1．使用记事本创建HTML文件

下面学习如何使用记事本建立HTML文件，具体操作步骤如下。

① 启动计算机，选择任务栏中的【开始】|【所有程序】|【附件】|【记事本】命令，打开记事本编辑窗口，即可编写HTML代码，如图2-2所示。

② 当编辑完 HTML 文件后，选择【文件】|【保存】命令，将它存为扩展名为.htm 或.html的文件即可，如图2-3所示。

图2-2 在记事本中输入代码

图2-3 保存为html文件

③ 打开网页，在浏览器中浏览网页，如图2-4所示。

图2-4 浏览网页效果

2．使用Dreamweaver创建HTML文件

使用 Dreamweaver CS6 创建 HTML 文件，具体操作步骤如下。

① 打开 Dreamweaver CS6，单击文档中的【代码】按钮，打开代码视图，在代码视图中可以输入HTML代码，如图2-5所示。

② 输入代码完成后，设计视图中的效果如图2-6所示。

图2-5 在代码视图中输入代码

图2-6 打开设计视图

2.2 页面布局与文字标记

文本是网页传播信息的基本载体，在网页中的重要地位是可想而知的。对于任何一个基本网页来说，文本都是必不可少的，文本的格式化也是非常重要的。下面介绍常用的文字标记和页面布局标记。

2.2.1 标题

一般文章都有标题、副标题、章和节等结构，HTML 中也提供了相应的标题标记<Hn>。HTML总共提供6个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题。

<H1>…</H1>　　一级标题

<H2>…</H2>　　二级标题

<H3>…</H3>　　三级标题

<H4>…</H4>　　四级标题

<H5>…</H5>　　五级标题

<H6>…</H6>　　六级标题

下面举例讲述标题标记的使用方法。

① 打开 Dreamweaver CS6，单击文档中的【代码】按钮，打开代码视图，在代码视图中输入如下HTML代码，如图2-7所示。

<html>

<head>

</head>

<body>

这是一行标题文字<P>

</body>

</html>

② 输入代码完成后，在设计视图中可以看到每一个标题的字体为黑体字，效果如图2-8所示。

图2-7 输入代码

图2-8 标题效果

2.2.2 换行<br>

在编写HTML文件时不必担心段落过长的部分会被浏览器遮住，因为每当浏览器窗口被缩小时，浏览器会自动将右边的文字转移至下一行，所以对于需要换行的地方，应加上<br>标记。

下面讲述如何使用换行标记<br>，具体操作步骤如下。

① 打开 Dreamweaver CS6，单击文档中的【代码】按钮，打开代码视图，在代码视图中输入如下HTML代码，如图2-9所示。

<html>

<head>

<title>没有换行示例</title>

</head>

<body>

第一阶段：

2013年8月1日---2014年1月16日

第二阶段：

2013年8月17日---2014年2月6日

第三阶段：

2013年8月7日---2013年4月1日

第四阶段：

2013年8月2日---2013年4月11日

</body>

</html>

② 输入代码完成后，设计视图中的效果如图2-10所示。

图2-9 输入代码

图2-10 没有换行效果

③ 单击文档中的【代码】按钮，打开代码视图，在代码视图中日期的后面添加<br>代码，如图2-11所示。

<html>

<head>

</head>

<body>

第一阶段：

2013年8月1日---2014年1月16日<br>

第二阶段：

2013年8月17日---2014年2月6日<br>

第三阶段：

2013年8月7日---2013年4月1日<br>

第四阶段：

2013年8月2日---2013年4月11日

</body>

</html>

④ 输入代码完成后，设计视图中的效果如图2-12所示。

图2-11 添加<br>代码

图2-12 换行效果

2.2.3 段落标记<p>

为了使文本排列的整齐和清晰，文字段落之间经常用<p>和</p>来做标记。段落的开始由<p>来标记，结束由</p>来标记。</p>是可以省略的，因为下一个<p>的开始就意味着上一个<p>的结束。

<p>标记还有一个属性aling，它用来指名字符显示时的对齐方式，一般值有center、left、right 3 种。

下面讲述如何使用段落标记<P>，具体操作步骤如下。

① 打开 Dreamweaver CS6，单击文档中的【代码】按钮，打开代码视图，在代码视图中输入如下HTML代码，如图2-13所示。

<html>

<head>

</head>

<body>

活动细则 <P>1.“知识大富翁”活动分 4 个阶段进行，每个阶段按积分排名产生阶段大奖，每日根据用户答题情况产生 20 名中奖用户。<P>2. 可以参加本次活动的用户为:至少绑定了一项参加本次活动的付费业务的用户，卡用户及全港通用户除外。参加本次活动的付费业务包括白金业务、钻石业务、天天宽频、宽带联盟。</P>

</body>

</html>

② 输入代码完成后，设计视图中的效果如图2-14所示。

图2-13 输入代码

图2-14 段落标记效果

2.2.4 水平线段<hr>

水平线对组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。水平线段<hr>有以下3个属性。

size：水平线的宽度。

width：水平线的长，用占屏幕宽度的百分比或像素值来表示。

align：水平线的对齐方式，有 left、right 和 center 3 种。

noshade：线段无阴影属性，为实心线段。

下面讲述如何设置水平线的宽度，具体操作步骤如下。

① 打开 Dreamweaver CS6，单击文档中的【代码】按钮，打开代码视图，在代码视图中可输入如下HTML代码，如图2-15所示。

<html>

<head>

<title>线段粗细的设定</title>

</head>

<body>

<p>此线段没有size设定，取内定值size=1来显示<br>

<hr>

<p>设置此线段的size=5<br>

<p>设置此线段的size=10<br>

</body>

</html>

② 输入代码完成后，设计视图中的效果如图2-16所示。

图2-15 输入代码

图2-16 水平线

2.2.5 文字的大小设置

文字大小设置的标记是font，font有一个size属性，通过指定size属性就能设置字号大小。可以在size属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

通过下面的实例可以看出字号的大小。

① 打开 Dreamweaver CS6，单击文档中的【代码】按钮，打开代码视图，在代码视图中输入如下HTML代码，如图2-17所示。

② 输入代码完成后，设计视图中的效果如图2-18所示。

图2-17 输入代码

图2-18 字号大小

<html>

<head>

</head>

<body>

</body>

</html>

2.2.6 文字的字体与样式

Dreamweaver中的文本格式设置与使用标准字处理程序类似。可以为文本设置默认格式、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式如粗体、斜体、上划线和下划线。

为了丰富文字的变化，或强调某一部分，HTML提供了如下所示标记。

<b>　　　</b>　　　粗体

<i>　　　</i>　　　斜体

<u>　　　</u>　　　加下划线

<tt>　　　<tt>　　　打字机字体

<big>　　　</big>　　大型字体

<small>　　</small>　　小型字体

<blink>　　</blink>　　闪烁效果

<em>　　　</em>　　表示强调，一般为斜体

<strong>　　</strong>　　表示特别强调，一般为粗体

<cite>　　　</cite>　　用于引证、举例，一般为斜体

通过下面的实例可以看出文字的变化。

① 启动 Dreamweaver CS6，单击文档中的代码按钮，打开代码视图，在代码视图中输入如下HTML代码，如图2-19所示。

<html>

<head>

<!--

-->

</style>

</head>

<body>

</P>

</body>

</html>

② 输入代码完成后，设计视图中的效果如图2-20所示。

图2-19 输入代码

图2-20 字号大小

2.2.7 文字的颜色

文本的颜色值可以是一个16进制数。文字颜色设置格式如<font color=color_value>…</font>。

通过下面的实例可以看出文字颜色的变化。

① 打开 Dreamweaver CS6，单击文档中的代码按钮，打开代码视图，在代码视图中输入如下HTML代码，如图2-21所示。

图2-21 输入代码

<html>

<head>

<title>文字的颜色</title>

</head>

<font color="#ff0000">文字的颜色</font><br>

<font color="#00ff00">文字的颜色</font> <br>

<font color="#0000cc">文字的颜色</font><br>

<font color="#ffff00">文字的颜色</font><br>

<font color="red">文字的颜色</font> <br>

<font color="blue">文字的颜色</font><br>

<font color="yellow">文字的颜色</font><br>

</center>

</body>

</html>

② 输入代码完成后，设计视图中的效果如图2-22所示。

图2-22 文字的颜色

2.3 多媒体

互联网之所以在这么短的时间内如此广泛地受到人们的青睐，很重要的一个原因是它能支持多媒体的特性，如图像、声音和动画等。

2.3.1 插入图像

src属性指明了所要链接的图像文件地址，这个图形文件可以是位于本地机器上的图形，也可以是位于远端主机上的图形。

例如在代码视图中输入如下代码。

<html>

<head>

</head>

<body>

</body>

</html>

在文档中预览效果，如图2-23所示。

图2-23 插入图像

2.3.2 播放音乐

浏览器可以播放的音乐格式有MIDI音乐、WAV音乐和AU格式。在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。

例如在代码视图中输入如下代码。

<html>

<head>

</head>

<body>

现在让我们一起来听music！

</body>

</html>

在文档中预览的效果如图2-24所示，在浏览器中预览效果即可以听到优美的音乐，如图2-25所示。

图2-24 在文档中的效果

图2-25 在网页中的效果

2.3.3 播放视频

可以通过不同方式，使用不同格式将视频添加到Web页面。视频可以下载，或者可以对视频进行流式处理以便在下载它的同时播放它。用浏览器可以播放的格式有MAV格式和AVI格式。与音乐的播放一样，可以使用EMBED标记播放视频。

2.4 表格标记

表格标记对制作网页是很重要的，现在很多网页都使用多重表格。利用表格可以实现各种不同的布局方式，并保证当浏览者改变页面字体大小的时候保持页面布局，还可以任意地进行背景和前景颜色的设置。

2.4.1 表格的基本结构

表格的基本结构是<table>...</table>，例如在代码视图中输入代码。

</table>

打开拆分视图效果，如图2-26所示。

图2-26 表格的基本结构

2.4.2 表格的标题

表格标题的位置，可由align属性来设置，分别由表格上方和表格下方组成。

设置标题位于表格上方：<caption align=top>...</caption>

设置标题位于表格下方：<caption align=bottom>...</caption>

如设置表格位于表格的上方，在网页文档中效果如图2-27所示。

图2-27 标题置于表格的上方

2.4.3 表格的尺寸设置

一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列方式。

width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素表示，也可以用百分比来表示。下面是一个长为50像素，宽为80像素的表格，如图2-28所示。

图2-28 表格的尺寸设置

2.4.4 表格内文字的对齐、布局

表格中数据的排列方式有两种，左右排列和上下排列。左右排列是以align属性来设置，而上下排列则由valign属性来设置。其中左右排列的位置可分为3种：左对齐（left）、右对齐（right）和居中对齐（center）；而上下排列比较常用的有4种：顶端（top）、居中（middle）、底部（bottom）和基线（baseline）。

图2-29所示的表格中的数据采用的是左右排列方式。

图2-29 表格内文字的对齐

2.4.5 表格的颜色

在表格中，用户既可以对整个表格设置底色，也可以对任何一行、一个表格使用背景色。

表格的背景颜色：<table bgcolor=#>

行的背景颜色：<tr bgcolor=#>

表格的背景颜色：<th bgcolor=#>

在Dreamweaver代码视图中添加如下代码。

<html>

<head>

</head>

<tr>

</table>

</body>

</html>

在文档中的效果如图2-30所示。

图2-30 表格的颜色

2.5 超级链接标记

超级链接命令可以链接到图像、对象或其他文档或文件的文本链接。

一个链接的基本格式如下。

标记<a>表示一个链接的开始，</a>表示链接的结束。

href属性定义了这个链接所指的地方。

通过点击“链接文字”可以到达指定的文件。

例如要链接到新浪网，可输入<a href="http://www.sian.com.cn">新浪首页</A>。

链接分为本地链接、url链接和目录链接。在链接的各个要素中，链接地址是最重要的，一旦路径上出现差错，该链接就无法从用户端取得。

本地链接：对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。

URL链接：如果链接的文件在其他服务器上，就要弄清所指向的文件是采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通信协议的方式与外界沟通来存取信息。

目录链接：前面所谈的链接地址，只是单纯的指向一份文件，对于直接指到某文件上部、下部或是中央部分，以上方法是无法做到的。

2.6 框架标记

在网页中使用框架可以把浏览器的窗口分隔为若干个相互独立又有联系的区域，在每个区域中显示一个独立的网页文件。下面就介绍框架标记的使用。

2.6.1 框架结构的基本格式

框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其他部分中所显示内容无关的HTML文档。

框架结构的基本格式如下所示。

...

</frameset>

在有frames结构的HTML文件中，frames文件的整体结构如下所示。

<html>

<head>

</head>

...... </frameset>

</html>

2.6.2 各窗口的尺寸设置

将窗口分为几块，横向分用 rows 属性，纵向分用 cols 属性，每一块的大小可以通过调节这两个属性的值来实现。

字符串中的数字表示每个分窗口所占的尺寸，数字中间用逗号隔开，有几个数字就表示分出了几个窗口。当然，这其中的任何一个数字都可以由“*”来代替，这样表示由浏览器自动设置其大小。

2.6.3 各窗口间相互操作

由Frames分出来的几个窗口的内容并不是静止不变的，往往是一个窗口的内容随着另一个窗口的要求而不断变化，这就提高了frames的利用价值。为了完成各窗口之间的相互操作，必须为每一个窗口起一个名字，这个名字用属性name来定义，例如：<frame src="frame/left.html"name="left">。

定义了窗口名称，还应该设置target属性，target属性指定了所链接的文件出现在哪一个窗口。target的值可以是name定义的名称，也可以是以下4类值。

<a href=url target=_blank>　显示一个新窗口

<a href=url target=_self>　显示在同一个窗口

<a href=url target=_parent>　显示在Frameset的前一份文件的窗口

<a href=url target=_top>　显示在整个浏览器窗口

2.7 表单标记

表单在网页中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、填写的表格、提交和重填按钮等内容。用户在填写了所需的资料之后，按下“提交”按钮，这样所填资料就会通过专门的CGI接口传到Web服务器上。网页设计者随后就能在Web服务器上看到用户填写的资料，从而完成了反馈和交流。表单常用<form>、<input>、<option>、<select>等标记。

2.7.1 表单标记

表单标记<form>的主要作用是设置表单的起始位置，并指定处理表单数据程序的 url 地址。其基本语法结构如下。

<form action＝url method=get|post name＝value οnreset=function

onsubmit＝function target=window> </form>

其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action="mailto:邮件地址"。

method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在 action 指定的地址后面传送到服务器；当 method=post 时则将输入数据按照 HTTP传输协议中的POST传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。

name：用于设定表单的名称。onrest和onsubmit是主要针对reset按钮和submit按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。

target：指定输入数据结果显示在哪个窗口，这需要与<frame>标记配合使用。

2.7.2 文本域

每个文本域之所以会有不同的类型，就在于文本域的类型设置不同。例如，图2-31所示的文本域类型是【密码】。

图2-31 文本域

其参数设置如下。

name="名称"：设置文本框的名称。

size="数值"：设置文本框显示的宽度。

value="预设内容"：设置文本框的预设内容。

align="对齐方式"：设置文本框的对齐方式，其值有：top（向上对齐）、middle（中间对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对居中）、absbottom（绝对置下）等。

maxlength="数值"：设置文本框中可设置输入的最大长度。

2.7.3 单选按钮

选择【插入】|【表单】|【单选按钮】命令，可以插入单选按钮，单选按钮通常是好几个选项一起列出来供使用者选择，一次只能从中选一个，故称为单选按钮，如图2-32所示。

图2-32 单选按钮

其参数设置如下。

name="名称"：设置单选按钮的名称。

value="内容"：设置单选按钮的内容、值或是意义。

align="对齐方式"：设置对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom （向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对居中）、absbottom（绝对置下）等。

checked：设置为预设选取值。

2.7.4 复选框

选择【插入】|【表单】|【复选框】命令，可以插入复选框，复选框通常是好几个选项一起摆出来供使用者勾选，一次可以同时选择好几个，故为复选框，如图2-33所示。

图2-33 复选框

其参数设置如下。

name="名称"：设置复选框的名称。

value="内容"：设置复选框的内容、值或是意义。

align="对齐方式"：设置复选框的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对居中）、absbottom（绝对置下）等。

checked：设置为预设选取值。

2.7.5 按钮

通常表单填完之后，都会有一个提交按钮以及重置的按钮如图2-34所示。

图2-34 按钮

其参数设置如下。

name="名称"：设置此按钮的名称。

value="文字"：设置按钮上要显示的文字，若是没有设置，浏览器也会自动加上“提交”、“重置”等字样。

align="对齐方式"：设置此按钮的对齐方式，其值有：top（向上对齐）、middle（居中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对居中）及absbottom（绝对置下）等。

2.7.6 列表/菜单

利用<select name="名称">可以制作一个列表/菜单，另外，还需要配合<option>标记来产生选项，如图2-35所示。

图2-35 列表/菜单

其参数设置如下。

size="数值"：设置列表框的大小，预设值为1。

multiple：设置列表框为复选，可以一次选好几个选项。

2.8 经典习题与解答

2.8.1 填空题

（1）HTML的结构包括______、______两大部分，其中______描述浏览器所需的信息，而______则包含所要说明的具体内容。

（2）HTML的任何标记都由______和______围起来，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。在起始标记的标记名前加上符号______便是其终止标记。

2.8.2 上机操作题

根据本章学习的知识自己动手编写一段代码，其效果如图2-36所示。

图2-36 效果图

第3章网站建设基础

网页是网站最基本的组成部分，网站之间并不是杂乱无章的，它们通过各种链接相互关联，从而描述相关的主题或实现相同的目的。本章从网站的角度讲述网站建设基础，包括什么是域名、什么是空间，以及域名和空间的申请，最后重点讲述了网站建设的基本流程。

学习目标

什么是WWW

申请域名

申请服务器空间

网站建设的一般流程

3.1 预备知识

在正式创建网站前，先来了解一下网站的基本知识，如什么是WWW，如何申请域名和空间等。

3.1.1 什么是WWW

WWW是Internet上的多媒体信息查询工具，也是发展最快和目前使用得最广泛的服务。正是因为有了WWW工具，才使得近年来Internet迅速发展，且用户数量飞速增长。WWW是 World Wide Web 的缩写，简称为 Web，中文名字为“万维网”。它起源于 1989 年3 月，是由欧洲量子物理实验室（the European Laboratory for Particle Physics）CERN 发展出来的主从结构分布式超媒体系统。

WWW以“超文本”方式将Internet上的信息数据连接在一起，让用户能以非常简单的方式获取世界各地的信息。超文本是一种结构化的文档，采用超文本标记语言书写而成，又称为HTML文档。WWW之所以如此吸引众多用户，除了应用超文本的技术外，还结合了超媒体于其中。这使得网上用户只要坐在计算机前，就可以看到世界各地以文字、图片、声音视频等形式存储的信息。

3.1.2 申请域名

域名是企业或组织在 Internet 上的惟一标识，是网络商标。它由英文字母、数字及中横线组成，被小数点“.”分隔成几部分，如http://www.ad88.com/是一个国际域名。只要在浏览器中输入网址，全世界接入 Internet 的人就能够准确无误地访问到网站的内容，并且通过域名客户就能在网上找到企业的有关产品和服务等有用的信息。域名一旦注册，其他个人或团体就都不能在网上再注册这个域名。在信息业飞速发展的今天，域名已成为企业在网络上的品牌形象，注册企业自己的独立域名已是现代企业在互联网上宣传自己的第一步，选择一个好记而又与企业名称、业务密切相关的域名是必需的。

用户可以去搜索引擎查找相关的域名空间提供商，在他们的网站上可以在线域名查询，从而找到最适合自己的而且还未被注册的域名。

提示

那么如何起一个好的域名呢，有以下一些注意事项。

一般来说域名长度越短越好。

域名的意义越简单越常用越好。

域名要尽可能给人留下良好的印象。

一般来说，组成域名的单词数量越少越好（少于 3 个为佳）。主要类型有英文、数字、中文拼音、混合。

是否是以前被广泛使用过的域名，是否在搜索引擎中有好的排名或者多的链接数。

是否稀有，是否有不可替代性。

3.1.3 申请服务器空间

有了自己的域名后，就需要一个存放网站文件的空间，而这个空间在 Internet 上就是服务器。通常情况下，有以下几种方式可供企业选择。

虚拟主机方式。所谓虚拟主机是指使用特殊的软硬件技术，把计算机分成若干台“虚拟”的主机。建议企业上网采用虚拟主机方式。一般虚拟主机提供商都能向用户提供100MB、300MB、500MB直到一台服务器的虚拟主机空间，可根据网站的内容设置及其发展前景来选择。一个网页所占的磁盘空间大约 20～50KB，10MB 空间大约可以放置200～500页，但如果对网站有特殊的要求，如图片较多、动画较多、需要文件下载或有数据库等，就需要多一些空间。

独立的服务器。对于经济实力雄厚且业务量较大的企业，也可以购置自己独立的服务器，但这需要很高的费用及大量的人力、物力投入，合计起来是虚拟主机的数十倍之多。

3.2 网站建设的一般流程

创建一个网站是一个系统工程，有一定的工作流程，只有遵循这个步骤，按部就班地进行，才能设计出一个满意的网站。因此在制作网站前，先要了解网站建设的基本流程，这样才能制作出更好、更合理的网站。

3.2.1 确定网站主题

网站主题是建立的网站所要包含的主要内容。一个网站必须要有一个明确的主题，特别是对于个人网站，一个人没有能力，也没这个精力制作一个内容大而全的综合网站。所以必须要找准一个自己最感兴趣的内容，将它做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。

提示

对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要试图去制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。

3.2.2 网站整体规划

规划一个网站，可以用树状结构先把每个页面的内容大纲列出来。尤其当要制作一个很大的网站的时候，特别需要把架构规划好，也要考虑到以后的扩充性，以免做好以后再更改整个网站的结构。

网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局及文字图片的运用等。只有在制作网页之前把这些方面都考虑到了，才能在制作时胸有成竹，也只有如此制作出来的网页才能有个性、有特色、具有吸引力。图3-1所示是网站整体结构图。

图3-1 网站整体结构图

3.2.3 收集资料与素材

首先，要新建一个新的总目录（如d:/我的网站）来放置建立网站的所有文件，然后再在这个目录下建立两个子目录：“文字资料”、“图片资料”。放入目录中的文件名最好全部用英文小写，因为有些主机不支持大写和中文。

1．文本内容素材的收集

用户可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成 Word 文档保存在“文字资料”子目录下。收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。

2．动画图像素材的收集

只有文本内容的网站对于访问者来讲，是枯燥乏味、缺乏生机的。如果加上艺术内容素材，如静态图片、动态图像及音像等，网页将充满动感与生机，也将吸引更多的访问者。这些素材主要来自于以下4个方面。

网页上可以用一些动画与特效增加主页的美观与功能，动画可上网找，最好能自己制作，GIF 格式的最常用。目前流行的是 Flash 动画，变化更多、尺寸更小，缺点是有些计算机上的浏览器默认没有安装Flash浏览软件，此时不能看到Flash。网上还有许多免费的JavaScript等可供使用。图3-2所示为从网上搜集图片保存到自己的网站上。

从 CD-ROM 中获取。在市面上，有许多关于图片素材库的光盘，也有许多教学软件，我们可以选取其中的图片资料。

利用现成图片或自己拍摄。既可以从各种图书出版物（如科普读物、教科书、杂志封面、摄影集及摄影杂志等）获取教学图片，也可以使用自己拍摄和积累的照片资料，或将杂志的封面彩图用彩色扫描仪扫描下来，将其加工后，整合制作到网页中。

图3-2 从网上搜集图片

提示

图片应尽量精美而小巧，不要盲目追求大而全，要以在网页的美观与网络的速度两者之间取得良好的平衡为宜。

3.2.4 设计网页图像

在整体规划好网站和搜集资料完成后就需要设计网页图像了，网页图像设计包括logo（标志）、标准色彩、标准字、宣传广告和首页等。

设计网站标志。标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容，如网站内有代表性的人物、动物及植物，可以用它们作为设计的标本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形及字母的组合等方式可以很容易地制作好自己的标志。图3-3所示为设计的网站标志。

图3-3 设计网站标志

设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志和主色块，给人以整体统一的感觉。其他色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。

设计网站字体。和标准色彩一样，标准字体是指用于标志和导航栏的特有字体。一般网页默认的字体是宋体。为了体现站点的与众不同和特有风格，可以根据需要选择一些特别字体，也可以根据自己网站所表达的内涵，选择更贴切的字体。

提示

需要说明的是。使用非默认字体只能用图片的形式，因为浏览者的计算机里很可能没有安装特别字体，否则辛辛苦苦地设计制作便可能付之东流了。

设计网站宣传广告。也可以说是网站的精神、主题与中心，或者是网站的目标，应该用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。图3-4所示为设计的网站宣传广告。

首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括banner、菜单及版权等模块设计。图3-5所示为设计网站首页。

图3-4 设计的网站宣传广告

图3-5 设计网站首页

3.2.5 制作网页

下面就需要按照规划逐步制作网页了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大地提高制作效率。

3.2.6 开发动态网站模块

页面设计制作完成后，如果还需要动态功能的话，就需要开发动态功能模块，网站中常用的功能模块有搜索功能、留言板、新闻信息发布、在线购物、技术统计、论坛及聊天室等。

1．搜索功能

搜索功能是使浏览者在短时间内，快速地从大量的资料中找到符合要求的资料。这对于资料非常丰富的网站来说非常有用。要建立一个搜索功能，就要有相应的程序以及完善的数据库支持，可以快速的从数据库中搜索到所需要的职位。

2．留言板

留言板、论坛及聊天室是为浏览者提供信息交流的地方。浏览者可以围绕个别的产品、服务或其他话题进行讨论、提出问题、提出咨询，或者得到售后服务。但是聊天室和论坛是比较占用资源的，一般不是大中型的网站没有必要建设论坛和聊天室。图 3-6 所示为留言页面。

图3-6 留言页面

3．新闻信息发布系统

提供方便直观的页面文字信息的更新维护界面，提高工作效率、降低技术要求，非常适合用于经常更新的栏目或页面，图3-7所示为新闻发布系统的页面。

4．在线购物

实现电子交易的基础，用户将感兴趣的产品放入自己的购物车，以备最后统一结账。当然，用户也可以修改购物的数量，甚至将产品从购物车中取出。用户选择结算后系统自动生成本系统的订单。图3-8所示为购物系统的页面。

图3-7 新闻信息发布系统

图3-8 购物系统

3.2.7 发布与上传

网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，可以采用Dreamweaver自带的站点管理上传文件，也可以采用专门的FTP软件上传。利用这些FTP工具，可以很方便地把网站发布到服务器上。上传网站以后，要在浏览器中打开自己的网站，逐页、逐个链接地进行测试。如果发现问题，要及时修改，然后再上传测试。

3.2.8 后期更新与维护

网站要注意经常维护更新内容，保持内容的新鲜，不要做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。

网站维护包括：网页内容的更新；通过软件进行网页内容的上传；目录的管理；计数器文件的管理及网站的定期推广服务等。更新是指在不改变网站结构和页面形式的情况下，为网站的固定栏目增加或修改内容。

3.2.9 网站的推广

网页做好之后，还要不断地对其进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如，到搜索引擎上注册；与别的网站交换链接；加入广告链等。

网站推广是企业网站获得有效访问的重要步骤，合理而科学的推广计划能令企业网站收到接近期望值的效果。网站推广作为电子商务服务的一个独立分支正显示出其巨大的魅力，并越来越引起企业的高度重视和关注。

3.3 经典习题与解答

3.3.1 填空题

（1）WWW是World Wide Web（万维网）的缩写，也可以简称为Web，中文名字为“万维网”。它起始于______年 3 月，是由欧洲量子物理实验室（the European Laboratory for Particle Physics）CERN发展出来的主从结构分布式超媒体系统。

（2）在整体规划好网站和搜集资料完成后就需要设计网页图像了，网页图像设计包括______、标准色彩、标准字、______和______等。

3.3.2 简答题

简要说出网站建设的一般流程。

第4章网页中的色彩知识

色彩是最影响人的视觉的东西。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，即网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些色彩强烈的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。

学习目标

色彩基础知识

网页色彩的搭配

4.1 色彩基础知识

色彩的魅力是无限的，它可以让本来很平淡无味的东西变得漂亮、美丽。随着信息时代的快速到来，网络也开始变得多姿多彩。人们不再满足于简单的文字与图片，而是要求网页看上去漂亮、舒适。所以网页设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格、配色等设计艺术。

4.1.1 色彩的基本概念

为了能更好地应用色彩来设计网页，让我们先来了解一些色彩的基本概念。自然界中的色彩五颜六色、千变万化，但是最基本的只有3种（红、黄、蓝），其他的色彩都可以由这3种色彩调和而成，这3种色彩称为“三原色”。平时所看到的白色光，经过分析后，在色带上可以看到它包括红、橙、黄、绿、青、蓝、紫7种颜色，各颜色间自然过渡，其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当距离显示屏较远的时候，人们首先看到的不是优美的版式或者是美丽的图片，而是网页的色彩。图4-1所示为远距离看网页看到的是网页的色彩。

在网页设计时应注意以下几个原则。

用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

用两种色彩。先选定一种色彩，然后选择它的对比色。

图4-1 网页色彩

用一个色系。简单地说就是用一个感觉的色彩。

不要将所有颜色都用到，尽量控制在3～5种色彩。

背景和前文的对比尽量要大，以便突出主要文字内容，绝对不要用花纹繁复的图案作背景。

4.1.2 常见色彩表达的意义

现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列，其他的色彩都属于彩色。任何一种彩色都具备3个属性：色相、明度和纯度。其中非彩色只有明度属性。

色相：指的是色彩的名称，这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。如紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度就变得很容易搭配，如深绿、暗绿、草绿。

明度：也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。如一些购物、儿童类网站，多用的是一些鲜亮的颜色，让人感觉绚丽多姿、生气勃勃。图 4-2 所示是色彩鲜明的儿童网站。

图4-2 明度

纯度：指色彩的鲜艳程度，纯度高的色彩鲜亮，纯度低的色彩暗淡，含灰色。

相近色：色环中相邻的3种颜色。相近色的搭配给人的视觉效果很舒适、很自然，所以相近色在网站设计中极为常用。

互补色：色环中相对的两种色彩。

暖色：暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站、电子商务网站、儿童类网站等，用以体现商品的琳琅满目、儿童类网站的活泼、温馨等效果。图4-3所示的页面有一种温馨的感觉。

图4-3 暖色

冷色：冷色一般情况下跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技网站，主要表现严肃、稳重等效果，绿色、蓝色、蓝紫色等都属于冷色系列，如图4-4所示。

图4-4 冷色

色彩均衡：网站让人看上去舒适、协调，除了文字、图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。一个网站不可能单一地运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所占的比例，面积等。比如鲜艳明亮的色彩面积应小一点，这样会让人感觉舒适，不刺眼，这就是一种均衡的色彩搭配，图4-5所示的是色彩均衡的网站。

对于网页来说，创建完美的色彩是至关重要的。颜色是一个强有力的、高刺激性的设计元素，用好了往往能收到事半功倍的效果。颜色能激发人的感情，完美的色彩可以使网页充满活力，能向访问者表达出一种信息。但是当色彩运用不当的时候，表达的意思就不完整，甚至可能表达出一种错觉。

图4-5 色彩均衡

4.2 网页色彩的搭配

色彩搭配既是一项技术性工作，同时也是一项艺术性很强的工作，因此在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，才能设计出色彩鲜明、性格独特的网站。

4.2.1 网页色彩搭配原理

网页的色彩是树立网站形象的关键之一。网页的背景、文字、图标、边框及链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好地表达网站的内涵和主题呢？下面是网页色彩搭配的一些原理。

色彩的鲜明性

网页的色彩要鲜明，容易引人注目，图4-6所示为色彩鲜明的网页。

色彩的独特性

要有与众不同的色彩，网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。图4-7所示的网页采用了独特的色彩。

图4-6 色彩鲜明的网页

图4-7 网页采用独特的色彩

色彩的艺术性

网站设计也是一种艺术活动，因此必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。不同色彩会使人产生不同的联想，色彩的选择要和网页的内涵相关联。

色彩搭配的合理性

网页设计虽然属于平面设计的范畴，但又与其他平面设计不同，它在遵循艺术规律的同时，还考虑人的生理特点。合理的色彩搭配，给人一种和谐、愉快的感觉。避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

4.2.2 网页设计中色彩搭配的技巧

到底用什么色彩搭配好看呢？下面是网页色彩搭配的一些常见技巧。

使用单色

尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。

使用邻近色

所谓邻近色，就是在色带上相邻近的颜色。如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一，如图4-8所示。

图4-8 临近色

使用对比色

对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用，如图4-9所示。

图4-9 使用对比色

黑色的使用

黑色是一种特殊的颜色，如果使用恰当，设计合理，往往可以产生很强烈的艺术效果。黑色一般用作背景色，与其他纯度色彩搭配使用。

背景色的使用

背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景要与文字的色彩对比强烈一些，如图4-10所示。

图4-10 背景色

色彩的数量

一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调。表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在 3种色彩以内，通过调整色彩的各种属性来产生变化。

4.2.3 常见的几种网页配色方案

下面介绍一些常见的网页配色方案。

红色代表热情、活泼、热闹、温暖、幸福和吉祥。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，还是一种容易造成人视觉疲劳的颜色，如图4-11所示。

黄色代表明朗、愉快、高贵和希望。黄色是各种色彩中最为娇气的一种色，如图4-12所示为使用黄色的页面。

蓝色代表深远、永恒、沉静、理智、诚实、公正和权威。蓝色是一种在淡化后仍然能保持较强个性的颜色，如图4-13所示。如果在蓝色中分别加入少量的红、黄、黑、橙或白等色，均不会对蓝色的性格构成较明显的影响。

图4-11 红色

图4-12 黄色

图4-13 蓝色

白色的色感光明，性格朴实、纯洁和快乐。白色代表纯洁、纯真、朴素、神圣、明快。白色具有圣洁的不容侵犯性。如果在白色中加入其他任何色，都会影响其纯洁性，使其性格变得含蓄。

紫色的明度在所有彩色的色料中是最低的。紫色代表优雅、高贵、魅力、自傲及神秘。在紫色中加入白色，可使变得优雅、娇气，并充满女性的魅力。

绿色代表新鲜、充满希望、和平、柔和、安逸、青春。绿色是具有黄色和蓝色两种成分的颜色。图4-14所示是以绿色为主色调的网站。

图4-14 绿色

灰色在商业设计中，具有柔和、高雅的意象，而且属于中间性格，男女皆能接受，所以灰色也是永远流行的主要颜色。在许多的高科技产品中，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。使用灰色时，利用不同的层次变化组合或搭配其他色彩，才不会给人过于平淡、沉闷、呆板、僵硬的感觉。

4.3 经典习题与解答

4.3.1 填空题

（1）自然界中色彩五颜六色、千变万化，但是最基本的只有3种（红、黄、蓝），其他的色彩都可以由这3种色彩调和而成，这3种色彩称为______。

（2）现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于______系列，其他的色彩都属于______。

4.3.2 简答题

简要说出网页色彩搭配的一些原理。

《网页制作与网站建设从入门到精通》第一部分入门篇相关推荐

《网页制作与网站建设从入门到精通》版权
图书在版编目(CIP)数据网页制作与网站建设从入门到精通/何新起编著.--北京:人民邮电出版社,2013.7 ISBN 978-7-115-32360-6 Ⅰ.①网- Ⅱ.①何- Ⅲ.①网页制作工具 ...
《网页制作与网站建设从入门到精通》目录
目录封面扉页前言第一部分入门篇第1章网页设计基础 1.1 预备知识 1.2 如何设计网页 1.2.1 网页设计的任务 1.2.2 网页设计的实现 1.2.3 网页设计的基本原则 1.3 ...
《网页制作与网站建设从入门到精通》答案
答案第1章网页设计基础 1．填空题 (1)3 (2)设计版面布局 2．简答题 (参考本章1.2.3节) 第2章 HTML 入门 1．填空题 (1)头部(head),主体(body),头部,主体 ( ...
《网页制作与网站建设从入门到精通》封面
搭建可视化网页的software package_网页制作与网站搭建步骤教程
原标题:网页制作与网站搭建步骤教程现代建设网站,只需要一个鸣蝉建站系统的账号,注册一个账号直接用网站模板建站,基本上几十秒就可以做出网站的雏形,随后再添加相关的产品信息和内容,即可建成网站. 鸣蝉智 ...
【艾琪出品】-【网页设计与网站建设】测试题系列三
[声明]本博客内容,若有侵权请告之,会删除非商业用途,如有侵权,请告知我,我会删除如回复不及时,或不懂的请加我微信 island68 QQ823173334 可以的话注明来自CSDN 很希望 ...
中国石油大学（北京）-《网页设计与网站建设》-答案
中国石油大学(北京)远程教育学院 <答案> 期末考试 < 网页设计与网站建设 > 学习中心:_______ 姓名:________ 学号:_______ 关于 ...
如何用php制作博客网页,博客网页制作的网站
博客网页制作的网站 1.制作一个自己的印章. 2.EOOOL是QQ头像.MSN头像.论坛头像.论坛签名.博客广告.通讯工具(邮件. MSN.QQ.书签)等的标签快速生成工具,一个方便.实用的图片制作网 ...
MyBatis-Plus 从入门到精通，这一篇就够了【推荐收藏】
MyBatis-Plus 从入门到精通,这一篇就够了[推荐收藏] mybatis-plus是一款Mybatis增强工具,用于简化开发,提高效率.下文使用缩写mp来简化表示mybatis-plus,本文 ...

《网页制作与网站建设从入门到精通》第一部分入门篇

《网页制作与网站建设从入门到精通》第一部分入门篇相关推荐

最新文章

热门文章

《网页制作与网站建设从入门到精通》第一部分 入门篇

《网页制作与网站建设从入门到精通》第一部分 入门篇相关推荐

最新文章

热门文章

《网页制作与网站建设从入门到精通》第一部分入门篇

《网页制作与网站建设从入门到精通》第一部分入门篇相关推荐