Dreamweaver 模板制作全攻略

为什么使用模板？

在开始之前,我们先要明白模板的重要性。

dreamweaver模板制作教程
（图片来源网络，侵删）
  • 提高效率：创建一个模板后，可以基于它快速生成数百个风格一致的网页，无需重复编写相同的头部、导航栏和页脚代码。
  • 统一风格：确保整个网站的设计元素（如 Logo、导航菜单、配色方案）保持一致，提升品牌形象。
  • 便于维护：当需要修改网站的共同部分（更换导航栏链接或更新页脚版权信息）时，只需修改模板文件，所有基于该模板的页面都会自动更新，极大减少了工作量。

模板的核心概念：可编辑区域

模板文件本身是不可编辑的，这意味着你不能直接在模板上修改内容，以防止意外破坏网站的布局，你可以在模板中定义可编辑区域。

  • 可编辑区域：这是模板中唯一可以在基于模板的页面中进行修改的部分，文章的正文内容、图片、标题等。
  • 锁定区域：模板中除了可编辑区域之外的所有部分都是锁定的，网站的 Logo、主导航菜单、页脚信息等。

制作一个完整的网站模板：分步教程

我们将创建一个典型的三栏式网站模板,包含头部、导航、内容区、侧边栏和页脚。

准备工作：

  1. 安装并打开 Adobe Dreamweaver。
  2. 创建一个新的 HTML5 文件：文件 > 新建 > HTML > HTML5，保存为 index.dwt.php。（重要提示：模板文件的后缀名通常是 .dwt，但如果你使用 PHP 等服务器端技术，可以保存为 .php、.html 等，Dreamweaver 会自动识别为模板。）
  3. 创建一个 CSS 文件来管理样式：文件 > 新建 > CSS > 空白文件，保存为 style.css，然后在 Dreamweaver 的“文件”面板中，将 style.css 拖拽到 index.dwt.php 文件的 <head> 标签内，建立链接。

我们的目标结构：

dreamweaver模板制作教程
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">可编辑区域 - 我的网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>网站头部（锁定）</header>
    <nav>主导航（锁定）</nav>
    <div class="container">
        <aside>侧边栏（可编辑）</aside>
        <main>主要内容（可编辑）</main>
    </div>
    <footer>网站页脚（锁定）</footer>
</body>
</html>

步骤 1：创建和定义可编辑区域

这是制作模板最关键的一步。

  1. 的可编辑区域

    • 在设计视图中,点击 <title> 标签中的默认文本（"无标题文档"）。
    • 转到 插入 > 模板对象 > 可编辑区域。
    • 在弹出的对话框中,为该区域命名，doctitle，然后点击“确定”。
    • 你会看到 <title> 标签内的文本被一个浅蓝色高亮边框和标签 < doctitle > 包围，这表示它是一个可编辑区域。

  2. 定义主要内容区的可编辑区域

    • 在设计视图中,选中 <main> 标签内的所有内容（或者直接将光标放在 <main> 标签内）。
    • 同样地,转到 插入 > 模板对象 > 可编辑区域。
    • 命名为 mainContent，点击“确定”。
    • <main> 区域现在也被标记为可编辑。

  3. 定义侧边栏的可编辑区域

    dreamweaver模板制作教程
    （图片来源网络，侵删）
    • 选中 <aside> 标签内的内容。
    • 转到 插入 > 模板对象 > 可编辑区域。
    • 命名为 sidebar，点击“确定”。

完成后的代码视图会是这样：

<head>
    ...<!DOCTYPE html><!-- InstanceBegin template="/Templates/index.dwt.php" codeOutsideHTMLIsLocked="false" -->
    <html lang="zh-CN">
    <head>
        ...
        <title><!-- TemplateBeginEditable name="doctitle" -->页面标题<!-- TemplateEndEditable --></title>
        ...
    </head>
    ...
    <main><!-- TemplateBeginEditable name="mainContent" -->这里是文章正文内容<!-- TemplateEndEditable --></main>
    <aside><!-- TemplateBeginEditable name="sidebar" -->这里是侧边栏内容<!-- TemplateEndEditable --></aside>
    ...

<!-- TemplateBeginEditable name="..." --> 和 <!-- TemplateEndEditable --> Dreamweaver 生成的模板标记。

步骤 2：保存模板

  1. 按下 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存文件。
  2. Dreamweaver 会提示你这是一个模板文件，并要求你将其保存到 Templates 文件夹中，这是 Dreamweaver 的默认约定，请务必遵守。
  3. 将模板命名为 index.dwt，Dreamweaver 会自动添加 .dwt 扩展名。

