Dreamweaver 模板终极教程：打造高效、统一的网站

想象一下,你的网站有 50 个页面，现在需要修改页脚的版权信息或者更换导航栏的 Logo，如果逐个页面去修改，那将是场噩梦，而 Dreamweaver 模板正是为了解决这类问题而生的强大工具。

dreamweaver的模板教程
（图片来源网络，侵删）

模板的核心思想： 将网站中多个页面共有的部分（如页眉、页脚、导航栏）定义为一个“模板”，然后基于这个模板创建页面，当修改模板时，所有基于该模板的页面都会自动更新，从而极大地提高了网站维护的效率。

第一部分：为什么使用模板？（模板的优势）

在开始之前,先理解使用模板的好处：

  1. 高效维护：只需修改一个模板文件，即可更新所有使用该模板的页面。
  2. 保持风格统一：确保所有页面具有一致的结构和设计元素。
  3. 防止意外修改：可以将模板的特定区域（如导航栏）设置为“锁定”区域，防止在编辑页面时误删或误改。
  4. 简化流程：对于大型团队或项目，模板是保证网站结构和设计规范性的最佳实践。

第二部分：创建你的第一个模板

我们将通过一个简单的例子来创建一个包含页眉、内容区和页脚的模板。

步骤 1：准备一个 HTML 页面

创建一个标准的 HTML 页面，这个页面将作为你创建模板的基础。

dreamweaver的模板教程
（图片来源网络，侵删）

  1. 打开 Dreamweaver。

  2. 选择 文件 > 新建，然后选择 HTML，点击 创建。

  3. 在设计视图中,构建你的页面基本结构：

    • 一个页眉区域,包含 Logo 和导航菜单。
    • 一个主要内容区域。
    • 一个页脚区域,包含版权信息。

  4. 保存这个文件,为了规范，我们通常将其保存在一个名为 templates 的文件夹下，并命名为 dwt_template.dwt。（文件扩展名 .dwt 是 Dreamweaver 模板的标志）。

    my_website/
├── templates/
│   └── dwt_template.dwt
├── images/
└── index.html

步骤 2：定义可编辑区域

这是模板创建中最关键的一步,你需要告诉 Dreamweaver 哪些部分是固定的（不可编辑），哪些部分是每个页面都可以独立修改的（可编辑）。

  1. 选中要设置为“可编辑”的区域：

    • 在设计视图中,点击你想要让内容变化的部分，比如中间的“主要内容”区域。
    • 你可以选中一个 <div> 标签，或者直接输入一些示例文本，如“这里是首页内容”。

  2. 插入可编辑区域：

    • 选中该区域后,转到菜单栏 插入 > 模板对象 > 可编辑区域。
    • 或者,在右侧的 插入 面板中，切换到 常用 类别，找到 模板 图标，点击 可编辑区域。
    • 在弹出的对话框中,为这个区域命名。命名要清晰且有含义，EditRegion1（默认名）、MainContent、ArticleBody 等，我们命名为 MainContent。
    • 点击 确定。

  3. 检查结果：

    • 回到你的模板文件 dwt_template.dwt。
    • 你会看到,除了你命名的 MainContent 区域，页眉和页脚部分的颜色会变淡，并且在标签上会出现一个锁形图标，这表示这些区域是锁定（不可编辑）的。
    • 而 MainContent 区域则没有锁形图标，表示它是可编辑的。

提示：你还可以创建其他类型的可编辑区域，如 可选区域 和 重复区域，我们将在后续部分介绍。

第三部分：基于模板创建新页面

模板创建好了,现在我们来使用它生成新的网页。

  1. 创建新页面：

    • 选择 文件 > 新建。
    • 在弹出的窗口中,选择 网站模板 选项卡。
    • 在右侧的 站点 下拉菜单中，选择你的网站。
    • 在模板列表中,你刚刚创建的 dwt_template.dwt 就会出现在那里。
    • 选中它,然后勾选 当模板改变时更新页面 这个复选框（这是一个好习惯）。
    • 点击 创建。

  2. 编辑新页面：

    • Dreamweaver 会根据模板生成一个新页面，并自动保存为 index.html（或其他文件名）。
    • 你会发现,页眉和页脚是灰色的，并且无法直接编辑，这是因为这个页面继承了模板的锁定属性。
    • 只有 MainContent 区域是高亮且可以编辑的，在这里输入你的页面特定内容，欢迎来到我的首页！”。
    • 保存并预览这个页面。

第四部分：更新模板以同步所有页面

