1.1 网页制作的基础知识

随着计算机技术的日益普及，浏览网页、搜索信息成为我们工作、学习和生活中不可缺少的一部分。对于现今的网页，简单的文字与图像组合已不再能满足人们的需要，而是那些添加了各种设计元素，变得更加丰富多彩的网页受到人们的青睐。

1.1.1 网站与网页

网站是由网页构成的一个具有相关联系的页面集合。一个网站少则由几个网页，多则由成百上千个网页组成。

当访问者在地址栏中输入网址后，按【Enter】键就可以直接进入网站的首页了。首页是一个网站的门面，也是访问量最大的一个页面。因此，网站首页的设计和制作就非常重要了，一定要把握好网站首页的设计，使访问者一看到首页就能清楚地了解该网站想传递的信息。

如图1.1所示是一个电影网站的首页。

网站（Web Site）是多个网页的集合，网页（Web Page）是网站的重要组成部分，所有的信息都通过网页这个载体传递给浏览者。如图1.2所示的是一个典型的网页。

1.1.2 网页类型

从网页是否执行程序来分，网页可分为静态网页和动态网页两种类型。

1. 静态网页

所谓静态网页，就是网页里面没有程序代码。运行于客户端的程序、网页、插件和组件等都属于静态网页，在网络中看到的静态网页通常是以htm或html为后缀名的，俗称HTML文件。在浏览扩展名为htm的网页时，网站服务器不会执行任何程序就直接把文件传递给客户端的浏览器直接进行编译工作，除非网站管理人员更新过网页的内容，否则网页是不会因为执行程序而出现不同的内容的。如图1.3所示的就是以html为后缀名的静态网页。

2. 动态网页

所谓动态网页，就是网页内含有后台程序代码。运行于服务器端的程序、网页和组件等都属于动态网页，它们会随客户、时间及需求的不同，返回不同的网页。通常以扩展名asp或aspx存储，表示该网页是Active Server Pages（ASP）动态网页。在浏览这种网页时，必须由服务器端先执行程序，再将执行完的结果下载给客户端的浏览器。除有以asp作为后缀名的网页外，还有以php或jsp作为后缀名的网页。如图1.4所示的是以asp为后缀名的动态网页。

如何决定是使用静态网页还是动态网页呢？这要根据网站的内容来决定，如果网站做好之后不需要做什么修改，就可以采用静态网页。静态网页的制作价格及网页打开的速度更优。如果网站经常需要修改，那就做数据库的动态网页，方便管理，随时可以进行后台修改。

1.1.3 网页的组成元素

构成网页的基本元素包括文本、图像、动画、表格、表单、音频及视频等。下面分别介绍网页的各构成元素。

1. 文本

因为网页中的信息以文本为主，所以文本是网页中运用最广泛的元素之一。从某种意义上来说，文本是网页存在的基础。在网页中，网页的设计与制作者可以通过设置字体、字号、颜色和底纹等属性来改变文本的视觉效果。如图1.5所示的是以文本为主体的网页。

2. 图像

在网页制作过程中适当地使用图像，可以丰富网页中的内容。虽然网页中的图像格式有很多种，但较适合国内传输网络的图像格式就只有JPEG和GIF这两种。由于受网络速度的限制，因此网页中的很多图像都被分割成多个部分，然后再利用排版技术，将分割的图像拼合在一起，以提高图像在浏览器中的显示速度。如图1.6所示的是以图像为主的网页。

在网页中的图像文件格式有很多种，如GIF，JPEG，BMP，TIFF和PNG等，其中应用最为广泛的主要是GIF和JPEG这两种格式。

GIF：为Graphics Interchange Format的首字母缩写，被称为图像交换格式，采用LZW无损压缩算法。

JPEG：为Joint Photographic Experts Group的首字母缩写，是由联合图像专家组开发的图形标准，采用有损的压缩算法。

GIF图像文件不仅支持透明的背景色和动画格式，还支持256种颜色。由于GIF特定的存储方式，故而它可以支持有大面积单色区域的图像。通常网站中的LOGO、按钮图片和文字图片都使用这种格式，例如，某笔记本电脑网站的LOGO使用的就是GIF图像，如图1.7所示。

JPEG图像文件不支持透明的背景色和动画格式，它只支持24位真彩色。JPEG用于表现色彩丰富、形状复杂的图像。如图1.8所示的网站使用的就是JPEG格式图像。

