网页设计与制作教程（第三版）普通高等教育“十一五”国家级规划教材赵祖荫 主编第1章 网页设计与制作基础1.1 Internet基础 1.2 网页图像基础 1.3 网页制作软件的主要功能和特点 1.4 本章小结本章重点：本章重点： Internet基础知识 网页图像基础 网页制作套件的主要功能和特点1.1.1 Internet与WWW服务 计算机网络，简单的说，就是用通信线路把若 干计算机连起来，再配以适当的软件和硬件，以达到 计算机之间的资源共享和信息交换。Internet的中文 名称是因特网或国际互联网，是一个几乎覆盖了全世 界的计算机网络。 1.1 Internet基础Internet提供的服务主要有万维网（WWW）服 务、电子邮件（E- mail）服务、文件传输（FTP）服 务、远程登录（Telnet）服务和新闻与公告类（ Usenet）服务等。 网页能存放在全球的任何一台计算机上。所以 一旦与WWW连接，用户就可以使用相同的方式轻松 地接收全球任何地方的信息。Internet上链接在一起 的网页构成了一个庞大的信息网。图1-1 网页的超文本结构 1.1.2 服务器与客户机 Internet连接着难以计数的计算机，按照功能它们 大致可分为服务器和客户机两类。 服务器是提供资源和服务的计算机。 客户机是供用户使用资源和享受服务的计算机。 浏览者在访问网页时，使用的是客户机。浏览器 向存放网页的WWW服务器（经常是在很远的地方） 发出一个请求；收到请求后，WWW服务器将响应信 号和网页发送给客户机。该流程如图1-2所示。 图 1-2 客户机和服务器 客户机也可以通过浏览器将数据信息上传给 WWW服务器的数据库或者应用程序，还可以利用交 互式网页向服务器的数据库查询数据，然后服务器将 处理结果以网页的形式反馈给用户。1.1.3 IP地址和域名 网络上的每一台计算机都必须有IP地址或域名作为 其独一无二的标识，就像我们每个人都有一个身份证号一 样，作为身份的确认。 IP地址是Internet上计算机的数字标识。两台计算机 不能有相同的IP地址。它通常由四个0255间的十进制整 数和中分点构成，例如 202.121.80.18、196.2.56.3都是合 法的IP地址。域名是与网络上的数字型IP地址相对应的字符型地 址，便于记忆和识别。域名的一般格式：主机名.机构名.类别名.地区名 如：www.jlu.edu.cn1.1.4 URL和超链接 Internet是全球最大的信息库，每个服务器上 都有成千上万的各种资源，那么如何来标识这些 资源呢？ 用于解决这一问题的是统一资源定位器（ uniform resource locator简称URL）。URL是全球 WWW网服务器资源的标准寻址定位编码，它被 用来确定资源的相应位置。 URL采用统一的格式： 协议名:/服务器的IP地址或域名/路径/文件名1.1.5 HTML语言和网页制作工具 网页实际上就是一个用超文本标记语言 HTML（hyper text markup language）编写的文本 文件，从而把文字、表格、图像、动画、声音和 视频等各种媒体有机地组合在一起。 HTML语言能够运行于各种操作系统。 例如图1-3所示的网页的HTML语言源文件为：网页设计大家学网页设计大家学图 1-3 网页的例子 1.2 网页图像基础1.2.1 位图和矢量图 1. 位图 位图是由分配了特定位置和颜色值的点(象 素)的排列组成。位图的色彩和色调变化丰富，但 占用空间较多。 对位图进行编辑时，处理的实际上是一个个 象素。位图的质量与分辨率有关。如果在屏幕上 以较大的倍数放大显示图像，在图像边缘可能会 产生锯齿。如图1-4所示，位图格式的图片被放大 后与原图对比有很明显的马赛克纹样。 图1-4 将位图格式的局部图像放大前后的效果对比 2. 矢量图 矢量图用一组绘图指令来描述图像的内容， 这些指令根据图形的几何特性定义图形的轮廓， 并用颜色进行描边和填充。矢量图主要用于表示 线框型的图画、工程制图、艺术字等。矢量图文 件的容量较小。 矢量图形和分辨率无关，它们在不同分辨率 的输出设备上显示效果都相同。 图1-5显示了将矢量格式的局部图像放大前 后的实际效果。 图1-5 将矢量格式的局部图像放大前后的实际效果。1.2.2常用图像格式及其特点 图像格式是指计算机中存储图像文件的方法 ，它们代表不同的图像信息、色彩数和压缩程度 。图形图像处理软件通常可以处理多种图像文件 格式，每一种图像格式都有它的特点和用途。在 选择输出的图像文件格式时，应考虑图像的应用 目的以及图像文件格式的特点。1BMP图像文件格式BMP图像是Microsoft Windows所定义的图像文件格 式，在Windows中运行的图形图像软件都支持BMP图像格 式。BMP图像文件只能存放一幅图像，图像数据有压缩或 不压缩两种处理方式。 2GIF图像文件格式GIF图像是一种包含有帧、调色板、优化方案等工 作信息的位图格式。最多只支持256种颜色，支持透明色 。采用无损压缩的方法，产生的文件很小。GIF图像在网络上使用广泛。网络图像中色彩简单 、内容不很复杂、动画以及包含透明区域的图像比较适合 使用该图像格式。3. JPEG图像文件格式JPEG图像支持多达224种颜色，可以描绘真实场景图像或 颜色丰富、内容细腻的图像。JPEG图像采用有损压缩的方 法，图像质量与采用的压缩比相关，经过高倍压缩的JPEG 图像文件比较小，是目前网络中使用最广泛的图像格式之 一。 4PNG图像文件格式PNG图像是一种专门针对网络发布而开发的无损压缩图像 文件格式，可以保存灰度模式、索引颜色模式、图层、帧 等图像信息，并提供从28到232种颜色的支持，同时支持透 明背景和动态效果。 256色的PNG图像格式具有GIF图像格式的全部功能，文件 大小比GIF图像格式小。支持224或232种颜色的PNG图像格式提供高压缩比 的无损图像压缩。PNG图像使用的是高速交替显 示方案，显示速度很快，只需要下载1/64的图像 信息就可以显示出低分辨率的预览图像。 5PSD图像文件格式 PSD图像是著名图像处理软件PhotoShop中使用的 一种标准图像文件格式，能够保存图像处理的每 一个细节部分，便于图像的编辑和再处理。1.2.3 色彩的属性网页中的色彩是网页内容的一种表现，能够突出 地显示整个网站的风格，给人以视觉冲击。不同 的色彩搭配产生不同的效果，并可能影响到访问 者的情绪。好的色彩搭配具有感染力，同时也具 有象征性，所以确定网页的基准色彩就显得尤为 重要。 色彩可以分为无彩色和有彩色两大类。无彩色包 括黑、白、灰三种颜色；有彩色包括红、黄、绿 、青、蓝、紫等多种颜色。各种色彩都具有明度 、色相和纯度三种属性。1明度明度是指色彩的明暗程度，任何色彩都有自己的明暗特征 。从光谱上可以看到最明亮的颜色是黄色，处于光谱的中 心位置。最暗的是紫色，处于光谱的边缘。 一个物体表面的光反射率越大，对视觉的刺激的程度越大 ，看上去就越亮，这一颜色的明度就越高。因此明度表示 颜色的明暗特征，也就是说明度较高的色彩较亮、明度较 低的色彩较暗。 明度在色彩三要素中可以不依赖于其他性质而单独存在， 任何色彩都可以还原成明度关系来考虑，明度适于表现物 体的立体感和空间感。黑白之间可以形成许多明度台阶， 人的最大明度层次辨别能力可达200个台阶左右，普通使 用的明度标准大都为9级左右。图图1-6 1-6 色彩明度值由高到低的明度变化过程色彩明度值由高到低的明度变化过程2色相色相是指色彩的相貌，用来区别色彩种类。红、 黄、蓝等色族便就是色相，它们之间的差别属于 色相差别。 在应用色彩理论中，通常用色环来表示色彩系列 。最初的基本色相为红、橙、黄、绿、蓝、紫； 在各色中间加插中间色后，可制出红、橙红、黄 橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫 、红紫十二个基本色相。 如果进一步再找出中间色，还可以得到二十四个 色相。3纯度纯度是指色彩的鲜艳度、饱和度。比如，红色中 有鲜艳没有杂质的红、干涩灰暗的红以及淡薄的 粉红等，它们的色相都是红，但却强弱不一，这 说明它们的纯度不同。通常色彩纯度越高的颜色 越鲜艳，纯度越低的越灰暗。任何一种色相只要 和黑、白、灰中的任意一种混合纯度就会降低。 比如，和白色相混明度增加纯度减弱；和黑色相 混明度减弱色相变暗。1.2.4 RGB色彩模式和Web安全色3物体的颜色，实际上是由物体表面发出的特定波 长的光作用于人的视觉器官而产生的。自然界中 的颜色千变万化、数不胜数，但每种颜色都可以 用红(R)、绿(G)、蓝(B)三种色光按一定的比例混 合而成，这三种色光被称为光的三原色。 网页制作中使用最广泛的是RGB色彩模式的十六 进制显示模式。即用3个00FF的十六进制数来表 示组成颜色的红、绿、蓝色的数值。例如： 000000表示黑色， FFFFFF表示白色，00FF00表示 红色，0000FF表示蓝色，总共有224种颜色。在图像处理软件中一般都有调色板，用户可以通 过调整RGB的数值选择所需的颜色。图1-7是 Fireworks 8中的调色板。图图1-7 Fireworks 81-7 Fireworks 8中的调色板中的调色板不同的操作系统和浏览器可能采用不同的调色板 。图像在网络发布后，色彩的显示可能会受到浏 览端的操作系统和浏览器的影响，同一种颜色也 许会在不同的浏览端显示出不同的明度或者色相 。 我们把在不同的操作系统和浏览器中显示效果一 致的216种颜色称为网络安全色。辨别一种颜色是 否是网络安全色的方法是看其颜色值，任何由00 、33、66、99、CC或者FF组合而成的颜色值都是 Web安全色。例如：003366、0066FF、33CC99等 。通常在软件中如图1-8所示的颜色拾取框中可以 直接选取的颜色都是Web安全色 图图1-8 Fireworks 81-8 Fireworks 8中的颜色拾取框中的颜色拾取框1.2.5 图像元素在网页中的应用网页传达的信息由视觉和听觉两种形式组成，目 前主要通过视觉进行传播。网页的视觉设计过程 和其他传统媒体的视觉设计过程一样，通过合理 的组织文字、图像和视频等视觉元素来实现设计 效果。图像是十分重要的网页组成元素，没有图 像的网页往往会显得单调枯燥。1.LOGO(标志) LOGO是文字、符号、图案按照特定的设计理念 有机结合的产物。网站的标志(LOGO)和产品的商 标样，是网站主题和风格的集中体现。 2.标题在网页中可以使用图像标题或文本标题。文本标 题在设计时采用的字体，如果浏览端没有安装就 会被其他字体代替，影响网页的质量。图像标题 表现形式丰富，可以使用各种图案，也可以使用 各种艺术字，在浏览端也不存在字体被替换的问 题。 3.照片和插图照片和插图是给网页增强视觉效果的基本工具。 它们不仅能够美化页面，而且能够简洁准确地传 达信息。照片和插图的选择取决于站点的内容和 风格，还要注意图片文件不能过大以免用户下载 时间过长。选用JPEG图像文件有必要的话应进行 压缩，在文件大小和图片质量间取得平衡。4.广告横幅（Banner）网络广告是推广产品的重要途径。在网站上做广 告通常有两种形式，一种是文字链接广告，一种 是Banner图像广告。图像广告能快速醒目地吸引 浏览者的注意。 广告（Banner）可以有任意大小和形状。图像格 式也常选择GIF动画或Flash动画。5.背景网页的背景是网站整体设计风格的重要体现方法 之一。背景可以是单色，也可以是图像。背景图 像可以是GIF格式，也可以是JPEG格式。这些都 取决于整体风格的要求。 制作背景时要注意避免喧宾夺主，不能妨碍浏览 者浏览页面内容。 背景图像一般平铺在网页上，图像尺寸和文件大 小都不必也不宜太大。6.导航栏 整个网站会有很多网页，各网页之间存在着较为 复杂的链接关系。导航栏