Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库

第10章模板和库

本章重点本章将介绍模板和库的基本知识及使用方法，内容包括：创建模板；定义模板的可编辑区域、重复区域和可选区域；定义嵌套模板；应用模板建立网页；修改模板并更新站点；库的创建及使用等。读者应该重点掌握模板的创建和使用；可编辑区域、重复区域和可选区域区别和使用方法；库项目的建立和使用等内容。

学习目的通过本章的学习，您可以掌握：模板和库的功能创建模板和嵌套模板应用模板管理模板应用库项目管理库项目模板与库的应用第10章模板和库本章重点110.1模板模板是一种以.dwt为扩展名的特殊文档，用于设计固定的页面布局。模板由两种区域组成：锁定区和可编辑区。锁定区域包含了在所有页面中共有的元素，即构成页面的基本框架，比如导航条、标题等。第一次创建模板时，所有的区域都是锁定的。而可编辑区域是根据用户需要而指定的用于设置页面不同内容的区域，通过编辑可编辑区的内容，可以得到与模板风格一致，但又有所不同的新的网页。

10.1模板模板是一种以.dwt为扩展名的特殊文档，2执行“窗口”/“资源”菜单命令，或按F8快捷键，打开如左图所示的“资源”面板。单击“资源”面板左侧的模板图标按钮，即可切换到“模板”面板，如右图所示。面板上半部分显示当前选择模板的缩略图，下半部分则是当前站点中所有模板的列表。10.1.1模板面板执行“窗口”/“资源”菜单命令，或按F8快捷键，3Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库4Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库5将网页保存为模板

将已编辑好的文档存储为模板，这样生成的模板中会带有现在文件中已编辑好的内容，而且可以在该基础上对模板进行修改，使之满足设计需要。执行“文件”/“另存为模板”菜单命令。此时，文档的标题栏显示为<<模板>>XXXX.dwt，如图所示。表明该文档已不是普通文档，而是一个模板文件。将该文件在浏览器中预览，会发现该文档中无法键入文本或插入图像。这是因为还没有为模板定义可编辑区域，所有的区域都是锁定的。将网页保存为模板将已编辑好的文档存储为模板，610.1.4定义可编辑区域

可编辑区域用于在基于模板创建的HTML网页中改变页面内容，可以是文本、图像或其他的媒体，如Flash动画或Java小程序。编辑完成之后，可以将该文档保存为独立的HTML文件。

单击“常用”面板上图标中的下拉箭头，在弹出菜单中单击菜单项，弹出“新建可编辑区域”对话框。

插入的可编辑区在模板文件中默认用蓝绿色高亮显示，并在顶端显示指定的名称，如图所示。

10.1.4定义可编辑区域可编辑区域用于在710.1.5定义重复区域

重复区域是可以在基于模板的页面中拷贝任意次数的模板部分。重复区域通常用于表格，当然，也可以为其他页面元素定义重复区域。重复区域不是可编辑区域。若要使重复区域中的内容可编辑，则必须在重复区域内插入可编辑区域。10.1.5定义重复区域重复区域是可以在基810.1.6定义可选区域

“可选区域”是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。可选区域是由条件语句控制的。用户可以在“新建可选区域”对话框中创建模板参数和表达式，或通过在“代码”视图中键入参数和条件语句来控制可选区域。如果选择“使用参数”，则使用指定的参数控制可选区域。如果选择“输入表达式”，则根据指定的表达式的值确定是否显示可选区域。表达式值为真时，显示可选区；表达式值为假，则隐藏可选区。Dreamweaver自动在输入的文本两侧插入双引号。如果要编辑参数或表达式，单击可选区域左上角的标签选中该可选区域，然后在属性面板上单击“编辑”按钮，即可打开“新建可选区域”对话框，进行重新设置。

技巧：插入可选区域的可编辑区域时，不能先选定内容，再创建可编辑的可选区域。应插入区域，然后在该区域内插入内容。10.1.6定义可选区域“可选区域”是在模910.1.8定义嵌套模板

嵌套模板是指设计和制作是基于一个模板生成的模板。使用嵌套模板可以创建基模板的变体，通过嵌套多个模板可以定义精确的布局。嵌套模板继承基模板中的可编辑区域，除非在这些区域中插入了新的模板区域。在嵌套模板中，可以在基模板的可编辑区域中进一步定义可编辑区域。10.1.8定义嵌套模板嵌套模板是指设计和制作是基10在文档中应用模板有两种方式：基于模板创建新文档和为现有文档应用模板。基于模板创建文档1．执行“文件”/“新建”菜单命令，打开“新建文档”对话框。2．单击“新建文档”对话框中“模板中的页”标签，然后在对话框中的“站点”下拉列表中选择要应用的模板所在的站点。3．在“站点的模板”列表中选择需要的模板文件，并单击选中对话框右下角的“当模板改变时更新页面”复选框。4．单击“创建”按钮，即可基于指定的模板创建一个新文档。5．按编辑普通HTML文档的方法编辑新文档的页面内容。10.1.9应用模板创建文档在文档中应用模板有两种方式：基于模板创建新文档和为现有文档应11为文档应用模板