这是模板功能最神奇的地方。

  1. 打开模板文件：

    • 在文件面板中,双击打开 templates/dwt_template.dwt 文件。

  2. 进行修改：

    • 假设我们要修改页脚的版权年份。
    • 在页脚区域,找到版权信息，将年份从 © 2025 改为 © 2025。

  3. 保存模板：

    • 按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存模板。
    • 关键一步：保存后，Dreamweaver 会立即弹出一个 更新模板文件 的对话框。

  4. 更新页面：

    • 这个对话框会列出所有基于此模板的页面（index.html）。
    • 勾选 更新模板文件，然后点击 更新。
    • Dreamweaver 会快速扫描并更新所有相关页面。
    • 接着会弹出一个 更新页面 的报告，告诉你成功更新了多少个文件。

  5. 验证结果：

    • 打开你之前创建的 index.html 文件（或其他任何基于此模板的页面），你会发现页脚的年份已经自动变成了 © 2025，无需手动修改任何一个页面！

第五部分：进阶模板功能

除了基本的“可编辑区域”，模板还提供了一些更高级的功能。

可选区域

允许你在基于模板的页面中,选择性地显示或隐藏某一块内容。

  • 如何创建：
    1. 在模板文件中,选中你想要设置为可选的区域（例如一个“促销横幅”）。
    2. 转到 插入 > 模板对象 > 可选区域。
    3. 在弹出的对话框中,可以设置默认是显示还是隐藏，并为其命名。
  • 如何使用：
    • 打开基于该模板的页面。
    • 选中可选区域,在属性检查器中，你可以看到 显示 和 隐藏 的选项，直接点击即可切换。

重复区域

当你需要在一个页面上显示多条类似记录时（如产品列表、相册等），这个功能非常有用。

  • 如何创建：
    1. 在模板文件中,选中你想要重复的单条记录（例如一个包含图片和标题的 <div>）。
    2. 转到 插入 > 模板对象 > 重复区域。
    3. 为其命名,如 RepeatRegion1。
  • 如何使用：
    • 打开基于该模板的页面。
    • 重复区域会以蓝色标签显示。
    • 选中该区域,在属性检查器中，你可以通过 和 按钮来增加或减少重复的条目数量。
    • 注意：重复区域内的元素也必须是可编辑的，否则你无法修改每一条的具体内容。

可编辑标签属性

这是一个非常精细的控制功能,允许你锁定某个 HTML 标签（如 <img> 或 <p>），但允许修改其特定的属性（如 src 或 class）。

  • 如何创建：
    1. 在模板文件中,选中一个标签，比如一个 Logo 图片 <img src="images/logo.png">。
    2. 在属性检查器中,点击 快速标签编辑器 图标。
    3. 在弹出的代码中,选中你想要允许修改的属性，src。
    4. 右键点击选中的 src，选择 模板 > 使属性可编辑。
    5. 为这个可编辑属性命名。
  • 如何使用：
    • 在基于模板的页面中,你仍然可以选中这个图片，并且可以在属性检查器中自由地更改它的 src 地址来换成另一张图片，但你不能随意改变它的尺寸或边框等被锁定的属性。

第六部分：管理模板

  • 从页面中分离： 如果你想把一个基于模板的页面变成一个完全独立的、普通的 HTML 页面，可以右键点击该页面文件，选择 模板 > 从模板中分离。警告：操作后，该页面将不再受模板控制，未来模板的更新将不再影响它。

  • 修改模板名称： 如果需要重命名模板，直接在文件面板中重命名 .dwt 文件即可，Dreamweaver 会自动更新所有引用该模板的页面。

  • 删除模板： 在文件面板中右键点击模板文件，选择 删除，Dreamweaver 会检查是否有页面仍在使用该模板，并给出警告。

第七部分：最佳实践与注意事项

  1. 清晰的命名：模板文件名、可编辑区域名都要清晰、有意义，便于团队协作。
  2. 规划先行：在动手建站前，先规划好哪些页面共享一个模板，页面的结构是怎样的。
  3. 善用模板文件夹：将所有 .dwt 模板文件统一放在 templates 文件夹下，保持项目结构清晰。
  4. 不要过度嵌套：尽量避免在模板中再嵌套另一个模板，这会使管理和更新变得异常复杂。
  5. 版本控制：如果你使用 Git 等版本控制工具，.dwt 文件也应该被纳入管理，当模板更新后，团队成员需要拉取最新版本，并让 Dreamweaver 自动更新他们的本地页面。

Dreamweaver 模板是构建和维护大型、多页网站的利器，通过将“不变”的部分锁定，将“可变”的部分开放，它实现了内容与样式的分离，极大地提升了开发效率和网站的可维护性。

从创建第一个模板开始,逐步尝试可选区域、重复区域等进阶功能，你会发现它能让你的网站管理工作变得轻松而有序。