Dreamweaver套用模板后如何更新内容？

将网页中不变的部分（如页头、页脚、导航栏）锁定，只允许编辑变化的部分（如正文内容），从而在修改网站时，只需更新模板，所有基于该模板的页面都会自动更新。

整个过程分为三个主要步骤：

1. 创建模板
2. 基于模板创建页面
3. 更新模板并同步所有页面

第一步：创建模板

在开始之前,请确保你已经有一个设计好的网页布局（可以是一个普通的 HTML 文件），我们将把这个网页“保存为模板”。

从现有页面保存为模板（最常用）

1. 打开或创建一个网页： 打开你作为模板基础的 HTML 文件，这个文件应该已经包含了你网站的完整布局，包括页头、导航、侧边栏和页脚。

2. 执行“另存为模板”操作：

   
   （图片来源网络，侵删）
   • 在顶部菜单栏中,选择 文件 > 另存为模板。
   • 或者,使用快捷键 Ctrl + Alt + S (Windows) 或 Cmd + Option + S (Mac)。

3. 设置模板信息：

   • 在弹出的对话框中,为你的模板命名。main.dwt.php 或 article.dwt.html。
     • 文件名后缀：Dreamweaver 会自动添加 .dwt (Dreamweaver Template) 的后缀，如果你的网站是 PHP 动态网站，可以手动将其改为 .php，这样 Dreamweaver 也能正确识别和处理。
   • 站点：确保选择了正确的站点。
   • 点击 “保存”。

4. 定义可编辑区域：这是最关键的一步！

   • 保存为模板后,页面上所有的区域都会变成锁定区域（通常是灰色背景或带锁标记），意味着你不能直接编辑它们。

   • 你需要指定哪些区域是可编辑区域，这些是未来在应用了模板的页面中可以自由修改的内容。

     
     （图片来源网络，侵删）

   • 如何创建可编辑区域：

     1. 在设计视图中,用鼠标选中你想要设置为可编辑区域的内容，选中文章的正文标题和段落。
     2. 在顶部菜单栏中,选择 插入 > 模板对象 > 可编辑区域。
     3. 在弹出的对话框中,为这个可编辑区域命名，命名要清晰且有语义，MainContent、ArticleTitle、SidebarText 等。
     4. 点击 “确定”。

   • 效果：你会看到，被选中的区域现在被一个淡色的、带有标签（如 <!-- TemplateBeginEditable name="MainContent" -->）的框包围，这个区域就是可编辑的了。

5. 保存模板： 按 Ctrl + S 保存你的模板，Dreamweaver 会自动将模板文件保存在你当前站点的根目录下的一个名为 Templates 的文件夹中。这个 Templates 文件夹和里面的 .dwt 文件绝不能被重命名或删除！

第二步：基于模板创建页面

模板创建好了,现在就可以用它来生成新的页面了。

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

   • 在 Dreamweaver 中，选择 文件 > 新建。
   • 在新建文档窗口中,切换到 “模板” 选项卡。
   • 在左侧选择你的站点,然后在右侧的模板列表中，选择你刚刚创建的模板（main.dwt）。
   • 勾选 “当模板改变时更新页面” 这个选项，这是一个好习惯。
   • 点击 “创建”。

2. 编辑新页面：

   • Dreamweaver 会为你生成一个新页面，在这个页面上，你会发现：
     • 页头、页脚、导航栏等锁定区域：你无法直接编辑它们，背景通常是灰色。
     • 可编辑区域：你可以像编辑普通网页一样，在这些区域内自由添加、修改和删除内容。

3. 保存页面： 将这个新页面以正常的 HTML 文件名（如 about.html, products.html, contact.html）保存到你的站点根目录中，这些页面将自动与模板建立关联。

第三步：更新模板并同步所有页面

这是模板最强大的功能,当你需要修改网站的通用部分时（比如更换网站 Logo、修改页脚版权信息、调整导航栏），你只需要修改模板即可。

1. 打开模板文件进行编辑：

   • 在 Dreamweaver 中，通过 文件 > 打开，找到并打开你保存在 Templates 文件夹中的模板文件（main.dwt）。
   • 或者,在文件面板中，展开 Templates 文件夹，双击模板文件。

2. 进行修改：

   • 你可以直接修改任何锁定区域，将页脚的 © 2025 版权信息改为 © 2025。
   • 你也可以修改可编辑区域，但这只会影响未来基于此模板创建的新页面，不会影响已有的页面。

3. 保存模板并更新页面：

   • 按 Ctrl + S 保存模板。
   • 立即触发更新：保存后，Dreamweaver 会自动弹出一个 “更新页面” 对话框。
   • 手动触发更新：如果没有自动弹出，或者你想稍后更新，可以选择 修改 > 模板 > 更新页面。

4. 在“更新页面”对话框中设置：

   • 查看：选择“整个站点”，这样会更新你站点中所有基于此模板的页面。
   • 文件：在下拉菜单中选择你的站点。
   • 更新：勾选“模板文件”，并确保你的模板文件在列表中被选中。
   • 点击 “开始”。

5. 查看结果：

   • Dreamweaver 会开始扫描并更新所有关联的页面，完成后会显示一个更新摘要，告知你成功更新了多少个文件。
   • 打开你之前创建的 about.html 或 contact.html，你会发现它们的页脚已经自动更新了！

高级技巧和注意事项

• 可选区域：

  • 有时你可能需要根据不同页面显示不同的内容,比如某个页面有“联系我们”的侧边栏，而另一个页面没有。
  • 这时可以使用 可选区域。
  • 操作：选中要设置为可选的区域（比如一个包含联系表单的 div），然后选择 插入 > 模板对象 > 可选区域。
  • 你可以设置默认是显示还是隐藏,并且可以通过属性面板设置该区域的名称，方便后续通过模板参数控制其显示/隐藏。

• 重复区域：

  • 对于需要重复出现的元素,比如文章列表、产品缩略图等，可以使用 重复区域。
  • 操作：选中要重复的元素（比如一个包含“标题+图片+简介”的 div），选择 插入 > 模板对象 > 重复区域。
  • 在基于模板的页面中,你可以轻松地添加、删除或排序这些重复的块。

• 模板参数：

  这是一个更高级的功能,允许你在可编辑区域内部传递参数，从而控制可选区域的显示状态或设置重复区域的数量等，通常与服务器端技术（如 PHP）结合使用。

• 脱离模板：

  • 如果某个页面不再需要遵循模板的规则,你可以在该页面上右键，选择 “脱离模板”，这将把该页面的所有锁定区域转换为普通代码，之后它将不再与模板关联。

掌握模板的使用,能极大地提高网站开发和维护的效率，是 Dreamweaver 的核心功能之一，希望这个详细的指南对你有帮助！