下面我将为你提供一个从零开始的、非常详细的 Dreamweaver 模板制作和使用教程，分为三个主要部分：

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

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

模板本质上就是一个已经设置好基本布局和公共元素的“母版”页面，你需要将那些在所有页面中都会重复出现的部分（如页头、页脚、导航栏）固定下来。

步骤 1：新建一个模板文件

  1. 打开 Dreamweaver。
  2. 在顶部菜单栏选择 文件 > 新建。
  3. 在弹出的窗口中,选择 “模板” 选项卡。
  4. 在右侧的“模板”列表中，确保你选择了你当前所在的 “站点”（如果你还没有创建站点，请先创建一个站点，这非常重要！）。
  5. 选择 “空白模板”。
  6. 在“页面类型”中选择你想要的文件类型，通常是 “HTML”。
  7. 点击 “创建”。

你就有了一个名为 dwt 的模板文件（template.dwt），它看起来像一个普通的 HTML 页面，但多了两个关键特征：

  • 顶部有一个“模板”标签。
  • 右侧的“插入”面板会变成“模板”面板。

步骤 2：定义可编辑区域

这是模板制作中最核心的一步。可编辑区域 是模板中允许用户进行个性化修改的部分，比如每页不同的标题、正文内容和图片。

  1. 在你的模板页面中,将光标定位到你希望用户可以编辑的位置，在页头下方、页脚上方的位置，这里将是文章正文。

  2. 有两种常用方法来创建可编辑区域：

    • 方法一（推荐）：使用“模板”面板
      • 在右侧的 “模板” 面板中，点击 “可编辑区域” 按钮。
    • 使用菜单栏
      • 在顶部菜单栏选择 插入 > 模板对象 > 可编辑区域。

  3. 在弹出的对话框中,给你的可编辑区域起一个清晰、有意义的名字，EditRegion1、MainContent 或 PageTitle，命名规范很重要，方便以后管理。

  4. 点击 “确定”。

你会看到,你刚才命名的区域被一个浅色高亮和标签包围，<div id="MainContent">，这表示这个区域现在是“可编辑”的了。

重复此步骤，为所有需要用户自定义的部分创建可编辑区域。

  • 一个用于页面标题：PageTitle
  • 一个用于文章正文：MainContent
  • 一个用于侧边栏小部件：Sidebar

步骤 3：设置不可编辑区域（可选但推荐）

模板中除了可编辑区域,其他所有部分默认都是锁定（不可编辑）的，你的页头 <header>、导航栏 <nav>、页脚 <footer> 等都是锁定的，你不需要手动设置它们，但为了清晰，你可以给它们加上 “可选区域” 或 “重复区域”。

  • 可选区域：用于设置某些内容在某些页面显示，在某些页面不显示。

    • 选中要设置为可选的区域（比如一个“会员专享”的提示框）。
    • 在 “模板” 面板中，点击 “可选区域”。
    • 在弹出的对话框中,你可以设置默认是显示还是隐藏。

  • 重复区域：用于创建可以重复出现的元素，比如文章列表、产品列表等。

    • 选中要设置为重复的区域（比如一个包含“标题+图片+的列表项）。
    • 在 “模板” 面板中，点击 “重复区域”。

对于初学者,先掌握 可编辑区域 就足够了。

步骤 4：保存模板

完成布局后,点击 文件 > 保存（或按快捷键 Ctrl+S / Cmd+S）。 Dreamweaver 会自动将文件保存为 .dwt 格式，并放在你站点根目录下的一个名为 Templates 的文件夹中（如果没有，它会自动创建）。

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

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

步骤 1：从模板新建文件

  1. 在 Dreamweaver 中，选择 文件 > 新建。
  2. 在弹出的窗口中,选择 “模板” 选项卡。
  3. 在左侧选择你的 “站点”。
  4. 在中间的列表中,你会看到你刚刚创建的模板文件（template.dwt）。
  5. 勾选右下角的 “当模板改变时更新页面”（这个选项强烈建议勾选）。
  6. 点击 “创建”。

Dreamweaver 会为你生成一个新的 HTML 文件，你会看到：

  • 页面布局和你的模板完全一样。
  • 只有你定义的可编辑区域是高亮显示的，并且可以自由编辑。
  • 所有其他部分（页头、页脚等）都是灰色的，无法直接修改。

步骤 2：编辑新页面

你可以在这些高亮的可编辑区域里自由添加你的内容了。

  • 在 PageTitle 区域输入页面标题。
  • 在 MainContent 区域输入文章正文。
  • 插入图片、表格等，它们都会被自动包含在可编辑区域内。

步骤 3：保存并预览

像保存普通 HTML 文件一样保存你的新页面（index.html, about.html, contact.html）。

你可以按 F12 键在浏览器中预览页面，你会发现，页面既有统一的模板布局，又有你自己填写的独特内容。

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

这是模板最强大的功能,假设你网站的导航栏需要增加一个新链接，或者页脚的版权年份需要更新。

步骤 1：修改模板文件

  1. 在 Dreamweaver 的 “文件” 面板中，展开你站点的 Templates 文件夹。
  2. 双击打开你的模板文件（template.dwt）。
  3. 像编辑普通网页一样,修改你想要更新的部分，在导航栏里增加一个“博客”链接。
  4. 修改完成后,保存模板文件。

步骤 2：Dreamweaver 自动提示更新

只要你一保存模板,Dreamweaver 就会立刻弹出一个 “更新页面” 的对话框。

这个对话框会告诉你：

  • 模板已经更改。
  • 它找到了多少个基于该模板的页面。
  • 询问你是否要立即更新所有这些页面。

直接点击 “更新” 即可。

步骤 3：更新完成

Dreamweaver 会在后台自动扫描你的整个站点，打开所有基于该模板的页面，将它们的锁定部分替换为模板的最新版本，然后保存这些页面。

完成后,它会弹出一个报告，告诉你成功更新了多少个文件。

你打开任何一个之前用模板创建的页面（index.html, about.html 等），都会发现它们的导航栏或页脚已经同步更新了，而你之前在可编辑区域里添加的内容完好无损。

总结与小贴士

  • 核心思想：锁定共性（布局），编辑个性（内容）。
  • 先建站点，再建模板：这是 Dreamweaver 工作流的基本要求，否则无法使用模板功能。
  • 命名规范：给可编辑区域起一个好记的名字，如 HeaderLogo, MainContent, PageFooter，方便后期识别。
  • 不要在基于模板的页面中修改锁定区域：如果你想修改页头或页脚，必须回到模板文件中去修改。
  • 解除模板绑定：如果你想把某个基于模板的页面变成一个完全独立的、不受模板控制的普通页面，可以选中该页面，在 “修改” > “模板” 菜单中选择 “脱离模板”。请谨慎使用此功能，因为之后该页面将不再随模板更新。

通过以上步骤,你就可以熟练掌握 Dreamweaver 模板功能，让你的网站维护工作事半功倍！