
11.2 创建模板
在网页制作中很多工作是重复的,如页面的顶部和底部在很多页面中都一样,而同一栏目中除了某一块区域外,版式、内容完全一样。如果将这些工作简化,就能够大幅度提高效率,而Dreamwever中的模板就可以解决这一问题,模板主要用于同一栏目中的页面制作。
11.2.1 在空白文档中创建模板
直接创建模板的具体操作步骤如下:
01 执行“文件”|“新建”命令,弹出“新建文档”对话框,在对话框中选择“空白页”选项卡中的“HTML模板”|“无”选项,如图11-1所示。

图11-1 “新建文档”对话框
02 单击“创建”按钮,即可创建一个模板网页,如图11-2所示。

图11-2 创建空白文档
03 执行“文件”|“保存”命令,弹出“Dreamweaver”提示对话框,如图11-3所示。

图11-3 “Dreamweaver”提示对话框
04 单击“确定”按钮,弹出“另存模板”对话框,在对话框中的“另存为”文本框中输入名称,如图11-4所示。

图11-4 “另存模板”对话框
05 单击“保存”按钮,可以保存模板文件,如图11-5所示。

图11-5 保存模板文件
11.2.2 从现有文档创建模板
在Dreamweaver中,有两种方法可以创建模板。一种是将现有的网页文件另存为模板,然后根据需要再进行修改;另外一种是直接新建一个空白模板,再在其中插入需要显示的文档内容。

从现有文档中创建模板的具体操作步骤如下:
01 打开网页文档,如图11-6所示。

图11-6 打开网页文档
02 执行“文件”|“另存为模板”命令,弹出“另存模板”对话框,在对话框中的“站点”下拉列表中选择11.2.2,在“另存为”文本框中输入moban,如图11-7所示。

图11-7 “另存模板”对话框
03 单击“保存”按钮,弹出“Dreamweaver”提示对话框,如图11-8所示。

图11-8 “Dreamweaver”提示对话框
04 单击“是”按钮,即可将现有文档另存为模板,如图11-9所示。

图11-9 保存模板文件
★提示★
不要随意移动模板到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。此外,不要将Templates文件夹移动到本地根文件夹之外,以免引用模板时路径出错。
11.2.3 创建可编辑区域
可编辑区域就是基于模板文档的未锁定区域,是网页套用模板后,可以编辑的区域。在创建模板后,模板的布局就固定了,如果要在模板中针对某些内容进行修改,即可为该内容创建可编辑区域。创建可编辑区域的具体操作步骤如下:
01 打开模板文档,如图11-10所示。

图11-10 打开模板文档
02 将光标置于要创建可编辑区域的位置,执行“插入”|“模板对象”|“可编辑区域”命令,弹出“新建可编辑区域”对话框,如图11-11所示。

图11-11 “新建可编辑区域”对话框
03 单击“确定”按钮,创建可编辑区域,如图11-12所示。
★提示★
模板中除了可以插入最常用的“可编辑区域”外,还可以插入一些其他类型的区域,它们分别为:“可选区域”、“重复区域”、“可编辑的可选区域”和“重复表格”。由于这些类型需要使用代码操作,并且在实际工作中并不经常使用,因此这里我们只简单地介绍一下。
●“可选区域”是用户在模板中指定为可选的区域,用于保存有可能在基于模板的文档中出现的内容。使用“可选区域”,可以显示和隐藏特别标记的区域,在这些区域中用户将无法编辑内容。
●“重复区域”是可以根据需要在基于模板的页面中复制任意次数的模板区域。使用“重复区域”,可以通过重复特定项目来控制页面布局,如目录项、说明布局或者重复数据行。重复区域本身不是可编辑区域,要使重复区域中的内容可编辑,请在重复区域内插入可编辑区域。
●“可编辑的可选区域”是可选区域的一种,模板可以设置显示或隐藏所选区域,并且可以编辑该区域中的内容,该可编辑区域是由条件语句控制的。
●“重复表格”是重复区域的一种,使用“重复表格”可以创建包含重复行的表格格式的可编辑区域,可以定义表格属性并设置哪些表格单元格可编辑。

图11-12 创建可编辑区域
★提示★
作为一个模板,Dreamweaver会自动锁定文档中的大部分区域。模板设计者可以定义基于模板的文档中哪些区域是可编辑的。在创建模板时,可编辑区域和锁定区域都可以更改。但是,在基于模板的文档中,模板用户只能在可编辑区域中进行修改,至于锁定区域则无法进行任何操作。