2024年网页图片的设计格式(通用3篇)

网页图片的设计格式 第1篇

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

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

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

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

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

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

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

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

图3-62 文件的路径示例

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

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

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

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

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

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

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

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

网页图片的设计格式 第2篇

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

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

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

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

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

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

网页图片的设计格式 第3篇

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

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

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

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

图3-71 准备交换的图像

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

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

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

使用图像地图