3. 动画

网页动画主要分为Flash动画和GIF动画。目前在网页制作过程中，Flash动画运用得最广泛，而GIF动画则主要用于站标、广告条等组件的动画制作。如图1.9所示是一个主要使用Flash制作的网页。

在网页中，使用的动画格式主要包括Flash和GIF这两种。

由于使用Flash制作出的动画质量较好，因此许多网页中的大型、复杂的动画几乎都用Flash来制作。不过，Flash动画在浏览器中播放时需要安装插件Macromedia Flash Player等，否则就不能播放。右击屏幕上的Flash动画，就会显示有关插件的信息。

图1.10就是右击某网页中的Flash动画后显示的相关信息。

GIF动画在浏览器中播放时不需要插件。GIF动画通常用于制作简单的、只有几帧图片的交替动画。例如，网页中作为友情链接使用的LOGO通常都使用GIF动画，如图1.11所示。

4. 超链接

超链接是网页中最常用的一种元素。所谓超链接是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图片、一个电子邮件地址、一个文件，甚至是一个应用程序。它表明了网页文件之间的相互链接关系，使用超链接管理器可以清楚地看到各文件之间的链接关系，并且可以用来检查站点中网页链接是否正确。

超链接在本质上属于一个网页的一部分，它是一种允许同其他网页或站点之间进行链接的元素。一个网站由若干个单独的网页文件组成，这些单独的网页由超链接结合起来，形成一个紧密联系的整体。

按照使用对象的不同，网页中的超链接可以分为文本超链接和图像超链接，这是两种最常用的超链接。除此之外，还有电子邮件超链接、锚点链接、多媒体文件超链接和空超链接等。

在网页中，一般文本超链接下都有一条下画线，当鼠标指针移动到该超链接上时，鼠标指针就会变成一只小手的形状，如图1.12所示。

超链接也可以定义在图像上，甚至在图像的局部位置上，如图1.13所示为图像超链接。

5. 表格

对网页进行排版主要是用表格来完成的，通过表格可以精确地控制各网页元素在网页中的位置。这里所说的表格并不是直观意义上的表格，它所指的范围更广泛。一般表格的边框不在网页中显示，如图1.14所示。

6. 表单

表单是网页中实现交互的元素。网页中的表单通常用来接收浏览者在浏览器端的输入，然后将这些信息发送到设计者设置的目标端。这个目标既可以是文本文件、网页、电子邮件，也可以是服务器端的应用程序。

表单主要应用于以下几个方面：

收集联系信息。

接收用户要求。

收集订单、出货明细表和收费清单。

获得反馈意见。

设置来宾签名簿。

让浏览者输入关键字，以便在站点中搜索相关的网页。

让浏览者注册为会员，并以会员身份登录站点。

表单由具有不同功能的表单对象组成。最简单的表单也要包含一个输入区域和一个提交按钮。浏览者填写表单的方式通常是输入文本、选中单选按钮与复选框，以及从下拉列表中选择选项等。

根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。如图1.15所示为一个最常见的用户注册表单。

7. 音频

在网页中插入背景声音，可以提高网页内容对访问者的吸引力。网站设计者在添加网页背景音乐的同时，也应该为访问者提供一种关闭它的方法。如果总是不断地重复播放背景音乐，则会使访问者感到厌烦，从而选择离开这个网站。

下面就是一个插入音频的网页，如图1.16所示。有些网站提供了关闭背景音乐的按钮，这样不喜欢听背景音乐的访问者就可以直接单击该关闭按钮。

从目前来看，网络上使用范围最广的音频格式主要有MP3、MIDI和WAV等。如表1.1所示，列出了这些音频格式的特点。

网络中的音频是非常常见的，尤其是在音乐网站中。

8. 视频

视频和音频都是由与文件类型相适应的插件来进行播放的。视频的直观性可以给访问者带来很大的视觉冲击。如图1.17所示的是一个插入了视频文件的网站。

随着网络带宽的增加，网页制作中应用的视频和音频文件也越来越多。如表1.2所示列出了网页中常见的视频文件格式及其特点。

1.1.4 了解网络基本术语

在制作网页中，经常会遇到一些网络术语，如表1.3所示，列出了常见的网络术语及其含义。