为什么使用模板？

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

dreamweaver怎么使用模板
（图片来源网络，侵删）
  1. 提高效率：无需在每个页面上重复复制粘贴相同的页头和页脚，创建新页面时,只需基于模板即可。
  2. 保证风格统一：确保网站的所有页面都遵循相同的设计布局。
  3. 简化维护：当需要修改网站的页头 logo、导航菜单或版权信息时，你只需要修改一个模板文件，所有基于该模板的页面都会自动更新,无需手动修改成百上千个页面。

Dreamweaver 模板的核心概念

在创建和使用模板之前,必须了解三个关键概念：

  1. 模板文件

    • 一个特殊的 HTML 文件，扩展名通常是 .dwt (Dreamweaver Template)。
    • 它本身并不是一个可以独立访问的网页，而是用来创建其他页面的“蓝图”或“模具”。

  2. 可编辑区域

    • 这是模板中最核心的部分，你在模板中定义哪些区域是可以被修改的。
    • 在新闻网站模板中，页头、页脚、导航栏是固定的，但“新闻标题”、“新闻内容”、“发布日期”这些区域应该是可编辑的。
    • 你必须在模板中至少定义一个可编辑区域,否则模板就失去了意义。

  3. 锁定区域

    dreamweaver怎么使用模板
    （图片来源网络，侵删）
    • 模板中所有未被定义为“可编辑区域”的部分，默认都是“锁定区域”。
    • 锁定区域在基于模板生成的页面中是不可编辑的，它们会显示为灰色背景,以示区分。

详细操作步骤：从创建到应用

假设我们要为一个网站创建一个包含页头、导航、侧边栏和页脚的模板。

第一步：创建一个新模板

  1. 打开 Dreamweaver。

  2. 在顶部菜单栏选择 文件 > 新建。

  3. 在弹出的窗口中，选择 模板页，然后在右侧的列表中选择你使用的模板类型（HTML 模板）。

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

  4. 点击 创建。

    • （另一种方法：你也可以先创建一个普通的 HTML 页面，设计好布局后，通过菜单 文件 > 另存为模板 来将其转换为模板。）

第二步：设计模板并定义可编辑区域

现在你得到了一个空白模板文件,我们来构建它的布局并定义哪些部分可以编辑。

  1. 构建基础布局：

    • 使用 Dreamweaver 的设计视图或代码视图，像制作普通网页一样，创建你的页头、导航栏、内容区、侧边栏和页脚。
    • 你可以使用表格、<div> 标签或 Dreamweaver 强大的 插入 > 布局对象 中的 流体网格布局（响应式布局）或 HTML5 布局模板。

  2. 定义可编辑区域（关键步骤）：

    • 将光标定位在你希望用户可以修改内容的位置，在页面的主要内容区域 <div> 内。

    • 在顶部菜单栏选择 插入 > 模板对象 > 可编辑区域。

    • 在弹出的对话框中，为这个区域起一个清晰、有意义的名字，EditRegion1、MainContent、NewsTitle 等，命名规范很重要,方便日后管理。

    • 点击 确定。

    • 效果：你会看到你定义的区域被一个浅蓝色/绿色的标签和高亮背景包围，标签上显示了它的名字，这就是“可编辑区域”。

  3. 重复操作：

    • 根据需要，在页脚的版权信息处创建另一个可编辑区域 FooterText，或者在文章列表处创建 ArticleList。
    • 记住：页头、导航栏、侧边栏这些不需要修改的部分，不要对它们进行任何“可编辑区域”的操作，它们会自动成为“锁定区域”。

第三步：保存模板

  1. 按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存模板。
  2. Dreamweaver 会提示你选择一个站点来保存模板。请确保你在一个已定义的 Dreamweaver 站点中操作。
  3. 在 站点模板文件夹 中，Dreamweaver 会自动创建一个名为 Templates 的文件夹（如果它不存在的话），你的模板文件（my_site.dwt）将被保存在这里。
  4. 点击 保存。

第四步：基于模板创建新页面

模板已经准备好了,现在我们用它来创建新页面。

  1. 在 Dreamweaver 中，选择 文件 > 新建。

  2. 在弹出的窗口中，选择 站点中的页 或 模板中的页。

  3. 在左侧的 模板 列表中，选择你刚刚创建的模板（my_site.dwt）。

  4. 你可以在右侧的 预览 区域看到模板的缩略图。

  5. 点击 创建。

    • （快捷方法：你也可以在文件面板中右键点击 Templates 文件夹里的模板文件，选择 从模板新建。）

第五步：编辑基于模板的页面

一个新的页面被打开了,你会看到：

  • 锁定区域（页头、导航、页脚等）是灰色的,并且无法直接编辑。
  • 可编辑区域（如 MainContent）是正常可编辑的。

你只需要在可编辑区域里添加你的具体内容（文字、图片等）即可，保存这个页面（它会是一个普通的 .html 文件）,然后就可以在浏览器中预览了。

管理和更新模板

如何更新基于模板的页面？

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

  1. 打开你的模板文件 (my_site.dwt)。
  2. 对锁定区域进行修改，你想在导航栏里加一个“关于我们”的链接。
  3. 保存模板，Dreamweaver 会立即弹出一个 更新页面 的对话框。
  4. 这个对话框会询问你是否要更新所有使用该模板的文件。
    • 查看相关文件：会列出所有需要更新的页面。
    • 更新：点击后，Dreamweaver 会自动在后台修改所有相关文件,然后报告更新了多少个文件。
  5. 点击 更新，然后关闭对话框,所有页面的导航栏就都同步更新了！

如何将现有页面与模板分离？

你可能需要修改一个基于模板的页面中的锁定区域（比如某个特殊页面不需要导航栏）。

  1. 打开那个基于模板的页面。
  2. 在顶部菜单栏选择 修改 > 模板 > 从模板中分离。
  3. 确认操作。

警告：分离后，这个页面将不再与模板有任何关联，它变成了一个完全独立的、普通的 HTML 文件，未来模板的更新将不再影响这个页面,请谨慎使用此功能。

如何修改可编辑区域的名称？

  1. 打开模板文件。
  2. 在设计视图中，点击可编辑区域的标签（如 MainContent）。
  3. 在属性检查器 中，你可以直接修改 名称。

最佳实践与技巧

  • 规划先行：在开始建站前，先规划好哪些页面会共用一套模板，以及模板中哪些部分是固定的,哪些是可变的。
  • 命名清晰：给可编辑区域起一个有意义的名字（如 LeftNav, MainContent, PageTitle），而不是 EditRegion1。
  • 善用可选区域：对于某些页面可能显示、某些页面不显示的内容（只有文章详情页才显示的“作者信息”），可以使用 可选区域，它允许你在模板中定义条件，如果 isArticlePage 变量为真，则显示此区域”。
  • 重复区域：对于需要重复出现的元素，比如文章列表、产品缩略图，可以使用 重复区域,这允许你在基于模板的页面中添加或删除多个该区域的实例。
  • 使用站点：始终在 Dreamweaver 站点 内部操作模板，这能确保 Dreamweaver 正确地管理文件路径和更新关系。

Dreamweaver 模板功能是一个从“手动敲代码”到“高效、标准化建站”的飞跃，虽然现在有很多现代化的前端框架（如 React, Vue）提供了更强大的组件化能力，但对于中小型项目、个人博客或需要快速搭建和维护的传统网站来说，Dreamweaver 的模板功能依然非常实用和高效。

希望这份详细的指南能帮助你掌握它！