什么是模板？为什么使用它？

在开始之前,我们先简单理解一下模板的概念和好处。

dreamweaver如何制作模板
（图片来源网络，侵删）
  • 模板：一个包含固定区域和可编辑区域的特殊 HTML 文件，固定区域（如页头、页脚、导航栏）在所有基于该模板的页面中保持不变，而可编辑区域（如文章内容、产品介绍）则允许你在各个页面中进行独立修改。
  • 使用模板的好处：
    1. 高效开发：只需设计一次布局,即可快速生成成百上千个页面。
    2. 风格统一：确保整个网站的视觉风格和导航结构完全一致。
    3. 便捷更新：当需要修改页头、页脚或导航栏时，只需修改模板文件,所有基于该模板的页面都会自动更新。
    4. 防止误操作：保护了固定区域不被意外修改。

制作模板的详细步骤

我们将通过一个常见的“两栏布局”网站为例,来演示如何制作模板。

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

  1. 打开 Dreamweaver。

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

  3. 在弹出的对话框中，选择 “空白页”。

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

  4. 在左侧的 “页面类型” 列表中，选择 “HTML”。

  5. 在右侧的 “布局” 列表中，选择一个预设布局，“2列，固定，页眉和页脚”，然后点击 “创建”，Dreamweaver 会为你生成一个基础的 HTML 结构,这会非常方便。

  6. 保存为模板：

    • 这个页面还只是一个普通的 HTML 文件,我们需要将其转换为模板。
    • 在菜单栏中选择 文件 > 另存为模板。
    • 在弹出的对话框中：
      • “站点”：选择你的网站站点（如果你还没创建站点，请先创建一个）。
      • “另存为”：为你的模板起一个名字，main.dwt。注意：模板文件的后缀名必须是 .dwt。
    • 点击 “保存”。

你的文件就变成了一个模板文件，你会注意到 Dreamweaver 的界面发生了一些细微变化，比如标题栏会显示 <模板>。

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

步骤 2：定义可编辑区域

这是模板制作的核心步骤，我们需要明确告诉 Dreamweaver，页面的哪些部分是固定的,哪些部分是允许用户修改的。

  1. 设置页眉的可编辑区域：

    • 将光标定位在 <header> 标签内的文本（"页眉"）上。
    • 在 “插入” 面板中，确保你选择了 “常用” 或 “模板” 分类。
    • 点击 “可编辑区域” 图标（像一个文档和铅笔的图标）。
    • 在弹出的对话框中，为这个区域命名，EditRegionHeader,命名最好具有描述性。
    • 点击 “确定”。

  2. 设置主要内容区的可编辑区域：

    • 将光标定位在 <main> 或 <div id="content"> 标签内。
    • 再次点击 “可编辑区域” 图标。
    • 命名为 EditRegionContent。
    • 点击 “确定”。

  3. 设置页脚的可编辑区域：

    • 将光标定位在 <footer> 标签内。
    • 再次点击 “可编辑区域” 图标。
    • 命名为 EditRegionFooter。
    • 点击 “确定”。

完成后的效果： 你的模板代码中会自动插入类似以下的代码： <!-- TemplateBeginEditable name="EditRegionContent" --> <!-- TemplateEndEditable -->

Dreamweaver 会在设计视图中用高亮色（通常是浅蓝色）的标签来显示这些可编辑区域，而其他区域则保持默认样式，表示它们是“锁定”的。

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

你可能希望某些内容在部分页面中显示，而在其他页面中隐藏，这时就需要使用“可选区域”。

我们想在主页显示一个“欢迎”横幅,但在其他页面不显示。

  1. 在模板的适当位置（比如页眉下方）输入“欢迎访问我们的网站！”。
  2. 选中这段文字。
  3. 在 “插入” 面板中，点击 “可选区域” 图标。
  4. 在弹出的对话框中，为这个区域命名，OptionalWelcomeBanner。
  5. 点击 “确定”。

这样，你就可以在基于此模板创建页面时,决定是否显示这个欢迎横幅。

步骤 4：保存并关闭模板

完成所有区域的定义后，按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存你的模板文件,然后关闭它。

使用模板创建新页面

模板创建好了,现在我们来用它创建页面。

  1. 在菜单栏中选择 文件 > 新建。
  2. 在弹出的对话框中，切换到 “从模板新建” 选项卡。
  3. 在左侧的 “模板用于” 列表中,选择你之前保存模板的网站站点。
  4. 在中间的 “站点 '你的站点名'” 列表中，你会看到你刚刚创建的 main.dwt 模板,选中它。
  5. 右下角有一个 “当模板改变时更新页面” 的选项,建议勾选它。
  6. 点击 “创建”。

Dreamweaver 会根据你的模板生成一个新的 HTML 页面，你会发现，只有你在模板中定义为“可编辑区域”的部分可以被修改，而页眉、导航、页脚等都是“锁定”的,无法直接编辑。

你就可以在这个新页面中填充你的内容了。

管理和更新模板

如何修改模板并更新所有页面？

这是模板最强大的功能。

  1. 打开你的模板文件 (main.dwt)。
  2. 对模板进行任何修改，比如修改导航栏的链接、更改页脚的版权信息或调整网站的 CSS 样式。
  3. 保存模板 (Ctrl + S)。
  4. 保存后，Dreamweaver 会自动弹出一个 “更新页面” 对话框。
  5. 在对话框中，你可以选择：
    • 查看更改：先预览一下将要更新的内容。
    • 更新：点击后，Dreamweaver 会自动扫描整个站点,并更新所有基于此模板的页面。
  6. 点击 “更新”，稍等片刻,你的整个网站就都更新好了！

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

如果你需要对一个基于模板的页面进行大幅修改，比如修改页头的结构，而模板不允许,你可以将页面与模板分离。

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

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

最佳实践与技巧

  • 规划先行：在开始编写代码前，先规划好网站的布局，确定哪些是固定元素,哪些是可变元素。
  • 命名清晰：为可编辑区域和可选区域起一个清晰、有意义的名字,方便日后管理。
  • 使用相对路径：在模板中插入图片、链接到 CSS/JS 文件时，务必使用相对路径（如 ../images/logo.png）,这样在基于模板生成的不同层级的页面中才能正确显示。
  • 善用库项目：对于一些重复使用的、但又希望独立于模板修改的小元素（比如一个通用的按钮样式或一个版权声明），可以考虑使用 “库项目” (Library Item)，库项目比模板更灵活,可以轻松地在任何页面中插入和更新。

通过以上步骤，你就可以熟练掌握在 Dreamweaver 中制作和使用模板的技巧,让你的网页开发工作事半功倍。