1、第1章 网页设计的一般步骤 l在学习制作网页的各种软件之前，首先要了解网页设计 的一般步骤。这将有助于总体上把握网页设计的流程。 网页设计的一般步骤包括：需求分析、制作页面效果图 、切图、制作静态Web页面、添加程序、发布Web站点、 推广和维护等几个方面。下面将逐一对各个步骤进行讲 解。 1.1 需求分析 l1Internet lInternet的中文名称是“互联网”或者“国际互联网” 。它来源于美国国防部高级研究计划局DARPA（Defense Advanced Research Projects Agency）的前身ARPA建 立的ARPAnet，是由各种不同类型和规模的计算机网络 （包
2、括局域网、地域网，以及大规模的广域网等）构成 的全球范围的计算机网络。在Internet中的各个计算机 之间，可以方便地交换信息。 1.1 需求分析 l2域名 l域名是用来标识Internet上相应资源的一个名称。在 Internet中有成千上万的计算机，为了标识每台计算机 ，为每台计算机分配了一个地址，这个地址就叫做计算 机的IP地址。IP地址是由二进制数来表示的，长32位。 由于IP地址难于记忆和书写，所以在Internet中使用一 种字符型的地址来标识各种资源，这个字符型的地址就 叫做域名。 1.1 需求分析 l3空间 l空间是指用来存放制作好的网站的磁盘空间。在发布网 站时，可以使用提
3、供相应服务的公司的空间，也可以使 用自己计算机上的空间。其区别在于稳定性和速度存在 着差异。 l一般在提供网站建设服务的公司中，需求分析的部分会 有相应的人员负责，网页设计人员只需要分析需求人员 提供的文档，并和需求人员具体沟通，即可完成这个部 分工作。 1.2 制作页面效果图 l1制作效果图的软件 l用来制作效果图的软件并没有明确的规定，可以使用各 种图形制作和处理的软件。现在通常使用的软件是 Photoshop（关于使用Photoshop的内容，将在后面的章 节中详细讲解）和Fireworks。在制作效果图时，使用 的软件对最终效果并没有影响，所以一般只需要精通一 种软件即可。 1.2 制
4、作页面效果图 l制作好的效果图可以保存成各种格式，其中主要包括GIF格式、JPEG格式 、PNG格式等。各个图片格式之间的区别，将在后面的章节中详细讲解。 l下面是一个制作完成的效果图的示例，其显示效果如图所示（关于该效果 图的详细制作过程，将在后面的章节中详细讲解）。 完成后的效果图 1.3 制作Flash动画 l在网页中使用的多媒体内容主要为Flash动画。因为 Flash动画内容可以在页面中直接使用（在浏览器中也 可以屏蔽Flash动画内容的显示），而其他的多媒体内 容都需要在客户端安装相应的播放器来支持。 1.4 切图 l在制作静态页面之前，要对效果图进行切片。切片的目的是制作页面中使
5、 用的修饰图片。 l对效果图进行切片，可以在Photoshop（或者与之相关联的软件 ImageReady）中进行，也可以在Fireworks中进行。下面是一个在 Photoshop中切图的示例，其显示效果如图所示。 1.5 制作静态Web页面 l静态Web页面是指使用HTML等语言制作的，不能和服务 器进行交互的页面。制作静态Web页面，是为了使网页 制作的分工更加明确。 l制作静态页面时，通常使用的软件是Dreamweaver。制 作的静态页面一般是HTML页面，文件的后缀名为.html 。制作完成后的HTML页面，可以直接在IE等浏览器中查 看其显示效果。 1.6 添加程序 l添加程序的
6、目的是使页面能够和服务器中的资源进行交 互，一般要涉及对数据库的操作。添加程序后的页面处 理和显示信息的效率会更高，更加容易维护。 l根据使用的程序语言不同，网页中使用的程序可以分为 ASP程序、ASP.NET程序、JSP程序、PHP程序等。使用不 同的程序，对完成网页的功能并不影响。 1.7 发布Web站点 l客户对网页的所有功能和页面都确认后，就可以正式发 布制作好的站点了。发布站点的过程就是将本地的站点 文件上传到购买或者设定的空间上去。通常使用 FlashFXP等上传下载软件来完成。 1.8 推广和维护 l网站的推广和维护也是网站建设中相当重要的部分。针 对站点的性质和不同的需求，推广
7、和维护的方法也不尽 相同。其中推广的方法包括百度、Google等搜索引擎上 的推广、相关论坛推广、邮件推广等。维护的情形要视 站点的复杂程度和规模，指定专人或请制作站点的公司 一并维护。 1.9 专家总结 l在具体学习网页制作技巧之前，总体地了解站点的制作 步骤，有助于了解使用软件制作网页在整个站点制作中 的位置，同时避免了一些混淆的概念，便于区分网页设 计和制作、网站程序开发、网站使用之间的区别。通过 本章的学习，可以知道网页制作只是整个站点中的一个 很小的部分，一个站点的最终形成和使用，还需要做大 量其他的工作。 第2章 网页设计的基础知识 l在学习网页设计的具体内容之前，首先要了解一下关
8、于 网页制作的基础知识。这些知识包括浏览器、网页中使 用的元素、页面语言，以及各种软件在网页设计中所起 的作用等。通过学习这些基础知识，可以对网页设计有 一个整体上的了解。 2.1 浏览器 l1IE浏览器 lIE浏览器的全称是Internet Explorer，它是微软公司 发布的免费浏览器。由于直接绑定在Windows操作系统 之中，所以无须下载安装。根据发布时间的先后，有IE 4.0，5.0，5.5，6.0等很多版本。目前最新的是IE 7.0 版本。如果更改浏览器的设置，则文本的显示效果会相 应地改变。单击“查看”菜单，在打开的下拉菜单中选 择“文字大小”选项， 2.1 浏览器 l2Fir
9、efox浏览器 lFirefox浏览器又称为火狐浏览器，是Mozilla基金会与 众多志愿者所开发的，现在也有很多的使用者。目前使 用较多的版本是Firefox 2.0，其显示效果如图2-2所示 。 2.2 文本 l1文本的显示 l在网页中直接输入没有定义任何样式与属性的文本内容 ，其显示效果和浏览器的设置有关。 2.2 文本 l2文本的格式 l在网页中可以为文本设置各种格式，其中包括文本中字体的选择、 字体的大小、文本的颜色、行高等（关于定义文本格式的详细内容 ，将在后面的章节中详细讲解）。下面是定义文本格式后的显示效 果，如图所示。 2.3 图像 l网页中使用的图像可以分为两个部分：一部分
10、是起修饰 作用的图像，一般在页面中起美化作用；另一部分是作 为内容的图像，其中有些内容部分的文本内容，因为涉 及到特殊的字体，所以也要用图像的方式来显示。下面 进行详细讲解。 2.3.1 矢量图和位图 l矢量图是使用数学公式计算来获得的图像格式，其优点在于即使将 图像放大，依然能够清晰显示；其缺点在于难于表现色彩丰富的图 像内容。在网页中，无法使用单独的矢量格式的图像。矢量图通常 使用在Flash动画之中。下面是矢量图像和其放大后的效果和位图 图像和其放大后的效果 2.3.2 网页设计中常用的图片格式 l在网页中通常使用的图片格式有GIF格式和JPEG格式。 其他的图片格式也可以在网页中使用，
11、但会受到浏览器 以及客户端环境的限制。具体内容如下所示。 l1GIF格式 GIF（Graphics Interchange Format）格式即图形 交换格式 l2JPEG格式 l使用JPEG格式的图片的好处同样在于各种浏览器都能很 好地支持，同时可以很好地压缩图片，改善加载的速度 。 2.3.3 使用图片 l在网页中使用图片一般分为两种情况：一种是图片作为 修饰部分；另一种是图片作为内容部分。作为修饰部分 的图片，例如导航栏文字后面使用的背景等；作为内容 出现的图片，例如网站中展示的产品的图片等。下面分 别用实例来说明，作为修饰的图片和作为内容图片的作 用和显示效果，具体内容如下所示。 l1作为修饰的图像 l2作为内容的图像 2.3 图像 l网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容 ，其中使用最多的是Flash动画。下面进行详细讲解。 l1音频多媒体内容 l在网页中，作为修饰的图像一般以背景的形式出现，以便使页面的 表现和结构相分离。下面是一个在页面中使用修饰图片的示例，其 显示效果如图所示。 2.3 图像 l2作为内容的
