虽然存在很多种图形文件格式，但网页中通常使用的只有三种，即 GIF、JPEG 和 PNG。GIF 和 JPEG 文件格式的支持情况最好，在大多数浏览器中均可查看。使用 Dreamweaver 用户界面，可以轻松插入和编辑图像。
GIF（图形交换格式）
GIF 文件最多使用 256 种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。
JPEG（联合图像专家组）
JPEG 文件格式是用于摄影或连续色调图像的较好格式，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。
PNG（可移植网络图形）
PNG 文件格式是一种替代 GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及 alpha 通道透明度的支持。PNG 是 Adobe? Fireworks? 固有的文件格式。PNG 文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有 .png 文件扩展名才能被 Dreamweaver 识别为 PNG 文件。
插入图像
将图像插入 Dreamweaver 文档时，HTML 源代码中会生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver 会询问您是否要将此文件复制到当前站点中。
您还可以动态插入图像。动态图像指那些经常变化的图像。例如，广告横幅旋转系统需要在请求页面时从可用横幅列表中随机选择一个横幅，然后动态显示所选横幅的图像。
插入图像后，可以设置图像标签辅助功能属性，屏幕阅读器能为有视觉障碍的用户朗读这些属性。可以在 HTML 代码中编辑这些属性。
在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行下列操作之一：
在“插入”面板的“常用”类别中，单击“图像”图标
。
在“插入”面板的“常用”类别中，单击“图像”按钮，然后选择“图像”图标。“插入”面板中显示“图像”图标后，您可以将该图标拖动到“文档”窗口中（或者如果您正在处理代码，则可以拖动到““代码”视图”窗口中）。
选择“插入”>“图像”。
将图像从“资源”面板（“窗口”>“资源”）拖动到“文档”窗口中的所需位置；然后跳到步骤 3。
将图像从“文件”面板拖动到“文档”窗口中的所需位置；然后跳到步骤 3。
将图像从桌面拖动到“文档”窗口中的所需位置；然后跳到步骤 3。
在出现的对话框中执行下列操作之一：
选择“文件系统”以选择一个图像文件。
选择“数据源”以选择一个动态图像源。
单击“站点和服务器”按钮以在其中的一个 Dreamweaver 站点的远程文件夹中选择一个图像文件。
浏览选择您要插入的图像或内容源。
如果您正在处理一个未保存的文档，Dreamweaver 将生成一个对图像文件的 file:// 引用。将文档保存在站点中的任意位置后，Dreamweaver 将该引用转换为文档相对路径。
注意: 插入图像时，也可以使用位于远程服务器上的图像（也就是，在本地硬盘驱动器上不存在的图像）的绝对路径。但如果在工作时遇到性能问题，那么您可能希望取消选择“命令”>“显示外部文件”，以禁止在“设计”视图中查看图像。
单击“确定”。将显示“图像标签辅助功能属性”对话框（如果已在“首选参数”（“编辑”>“首选参数”）中激活了此对话框）。
在“替换文本”和“详细描述”文本框中输入值，然后单击“确定”。
在“替换文本”框中，为图像输入一个名称或一段简短描述。屏幕阅读器会朗读您在此处输入的信息。您的输入应限制在 50 个字符左右。对于较长的描述，请考虑在“长描述”文本框中提供链接，该链接指向提供有关该图像的详细信息的文件。
在“长描述”框中，输入当用户单击图像时所显示的文件的位置，或者单击文件夹图标以浏览到该文件。该文本框提供指向与图像相关（或提供有关图像的详细信息）的文件的链接。
注意: 根据您的需要，可以在其中一个或两个文本框中输入信息。屏幕阅读器会朗读图像的 Alt 属性。
注意:当您单击“取消”时，该图像将出现在文档中，但 Dreamweaver 不会将它与辅助功能标签或属性相关联。
在属性检查器（“窗口”>“属性”）中，设置图像的属性。
设置图像属性
图像属性检查器允许您设置图像的属性。如果您并未看到所有的图像属性，请单击位于右下角的展开箭头。
选择“窗口”>“属性”以查看所选图像的属性检查器。
在缩略图下面的文本框中，输入名称，以便在使用 Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像。
设置图像的任一选项。
宽和高
图像的宽度和高度，以像素表示。在页面中插入图像时，Dreamweaver 会自动用图像的原始尺寸更新这些文本框。
如果您设置的“宽”和“高”值与图像的实际宽度和高度不相符，则该图像在浏览器中可能不会正确显示。（若要恢复原始值，请单击“宽”和“高”文本框标签，或单击用于输入新值的“宽”和“高”文本框右侧的“重设大小”按钮。）
注意:您可以更改这些值来缩放该图像实例的显示大小，但这不会缩短下载时间，因为浏览器先下载所有图像数据再缩放图像。若要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。
源文件
指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。
链接
指定图像的超链接。将“指向文件”图标拖动到“文件”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。
替换
指定在只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替换文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。
地图名称和热点工具
允许您标注和创建客户端图像地图。
目标
指定链接的页应加载到的框架或窗口。（当图像没有链接到其它文件时，此选项不可用。） 当前框架集中所有框架的名称都显示在“目标”列表中。也可选用下列保留目标名：
_blank 将链接的文件载入新出现的未命名浏览器窗口。
_parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
_self 将链接的文件加载到该链接所在的同一框架或窗口中。此目标是默认的，所以通常不需要指定它。
_top 将链接的文件载入完整浏览器窗口，从而删除所有框架。
编辑
启动您在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。
从原始更新
如果该 Web 图像（即 Dreamweaver 页面上的图像）与原始 Photoshop 文件不同步，则表明 Dreamweaver 检测到原始文件已经更新，并以红色显示智能对象图标的一个箭头。当在“设计”视图中选择该 Web 图像并在属性检查器中单击“从原始更新”按钮时，该图像将自动更新，以反映您对原始 Photoshop 文件所做的任何更改。编辑图像设置
打开“图像优化”对话框并让您优化图像。裁剪
裁切图像的大小，从所选图像中删除不需要的区域。重新取样
对已调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质。 亮度和对比度
调整图像的亮度和对比度设置。 锐化
调整图像的锐度。
在代码中编辑图像辅助功能属性
如果为图像插入了辅助功能属性，则可以在 HTML 代码中编辑这些值。
在“文档”窗口中，选择图像。
执行下列操作之一：
在“代码”视图中编辑适当的图像属性。
右键单击 (Windows) 或按住 Control 单击 (Macintosh)，然后选择“编辑标签”。
编辑属性检查器中的“替换”值。
以可视方式调整图像大小
您可以在 Dreamweaver 中以可视方式调整元素的大小，这些元素包括图像、插件、Shockwave 或 SWF 文件、applet 和 ActiveX 控件等。
以可视方式调整图像大小有助于您看到不同尺寸的图像对布局的影响情况，但不会将图像文件缩放到您所指定的比例。如果您在 Dreamweaver 中以可视方式调整了图像大小，但是没有使用图像编辑应用程序（例如 Adobe Fireworks）将图像文件缩放到所需大小，用户浏览器将会在加载页面时缩放该图像。这可能会导致用户浏览器中页面下载延迟和图像显示不正确。若要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。
在 Dreamweaver 中调整图像大小时，您可以对图像进行重新取样，以适应其新尺寸。重新取样将添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小该图像的文件大小并提高下载性能。
以可视方式调整元素的大小
在“文档”窗口中选择该元素（例如，图像或 SWF 文件）。
元素的底部、右侧及右下角出现调整大小控制点。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。
执行下列操作之一，调整元素的大小：
若要调整元素的宽度，请拖动右侧的选择控制点。
若要调整元素的高度，请拖动底部的选择控制点。
若要同时调整元素的宽度和高度，请拖动顶角的选择控制点。
若要在调整元素尺寸时保持元素的比例（其宽高比），请在按住 Shift 的同时拖动顶角的选择控制点。
若要将元素的宽度和高度调整为特定大小（例如 1 x 1 像素），请使用属性检查器输入数值。以可视方式最小可以将元素大小调整到 8 x 8 像素。
若要将已调整大小的元素恢复为原始尺寸，请在属性检查器中删除“宽”和“高”文本框中的值，或者单击图像属性检查器中的“重设大小”按钮。
将图像回复到原始大小
单击图像属性检查器中的“重设大小”按钮 。
对已调整大小的图像进行重新取样
如上所述，调整图像大小。
单击图像属性检查器中的“重新取样”按钮 。
注意:无法对图像占位符或位图图像之外的元素进行重新取样。
插入图像占位符
图像占位符是在准备好将最终图形添加到网页之前使用的图形。您可以设置占位符的大小和颜色，并为占位符提供文本标签。
在“文档”窗口中，将插入点放置在要插入占位符图形的位置。
选择“插入”>“图像对象”>“图像占位符”。
对于“名称”（可选），输入要作为图像占位符的标签显示的文本。如果您不想显示标签，则保留该文本框为空。名称必须以字母开头，并且只能包含字母和数字；不允许使用空格和高位 ASCII 字符。
对于“宽度”和“高度”（必需），键入设置图像大小的数值（以像素表示）。
对于“颜色”（可选），执行下列操作之一以应用颜色：
使用拾色器选择一种颜色。
输入颜色的十六进制值（例如 #FF0000）。
输入网页安全色名称（例如 red）。
对于“替换文本”（可选），为使用只显示文本的浏览器的访问者输入描述该图像的文本。
注意:HTML 代码中将自动插入一个包含空 src 属性的图像标签。
单击“确定”。
占位符的颜色、大小属性和标签如下所示：
当在浏览器中查看时，不显示标签文字和大小文本。
替换图像占位符
图像占位符不在浏览器中显示图像。在您发布站点之前，应该用适用于 Web 的图像文件（例如 GIF 或 JPEG）替换所有添加的图像占位符。
如果您有 Fireworks，则可以根据 Dreamweaver 图像占位符创建新的图形。新图像设置为与占位符图像相同的大小。您可以编辑该图像，然后在 Dreamweaver 中替换它。
在“文档”窗口中执行下列操作之一：
双击图像占位符。
单击图像占位符将其选中，然后在属性检查器（“窗口”>“属性”）中单击“源文件”文本框旁的文件夹图标。
在“选择图像源文件”对话框中，导航到要用其替换图像占位符的图像，然后单击“确定”。
设置图像占位符属性
若要设置图像占位符的属性，请在“文档”窗口中选择占位符；然后选择“窗口”>“属性”以显示属性检查器。若要看到所有属性，请单击右下角的扩展箭头。
使用属性检查器为占位符图像设置名称、宽度、高度、图像源文件、替换文本说明、对齐方式和颜色。
在占位符的属性检查器中，灰色文本框和“对齐”文本框被禁用。在您用图像替换占位符时，可以在图像属性检查器中设置这些属性。
设置以下任一选项：
宽和高
设置图像占位符的宽度和高度，以像素表示。
源文件
指定图像的源文件。对于占位符图像，此文本框为空。单击“浏览”按钮来为占位符图形选择替换图像。
链接
为图像占位符指定超链接。将“指向文件”图标拖动到“文件”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。
替换
指定在只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替换文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。
创建
启动 Fireworks 以创建替换图像。如果您的计算机上还没有安装 Fireworks，则“创建”按钮被禁用。
从原始更新
如果该 Web 图像（即 Dreamweaver 页面上的图像）与原始 Photoshop 文件不同步，则表明 Dreamweaver 检测到原始文件已经更新，并以红色显示智能对象图标的一个箭头。当在“设计”视图中选择该 Web 图像并在属性检查器中单击“从原始更新”按钮时，该图像将自动更新，以反映您对原始 Photoshop 文件所做的任何更改。颜色
为图像占位符指定颜色。
在 Dreamweaver 中编辑图像
您可以在 Dreamweaver 中重新取样、裁剪、优化和锐化图像。还可以调整图像的亮度和对比度。
图像编辑功能
Dreamweaver 提供了基本的图像编辑功能，使您无需使用外部图像编辑应用程序（例如 Fireworks 或 Photoshop）即可修改图像。Dreamweaver 图像编辑工具旨在使您能与内容设计者（负责创建网站上使用的图像文件）轻松地协作。
注意: 您无需在计算机上安装 Fireworks 或其它图像编辑应用程序，即可使用 Dreamweaver 图像编辑功能。
选择“修改”>“图像”。设置以下任一 Dreamweaver 图像编辑功能：
重新取样
添加或减少已调整大小的 JPEG 和 GIF 图像文件的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小该图像的文件大小并提高下载性能。
在 Dreamweaver 中调整图像大小时，您可以对图像进行重新取样，以适应其新尺寸。对位图对象进行重新取样时，会在图像中添加或删除像素，以使其变大或变小。对图像进行重新取样以取得更高的分辨率一般不会导致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失，并且通常会使品质下降。
裁剪
通过减小图像区域编辑图像。通常，您可能需要裁剪图像以强调图像的主题，并删除图像中强调部分周围不需要的部分。
亮度和对比度
修改图像中像素的对比度或亮度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。
锐化
通过增加图像中边缘的对比度调整图像的焦点。扫描图像或拍摄数码照片时，大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。这可以防止特别精细的细节从组成数码图像的像素中丢失。不过，要显示数码图像文件中的细节，经常需要锐化图像，从而提高边缘的对比度，使图像更清晰。
注意:Dreamweaver 图像编辑功能仅适用于 JPEG、GIF 和 PNG 图像文件格式。其它位图图像文件格式不能使用这些图像编辑功能进行编辑。
裁剪图像
Dreamweaver 支持裁剪（或修剪）位图文件图像。
注意: 裁剪图像时，会更改磁盘上的源图像文件。因此，您最好保留图像文件的一个备份副本，以在需要回复到原始图像时使用。
打开包含要裁剪的图像的页面，选择图像，并执行下列操作之一：
单击图像属性检查器中的“裁剪工具”图标
。
选择“修改”>“图像”>“裁剪”。
所选图像周围会出现裁剪控制点。
调整裁剪控制点直到边界框包含的图像区域符合所需大小。
在边界框内部双击或按 Enter 裁剪选定内容。
将显示一个对话框通知您正在裁剪的图像文件将在磁盘上更改。单击“确定”。所选位图的边界框外的所有像素都将被删除，但将保留图像中的其它对象。
预览该图像并确保它满足您的要求。如果不满足您的要求，请选择“编辑”>“撤消裁剪”回复到原始图像。
注意: 在退出 Dreamweaver 或在外部图像编辑应用程序中编辑该文件之前，您可以撤消“裁剪”命令的效果（并回复到原始图像文件）。
优化图像
您可以在 Dreamweaver 中优化 Web 页中的图像。
打开包含要优化的图像的页面，选择图像，并执行下列操作之一：
在图像属性检查器中单击“编辑图像设置”按钮
。
选择“修改”>“图像”>“优化”。
在“图像优化”对话框中进行编辑并单击“确定”。
锐化图像
锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。
打开包含要锐化的图像的页面，选择图像，并执行下列操作之一：
单击图像属性检查器中的“锐化”按钮
。
选择“修改”>“图像”>“锐化”。
可以通过拖动滑块控件或在文本框中输入一个 0 到 10 之间的值，来指定 Dreamweaver 应用于图像的锐化程度。在使用“锐度”对话框调整图像的锐度时，可以预览对该图像所做的更改。
如果对该图像满意，请单击“确定”。
选择“文件”>“保存”以保存更改，或选择“编辑”>“撤消锐化”回复到原始图像。
注意: 只能在保存包含图像的页面之前撤消“锐化”命令的效果（并回复到原始图像文件）。保存页面后，对图像所做的更改即永久保存。
调整图像的亮度和对比度
“亮度/对比度”修改图像中像素的对比度或亮度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。
打开包含要调整的图像的页面，选择图像，并执行下列操作之一：
单击图像“属性”检查器中的“亮度/对比度” 按钮
。
选择“修改”>“图像”>“亮度/对比度”。
拖动亮度和对比度滑块调整设置。值的范围从 100 到 100。
单击“确定”。
创建鼠标经过图像
您可以在页面中插入鼠标经过图像。鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。
必须用以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将调整第二个图像的大小以与第一个图像的属性匹配。
鼠标经过图像自动设置为响应 onMouseOver 事件。您可以将图像设置为响应不同的事件（例如，鼠标单击）或更改鼠标经过图像。
在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。
使用以下方法之一插入鼠标经过图像：
在“插入”面板的“常用”类别中，单击“图像”按钮，然后选择“鼠标经过图像”图标。“插入”面板中显示“鼠标经过图像”图标后，您可以将该图标拖到“文档”窗口中。
选择“插入”>“图像对象”>“鼠标经过图像”。
设置选项，然后单击“确定”。
图像名称
鼠标经过图像的名称。
原始图像
页面加载时要显示的图像。在文本框中输入路径，或单击“浏览”并选择该图像。
鼠标经过图像
鼠标指针滑过原始图像时要显示的图像。输入路径或单击“浏览”选择该图像。
预载鼠标经过图像
将图像预先加载浏览器的缓存中，以便用户将鼠标指针滑过图像时不会发生延迟。
替换文本
这是一种（可选）文本，为使用只显示文本的浏览器的访问者描述图像。
按下时，前往的 URL
用户单击鼠标经过图像时要打开的文件。输入路径或单击“浏览”并选择该文件。
注意:如果您不为该图像设置链接，Dreamweaver 将在 HTML 源代码中插入一个空链接 (#)，该链接上将附加鼠标经过图像行为。如果删除空链接，鼠标经过图像将不再起作用。
选择“文件”>“在浏览器中预览”，或按 F12。
在浏览器中，将鼠标指针移过原始图像以查看鼠标经过图像。
注意: 不能在“设计”视图中看到鼠标经过图像的效果。
使用外部图像编辑器
在 Dreamweaver 中工作时，您可以在外部图像编辑器中打开选定的图像；在保存了编辑完的图像文件返回到 Dreamweaver 时，可以在“文档”窗口中看到您对图像所做的任何更改。
您可以设置 Fireworks 作为主外部编辑器。您还可以设置编辑器打开哪些文件类型，并且可以选择多个图像编辑器。例如，可以设置首选参数在您要编辑 GIF 时启动 Fireworks，而在您要编辑 JPG 或 JPEG 时启动另一个图像编辑器。
启动外部图像编辑器
执行下列操作之一：
双击要编辑的图像。
右键单击 (Windows) 或按住 Control 单击 (Macintosh) 要编辑的图像，然后选择“编辑以”>“浏览”并选择编辑器。
选择要编辑的图像，然后在属性检查
