1.2 准备知识：网页的基础知识

1.2.1 网页元素

在当今社会，网站已经成为必不可少的信息来源之一，用户通过浏览网页，获取信息。网页是网站中的任一页面，通常是HTML（超文本标记语言）格式（文件扩展名为html、htm、asp、aspx、php、jsp 等）的文件。网页与网页之间、网页与其他网页元素之间可以通过超链接，实现页面的跳转。网页的构成元素主要包括文字、图像、音频、视频、动画、样式、各类脚本等。

1.文字

文字是网页最基本的组成元素之一，其在网页中的表现形式主要涉及字体、字号和编码。字体指的是文字的风格式样，常见的中文字体有“宋体”“楷体”“仿宋”等，常见的英文字体有“Arial”“Times New Roman”等。相同内容不同语言展现的网页，会根据需要选择对应的字体，即中文选择中文字体，英语选择对应的英文字体。字号是指文字的大小，在网页中，常用来描述文字大小的单位是px（像素）和pt（点）。px是Pixel的缩写，是相对于显示器屏幕分辨率而言的；pt全称为point，大小为1/72英寸，是一个自然界标准的长度单位，也称为“绝对长度”。字号还可以用其他的单位，如em（字高）、%（百分比）等。

2.图像

图像是网页中最常见的元素之一，比文字描述所展现的效果更形象、生动，而且能包含文字所无法描述的信息。目前，在网页中常用的图像格式有jpg、gif和png等。

• jpg格式：jpg或jpeg格式的图像文件是当前最流行的图像格式之一，其特点是拥有良好的图片显示效果及较大的图像压缩比。目前网页上使用的图像格式基本是jpg格式，也是数码相机、扫描仪等设备常用的图像文件格式。

• gif格式：gif格式的图像支持透明背景，可以将多幅图像保存为一个图像文件，制作成小动画，是网络上常用的图像格式，但是只能显示256色，是目前网络流行的“动图”文件格式。

• png格式：png格式也是目前较为流行的网络图像格式，是Adobe公司推出的图像处理工具Fireworks的默认保存格式，支持透明背景，可以制作连续的多帧小动画图片，存储的色彩丰富。

在网页中，目前只有gif和png两种图像格式支持透明背景的图像，但是png格式需要在IE浏览器8.0或以上版本才能支持透明背景的效果。除了以上的图像格式外，还有其他的图像格式，如bmp、psd、tif等图像格式也是目前常见的图像格式，但是这些图像格式压缩率低或在浏览器中不能直接打开，故在网页中基本不使用这几种格式的图像文件。

3.音频

网页中的音频文件主要采用MP3和MIDI两种格式。

• MP3格式：MP3是一种音频压缩技术，其全称是“动态影像专家压缩标准音频层面3”（Moving Picture Experts Group Audio Layer III），简称为MP3。目前网络上的音乐格式大部分采用的是MP3格式，MP3格式的音频文件具有较大的压缩率，可将音频文件压缩成容量较小的文件，压缩后的文件与未压缩前相比音频质量没有明显的下降，所以MP3格式的文件在网络中被大量使用。

• MIDI:MIDI是Musical Instrument Digital Interface的简称，意为音乐设备数字接口。它是一种电子乐器之间以及电子乐器与电脑之间的统一交流协议。由于其对应的文件小，故早期网页上的背景音乐基本采用 MIDI 格式的音频文件，由于网络技术的发展，目前 MIDI 格式的音频文件在网页中较少使用，基本使用MP3格式的音频文件。

4.视频

在网页中播放视频文件需要视频播放插件的支持，目前网页上常用的视频文件的格式为WMV、FLV、MPEG、RM等。

• WMV:WMV（Windows Media Video）是微软推出的一种流媒体格式，可以边下载边播放，因此很适合在网上播放和传输。

