什么是模板？为什么使用它？

模板是一个预先设计好的网页文件，它定义了网站中所有页面的共同结构和布局，你可以把它想象成一个“母版”或“蓝图”。

dreamweaver使用模板
（图片来源网络，侵删）

使用模板的核心优势：

  1. 提高效率：你无需为每个新页面重复创建导航栏、页脚、Logo 等通用元素,只需基于模板创建新页面即可。
  2. 保证一致性：当你需要修改网站的通用部分（如更换导航菜单、更新版权信息、修改公司Logo）时，只需修改模板文件，所有基于该模板的页面都会自动更新,避免了手动修改成百上千个页面的繁琐工作。
  3. 降低出错率：手动更新大量页面时，很容易遗漏或出错，模板可以确保所有页面的结构统一,减少人为失误。
  4. 便于协作：网页设计师可以专注于模板的设计，而内容编辑者则可以基于模板填充内容,互不干扰。

模板的核心组成部分

在 Dreamweaver 中，模板文件（.dwt）主要由两种类型的区域构成：

  1. 可编辑区域

    • 定义：模板中唯一可以被修改的部分,每个基于模板的页面都必须有自己的可编辑区域。
    • 作用：用于放置每个页面独特的具体内容，如文章标题、正文、图片、产品描述等。
    • 创建：在模板文件中，选中要设置为可编辑区域的元素（例如一个 <div>、一个表格单元格或一段文字），然后在菜单中选择 插入 > 模板对象 > 可编辑区域。

  2. 锁定区域

    dreamweaver使用模板
    （图片来源网络，侵删）
    • 定义：模板中默认锁定,所有基于该模板的页面都无法直接修改的部分。
    • 作用：放置网站的公共元素，如网站的导航菜单、页脚、侧边栏、Logo、头部横幅等。
    • 示例：<header>, <nav>, <footer> 等区域通常设置为锁定区域。

使用模板的完整工作流程

下面我们通过一个实例来走一遍完整的流程。

步骤 1：创建一个模板文件

  1. 新建模板：

    • 打开 Dreamweaver。
    • 在菜单栏选择 文件 > 新建。
    • 在弹出的窗口中，选择 模板 选项卡。
    • 选择 空白页，然后选择你的文档类型（如 HTML5），最后点击 创建。

  2. 保存模板：

    • 新建一个空白模板文件后，立即保存它，Dreamweaver 会自动提示你将其保存在一个名为 Templates 的文件夹中（如果该文件夹不存在，Dreamweaver 会自动创建）。
    • 重要：模板文件必须保存在网站的根目录下的 Templates 文件夹中，且文件名后缀必须是 .dwt（main.dwt）。

步骤 2：设计模板并定义区域

我们来设计一个简单的网站模板。

dreamweaver使用模板
（图片来源网络，侵删）

  1. 构建锁定区域：

    • 在模板文件中，创建一个包含 header, nav, footer 的基本布局。
    • 例如：
      • 在 header 中放置一个 Logo。
      • 在 nav 中创建一个无序列表作为导航菜单。
      • 在 footer 中放置版权信息，如 © 2025 My Company。
    • 这些部分暂时不要设置为可编辑区域，它们就是默认的锁定区域。

  2. 创建可编辑区域：

    • 这是关键步骤,我们需要一个地方来放置每页不同的内容。
    • 在 body 标签内，nav 和 footer 之间，创建一个 <div>，可以给它一个 ID，content。
    • 选中这个 <div>。
    • 在菜单栏选择 插入 > 模板对象 > 可编辑区域。
    • 会弹出一个对话框，为这个区域命名（EditRegion1，建议起一个有意义的名字如 MainContent），然后点击 确定。
    • 你会看到 Dreamweaver 给这个 <div> 添加了特殊的注释标记，并且背景色可能会略有变化,以示这是一个可编辑区域。

你的模板代码大概会是这样：

<!DOCTYPE html>
<html>
<head>Untitled Document</title>
</head>
<body>
    <!-- TemplateBeginEditable name="MainContent" -->
    <div id="MainContent">
        <!-- 这里是可编辑区域 -->
    </div>
    <!-- TemplateEndEditable -->
    <footer>
        <!-- 这是锁定区域 -->
        <p>© 2025 My Company. All rights reserved.</p>
    </footer>
