第一部分：创建模板的基本步骤

这个过程将指导你如何从一个现有的 HTML 页面创建一个模板，并定义哪些区域是可编辑的。

dreamweaver中怎麽创建模板
（图片来源网络，侵删）

步骤 1：准备一个 HTML 页面

你需要一个已经设计好的 HTML 页面作为基础，这个页面应该包含你的网站共有的元素，

  • 页眉: Logo、主导航菜单
  • 页脚: 版权信息、备案号、底部链接
  • 侧边栏: 常见的链接或组件
  • 区: 这个区域将是每个页面不同的地方

假设你已经有一个名为 index.html 的页面。

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

  1. 在 Dreamweaver 中打开你的 index.html 文件。
  2. 点击顶部菜单栏的 文件 > 另存为模板。
  3. 这时会弹出一个“另存为模板”对话框。
    • 站点: 确保选择了正确的本地站点。
    • 另存为: 为你的模板起一个有意义的名字，dwt_main.dwt，Dreamweaver 会自动为模板文件添加 .dwt 扩展名，这个文件通常应该保存在你站点的根目录下的一个名为 Templates 的文件夹中（如果该文件夹不存在，Dreamweaver 会自动创建）。
  4. 点击 保存。

保存后,你会注意到页面的背景色可能会变成淡黄色，并且顶部会出现一个“模板”标签页，这表明你现在已经处于模板编辑模式。

步骤 3：定义可编辑区域

这是最关键的一步,你需要告诉 Dreamweaver，模板的哪些部分是固定的，哪些部分需要在基于此模板创建的页面中进行修改。

dreamweaver中怎麽创建模板
（图片来源网络，侵删）

  1. 选中要设置为可编辑的区域：

    • 将光标放在你想要修改的内容的开始位置,然后拖动鼠标选中它。
    • 你想让文章的标题和正文内容可以修改，就选中 <h1> 标签和 <p> 标签内的所有文字。

  2. 插入可编辑区域：

    • 后,点击顶部菜单栏的 插入 > 模板对象 > 可编辑区域。
    • 或者,在右侧的 插入 面板中，切换到 常用 或 模板 分类，然后点击 可编辑区域 图标。
    • 这时会弹出一个对话框,为这个可编辑区域起一个清晰的名字，Edit_Title 和 Edit_Content，好的命名习惯非常重要，能让你以后更容易识别。
    • 点击 确定。

  3. 查看结果：

    • 你选中的区域会被一个淡黄色的标签包围,标签上显示了它的名称（如 Edit_Title）。
    • 页面中没有被标记为可编辑的区域（如页眉、页脚、导航栏）将保持锁定状态，背景色为灰色，表明这些是基于模板的固定内容。

步骤 4：保存模板

完成可编辑区域的定义后,点击 文件 > 保存 或按 Ctrl + S (Windows) / Cmd + S (Mac) 来保存你的模板文件 dwt_main.dwt。

dreamweaver中怎麽创建模板
（图片来源网络，侵删）

第二部分：使用模板创建新页面

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

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

    • 在 Dreamweaver 中，点击 文件 > 新建。
    • 在弹出的窗口中,选择 模板 选项卡。
    • 在左侧选择你的站点,在右侧选择你刚刚创建的模板 dwt_main.dwt。
    • 点击 创建。

  2. 编辑新页面：

    • Dreamweaver 会根据你的模板生成一个新的 HTML 文件。
    • 你会发现,只有你之前定义为可编辑的区域（如 Edit_Title 和 Edit_Content）可以修改，页眉、页脚等灰色区域是无法直接编辑的。
    • 像编辑普通网页一样,修改这些可编辑区域的内容。
    • 将新文件另存为,about.html 或 products.html。

第三部分：管理模板与更新网站

模板最强大的功能在于“一次修改，全局更新”。

如何更新模板

  1. 在 Dreamweaver 中打开你的模板文件 dwt_main.dwt。

  2. 对任何固定区域进行修改，你想在页眉的导航栏中增加一个新的“关于我们”链接。

  3. 修改完成后,保存模板，这时 Dreamweaver 会弹出一个非常重要的对话框：

  4. 这个对话框会询问你是否要将这些更新应用到所有基于此模板的网页,你会选择 “更新页面”。

  5. 点击 更新页面 后，会弹出一个“更新页面”对话框，你可以选择更新当前站点中的所有文件，或选择特定文件，点击 开始。

  6. Dreamweaver 会自动扫描所有使用了该模板的页面，并将它们的固定区域内容同步更新。

如何分离模板

你可能需要基于一个模板创建的页面进行大幅修改,以至于不再想受模板的约束，这时可以“分离”模板。

  1. 打开一个基于模板的页面（about.html）。
  2. 点击顶部菜单栏的 修改 > 模板 > 从模板中分离。
  3. Dreamweaver 会弹出一个警告，告诉你分离后模板的修改将不再影响此页面，点击 确定。
  4. 这个页面就变成了一个完全独立的普通 HTML 文件，所有的区域都可以自由编辑。

第四部分：高级技巧与最佳实践

可选区域

可能在某些页面显示,而在其他页面不显示（文章的作者信息），这时可以使用“可选区域”。

  • 创建可选区域，点击 插入 > 模板对象 > 可选区域，你可以设置默认显示或隐藏。
  • 创建可选区域（基于表达式）：这更高级，可以根据某个条件（是否存在一个特定的图片）来决定是否显示内容。

重复区域

当你需要一个列表（如产品列表、新闻列表）时，重复区域非常有用，你可以在模板中定义一个列表项的模板，然后在基于模板的页面中添加多个重复项。

  • 创建重复区域：选中一个列表项（例如一个 <li> 或一个产品卡片），点击 插入 > 模板对象 > 重复区域。
  • 在页面中添加/删除重复项：在基于模板的页面中，你可以选中这个重复区域，然后在属性检查器中点击 号添加一个副本，或 号删除一个副本。

最佳实践

  • 清晰的命名：给模板文件和可编辑区域起一个有意义的、易于理解的名称。
  • 模块化设计：将复杂的布局拆分成多个小模板，然后通过“可选区域”或“重复区域”组合使用，这样可以提高模板的灵活性和复用性。
  • 备份：在对模板进行重大修改前，最好先备份一下模板文件。
  • 善用资源面板：在 Dreamweaver 的 资源 面板中，你可以看到当前站点中所有的模板，方便管理和预览。

通过以上步骤和技巧,你就可以在 Dreamweaver 中熟练地使用模板功能，构建出易于维护和扩展的专业网站。