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面板，就可以看到代码的颜色都成了灰色，表示不可编辑，只有在可编辑区域的位置，有一些文字不是灰色的代码如下：
<td>
<!-- InstanceBeginEditable name="EditRegion1" -->EditRegion1
<!-- InstanceEndEditable -->
</td>
<td>标签定义的单元格就是右上角的那个。

在这个单元格中，夹在注释语句<!-- InstanceBeginEditable name="EditRegion1" -->和<!-- InstanceEndEditable -->之间的内容是可编辑的，其余内容是不可编辑的。

是否“可编辑”是指由模板创建的新文档是否可编辑，模板中的内容是随时都可编辑的。

这样就可以在可编辑的单元格里面插入任何内容了。

在设定好可编辑区域的内容后选择菜单“文件→保存”命令，保存所做的修改，这样一个页面就做好了。

通过这种方法，可以很快地制作出很多布局形式相同，而内容不同的网页，可以大大提高网页制作的效率。

在创建可编辑区域时要注意的几点：
（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提供了自动更新所有网页的功能，解决了这个问题。

还是结合一个例子来说明这个问题，例如使用上面建立的模板已经制作了一个或者多个页面，也就是在两个可编辑区域中添加了内容。

这时我们会发现，这个页面有缺陷，因为所有内容都放在表格里，左侧的导航板是由若干
幅图片拼成的，每幅图片占一个单元格，因此必须保证每个单元格中图片的高度相同才能使各幅图片之间没有缝隙，而刚才只设置了两个可编辑区域，这样如果放置内容的单元格里面的东西太多就会把表格撑大，使导航板中间出现裂缝。

先来探讨这个问题出现的关键原因。

锁定的区域虽然在Dreamweaver中不可编辑，但对于浏览器来说不存在可不可编辑的问题。

当内容区域变大以后，导航板以及“HOME”图片下面的单元格都必须扩大以保证表格的完整性，这样各个单元格就都扩大了，使得图片之间出现缝隙。

现在我们来寻找解决办法，各个图片所在的单元格不能扩大，但“HOME”图片下面的单元格（即放置“您的建议”的单元格）即使扩大也没有关系，因此只要把这个单元格变为可编辑区域即可。

当从此模板创建新文档时，如果内容比较多，而导致导航板出现裂缝时，就应在“HOME”图片下面的单元格里面加入一个或多个<br>标签（按下“Shift”键的同时按“Enter”键），强制扩大此单元格，使这个单元格的高度加上导航板的高度略大于内容单元格的高度。

因此解决的办法就是把左侧导航条下侧的空格变为可编辑区域，在生成每个页面的时候，都用一个或多个<br>标签消除图片间的裂缝。

在修改了模板之后，选择菜单“文件→保存”命令，保存模板，这时会出现一个提示框询问是否更新所有使用了该模板的页面，这时单击“更新”按钮，会弹出一个对话框，显示更新的进程，并在更新完所有页面后总结更新的总页面数和更新时间等数据，这样，就会在修改了模板之后，自动更新所有由该模板创建的网页文件。

然后单击“关闭”按钮关闭对话框。

这样对于维护一个网站来说真是太轻松了。

在这里还应该介绍刚才用到的“HOME”图片下面的单元中内容的制作方法。

这个单元格中有一条竖线，这里不能用一张完整的图片填充单元格，否则即使单元格扩大了，图片也不能扩大，导致竖线无法撑满单元格的上下，并且随着不同的页面，这个单元格的高度也不确定。

使用背景图片能使竖线的长度自动适应单元格的高度，即首先制作一幅1个像素高的图片，图片宽度是单元格的宽度，颜色是白色的，在竖线位置是一个黑色像素，然后在这个单元格里单击鼠标左键，并打开“属性”面板。

在图片“属性”面板上有两个背景输入框，上面的“背景”输入框用于指定背景图片，下面的“背景颜色”输入框用于指定背景颜色。

单元格中会自动排列背景图片，这样把上面制作的1个像素高的图片叠起来填满整个单元格，看起来的效果好像一条黑色竖线，这也是背景图片十分重要的作用。

用这种方法还有一个好处，浏览器只要下载一个很小的图片就可以了，否则下载一个单元格大小的图片必定要多花很多时间。

12.2 库
12.2.1 库与库面板
在Dreamweaver中可以使用库项目机制来保持站点的一致性，使用库项目可以在文档中快速输入在站点中重复使用的元素对象。

库项目不仅具有使用上的便利，而且具有维护更新方面的优势，对于重复使用的定制为库项目的内容，如果需要修改，不必到使用该内容的页面中一一进行修改，只需将该库项目进行修改，就可以实现对站点中所有使用该库项目的文档同时进行更新，实现风格的统一更新。

可以定制为库项目的内容，不仅仅限于元素对象，Dreamweaver可以将文档中的任意内容定制为库项目，使其在其他地方被重复地使用。

库项目内容的广泛性更让它的使用范围大增，使用起来更加方便上手。

12.2.1 创建库项目
在使用库项目之前，首先要定制库项目。

