当前位置：首页> 正文

Dreamweaver CC教程：插入、编辑、替换图像和调整大小

了解如何在 Dreamweaver 中插入、编辑、替换图像和调整其大小。
图像可以通过为网站访问者提供额外的上下文，构成网站的组成部分。尽管存在多种图形文件格式，但在网页中通常应使用 GIF、JPEG 和 PNG 文件格式。GIF 和 JPEG 文件格式与网页兼容，且可在大多数浏览器中查看。下列内容介绍了与这些文件格式相关的详细信息：
GIF（图形交换格式）- GIF 文件最多可使用 256 种颜色，最适合显示色调不连续的图像。GIF 文件非常适合显示具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
JPEG（联合图像专家组）- JPEG 文件格式更适合用于摄影或色调连续的图像，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。您可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。
PNG（可移植网络图形）- PNG 文件格式是一种可以替代 GIF 格式且无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及 alpha 通道透明度的支持。PNG 文件可保留原始层、矢量、颜色和效果信息（例如投影）。此外，所有元素均始终完全可供编辑。文件必须具有 .webp 文件扩展名才能被 Dreamweaver 识别为 PNG 文件。
Dreamweaver 不是 WYSIWYG（所见即所得）编辑器。也就是说，您可以使用 Dreamweaver 添加或插入图像，但您不能使用界面移动或放置图像。
如需在布局中移动图像，您必须使用以您需要的方式显示 HTML 内容的 CSS。如需了解如何使用代码来处理图像，您可以参考有关 HTML 和 CSS 的基本教程。您还可以查看有关在 Dreamweaver 中处理图像的教程。
如需了解如何使用 Dreamweaver 应用程序来插入和使用图像，请参阅以下各节。

插入图像
将图像插入 Dreamweaver 文档时，HTML 源代码中会生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像不在当前站点之中，Dreamweaver 会询问您是否要将此文件复制到当前站点中。
Dreamweaver 还允许您动态地插入图像。动态图像指那些经常变化的图像。例如，可从候选横幅列表中随机选择一个横幅的广告横幅轮播系统。请求页面时，系统会动态显示所选横幅的图像。
您还可以利用实时参考线和元素快速视图将任意图层从“Extract”面板拖放到 Dreamweaver 实时视图中的任意位置。借助“Extract”面板，您可以上传 PSD 文件，然后直接将 PSD 文件中的任意图层拖放到 Dreamweaver 文档中。
插入图像后，您可以设置图像标签和辅助功能属性，屏幕阅读器会为有视觉障碍的用户朗读辅助功能属性。您可以在 HTML 代码中编辑这些属性。
有关从 PSD 作品中提取图像的信息，请参阅从 PSD 文件中提取图像。
1、在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行下列操作之一：

在“插入”面板中，从下拉列表中选择 HTML。单击“图像”。双击或将该图标拖动到文档窗口中（或者如果您正在使用代码处理工作，则可以拖动到“代码”视图窗口中）。选择“插入”>“图像”。将图像从“资源”面板（“窗口”>“资源”）拖到“文档”窗口中的所需位置；然后跳到步骤 3。将图像从“文件”面板拖动到“文档”窗口中的所需位置；然后跳到步骤 3。将图像从桌面拖到“文档”窗口中的所需位置；然后跳到步骤 3。在实时视图中，从“Extract”面板或“图层”选项卡中拖动图像。根据实时参考线将该元素放到某一元素的顶部、底部、右侧或左侧。或者，您可以单击 </> 并使用元素快速视图，将元素放置到文档结构中的精确位置。

2、浏览并选择您要插入的图像或内容源。
如果您正在处理一个未保存的文档，Dreamweaver 将生成一个对图像文件的 file:// 引用。将文档保存在站点中的任意位置后，Dreamweaver 将该引用转换为文档相对路径。
注意:
插入图像时，您可以使用位于远程服务器上的图像的绝对路径。也就是，在本地硬盘上不可用的图像。不过，如果您在工作时遇到性能问题，那么您可以通过取消选择“命令”>“显示外部文件”，禁止在“设计”视图中查看图像。
3、单击“确定”。

设置图像属性
图像属性检查器允许您设置图像的属性。如果您并未看到所有的图像属性，请单击位于右下角的展开箭头。
属性检查器中的图像属性。
1、如需查看所选图像的属性检查器，请单击图像并选择“窗口”>“属性”。
2、在缩略图下面的文本框中，输入一个名称。在使用 Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时，您可以使用该名称来引用图像。
3、设置图像的任一选项。
宽和高
图像的宽度和高度，以像素表示。在页面中插入图像时，Dreamweaver 会自动用图像的原始尺寸更新这些文本框。

如果您设置的“宽”和“高”值与图像的实际宽度和高度不相符，则该图像将无法在浏览器中正确显示。（如需恢复原始值，请单击“宽”和“高”文本框标签，或单击“宽”和“高”文本框右侧的“重设图像大小”按钮。）
注意:
您可以通过更改这些值来缩放该图像实例的显示大小。不过，该项更改不会缩短下载时间，因为浏览器会先下载所有图像数据，然后再缩放图像。如需缩短下载时间并确保所有图像实例均以相同大小显示，请使用图像编辑应用程序缩放图像。
源文件
指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。
链接
指定图像的超链接。将“指向文件”图标拖动到“文件”面板中的某个文件。单击文件夹图标，浏览到站点上的某个文档，或手动输入 URL。
替换
指定在只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替换文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。
地图名称和热点工具
允许您标注和创建客户端图像地图。
目标可指定链接的页面加载到的框架或窗口。当图像未链接到其他文件时，此选项不可用。当前框架集中所有框架的名称都显示在“目标”列表中。也可选用下列保留目标名：

_blank 会将链接的文件加载到新的未命名浏览器窗口中。 _new 会将链接的文件加载到一个新的浏览器窗口中。 _parent 会将链接的文件加载到含有链接的框架的父框架集或窗口中。如果未嵌套包含链接的框架，则链接的文件会加载到整个浏览器窗口中。 _self 会将链接的文件加载到链接所在的框架或窗口中。此目标是默认目标。您不需要明确地指定此值。 _top 会将链接的文件加载到整个浏览器窗口中，从而删除所有框架。

编辑
启动您在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。
编辑图像设置
打开“图像优化”对话框，您可以优化图像。
从原始文件更新
当 Dreamweaver 页面上的图像与原始的 Photoshop 文件不同步时，Dreamweaver 会检测出原始文件已经更新。应用程序会以红色显示智能对象图标的一个箭头。当您在“设计”视图中选择 Web 图像，然后在属性检查器中单击“从原始文件更新”按钮后，图像会自动更新。经过更新的图像会反映出您对原始 Photoshop 文件所做的更改。
裁切
裁切图像的大小，从所选图像中删除不需要的区域。
重新取样
对已调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质。
亮度和对比度
调整图像的亮度和对比度设置。
锐化
调整图像的锐度。
注意:
您还可以通过快速属性检查器在“实时”视图中编辑图像属性。

在代码中编辑图像辅助功能属性
如果为图像插入了辅助功能属性，则可以在 HTML 代码中编辑这些值。
1、在“文档”窗口中，单击图像或选择代码中的图像标签。
2、执行下列操作之一，在“替换文本”框中，为图像输入一个名称或一段简短描述，不得超过 50 个字符。屏幕阅读器会朗读您在此处输入的信息。

在代码视图中编辑相应的图像属性。通过快速属性检查器在“实时”视图中编辑图像属性。编辑属性检查器中的“替换”值。

展开全文阅读