使用库项目

  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. 已知问题

 

 

使用本主题了解如何在 Dreamweaver 中创建库项目以及在文档中插入和编辑库项目。

是一种特殊的 Dreamweaver 文件,其中包含可放置到网页中的一组单个资源或资源副本。库中的这些资源称为库项目。可在库中存储的项目包括图像、表格、声音和使用 Adobe Flash 创建的文件。每当编辑某个库项目时,可以自动更新所有使用该项目的页面。

例如,假设您正在为某公司创建一个大型站点,公司希望在站点的每个页面上显示一个广告语。您可以创建一个包含该广告语的库项目,然后在每个页面上使用这个库项目。如果需要更改广告语,则可以更改该库项目,这样可以自动更新所有使用这个项目的页面。

Dreamweaver 将库项目存储在每个站点的本地根文件夹下的 Library 文件夹中。每个站点都有自己的库。

可以从文档的 body 部分中的任意元素创建库项目,这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像等。

对于链接项(如图像),库只存储对该项的引用。原始文件必须保留在指定的位置,这样才能使库项目正确工作。

不过,在库项目中存储图像也很有用。例如,可以在库项目中存储一个完整的 img 标签,这将允许您方便地在整个站点中更改图像的 alt 文本,甚至更改它的 src 属性。(但是,除非还使用图像编辑器更改图像的实际尺寸,否则请勿使用此方法更改图像的 widthheight 属性。)

注意:

如果库项目中包含链接,则链接可能无法在新站点中工作。而且,库项目中的图像也不会被复制到新站点中。

使用库项目时,Dreamweaver 将在网页中插入该项目的链接,而不是项目本身。也就是说,Dreamweaver 向文档中插入该项目的 HTML 源代码副本,并添加一个包含对原始外部项目的引用的 HTML 注释。自动更新过程就是通过这个外部引用来实现的。

当您创建的库项目内含附加有 Dreamweaver 行为的元素时,Dreamweaver 将该元素及其事件处理函数(指定哪个事件触发操作的属性,如 onClickonLoadonMouseOver,以及当事件发生时要调用哪个操作)复制到库项目文件中。Dreamweaver 不会将关联的 JavaScript 函数复制到库项目中。相反,在将库项目插入文档时,Dreamweaver 会自动将相应的 JavaScript 函数插入该文档的 head 部分(如果此处尚无这些函数)。

注意:

如果手工编写 JavaScript 代码(也就是说,如果不使用 Dreamweaver 行为进行创建),则使用“调用 JavaScript”行为执行代码可以将代码包含在库项目中。如果不使用 Dreamweaver 行为来执行代码,代码将不会保留在库项目中。

对于编辑库项目中的行为,有一些特殊的要求。库项目不能包含样式表,因为这些元素的代码包含在 head 部分。

基于选定内容创建库项目

  1. 在“文档”窗口中,切换到“设计”视图,然后选择一部分文档,另存为库项目。

  2. 选择“工具”>“库”>“增加对象到库”。

  3. 为新的库项目键入一个名称,然后按 Enter (Windows) 或 Return (Macintosh)。

    Dreamweaver 将每个库项目作为一个单独的文件(文件扩展名为 .lbi)保存在站点本地根文件夹下的 Library 文件夹中。

创建空白库项目

  1. 确保在“文档”窗口中没有选择任何内容。

    如果选择了某些内容,它们将被放入新的库项目中。

  2. 在“资源”面板中,选择“库”类别。

  3. 单击面板底部的“新建库项目”按钮 。

  4. 在项目仍然处于选定状态时,为该项目输入一个名称,然后按 Enter (Windows) 或 Return (Macintosh)。

在文档中插入库项目

当向页面添加库项目时,实际内容将随该库项目的引用一起插入到文档中。

  1. 在“文档”窗口中设置插入点。
  2. 在“资源”面板中,选择“库”类别。

  3. 执行下列操作之一:
    • 将一个库项目从“资源”面板拖动到“文档”窗口中。
    注意:

    若要在文档中插入库项目的内容而不包括对该项目的引用,请在从“资源”面板向外拖动该项目时按 Ctrl (Windows) 或 Option (Macintosh)。如果用这种方法插入项目,则可以在文档中编辑该项目,但当更新使用该库项目的页面时,文档不会随之更新。

    • 选择一个库项目,然后单击“插入”。

编辑库项目和更新文档

当编辑库项目时,可以更新使用该项目的所有文档。如果选择不更新,文档将保持与库项目的关联;可以在以后更新文档。

可以重命名项目来断开它与文档或模板的连接,可以从站点的库中删除项目,还可以重新创建丢失的库项目。

编辑库项目

  1. 在“资源”面板中,选择“库”类别。

  2. 选择库项目。
  3. 单击“编辑”按钮或双击该库项目。

    Dreamweaver 将打开一个与“文档”窗口类似的新窗口用于编辑该库项目。灰色背景表示您正在编辑库项目,而不是在编辑文档。

  4. 进行相应的更改,然后保存。
  5. 指定是否更新本地站点中使用该库项目的文档。选择“更新”可立即进行更新。如果选择“不更新”,则不会更新文档,直到您选择“工具”>“库”>“更新当前页”或“更新页面”。

更新当前文档以使用所有库项目的当前版本

  1. 选择“工具”>“库”>“更新当前页”。

