3.1 图像的插入

发布网站的目的就是要让更多的浏览者浏览设计的站点，网站设计者必须想办法去吸引浏览者的注意，所以网页中除了包含文字外，还要包含各种赏心悦目的图像。因此，对于网站设计者而言，掌握图像的使用技巧是非常必要的。

命令介绍

设置图像属性：将图像插入到文档中，对插入的图像的属性进行设置或修改，并直接在文档中查看所做的效果。

插入图像占位符：在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。

3.1.1 课堂案例——咖啡馆网页

【案例学习目标】使用“常用”面板，插入图像。

【案例知识要点】使用“图像”按钮，插入图像，如图3-1所示。

【效果所在位置】Ch03/效果/咖啡馆网页/index.html。

（1）选择“文件 > 打开”命令，在弹出的“打开”对话框中，选择本书学习资源中的“Ch03 > 素材 > 咖啡馆网页 > index.html”文件，单击“打开”按钮打开文件，如图3-2所示。将光标置入到如图3-3所示的单元格中。

（2）单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中，选择本书学习资源中的“Ch03 > 素材 > 咖啡馆网页 > images”文件夹中的“img_01.png”文件，单击“确定”按钮完成图片的插入，如图3-4所示。

（3）将光标置入图 3-5 所示的单元格中，将本书学习资源中的“Ch03 > 素材 > 咖啡馆网页 >images”文件夹中的图片“img_04.png”插入到该单元格中，效果如图3-6所示。

（4）使用相同的方法，将“img_02.png”“img_03.png”“img_05.png”“img_06.png”图片插入到其他单元格中，效果如图3-7所示。

（5）保存文档，按F12键预览效果，如图3-8所示。

3.1.2 网页中的图像格式

网页中通常使用的图像文件有JPEG、GIF、PNG 3种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为要保证浏览者下载网页的速度，网站设计者也常使用 JPEG和GIF这两种压缩格式的图像。

1．GIF文件

GIF文件是网络中最常见的图像格式，其具有以下特点。

（1）最多可以显示256种颜色。因此，它最适合显示色调不连续或具有大面积单一颜色的图像，如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。

（2）使用无损压缩方案，图像在压缩后不会有细节的损失。

（3）支持透明的背景，可以创建带有透明区域的图像。

（4）是交织文件格式，在浏览器完成下载图像之前，浏览者即可看到该图像。

（5）图像格式的通用性好，几乎所有的浏览器都支持此图像格式，并且有许多免费软件支持 GIF图像文件的编辑。

2．JPEG文件

JPEG文件是用于为图像提供一种“有损耗”压缩的图像格式，具有以下特点。

（1）具有丰富的色彩，最多可以显示1670万种颜色。

（2）使用有损压缩方案，图像在压缩后会有细节的损失。

（3）JPEG格式的图像比GIF格式的图像小，下载速度更快。

（4）图像边缘的细节损失严重，所以不适合有鲜明对比的图像或文本的图像。

3．PNG文件

PNG 文件是专门为网络而准备的图像格式，具有以下特点。

（1）使用新型的无损压缩方案，图像在压缩后不会有细节的损失。

（2）具有丰富的色彩，最多可以显示1670万种颜色。

（3）图像格式的通用性差。IE 4.0或更高版本和 Netscape 4.04或更高版本的浏览器都只能部分支持PNG图像的显示。因此，只有在为特定的目标用户进行设计时，才使用PNG格式的图像。

3.1.3 插入图像

要在Dreamweaver CS6文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示，所以在建立站点时，网站设计者常先创建一个名叫“image”的文件夹，并将需要的图像复制到其中。

在网页中插入图像的具体操作步骤如下。

（1）在文档窗口中，将插入点放置在要插入图像的位置。

（2）通过以下几种方法启用“图像”命令，弹出“选择图像源文件”对话框，如图3-9所示。

① 选择“插入”面板中的“常用”选项卡，单击“图像”展开式工具按钮上的黑色三角形，在下拉菜单中选择“图像”选项。

② 选择“插入 > 图像”命令。

③ 按Ctrl+Alt+I组合键。

（3）在对话框中，选择图像文件，单击“确定”按钮完成设置。

3.1.4 设置图像属性

插入图像后，在“属性”面板中显示该图像的属性，如图3-10所示。下面介绍各选项的含义。

“宽”和“高”选项：以像素为单位指定图像的宽度和高度。这样做虽然可以缩放图像的显示大小，但不会缩短下载时间，因为浏览器在缩放图像前会下载所有图像数据。

“图像ID”选项：指定图像的ID名称。

“源文件”选项：指定图像的源文件。

“链接”选项：指定单击图像时要显示的网页文件。

“替换”选项：指定文本，在浏览设置为手动下载图像前，用它来替换图像的显示。在某些浏览器中，当鼠标指针滑过图像时也会显示替代文本。

“编辑”按钮组：编辑图像文件，包括编辑、设置、从源文件更新、裁剪、重新取样、亮度和对比度和锐化功能。

“宽”和“高”选项：分别设置图像的宽和高。

“地图”和“热点工具”选项：用于设置图像的热点链接。

“目标”选项：指定链接页面应该在其中载入的框架或窗口，详细参数可见链接一章。

“原始”选项：为了节省浏览者浏览网页的时间，可通过此选项指定在载入主图像之前可快速载入的低品质图像。

3.1.5 给图片添加文字说明

当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域，如图3-11所示。

为了让浏览者在不能正常显示图片时也能了解图片的信息，常为网页的图像设置“替换”属性，将图片的说明文字输入“替换”文本框中，如图3-12所示。当图片不能正常显示时，网页中的效果如图3-13所示。

3.1.6 跟踪图像

在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。Dreamweaver CS6利用“跟踪图像”功能来实现上述网页设计的方式。

设置网页蓝图的具体操作步骤如下。

（1）在图像处理软件中绘制网页的设计蓝图，如图3-14所示。

（2）选择“文件 > 新建”命令，新建文档。

（3）选择“修改 > 页面属性”命令，弹出“页面属性”对话框，在“分类”列表中选择“跟踪图像”选项，转换到“跟踪图像”对话框。

（4）单击“跟踪图像”选项右侧的“浏览”按钮，在弹出的“选择图像源文件”对话框中找到步骤（1）中设计蓝图的保存路径，如图3-15所示，单击“确定”按钮，返回到“页面属性”对话框。

（5）在“页面属性”对话框中调节“透明度”选项的滑块，使图像呈半透明状态，如图3-16所示，单击“确定”按钮完成设置，效果如图3-17所示。