什么是静态网页模板？

模板是一个预先设计好的“母版页”，它定义了网站中多个页面共有的布局和结构（页头、页脚、导航栏），同时允许你定义一些可以编辑的区域（文章标题、内容正文）。

dreamweaver静态网页 模版
（图片来源网络，侵删）

当你基于模板创建新页面时，新页面会自动继承模板的布局，当你需要修改所有页面的共同部分（比如更新导航菜单）时，只需修改模板文件，Dreamweaver 会自动更新所有基于该模板的页面,极大地减少了重复劳动。

模板的核心组成部分

在 Dreamweaver 中,一个模板文件主要包含以下两种区域：

  1. 可编辑区域

    • 定义：这是模板中唯一可以被修改的部分。
    • 作用：当你使用模板创建新页面时,你只能在可编辑区域内添加或修改内容。
    • 示例：在博客首页模板中，“文章列表”部分就是一个可编辑区域,因为每篇文章的内容都不同。

  2. 锁定区域

    dreamweaver静态网页 模版
    （图片来源网络，侵删）
    • 定义：模板中除可编辑区域以外的所有部分。
    • 作用：这些区域是被“锁定”的，在基于模板的页面中无法直接修改,它们确保了网站整体风格的一致性。
    • 示例：网站的 Logo、主导航栏、页脚版权信息等通常是锁定区域,因为这些元素在所有页面上都是相同的。

创建和使用模板的完整步骤

下面我们通过一个实例,一步步演示如何创建一个简单的两栏布局网站模板。

第一步：规划你的网站结构

在开始之前，先想清楚哪些部分是固定的（锁定区域），哪些是变化的（可编辑区域）。

  • 锁定区域：Logo、主导航、页脚版权信息。
  • 可编辑区域（<title>）、页面主要内容区。

第二步：创建一个基础 HTML 页面作为模板

  1. 新建文件：打开 Dreamweaver，选择 文件 > 新建，然后选择 HTML，创建一个新的空白 HTML5 文件。
  2. 保存为模板：这是最关键的一步！
    • 点击 文件 > 另存为模板。
    • Dreamweaver 会提示你创建一个 Templates 文件夹（如果它不存在的话），请务必保留这个文件夹结构，因为 Dreamweaver 依赖它来管理模板。
    • 为你的模板命名，main.dwt.html。.dwt 是 Dreamweaver 模板的扩展名,它会自动添加。
    • 点击“保存”。

第三步：定义锁定区域和可编辑区域

你已经有了一个模板文件,我们来划分区域。

创建锁定区域

dreamweaver静态网页 模版
（图片来源网络，侵删）

  • Logo 和导航栏：直接输入或粘贴你的 HTML 代码。

    <header>
  <div id="logo">我的网站</div>
  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">关于我们</a></li>
      <li><a href="contact.html">联系我们</a></li>
    </ul>
  </nav>
</header>

    这部分代码目前是“可编辑”的，我们需要将它“锁定”。

  • 锁定代码：

    • 选中你想要锁定的代码块（例如整个 <header> 部分）。
    • 在 “插入” 面板中，确保你选择了 “模板” 分类。
    • 点击 “可选区域” 旁边的下拉箭头，选择 “锁定区域”。
    • 在弹出的对话框中，给这个区域起个名字（headerRegion），然后点击“确定”。
    • Dreamweaver 会用特殊的黄色高亮和标签 <!-- InstanceBeginTemplate name="main.dwt.html" --> 和 <!-- InstanceBeginEditable name="headerRegion" --> 等来标记你的模板，这些标记是 Dreamweaver 的内部指令,请不要手动修改它们。

创建可编辑区域

  • 区：在页面的主体部分，放置一个占位符，<h1>页面标题</h1> 和 <p>这里是页面主要内容...</p>。
  • 定义可编辑区域：
    • 选中你想要设置为可编辑的代码块（<h1> 和 <p> 标签）。
    • 在 “插入” 面板的 “模板” 分类中，直接点击 “可编辑区域”。
    • 在弹出的对话框中，给这个区域起一个清晰的名字，MainContent，然后点击“确定”。
    • 这部分代码会被高亮显示，并带有 <!-- TemplateBeginEditable name="MainContent" --> 标记,表明这是可以编辑的部分。