为已有的文档应用模板之前，首先应确保模板已定义了可编辑区域，否则在应用模板时，Dreamweaver会弹出一个提示框，提示用户所应用的模板中没有任何可编辑区域。1．打开一个普通文档。2．执行“修改”/“模板”/“应用模板到页”菜单命令，打开“选择模板”对话框。3．在“站点”列表中选择要应用的模板所在的站点，然后在“模板”列表中选择需要的模板。本例选择本章制作的模板navigator。4．单击“选择模板”对话框底部的“当模板改变时更新页面”复选框。5．单击“确定”按钮，弹出“不一致的区域名称”对话框。提示用户此文档中的某些区域在新模板中没有相应区域。为文档应用模板为已有的文档应用模板之前，首先应确保模126．选中列表中不一致的区域名称，此时“将内容移到新区域”后面的下拉列表变为可用状态。7．从下拉列表中选中navigator模板中定义的可编辑区域名称text。此时，不一致的区域名称列表中，选定的区域后面的“<未解析>”变为指定的区域名称text。如果选择“不在任何地方”选项，则将该内容从文档中删除。8．单击“用于所有内容”按钮，将所有未解析的内容移到选定的区域。9．单击“确定”按钮应用模板。应用模板前后的页面效果如图12-21所示。注意：将模板应用于现有文档时，该模板将用其标准化内容替换文档内容。所以将模板应用于页面之前，最好备份页面的内容。

此外，用户也可以直接在“模板”面板中用鼠标拖动模板到要应用模板的文档中，或单击“模板”底部的“应用”按钮，将指定的模板应用到已有的文档。6．选中列表中不一致的区域名称，此时“将内容移1310.1.10修改模板并更新站点

1．对模板进行修改之后，执行“修改”/“模板”/“更新页面”命令，弹出如图所示的“更新页面”对话框。2．在对话框中的“查看”下拉列表框中，选择页面更新的范围。如果选择“整个站点”选项，可以在后面的站点下拉列表框中指定要更新的站点，并对指定的站点中所有的文档进行更新。如果选择“文件使用”选项，可以在后面的下拉列表框中指定要更新的模板，并对站点中所有使用该模板的文档进行更新。不使用该模板的文档不会被更新。3．在“更新”后面的复选框中选择“模板”，表明该操作更新的是站点中的模板及基于模板生成的页面。4．单击“开始”按钮，即可将模板的更改应用到站点中指定范围内的网页，并在“状态”栏显示更新的成功、失败等信息。10.1.10修改模板并更新站点1．对模板进行修改之1410.2应用库项目

在Dreamweaver中，可以将任何页面元素创建为库项目，如文本、表单、表格、图像、导航条，甚至Java程序、ActiveX控件和插件。库项目是一种扩展名为.lbi的特殊文件，所有的库项目都被保存在本地站点根目录下一个名为Library的文件夹中。每个站点都有自己的库。使用库项目时，Dreamweaver不是在网页中插入库项目，而是插入一个指向库项目的链接。也就是说，Dreamweaver将向文档中插入该项目的HTML源代码副本，并添加一个包含对原始外部项目的引用的HTML注释。总而言之，利用库可以实现对文档风格的维护。可以将某些文档中的共有内容定义为库项目，然后放置在文档中。用户可以在任何时间修改库项目，编辑完成后，可以立即更新或稍后更新站点中使用库项目的页面。

注意：Dreamweaver需要在网页中建立来自每一个库项目的相对链接。库项目应该始终放置在Library文件夹中，并且不应向该文件夹中添加任何非.lbi的文件。10.2应用库项目在Dream1510.2.2库面板的功能

选择“窗口”/“资源”命令，调出“资源”面板。单击“资源”面板左侧的库图标按钮，即可切换到“库”面板，如图所示。“库”面板上半部分显示当前选择的库项目的预览效果；下半部分则是当前站点中所有库项目的列表。10.2.2库面板的功能选择“窗口”/“资1610.2.3创建库项目

