dreamweaver第十二章 模板与库

表格、框架和图层都是HTML中的标准内容，是实实在在的HTML标签，而模板和库是Dreamweaver中提供的一种机制，能够帮助网页设计师快速制作大量布局相似的网页。这在建设网站时十分重要，通常在一个网站中，可能有几十甚至几百个页面，然而并非每个页面的布局都不相同。一般来说页面被分为若干级，首页是第一级，它是网站的门户，因此一般是独一无二的。由首页进入后就是二级页面，一个网站一般分为若干个栏目，每一个栏目进去就是三级页面。当然还可以有更多的层次，这样内容相似的页面往往使用相同的布局，各页面不同的只是具体内容。

12.1 模板

12.1.1 认识模板

例如图12.1所示的是一个网站的二级页面，左侧是导航板，单击各个栏目的名称可以进入相应的页面。除了这个页面之外，其他的二级页面都与此页面布局相同。仔细观察这个页面可以看出，整个页面中是一个不规则的表格，每页的具体内容放在中间最大的单元格里，而周围的单元在所有页面中均相同。

图12.1 示例页面

Dreamweaver的模板提供了这样的功能，把网页的布局与内容分离，布局设计好之后，存储为模板，相同布局的页面通过模板创建。Dreamweaver同时提供对布局的保护功能以及对所有页面的快速更新能力。

12.1.2 制作模板

制作模板与制作普通页面完全相同，只是通常并不把页面的所有部分都完成，而只是制作导航板和标题栏等各个页面的公有部分，这些部分一般在网页的四周，而把中间留给每页的具体内容。

例如我们已经制作了一个页面。它的大部分已经做好了，如导航条等，因为这些部分对很多页面是相同的。还有几个部位是空白的，例如右上角有一个小的矩形，它是为了每个不同的页面填入不同的图片而留的，因此在制作模板页面时要空着。此外最大面积的单元格也是空白的，准备为各个页面放具体内容。

这个页面目前和普通的网页文件没有什么不同，下面我们就来介绍如何把它变为模板，以及如何使用模板。

如果“资源”面板没有打开，就选择菜单“窗口→资源”命令打开它，并按下左侧的 按钮。在这个列表中将列出站点中的所有模板，目前还是空的，因为还没有模板。

现在回到刚才制作好的那个网页，选择菜单“文件→另存为模板”命令，这时会打开对话框。首先在最上面的下拉框中确定要为哪个站点制作模板，当然目前只有一个站点。然后在最下面的输入框中为这个模板起一个名字，然后单击“保存”按钮，这个页面就保存为模板了。现在再观察“资源”面版的模板列表，其中已经列出了刚才保存的模板。

12.1.3 使用模板 上面我们创建了一个模板，并保存好了，现在我们来尝试使用这个模板。

1.使用模板创建新的网页 首先来学习用这个模板创建一个新的网页。选择菜单“文件→新建”命令，这时会打开对话框，选择上侧的“模板”页。可以看到对话框分为3列，左边是已经设定好的所有网站，这里一直在使用的“MyFirstSite”，然后就可以在中间的列表中看到在这个网站中已经存在的模板了，它恰是上一步我们制作好的，右面是选中的模板的缩略图。现在选中temp01模板，然后单击“创建”按钮，这时就打开了一个网页编辑窗口。

这个网页的右上角的文字说明了这个文件是由temp01模板创建的。但是如果这时试图编辑这个网页，例如在空白的区域加入一些文字，都是做不到的，这是因为，刚才我们制作模板的时候没有设定“可编辑区域”，也就是说，如果没有设定为“可编辑区域”，网页上的任何内容都是锁定的，不能编辑。

