6.2 在网页中插入图像
在使用图像前，一定要有目的地选择图像，最好运用图像处理软件美化一下图像，否则插入的图像可能不美观，会显得非常死板。
6.2.1 插入图像
图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也加深人们对网站风格的印象。下面通过如图6-1所示的实例讲述如何在网页中插入图像，具体操作步骤如下：
图6-1 插入网页图像的效果
01 打开网页文档，将光标置于插入图像的位置，如图6-2所示。
图6-2 打开网页文档
02 执行“插入”|“图像”|“图像”命令，如图6-3所示。
图6-3 执行“图像”命令
03 弹出“选择图像源文件”对话框，在对话框中选择图像images/03.jpg，如图6-4所示。
图6-4 “选择图像源文件”对话框
★高手支招★
使用以下方法也可以插入图像：
●执行“窗口”|“资源”命令，打开“资源”面板，在面板中单击
按钮，展开图像文件夹，选定图像文件，然后用鼠标拖动到网页中的合适位置即可。
●单击“常用”插入栏中的
按钮，弹出“选择图像源文件”对话框，在对话框中选择需要的图像文件。
04 单击“确定”按钮，插入图像，如图6-5所示。保存文档，按F12键在浏览器中预览，效果参见图6-1所示。
图6-5 插入图像
★提示★
如果选中的文件不在本地网站的根目录下，则弹出如下图所示的选择框，系统要求用户复制图像文件到本地网站的根目录，单击“是”按钮，此时会弹出“复制文件为”对话框，让用户选择文件的存放位置，可选择根目录或根目录下的任何文件夹，这里建议读者新建一个名称为images的文件夹，今后可以把网站中的所有图像都放入到该文件夹中。
6.2.2 设置图像属性
下面通过实例讲述图像属性的设置，如图6-6所示，具体操作步骤如下：
图6-6 设置图像属性后的效果
01 打开网页文档，选中插入的图像，如图6-7所示。
图6-7 打开网页文档
★指点迷津★
如何加快页面图片的下载速度?
在浏览网页的过程中，有时首页图片过少，而其他页面图片过多，为了提高效率，当访问者浏览首页时，后台进行其他页面的图片下载。方法是在首页加入<img src=”1.jpg”width=0 height=0>，其中width、height要设置为0，1.jpg为提前下载的图片名。
02 单击鼠标右键，在弹出的快捷菜单中选择“对齐”|“右对齐”命令，如图6-8所示。
图6-8 执行“右对齐”命令
03 选中插入的图像，打开“属性”面板，还可以在“属性”面板中设置图像的其他属性，如图6-9所示。
图6-9 设置图像的对齐方式
04 保存文档，按F12键在浏览器中预览，效果如图6-6所示。
★知识要点★
在图像的“属性”面板中可以进行如下设置：
●宽和高：以像素为单位设定图像的宽度和高度。当在网页中插入图像时，Dreamweaver自动使用图像的原始尺寸。可以使用以下单位指定图像大小：点、英寸、毫米和厘米。在HTML源代码中，Dreamweaver将这些值转换为以像素为单位。
●src：指定图像的具体路径。
●链接：为图像设置超级链接。可以单击
按钮浏览选择要链接的文件，或直接输入URL路径。
●目标：链接时的目标窗口或框架。在其下拉列表中包括4个选项。
➢ _blank：将链接对象在一个未命名的新浏览器窗口中打开。
➢ _parent：将链接的对象在含有该链接框架的父框架集或父窗口中打开。
➢ _self：将链接的对象在该链接所在的同一框架或窗口中打开。_self是默认选项，通常不需要指定它。
➢ _top：将链接的对象在整个浏览器窗口中打开，因而会替代所有框架。
●替换：图片的注释。当浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。
●编辑：启动“外部编辑器”首选参数中指定的图像编辑器，并使用该图像编辑器打开选定的图像。
➢ 编辑：启动外部图像编辑器编辑选中的图像。
➢ 编辑图像设置
：弹出“图像预览”对话框，在对话框中可以对图像进行设置。
➢ 重新取样
：将“宽”和“高”的值重新设置为图像的原始大小。调整所选图像大小后，此按钮显示在“宽”和“高”文本框的右侧。如果没有调整过图像的大小，该按钮不会显示出来。
➢ 裁剪
：修剪图像的大小，从所选图像中删除不需要的区域。
➢ 亮度和对比度
：调整图像的亮度和对比度。
➢ 锐化
：调整图像的清晰度。
●地图：在设置图像热点链接时使用。
●原始：指定在载入主图像之前应该载入的图像。