将选中的内容拖动到“库”面板的库项目列表中。单击鼠标右键，从弹出菜单中执行“增加对象到库”命令。选择“修改”/“库”/“增加对象到库”菜单命令。单击“库”面板底部的“新建库项目”按钮。10.2.3创建库项目将选中的内容拖动到“库”面板的库项17使用库项目

向页面添加库项目时，将把库项目的实际内容以及对该库项目的引用一并插入到文档中。（1）将插入点定位在文档窗口中要插入库项目的位置。（2）打开“库”面板，从库项目列表中选择要插入的库项目。（3）单击“库”面板左下角的“插入”按钮，或直接将库项目从“库”面板中拖到文档窗口中。此时，文档中会出现库项目所表示的文档内容，同时以淡黄色高亮显示。

在“文档”窗口中，库项目是作为一个整体出现的，用户无法对库项目中的局部内容进行编辑。

使用库项目向页面添加库项目时，将把库项目的实1810.3模板与库的应用

10.3模板与库的应用19Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库20Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库21Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库22第10章模板和库

本章重点本章将介绍模板和库的基本知识及使用方法，内容包括：创建模板；定义模板的可编辑区域、重复区域和可选区域；定义嵌套模板；应用模板建立网页；修改模板并更新站点；库的创建及使用等。读者应该重点掌握模板的创建和使用；可编辑区域、重复区域和可选区域区别和使用方法；库项目的建立和使用等内容。

学习目的通过本章的学习，您可以掌握：模板和库的功能创建模板和嵌套模板应用模板管理模板应用库项目管理库项目模板与库的应用第10章模板和库本章重点2310.1模板模板是一种以.dwt为扩展名的特殊文档，用于设计固定的页面布局。模板由两种区域组成：锁定区和可编辑区。锁定区域包含了在所有页面中共有的元素，即构成页面的基本框架，比如导航条、标题等。第一次创建模板时，所有的区域都是锁定的。而可编辑区域是根据用户需要而指定的用于设置页面不同内容的区域，通过编辑可编辑区的内容，可以得到与模板风格一致，但又有所不同的新的网页。

10.1模板模板是一种以.dwt为扩展名的特殊文档，24执行“窗口”/“资源”菜单命令，或按F8快捷键，打开如左图所示的“资源”面板。单击“资源”面板左侧的模板图标按钮，即可切换到“模板”面板，如右图所示。面板上半部分显示当前选择模板的缩略图，下半部分则是当前站点中所有模板的列表。10.1.1模板面板执行“窗口”/“资源”菜单命令，或按F8快捷键，25Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库26Dreamweaver-cs5中文版入门与提高实例教程课件第10章模板和库27将网页保存为模板

将已编辑好的文档存储为模板，这样生成的模板中会带有现在文件中已编辑好的内容，而且可以在该基础上对模板进行修改，使之满足设计需要。执行“文件”/“另存为模板”菜单命令。此时，文档的标题栏显示为<<模板>>XXXX.dwt，如图所示。表明该文档已不是普通文档，而是一个模板文件。将该文件在浏览器中预览，会发现该文档中无法键入文本或插入图像。这是因为还没有为模板定义可编辑区域，所有的区域都是锁定的。将网页保存为模板将已编辑好的文档存储为模板，2810.1.4定义可编辑区域

可编辑区域用于在基于模板创建的HTML网页中改变页面内容，可以是文本、图像或其他的媒体，如Flash动画或Java小程序。编辑完成之后，可以将该文档保存为独立的HTML文件。

单击“常用”面板上图标中的下拉箭头，在弹出菜单中单击菜单项，弹出“新建可编辑区域”对话框。

插入的可编辑区在模板文件中默认用蓝绿色高亮显示，并在顶端显示指定的名称，如图所示。

10.1.4定义可编辑区域可编辑区域用于在2910.1.5定义重复区域

重复区域是可以在基于模板的页面中拷贝任意次数的模板部分。重复区域通常用于表格，当然，也可以为其他页面元素定义重复区域。重复区域不是可编辑区域。若要使重复区域中的内容可编辑，则必须在重复区域内插入可编辑区域。10.1.5定义重复区域重复区域是可以在基3010.1.6定义可选区域

“可选区域”是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。可选区域是由条件语句控制的。用户可以在“新建可选区域”对话框中创建模板参数和表达式，或通过在“代码”视图中键入参数和条件语句来控制可选区域。如果选择“使用参数”，则使用指定的参数控制可选区域。如果选择“输入表达式”，则根据指定的表达式的值确定是否显示可选区域。表达式值为真时，显示可选区；表达式值为假，则隐藏可选区。Dreamweaver自动在输入的文本两侧插入双引号。如果要编辑参数或表达式，单击可选区域左上角的标签选中该可选区域，然后在属性面板上单击“编辑”按钮，即可打开“新建可选区域”对话框，进行重新设置。

