《Dreamweaver CS6 完全自学教程》笔记 第十一章:模板和库


第十一章:模板和库


11.1 模板和库的概念

11.1.1 模板的概念

模板是制作其他网页文档时使用的基本文档,一般在制作统一风格的网页时会经常使用该功能。




技术专题:模板的优点
  1. 能使网站的风格保持一致
  2. 有利于网站的维护,在修改共同的一面时不必每个页面都修改,只需修改应用的模板即可。
  3. 极大地提高了网站的制作效率。



11.1.2 库的概念

库是指将页面的导航条、版权信息、公司商标等常用的构成元素转换为库保存起来,在需要的时候调用。
Dreamweaver CS6 允许将网站中需要重复使用或经常更新的页面元素存入库中,存入库中的元素称为库项目,它包含已创建并且便于放在 Web 页上的单独资源或资源副本的集合。
当页面需要时,可以把库项目拖拽到页面中。若对库项目进行修改,整个网站各页面上与库项目相关的内容都会更新。

库本身是一段 HTML 代码,而模板本身是一个文件。Dreamweaver CS6 将所有模板文件存放在站点根目录下的 Templates 子目录中,扩展名为 .dwt ,将库项目存放在每个站点的本地根目录下的 Library 文件夹中,扩展名为 .lbi。



11.1.3 资源面板

点击 窗口 -> 资源 ,打开资源面板。
在这里插入图片描述
参数介绍:

  • 颜色: 站点中所定义的颜色资源。
  • SWF: 站点中所以的 Flash 动画。
  • 影片: 站点中所有的影片资源。
  • 脚本: 站点中所有的脚本资源(包括 JS)
  • 模板: 站点中所有的模板资源。
  • 插入: 可以将选定的资源插入到页面中。



11.2 使用模板

模板有以下 4 个功能:

  1. 模板可选区: 在从模板中派生出文档时,可以选择该区域的内容是否显示。
  2. 模板重复区: 在从模板派生出的文档中可能有需要重复出现的区域。
  3. 模板的可编辑性标签属性: 若将模板的某个标签属性设置为可编辑,则派生出的文档中就可以修改它。
  4. 模板的嵌套: 在一个模板中可以嵌套另一个模板。



11.2.1 创建模板

有两种方法:可以新建一个空白模板,或者从某个页面生成一个模板。



新建一个空白模板:
打开资源面板,点击 “模板” 按钮,点击右下角 “新建模板” 按钮。

在这里插入图片描述



将文档保存为模板:
打开要保存的页面,点击 文件 -> 另存为模板,打开 “另存模板” 对话框,在 “另存为” 中输入名称。

在这里插入图片描述



11.2.2 设计模板

在资源面板可以调出需要编辑的模板进行编辑,点击 文件 -> 保存 即可进行保存。



11.2.3 设置模板文档的页面属性

打开要设置的模板文档,点击 修改 -> 页面属性,打开 “页面属性” 对话框,即可进行设置。

应用模板的文档会继承模板中除页面标题外的所有部分,因此应用模板后只能修改页面标题,不能修改页面属性。



11.2.4 定义模板区域

Dreamweaver 有以下 4 种模板区域:

  1. 可编辑区域: 模板中至少要包括一个可编辑区域。
  2. 重复区域: 在从模板派生出的文档中可能有需要重复出现的区域。
  3. 可选区域: 用于保存有可能在基于模板的文档中出现的内容。在基于模板的页面上,通常由内容编辑器控制内容是否显示。
  4. 可编辑性标签属性: 若将模板的某个标签属性设置为可编辑,则在基于模板的页面中就可以修改它。

定义可编辑区域:

将光标放到要插入可编辑区的位置,点击 插入 -> 模板对象 -> 可编辑区域,或者快捷键 Ctrl + Alt + V,打开 “新建可编辑区” 对话框。

在这里插入图片描述
插入完成后,在状态栏上可发现出现了 <mmtemplate:editable> 标签项,单击该标签项,可选定可编辑区域,按 Delete 键可以删除该区域。

在这里插入图片描述

