1.1 网页制作概述

网页制作基本流程一般可以分为3步：准备（构思网页主题，搜集素材，规划内容）；制作（利用各种网页制作工具，制作网页）；维护（网页制作完成后，根据需要进行更新与维护）。对于制作网页，可以编写HTML源代码，也可以使用专门的网页制作工具软件来实现。这一节将介绍网页的基本元素，以及与其相关的一些技术。

1.1.1 网页的元素

制作网页之前，首先要了解构成网页的基本元素，以便根据需要合理地组织和安排网页的内容。网页的基本元素包括文本、图像、表格、表单、超级链接等，下面对这些基本元素一一介绍。

文本：文本是网页最基本的元素，也是网页中主要的信息载体与交流工具，能够准确地传达网页要表达的信息。为了改善文字表现形式单一的缺点，在网页制作时，可通过字体、字型、字号、颜色、底纹和边框等属性来美化网页。

图像：图像是网页的又一最基本的元素，同样可以传达网页信息。由于图像自身具有可观赏的特点，所以经常在网页中美化元素，起到装饰的效果。同时，图像还可以体现网页的风格。常用的图像文件格式有JEPG、GIF和PNG三种。其中，JPEG格式可支持全彩和灰度的图形，而GIF文件只能储存256色的图片。图像虽然可以美化网页，但如果在同一个网页中加入的图片过多，反而会影响网页整体的视觉效果，网页的下载速度也将明显降低，所以在设计网页时要注意适当的使用图像。

表格：表格作为一种基本的数据组织形式，可以简洁、直观地表示出数据的组织关系。但是在网页设计中，表格更多的被用来控制网页中信息的布局方式。表格可以把不同的网页元素包括文本、图像、链接、表单及其他表格等，作为表格的单元格内容。使用行和列的形式来布局网页的各种内容，同时还可以使用表格来精确控制各种元素在页面中的位置。

表单：在网页中，表单作为一个交互工具，接收用户输入的数据然后提交给Web服务器，以实现用户端与服务器端的交互。表单的主要设计模式是数据的处理，其可以搜集用户所需要的信息并将信息传送到服务器上。表单由两部分组成：一是描述表单元素的HTML源代码；一是客户端脚本或者服务器端用于处理表单信息的程序。实际上，表单只是一个容器，由具有不同功能的表单域组成。最简单的表单可以只包含一个输入区域和一个提交按钮。浏览者填写表单的方式通常是输入文本、选中单选按钮与复选框及从下拉列表中选择选项等。常见的表单有用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。例如，申请电子邮箱时需要填写的用户资料表就是一个表单，当单击“注册”按钮后，首先表单收集用户填写的信息，然后将收集到的信息传到表单处理程序，表单处理程序会返回一条用户“注册”成功或失败的信息。

超级链接：超级链接是网页互联的基础，可以将万维网中无数的网页连接在一起。可以说超级链接是“因特网”的“互联”的意义所在。超级链接是从一个网页指向一个特定的目标位置的链接，这个目标位置通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者本网页中的其他位置。超级链接的载体通常是文本、图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击设置为超级链接的对象时，链接目标将根据类型的不同，以特定方式显示在Web浏览器上。例如，当单击指向某网页的图片链接时，链接到的网页将在Web浏览器上以规定的方式打开。

多媒体元素：在现代的多媒体网页中，声音和视频也是重要的组成部分。网页中常见的声音文件的格式有MIDI、WAV、MP3、RM和AIF等，不同的浏览器对各种格式的声音文件的处理方法是不同的。很多浏览器可以直接支持MIDI、WAV和AIF格式的声音文件，而MP3和RM格式的声音文件则需要专门的插件来播放。

网页中常见的视频文件的格式有RealPlayer、MPEG、AVI和DivX等。声音和视频文件的添加让网页更加精彩，特别是网络上许多插件的应用，使得向网页中插入声音和视频文件的操作变得十分简单，所以声音和视频文件在网页中得到了越来越多的应用，如图1-1 所示即是一个多媒体网页中使用视频播放插件播放视频文件。

网页中除了以上几种最基本的元素之外，还有一些其他的网页内容，例如，导航栏和各种网页特效等，这些内容极大地丰富了网页效果，同时增加网页的动感。现在网页内容丰富，在设计时，只有合理地安排各种内容，才能准确地表达网页要传达的信息，同时使网页更具吸引力。

