肺癌靶向药价格:网页图像的一般格式

网页图像的一般格式

考虑网络速度的限制，网页图片文件一般不能太大，太大的图片影响浏览器打开网页的速度。目前，网页中最常采用的图片格式主要有Gif、Jpg、Png三种。下面分别介绍：

1. Gif格式（图形交换格式）

Gif格式全称是Graphic Interchange Format，这是网页设计者最常使用的图片格式之一，Gif格式具有如下特点：

Ø 无损压缩，即在压缩时不降低图像的品质，而是减少显示色彩数目。

Ø 可设置透明背景，便于更好地融合到网页中。

Ø 支持动画效果，能够使网页变得丰富多彩。

Ø 强大的跨平台能力，可以适合不同的浏览器平台。

Ø 256色的限制，即最多可以显示的颜色数是256色，所以能够实现无损压缩。

2. Jpg格式（联合图像专家组标准）

Jpg格式又称Jpeg，全称是Joint Photograpic Experts Group，这种文件格式具有如下特点：

Ø 有损压缩，即压缩时有些图像细节可能被忽略。

Ø 支持真彩色（32位颜色支持），颜色丰富，适应对颜色要求比较高的场合。

Ø 强大的跨平台能力，可以适合不同的浏览器平台。

3. Png格式（可移植网络图形）

Png格式全称是可移植网络图形（Portrable Net Graphic），以PNG格式保存的图片可以被压缩，以减小其占用的存储空间并加快下载速度，同时不损失任何图像质量。PNG 格式支持不同的图像透明度以及不同计算机上的图像亮度控制，可用于从小图像（如项目符号和横幅）到复杂图像（如照片）的各种图像。用Fireworks设计的图片默认保存格式就是.png。

由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的Web图形都是适合的；但是，IE（4.0 和更高版本）和 Netscape（4.04 和更高版本）只能部分支持PNG图像的显示。因此，除非正在为支持PNG格式的浏览器的特定用户进行设计，否则还是请使用GIF或JPEG格式以迎合大多数人的需求。

在插入图像选择图像源文件过程中，如果当前文档是新建的未保存文档，在“URL”选择框中显示的是图像文件在本地计算机硬盘中的绝对路径，如：“file:///E|/wjx/03/pic/pic2.gif”。将该网页文档保存后，Dreamweaver8将该引用路径转换为文档的相对路径。如果在站点中操作，在页面插入非站点目录内的图像时，系统会弹出对话框询问是否将图像文件复制到网站目录下，如图3-61所示。选择【是】将在站点内保存该图像，否则只是使用带文件协议的绝对路径，将来可能无法显示该图像。

图3-61 在站点插入站点外图像

那么什么是绝对路径和相对路径呢？

文档绝对路径就是一个文件的完整 URL，它包括所使用的协议（如http://和file:///）。例如，“http://www.sdut.edu.cn/01/shm.html”和“http://www.sdut.edu.cn/image/01/banner_2.gif”就是绝对路径。

在网页中使用文件协议（file:///）指定文件，会经常发生连接错误，建议不要使用。

文档相对路径的基本思想是省略掉对于当前文档和所发生关系（引用或链接等）的文档都相同的绝对 URL部分，而只提供不同的路径部分。例如图3-62所示的文件夹结构中，对于文件“pic.html”来说：

图3-62 文件的路径示例

●图像文件“Back.gif”和它位于同一文件夹中，若在文件中引用“Back.gif”，则其名就可以使用相对路径：“Back.gif”。

●图像文件“pic1.gif”（在名为<22>的子文件夹中），可使用相对路径“22/pic1.gif”。每个正斜杠 (/) 表示在文件夹层次结构中下移一级。

●网页文件“index.html”（在父文件夹中，“pic.html”向上一级），可使用相对路径“../index.html”。每个“../”表示在文件夹层次结构中上移一级。

●文件“wjx.dwt”（在父文件夹的其它子文件夹中），可使用相对路径“../Templates/wjx.dwt”。其中“../”向上移至父文件夹；“Templates/”向下移至子文件夹中。

文档相对路径对于大多数图像路径来说是最适用的路径。在当前文档与所插入的图像文档处于同一文件夹内，而且可能保持这种状态的情况下，文档相对路径特别有用。若成组地移动一组文件，例如移动整个文件夹时，该文件夹内所有文件保持彼此间的相对路径不变，此时不需要更新这些文件间的文档相对链接。