因此现在需要修改模板文件，为它设定可编辑区域。在“资源”面板的模板列表中，用鼠标双击temp01模板的缩略图，会打开相应的文档窗口。用鼠标在右上角的空格里单击一下，然后单击鼠标右键，在出现的菜单中选择“模板→新建可编辑区域”命令，这时出现对话框询问新建的可编辑区域的名称，这里使用默认名称，直接单击“确定”按钮，这样就设定好了一个可编辑区域。同样我们可以设定另一个可编辑区域。

可以看到在这两个可编辑区域上都有一个标签说明了它们是可编辑区域。这时再回到刚才由tepm01模板生成的网页文件，可以看到，它已经自动更新了，包含了两个可编辑区域。

如果此时打开HTML面板，就可以看到代码的颜色都成了灰色，表示不可编辑，只有在可编辑区域的位置，有一些文字不是灰色的代码如下：

EditRegion1

标签定义的单元格就是右上角的那个。在这个单元格中，夹在注释语句和之间的内容是可编辑的，其余内容是不可编辑的。是否“可编辑”是指由模板创建的新文档是否可编辑，模板中的内容是随时都可编辑的。

这样就可以在可编辑的单元格里面插入任何内容了。在设定好可编辑区域的内容后选择菜单“文件→保存”命令，保存所做的修改，这样一个页面就做好了。通过这种方法，可以很快地制作出很多布局形式相同，而内容不同的网页，可以大大提高网页制作的效率。

在创建可编辑区域时要注意的几点：

（1）如果页面上有表格，可以将整个表格或者某个单元格标记为可编辑区域，不过一次只能设置一个单元格。在上面的例子里就是分别把两个单元格设为可编辑区域了。

（2）如果要将原来的可编辑区域变为不可编辑区域，可以选择菜单“修改→模板→删除模板标记”命令。

编辑不可编辑区域，用户只可以修改那些以非高亮显示的可编辑区域代码。

2.将模板应用到已经存在的文档 Dreamweaver还提供了一个非常有用的功能，就是可以把模板应用到已经存在的网页中，当然这要求该文档要符合一定的要求。

首先来想一想，这个功能有什么实际的用处呢？它实现了网页的形式与内容的分离，可以在保持内容不变的情况下，更新网页的形式。比如说，要为一个饮料公司做网站，那么冬季和夏季的网页颜色、风格应该有所不同，冬季的网页应该使人觉得温暖，就像电视广告里说的“冬天要喝热果珍”；而夏季的网页应该使人感到凉爽，也像广告里说的“晶晶亮，透心凉”。如果就可以像给手机换彩壳一样给网页“换壳”该多好啊！Dreamweaver就可以实现这个功能。

要说明的是：要实现网页更换模板的前提条件就是两个模板的可编辑区域一一对应。这样原来的网页里的可编辑区域里的内容到了新模板里才可正确显示。

要将模板应用到已经存在的文档，可以用下面3种方式之一。

（1）打开已经存在的文档，选择“修改→模板→应用模板到页”命令，这样会弹出“选择模板”对话框，在对话框的模板列表中选择一个模板，然后单击“选定”按钮。

（2）打开已经存在的文档和“资源”面板的模板项，在面板中选择模板并将它拖放到文档窗口中。 （3）打开已经存在的文档和“资源”面板的模板项，在面板中选择模板并单击 按钮，将模板应用到文档中。

在应用模板到已经存在的文档中之前，Dreamweaver会比较该文档新旧两个模板的可编辑区域的名字，找到与新模板名字相同的可编辑区域，并用新模板中的内容来替换原来模板中相同名字的可编辑区域中的内容。如果原来的模板中存在与新模板不同名的可编辑区域，或者原来文档中的内容与新模板的各个区域不匹配，Dreamweaver会弹出一个对话框询问如何处理这些不匹配的内容，用户可以在该对话框中选择新模板的一个可编辑区域来接纳这些不匹配的内容。

我们来做一个试验，试一试这个功能。先用布局模式建立一个最简单的页面。

