第八章使用模板和库项目

1、第第8 8章章 使用模板和库项目使用模板和库项目通常在一个网站中会有大量风格和内容基本相似的页面，如果通常在一个网站中会有大量风格和内容基本相似的页面，如果逐页建立、修改会浪费大量的人力物力，并且效率不高，整逐页建立、修改会浪费大量的人力物力，并且效率不高，整个站点中的网页也很难做到有统一的外观及结构。为此，我个站点中的网页也很难做到有统一的外观及结构。为此，我们可以借助们可以借助Dreamweaver 的模板功能来简化操作。模板的的模板功能来简化操作。模板的功能就是把网页布局和内容相分离，在布局好之后将其存储功能就是把网页布局和内容相分离，在布局好之后将其存储为模板，这样相同布局的页面可以通

2、过模板创建，因此能够为模板，这样相同布局的页面可以通过模板创建，因此能够极大提高工作效率。而且使用模板和库维护修改网站也十分极大提高工作效率。而且使用模板和库维护修改网站也十分容易，可以在短时间内重新设计网站并对大量的网页进行修容易，可以在短时间内重新设计网站并对大量的网页进行修改。改。8.1 8.1 模板的使用模板的使用在在Dreamweaver CS5中有许多种创建模板的方法，可以创中有许多种创建模板的方法，可以创建空白模板，也可以基于现存文档创建模板，除此之外建空白模板，也可以基于现存文档创建模板，除此之外，还可以将现有的，还可以将现有的HTML文档另存为模板，然后根据需要文档另存为模板

3、，然后根据需要加以修改。加以修改。8.1.1 8.1.1 创建模板创建模板模板其实就是一个模板其实就是一个HTML文档，只是在文档，只是在HTML文档中增加了文档中增加了模板标记。有两种方法可以创建模板：一种是直接新建模板标记。有两种方法可以创建模板：一种是直接新建一个空白模板，再在其中插入需要显示的文档内容；另一个空白模板，再在其中插入需要显示的文档内容；另一种是将现有的网页文件另存为模板，然后再根据需要一种是将现有的网页文件另存为模板，然后再根据需要进行修改。进行修改。1直接创建模板直接创建模板2从现有文档创建模板从现有文档创建模板8.1.2 8.1.2 管理模板管理模板创建好模板后，模板

4、会在创建好模板后，模板会在“资源资源”面板中显示。可以在面板中显示。可以在“资资源源”面板中队模板进行管理，主要包括修改、删除和重面板中队模板进行管理，主要包括修改、删除和重命名模板等。命名模板等。选择选择“窗口窗口”|“资源资源”命令，打开命令，打开“资源资源”面板，单击面板面板，单击面板上的上的“模板按钮模板按钮”，在模板列表上会显示所有的模板，在模板列表上会显示所有的模板，如图如图12.5所示。所示。1修改模板修改模板2删除模板删除模板3重命名模板重命名模板8.1.3 8.1.3 创建嵌套模板创建嵌套模板嵌套模板是指在模板中嵌套另一个模板。嵌套模板对于控制嵌套模板是指在模板中嵌套另一个模

5、板。嵌套模板对于控制共享许多设计元素的站点页面中的内容很有用，但在各共享许多设计元素的站点页面中的内容很有用，但在各页之间有些差距。若要创建嵌套模板，必须首先保存原页之间有些差距。若要创建嵌套模板，必须首先保存原始模板或基本模板，然后根据该模板创建新文档，最后始模板或基本模板，然后根据该模板创建新文档，最后将该文档另存为模板。在新模板中，可以在原来的基本将该文档另存为模板。在新模板中，可以在原来的基本模板中定义的可编辑区域中进一步定义区域。基本模板模板中定义的可编辑区域中进一步定义区域。基本模板中的可编辑区域被传递到嵌套模板，并在根据嵌套模板中的可编辑区域被传递到嵌套模板，并在根据嵌套模板创建

6、的页面中保持可编辑，除非在这些区域中又插入了创建的页面中保持可编辑，除非在这些区域中又插入了新的模板区域。新的模板区域。8.1.4 8.1.4 定义模板区域定义模板区域在模板中定义了文档的布局和大致框架。在使用模板之前，在模板中定义了文档的布局和大致框架。在使用模板之前，首先要了解模板的两个区域，即非编辑区域和编辑区域。首先要了解模板的两个区域，即非编辑区域和编辑区域。模板中创建的元素在基于模板的页面中通常是锁定区域，或模板中创建的元素在基于模板的页面中通常是锁定区域，或称之为非编辑区域，要编辑模板，必须在模板中定义可编称之为非编辑区域，要编辑模板，必须在模板中定义可编辑区域。在使用模板创建文