当插入图像使用绝对路径时，图像若驻留在远程服务器上而不在本地硬盘驱动器上，则将无法在文档窗口中查看该图像。此时，必须在浏览器中预览该文档才能看到它。

只要情况允许，对于图像，请尽量使用相对路径。

注意：图片文件最好独立存放于相对独立的文件夹。图片文件名尽量不使用汉字和特殊符号，否则可能导致浏览器不能显示。

2. 插入鼠标经过图像

在网页中，我们经常可以看到这种情况，即当鼠标指针移动到某一幅图像上面时，图像变化为另一幅图像，鼠标移开时，又恢复为原来的图像，这就是“鼠标经过图像”。鼠标经过图像的效果实际是由两幅图像完成的：主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。“鼠标经过图像”经常用于网页中的按钮，使网页显得生动活泼。下面通过一个实例讲解如何插入鼠标经过图像。

（1）在网页编辑窗口中，将光标停留在要插入“鼠标经过图像”的位置，点击“常用”插入工具栏右面的“插入图像”按钮，会弹出下拉菜单，选择“鼠标经过图像”；或者通过菜单栏选择“插入”-“图像对象”-“鼠标经过图像”。

（2）出现“插入鼠标经过图像”对话框，如图3-70所示。

图3-70 “插入鼠标经过图像”对话框

在“图像名称”文本框输入一个名字，如“change”，在“原始图像”文本框输入打开网页时显示的图像，即“主图像”，在“鼠标经过图像”文本框输入要变换的图像，即“次图像”。本例中分别选择的是文件夹下的”fish1.jpg”和”fish2.jpg”,如图3-71所示。

图3-71 准备交换的图像

在“替换文本”文本框输入鼠标经过图像时的说明文字。实例中输入的是“海底世界欢迎您”。在“按下时，前往的URL”文本框输入一个网址。表示单击图像时转向的链接地址（此处使用了超级链接的内容，我们将在3.4节详细讲解），本例中输入的是“http://www.buww.com.cn”。

（3）设置完毕，点【确定】。按 F12 键预览该网页。将鼠标指针移过原始图像，可以看到图片发生了变化，切换到第二幅，点击图像将连接到设定的网址。如图3-72所示。

图3-72 鼠标经过图像发生变化

注：不能在“设计”视图中看到鼠标经过图像的效果。

3.4.3  使用图像地图

有时浏览网页，经常会发现一张图片（例如地图），点击图片中的不同区域，分别指向不同的URL地址，这是怎么实现的呢？在一张图片上如何实现多个URL链接呢？这就需要用到Dreamweaver8的图像地图功能。

图像地图是指已被分为多个区域（或称“热点”）的图像，当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。要创建图像地图，请执行以下操作：

（1）在“文档”窗口中，选择图像。

（2）在属性检查器中，单击右下角的展开箭头，查看所有属性。在“地图名称”文本框中为该图像地图一个输入唯一的名称，如图3-85所示。

图3-85 命名图像地图

（3）选择图像热点区域工具：选择圆形工具，并将鼠标指针拖至图像上，创建一个圆形热点；选择矩形工具，并将鼠标指针拖至图像上，创建一个矩形热点；选择多边形工具，在各个顶点上单击一下，定义一个不规则形状的热点。然后单击箭头工具封闭此形状。使用箭头图标可以拖动热点区域。

我们为山东选择圆形热点区域，创建热点后，出现热点属性检查器，如图3-86所示。

图3-86 设置图像热点属性

（4）在“链接”文本框中，单击文件夹图标可选择在用户单击该热点时要打开的文件，我们输入“http://www.shandong.gov.cn”。在“替换”文本框中，键入作为替换文本出现的文本。完成设置后，在该文档的空白区域单击，退出热点属性检查器。

（5）依此步骤创建其它热点区域。

（6）保存网页，用F12键浏览，鼠标移动到设置的热点区域时，鼠标指针变成小手，点击后转到该热点定义的URL，如图3-87所示。

图3-87 图像热点区域示例

定义图像热点后，可以移动热点，调整热点大小，还可以将含有热点的图像从一个文档复制到其它文档，或者复制某图像中的一个或多个热点，然后将其粘贴到其它图像上；这样就将与该图像关联的热点也复制到了新文档中。

若要选择图像地图中的多个热点，请按下 Shift 键的同时单击要选择的其它热点。

若要移动热点，请使用指针热点工具选择要移动的热点，可直接拖动热点到新区域。

若要调整热点的大小或形状，请用指针热点工具选择热点，然后拖动热点选择器手柄即可。