• FLV:FLV是Flash VIDEO的简称，FLV流媒体格式是随着Flash的推出、发展而来的。由于它形成的文件较小、加载速度快，适合在网络中在线观看，有效地解决了视频文件导入Flash后导出的SWF文件体积庞大，不能在网络上流畅使用等缺点。目前网络上的视频网站，如优酷、土豆等都采用FLV的文件格式播放视频。

• MPEG:MPEG是一种视频、音频的压缩技术标准，目前使用较多的是MPEG-4标准的视频压缩文件。用MPEG-4的高压缩率和高图像还原技术可以把DVD里面的MPEG-2视频文件转换为体积更小的视频文件。经过这样处理，图像的视频质量损失少但文件大小却缩小几倍，可以很方便地用于保存DVD上面的视频文件。MPEG-4也常用于视频的摄影录像、网络实时影像播放。

5.动画

网页动画主要是指swf文件。swf是Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计、动画制作等领域，swf文件通常也被称为Flash文件。

6.HTML

HTML是用来制作网页的标记语言，HTML是Hypertext Markup Language的英文缩写，即超文本标记语言，浏览器能直接执行，例如段落标签为<p>,HTML对网页元素有对应的标签，可通过对标签的属性的设置，美化网页。

7.CSS

CSS层叠样式表，使用CSS可以对网页中元素的位置进行像素级的精确控制，并且支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，还能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

8.JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。在HTML网页中加入JavaScript，能增加网页客户端的交互效果，常用来给HTML网页添加动态功能。

1.2.2 网页的分类

按表现形式，网页主要分为静态网页和动态网页两种类型。

1.静态网页

静态网页通常指的是文件后缀名为“.html”“.htm”和“.shtml”等形式呈现的网页。这类网页的特点是浏览器端不与服务器端发生交互。在制作与发布静态网页的站点时，不需要安装Web 服务器，不连接数据库，使用浏览器打开网页可以直接预览到网页的效果。本教材所涉及的网页均为静态网页。

2.动态网页

动态网页是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据程序设计语言的不同而不同，如常见的有“.asp”“.aspx”“.jsp”“.php”等形式。动态网页与静态网页是相对应的，动态网页的内容可以根据某种条件的改变而自动改变，如留言本，用户可以通过网页实现注册、登录、留言、修改留言等操作；再如新闻发布网站，网站管理员通过网站后台就可发布新闻、上传产品信息、发布最新动态等操作，还可以对发布的信息进行修改、删除等。用户通过浏览网页，对新闻、产品等实现留言和评论等。制作动态网页时，预览网页效果需要Web服务器，常常与数据库搭配使用。

注意：动态网页不是网页动画，与网页上的各种Flash动画、滚动字幕、JavaScript网页特效的视觉上的动态效果是不同的概念。动态网页是与服务器发生交互，如用户注册时，在客户端将注册的信息通过网络写入远程的数据库中，再返回信息到客户端的过程。

1.2.3 常用的术语

1.WWW

WWW是环球信息网（World Wide Web）的缩写，中文名字为“万维网”“环球网”等，常简称为Web，分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。WWW提供丰富的文本和图形、音频、视频等多媒体信息，将这些内容集合在一起，并提供导航功能，使用户可以方便地在各个页面之间进行浏览。由于WWW内容丰富，浏览方便，已经成为互联网最重要的服务。

2.URL

URL即统一资源定位符（Uniform Resource Locator），是对从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,URL用统一的格式来描述信息资源，包括文件、服务器的地址和目录等。

3.Web服务器

Web 服务器一般是指网站的服务器，主要功能是提供网上信息浏览服务。网页完成后需要在网络上实现发布，其他人才能通过互联网查看到网页，Web服务器就是提供网站发布功能的。常见的Web服务器有IIS（Internet Information Services）、Apache、Tomcat等。

4.域名

