第一部分：创建一个新模板

创建模板有两种主要方式：

dreamweaver如何设置模板
（图片来源网络，侵删）
  1. 从现有 HTML 文件创建：如果你已经有了一个设计好的页面（例如首页），可以直接把它另存为模板。
  2. 从空白文件创建：创建一个全新的 .dwt 文件，然后手动添加内容。

这里我们以最常用的从现有 HTML 文件创建为例。

步骤 1: 准备一个 HTML 文件

确保你有一个设计好的 HTML 页面，这个页面应该包含你希望在所有页面中都显示的元素，

  • 顶部导航栏
  • Logo
  • 页脚版权信息
  • 侧边栏
  • 主要的页头和页脚结构

步骤 2: 将 HTML 文件另存为模板

  1. 在 Dreamweaver 中打开你准备好的 HTML 文件。
  2. 点击菜单栏的 文件 > 另存为模板...。
  3. 在弹出的对话框中：
    • 站点：选择你的网站站点。
    • 另存为：为你的模板输入一个名称，main.dwt 或 base.dwt，模板文件通常以 .dwt (Dreamweaver Template) 为后缀。
    • 点击 保存。

步骤 3: 定义可编辑区域

这是模板最核心的一步,可编辑区域是指基于此模板创建的页面中，用户可以自由修改内容的部分，其他区域则被“锁定”，无法直接修改。

  1. 在你的模板文件中,找到那些在不同页面中会变化，文章标题、正文内容、图片等。

    dreamweaver如何设置模板
    （图片来源网络，侵删）

  2. 将光标定位到你想设置为可编辑区域的起始位置。

  3. 在 Dreamweaver 的顶部菜单栏中，找到 插入 菜单，选择 模板对象 > 可编辑区域...。

    • 或者,在 插入 面板中，切换到 常用 或 模板 分类，点击 可编辑区域 图标。

  4. 在弹出的对话框中,为这个可编辑区域起一个清晰、唯一的名称，如果这里是文章标题，可以命名为 ArticleTitle；如果是正文内容，可以命名为 MainContent。

    • 重要提示：一个好的命名习惯能让你的模板更易于管理和维护。

  5. 点击 确定。

    dreamweaver如何设置模板
    （图片来源网络，侵删）

你会看到,Dreamweaver 会用浅色高亮和标签（<!-- TemplateBeginEditable name="MainContent" --> 和 <!-- TemplateEndEditable -->）标记出可编辑区域。

步骤 4: 保存模板

完成所有可编辑区域的定义后,按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存模板，Dreamweaver 会提示你更新所有使用了该模板的页面，如果这是你第一次创建模板，可以忽略此提示。

第二部分：应用模板到现有页面

假设你已经有一些独立的 HTML 页面，现在希望将它们应用到你刚刚创建的模板上。

  1. 在 Dreamweaver 中打开一个你想要应用模板的 HTML 页面。
  2. 点击菜单栏的 修改 > 模板 > 应用模板到页...。
  3. 在弹出的对话框中：
    • 模板：从下拉列表中选择你刚刚创建的模板（main.dwt）。
    • 移到不可编辑的区域：这是一个关键选项。
      • 如果你的页面结构和模板完全匹配,可以选择 “无”。
      • 如果你的页面有额外的内容,但你想把它放到模板的某个特定区域（比如页脚），可以选择该区域。
      • 最常用的选择是“将内容移到新的可编辑区域”，这会将你当前页面的所有内容打包，放入一个名为 ContentForNewPage 的新可编辑区域中，防止内容丢失。
  4. 点击 确定。

你的页面已经应用了模板,你可以看到，模板的锁定区域（如导航栏、页脚）被“冻结”了，只有你定义的可编辑区域可以编辑。

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

这是模板最强大的功能之一,可以快速生成符合网站布局的新页面。

  1. 在 文件 面板中，右键点击你的站点根目录。
  2. 选择 新建 > 来自模板的页面...。
  3. 在弹出的对话框中,选择你想要使用的模板，然后点击 创建。

Dreamweaver 会立即根据模板生成一个新的 HTML 页面，这个页面已经包含了所有固定的布局元素，你只需要在可编辑区域中填写新内容即可。

第四部分：管理模板（更新和分离）

更新模板

当你的网站布局需要修改时（更换了导航栏的图片或链接），你只需要修改模板文件，然后更新所有关联页面。

  1. 打开你的 .dwt 模板文件（main.dwt）。
  2. 进行你想要的修改（修改导航栏的文字）。
  3. 保存模板 (Ctrl/Cmd + S)。
  4. Dreamweaver 会弹出一个 “更新页面” 对话框。
    • 在 查看 中，选择 “整个站点” 或 “文件使用”。
    • 在 在站点中 中，选择你的网站站点。
    • 点击 开始。
  5. Dreamweaver 会自动扫描所有基于此模板的页面，并进行更新，完成后，你会看到一个更新报告。

分离模板

如果你需要将一个基于模板的页面变成一个完全独立的、普通的 HTML 文件（需要将某个页面交给不使用 Dreamweaver 的人修改），你可以将其与模板分离。

  1. 打开那个基于模板的页面。
  2. 点击菜单栏的 修改 > 模板 > 从模板中分离。

警告：此操作是不可逆的！分离后，页面将不再与模板关联，模板的任何更新都不会再影响这个页面，请谨慎使用。

总结与最佳实践

  • 规划先行：在创建模板之前，先规划好网站的布局，确定哪些部分是固定的（如导航、页脚），哪些是可变的（如文章内容、产品图片）。
  • 命名清晰：为可编辑区域起一个有意义且唯一的名称，PageTitle、ArticleContent、SidebarImage，而不是 EditRegion1、EditRegion2。
  • 善用可选区域：除了可编辑区域，Dreamweaver 还提供可选区域，用于在不同页面中显示或隐藏某些内容（只在首页显示的横幅），你可以在 插入 > 模板对象 中找到它。
  • 重复区域：如果需要在模板中创建可以重复的元素（文章列表中的每一项），可以使用 重复区域 功能，这非常适合用于博客、产品列表等。

通过熟练使用 Dreamweaver 的模板功能，你可以极大地提高网站开发效率，并轻松维护整个网站的风格一致性。