Dreamweaver 模板制作全攻略：从入门到精通

Dreamweaver 的模板功能是其最强大的特性之一，它允许你创建一个包含固定区域和可编辑区域的“母版”页面，当你基于这个模板创建新页面时，所有页面都会自动继承模板的结构和样式，当你修改模板后，所有基于该模板的页面都可以一键更新,极大地提高了网站维护的效率。

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

第一部分：核心概念（为什么需要模板？）

在开始制作之前,我们先理解几个关键概念：

  1. 模板文件

    • 一个扩展名为 .dwt 的 HTML 文件。
    • 它是网站的“蓝图纸”或“母版”。
    • 你永远不会直接在浏览器中打开 .dwt 文件来访问网站。

  2. 可编辑区域

    • 这是模板中唯一允许用户修改内容的部分。
    • 每个页面的标题、正文内容、图片等都是不同的,所以它们应该被设置为可编辑区域。

  3. 不可编辑区域

    dreamweaver模板制作教程
    （图片来源网络，侵删）
    • 这是模板中所有页面共享的固定部分。
    • 网站的 Logo、导航栏、页脚版权信息、侧边栏等，这些部分一旦在模板中定义,就不能在基于模板的页面中直接修改。

  4. 基于模板的文档

    • 一个普通的 .html 文件，但它与一个 .dwt 模板文件关联。
    • 它继承了模板的所有不可编辑区域，同时拥有自己独立的内容（在可编辑区域内）。
    • 你不能直接修改基于模板的文档中的不可编辑区域,必须返回模板文件进行修改。

第二部分：制作你的第一个模板

假设我们要为一个简单的博客网站制作模板，它包含：一个固定的头部（带 Logo 和主导航）、一个可编辑的内容区和固定的页脚。

步骤 1：创建新模板文件

  1. 打开 Dreamweaver。
  2. 在顶部菜单栏选择 文件 > 新建。
  3. 在弹出的窗口中，选择 “空模板”。
  4. 在下方的 “模板类型” 中，选择 “HTML 模板”。
  5. 点击 “创建”。

你得到了一个名为 untitled-1.dwt.html 的新文件，建议立即将其保存，例如命名为 main_template.dwt。

步骤 2：构建页面结构并设置不可编辑区域

像制作普通网页一样，构建你的基本布局，我们使用 Dreamweaver 的 “实时视图” 和 “代码视图” 来操作。

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

  1. 插入固定区域（不可编辑）：

    • 头部：在页面顶部插入一个 <header> 标签，里面放上你的 Logo（图片）和主导航菜单（<nav> 和 <ul> 列表）。
    • 页脚：在页面底部插入一个 <footer> 标签，里面放上版权信息，如 © 2025 我的博客。

    这时候，这些区域还是普通 HTML，我们需要将它们标记为“不可编辑”，在 Dreamweaver 中，这通常是默认的，只要你没有把它们设置为可编辑区域,它们就是不可编辑的。

  2. 插入可编辑区域：

    • 这是模板的核心，将光标定位在你希望内容变化的地方，比如在 <header> 和 <footer> 之间。
    • 在顶部菜单栏选择 “插入” > “模板对象” > “可编辑区域”。
    • 在弹出的对话框中，给你的区域起一个清晰、有意义的名字，EditRegionMainContent。
    • 点击 “确定”。

    你会看到，在实时视图中，这个区域被一个淡黄色的标签和名称（EditRegionMainContent）包围,这表明它是一个可编辑区域。

步骤 3：保存模板

按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存你的模板文件，Dreamweaver 会提示你此文件是模板，并会自动在站点的根目录下创建一个名为 Templates 的文件夹，并将你的 .dwt 文件保存在其中。请确保你是在一个已定义的站点中操作。

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

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

  1. 在 Dreamweaver 中，选择 文件 > 新建。
  2. 在新建窗口中，选择 “从模板新建”。
  3. 在 “模板用于” 列表中,选择你的站点。
  4. 在右侧的 “站点 '你的站点名'” 列表中，选择你刚刚创建的 main_template.dwt。
  5. 勾选 “当模板改变时更新页面”（这是一个好习惯）。
  6. 点击 “创建”。