域名（Domain Name），俗称“网址”。互联网上的域名必须经过注册才能使用，而且域名是唯一的，例如，输入“www.163.com”打开的网址就是网易。域名是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名指有行政自主权的一个地方区域）。域名的注册是租用模式，需要交纳费用并有使用时间限制，到期不及时续费，域名可以被其他人或机构申请使用。

5.网站发布

网站发布是指完成一个网站的制作后，将网站上传到网络中供用户访问的过程。

6.超链接

超链接是指网页间、网页元素间的连接关系，从一个网页通过单击文字、图片或其他元素打开一个网页对象的关系，这个目标可以是一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

7.本地站点和远程站点

网站的站点可以看作是网站中所有文件的集合，使用浏览器工具，可以从一个文档跳转到另一个文档，实现对整个网站的浏览。站点分为本地站点和远程站点，本地站点通常是指本地计算机的一个文件夹地址，如“C:\web”。远程站点是指通过Internet实现对网站文件的浏览，网站文件存储在 Internet服务器上的位置。存储于 Internet服务器上的网站文档的集合称作远程站点。

1.2.4 常用的网页制作工具软件

常用的网页编辑工具有Dreamweaver、FrontPage、记事本等，与网页相关的其他工具主要是Adode公司开发的工具Flash、Photoshop、各种浏览器工具、FTP上传工具、浏览器测试工具等。

1.Dreamweaver

Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，是Adobe公司开发的集网页制作和管理网站于一身的“所见即所得”网页编辑器。它是第一套针对专业网页设计师开发的视觉化网页制作工具，能产生所见即所得的网页，是大多数网页设计师使用的网页编辑工具。本书主要使用Dreamweaver工具实现网页的制作和网站的开发。

2.Flash

Flash是由Adobe公司推出的交互式矢量图和Web动画的标准。网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果，是商用的二维矢量动画软件，用于设计和编辑Flash文档。在网页中动画多采用由Flash工具生成的swf文件。

3.Photoshop

Photoshop 简称“PS”，是由 Adobe 公司开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像，具有众多的图像编辑与绘图工具，可以有效地进行图像的编辑工作。Photoshop功能强大，是目前最流行的图像编辑工具，除了可以处理图像，还能直接生成网页文件，是网页设计中常常用到的工具软件。

4.记事本

记事本是Windows系统自带的简单的文本编辑工具，但由于大部分的网页源代码都是纯文本，可以使用记事本直接编写或修改网页的源文档。不过对于制作稍大型的网页，需要编辑大量代码时，使用记事本就不合适了，但对于初学者来说，记事本是较好的练习工具，在学习HTML标记语言时，使用记事本来编写，可以提高代码的编写能力。

5.浏览器

上网时用来打开网页的工具软件就是浏览器，浏览器可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种工具软件。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。大部分的浏览器本身支持除了HTML之外，还能够扩展支持众多的插件（plug-ins），如 Flash 插件等。常见的网页浏览器主要有微软公司的Internet Explorer（简称IE浏览器）、Mozilla的Firefox（火狐浏览器）、Google Chrome、360安全浏览器、搜狗高速浏览器、QQ 浏览器、傲游浏览器、百度浏览器等。浏览器是最经常使用到的客户端程序，不同的浏览器工具及其不同的版本对同一页面的效果有可能会有不同的显示效果，这是由于浏览器工具对网页元素的支持度不相同，尤其是对CSS和JavaScript的解析会有所不同。所以在制作网页的同时，必须采用多种浏览器及多个版本来进行测试，也可以采用浏览器测试工具如IETest等工具软件，保证制作出来的网页在不同的环境下均能正常显示。

6.IETester

IETester是一个免费的IE浏览器测试工具，用来测试网页在不同IE版本下兼容性的效果，是网页设计者常用的网页测试工具。

7.FTP上传工具

网站制作完成后，当需要将本地文件上传到远程站点时，往往采用FTP工具实现文件上传，常用的FTP上传工具有CuteFTP、FlashFTP等。

1.2.5 网站的开发流程