恭喜！你的第一个模板已经创建完成！

步骤 3：基于模板创建新页面

模板的价值在于使用它来生成页面。

  1. 在 Dreamweaver 中，创建一个新文件：文件 > 新建。
  2. 在弹出的窗口中,选择 网站模板 选项卡。
  3. 选择你的站点,然后你会看到刚刚创建的 index.dwt 模板。
  4. 选中模板,点击“创建”。
  5. Dreamweaver 会生成一个新页面，这个页面已经应用了你的模板布局。
  6. 保存这个新页面,例如命名为 about.html。

尝试修改 about.html：

  • 你可以修改 <main> 和 <aside> 区域里的文字。
  • 你无法直接修改 <header>、<nav> 或 <footer> 里的内容，因为这些区域是锁定的。

步骤 4：更新模板并同步页面

这是模板最强大的功能。

  1. 打开你的模板文件 index.dwt。
  2. 假设我们要在页脚的版权年份从 © 2025 改为 © 2025。
  3. 修改页脚文本,然后保存模板 (Ctrl + S)。
  4. 关键一步：保存后，Dreamweaver 会弹出一个“更新页面”对话框，它会询问你是否要将此次更改应用到所有基于此模板的文件。
  5. 选择“更新”，然后点击“开始”。
  6. Dreamweaver 会自动扫描整个网站，找到所有使用该模板的页面（如 about.html），并自动更新它们的页脚。

打开 about.html 查看效果，你会发现页脚已经同步更新了，而你并没有直接修改 about.html！

模板的其他高级功能

除了基本的可编辑区域,模板还有一些更高级的功能，让你的工作更灵活。

可选区域

用于在某些页面上显示内容,而在其他页面上隐藏。

  • 场景：一个“联系我们”页面需要显示一个表单，而其他页面不需要。
  • 操作：
    1. 在模板中选中需要设为可选的内容（例如整个表单）。
    2. 转到 插入 > 模板对象 > 可选区域。
    3. 在弹出的对话框中,可以设置默认是显示还是隐藏。
    4. 保存模板。
    5. 在基于模板的页面中,选中可选区域，在“属性”检查器中，你可以通过“显示”或“隐藏”来控制该区域是否可见。

重复区域

用于创建可以重复出现的列表,如文章列表、产品列表等。

  • 场景：一个博客首页需要显示多篇文章摘要。
  • 操作：
    1. 在模板中选中一个列表项的结构（<article> <h2>标题</h2> <p>lt;/p> </article>）。
    2. 转到 插入 > 模板对象 > 重复区域。
    3. 保存模板。
    4. 在基于模板的页面中,你可以通过“属性”检查器中的 和 按钮来添加或删除列表项。

可选参数

这是可选区域的进阶版,它允许你修改重复区域内某个元素的属性，而不仅仅是显示或隐藏它。

  • 场景：在重复的文章列表中，每篇文章的链接地址和标题都不同。
  • 操作：
    1. 在重复区域内,选中一个元素（如一个链接 <a>）。
    2. 在“属性”检查器中，为其指定一个“可选参数”（href）。
    3. 保存模板。
    4. 在基于模板的页面中,你可以单独为每个重复项内的链接设置 href 值。

最佳实践与注意事项

  1. 规划先行：在开始编写代码之前，先用纸笔或设计软件规划好网站的布局，确定哪些是固定的，哪些是可变的。
  2. 使用有意义的名称：为可编辑区域命名时，使用清晰、简洁的名称（如 mainContent, articleTitle, sidebarWidget），方便日后维护。
  3. 不要脱离模板：不要直接在“文件”面板中右键点击基于模板的 HTML 文件，选择“从模板分离”，这样做会断开页面与模板的联系，使其成为一个独立的、普通的 HTML 文件，你将失去所有模板带来的便利。
  4. 善用“资源”面板：Dreamweaver 的“资源”面板（窗口 > 资源）可以让你集中管理网站中所有的模板，方便查看和编辑。
  5. 定期同步：当你对模板做出重大修改后，务必记得“更新页面”，确保所有子页面都保持一致。

通过本教程,你已经学会了 Dreamweaver 模板的核心制作流程：

  1. 创建一个基础 HTML 页面。
  2. 定义可编辑区域可以变化。
  3. 保存为 .dwt 模板文件。
  4. 基于模板创建新页面。
  5. 通过更新模板来同步整个网站。

掌握模板是使用 Dreamweaver 进行专业网站开发的基石，它不仅能将你从繁琐的重复劳动中解放出来，更能保证网站的专业性和一致性，多加练习，你很快就能熟练运用这个强大的工具。