7、档时只能改变可编辑区域中的辑区域。在使用模板创建文档时只能改变可编辑区域中的内容，锁定区域在文档编辑过程中始终保持不变。内容，锁定区域在文档编辑过程中始终保持不变。1模板区域的类型模板区域的类型2定义可编辑区域定义可编辑区域8.1.5 8.1.5 实例实例创建网站的模板页面创建网站的模板页面8.2 8.2 使用模板创建网页文档使用模板创建网页文档在在Dreamweaver中，可以以模板为基础创建新的文档，或中，可以以模板为基础创建新的文档，或将一个模板应用于已有的文档。使用这样的方法创建网将一个模板应用于已有的文档。使用这样的方法创建网页文档，可以保持整个网站风格的统一性，并能大大提页文档，可

8、以保持整个网站风格的统一性，并能大大提高制作效率。高制作效率。8.2.1 8.2.1 创建基于模板的文档创建基于模板的文档创建基于模板的新文档的操作步骤如下。创建基于模板的新文档的操作步骤如下。（1）选择）选择“文件文件”|“新建新建”命令，在弹出的命令，在弹出的“新建文档新建文档”对话框中选择对话框中选择“模板中的页模板中的页”|“站点站点newweb”中的中的muban1，如图，如图12.29所示。所示。（2）单击）单击“创建创建”按钮，即可创建一个基于模板的网页文按钮，即可创建一个基于模板的网页文档，如图档，如图12.30所示所示（3）对新文档进行修改。）对新文档进行修改。8.2.2 8

9、.2.2 分离模板分离模板用模板设计网页时，模板有很多的锁定区域。这些区域是不用模板设计网页时，模板有很多的锁定区域。这些区域是不可编辑的。若要更改基于模板的文档的锁定区域，必须可编辑的。若要更改基于模板的文档的锁定区域，必须将文档从模板中分离。当文档被分离后，它将成为一个将文档从模板中分离。当文档被分离后，它将成为一个普通的文档，不再具有可编辑区域或锁定区域，也不再普通的文档，不再具有可编辑区域或锁定区域，也不再和任何模板相关联。和任何模板相关联。选择选择“修改修改”|“模板模板”|“从模板中分离从模板中分离”命令，即可将网页命令，即可将网页从模板中分离，模板中的锁定区域将会全部删除，如图从

10、模板中分离，模板中的锁定区域将会全部删除，如图12.31所示。所示。8.2.3 8.2.3 更新模板页面更新模板页面应用模板创建其他网页可保持整个网站的一致风格，又可节应用模板创建其他网页可保持整个网站的一致风格，又可节省时间。模板的最大作用就是能一次更新多个页面，做省时间。模板的最大作用就是能一次更新多个页面，做到一改全改。对模板进行修改时，到一改全改。对模板进行修改时，Dreamweaver会提示会提示是否更新基于该模板的页面，也可使用更新命令来手动是否更新基于该模板的页面，也可使用更新命令来手动更新当前页面或整个站点。更新当前页面或整个站点。1更新基于模板的文档更新基于模板的文档2更新站

11、点模板更新站点模板8.3 8.3 库的使用库的使用库通常用来存放文档中的页面元素，如文本、图像、库通常用来存放文档中的页面元素，如文本、图像、Flash动画等。这些页面元素被广泛应用于整个站点，并且能动画等。这些页面元素被广泛应用于整个站点，并且能够被反复使用，因此它们被称作库项目。够被反复使用，因此它们被称作库项目。8.3.1 8.3.1 库项目的概念库项目的概念库是一种特殊的文件，它包含可添加到网页文档中的一组单库是一种特殊的文件，它包含可添加到网页文档中的一组单个资源或资源副本。库里面的这些资源被称为库项目。个资源或资源副本。库里面的这些资源被称为库项目。库项目可以使用图像、表格或库项目