单元格: 定义可编辑区域时可以将整个表格或某个单独单元格标记为可编辑的,但不能将多个单元格标记为一个可编辑区域。 如果 <td> 标签被选中,则可编辑区域包括单元格周围的区域,否则只包括单元格中的内容。

层: 层和层的内容是两个不同的元素。层可编辑是指可以修改层的位置及内容,层的内容可编辑时,不可以修改层的位置。 要选择层的内容,应将光标移到层内再全选,若要选中该层,则应确保显示了不可见元素,然后单击层的标记图案。


定义可选区域:

可选区域由条件语句控制,根据模板中设置的条件,用户可以定义该区域在自己创建的页面中是否可见。

将光标放到要定义可选区域的位置,点击 插入 -> 模板对象 -> 可选区域 ,打开 “新建可选区域” 对话框。

在这里插入图片描述
在这里插入图片描述
“使用参数” 选项可以选择要与选定内容链接的现有参数。
“输入表达式” 中输入表达式内容。


定义重复区域:

重复区域是可以根据需要在页面中复制多次的模板部分,常用于表格。重复区域不是可编辑区域,若要使内容可编辑,必须插入可编辑区域。

点击 插入 -> 模板对象 -> 重复区域 ,打开 “新建重复区域” 对话框,在名称中输入提示信息。


定义可编辑标签属性:

选定要设置可编辑标签属性的对象,执行 修改 -> 模板 -> 令属性可编辑 ,打开 “可编辑标签属性” 对话框,在 “属性” 中选择可编辑的属性,或点击 “添加” 按钮。选中 “令属性可编辑” 选项,在 “标签” 中输入标签的名称。从 “类型” 中选择该属性允许具有的值的类型,在 “默认” 中输入所选标签属性的默认值。

在这里插入图片描述




11.3 定制库项目

11.3.1 创建库项目

Dreamweaver 中用户可以以网页中 <body> 部分中的任意元素创建库项目,包括文本、图像、表格、表单、插件、导航条等。对于链接项(比如图像),库只储存对该项目的引用,原始文件必须保留在指定的位置才能使库项目正确工作。

点击 窗口 -> 资源,打开 “资源” 面板,点击 “库” 按钮,将要创建库项目的对象拖入库选项窗口中。或者选中要添加的对象,点击 修改 -> 库 -> 增加对象到库。



11.3.2 库项目属性面板

参数介绍:

  • Src: 表示当前库项目源文件的路径和文件名。
  • “打开” 按钮: 打开库项目的源文件,并对其编辑和修改。
  • “从源文件中分离” 按钮: 使库项目同它的源文件分离,可以直接编辑其中的内容。
  • “重新创建” 按钮: 重新创建新的库项目。


11.3.3 编辑库项目


更新库项目:

点击 修改 -> 库 -> 更新页面 ,打开 “更新页面” 对话框。

在这里插入图片描述
在 “更新” 中勾选 “库项目” 选项,可以更新站点中所有的库项目,勾选 “模板” 复选项,可以更新站点中所有的模板。


重命名库项目:

选中要重命名的项目,点击右上角的按钮,选择 “重命名” 即可。

在这里插入图片描述


删除库项目:

与重命名步骤相同,点击右上角按钮后选择 “删除”,或者按 Delete 键。




11.3.4 添加库项目

向页面添加库项目时,将把实际内容以及对该库项目的引用一起插入到页面中。

打开页面,将光标放到要插入库项目的位置,打开 “资源” 面板,选中库项目后点击 “插入” 按钮即可。

在这里插入图片描述
或者右键库项目,点击 “插入”。




第十一章总结

模板和库都是在网页设计和制作中,为设计出不同风格所使用的一种辅助工具。通过使用模板和库可以设计出具有统一风格的网站,并且模板和库为网站的更新和维护提供了极大方便。
使用库可以完成对网站某个板块的修改。在定义模板的可编辑区域时要仔细研究整个网站中各个页面所具有的共同风格和特性,这样才能设计出适合整个网站且使用合理的模板。




  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SP FA

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值