=
项目十二 模板与库
=
>
=
任务一 使用模板
=
本节提纲
认识模板
创建模板
定义可编辑区域
应用模板
更新模板
=
网页模板
模板实质上是一种特殊类型的文档，它主要是作 为创建其他文档的基础，用于设计布局比较固定 的页面结构或元素。模板是网页设计中比较高级 的内容，很好地体现了Dreamweaver在大型网页 项目开发中的先进性，这种技术可以尽量地避免 开发时的重复工作。
茶与祭祀
Files→茶与祭祀.html
=
更新模板
模板文件中设置链接，实现茶文化各网页之间相互跳转。
2.模板修改完毕，保存模板文档，Dreamweaver CS6会自动更新站点内所有应用的模 板。如图12-19所示。
=
更新模板
手动更新模板及网页
1.在“资源”面板中，在模板列表中右击要更新的模板。 2.在弹出的快捷菜单中选择“更新站点”命令，打开“更新站点”对话框 3.在“查看”下拉列表中设置要更新的范围。 选择“整个站点”选项，然后在右边弹出的快捷菜单中选择站点名，这样将更新选定站 点的所有网页。如图12-20所示。
可编辑区域就是基于模板文档的未锁定区域， 是网页套用模板后，可以编辑的区域。
=
可编辑区域
=
认识模板
模板实质上是一种特殊类型的文档，模板文档中有可编辑区域和不可编辑区域。 使用模板可以一次在网站站点中更新多个页面。
模板的可编辑区域是基于该模板的网页页面中可以修改的网页元素，不可编辑 区域是在网站页面中保持不变的网页元素。
=
定义模板的可编辑区域
模板的可编辑区域
可编辑区域就是基于模板文档的未锁定区域，是网页套用模板后，可以编辑的 区域。
可编辑区域的对象
可以把图像、文本、表格、AP元素、客户端行为等页面元素设置为可编辑区， 可把整个表格及表格里的内容设置为一个可编辑区，也可以把某一个单元格及 内容设置为一个可编辑区
=
=
库项目
一、插入库项目
1.将插入点放置在网页“茶的贸易历史”的左边“茶史觅踪”导航条下方。如图 12-28所示。 2.在资源面板的库面板中，选中要插入的库文件“导航菜单.lbi”，单击窗口下 方的“插入”按钮。如图12-29所示。 3.新插入到网页中的库文件不可编辑，如图12-30所示。在浏览器中浏览效果， 如图12-31所示。
=
库项目
三、更新库项目
1.在资源面板的库面板中，双击“茶叶百科”库项目进行编辑。将文字和单元格 的背景颜色进行修改。如图12-37所示。 2.保存库文件，则弹出“更新库项目”对话框，询问是否更新网站中使用了该库 文件的网页。如图12-38所示。 3.单击“更新”按钮后，弹出“更新页面”对话框，确认更新。如图12-39所示。 4.此时网页“index”已自动更新。如图12-40所示。
。
=
创建模板
二、将网页另存为模板
1.打开“tea culture”站点中已存在的网页文件“index.html”，这是一个已 基本制作完成的网页，如图12-9所示，删除其中不要的内容，选择“文 件”→“另存为模板”命令，将网页另存为模板。
。
=
创建模板
二、将网页另存为模板
2.弹出“另存模板”对话框，如图12-10所示，请正确选择正在使用的站点 “tea culture”，设置输入模板文件名，如“moban”，单击“保存”按钮。 此时模板文件将自动存入站点的“templates”文件夹中，如果有相同文件名的 模板文件，则会覆盖掉。
=
创建模板
（二）在文件菜单中直接创建模板
选择“文件”→“新建”命令，打开“新建文档”对话框。然后在“类别”列 表中选择“空白页”或者“空模板”选项，并在“空白页”或者“空模板”列 表中选择“HTML模板”选项，单击“创建”按钮即可。 。
=
创建模板
二、将网页另存为模板
1.打开“tea culture”站点中已存在的网页文件“index.html”，这是一个已 基本制作完成的网页，如图12-9所示，删除其中不要的内容，选择“文 件”→“另存为模板”命令，将网页另存为模板。
=
应用模板
操作步骤如下：
1.在站点中新建一个空白网页。 在“文件”面板中，在站点的根文件夹下，新建一网页，命名为“index.html”，双击打开该 文件进行编辑。 2.执行菜单“修改”→“模板”→“应用模板到页”。如图12-16所示。 3.弹出“选择模板”对话框，在对话框中，选择本站点中已有的模板“ moban”，单击“选定” 。 按钮，如图12-17所示。 4.空白网页“index”即已套用模板，如图12-18所示，图中EditRegion1和EditRegion2为可编 辑区域，其余区域均不可编辑。 5.删除可编辑区域内的内容，将正确的内容输入并编辑好，保存文档，如图所示。本例中素材位 于“素材”文件夹中。页的代码结构异同？ 2.编辑库项目时，“CSS样式”面板可以用吗？ 3.使用库项目的本质是什么？
1.分析“导航菜单.lbi”文件的代码结构。
=
自主练习
2.应用库项目完成其它页面的导航菜单模块。（参考范例 素材） 3.更新其它页面的库项目。（参考范例）
=
谢谢
=
=
库项目
=
库项目的对象
在库中，用户可以存储各种各样的页面元素， 如图像、文本、声音、flash影片、表格、表 单、java程序、插件、activex控件、导航条 等。对于诸如图像之类的链接项目，库中仅 保存该项目的引用，原文件仍保存在指定位 置。
库项目中可以包含行为，但不能包含css样式 表，因为库项目要求创建对象元素的代码必 须位于HTML代码的<body>和</body>之 间。
=
库项目
二、修改库项目
1.将“导航菜单.lbi”文件复制一份，重命名为“茶叶百科.lbi”如图12-32、 12-33所示。 2.选择“资源”模板→“库”→“茶叶百科”，双击“茶叶百科”库项目进行编 辑，如图12-34所示。 3.将插入点放置在网页“index.html”的左边“茶叶百科”导航条下方，在资源 面板的库面板中，选中要插入的库文件“茶叶百科.lbi”，单击窗口下方的“插 入”按钮，如图12-35所示。完成效果如图12-36所示。
=
思考
1.创建模板一共有几种方法？
2.如何删除创建的可编辑区域？
3.探究其他的方法实现模板应用？
4.如何将模板与网页分离？
1.用两种不同的方法在站点“tea culture”的Templates文件夹中 分别创建名为"tea1.dwt"和“tea2.dwt”的模板。
=
自主练习
2.删除站点“tea culture”→“Templates”→“moban2.dwt” 模板页中的可编辑区域“EditRegion1”。
模板是网页设计中比较高级的内容，很好地体现了Dreamweaver在大型网页 项目开发中的先进性，这种技术可以尽量地避免开发时的重复工作。
=
创建模板 一、直接创建模板
（一）在“资源”面板直接创建模板
1.选择“窗口”→“资源”命令，打开“资源”面板。 2.然后单击“资源”面板底部的“新建模板”按钮 。 3.创建完空模板后，双击该模板或者单击面板底部的“编辑”按钮，打开模板进 。 行编辑。 4.保存模板。
=
更新模板
模板文件中设置链接，实现茶文化各网页之间相互跳转。
1.打开模板文件“moban.dwt”，参考下表12-1，设置相应的链接。
菜单项 茶的发展简史 茶的贸易历史 饮茶史 制茶史 茶叶品种 茗茶荟萃 茶的鉴评 茶的保存 茶道概论 泡茶技法 茶叶饮法 茶艺演示 民族茶俗 茶与礼仪 茶与婚俗 对应的网页文件 index.html Files→茶的贸易历史.html Files→饮茶史.html Files→制茶史.html Files→茶叶品种.html Files→茗茶荟萃.html Files→茶的鉴评.html Files→茶的保存.html Files→茶道概论.html Files→泡茶技法.html Files→茶叶饮法.html Files→茶艺演示.html Files→民族茶俗.html Files→茶与礼仪.html Files→茶与婚俗.html
=
创建库项目
二、创建基于选定内容的库项目
1.打开站点中已编辑好的网页“index.html”，选中网页中关于“茶史觅踪”的 内容（包括标图片、选择菜单、表格）。如图12-23所示 2.选择菜单“修改”→“库”→“增加对象到库”命令，将选中的内容转化为库 文件。软件弹出一个提示信息，如图12-24所示。单击“确定”后，资源面板会 自动切换到“库”选项，预览新增加的库文件以及库文件名“Untitled”，将库 文件名设置为“导航菜单”，转化后如图12-25所示。 3.查看库文件内容 切换到“文件”面板，在站点文件夹中，新增了一个文件夹，名为“library”， 新增的库文件就在这个文件夹中，名为“导航菜单.lbi”，如图12-26所示。
3.根据完整的网站样例，完成其他相应的页面：茶的贸易历史.html、 饮茶史.html、制茶史.html等其他页面。（参见素材范例结果） 4.将“index.html”页面中的模板从网页中分离出来。
=
任务二 使用库
=
本节提纲
创建库项目 插入库项目 修改库项目 更新库项目 分离库项目
库项目是相对于一个站点的，所以需要使用库项 目时，要先建立一个站点。 库项目的扩展名为.lbi，同时所有库项目都存储在 站点根目录下的Library文件夹中，如果本地站点 没有这个子文件夹，Dreamweaver cs6将自动生成。
定义可编辑区的具体步骤如下：
1.在“文件”面板或“资源”面板中，选择模板文件“moban”，双击打开。 2.选中可以编辑修改的区域，如图12-12所示，图中选择的是标题“中国茶的发展历史”所在的表格 <table>标签。 3.选择菜单“插入”→“模板对象”→“可编辑区域”命令，在弹出的对话框中给该可编辑区域命名， 单击“确定”按钮，如图12-13所示。 4.新添加的可编辑区域有蓝色边框，上面有蓝色标签，标签上是可编辑区域的名称，如图所示。可编辑 区域的内容“中国茶的发展历史”可以清除，但为了页面的完整性，模板中也可以不删除，在模板应用 到网页后要输入新内容之前再删除。 5.再将内容图所在单元格添加为一个可编辑区域“EditRegion2”， 如图12-14所示。效果如图12-15 所示。