1.1.2 网页的技术

一个成功的网页通常需要结合使用多种技术，例如，使用HTML编辑网页的基本内容、使用CSS来布局和设计网页样式、使用Flash来设计网页动画、使用JavaScript来编写脚本、响应网页的各种动作，等等。下面将介绍网页制作过程中常用的几种相关技术。

HTML：HTML是Hyppertext Markup Language的缩写，即通常所说的超文本标记语言。HTML是编写网页的主要语言，是一种文本类、解释执行的标记语言。HTML对Web页面中显示内容的属性以标签的形式进行描述，客户机上的浏览器对这些描述进行解释，并将相应的结果正确显示在显示器上。通常一个Web页面就是一个HTML文档。编写HTML不需要特殊的工具，任何可以进行文本编辑的工具都可以用来编写HTML文档。

CSS：CSS是Cascading Style Sheets的缩写，又称层叠样式表。CSS是由W3C的CSS工作组制定和维护的，也是一种标记语言。CSS可以更加精确地控制网页内容的表现形式，例如，控制传统的文本属性，如字体、字号、颜色等，还可以控制网页的背景、网页对象的位置、图片的显示效果、鼠标指针的形状等其他网页效果。CSS最大的功能是使网页内容与形式相分离。使用CSS可以统一控制网页的样式，对层叠样式表CSS的内容做一些简单地修改，即可同时改变网页多处的样式或多个网页的表现形式。CSS可以嵌套在HTML标签中使用，也可以定义为外部CSS文件在网页中引入。

JavaScript：JavaScript是Netscape公司开发的脚本语言，其前身是Livescript。在Java语言发展起来以后，Netscape公司引进Java的程序概念，将Livescript重新设计为JavaScript。JavaScript和Java是两个作用大不相同的产品，不能混淆。JavaScript是一种Script脚本语言，所谓的脚本是一种能够完成某些特殊功能的“小程序”。这种程序和一般程序不同，一般程序必须先经过编译，然后再执行，而脚本是一种解释式语言，不必事先编译，在程序运行过程中被逐行地解释并执行。JavaScript作为HTML文件的一部分由浏览器解释执行，可以直接打开HTML文件来编辑JavaScript语句，维护方便，并且可以立即看到改变后的效果。

JavaScript和VBScript：两者都是常用的Script脚本语言，其中VBScript是ASP（Active Server Pages）默认使用的语言。

ASP：ASP是Active Server Page的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用，可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。ASP实际上是编译成ISAPI（Internet Server Application Programming Interface），然后再生成文本发送到客户端。ASP与标准HTML文件一样包含HTML对象并且在同一个浏览器上解释并显示。任何可以放在HTML中的内容都可以放在ASP中。ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的Web应用程序。

PHP、JSP和ASP.NET：这是另外3种常见的网络编程技术。PHP是一种服务器端HTML嵌入式脚本描述语言，其最强大和最重要的特征是其数据库集成层，使用其完成一个含有数据库功能的网页非常简单。JSP是用Java语言作为脚本语言的一种技术，通过其为整个服务器端的Java库单元提供了一个接口来服务于HTTP的应用程序。ASP.NET采用面向对象的方法来创建动态Web应用程序。

Flash：Flash是Macromedia公司出品的一个矢量动画制作软件，由于该软件基于矢量图形系统，因此用其制作的Flash动画可以根据需要缩放大小而不会影响画面质量。同时，Flash动画的数据存储量小，所占空间少，适合在网络上使用。但是，Flash动画文件维护更新不方便，不适宜用于一些信息量大、更新频繁的网站。

DHTML：DHTML是Dynamic HTML的缩写，即通常所说的动态HTML。其实DHTML并不是一门新的语言，而是HTML、CSS和客户端脚本的一种集成，是一种通过各种技术的综合发展而得以实现的概念。这些技术包括JavaScript、VBScript、Document Object Model (文档对象模型)、Layers和Cascading Style Sheets（CSS样式表）等。DHTML的目的在于加强网页的交互性，对用户的操作在本地就可做实时处理，从而得到更快的用户响应，即当网页从Web服务器下载后无需再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。

要区分动态HTML与动态网页这两个不同的概念，动态HTML能使网页上的元素动态地改变（如文字的变色，图片位置的移动）；而动态网页，则是在服务器端动态地生成网页。