Dreamweaver 会为你生成一个新的 HTML 文件，打开它,你会发现：

  • Logo、导航栏和页脚都已经被填充好了。
  • 区域是空白的，并且光标默认就在这里,等待你输入内容。
  • 你无法直接修改 Logo 或导航栏的文字,因为它们是受模板保护的不可编辑区域。

第四部分：高级技巧与常见问题

技巧 1：创建多种可选区域

你可能希望某些区域在某些页面显示，而在另一些页面隐藏，这时就需要“可选区域”。

  • 可选区域：显示或隐藏整个区域。

    1. 在模板文件中，选中你想要设为可选的 HTML 代码块（例如一个 <aside> 侧边栏）。
    2. 选择 “插入” > “模板对象” > “可选区域”。
    3. 在弹出的对话框中,你可以设置默认是显示还是隐藏。
    4. 保存模板后，在基于模板的页面中，你可以通过 “修改” > “模板属性” 来控制这个区域的显示与隐藏。

  • 可选可编辑区域：更高级的功能，允许你控制一个可编辑区域是否可见,同时保留其内容。

    1. 选中一个可编辑区域（EditRegionMainContent）。
    2. 选择 “插入” > “模板对象” > “可选可编辑区域”。
    3. 保存模板。
    4. 在基于模板的页面中，通过 “修改” > “模板属性”，你可以选择“显示”或“隐藏”这个内容区，如果隐藏,整个区域将从页面中消失。

技巧 2：基于模板的页面与模板分离

如果你需要修改一个基于模板的页面的某个“固定”部分（比如只改这一个页面的导航栏）,你可以将其与模板分离。

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

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

技巧 3：重复区域

对于表格或列表,你可能需要一个可以重复添加的行或项目。

  1. 在模板中，选中你想要重复的表格行 (<tr>) 或列表项 (<li>)。
  2. 选择 “插入” > “模板对象” > “重复区域”。
  3. 保存模板。
  4. 在基于模板的页面中，你会看到一个 号按钮,点击它就可以复制出新的行或项目。

第五部分：更新模板与站点

这是模板功能的最终目的。

  1. 打开你的模板文件 (main_template.dwt)。
  2. 做出任何你想要的修改，你想在主导航栏增加一个“关于我们”的链接。
  3. 保存模板 (Ctrl + S)。
  4. Dreamweaver 会弹出一个“更新页面”对话框。
    • 它会询问你希望更新哪些文件。
    • 你可以选择 “更新当前文档” 或 “更新整个站点”。
    • 勾选 “查看已修改的内容” 可以在更新前预览差异。
  5. 点击 “开始”。

Dreamweaver 会自动扫描整个站点，找出所有使用该模板的页面，并将它们全部更新,你再也不用手动修改几十上百个页面了！

第六部分：最佳实践与总结

  1. 规划先行：在制作模板之前，先用纸笔或设计软件规划好网站的整体布局，确定哪些是固定区域,哪些是可变区域。
  2. 命名清晰：给可编辑区域起一个有意义的名字，如 EditRegionContent、EditRegionSidebar、EditRegionTitle,方便日后管理。
  3. 善用 CSS：模板的样式最好通过外部 CSS 文件来控制，这样你修改样式时，只需要改 CSS 文件即可,无需动模板结构。
  4. 不要滥用分离：除非有特殊且必要的理由，否则尽量不要将页面与模板分离,这会破坏模板的管理优势。
  5. 备份：在进行大规模更新前,最好备份你的整个站点。

通过以上步骤，你已经掌握了 Dreamweaver 模板的核心用法，它虽然是一个传统工具，但其设计理念（内容与表现分离、组件化开发）至今仍是现代 Web 开发的基础，熟练掌握它，对于维护中小型静态网站或学习 Web 开发的基本思想都非常有帮助。