7.1 制作模板并简单编辑

在上一章中，首先介绍了一般网站的开发流程，其主要流程有需求分析、网站制作、测试网页和发布网站。随后简单讲解了淘宝网首页有哪些内容7最后着重研究了页面布局技术，其中框架布局和表格布局有存在的必要，不可抛弃，DIV层布局是未来的发展趋势。

从本章开始，我们将继续学习网站制作相关知识。所有的页面制作好之后，我们就要测试页面内容，来审视我们制作的页面是否美观，来检查页面中是否有死链接，来查看页面是否可以兼容不同的浏览器。测试完之后，为了使更多的人知道您的网站，就必须把我们制作、测试好的网站在网上进行发布。这一章的内容都是重点，难点是如何调整页面和其他浏览器的兼容性。

一、为什么需要模板

网站通常都遵循一个标准结构，例如所有页面都有页眉、导航栏和页脚。模板有助于保持整个网站外观和风格的一致性。假设您的网站有许多页面，有些页面含有相同的页眉、导航栏和隐私条例说明、版权标题。现在要做一个小改动，比如说在版权文本中加一些内容。那么就必须分别打开每个页面，并做必要的修改，这样是不是非常耗时耗力，而且容易出错，那怎么办？不急，设计HTML语言的人早就为我们想好了，多个页面中相同部分可以制作成一个文件，它就是模板。如果使用了模板，这项工作就变得轻松多了。您只需在模板中进行修改，应用了该模板的所有页面都将自动更新。

其实模板的功能就是将版式和内容的设计分离，先设计版式布局并存为模板，然后，对于相同布局版式的网页就可以用前面定义的模板来创建，在新的页面中只需修改部分内容就可以快速制作成功，而且可以保证页面风格的一致性。模板的好处的确不少，下面我们就赶快来体验一把模板给我们带来的方便之处。

二、制作模板

创建模板的方法有两种，一种是将现有的HTML文档保存为模板，另一种是在空白HTML文档中从头开始创建。

最简单的方法是先打开一个创建好的网页，然后将它用作模板；另一个方法是从头开始创建，然后在其中添加图像、表格和文本。最后必须决定哪些区域是可以修改的（内容），然后保存为模板，这样就可以开始创建其他页面了。Dreamweaver使用标准的HTML注释来确定使用了哪个模板和哪些区域可以编辑。模板将自动保存在"Templates”文件夹中，该文件夹在站点的本地根文件夹下。

下面分别介绍用两种不同的方式来创建模板。

1.将现有文档保存为模板

(1) 选择“文件”一“打开”命令，即会出现“打开”对话框。

(2) 在“打开”对话框中，选择要创建为模板的现有文档。

(3) 单击“确定”按钮，该文档将出现在“文档”窗口中，如图1所示。

图1 另存为模板页面

(4) 选择“文件”一“另存为模板”命令，将出现“另存为模板”对话框。

(5) 在此对话框中，从“站点”下拉列表框中选择要保存模板的站点。在“另存为”文本框中，输入模板的名称，如图2所示。

(6) 单击“保存”按钮。

此文档将以.dwt为扩展名保存在"Templates”文件夹下。

图2 ”另存为模板\对话框

2.新建空白模板

(1) 选择“窗口”一“资源”命令或按F1l键，即会出现“资源”面板。

(2) 单击“资源”面板上的“模板”图标，将显示“模板”面板，如图3所示。

(3) 单击“模板”面板右下角的“新建模板”图标。

(4) 在“名称”字段中输入新模板名称，然后按Enter键。

(5) 单击“模板”面板右下角的“编辑”图标。

图3 在“资源”面板显示模板

在“文档”窗口中，将打开该空白模板。在此模板中，可以添加DIV块区域、表格、文本、图像和其他页面元素。

小经验：在使用模板时需谨记，不能将模板从"Templates”文件夹中移出，也不能将非模板文件放在"Templates”文件夹下。而且，不能将"Templates”文件夹从站点的本地根文件夹中移出，否则将导致"Templates”文件夹的路径出错。

小问题：在模板“文档”窗口中添加内容之后，默认情况下，应用模板的文档都处于锁定状态，也就是不能编辑，那怎么办？

因此，创建模板后，需指定模板窗口中哪部分可以编辑，以便在其中添加内容；哪部分不可编辑，以便保持所有页面结构一致。

3.定义可编辑区域

【1】 添加基本可编辑区域

(1) 在“模板”文档中选择要设置为可编辑的区域。

(2) 请执行以下步骤之一：

●  在插入栏的“常用”选项卡中，单击“模板”图标，在弹出的下拉菜单中选择“可编辑区域”命令。    、

●  选择“插入”一“模板对象”一“可编辑区域”命令。

●  右击选中的区域，然后选择“模板”一“新建可编辑区域”命令。

●   按Ctrl+ Alt+V组合键。

(3) 此时，将出现“新建可编辑区域”对话框，如图4所示。在“名称”文本框中，为该区域输入一个唯一的名称。同一名称不能使用两次。

图4 ”新建可编辑区域\对话框

(4) 单击“确定”按钮。

该区域将高亮显示在一个矩形内，可以向其中添加内容，每个文档中的内容都可不同。

该区域的名称在对应可编辑区域顶部的矩形标签中。

【2】删除可编辑区域

如果在模板中设置了可编辑区域并想锁定它，即将其设为不可编辑，则需使用“删除模板标记”选项。

(1) 选择要编辑的区域。

(2) 选择“修改”一“模板”一“删除模板标记”命令。该区域即被锁定，不可编辑。

4.编辑模板

要编辑模板，请执行以下步骤。

(1) 选择“窗口”一“资源”命令。

(2) 在“资源”面板中，单击“模板”图标。

(3) 从模板列表中，选择要编辑的模板，然后双击。

该模板将出现在“文档”窗口中。此时即可编辑该模板，并对其做必要的修改。

本节作业：

参照教程和图示，使用Dreamweaver制作一个模板，并完成定义可编辑区域及编辑操作。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第七章案例及作业资源 返回《HTML入门经典》教程列表