1.1　网页基本概念

网页是在浏览因特网时看到的一个个画面，网站则是一组相关网页的合集。一个小型网站可能只包含几个网页，而一个大型网站可能包含成千上万个网页。此外，打开某个网站时显示的第一个网页称为该网站的主页。要想制作出精美的网页，不仅要熟练使用网页设计软件，还要掌握与网页相关的一些基本概念和知识。

1.1.1　网站的概念

网站主要由域名（即网站地址）和网站空间两部分构成，通常包括主页和其他超链接文件，如图1-1所示。

网站是根据一定的制作要求，使用HTML等网页代码编写工具进行制作的，用来展示特定的内容。一般来说，网站也可称为一种通信工具，用户可以使用网站宣传相关信息、发布相关新闻，或者通过网站提供相关的服务。人们还可以通过网页浏览器访问网站，获取需要的信息或者享受网络服务。

1.1.2　网页的概念

网页格式一般为HTML文件格式，文件的扩展名很多，如.html、.htm、.asp、.aspx、.php以及.jsp等，网页是网站中的一个页面，通常包括各种各样的文本、图像和超链接。网页要使用特定的网页浏览器进行阅读。图1-2所示为网页页面。

网页是一个文件，可以存放在任何一台连接到互联网的计算机中。网页一般由网址（URL）来识别与存取，当用户在浏览器中输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户的计算机，然后通过浏览器解释网页的内容，再展示到用户的眼前。

网页设计师在进行网页设计时，还需要了解一些专业的名词，如域名、URL、站点、导航条、表单、超链接以及发布等。按网页的表现形式，可分为静态网页和动态网页。

1.静态网页

在网站页面的制作中，静态网页都是使用纯粹的HTML格式制作出来的，不含任何互动元素，在早期的网站页面中，大部分设计师制作的都是静态网页。

与动态网页相比较，静态网页是指不含程序、没有后台数据库做支撑的网页页面，是不可以进行交互式操作的网页，设计师在后台设计时的样子就是静态网页展现出来的样子。静态网页更新起来比较麻烦，一般适用于更新较少的展示型网站，如图1-3所示。

说明

静态网页的网址一般以htm结尾，以.htm、.html以及.shtml等为扩展名。在互联网中的静态网页中，也可以出现各种形式的动态画面，如Flash以及滚动字幕等，这些动态效果只是视觉上的，与动态网页是不同的概念，用户需要区别开来。

静态网页的主要特点简要归纳如下：

（1）静态网页的每个网页都有一个固定的URL，且网页URL以.htm、.html和.shtml等为扩展名。

（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的。也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。

（3）静态网页的内容相对稳定，因此容易被搜索引擎检索。

（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时，完全依靠静态网页制作方式比较困难。

（5）静态网页的交互性较差，在功能方面有较大的限制。

2.动态网页

在网页制作中，动态网页URL以.asp、.xasp、.php、.perl、.cgi等为扩展名，这也是区别动态网页和静态网页的标志。

动态网页的具体内容有多种表现形式，它可以以纯文字内容展现出来，也可以包含多种Flash动画或视频特效。不管网页是否具有动态效果，只要是采用动态网站技术制作出来的网页都可以称为动态网页。动态网页与网页内容上的各种动画、滚动字幕等视觉上的动态效果没有直接关系。从用户浏览网站的角度来说，动态网页和静态网页都可以展示基本的网页内容和信息，只是从网站开发、管理以及维护的角度来看，两者有很大的差别。

例如，爱奇艺的网页就是一个典型的动态网页，每天都会进行大量的视频数据更新，如图1-4所示。

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

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

（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理以及订单管理等。

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

说明

制作一个网站，决定它为静态网页还是动态网页时，主要取决于网站的主要功能和网站需求以及网站内容的多少。如果用户需要制作的网站功能比较复杂，内容更新量很大，则采用动态网页技术会更加合适，反之一般采用静态网页的方式来实现。

1.1.3　HTML的组成及语法

HTML（HyperText Markup Language）是用于描述网页文件的一种标记语言。HTML是一种规范和标准，它通过标记符号来标记要显示的网页中的各个部分。

用户可以将网页理解为是一种文本文件，通过在文件中添加各类代码、标记符号，使浏览器按照网页代码的编写要求，正确地显示网站中的相关内容。

浏览器将按顺序读取、执行网页中的编码文件，然后根据这些编码文件显示网页中的内容，对于错误的代码文件，浏览器不会报告出来，只会在显示网页内容时体现出来，编制者只能通过网页显示的效果来分析代码编写的错误部分。

1.HTML的组成

网页的存储格式均为HTML文件，一个网页对应一个HTML文件，常以.htm或.html为扩展名，只要能够生成.TXT源文件的文本都可以用来编辑HTML文档的内容。

标准的HTML文档一般包括开头与结尾标志以及HTML的头部与实体两大部分。图1-5所示为一般HTML的基本组成情况。

这个文档的第一个Tag（标签）是＜html＞，这个Tag告诉浏览器这是HTML文档的头。文档的最后一个Tag是＜/html＞，表示HTML文档到此结束。

（1）在＜head＞和＜/head＞之间的内容，是Head信息。Head信息是不显示出来的，在浏览器里看不到。但是这并不表示这些信息没有用处。比如可以在Head信息中加上一些关键词，有助于搜索引擎能够搜索到这个网页。

（2）在＜title＞和＜/title＞之间的内容，是这个文档的标题。可以在浏览器最顶端的标题栏看到这个标题。