</body>
</html>

步骤 3：基于模板创建新页面

模板创建好了,现在来使用它。

  1. 新建基于模板的页面：

    • 在菜单栏选择 文件 > 新建。
    • 选择 模板 选项卡。
    • 在左侧的 站点 列表中,选择你的站点。
    • 在右侧的 模板 列表中，选择你刚刚创建的 main.dwt 模板。
    • 勾选 当模板更改时更新页面 选项（默认是勾选的）。
    • 点击 创建。

  2. 编辑新页面：

    • Dreamweaver 会为你创建一个新页面,这个页面已经应用了模板。
    • 你会发现，除了之前定义的 MainContent 区域外，页面的其他所有部分（Logo、导航、页脚）都是灰色的,无法直接编辑。
    • 将光标定位在 MainContent 区域（这个区域是正常可编辑的），然后输入你想要的内容,比如文章标题和正文。
    • 保存这个新页面（index.html, about.html, contact.html）。

步骤 4：更新模板并同步页面

假设我们决定在所有页面的页脚增加一个“隐私政策”的链接。

  1. 打开模板文件：

    • 在文件面板中，双击打开 Templates/main.dwt 文件。

  2. 修改锁定区域：

    • 在 footer 区域的 <p> 标签内，添加一个链接： <p>© 2025 My Company. All rights reserved. | <a href="privacy.html">隐私政策</a></p>

  3. 保存模板：

    • 按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存模板。
    • 关键一步：保存后，Dreamweaver 会立即弹出一个 “更新模板文件” 的对话框。
    • 这个对话框会告诉你,修改模板将影响到多少个基于该模板的文件。
    • 点击 “更新” 按钮。

  4. 查看更新结果：

    • Dreamweaver 会开始更新所有相关的页面，并弹出一个更新日志,告诉你成功更新了多少个文件。
    • 打开你之前创建的 index.html, about.html 等页面，你会发现它们的页脚都自动出现了“隐私政策”的链接！这就是模板的威力所在。

高级技巧与注意事项

  • 嵌套模板：你可以在一个已经存在的模板基础上创建另一个模板，这对于网站中既有全局结构又有局部结构的页面非常有用。main.dwt 是整个网站的主模板，你可以在其上创建一个 product.dwt，专门用于产品页面，这个产品页面模板会继承 main.dwt 的所有锁定区域,并可以定义自己新的可编辑区域。
  • 可选区域：使用 插入 > 模板对象 > 可选区域 可以创建一些在某些页面显示、在另一些页面不显示的内容，你可以基于模板参数来控制这些区域的显示/隐藏。
  • 重复区域：使用 插入 > 模板对象 > 重复区域 可以创建一个可以重复多次的区域，例如新闻列表、产品缩略图等,这对于生成动态列表非常有帮助。
  • 分离页面：如果你需要基于模板的页面不再受模板控制（要对该页面的布局进行大改），可以在文件面板中右键点击该页面，选择 “从模板分离”。警告：此操作是不可逆的，分离后该页面将变成一个独立的 HTML 文件,再也无法通过模板更新了。
功能 作用 如何操作
创建模板 制作网站蓝本 文件 > 新建 > 模板，保存为 .dwt 文件到 Templates 文件夹。
可编辑区域 定义页面可修改的内容 选中元素，插入 > 模板对象 > 可编辑区域。
锁定区域 定义页面公共且不可修改的内容 无需操作，默认即为锁定。
基于模板创建页面 生成符合模板结构的新页面 文件 > 新建 > 模板，选择模板并创建。
更新模板 修改网站通用部分并同步 打开 .dwt 文件修改，保存后选择“更新”。

掌握 Dreamweaver 的模板功能，是进行高效、规范化网页开发的必备技能，虽然现代前端开发更多使用组件化框架（如 React, Vue），但 Dreamweaver 模板对于快速构建中小型静态网站、维护旧项目或学习网页结构化思想依然非常有价值。