什么是 Dreamweaver 模板？

模板就是一个带有固定区域和可编辑区域的网页文件，你可以把它想象成一个“母版”或“模具”。

dreamweaver cs6模板
（图片来源网络，侵删）
  • 固定区域：这些区域在所有基于该模板创建的页面中都是不可更改的，网站的页眉、页脚、主导航栏等，这些内容一旦在模板中确定，所有使用该模板的页面都会自动继承。
  • 可编辑区域：这些区域是允许修改的，文章内容、产品图片、新闻标题等，每个基于该模板的页面都可以在这些区域填入自己独特的内容。

核心优势：

  1. 高效统一：一次修改，全局更新，当你修改模板的固定区域（如更新版权信息或更换 Logo）时，所有使用该模板的页面都会自动同步更新。
  2. 降低错误率：新手或不熟悉网站结构的开发者不会误删或修改关键的公共代码，只能在指定的可编辑区域内操作。
  3. 团队协作：设计师可以负责创建和维护模板，而内容编辑者则只需专注于填充可编辑区域的内容，互不干扰。

模板的基本组成部分

在 Dreamweaver CS6 中创建模板时，你会遇到两个核心概念：

  1. 模板文件

    • 扩展名为 .dwt。
    • 它本身就是一个 HTML 文件，但直接在浏览器中打开是看不到内容的。
    • 它是创建其他页面的“蓝图”。
    • 通常存放在站点根目录下的一个名为 Templates 的文件夹中。这个文件夹名是固定的，Dreamweaver 会自动识别。

  2. 可编辑区域

    dreamweaver cs6模板
    （图片来源网络，侵删）
    • 这是模板的灵魂,是唯一允许用户修改的地方。
    • 你需要在模板中明确指定哪些部分是可编辑的。
    • 创建可编辑区域后,Dreamweaver 会在代码中插入特殊的注释标记，以便识别。

如何创建和使用模板（详细步骤）

下面我们通过一个完整的流程来学习如何操作。

步骤 1：准备一个网页作为模板基础

  1. 打开 Dreamweaver CS6，新建一个 HTML 文件。
  2. 设计你的网站布局,创建一个简单的三栏布局：页眉、主内容区、侧边栏、页脚。
  3. 将这个文件保存到你的站点根目录下,为了管理方便，最好直接在站点根目录下创建 Templates 文件夹，并将文件保存在其中，保存为 Templates/main.dwt。

步骤 2：定义可编辑区域

这是最关键的一步,假设我们想让“主内容区”和“侧边栏”的内容可以修改。

  1. 打开你的模板文件 (main.dwt)。

  2. 选中要设置为可编辑区域的代码块，你可以直接在“设计”视图中拖动鼠标选中，或者在“代码”视图中手动选中。

    dreamweaver cs6模板
    （图片来源网络，侵删）
    • 区 <div id="main-content">...</div> 内部的所有内容。

  3. 打开 “插入” 菜单，选择 “模板对象” -> “可编辑区域”。

  4. 在弹出的对话框中,为这个可编辑区域起一个唯一的、有意义的名称，命名为 MainContent。

    • 注意： 名称不能包含特殊字符，且在同一模板中不能重复。

  5. 点击“确定”，你会看到，在设计视图中，该区域被一个淡黄色的标签包围，表明它是一个可编辑区域，在代码视图中，你会看到类似 <!-- TemplateBeginEditable name="MainContent" --> 和 <!-- TemplateEndEditable --> 的注释。

  6. 重复上述步骤，为“侧边栏” <div id="sidebar">...</div> 创建另一个可编辑区域，命名为 Sidebar。

你的模板文件就制作完成了,页眉、页脚、导航栏等部分因为没有被设置为可编辑，所以它们将是固定的。

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