这个页面包括了一个布局表格，表格里面有两个布局单元格。选中其中的一个布局单元格，然后单击鼠标右键，在出现的菜单中选择“模板→新建可编辑区域”命令，这时会出现一个提示框，提示加入一个可编辑区域以后，这个文档将自动转换为模板。单击“确定”按钮，这时，又会弹出一个询问框，要求输入可编辑区域的名字，使用默认值，单击“确定”按钮，这样就加入了一个可编辑区域。同样处理，把另一个布局单元格也转换为可编辑区域，并给它起一个不同于默认的名字，例如ER2。这样做的目的是为了使前一个可编辑区域的名称和上面做的temp01模板的第一个可编辑区的名称相同，而使后一个不相同。现在来看一看在更换模板的时候会出现怎样的结果。

设定好两个可编辑区以后，把它保存起来，这样就又做好了一个模板，命名为temp02，然后按照前面介绍的方法，由这个模板创建一个网页，分别在两个可编辑区域中填入一些文字。

下面要进行更换模板的关键步骤了。打开“资源”面板，并显示模板列表。选中前面制作好的temp01模板，然后单击面板左下角的“应用”按钮，这就是要把temp01模板应用于这个网页了。这时会出现对话框。

可以看到，在这个对话框的列表中列出了ER2可编辑区域，它的后面注明“未解析”，这是因为ER2在temp01模板中找不到匹配的区域，而另一个可编辑区EditRegion1有匹配的区域，就没有被列出来。

在这个对话框中，用鼠标单击“ER2”，也就是选中它，然后打开下拉列表。其中有几个选项可以选择：“不在任何地方”表示放弃ER2区域中的内容；EditRegion1表示把ER2区域中的内容加入到EditRegion1区域中；EditRegion2表示把ER2区域中的内容加入到EditRegion2区域中；doctitle是模板中的另一个可编辑区，当任何一个文档在转换成模板时，Dreamweaver都会自动设定这个可编辑区域，目的是修改页面的标题。这里选择EditRegion2。单击“确定”按钮完成设置。

这时可以看到确实已经成功地更换了新的模板。

3.将文档和模板分离 使用模板创建文档或对一个已经存在的文档应用了模板之后，该模板和所有使用了该模板的文档之间就建立了一种链接关系，当模板的内容被更改之后，所有应用该模板的文档也可以做相同的更改，而不用将这些文档一一打开加以编辑。

将模板应用到页面上之后，可编辑区域的位置和所有的不可编辑区域都是不可以更改的。如果想要修改它们，一个方法是更改该页面的模板，并执行更新命令，另一个方法是将页面和模板分离，这样就可以修改页面上的任何部分。但是，当页面和模板分离之后，如果模板被更新，由于页面和模板已经脱离了链接关系，所以页面将不被更新。

要将页面和模板分离，只需打开文档，然后选择“修改→模板→从模板中分离”命令，页面上所有的部分就都变成可编辑的了。

12.1.4 修改模板以更新文档

前面介绍了使用模板的基本步骤，概括起来就是先制作一个普通的页面，但是这个页面的某些部分是空白的，然后把它保存为模板，并进行编辑，主要的工作就是为它设定若干个可编辑区域，这样模板就建好了。在使用的时候，先由模板创建网页，然后只在可编辑区域里面添加上适当的内容就可以了。

模板的作用还不仅于此，它还有更大的作用。事实上，建立网站并不是一劳永逸的事，网页可能会更新，甚至栏目也有可能要增加，如果很多网页是使用同一个模板创建的，那么手工逐个修改页面使新旧页面保持一致将是十分繁琐的事。Dreamweaver提供了自动更新所有网页的功能，解决了这个问题。

还是结合一个例子来说明这个问题，例如使用上面建立的模板已经制作了一个或者多个页面，也就是在两个可编辑区域中添加了内容。这时我们会发现，这个页面有缺陷，因为所有内容都放在表格里，左侧的导航板是由若干