《Dreamweaver CS6 完全自学教程》笔记 第十一章：模板和库
文章目录
- 第十一章：模板和库
- 11.1 模板和库的概念
- 11.1.1 模板的概念
- 技术专题：模板的优点
- 11.1.2 库的概念
- 11.1.3 资源面板
- 11.2 使用模板
- 11.2.1 创建模板
- 11.2.2 设计模板
- 11.2.3 设置模板文档的页面属性
- 11.2.4 定义模板区域
- 11.3 定制库项目
- 11.3.1 创建库项目
- 11.3.2 库项目属性面板
- 11.3.3 编辑库项目
- 11.3.4 添加库项目
- 第十一章总结
第十一章：模板和库
11.1 模板和库的概念
11.1.1 模板的概念
模板是制作其他网页文档时使用的基本文档，一般在制作统一风格的网页时会经常使用该功能。
技术专题：模板的优点
- 能使网站的风格保持一致
- 有利于网站的维护，在修改共同的一面时不必每个页面都修改，只需修改应用的模板即可。
- 极大地提高了网站的制作效率。
11.1.2 库的概念
库是指将页面的导航条、版权信息、公司商标等常用的构成元素转换为库保存起来，在需要的时候调用。
Dreamweaver CS6 允许将网站中需要重复使用或经常更新的页面元素存入库中，存入库中的元素称为库项目，它包含已创建并且便于放在 Web 页上的单独资源或资源副本的集合。
当页面需要时，可以把库项目拖拽到页面中。若对库项目进行修改，整个网站各页面上与库项目相关的内容都会更新。
库本身是一段 HTML 代码，而模板本身是一个文件。Dreamweaver CS6 将所有模板文件存放在站点根目录下的 Templates 子目录中，扩展名为 .dwt ，将库项目存放在每个站点的本地根目录下的 Library 文件夹中，扩展名为 .lbi。
11.1.3 资源面板
点击 窗口 -> 资源 ，打开资源面板。
参数介绍：
- 颜色： 站点中所定义的颜色资源。
- SWF： 站点中所以的 Flash 动画。
- 影片： 站点中所有的影片资源。
- 脚本： 站点中所有的脚本资源（包括 JS）
- 模板： 站点中所有的模板资源。
- 插入： 可以将选定的资源插入到页面中。
11.2 使用模板
模板有以下 4 个功能：
- 模板可选区： 在从模板中派生出文档时，可以选择该区域的内容是否显示。
- 模板重复区： 在从模板派生出的文档中可能有需要重复出现的区域。
- 模板的可编辑性标签属性： 若将模板的某个标签属性设置为可编辑，则派生出的文档中就可以修改它。
- 模板的嵌套： 在一个模板中可以嵌套另一个模板。
11.2.1 创建模板
有两种方法：可以新建一个空白模板，或者从某个页面生成一个模板。
新建一个空白模板：
打开资源面板，点击 “模板” 按钮，点击右下角 “新建模板” 按钮。
将文档保存为模板：
打开要保存的页面，点击 文件 -> 另存为模板，打开 “另存模板” 对话框，在 “另存为” 中输入名称。
11.2.2 设计模板
在资源面板可以调出需要编辑的模板进行编辑，点击 文件 -> 保存 即可进行保存。
11.2.3 设置模板文档的页面属性
打开要设置的模板文档，点击 修改 -> 页面属性，打开 “页面属性” 对话框，即可进行设置。
应用模板的文档会继承模板中除页面标题外的所有部分，因此应用模板后只能修改页面标题，不能修改页面属性。
11.2.4 定义模板区域
Dreamweaver 有以下 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 添加库项目
向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到页面中。
打开页面，将光标放到要插入库项目的位置，打开 “资源” 面板，选中库项目后点击 “插入” 按钮即可。
或者右键库项目，点击 “插入”。
第十一章总结
模板和库都是在网页设计和制作中，为设计出不同风格所使用的一种辅助工具。通过使用模板和库可以设计出具有统一风格的网站，并且模板和库为网站的更新和维护提供了极大方便。
使用库可以完成对网站某个板块的修改。在定义模板的可编辑区域时要仔细研究整个网站中各个页面所具有的共同风格和特性，这样才能设计出适合整个网站且使用合理的模板。
《Dreamweaver CS6 完全自学教程》笔记 第十一章：模板和库相关推荐
- 《Dreamweaver CS6 完全自学教程》笔记
声明: 博主完全采用自学方式进行学习,内用不够严谨,学习路线不够系统,仅可用作参考,如有错误请及时指正. 博主主要参考<Dreamweaver CS6 完全自学教程>这本书进行学习,但不限 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十七章：Spry 框架技术
文章目录 第十七章:Spry 框架技术 17.1 Spry 菜单栏 17.1.1 插入 Spry 菜单栏 17.1.2 设置 Spry 菜单栏的属性 17.1.3 设置菜单项的尺寸 17.2 Spry ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十四章：使用 CSS 设计网页
文章目录 第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十三章：Dreamweaver 中的 HTML 代码
文章目录 第十三章:Dreamweaver 中的 HTML 代码 13.1 HTML 介绍 13.2 HTML 的基本结构 13.2.1 单标签 13.2.2 双标签 13.2.3 标签属性 13.3 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第五章：网页中的图像编辑
文章目录 第五章:网页中的图像编辑 5.1 图像占位符 5.1.1 插入图像占位符 5.1.2 将图像占位符替换为图像 技术专题:预览网页时不显示图像的问题 5.2 交互式图像 实战:创建网页导航条 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第六章：使用表格进行网页布局
文章目录 第六章:使用表格进行网页布局 6.1 创建表格 6.2 应用表格 6.2.1 输入表格内容 6.2.2 选定表格元素 6.2.3 设置表格与单元格属性 实战:制作细线表格 6.2.4 添加和 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十章：表单的使用
文章目录 第十章:表单的使用 10.1表单概述 技术专题:表单的工作流程 10.2表单的创建及设置 10.2.1 创建表单 10.2.2 设置表单属性 10.3 创建表单对象 10.3.1 创建文本域 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十二章：框架的应用
文章目录 第十二章:框架的应用 12.1 创建框架或框架集 12.1.1 创建自定义框架 12.1.2 创建预定义框架 技术专题:框架的拆分与合并 12.1.3 创建嵌套框架 12.2 框架和框架集的 ...
- 《Dreamweaver CS6 完全自学教程》笔记 附录：Dreamweaver 常用快捷键、HTML 代码标签、CSS 属性
返回
- 《Adobe Dreamweaver CS6中文版经典教程》——第2课 HTML基础2.1 什么是HTML
本节书摘来自异步社区<Adobe Dreamweaver CS6中文版经典教程>一书中的第2 章,第2.1节,作者:[美]Adobe公司 更多章节内容可以访问云栖社区"异步社区& ...
最新文章
- python的raw_ input是什么意思-对python中raw_input()和input()的用法详解
- 第九周项目实践1 二叉树的链式存储及基本运算 算法库
- accept函数_基础套接字函数入门1
- 基本数据结构—Hash哈希
- Vue入门教程：node安装vue命令行工具及启动项目
- 浅析php反序列化字符串逃逸
- Unity 2018.3.1 SyncVar没有同步服务器变量
- 再看Kafka Lag
- Android NDK学习（七）：NDK 编译支持 C++特有的库
- 企业级负载均衡如何实现
- （21）VHDL实现减法器
- 剪纸风格的美妆海报设计，你试过吗？
- Android视频: YUV转RGB
- 手写邮箱获取验证码注册登录功能
- oracle dba 命令行,Oracle DBA常用命令
- nginx服务+LEMP搭建
- Daily scrum 10.12
- iOS底层探索之KVO(三)—自定义KVO
- （15）数据结构-平衡二叉树（AVL）
- Windows API一日一练(60)CreateIoCompletionPort和GetQueuedCompletionStatus函数