模板创建好了,现在要用它来生成实际的网页。

  1. 在 Dreamweaver 中，新建一个文件。
  2. 打开 “文件” 菜单，选择 “新建”。
  3. 在弹出的对话框中,切换到 “模板” 选项卡。
  4. 在左侧选择你的站点,然后在右侧的“模板”列表中，选择你刚刚创建的 main.dwt 模板。
  5. 勾选 “当模板改变时更新页面” 这个选项，这是一个非常重要的好习惯。
  6. 点击“创建”。

Dreamweaver 会生成一个新页面，你会看到：

  • 页眉、页脚等固定区域和模板完全一样，并且无法直接编辑，区和侧边栏被高亮显示，你可以自由地在这里输入文字、插入图片等。

步骤 4：更新模板

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

  1. 打开你的模板文件 main.dwt。
  2. 假设你要在页脚的版权年份从 © 2025 改为 © 2025。
  3. 修改后,保存模板文件 (Ctrl + S)。
  4. Dreamweaver 会立即弹出一个 “更新模板文件” 的对话框，询问你是否要将这个更改应用到所有基于此模板的页面。
  5. 点击 “更新”。

Dreamweaver 会在后台自动扫描所有使用此模板的文件，并将它们的页脚部分同步更新，几秒钟后，会弹出一个报告，告诉你成功更新了多少个文件。

模板的其他高级功能

  1. 可选区域

    • 作用：定义一些内容，在基于模板的页面中可以选择性地显示或隐藏，但内容本身在模板中是固定的。
    • 场景：一个“新品推荐”模块，只在首页显示，在其他内页不显示。
    • 创建：选中要设为可选区域的代码，插入 -> 模板对象 -> 可选区域，可以设置条件，if MM_... eq "index.html"。

  2. 重复区域

    • 作用：定义一个可以重复多次的区域，这对于创建列表（如新闻列表、产品列表）非常有用。
    • 场景：创建一个新闻列表的模板，每条新闻都包含标题、日期和摘要，你可以设置一个“重复区域”，然后在基于模板的页面中，通过服务器端技术（如 PHP）动态循环生成多条新闻。
    • 创建：选中要重复的代码块（比如一条新闻的 HTML 结构），插入 -> 模板对象 -> 重复区域。

  3. 嵌套模板

    • 作用：在一个已经存在的模板基础上再创建一个模板。
    • 场景：假设你有一个主模板 main.dwt 适用于所有页面，你想为“产品展示”页面创建一个特殊的模板，它除了继承 main.dwt 的所有结构外，还额外增加了一个“产品参数表”的可编辑区域，这时你就可以基于 main.dwt 创建一个嵌套模板 product.dwt。
    • 好处：当 main.dwt 更新时，product.dwt 也会自动继承更新，同时保持了产品页面的特殊性。

重要注意事项与最佳实践

  • 不要直接修改 .dwt 文件中的可编辑区域内容：模板的可编辑区域是为了让新页面继承并填充内容，你永远不应该在模板文件本身的可编辑区域里写最终内容，那将是所有页面的共同内容。
  • Templates 文件夹是神圣的：不要手动删除或重命名 Templates 文件夹，也不要将非模板文件放在里面。
  • 更新前备份数据：在进行全局模板更新前，特别是对大型网站，最好先备份你的站点文件，以防万一。
  • 命名要清晰：给可编辑区域、可选区域等起一个清晰、规范的名称，方便日后维护。
  • 版本问题：.dwt 文件是 Dreamweaver 的专有格式，如果你需要与其他开发者协作，确保他们也在使用 Dreamweaver，如果需要跨平台，可以考虑将最终的设计导出为 HTML/CSS，然后通过其他现代前端工具（如 Vue, React）来实现类似的功能，但那种方式是动态的，而 DW 模板是静态的。

Dreamweaver CS6 的模板功能是静态网站管理和维护的基石，它通过“固定”与“可变”的分离，完美地解决了网站风格统一和内容高效更新的问题，虽然现代前端开发已经转向了组件化的动态框架，但理解 DW 模板的工作原理，对于学习网页结构和团队协作开发的基本思想依然非常有价值。