核心概念：为什么使用模板？

在开始之前,我们先理解一下模板的核心优势：

dreamweaver怎么做模板
（图片来源网络，侵删）
  • 一致性：确保网站所有页面拥有相同的页头、页脚、导航栏和侧边栏。
  • 效率：修改一次模板（如更新版权信息或更换Logo），所有基于该模板的页面都会自动更新,无需手动修改每一个页面。
  • 可控性：可以定义页面的哪些部分是可编辑的，哪些部分是固定的,防止意外修改网站结构。

第一步：创建一个基础网页作为模板

模板本身就是一个 HTML 文件，但它包含了特殊的模板标记,我们通常从一个已经设计好的网页开始。

  1. 新建一个 HTML 文件

    • 打开 Dreamweaver。
    • 选择 文件 > 新建。
    • 在弹出的窗口中，选择 HTML，然后点击 创建。
    • 你会得到一个空白的 HTML5 文档。

  2. 设计你的网页布局

    • 在这个空白文档中，像设计普通网页一样，构建你的网站布局，通常包括：
      • 页眉：包含 Logo、主导航菜单等。
      • 内容区：这是每页内容不同的地方。
      • 页脚：包含版权信息、联系方式、备案号等。
    • 你可以使用 Dreamweaver 的 实时视图 和 代码视图 结合来设计，也可以使用其强大的 网格布局 或 Flexbox 工具来辅助布局。

    示例布局代码 (仅供参考):

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>我的网站 Logo</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 这里的内容每页都不同 -->
        <h2>欢迎来到我的网站</h2>
        <p>这里是网站的主要内容区域。</p>
    </main>
    <footer>
        <p>&copy; 2025 我的公司. 保留所有权利.</p>
    </footer>
</body>
</html>

第二步：将网页另存为模板文件

设计好基础布局后,我们需要将它保存为模板。

  1. 点击菜单栏的 文件 > 另存为模板。
  2. 弹出“另存为模板”对话框：
    • 站点：选择你的站点，如果你还没有定义站点，请先 站点 > 新建站点。
    • 描述：为模板添加一个简短的描述,方便日后识别。
    • 模板名称：给你的模板起一个名字，dwt_main.dwt，Dreamweaver 会自动为模板文件添加 .dwt 扩展名。
  3. 点击 保存。

保存后，你会注意到 Dreamweaver 自动在站点的根目录下创建了一个名为 Templates 的文件夹，并将你的模板文件 dwt_main.dwt 放在里面，你的代码视图中会出现一些特殊的注释标记，<!-- TemplateBeginEditable name="content" -->，这是 Dreamweaver 自动生成的。

第三步：定义可编辑区域

这是模板制作中最关键的一步，我们需要告诉 Dreamweaver，页面的哪些部分是固定的,哪些部分是可以在新页面中自由修改的。

  1. 切换到代码视图,因为这是最精确选择区域的方式。
  2. 选择要设置为可编辑的区域：
    • 将光标定位到你希望内容可变的部分，<main> 标签内的所有内容。
    • 用鼠标拖动选中这部分代码（从 <main> 开始，到 </main> 结束）。
  3. 插入可编辑区域：
    • 选中代码后，在菜单栏选择 插入 > 模板对象 > 可编辑区域。
    • 或者，在右侧的 插入 面板中，切换到 常用 类别，点击 模板 图标，然后选择 可编辑区域。
  4. 命名可编辑区域：
    • 会弹出一个对话框，要求你为这个区域命名。命名规则：
      • 使用英文,不要有空格或特殊字符。
      • 名称要有意义，Content、MainContent、PageTitle 等。
      • 在我们的例子中，可以命名为 content。
    • 点击 确定。

你的代码看起来会像这样：

<main>
    <!-- TemplateBeginEditable name="content" -->
    <h2>欢迎来到我的网站</h2>
    <p>这里是网站的主要内容区域。</p>
    <!-- TemplateEndEditable -->
</main>

重要提示：

  • 页眉、页脚、导航栏等：这些通常不需要设置为可编辑区域,它们是固定的。
  • <title>：网站标题每页都不同，所以它也应该是一个可编辑区域，你可以将 <title> 标签内的内容（文档）选中，然后设置为可编辑区域，并命名为 doctitle。

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

模板制作完成后,就可以用它来快速生成新页面了。

  1. 点击 文件 > 新建。
  2. 在新建窗口中，选择 网站上的模板。
  3. 在右侧的模板列表中，选择你刚刚创建的模板（dwt_main）。
  4. 勾选 当模板改变时更新页面 选项（这个选项非常重要！）。
  5. 点击 创建。

Dreamweaver 会为你生成一个新页面，这个页面已经包含了模板的所有固定元素（页眉、页脚等），并且只有你在模板中定义的可编辑区域（如 content 和 doctitle）是高亮显示的,可以自由编辑。

你只需要在这些高亮区域内输入你的具体内容,然后保存这个新页面即可。

第五步：更新模板

当你需要修改网站的整体设计时（比如更换 Logo、修改页脚版权、调整导航栏）,只需要修改模板文件即可。

  1. 打开你的模板文件（通常在 Templates 文件夹下，dwt_main.dwt）。
  2. 做出你想要的修改，将页脚的版权年份从 2025 改为 2025。
  3. 保存模板，Dreamweaver 会弹出一个“更新模板文件”的对话框。
  4. 在对话框中，选择 更新模板文件，然后点击 开始。
  5. Dreamweaver 会自动扫描整个站点，找出所有基于该模板的页面，并提示你更新它们，点击 更新。

稍等片刻，所有相关页面都会被自动更新,而你无需手动打开每一个页面进行修改。

高级技巧与注意事项

  • 可选区域：如果你想创建一些在某些页面显示、在另一些页面不显示的内容（一个“特价商品”横幅），可以使用 可选区域。
    • 插入方法：插入 > 模板对象 > 可选区域。
    • 你可以设置默认显示或隐藏，甚至可以基于一个表达式来控制（如果某个变量为真则显示）。
  • 重复区域：如果你想创建一个可以重复多次的列表项（新闻列表、团队成员列表），可以使用 重复区域。
    • 插入方法：插入 > 模板对象 > 重复区域。
    • 在基于模板的页面中,你可以轻松地添加或删除这个重复的块。
  • 断开链接：如果你基于模板创建了一个页面，但后来发现这个页面需要变得非常特殊，不再遵循模板的规则，你可以 断开链接。
    • 方法：在基于模板的页面中，选择 修改 > 模板 > 从模板中分离。
    • 警告：一旦断开链接，这个页面就变成了普通的 HTML 文件，不再受模板控制，未来对模板的更新将不会影响到它,请谨慎使用。
  • 模板文件夹：请务必不要重命名 Templates 文件夹，也不要将模板文件移出这个文件夹，Dreamweaver 依赖这个固定的结构来管理模板。

通过以上步骤，你就可以熟练掌握 Dreamweaver 的模板功能,极大地提高你的网站开发与维护效率。