建立插入图像的页面

12.5.2　建立插入图像的页面

网页都离不开图像的应用，好的图像能够达到丰富网页内容的效果。在考虑插入图像的时候要注意两方面的问题：首先要提高图像的质量，效果不好的图像会产生不良影响；其次还应注意图像的大小及格式，因为较大的图像将严重影响网页的下载速度，大多数浏览器能够支持的图像格式主要有 GIF、JPG、JPEG 和 PNG，除此之外的格式，在网页中尽量不要使用。

1.插入图像

可以从当前站点、本地硬盘、Web 图像库等处寻找图像插入。从图像的位置考虑，可将它分为站点之内与站点之外两种情况。

如果图像来自于当前站点之外，为了保证图像的正常显示，在保存网页文件时，Dreamweaver 8都将提示用户在当前站点内保存图像的副本。否则，远程站点关闭或位置发生变化时，将无法显示所选的图像。

插入图像的操作方法：

（1）在文档窗口中确定图像的插入点。

（2）选择【插入】→【图像】命令，或者单击“插入”面板“常用”选项卡中的按钮，如图 12-39　所示。此时系统将打开“选择图像源文件”对话框，如图 12-40　所示。

图12-39　插入图像

图12-40　选择图像源文件

（3）在对话框中选择图像后，单击【确定】按钮。如果图像文件不在本地站点目录下，系统将显示如图 12-41　所示的提示对话框，询问用户是否希望将选中的图像文件复制到当前站点文件夹中。通常情况下，应选择【是】按钮，以便于将来进行站点发布与更新。

（4）单击【是】按钮，系统打开“复制文件为”对话框，可通过该对话框命名复制文件，并选择存放文件的文件夹，如图12-42所示。

图12-41　提示对话框　　

　图12-42　“复制文件为”对话框

（5）单击【保存】按钮，图像即被插入到文档中，如图12-43所示。

图12-43　在文档中插入图像

2.设置图像属性

在网页内插入了指定的图像之后，属性面板中的内容将变成与图像相关的属性信息，如图12-44所示。可对图像的大小、宽、高、对齐方式、间距、边框等进行设置和调整。

图12-44　图像的属性面板

（1）改变图像尺寸

改变图像尺寸可以通过属性面板或直接拖动鼠标来完成。在默认的情况下，插入的图像将以 100%的比例显示在浏览器窗口中。考虑到图像与周围文字、表格等内容的融合以及其在网页布局上的作用，有必要对图像的尺寸进行调整。

使用属性面板改变图像尺寸的操作方法：

① 选择网页内的图像，打开图像的“属性”面板，以像素为单位设置宽度和高度。

② 在文本框“宽”中输入数值，设置显示尺寸的宽度。

③ 在文本框“高”中输入数值，设置显示尺寸的高度。

使用鼠标拖动改变图像尺寸的操作方法：

① 在文档窗口选择图像，它的周围将出现黑色的边框。

② 沿水平方向拖动图像右侧边框上的句柄，将改变所选图像的宽度。

③ 沿垂直方向拖动底端边框上的句柄，将改变所选图像的高度。

④ 需要同时改变图像的宽度与高度时，沿对角线方向拖动右下角的句柄，将同时改变所选图像的宽度与高度。

※ 提示：

按住 Shift 功能键的同时拖动右下角的句柄，可以在改变图像大小的同时保持原有的高度与宽度的比例。

⑤ 若要恢复图像的原始值，可单击“宽”和“高”文本框右侧的“重新取样”按钮。如果没有调整过图像的大小，该按钮不会显示出来。

（2）设置图像距离

Dreamweaver 8允许在水平、垂直两个方向上调整图像和周围文本间距的大小。“属性”面板的“垂直边距”用于调整图像与文本的垂直间距，“水平边距”用于调整图像与文本的水平间距，间距的度量单位都采用“像素”。

（3）更改图像

为了提高图像的下载速度，可以使用替换图像。它的原理是在显示正式图像之前，载入较小的图像文件，该图像应该与正式图像有一定的联系。一般多数人会使用正式图像的黑白版，这样访问者将首先看到显示的黑白内容。可以在“属性”面板中“低解析度源”文本框旁边单击文件夹图标，在打开的对话框中确定替换图像的存放位置。

需要更改图像时，可修改图像的路径，也可以选择新的图像文件。按下列步骤之一进行操作。

① 双击网页内插入的图像，在打开的“选择图像源文件”对话框中重新输入图像文件的存放位置。

② 选择网页内插入的图像，在“属性”面板的“源文件”文本框中确定图像文件的位置。

③ 选择网页内插入的图像，在“属性”面板中单击“源文件”右侧的文件夹图标，在打开的对话框中更改图像文件的“源文件”。

（4）设置图像对齐尺寸

将图像插入网页之后，可以从“属性”面板中的“对齐”文本框中设置图像和文本的相互位置关系。具体包括：基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐。

（5）编辑图像

Dreamweaver 8新增加了图像的基本编辑功能，可以对图像进行简单的处理，如图 12-45所示。

图12-45　图像编辑按钮

裁剪图像：可以让用户根据需要裁剪掉一部分画面，操作方法：

① 选择要裁剪的图像，单击“属性”面板中的“裁剪工具”，弹出对话框，如图 12-46所示。

② 单击 按钮，在所选图像周围会出现 8　个裁剪控制点。如图 12-47　所示。

③ 拖曳相应的控制点，调整裁剪范围。

④ 在边界框内部双击或按回车键完成裁剪。

图12-46　裁剪提示对话框　

图12-47　裁剪图像

调整亮度和对比度：单击此按钮，弹出“亮度/对比度”对话框，可分别拖动滑块来调整图像的亮度和对比度。如图 12-48　所示。

锐化图像：增加图像边缘像素的对比度，使图像更加清晰。单击此按钮，弹出“锐化”对话框，如图 12-49　所示。拖动滑块或在文本框中输入一个 0～10　之间的值，来指定应用于图像的锐化程度。

图12-48　调整亮度/对比度

图12-49　锐化对话框

（6）引入外部图像编辑器

在 Dreamweaver 8中，用户可以在外部图像编辑器（如Photoshop、Fireworks）中打开选定的图像。启动外部图像编辑器方法为，选择图像之后，只需在打开的“属性”面板中单击“编辑”按钮 ，将打开用于图像编辑的外部图像编辑器窗口，如图12-50所示。由于篇幅所限，在这里不详细介绍如何选择外部图像编辑器进行图像编辑。

图12-50　在外部编辑器中编辑图像（Fireworks 8）