12、可以使用图像、表格或SWF文件等元素。当编辑文件等元素。当编辑某个库项目时，可以自动更新应用该库项目的所有网页某个库项目时，可以自动更新应用该库项目的所有网页文档。文档。8.3.2 8.3.2 创建库项目创建库项目在在Dreamweaver CS5文档中，可以将网页文档中的任何元文档中，可以将网页文档中的任何元素创建为库项目，这些元素包括文本、图像、表格、表素创建为库项目，这些元素包括文本、图像、表格、表单、插件、单、插件、ActiveX控件以及控件以及Java程序等。程序等。要使用库，必须首先创建库。创建库有两种方法：一是新建要使用库，必须首先创建库。创建库有两种方法：一是新建库，二是将已经

13、做好的网页内容转换为库。库，二是将已经做好的网页内容转换为库。在打开的网页中，由于一些内容已经做好了，因此只需将其在打开的网页中，由于一些内容已经做好了，因此只需将其转换成库对象即可。选择转换成库对象即可。选择“窗口窗口”|“资源资源”命令，打开命令，打开“资源资源”面板，在左侧的按钮中单击面板，在左侧的按钮中单击“库库”按钮切换到按钮切换到“库库”面板，如图所示。面板，如图所示。8.3.3 8.3.3 插入库插入库创建好库对象后，就可以在新文档中使用它了。创建好库对象后，就可以在新文档中使用它了。添加库的具体操作步骤如下。添加库的具体操作步骤如下。（1）新建文档，在网页中插入一个）新建文档，

14、在网页中插入一个3行行1列的表格，表格宽列的表格，表格宽度为度为800px，记为表格，记为表格1，如图所示。，如图所示。（2）将鼠标置于表格第）将鼠标置于表格第2行单元格中，插入一个行单元格中，插入一个1行行2列的列的表格，记为表格表格，记为表格2，如图所示。，如图所示。（3）将鼠标置于表格）将鼠标置于表格2第第1列单元格中，在列单元格中，在“库库”面板中选面板中选中要插入的库中要插入的库left，单击面板下方的，单击面板下方的“插入插入”按钮，如图按钮，如图所示。所示。（4）此时库项目）此时库项目left便被添加到新建的网页文档中，如图所便被添加到新建的网页文档中，如图所示。示。 8.3.4

15、 8.3.4 编辑和更新库项目编辑和更新库项目通过库可以有效地管理和使用站点上的各种资源。当编辑库通过库可以有效地管理和使用站点上的各种资源。当编辑库项目时，可以更新使用该项目的所有文档。如果选择不项目时，可以更新使用该项目的所有文档。如果选择不更新，那么文档将保持与库项目的关联，可以在以后更更新，那么文档将保持与库项目的关联，可以在以后更新它们，具体操作步骤如下。新它们，具体操作步骤如下。（1）打开库文件）打开库文件bottom，选中文字，在属性面板中输入链，选中文字，在属性面板中输入链接，如图所示。接，如图所示。（2）选择）选择“文件文件”|“保存保存”命令，保存对库的修改。之后命令，保存

16、对库的修改。之后选择选择“修改修改”|“库库”|“更新页面更新页面”命令，如图所示。命令，如图所示。（3）弹出）弹出“更新页面更新页面”对话框，设置对话框，设置“查看查看”为为“整个站整个站点点”，“更新更新”为为“库文件库文件”，单击，单击“开始开始”按钮，按钮，Dreamweaver将按照指示更新文件，如图所示。将按照指示更新文件，如图所示。（4）关闭对话框后可见应用库的文档根据库的修改页面进）关闭对话框后可见应用库的文档根据库的修改页面进行了修改。如果勾选了行了修改。如果勾选了“显示记录显示记录”复选框，复选框，Dreamweaver将提供关于它试图更新的文件的信息，包将提供关于它试图更

17、新的文件的信息，包括它们是否成功更新的信息。括它们是否成功更新的信息。8.3.5 8.3.5 使库对象脱离源文件使库对象脱离源文件有时候，用户需要将网页中的库和源文件分离，进而能够在有时候，用户需要将网页中的库和源文件分离，进而能够在网页中直接编辑。这时可以选中页面中的库对象，网页中直接编辑。这时可以选中页面中的库对象，“属属性性”面板变成如图所示。面板变成如图所示。8.4 8.4 本章小结本章小结Dreamweaver 提供了强大的模板，可以快速地创建大量风提供了强大的模板，可以快速地创建大量风格统一的网页。库项目是可以在多个页面中重复使用的格统一的网页。库项目是可以在多个页面中重复使用的存储页面元素，每当更改某个库项目的内容时，都可以存储页面元素，每当更改某个库项目的内容时，都可以更新所有使用该项目的页面