1.2 认识网页

网页是网络信息发布与表现的一种主要形式。网页的内容与发布信息的目的及要求相关，网页的表现形式与制作工具和创意水平有关。

1.2.1 网页的基本概念

网页是用HTML语言编写的、通过WWW网络传输并被浏览器翻译成可以显示出来的一个页面文件，它集合了文本、图片、声音和数字电影等信息。

网页的本质是什么呢？在浏览器窗口中任意打开一个网页，选择“页面＞查看源文件”命令，如图1-2所示，系统会启动“记事本”程序，显示其中包含的一些文本信息，如图1-3所示。

这些文本就是网页的本质——HTML源代码。网页是用HTML写成的文档，在Internet中通过浏览器查看。

根据页面内容，可以把网页分为首页、主页、专栏网页、内容网页和功能网页等类型，在这些网页中最重要的是网站的主页。在访问一个网站时，首先看到的网页称为该网站的首页。有的网站首页只起到欢迎访问者的作用，是网站的开场页。单击该页面上的链接文字或图片，即可进入网站主页。网站主页与首页的主要区别在于主页设有网站的导航栏，是站点中所有网页的链接中心。目前，多数网站都把首页与主页合并为一个页面，直接显示主页。这种向来访者同时传递欢迎与引导信息的网站页面，既是主页也是首页，专栏网页也称主题网页，用于对网站内容做进一步细化和归类，是主页和内容网页的中转站。内容网页是网站所传达信息的具体体现，位于网站链接结构的终端。功能网页是指一些专门用于访问者的信息反馈和网站用户注册等方面的、为网站用户服务的网页。

1.2.2 网页的类型

通常网页都是以.htm或.html结尾的文件，也有以.cgi、.asp、.php和.jsp等其他后缀结尾的网页文件，不同的后缀代表使用不同技术制作出的不同类型的网页文件。根据制作网页的技术不同，可以将网页分成静态网页和动态网页。

静态网页

Internet最早出现时，站点内容都是以HTML静态页面形式存放在服务器上的，这里所说的静态，并不是指网页中的元素都是静止不动的，而是指网页制作完成后，静态网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都保存在网站服务器上不再发生动态改变。也就是说，静态网页是指保存在服务器上的内容不变的文件，每个网页都是一个独立的文件。

浏览器“阅读”静态网页的执行过程较为简单，如图1-4所示。首先浏览器向网络中的Web服务器发出请求，指向某一个普通网页。Web服务器接收到请求信号后，将该网页传回浏览器，此时传送的只是文本文件。浏览器接到Web服务器送来的信号后开始解读html标签，然后进行转换，将结果显示出来。

由于静态网页的内容相对稳定，因此容易被搜索引擎搜索到。但是，静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时，完全依靠静态网页的制作方式比较困难。静态网页的交互性也较差，在功能方面有较大的限制。

动态网页

动态网页是指浏览器可以和服务器数据库进行实时数据交互的网页。动态网页并不是指加上了动画等效果的动感网页，动态网页中除了普通网页中的元素外，还包括一些应用程序，这些应用程序可以使浏览器与Web服务器之间发生交互行为。

应用程序服务器读取网页上的代码，根据代码中的指令形成发送给客户端的网页，然后将代码从网页中去掉，所得的结果就是一个静态网页。应用程序服务器将该网页传递回Web服务器，然后再由Web服务器将该网页传回浏览器，当该网页到达客户端时，浏览器得到的内容是HTML格式，如图1-5所示。

1.2.3 网页的构成元素

网页由文本、图像、动画和超链接等基本元素构成，本节将对这些基本元素进行简单介绍，为后面各章中运用这些元素制作网页奠定基础。

文本

通常情况下网页中最多的内容是文本，文本不如图像那样能很快吸引浏览者的目光，但却能准确地表达消息的内容和含义。为了使文字变得美观或突出，可以根据需要对其字体、大小、颜色、底纹和边框等属性进行设置，从而给网页中的文本赋予新的生命力。

在编辑网页中的文本时要注意网页正文的字号一般不要太大，一般使用9磅或12像素左右即可。另外，网页中也不要使用过多的字体，为了避免同一网页在不同计算机或不同浏览器中的显示效果有较大差异，中文文字一般可以使用宋体和黑体。