技巧：插入可选区域的可编辑区域时，不能先选定内容，再创建可编辑的可选区域。应插入区域，然后在该区域内插入内容。10.1.6定义可选区域“可选区域”是在模3110.1.8定义嵌套模板

嵌套模板是指设计和制作是基于一个模板生成的模板。使用嵌套模板可以创建基模板的变体，通过嵌套多个模板可以定义精确的布局。嵌套模板继承基模板中的可编辑区域，除非在这些区域中插入了新的模板区域。在嵌套模板中，可以在基模板的可编辑区域中进一步定义可编辑区域。10.1.8定义嵌套模板嵌套模板是指设计和制作是基32在文档中应用模板有两种方式：基于模板创建新文档和为现有文档应用模板。基于模板创建文档1．执行“文件”/“新建”菜单命令，打开“新建文档”对话框。2．单击“新建文档”对话框中“模板中的页”标签，然后在对话框中的“站点”下拉列表中选择要应用的模板所在的站点。3．在“站点的模板”列表中选择需要的模板文件，并单击选中对话框右下角的“当模板改变时更新页面”复选框。4．单击“创建”按钮，即可基于指定的模板创建一个新文档。5．按编辑普通HTML文档的方法编辑新文档的页面内容。10.1.9应用模板创建文档在文档中应用模板有两种方式：基于模板创建新文档和为现有文档应33为文档应用模板

为已有的文档应用模板之前，首先应确保模板已定义了可编辑区域，否则在应用模板时，Dreamweaver会弹出一个提示框，提示用户所应用的模板中没有任何可编辑区域。1．打开一个普通文档。2．执行“修改”/“模板”/“应用模板到页”菜单命令，打开“选择模板”对话框。3．在“站点”列表中选择要应用的模板所在的站点，然后在“模板”列表中选择需要的模板。本例选择本章制作的模板navigator。4．单击“选择模板”对话框底部的“当模板改变时更新页面”复选框。5．单击“确定”按钮，弹出“不一致的区域名称”对话框。提示用户此文档中的某些区域在新模板中没有相应区域。为文档应用模板为已有的文档应用模板之前，首先应确保模346．选中列表中不一致的区域名称，此时“将内容移到新区域”后面的下拉列表变为可用状态。7．从下拉列表中选中navigator模板中定义的可编辑区域名称text。此时，不一致的区域名称列表中，选定的区域后面的“<未解析>”变为指定的区域名称text。如果选择“不在任何地方”选项，则将该内容从文档中删除。8．单击“用于所有内容”按钮，将所有未解析的内容移到选定的区域。9．单击“确定”按钮应用模板。应用模板前后的页面效果如图12-21所示。注意：将模板应用于现有文档时，该模板将用其标准化内容替换文档内容。所以将模板应用于页面之前，最好备份页面的内容。

此外，用户也可以直接在“模板”面板中用鼠标拖动模板到要应用模板的文档中，或单击“模板”底部的“应用”按钮，将指定的模板应用到已有的文档。6．选中列表中不一致的区域名称，此时“将内容移3510.1.10修改模板并更新站点

1．对模板进行修改之后，执行“修改”/“模板”/“更新页面”命令，弹出如图所示的“更新页面”对话框。2．在对话框中的“查看”下拉列表框中，选择页面更新的范围。如果选择“整个站点”选项，可以在后面的站点下拉列表框中指定要更新的站点，并对指定的站点中所有的文档进行更新。如果选择“文件使用”选项，可以在后面的下拉列表框中指定要更新的模板，并对站点中所有使用该模板的文档进行更新。不使用该模板的文档不会被更新。3．在“更新”后面的复选框中选择“模板”，表明该操作更新的是站点中的模板及基于模板生成的页面。4．单击“开始”按钮，即可将模板的更改应用到站点中指定范围内的网页，并在“状态”栏显示更新的成功、失败等信息。10.1.10修改模板并更新站点1．对模板进行修改之3610.2应用库项目

在Dreamweaver中，可以将任何页面元素创建为库项目，如文本、表单、表格、图像、导航条，甚至Java程序、ActiveX控件和插件。库项目是一种扩展名为.lbi的特殊文件，所有的库项目都被保存在本地站点根目录下一个名为Library的文件夹中。每个站点都有自己的库。使用库项目时，Dreamweaver不是在网页中插入库项目，而是插入一个指向库项目的链接。也就是说，Dreamweaver将向文档中插入该项目的HTML源代码副本，并添加一个包含对原始外部项目的引用的HTML注释。