设置页面标题的可编辑区域（推荐）

每个页面的 <title> 标签都应该是不同的,所以它也应该是一个可编辑区域。

  • 在代码视图中，找到 <title> 和 </title>
  • 选中 <title> 和 </title> 之间的默认文本（Untitled Document）。
  • 像之前一样，使用 “插入” > “模板” > “可编辑区域”，将其命名为 doctitle。

你的模板就基本完成了，它应该包含一个或多个锁定区域,以及至少一个可编辑区域。

第四步：基于模板创建新页面

模板创建好了,现在我们来用它生成实际的网页。

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

    • 文件 > 新建。
    • 在弹出的窗口中，选择 “网站模板”。
    • 从列表中选择你刚刚创建的模板（main.dwt.html）。
    • 勾选 “当模板改变时更新页面”（这是一个好习惯）。
    • 点击“创建”。

  2. 编辑新页面：

    • Dreamweaver 会打开一个新页面，你会发现，只有你定义的“可编辑区域”（如 MainContent 和 doctitle）是可修改的，其他部分（如导航栏、页脚）是灰色的,无法直接编辑。
    • 在 “属性” 面板中,你可以通过下拉菜单在不同的可编辑区域之间切换。
    • 修改页面标题：在属性面板的下拉菜单中选择 doctitle，然后在页面顶部的文档栏中输入新标题，如“关于我们”。
    • 修改主要内容：在属性面板的下拉菜单中选择 MainContent,然后在设计视图中输入或编辑你的页面内容。
    • 保存这个新页面，例如命名为 about.html。

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

这是模板功能最强大的地方。

  1. 修改模板：打开你的模板文件 main.dwt.html。
  2. 进行修改：你想在导航栏增加一个“产品”链接，直接在锁定区域 headerRegion 中添加 <li><a href="products.html">产品</a></li>。
  3. 保存模板：点击 文件 > 保存，Dreamweaver 会弹出一个 “更新页面” 的对话框。
  4. 更新页面：
    • 在对话框中，Dreamweaver 会询问你希望更新哪些文件。
    • 通常选择 “更新当前站点中的所有文件”，然后点击“开始”。
    • Dreamweaver 会自动扫描所有基于 main.dwt.html 模板创建的页面（如 index.html, about.html, contact.html），并将它们同步更新，添加新的“产品”链接。
    • 更新完成后，点击“关闭”。

高级技巧与注意事项

  • 可选区域：除了锁定和可编辑区域，还有“可选区域”，它允许你在基于模板的页面中，有选择地显示或隐藏某一块内容，这对于 A/B 测试或展示不同版本的内容非常有用，在“插入”面板中可以找到。
  • 重复区域：这是用于创建列表（如博客文章、产品列表）的利器，它允许你在模板中定义一个可以重复多次的区域（如一篇博客文章的框架），当你在基于模板的页面中编辑时，可以轻松地添加、删除或排序这些重复项。
  • 模板参数：可以给可选区域传递参数，实现更灵活的控制,例如通过下拉菜单选择不同的颜色主题。
  • 脱离模板：如果你需要修改一个基于模板的页面的锁定区域，你可以选择该页面，然后在 “属性” 面板中点击 “脱离模板” 按钮。请谨慎使用此功能，因为这会使页面失去模板的保护，未来模板更新时,这个页面的锁定部分将不会被同步。
  • 使用“资源”面板：Dreamweaver 的 “窗口 > 资源” 面板可以集中管理你网站中的所有模板，方便你查看、重命名或删除它们。

通过以上步骤，你就可以高效地使用 Dreamweaver 的模板功能来构建和维护一个结构清晰、风格统一的静态网站了。