定制库项目的操作步骤如下。

（1）打开一个文档。

（2）选择菜单“窗口→资源”命令，打开“资源”面板。

（3）单击“资源”面板左侧的按钮，将“资源”面板切换到“库”页，可以看到在定制之前“库”中内容是空的。

（4）选中需要定制为库项目的内容，这里选择一幅图片。

（5）将选定的对象拖动到“库”面板中。

（6）返回到“库”面板中，可以看到刚才定制的库项目，刚刚创建的库项目名称处于可编辑状态，可以为库项目重命名。

在库面板中可以看到库的名称、大小和完整路径等属性，在资源管理器中访问MyFirstSite站点文件夹，可以看到在站点根目录下新建了一个Library文件夹，用于放置库项目，刚才创建的库项目被保存到该文件夹下，文件名为lib1.lbi。

通过如下方法也可以创建库项目。

·在文档中选择需要创建为库项目的部分，单击“资源”面板右下方的图标。

·或者在文档中选择需要创建为库项目的部分，选择菜单“修改→库→增加对象到库”命令。

12.2.2 插入库项目
对于创建好的库项目，可以插入到其他文档中使用，具体的操作方法如下。

（1）打开需要插入库项目的文档，或者新建一个空文档。

（2）将光标置于需要插入库项目的位置。

（3）在“库”面板中选中需要插入到文档中的库项目。

（4）单击“库”面板左下方的“插入”按钮，或者直接将选中的库项目拖动到文档中。

12.2.3 操作库项目
使用“库”面板可以编辑库项目的内容。

1.重命名库项目
对于创建的库项目，可以为其重命名，在“库”面板中单击库项目的名称，则库项目处于可编辑状态，为库项目输入新的名称lib，刷新后会打开“更新文件”对话框，如图12.23所示。

如果要更新站点中所有使用该项目的文档，可以单击“更新”按钮；如果要避免更新任何使用该项目的文件，可以单击“不更新”按钮。

在代码视图中也可以直接更新文件，将lib.htm文件切换到代码视图，可以看到刚刚创建的库项目，与以前的网页相比，含有库项目的网页在<body>和</body>标签之间增加了如下代码：
<!-- #BeginLibraryItem "/Library/Untitled.lbi" -->
<img src="images/compass_logo.gif" width="250" height="40" border="0">
<!-- #EndLibraryItem -->
将以上代码中的Untitled更改为lib即可手工更新页面文档。

2.编辑库项目
选择菜单“窗口→属性”命令，打开“属性”面板，可以看到“属性”面板由图像的属性项变为库项目的属性项。

被定义为库项目的含有链接的图像就不再能够通过该“属性”面板设置属性，如果想要编辑库项目的内容，必须将库项目的内容打开。

打开库项目可以通过以下几种方法。

·在“库”面板中，选中需要打开的库项目，然后单击编辑按钮。

·在“库”面板中，双击需要打开的库项目。

·在文档中选中库项目，然后在库项目“属性”面板中单击“打开”按钮。

在打开的库项目文档中，选中库项目文档中的内容，这里选择文档中的图片，“属性”面板展示出图像的属性项，在“属性”面板中可以设置该图像的属性。

当然，也可以在库项目文档中插入其他的图像或者文本。

编辑完成后，选择菜单“文件→保存”，将库项目保存，这时会打开“更新库项目”对话框。

单击“更新”按钮，更新列出的使用库项目的文件。

更新完毕后，打开“更新页面”对话框，汇报更新页面的
情况。

单击“关闭”按钮，完成更新操作。

3.更新整个站点或所有使用特定库项目的文档
若要更新整个站点或所有使用特定库项目的文档，操作方法如下。

（1）选择菜单栏“修改///库///更新页面”，出现“更新页面”对话框。

（2）在“查看”弹出式菜单中执行下列操作之一。

选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。

这会更新所选站点中的所有页面，使其使用所有库项目的当前版本。

选择“文件使用”，然后从相邻的弹出菜单中选择库项目名称。

这会更新当前站点中使用所选库项目的页面。

（3）确保在“更新”选项中选择了“库项目”。

（4）单击“开始”，Dreamweaver按照指示更新文件。

如果选择了“显示记录”选项，Dreamweaver将提供关于它试图更新的文件的信息，包括它们是否成功更新的信息。

4.删除库项目
若要从库中删除库项目，操作方法如下。

（1）在资源面板中，点击面板左侧的“库”按钮（）。

（2）选择要删除的库项目，单击底部的“删除”按钮（），或者按“Delete”键，然后确认要删除的库项目。

12.2.4 将库项目与源文件分离
如果想将库项目从源文件中分离出来，可按如下步骤操作。

（1）选中要与文档分离的库项目。

（2）选择菜单“窗口→属性”命令，打开“属性”面板，在“属性”面板中选择“从源文件中分离”一项，将会弹出警告信息对话框。

该对话框提示用户如果确定要将该库项目从源文件中分离，则当库项目的源文件被改变时，它将不会自动更新，从源文件中分离出来的库项目将变得可编辑。