图像

丰富多彩的图像是美化网页必不可少的元素，图像在网页中具有提供信息、展示作品、装饰网页和表示风格的作用。网页中的图像主要是用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，以及用于宣传广告等多种形式。用于网页上的图像一般为JPG、PNG和GIF格式。

图像虽然在网页中起到非常重要的作用，但如果网页中加入的图像过多，不仅会影响网页整体的视觉效果，而且下载速度也会下降。

超链接

超链接是Web网页的主要特色，是万维网方便实用的主要原因。超链接是指从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一个下载的文件、一幅图片、一个E-mail或相同网页上的不同位置等。超链接的载体可以是文本、按钮或图片等。

当浏览者单击超链接时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式进行链接。例如，如果单击的是一个指向AVI文件的超链接，该文件将在媒体播放软件中打开；如果单击的是一个指向网页的超链接，则该网页将显示在Web浏览器上。

导航栏

导航栏是一组超链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超链接组成。导航栏的作用就是要让浏览者在浏览站点时不会“迷路”。在设计站点的每个网页时，可以在每个网页都显示导航栏，这样浏览者可以方便地转向站点的其他网页。网页中的导航菜单示例如图1-6所示。

表格和框架

表格是HTML语言中的一种元素，主要用于网页内容的布局，以及组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。用表格定位的示例如图1-7所示。

框架是网页的一种组织形式，将相互关联的多个网页内容组织在一个浏览器窗口中显示。例如，在一个框架内放置导航栏，另一个框架中的内容可以随着单击导航栏中的链接而改变。

表单

表单用于接受用户在浏览器上的输入，然后将信息打包发送到用户的目标端，如图1-8所示。这个目标可以是文本文件、网页或电子邮件，也可以是服务器端程序。用户填写表单的方式是输入文本、选择单选按钮或复选框，以及从下拉列表框中选择选项等。表单的用途通常有以下几个方面。

（1）收集联系信息。

（2）接受用户要求。

（3）收集订单、出货和收费细则。

（4）获得反馈意见。

（5）让浏览者输入关键字，在站点中搜索相关网页。

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

动画、声音和视频

动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉疲劳。

声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的声音文件和格式，也有不同的方法将这些声音加到网页中，在决定添加的声音格式和方式之前，要考虑声音的用途、格式和文件大小等。不同浏览器对声音文件的处理方式是不同的。

用于网络的声音文件格式非常多，常用的有MIDI、WAV和MP3等，设计者在使用这些格式的文件时要加以区分。很多浏览器不用插件也可以支持MIDI、WAV等文件，而MP3和RM格式的声音文件则需要专门的浏览器才能播放。

通常不建议使用声音文件作为背景音乐，因为这样会影响网页的下载速度。视频文件的格式也非常多，常见的有RealPlayer、MPEG和AVI等，视频文件的采用让网页变得精彩生动，许多插件的出现也使得在网页中插入视频文件的操作变得更加简单。

其他特效

网页中除了以上几种最基本的元素外，还有一些其他元素，如悬停按钮、Java特效和ActiveX等各种特效。它们不仅能点缀网页，使网页变得生动活泼，而且在网页游戏、电子商务等方面有着不可忽视的作用。

1.2.4 网页的制作工具

目前有许多设计Web页面的工具软件，总体上可以分为两大类。一类为用HTML语言直接编制Web的编辑软件，另一类为使用Dreamweaver等页面设计软件。直接编写HTML语言要求掌握大量的HTML标记，制作效率低，但制作的页面简洁，可用各种文本编辑工具直接制作，适合于对HTML语法比较熟悉的用户。使用Dreamweaver这类软件制作网页不要求掌握大量复杂的HTML标记，用多种可视化专用工具进行制作，制作效率高，但是用这种方法形成的页面最终都要被翻译为HTML源文。

Dreamweaver是一个专业的网页设计软件，它包括可视化编辑和HTML代码编辑的软件包，支持ActiveX、JavaScript、Java、Flash和ShockWave等特性，并支持动态网页的设计，而且Dreamweaver与Flash和Fireworks实现了无缝链接，可以方便地调用Fireworks进行网页图像的处理，也可以方便地把Flash设计的动画插入到网页中，从而形成了一个完美的网页设计开发环境。