![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
11.2 创建模板
在网页制作中很多工作是重复的,如页面的顶部和底部在很多页面中都一样,而同一栏目中除了某一块区域外,版式、内容完全一样。如果将这些工作简化,就能够大幅度提高效率,而Dreamwever中的模板就可以解决这一问题,模板主要用于同一栏目中的页面制作。
11.2.1 在空白文档中创建模板
直接创建模板的具体操作步骤如下:
01 执行“文件”|“新建”命令,弹出“新建文档”对话框,在对话框中选择“空白页”选项卡中的“HTML模板”|“无”选项,如图11-1所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00530.jpg?sign=1739672093-62bdZMv6nz4TOdInNtb9r9z5Yr2EZtDt-0-f108f6752edd81fe92669c9227a0efe2)
图11-1 “新建文档”对话框
02 单击“创建”按钮,即可创建一个模板网页,如图11-2所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00531.jpg?sign=1739672093-utOWrwM2oPNiVL5EzszP4PT3pBkOGR3u-0-31902bdefbfa209155f44ea1bfa86ac5)
图11-2 创建空白文档
03 执行“文件”|“保存”命令,弹出“Dreamweaver”提示对话框,如图11-3所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00532.jpg?sign=1739672093-b9wfv9Ge4nyqA6NJtOSvl79NkkpkivyQ-0-7a21b5f33f3ec58e77107f0f2668b71e)
图11-3 “Dreamweaver”提示对话框
04 单击“确定”按钮,弹出“另存模板”对话框,在对话框中的“另存为”文本框中输入名称,如图11-4所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00533.jpg?sign=1739672093-VN0gpmBCVHPhEcCpP7QvepS8PXbYV7VZ-0-0953a0436db25c37b3d556e3b45213fb)
图11-4 “另存模板”对话框
05 单击“保存”按钮,可以保存模板文件,如图11-5所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00534.jpg?sign=1739672093-dEmfJOILCdn4Oscbb6SHqDgVwqNNh9hP-0-d8874daed733600c79ecbdb55ff72055)
图11-5 保存模板文件
11.2.2 从现有文档创建模板
在Dreamweaver中,有两种方法可以创建模板。一种是将现有的网页文件另存为模板,然后根据需要再进行修改;另外一种是直接新建一个空白模板,再在其中插入需要显示的文档内容。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0436_0001.jpg?sign=1739672093-IpbOU8FuUvvx6ldghMdxmRXbasZURUf2-0-9f00c79157e1a6ed2930c00a736bd488)
从现有文档中创建模板的具体操作步骤如下:
01 打开网页文档,如图11-6所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00535.jpg?sign=1739672093-MZM6BiLO5ybYNZjMDMQWG9VKTPSCFaKo-0-0cd8837dcdfc76db50374994b65a7dc0)
图11-6 打开网页文档
02 执行“文件”|“另存为模板”命令,弹出“另存模板”对话框,在对话框中的“站点”下拉列表中选择11.2.2,在“另存为”文本框中输入moban,如图11-7所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00536.jpg?sign=1739672093-D8C8nEH9kH6ZvZ1JBbZon868d31MBK1a-0-4ffe0c3aba1e4fe9bc3c317660f19753)
图11-7 “另存模板”对话框
03 单击“保存”按钮,弹出“Dreamweaver”提示对话框,如图11-8所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00537.jpg?sign=1739672093-qehFwqCb3X4bZwHJpK0lKTKDRIB2ECYy-0-9f6cfd3d6543984c0c206599bf3c77fa)
图11-8 “Dreamweaver”提示对话框
04 单击“是”按钮,即可将现有文档另存为模板,如图11-9所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00538.jpg?sign=1739672093-Gv6Nhpa3Ir3Y19HXVuACQes08kFom16E-0-85c0f373458d9f797bf78888f0787a16)
图11-9 保存模板文件
★提示★
不要随意移动模板到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。此外,不要将Templates文件夹移动到本地根文件夹之外,以免引用模板时路径出错。
11.2.3 创建可编辑区域
可编辑区域就是基于模板文档的未锁定区域,是网页套用模板后,可以编辑的区域。在创建模板后,模板的布局就固定了,如果要在模板中针对某些内容进行修改,即可为该内容创建可编辑区域。创建可编辑区域的具体操作步骤如下:
01 打开模板文档,如图11-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00539.jpg?sign=1739672093-qxNi5tGJemzIkWIWamovSrenY596or8I-0-47199e02fc7c086cb49410627ee9f8ae)
图11-10 打开模板文档
02 将光标置于要创建可编辑区域的位置,执行“插入”|“模板对象”|“可编辑区域”命令,弹出“新建可编辑区域”对话框,如图11-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00540.jpg?sign=1739672093-IQ4T7sQFHYhfTs9pTUtYtLzDm6aQwgRO-0-1b0729a6c5515b144c24fd65b6abddbc)
图11-11 “新建可编辑区域”对话框
03 单击“确定”按钮,创建可编辑区域,如图11-12所示。
★提示★
模板中除了可以插入最常用的“可编辑区域”外,还可以插入一些其他类型的区域,它们分别为:“可选区域”、“重复区域”、“可编辑的可选区域”和“重复表格”。由于这些类型需要使用代码操作,并且在实际工作中并不经常使用,因此这里我们只简单地介绍一下。
●“可选区域”是用户在模板中指定为可选的区域,用于保存有可能在基于模板的文档中出现的内容。使用“可选区域”,可以显示和隐藏特别标记的区域,在这些区域中用户将无法编辑内容。
●“重复区域”是可以根据需要在基于模板的页面中复制任意次数的模板区域。使用“重复区域”,可以通过重复特定项目来控制页面布局,如目录项、说明布局或者重复数据行。重复区域本身不是可编辑区域,要使重复区域中的内容可编辑,请在重复区域内插入可编辑区域。
●“可编辑的可选区域”是可选区域的一种,模板可以设置显示或隐藏所选区域,并且可以编辑该区域中的内容,该可编辑区域是由条件语句控制的。
●“重复表格”是重复区域的一种,使用“重复表格”可以创建包含重复行的表格格式的可编辑区域,可以定义表格属性并设置哪些表格单元格可编辑。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00541.jpg?sign=1739672093-8e37zZLN5unmIRwQTUU5FxmK35PtPmQ2-0-70813178da8b5cb0d2ee23fb7cd68d76)
图11-12 创建可编辑区域
★提示★
作为一个模板,Dreamweaver会自动锁定文档中的大部分区域。模板设计者可以定义基于模板的文档中哪些区域是可编辑的。在创建模板时,可编辑区域和锁定区域都可以更改。但是,在基于模板的文档中,模板用户只能在可编辑区域中进行修改,至于锁定区域则无法进行任何操作。