（3）在＜body＞和＜/body＞之间的信息，是文档的正文部分。在＜b＞和＜/b＞之间的文字，用粗体表示。＜b＞就是bold的意思。

HTML文档看上去和一般文本类似，但是它比一般文本多了Tag，如＜html＞、＜b＞等，通过这些Tag，可以告诉浏览器如何显示这个文件。

说明

HTML为什么受到互联网用户的青睐，而得到广泛的应用呢？最重要的原因是它能使浏览器方便地获取网站信息，在HTML中，包含了一种超链接点，它是一种URL指标，可以通过启动它来获取网页。

通过以上介绍，了解了网页的实质就是HTML文件，通过在HTML文件中使用脚本语言以及相关的网页组件，可以制作出非常完美的网页效果，实现网页需要表达的全部功能。

2.HTML的语法

HTML的语法结构很简单，主要由HTML卷标与HTML属性两部分组成。下面通过例子来说明HTML的语法：HTML文件或页面（国家）|HTML元素（家庭）|HTML卷标（重要成员，男人或女人）|HTML属性（其他成员，如孩子）。

说明

对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

1.1.4　网页设计的基本原则

作为一名优秀的网页设计师，必须掌握好网页设计的基本原则，在设计网页之前必须对网页的内容有一个合理的定位，内容设计需要精确，以吸引用户访问网页。

1.重视首页的内容设计

首页是用户认识这个网站的初始印象，因此首页的设计非常重要。如果是新设计的网站，最好在第一页就对这个网站的性质与所提供的内容做扼要说明与导引，能够让访问者判断出是否继续浏览网页中的相关内容和信息。最好在首页中对网页的整体内容有一个合理的分类，能让访问者第一时间找到需要的网页内容。

网页设计师在设计主页时，最好不要在主页上放置尺寸太大的图片文件，或加载不当的应用程序，因为它会增加访问者下载网页的时间，导致用户对网页失去耐心和兴趣。在设计主页画面时尽量分类设计，这样可以节约访问者访问网页的时间。例如，游戏网页的首页都能很好地体现其主题，并快速引导用户进入，如图1-6所示。

2.按内容主题分类设计

在网页设计中，网页内容的分类非常重要，杂乱无序的网页会让访问者很快失去兴趣。网页设计师可以按照网站的主题分类、按照内容的性质分类、按照客户的需求分类、按照提供的服务分类等。无论采用哪种网页内容的分类方式，它的目的只有一个，就是让访问者第一时间找到自己需要的网页信息。在设计分类时，尽量只采取一种类型的分类方式，不要多种方式混用。图1-7所示为苏宁易购的主页，主要按商品的类型进行分类设计。

3.将用户体验放在首位

如果一个网站没有用户光顾，再好的网页都是没有意义的，因此用户体验最重要，设计者一定要重视。在设计网页时，对于一些较大的Flash、图片要尽可能少放或从技术上使其分割，这样可以加快网页的打开速度。

另外，设计者还必须考虑用户的计算机配置问题，使用不同的计算机分辨率，使用不同的浏览器，浏览的网页效果也会有所不同。因此，网页设计师应尽量使用所有浏览器都可以阅读的格式，不要使用只有部分浏览器才支持的HTML格式或程序技巧。

4.加强网站与用户互动性

在网页中进行互动是网页的特色之一，一个成功的网站必须与用户建立良好的互动性，包括整个网页的设计、使用和展现，都要与用户的需求息息相关，设计者们应该掌握互动的原则，让用户感觉每一步都确实得到适当的响应。

一个访问量很高的网站，需要一位好的网页设计师、平常经验的累积以及计算机软硬件技术的运用等。在互动性很高的网站中，一般都提供了与用户互动的内容区，网页中最好加上供用户表达意见的评论栏，如图1-8所示，在HTML中一定要注意它的格式命令写法。另外，要注意在UNIX系统下区分大小写。

5.注意网页文档的格式

有一部分网页设计师在编写网页代码时，会省略或简写一些命令格式，这是不正确的。为了日后对网页进行维护时更加方便，设计师在撰写HTML时最好将架构设计完整，初学者设计时也可以通过完整的网页架构对HTML语法有一个全面的了解和掌握。如果网站需要向用户提供搜索功能，方便用户搜索网站中的相关内容，此时切记在＜Title＞指令中加上可供搜索的关键词串，如图1-9所示。

6.制作美观的背景图案

在设计网页时，一些网页设计师还喜欢在网页中加上花哨的背景图案，以为这样可以丰富网页内容，提高网页的美观度，但这样也会耗费网页的传输时间，而且容易影响用户的阅读视觉，反而给用户留下不好的视觉体验。因此，建议设计者们尽量使用干净、清爽的文本展示网页内容，如图1-10所示。如果一定要在网页中使用背景图案，应尽量使用单一的色系，如图1-11所示。

7.网页内容应紧跟需求

建设网站一定要进行内容的规划，规划时必须确定自己网站的性质、提供内容以及目标观众，然后根据本身的软硬件条件来设置范围。网页中的内容可以是任何信息，包括文字、图片、影像以及声音等，但一定要与这个网站所要提供给用户的信息有关系。

互联网的特色是能够及时查阅信息，了解网上的新鲜事，丰富生活，这是吸引用户上网的条件。如果设计者本身具有强大的条件，则可以将网站制作成为一个全方位的信息提供者；如果条件不足，建议做到单品浏览量第一。