在 Dreamweaver（设计视图或代码视图）中，将插入点放置在页面上要插入图像的位置。
上次更新日期：
2021年4月27日
了解 Photoshop 如何与 Dreamweaver 集成。 在 Photoshop — Dreamweaver 工作流程中使用智能对象。
关于 Photoshop 集成
注释
Photoshop 集成工作流程在 Dreamweaver 21.0 及更高版本中已停用。
您可以将 Photoshop 图像文件（PSD 格式）插入 Dreamweaver 中的网页，并让 Dreamweaver 将其优化为适合 web 的图像（GIF、JPEG 和 PNG 格式）。执行此操作时，Dreamweaver 会将图像作为智能对象插入，并与原始 PSD 文件保持实时连接。
您还可以将多图层或多切片 Photoshop 图像的全部或部分粘贴到 Dreamweaver 中的网页。 但是，从 Photoshop 复制和粘贴时，不会与原始文件保持实时连接。要更新图像，请在 Photoshop 中进行更改，然后重新复制和粘贴。
注释
如果您经常使用此集成功能，可能需要将 Photoshop 文件存储在 Dreamweaver 站点中以便更轻松地访问。 如果这样做，请务必对其进行隐藏以避免暴露原始资源，以及避免本地站点和远程服务器之间不必要的传输。
有关 Photoshop 与 Dreamweaver 集成的教程，请参阅将 Dreamweaver 与 Photoshop 集成。
关于智能对象和 Photoshop-Dreamweaver 工作流程
在 Dreamweaver 中处理 Photoshop 文件有两个主要工作流程：复制/粘贴工作流程和智能对象工作流程。
复制/粘贴工作流程
复制/粘贴工作流程允许您选择 Photoshop 文件中的切片或图层，然后使用 Dreamweaver 将其作为适合 web 的图像插入。但是，如果您稍后想要更新内容，则必须打开原始 Photoshop 文件，进行更改，将切片或图层重新复制到剪贴板，然后将更新的切片或图层粘贴到 Dreamweaver 中。 仅当您想要将 Photoshop 文件的一部分（例如设计稿的某个部分）作为图像插入网页时，才建议使用此工作流程。
智能对象工作流程
对于完整的 Photoshop 文件，Adobe 推荐采用智能对象工作流程。 Dreamweaver 中的智能对象是放置在 web 页面上的图像资源，与原始 Photoshop (PSD) 文件保持实时连接。 在 Dreamweaver 设计视图中，智能对象由图像左上角的图标表示。
当 web 图像（即 Dreamweaver 页面上的图像）与原始 Photoshop 文件不同步时，Dreamweaver 会检测到原始文件已更新，并以红色显示智能对象图标的其中一个箭头。 当您在设计视图中选择 web 图像并单击属性检查器中的"从原始文件更新"按钮时，图像会自动更新，反映您对原始 Photoshop 文件所做的任何更改。
使用智能对象工作流程时，您无需打开 Photoshop 即可更新 web 图像。此外，您在 Dreamweaver 中对智能对象所做的任何更新都是非破坏性的。 也就是说，您可以更改页面上图像的 web 版本，同时保持原始 Photoshop 图像完整无损。
您也可以在不选择设计视图中的 web 图像的情况下更新智能对象。 资源面板允许您更新所有智能对象，包括在文档窗口中可能无法选择的图像（例如 CSS 背景图像）。
图像优化设置
对于复制/粘贴工作流程和智能对象工作流程，您可以在“图像优化”对话框中指定其优化设置。 此对话框能让您指定文件格式和图像质量。 如果您是复制切片或图层，或者是首次作为智能对象插入 Photoshop 文件，Dreamweaver 将会显示此对话框以便您可以轻松地创建 Web 图像。
如果您将更新复制并粘贴到一个特定的切片或图层，Dreameaver 会记住原始设置并使用这些设置重新创建 Web 图像。 同样，在使用属性检查器更新某一智能对象时，Dreamweaver 将使用您首次插入图像时所使用的相同设置。 通过在“设计”视图中选择 Web 图像，然后在属性检查器中单击“编辑图像设置”按钮，您可以随时更改图像的设置。
存储 Photoshop 文件
如果您已经插入了 Web 图像，并且尚未在您的 Dreamweaver 站点存储原始 Photoshop 文件，Dreamweaver 会将原始文件的路径视为一个本地绝对文件路径。 （复制/粘贴和智能对象工作流程均是如此。） 例如，如果您的 Dreamweaver 站点的路径为 C:\Sites\mySite，并且您的 Photoshop 文件存储在 C:\Images\Photoshop 中，Dreameaver 不会将原始资源视为名为 mySite 的站点的一部分。 如果您想要与其他团队成员共享该 Photoshop 文件，这将导致出现问题，因为 Dreamweaver 会将该文件视为仅在特定的本地硬盘驱动器上可用。
但如果您将该 Photoshop 文件存储在您的站点内，Dreamweaver 将创建一个指向该文件的站点相对路径。 假如您还提供原始文件以供下载的话，则能够访问该站点的所有用户都可以建立指向该文件的正确路径。
有关使用 Photoshop 进行往返编辑的视频教程，请参阅使用 Photoshop 进行往返编辑。
创建智能对象
当您将 Photoshop 图像（PSD 文件）插入页面时，Dreamweaver 会创建一个智能对象。智能对象是一种 Web 就绪图像，可与原始 Photoshop 图像保持实时连接。每当您在 Photoshop 中更新原始图像时，Dreamweaver 都会为您提供一个选项，只需单击按钮即可在 Dreamweaver 中更新图像。
选择“插入”>“图像”。
注释
如果您将 Photoshop 文件存储在网站中，也可以从"文件"面板将 PSD 文件拖动到页面上。如果执行此操作，您将跳过下一步。
通过单击“浏览”按钮，然后浏览到 Photoshop PSD 图像文件，可以在“选择图像源文件”对话框中定位到该图像文件。
在显示的“图像优化”对话框中，根据需要调整优化设置，然后单击“确定”。
将适用于 web 的图像文件保存到网站根文件夹内的某个位置。
Dreamweaver 基于选定的优化设置创建智能对象，并在您的页面上放置图像的 web 就绪版本。智能对象与原始图像保持实时连接，并在两者不同步时通知您。
注释
如果稍后决定要更改放置在页面中的图像的优化设置，则可以选择该图像，单击属性检查器中的“编辑图像设置”按钮，再在“图像优化”对话框中进行所需的更改。 在“图像优化”对话框中进行的更改是以不破坏图像的方式应用的。 Dreamweaver 从不修改原始 Photoshop 文件，并且经常根据原始数据重建 Web 图像。
有关使用 Photoshop 进行往返编辑的视频教程，请参阅使用 Photoshop 进行往返编辑。
更新智能对象
如果您更改智能对象关联的 Photoshop 文件，Dreamweaver 会通知您 web 就绪图像与原始文件不同步。在 Dreamweaver 中，智能对象由图像左上角的图标表示。当 Dreamweaver 中的 web 就绪图像与原始 Photoshop 文件同步时，图标中的两个箭头都是绿色的。当 web 就绪图像与原始 Photoshop 文件不同步时，图标的箭头会变为红色。
若要使用原始 Photoshop 文件的当前内容更新智能对象，请在“文档”窗口中选择智能对象，然后单击属性检查器中的“从源文件更新”按钮。
注释
您无需安装 Photoshop 即可从 Dreamweaver 进行更新。
更新多个智能对象
您可以使用"资源"面板一次更新多个智能对象。Assets 面板还允许您查看在文档窗口中可能无法选择的智能对象（例如，CSS 背景图像）。
在"文件"面板中，单击"资产"选项卡以查看\n地点资产。
确保选择了“图像”视图。 如果未选择该视图，请单击“图像”按钮。
在“资源”面板中选择每个图像资源。 选择智能对象时，您会在图像的左上角看到智能对象图标。常规图像没有此图标。
对于您想要更新的每个智能对象，右键单击\n文件名并选择"从原始文件更新"。您还可以按住 Control 键并单击以选择多个文件名并同时更新它们。
注释
您无需安装 Photoshop 即可从 Dreamweaver 进行\n更新。
调整智能对象大小
您可以像调整任何其他图像一样在文档窗口中调整智能对象的大小。
在"文档"窗口中选择智能对象\n并拖动调整大小手柄来调整图像大小。您可以通过在拖动时按住 Shift 键来保持宽度和高度比例。
单击属性检查器中的“从源文件更新”按钮。
当您更新智能对象时，web 图像会根据\n原始文件的当前内容和原始优化设置\n以新尺寸进行无损\n重新渲染。
编辑智能对象的原始\nPhotoshop 文件
在您的 Dreamweaver 页面上创建智能对象后，您可以在 Photoshop 中编辑原始\n PSD 文件。在 Photoshop 中进行更改后，\n您可以轻松更新 Dreamweaver 中的 web 图像。
注释
确保\n您已将 Photoshop 设置为主要外部图像\n编辑器。
在“文档”窗口中选择智能对象。
在属性检查器中单击“编辑”按钮。
在 Photoshop 中进行更改并保存新 PSD 文件。
在 Dreamweaver 中，再次选择该智能对象并单击“从源文件更新”按钮。
注释
如果在 Photoshop 中更改了图像的大小，则需要在 Dreamweaver 中重置 Web 图像的大小。 Dreamweaver 仅根据原始 Photoshop 文件的内容（而不是其大小）更新智能对象。 若要使 Web 图像的大小和原始 Photoshop 文件的大小同步，请右键单击该图像并选择“重设为原始大小”。
智能对象的状态
下表列出了智能对象的各种状态。
|
智能对象的状态 |
说明 |
推荐的操作 |
|
同步的图像 |
Web 图像与原始 Photoshop 文件的当前内容保持同步。 HTML 代码中的宽度和高度属性与 Web 图像的尺寸相匹配。 |
无 |
|
修改的原始资源 |
在 Dreamweaver 中创建 Web 图像后，已对原始 Photoshop 文件进行了修改。 |
使用属性检查器中的“从源文件更新”按钮来同步这两个图像。 |
|
Web 图像的尺寸与所选的 HTML 宽度和高度不同 |
HTML 代码中的宽度和高度属性与 Dreamweaver 在插入后所创建的 Web 图像的宽度和高度不同。 如果 Web 图像的尺寸小于所选的 HTML 宽度和高度值，则 Web 图像可以像素化显示。 |
使用属性检查器中的“从源文件更新”按钮可根据原始 Photoshop 文件重新创建 Web 图像。 Dreamweaver 在重新创建图像时，使用的是当前指定的 HTML 宽度和高度。 |
|
原始资源的尺寸对于所选的 HTML 宽度和高度来说太小 |
HTML 代码中的宽度和高度属性大于原始 Photoshop 文件的宽度和高度。 Web 图像可以像素化显示。 |
请勿创建尺寸大于原始 Photoshop 文件尺寸的 Web 图像。 |
|
未找到原始资源 |
Dreamweaver 找不到在属性检查器的“原始”文本框中指定的原始 Photoshop 文件。 |
在属性检查器的“原始”文本框中纠正文件路径，或将 Photoshop 文件移动到当前指定的位置。 |
从 Photoshop 复制和粘贴选区
您可以复制全部或部分 Photoshop 图像，并将选区粘贴到您的 Dreamweaver 页面中，作为适用于 web 的图像。您可以复制单个图层或一组图层以用于图像的选定区域，也可以复制图像的切片。但是，当您执行此操作时，Dreamweaver 不会创建智能对象。
注释
如果粘贴的图像无法使用“从源文件更新”功能，那么您仍然可以打开并编辑原始 Photoshop 文件，方法是：选择粘贴的图像并单击属性检查器中的“编辑”按钮。
在 Photoshop 中，请执行下列操作之一：
- 通过使用选框工具选择要复制的部分，然后选择“编辑”>“复制”，复制整个一层或一层的局部。 这种情况下只会将选区的活动层复制到剪贴板中。 如果您采用基于层的效果，则不会复制选择的部分。
- 通过使用选框工具选择要复制的部分，然后选择“编辑”>“合并拷贝”，复制并合并多层。 这会拼合选区的所有活动层和较低层，然后将其复制到剪贴板中。 如果您将基于层的效果与这些层中的任何层相关联，则会复制选择的部分。
- 通过使用“切片选择”工具选择切片，然后选择“编辑”>“复制”，复制切片。 这会拼合切片的所有活动层和较低层，然后将其复制到剪贴板中。
注释
您可以选择“选择”>“全部”来快速选择要复制的整个图像。
在 Dreamweaver（设计视图或代码视图）中，将插入点放在您希望插入图像的页面位置。
选择“编辑”>“粘贴”。
在“图像优化”对话框中，根据需要调整优化设置，然后单击“确定”。
将适用于 web 的图像文件保存到网站根文件夹内的某个位置。
Dreamweaver 会根据优化设置定义图像，然后将可用于 Web 版本的图像放置在页面中。 设计备注中会保存关于图像的信息（如原始 PSD 源文件的位置），不管您是否对站点启用了设计备注。 通过设计备注，您可以重新使用 Dreamweaver 来编辑原始 Photoshop 文件。
编辑粘贴的图像
在您将 Photoshop 图像粘贴到 Dreamweaver 页面后，您可以在 Photoshop 中编辑原始 PSD 文件。使用复制/粘贴工作流程时，Adobe 建议您始终对原始 PSD 文件进行编辑（而不是对适用于 web 的图像本身进行编辑），然后重新粘贴以维护单一来源。
注释
确保您已将 Photoshop 设置为要编辑的文件类型的主要外部图像编辑器。
在 Dreamweaver 中，选择一个最初在 Photoshop 中创建的适用于 web 的图像，然后执行以下操作之一：
- 在图像属性检查器中单击“编辑”按钮。
- 双击文件时按住 Control（Windows）或 Command (Macintosh)。
- 右键单击（Windows）或按住 Control 单击（Macintosh）图像，从上下文菜单中选择"编辑原件使用"，然后选择 Photoshop。
注释
前提是已将 Photoshop 设置为 PSD 图像文件的主要外部图像编辑器。您可能还希望将 Photoshop 设置为 JPEG、GIF 和 PNG 文件类型的默认编辑器。
在 Photoshop 中编辑文件。
返回到 Dreamweaver 并将更新的图像或选区粘贴到您的页面中。
如果您想随时重新优化该图像，则可以选择该图像并单击属性检查器中的“编辑图像设置”按钮。
设置“图像优化”对话框选项
从 Photoshop 中创建智能对象或粘贴选定内容时，Dreamweaver 将显示“图像优化”对话框。 （在选择任何其他类别的图像并单击属性检查器中的“编辑图像设置”按钮时，Dreamweaver 也为这些图像显示此对话框。） 使用此对话框，您可以使用正确的颜色组合、压缩和质量来定义和预览可用于 Web 的图像的设置。
可用于 Web 的图像的特征是：指在所有主流 Web 浏览器中都可以显示，且查看者使用任何系统或浏览时显示效果都相同。 通常，这些设置需要我们在品质和文件大小间进行权衡。
注释
无论选择了什么设置都只影响图像文件的导入版本。 通常不会影响原始 Photoshop PSD 或 Fireworks PNG 文件。
预设
选择一个最符合您的需求的“预设”。 图像的文件大小会根据您选择的预设而变。 后台会显示应用了设置的图像即时预览。
例如，对于必须用高清晰度显示的图像，请选择“用于照片的 PNG24（锐利细节）”。如果您要插入的图案将用作页面背景，请选择 GIF 用于背景图像（图案）。
选择预设时，会显示预设的可配置选项。如果您希望进一步自定义优化设置，请修改这些选项的值。
