1.1 网页设计基础

网页虽然存在着各种各样的形式和内容，但构成网页的基本元素大体相同，主要包括标题、网站Logo、导航栏、超链接、广告栏、文本、图片、动画、视频与音频等，如图1-1所示。网页设计就是要将这些元素进行有机整合，使整体达到和谐、美观的效果。

1.1.1 网页设计的发展历史

自首个网站在20世纪90年代初诞生以来，设计师们开始尝试各种网页的视觉效果。早期的网页完全由文本构成，只有一些小图片和布局零散的标题与段落。随着时代的发展，表格布局走入大众的视线，接着出现了Flash，最后才是如今基于CSS的网页设计。

1．第一张网页

1991年8月，Tim Berners-Lee发布了首个网站，只包含了几个链接，且仅基于文本，结构极其简单。这个网站的原始网页的副本至今还在线，共有十几个链接，仿佛是在向人们传递着什么才是万维网，如图1-2所示。

2．基于表格的网页设计

表格布局的使用让网页设计师制作网站时有了更大的选择空间。在 HTML 中，表格标签可以实现数据的有序排列，于是设计师们便充分利用这一优势构造他们设计的网页，让他们手上的“杰作”更加丰富精彩、引人注目。表格布局就这样流行了起来，再加上背景图片切片技术的配合参与，网页的整体结构变得充实而不繁冗，简洁而不单调，如图1-3所示。

3．基于Flash的网页设计

Flash开发于1996年，起初只有非常基本的工具与时间线，现在已经发展成能提供开发整套网站功能的强大工具。早期的HTML要实现复杂的设计，往往需要大量的表格结构和图像占位符。而Flash则能够实现快速地创建复杂、互动性强并且拥有动画元素的网站，并且 Flash 的影片体积小巧，在线应用的可行性更强，如图1-4所示。

4．基于CSS的网页设计

21世纪初，CSS设计开始受到关注。与表格布局以及Flash网页相比，CSS能将网页的内容与样式相分离，从而实现了表格与结构的分离，也就是现在网页设计的 Web 标准，如图1-5所示。它具有以下优点。

●具有更少的代码和组件，更容易维护。

●更便于搜索引擎的搜寻。

●改版方便，不需要变动页面内容。

●带宽要求降低，成本降低。

●文件下载与页面显示速度更快。

●能兼容更多的访问设备（包括手持设备、打印机等）。

●用户能够通过样式选择个性化定制表现界面。

1.1.2 网页的基本概念

在网页设计过程中，经常会碰到一些相关的概念，如网站、网页、主页、静态网页、动态网页和超链接等。这些概念对于制作网页来说是非常重要的，所以用户需要了解和熟悉它们的概念和用途。

1．网站

网站是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的形式连接成一个整体，如图1-6所示。此外，网站还包含网页中的相关素材，如图片、动画等。一个网站通常由许多网页集合而成。

2．网页

简单地说，用户通过浏览器看到的任何一个画面都是网页，网页从本质上讲是一个HTML文件，而浏览器正是用来解读这种文件的工具。网页里面可以有文字、表格、图片、声音、视频和动画等，如图1-7所示。

3．主页

主页也可以称之为首页。它既是一个单独的网页，又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者浏览某个网站的入口，如图1-8所示。

4．静态网页

静态网页是指该用户不论在何时何地浏览网页，该网页所呈现的画面和内容都是不变的。这类网页仅供浏览，不能传达信息给网站以让网站做出响应。如果需要更改网页内容就必须修改源代码，然后再上传到服务器上，如图1-9所示。

5．动态网页

动态网页是指网页能够按照用户的操作做出动态响应，如网页上常见的留言板、论坛等。动态网页能根据不同时间访问的来访者显示不同的内容。动态网站的更新十分方便，一般在后台可以直接更新，如图1-10所示。

6．超链接

超链接是指从一个网页指向一个目标的连接关系，该目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在网页中充当超链接的对象可以是一段文本也可以是一幅图片。各个网页链接在一起就构成一个网站。当浏览者单击已经创建链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。超链接效果如图1-11所示。

1.1.3 网页设计的基本流程

制作网页是一个比较复杂的过程，一个完整的网页制作过程有以下几个阶段。

1．分析阶段

分析阶段是指根据用户或设计者的需要来确定Web站点的目标和类别。在设计之前要确定网站的类别，例如，有的网站设计是为了更好地宣传公司以提高公司的形象，有的是为了树立政府部门的形象，还有的是为了体现私人个性化。不同类型网站的要求、颜色等都不一样，如图1-12所示。在设计网页时，要针对不同的类别明确网站制作的定位方向，设计出适合用户需要的站点。

2．设计阶段

设计阶段是指根据站点的目标整理出站点的内容框架以及逻辑结构图。目标确定后，先把目标细化，并初步收集整理出站点目标所需要包含的内容，形成站点设计的需求纲要，然后画出站点的结构图。图1-13所示为个人网站功能结构简图。

3．实现阶段

实现阶段是指使用网页制作工具完成页面的制作。在网页的制作过程中，设计人员会使用到许多工具，如Dreamweaver、Fireworks、Flash、Photoshop、Imageready等。图1-14所示为使用Dreamweaver CC进行界面布局的效果。

4．测试阶段

测试阶段是指使用浏览器测试网页的效果和正确性。网页制作完毕后，需要在浏览器中进行网页测试，看看制作的网页效果如何以及是否能在浏览器中正确显示，如图1-15所示。

5．维护阶段

维护阶段是指把经过测试后准确无误的网页上传并发布到 Internet 上。为了让网页吸引更多浏览者的眼球，网页需要时常更新，还要对其进行定期的维护和修改。