核心概念：什么是网页模板？

在开始之前,我们先理解一下模板的作用。

DW中如何给做好的网页加模板
（图片来源网络，侵删）
  • 模板 = “骨架” + “可编辑区”
    • 骨架（锁定区域）: 网站中所有页面都共有的部分，比如网站的Logo、导航栏、页脚版权信息、侧边栏等，这些部分一旦确定，通常不会在单个页面中修改。
    • 可编辑区: 每个页面独有的内容，比如文章标题、正文、图片等，这些区域是你在使用模板创建页面后，可以自由修改和填充的部分。

使用模板的好处：

  1. 高效开发: 无需重复制作页头页脚，只需修改模板，所有基于该模板的页面都会自动更新。
  2. 风格统一: 确保整个网站的设计风格（如导航、颜色、字体）保持一致。
  3. 易于维护: 当需要更换网站Logo或修改版权信息时，只需修改一个模板文件，所有页面都会同步更新，避免了“改一个页脚要翻几十个页面”的噩梦。

操作步骤：从创建模板到应用模板

我们将分为三个主要步骤：

  1. 创建模板: 将一个现有的HTML页面另存为模板文件。
  2. 定义可编辑区域: 在模板中划定哪些内容可以修改。
  3. 应用模板: 使用模板创建新的网页，或将已有网页应用到模板上。

第一步：创建模板

最简单的方式是将你设计好的一个标准网页（index.html）转化为模板。

  1. 打开你的网页: 在Dreamweaver中打开你想要用作模板的HTML文件，这个文件应该包含了你网站的标准布局，比如一个完整的页头、内容区和页脚。

    DW中如何给做好的网页加模板
    （图片来源网络，侵删）

  2. 另存为模板: 点击菜单栏的 文件 -> 另存为模板。

    • 快捷键: Ctrl + Alt + S (Windows) / Cmd + Option + S (Mac)。

  3. 保存设置: 在弹出的对话框中：

    • 站点: 确保选择正确的本地站点，模板必须保存在站点根目录下的一个特殊文件夹 Templates 中，如果这个文件夹不存在，Dreamweaver会自动为你创建。
    • 描述: 可以给你的模板起个名字，main.dwt。.dwt 是Dreamweaver模板文件的标准后缀。
    • 点击 保存。

你的网页已经变成了一个模板文件（main.dwt），并且会自动在DW的右侧面板中显示“文件”和“资源”选项卡。

第二步：定义可编辑区域

这是最关键的一步,你需要告诉Dreamweaver，在模板的哪些部分允许用户修改。

DW中如何给做好的网页加模板
（图片来源网络，侵删）

  1. 打开模板文件: 在“文件”或“资源”面板中双击打开你刚刚创建的模板文件（main.dwt）。

  2. 选中要设置为可编辑区域的内容:

    • 方法一（推荐）: 将光标放在你想要变成可编辑区域的段落、表格或图片上，然后直接右键点击，选择 模板 -> 新建可编辑区域。
    • 方法二: 在菜单栏选择 插入 -> 模板对象 -> 可编辑区域。

  3. 命名可编辑区域: 在弹出的对话框中，给你的可编辑区域起一个清晰、有意义的名字，EditRegion1、Content、ArticleTitle 等。命名规范很重要，因为这会成为你在应用模板后修改内容的标识。

  4. 重复操作: 对所有需要用户自定义的区域重复以上步骤，你可能需要创建：

    • PageTitle (页面标题)
    • MainContent (主要内容)
    • Sidebar (侧边栏内容)

  5. 查看结果: 完成后，你会看到模板中只有被定义为可编辑区域的内容有高亮标签（通常是浅蓝色背景和标签），而其他所有区域都是被锁定的。

提示: 如果你想要取消某个可编辑区域，可以选中它，然后右键选择 模板 -> 删除可编辑区域。

第三步：应用模板

现在模板已经准备好了,我们可以用它来创建新页面，或者将已有的旧页面套用上这个模板。

方法A：创建基于模板的新页面

  1. 新建文件: 在菜单栏选择 文件 -> 新建。
  2. 选择模板: 在新建文档窗口中，切换到 模板 选项卡。
  3. 选择站点和模板: 在左侧选择你的站点，然后在中间的列表中选择你创建的模板（main）。
  4. 创建: 点击 创建 按钮。

Dreamweaver会自动为你创建一个基于该模板的新HTML文件,在这个新文件中，你只能修改那些被定义为“可编辑区域”的内容，其他区域无法编辑，你可以直接保存这个新文件，比如命名为 about.html、products.html 等。

方法B：将模板应用到已有页面

如果你已经有一些做好的页面,现在想统一使用模板，可以这样做：

  1. 打开目标页面: 在Dreamweaver中打开你想要应用模板的旧页面（old-page.html）。
  2. 应用模板: 在菜单栏选择 修改 -> 模板 -> 应用模板到页...。
  3. 选择模板: 在弹出的对话框中，选择你想要应用的模板，然后点击 确定。

重要提示：可选内容区域

在应用模板时,如果旧页面中有些内容没有被新模板的任何可编辑区域覆盖，Dreamweaver会弹出警告，它会将这些无法匹配的内容放入一个名为“可选区域”的地方，你可以选择：

  • 移到新的可选区域: 保留旧内容，但会以一个特殊标记存在。
  • 删除不匹配的内容: 直接丢弃旧页面中无法对应的部分。

对于已经完成的页面,建议选择“删除不匹配的内容”，以保持模板的整洁。

高级技巧：可选区域与重复区域

当你掌握了基础后,还可以使用更高级的模板功能。

  • 可选区域:

    • 作用: 在应用了模板的页面中，可以选择性地显示或隐藏某些内容。
    • 例子: 在模板中设置一个“会员专享优惠”的可选区域，然后在不同的页面中，可以选择显示或隐藏这个优惠。
    • 创建: 插入 -> 模板对象 -> 可选区域。

  • 重复区域:

    • 作用: 允许在页面中多次复制一个可编辑区域，这对于创建列表（如新闻列表、产品列表）非常有用。
    • 例子: 在模板中创建一个“新闻条目”的重复区域，当应用模板后，你可以在这个区域内添加多条新闻，它们会自动保持模板的样式。
    • 创建: 插入 -> 模板对象 -> 重复区域。
  1. 创建模板: 文件 -> 另存为模板，保存在站点的 Templates 文件夹。
  2. 定义可编辑区: 选中内容，右键 -> 模板 -> 新建可编辑区域，并命名。
  3. 应用模板:
    • 新建页面: 文件 -> 新建 -> 选择模板 -> 创建。
    • 应用到旧页: 修改 -> 模板 -> 应用模板到页...。

通过这套流程,你就可以高效地管理和维护你的网站项目了，模板是Dreamweaver的精髓之一，熟练掌握它将让你的工作效率倍增。