用户指南 取消(C)

Dreamweaver 中的 Creative Cloud 库

  1. Dreamweaver 用户指南
  2. 简介
    1. 响应式网页设计基础知识
    2. Dreamweaver 中的新增功能
    3. 使用 Dreamweaver 进行 Web 开发 - 概述
    4. Dreamweaver/常见问题
    5. 键盘快捷键
    6. Dreamweaver 系统要求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 将 Dreamweaver 设置与 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 文件
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 从库提取 Web 优化的 SVG 文件
  4. Dreamweaver 工作区和视图
    1. Dreamweaver 工作区
    2. 为可视化开发优化 Dreamweaver 工作区
    3. 根据文件名或内容搜索文件 | Mac OS
  5. 设置站点
    1. 关于 Dreamweaver 站点
    2. 设置站点的本地版本
    3. 连接到发布服务器
    4. 设置测试服务器
    5. 导入和导出 Dreamweaver 站点设置
    6. 将现有网站从远程服务器下载到您的本地站点根目录
    7. Dreamweaver 中的辅助功能
    8. 高级设置
    9. 设置用于传输文件的站点偏好设置
    10. 在 Dreamweaver 中指定代理服务器设置
    11. 将 Dreamweaver 设置与 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理文件
    1. 创建和打开文件
    2. 管理文件和文件夹
    3. 从服务器获取文件和将文件上传到服务器
    4. 存回和取出文件
    5. 同步文件
    6. 比较文件的差别
    7. 遮盖 Dreamweaver 站点中的文件和文件夹
    8. 为 Dreamweaver 站点启用设计备注
    9. 防止潜在的 Gatekeeper 漏洞
  7. 布局和设计
    1. 使用可视化助理进行布局
    2. 关于使用 CSS 来设计页面布局
    3. 使用 Bootstrap 设计响应式网站
    4. 在 Dreamweaver 中创建和使用媒体查询
    5. 使用表格显示内容
    6. 颜色
    7. 使用流式网格布局的响应式设计
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解层叠样式表
    2. 使用 CSS Designer 进行页面布局
    3. 在 Dreamweaver 中使用 CSS 预处理器
    4. 如何在 Dreamweaver 中设置 CSS 样式偏好设置
    5. 在 Dreamweaver 中移动 CSS 规则
    6. 在 Dreamweaver 中将内联 CSS 转换为 CSS 规则
    7. 使用 div 标签
    8. 向背景应用渐变效果
    9. 在 Dreamweaver 中创建和编辑 CSS3 过渡效果
    10. 设置代码格式
  9. 页面内容和资源
    1. 设置页面属性
    2. 设置 CSS 标题属性和 CSS 链接属性
    3. 使用文本
    4. 查找和替换文本、标签和属性
    5. DOM 面板
    6. 在实时视图中编辑
    7. 在 Dreamweaver 中对文档编码
    8. 在“文档”窗口中选择和查看元素
    9. 在属性检查器中设置文本属性
    10. 对网页进行拼写检查
    11. 在 Dreamweaver 中使用水平线
    12. 在 Dreamweaver 中添加和修改字体组合
    13. 使用资源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中创建和管理收藏资源
    16. 在 Dreamweaver 中插入和编辑图像
    17. 添加媒体对象
    18. 在 Dreamweaver 中添加视频
    19. 插入 HTML5 视频
    20. 插入 SWF 文件
    21. 添加音频效果
    22. 在 Dreamweaver 中插入 HTML5 音频
    23. 使用库项目
    24. 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
  10. 链接与导航
    1. 关于链接与导航
    2. 链接
    3. 图像地图
    4. 链接疑难解答
  11. jQuery 构件和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和移动构件
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 对网站进行编码
    1. 关于在 Dreamweaver 中编码
    2. Dreamweaver 中的编码环境
    3. 设置编码偏好设置
    4. 自定义代码颜色
    5. 编写和编辑代码
    6. 代码提示和代码完成
    7. 折叠和展开代码
    8. 使用代码片段重用代码
    9. 使用 linting 检查代码
    10. 优化代码
    11. 在设计视图中编辑代码
    12. 使用页面的头内容
    13. 在 Dreamweaver 中插入服务器端包含
    14. 在 Dreamweaver 中使用标签库
    15. 将自定义标签导入 Dreamweaver
    16. 使用 JavaScript 行为(一般说明)
    17. 应用内置 JavaScript 行为
    18. 关于 XML 和 XSLT
    19. 在 Dreamweaver 中执行服务器端 XSL 转换
    20. 在 Dreamweaver 中执行客户端 XSL 转换
    21. 在 Dreamweaver 中为 XSLT 添加字符实体
    22. 设置代码格式
  13. 跨产品工作流
    1. 安装和使用 Dreamweaver 的扩展
    2. Dreamweaver 中的应用程序内更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文档(仅限 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 编辑 Dreamweaver 站点中的内容
    6. Dreamweaver 和 Business Catalyst 集成
    7. 创建个性化的电子邮件营销活动
  14. 模板
    1. 关于 Dreamweaver 模板
    2. 识别模板和基于模板的文档
    3. 创建 Dreamweaver 模板
    4. 在模板中创建可编辑区域
    5. 在 Dreamweaver 中创建重复区域和表格
    6. 在模板中使用可选区域
    7. 在 Dreamweaver 中定义可编辑的标签属性
    8. 如何在 Dreamweaver 中创建嵌套模板
    9. 编辑、更新和删除模板
    10. 在 Dreamweaver 中导出和导入 xml 内容
    11. 在现有文档中应用或删除模板
    12. 在 Dreamweaver 模板中编辑内容
    13. Dreamweaver 中模板标签的语法规则
    14. 设置模板区域的高亮显示偏好设置
    15. 在 Dreamweaver 中使用模板的好处
  15. 移动设备和多屏幕
    1. 创建媒体查询
    2. 更改移动设备的页面方向
    3. 使用 Dreamweaver 创建适用于移动设备的 Web 应用程序
  16. 动态网站、页面和 Web 表单
    1. 了解 Web 应用程序
    2. 设置计算机以进行应用程序开发
    3. 数据库连接疑难解答
    4. 在 Dreamweaver 中删除连接脚本
    5. 设计动态页
    6. 动态内容源概述
    7. 定义动态内容源
    8. 向页面添加动态内容
    9. 在 Dreamweaver 中更改动态内容
    10. 显示数据库记录
    11. 在 Dreamweaver 中提供动态数据和进行疑难解答
    12. 在 Dreamweaver 中添加自定义服务器行为
    13. 使用 Dreamweaver 生成表单
    14. 使用表单从用户处收集信息
    15. 在 Dreamweaver 中创建和启用 ColdFusion 表单
    16. 创建 Web 表单
    17. 增强了对表单元素的 HTML5 支持
    18. 使用 Dreamweaver 开发表单
  17. 以可视化方式生成应用程序
    1. 在 Dreamweaver 中生成主页和详细页
    2. 生成搜索页和结果页
    3. 生成记录插入页
    4. 在 Dreamweaver 中生成更新记录页
    5. 在 Dreamweaver 中生成记录删除页
    6. 在 Dreamweaver 中使用 ASP 命令修改数据库
    7. 生成注册页
    8. 生成登录页
    9. 生成只有授权用户才能访问的页面
    10. 使用 Dreamweaver 保护 Coldfusion 中的文件夹
    11. 在 Dreamweaver 中使用 ColdFusion 组件
  18. 测试、预览和发布网站
    1. 预览页面
    2. 在多个设备上预览 Dreamweaver 网页
    3. 测试 Dreamweaver 站点
  19. 疑难解答
    1. 已修复的问题
    2. 已知问题

 

 

使用 Adobe Stock 和其他 Adobe 应用程序在不同的 Dreamweaver 项目之间浏览、管理和访问创意资源。

Creative Cloud 库让您随时随地均可使用自己最喜欢的资源。您可以在多个 Creative Cloud 桌面和移动应用程序中创建或捕获图像、颜色、文本样式等,然后在其他桌面和移动应用程序中轻松访问这些资源,从而实现无缝的创意工作流程。

您可以直接在 Dreamweaver 内访问 CC 库,以在网页中重用颜色和图形。您还可以通过将图形作为“链接的”资源插入,使插入的图形与云中的图形同步更新。

继续往下读以了解有关在 Dreamweaver 中使用 CC 库的更多信息。

“CC 库”面板

“CC 库”面板(“窗口”>“CC 库”)是保存在 Creative Cloud 上的资源的主要访问点。该面板还允许您搜索 Adobe Stock 中的资源。

“CC 库”面板
“CC 库”面板

利用此面板,您可以:

  • 浏览某个特定的库以查找存储在其中的资源
  • 创建库
  • 预览所选库中的资源
  • 将资源拖动或复制到您的网页上
  • 输入关键词,例如,要在 Adobe Stock 上搜索的图像的完整名称或部分名称

快速入门

在 Dreamweaver 中定义站点

Dreamweaver 中的站点是一个文件夹,可用来存储与您的网页相关的所有图像、视频、脚本、样式表和其它文件。预先定义一个站点可帮助您轻松地将从 CC 库导入的资源保存到该站点。请确保您要将 CC 库中的资源导入到的网页也被保存到站点文件夹中。

有关创建站点的信息,请参阅设置站点的本地版本

将资源添加到 CC 库

通过确保所有必需的资源在 Creative Cloud 上可用,可帮助您在 Dreamweaver 中快速将资源导入到您的网页中。

如果要查找 Stock 图像,则 Adobe Stock 是一个不错的起始点。有关详细信息,请参阅从 Adobe Stock 获取资源

您从各种 Adobe 移动和桌面应用程序捕获或创建的图形和颜色可存储在 Creative Cloud 上并导入到您的网页中。例如,使用 Adobe Shape CC 创建的矢量图形或使用 Photoshop 处理的图像。您和您的团队还可通过 Creative Cloud 进行协作和共享资源,以便您也能重用由其他人创建的资源。

有关 Creative Cloud 库的详细信息,请参阅 Creative Cloud 库

从 Adobe Stock 获取资源

Adobe Stock 与 Creative Cloud 库紧密集成在一起。您可以通过下列方法之一搜索图像并将其添加到您的任意一个 CC 库中:

  • 直接从 Adobe Stock 网站。
  • 使用 Dreamweaver 中的“CC 库”面板进行搜索。
  • 使用其他 Adobe 应用程序(如 Photoshop 和 Illustrator)中的“CC 库”面板进行搜索。

将图像添加到 CC 库后,您可以按照重用 CC 库中的图形主题中的说明来在网页中使用这些图像。

如果您无法确定是否立即购买 Stock 图像,则只能将带有水印的 Stock 图像(预览图像)添加到您的库中并使用这些图像作为占位符。准备好购买这些图像时,可在 Dreamweaver 和其他应用程序的“CC 库”面板中购买,也可直接从 Adobe Stock 网站购买。 

使用“CC 库”面板在 Adobe Stock 上搜索图像
使用“CC 库”面板在 Adobe Stock 上搜索图像

当您为图像授权时,在打开的文档中带有水印的资源的所有实例将会更新为高分辨率版本的授权图像。

重用在 CC 库中保存的颜色和颜色主题

在实时视图中重用颜色和颜色主题

您可以通过 Illustrator、Photoshop 或 Adobe Color CC 等应用程序将颜色和颜色主题保存在 Creative Cloud 库中。您可以使用 Dreamweaver 中的“CC 库”面板将这些颜色和颜色主题导入到您的网页中,步骤如下:

  1. 在“CC 库”面板中,执行以下操作之一:

    • 单击所需的颜色或颜色主题。颜色或颜色主题的 HEX 值将会复制到剪贴板中。
    • 右键单击所需的颜色或颜色主题,然后单击“复制 RGB”或“复制 HEX”。 
  2. 在代码视图或 CSS 设计器中粘贴颜色值。

在代码视图中重用颜色

在 Creative Cloud 上保存的颜色在代码视图中作为代码提示提供。当您在代码视图中编写代码时,可以从代码提示选择所需的颜色。代码提示中与颜色相邻的 Creative Cloud 图标指示这些颜色存储在 Creative Cloud 上。

作为代码提示显示的 Creative Cloud 库中的颜色
作为代码提示显示的 Creative Cloud 库中的颜色

代码提示从“CC 库”面板中当前打开的库中选取颜色。在上面的图像中,库“My Library”中的颜色作为代码提示提供。要获取另一个 Creative Cloud 库中的颜色作为代码提示,请在“CC 库”面板中打开所需的库,然后在代码视图中继续您的工作。

重用在 CC 库中保存的图形

从 2021 年 11 月 16 日起,Dreamweaver 已停用从 Illustrator 资源提取 SVG 的功能。我们提倡按此解决方法启用图像格式选项,并将 Illustrator (.ai) 资源转换为 PNG 32/PNG 24/PNG 8/JPEG 格式。或者,用户可从 Illustrator 应用程序中将 Illustrator 资源导出为 SVG 格式

您可以使用 Adobe 桌面和移动应用程序(如 Photoshop、Illustrator、Adobe Shape CC 或 Adobe Sketch CC)将创建的图形保存在 Creative Cloud 库中。“CC 库”面板可帮助您将图形插入到实时视图中,代码提示可帮助您将图形直接插入到您的代码中。

您可采用以下形式插入 CC 库中的图形:

  • 链接的资源:将图形作为链接的资源插入时,一个小的云图标将显示在实时视图中资源的右下角。此图标指示资源已链接到云上的原始资源。该云图标还将显示在“资源”面板中的资源旁边。
  • 未链接的资源:可以在网页中插入作为本地副本的资源。在实时视图中,右键单击“CC 库”面板中所需的资源,然后选择“插入未链接的”。插入图形的一个副本时,该资源将会复制到您的本地计算机,而不会链接到云上的原始资源。这意味着对云上资源的任何更改或更新将不反映在 Dreamweaver 中。

您还可以批量下载资源并保存在计算机上以供稍后使用。

在实时视图中重用图形

  1. 执行以下操作之一:

    1. 将图形从“CC 库”面板拖到实时视图中您的页面。

      注意:将图形从“CC 库”面板拖到“实时”视图时,图形会作为“链接的”图形插入(如果已定义站点)。

      默认情况下,Illustrator 文件将作为 Web 优化的 SVG 文件插入。如果您要自定义 SVG 文件的属性,则可以在 options.json 文件中编辑偏好设置。有关更多信息,请参阅从 CC 库提取 Web 优化的 SVG 文件

    2. 右键单击“CC 库”面板中所需的资源,然后选择:

      • “插入链接的”以将图形作为链接的资源插入。这意味着,该资源将保持对云上相应资源的引用。对云上资源的任何更改将反映在 Dreamweaver 的链接资源中。
      • “插入未链接的”以将图形作为未链接的资源插入。
  2. 在出现的“取样”对话框中,指定图像的文件名和尺寸。有关详细信息,请参阅指定图形的取样选项

在代码视图中重用图形

在 Creative Cloud 库中保存的图形在代码视图中将作为代码提示提供。首先,通过在“CC 库”面板中选择所需的库以将其打开。然后,当您编写代码时,切换到代码视图并从代码提示中选择所需的图形。代码提示中与图形相邻的 Creative Cloud 图标指示该图形存储在 Creative Cloud 上。

CC 库中作为代码提示显示的图形
CC 库中作为代码提示显示的图形

注意:当您使用代码提示插入图形时,图形会作为“未链接的”图形插入。

要获取另一个 Creative Cloud 库中的颜色作为代码提示,请在“CC 库”面板中打开所需的库,然后在代码视图中继续您的工作。

指定图形的取样选项

“高度”和“宽度”框使用 Dreamweaver 图像优化引擎对资源重新取样。您还可以选择放置资源时要采用的格式类型。“已启用的云”图标指示该资源将作为“链接的资源”置入。指定文件名和取样选项后,按 Enter 以插入资源。

对图像进行重新取样
对图像进行重新取样

备注:

  • “SVG”选项仅适用于 Illustrator (.ai) 文件并被设置为此类文件的默认选项。您可以使用“重新取样”对话框中的下拉列表,将此类文件的格式更改为 JPEG。
  • JPEG 文件只能作为 JPEG 文件插入,因此没有适用于此类文件的其他格式选项。

编辑图形

使用“CC 库”面板,您可以快速打开并编辑其本机应用程序中的 InDesign 和 Illustrator 资源。为此,请右键单击“CC 库”面板中的资源,然后单击“编辑”。

确保本机应用程序(InDesign 或 Illustrator)与您正在使用的 Dreamweaver 实例安装在同一计算机上。此外,请确保您已将最新更新安装到 Creative Cloud 的这些应用程序中。

取消链接、重新取样和重命名链接的图形

您可以使用以下选项之一,为从 CC 库中导入到您的网页中的图像更改名称、大小或重新取样:

  • 在“实时”视图中单击该资源,然后单击云图标。 
  • 右键单击所需的资源,然后单击“链接的资源”选项。
  • 双击“资源”面板中与资源名称相邻的云图标。

“重新取样”对话框随即显示,以便让您更改所需的属性。要取消资源与其在 CC 库中的源的链接,请单击“重新取样”对话框中的云图标。

在您取消链接某个资源之后,对 Creative Cloud 上的源文件的任何更改都将不会反映在您的网页中的图像中。

下载图形

您可以成批从 CC 库将所需的图形作为链接的资源下载,以后再在您的项目中插入它们。在您的项目中使用这些资源时,它们仍将保持相应库项的链接。 

  • 链接的:要将图形作为链接的资源下载,请右键单击“CC 库”面板中的资源,然后选择“下载链接对象”。将显示包含文件名和重新取样选项的弹出窗口。通过指定文件名和取样选项,然后按 Enter 来将资源保存在站点文件夹中。
  • 未链接的:要将图形作为未链接的资源下载,请右键单击“CC 库”面板中所需的资源,然后选择“下载副本”。将显示包含文件名和重新取样选项的弹出窗口。通过指定文件名和取样选项,然后按 Enter 来将资源保存在站点文件夹中。

更快、更轻松地获得帮助

新用户?