更新整个站点或所有使用特定库项目的文档

  1. 选择“工具”>“库”>“更新页面”。

  2. 在“查找范围”弹出菜单中,指定要更新的内容:
    • 若要更新选定站点中的所有页面,以使用所有库项目的当前版本,请选择“整个站点”,然后从相邻的弹出菜单中选择该站点的名称。

    • 若要更新当前站点中使用该库项目的所有页面,请选择“文件使用”,然后从相邻的弹出菜单中选择库项目的名称。

  3. 请确保在“更新”选项中选择了“库项目”。
    注意:

    若要同时更新模板,请将“模板”也选定。

  4. 单击“开始”。

    Dreamweaver 将按照指示更新文件。如果选定了“显示记录”选项,Dreamweaver 会生成一个报告,指明文件的更新是否成功,报告中还会包括其它一些信息。

重命名库项目

  1. 在“资源”面板中,选择“库”类别。

  2. 选择库项目,暂停,然后再次单击。(不要双击资源名称,双击操作将打开资源进行编辑。)
  3. 输入新的名称。
  4. 单击别处或者按 Enter (Windows) 或 Return (Macintosh)。
  5. 选择“更新”或“不更新”,指定是否更新使用该项目的文档。

从库中删除库项目

当删除库项目时,Dreamweaver 将从库中删除该项目,但不会更改使用该项目的任何文档的内容。

  1. 在“资源”面板中,选择“库”类别。

  2. 选择库项目。
  3. 单击“删除”按钮或按 Delete,然后确认要删除该项目。
    注意:

    如果删除了某个库项目,则不能使用“撤消”来找回该项目。不过,您可以重新创建该项目。

重新创建丢失或已删除的库项目

  1. 在某个文档中选择该项目的一个实例。
  2. 在属性检查器(“窗口”>“属性”)中单击“重新创建”按钮。

自定义库项目的标记色彩

您可以通过设置“标记色彩”首选参数来自定义库项目的高亮颜色,以及指定显示或隐藏标记色彩。

更改库项目的高亮颜色

  1. 选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
  2. 从“首选参数”对话框左侧的列表中选择“标记色彩”类别。
  3. 单击“库项目”颜色框,然后使用颜色选择器来选择一种高亮颜色(或在文本框中输入高亮颜色的十六进制值)。
  4. 选择“显示”选项,在“文档”窗口中显示高亮颜色。
  5. 单击“确定”。

在文档窗口中显示或隐藏标记色彩

  1. 若要显示标记色彩,请选择“视图”>“设计视图选项”>“可视化助理”>“不可见元素”。若要隐藏标记色彩,请取消选择“不可见元素”。

编辑库项目属性

您可以使用属性检查器对库项目执行下列操作:打开库项目进行编辑,将选定的库项目与其源文件分离,或用当前选定的库项目来覆盖某个项目。

  1. 在文档中选择库项目。
  2. 在属性检查器(“窗口”>“属性”)中选择下列选项之一:

    源文件

    显示库项目源文件的文件名和位置。不能编辑此信息。

    打开

    打开库项目的源文件进行编辑。这等同于在“资源”面板中选择项目并单击“编辑”按钮。

    从源文件中分离

    断开所选库项目与其源文件之间的链接。可以在文档中编辑已分离的项目,但是,该项目已不再是库项目,在更改源文件时不会对其进行更新。

    重新创建

    用当前选定内容覆盖原始库项目。使用此选项可以在丢失或意外删除原始库项目时重新创建库项目。

使文档中的库项目可编辑

如果已经向文档中添加了库项目,并希望专门针对该页编辑此项目,则必须在文档中断开此项目和库之间的链接。一旦使得某个库项目的实例处于可编辑状态,在库项目发生更改时就不会更新这个实例。

  1. 在当前文档中选择库项目。
  2. 在属性检查器(“窗口”>“属性”)中,单击“从源文件中分离”。

编辑库项目中的行为

若要编辑库项目中的行为,必须首先在文档中插入该项目,然后使该项目在此文档中可编辑。在进行更改之后,可以重新创建该库项目,用文档中已经过编辑的项目来替换库中的项目。

  1. 打开包含该库项目的文档。

    请记下库项目的名称以及它所包含的标签的确切内容。以后需要用到这些信息。

  2. 选择该库项目,然后在属性检查器(“窗口”>“属性”)中单击“从源文件中分离”。
  3. 选择附加了该行为的元素。
  4. 在“行为”面板(“窗口”>“行为”)中,双击想要更改的操作。
  5. 在出现的对话框中进行必要的更改,然后单击“确定”。
  6. 在“资源”面板中,选择“库”类别。

  7. 记录原始库项目的准确名称和大小写形式;选择该项目,然后单击“删除”按钮。
  8. 在“文档”窗口中,选择组成该库项目的所有元素。

    确保选择与原始库项目中完全相同的元素。

  9. 在“资源”面板中,单击“新建库项目”按钮,然后为新的项目指定与所删除项目相同的名称,拼写和大小写形式要完全一致。

  10. 若要更新站点的其它文档中的库项目,请选择“工具”>“库”>“更新页面”。

  11. 在“查找范围”弹出菜单中,选择“文件使用”。
  12. 在相邻的弹出菜单中,选择刚创建的库项目的名称。
  13. 在“更新”选项中,确保选择了“库项目”,然后单击“开始”。
  14. 完成更新后,单击“关闭”。

更快、更轻松地获得帮助

新用户?