在制作网站之前需要进行建站前的准备工作，分别是网站的需求分析、网站资料收集、网站规划等；网站制作完成后，进行网站测试和发布工作；网站交付用户使用后，还需对网站进行定期的维护和更新。

1.需求分析

在制作网站前，要明确制作网站的目标，定义网站的类型，网站对应的用户群信息，撰写网站的需求分析报告，明确网站的定位、风格、内容。目前根据网站的内容将网站划分为企业类网站、门户类网站、专业类网站、个人类网站、主题类网站等，根据不同类型网站的需求来制作对应类型的网页。

2.网站规划

网站规划主要内容为网站风格、页面布局、网站内容。网站的风格是指网站给浏览者的整体形象，主要由网站的色彩、标志、字体等综合构成。例如，制作一个企业网站，其目的是通过网站展现企业文化、经营理念和产品，同时提供用户沟通的渠道，如留言区、邮箱、在线客服等，在色彩上需要选择能体现企业形象的色系，背景、文字、图片三者要有机地融合在一起，也要将主要内容鲜明独特地展现出来。网站的标志也是企业的标志，往往是企业注册的商标或相关标志，是具有版权的信息。网站的内容是网站的核心，在制作网页之前，要确定网站的主要内容，根据内容的重要性分配在网页的不同位置显示。

3.网站制作

在完成站点规划后，就开始具体的制作页面。首页与二级页面之间的布局要定义好，网页的布局要考虑页面宽度、结构等问题。网页的布局传统为采用表格布局，现在主流的布局模式是DIV+CSS 模式。首页是一个网站中最重要的页面，是整个网站的索引，其他页面可以采用模板的方式快速完成，完成后要确定页面之间都进行了超链接。

4.网站测试

完成网站的制作后，必须先进行测试，测试的目的是为了找出网站存在的问题，例如进行多个浏览器的兼容测试，网页间的超链接测试，检验网页元素是否可以正常显示和运行等。网站在发布前必须多次测试，早发现问题早解决，避免上传后重复出错而提高后期的更新维护的难度。

5.网站发布

网站发布是需要空间与域名的，可在网上租用一个空间和域名，采用 FTP 上传工具进行本地站点文件的上传，使用浏览器对域名进行访问，完成网站的发布。

6.更新维护

网站发布后，在运行的过程中，往往还需要更新网站信息，保持网站的内容能随时反映最新的信息，所以后期还需要定期的打开网站检查页面是否正常，以及上传新的信息或修改页面后重新上传等工作。

图1-2-1是网站开发的流程图。

网页制作的基本要求：网页制作并不是简单的内容上的堆积，是有具体的目标、要达到一定的效果，在制作网页的时候，必须遵循网页制作的原则。

• 网站中的文件和文件夹的名称采用的字符为字母、数字和下划线，不采用中文字符或韩文、法文等字符，数字和字母也不采用中文全角下的字符。

• 网站的首页的名称一般为“index.html”或“index.htm”，首页存储在站点的根目录下，合理规划网站中文件储存的位置，做到整齐有条理。

• 网页的宽度不要定义得太大或太小，要根据当前的主流显示器的分辨率来定义。目前采用1 000～1 200像素的宽度比较适合，全屏百分百的显示也是常用的宽度值设置，网页的内容一般显示在网页的中间位置（居中效果）。

• 网页的字体不宜采用特殊字体，由于浏览网页是在用户的电脑中，如果浏览者的操作系统中缺乏这些特殊字体，将采用系统的默认字体，所以网页字体要选择大众化的字体或直接采用默认字体。

• 除了制作音频或视频类的网站，一个网页中不要过多地使用网页特效、动画、视频、音频等效果。

• 图像文件大小要控制在100K以内，除了以图像为主题的网站外，一般不使用单张大小超过500K的图像文件。

• 除首页外，网站中的网页要有返回首页或上一级网页的链接设置。