Dreamweaver HTML 模板终极教程

本教程将分为以下几个部分：

dreamweaver html模板教程
（图片来源网络，侵删）
  1. 第一部分：为什么使用模板？ - 理解模板的核心优势。
  2. 第二部分：创建你的第一个模板 - 从零开始,一步步构建模板文件。
  3. 第三部分：定义可编辑区域 - 模板的灵魂所在。
  4. 第四部分：基于模板创建网页 - 使用模板快速生成风格统一的页面。
  5. 第五部分：管理模板和页面 - 高级技巧和最佳实践。
  6. 第六部分：创建响应式模板（高级） - 让你的模板适配各种设备。
  7. 第七部分：总结与最佳实践

第一部分：为什么使用模板？

在开始之前,我们先要明白什么是模板以及为什么它如此强大。

什么是 Dreamweaver 模板？ 一个 Dreamweaver 模板是一个基础性的 HTML 文件，它包含了一套网站的固定结构和设计元素（如页头、页脚、导航栏），同时也定义了哪些区域是可编辑的，哪些区域是锁定的。

模板的核心优势：

  • 高效与一致性： 无需为每个新页面重复复制和粘贴相同的页眉、页脚和导航，创建新页面时，所有固定元素会自动应用,确保整个网站风格统一。
  • 集中式管理： 当你需要修改网站的通用元素时（更新公司 Logo、修改导航菜单项、在页脚添加版权信息），你只需要修改模板文件，Dreamweaver 会自动提示你更新所有基于该模板的页面,极大减少了工作量。
  • 降低出错率： 避免了手动更新多个页面时可能出现的遗漏或错误,保证了网站结构的稳定性。

第二部分：创建你的第一个模板

我们将创建一个简单的三栏布局模板。

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

步骤 1：新建模板文件

  1. 打开 Adobe Dreamweaver。
  2. 在菜单栏选择 文件 > 新建。
  3. 在弹出的窗口中，选择 空白页。
  4. 在 页面类型 列表中，选择 HTML。
  5. 在 布局 列表中，选择 <无>。
  6. 确保 “创建新文件” 被选中，然后点击 创建。

步骤 2：保存为模板文件

  1. 新建一个空白 HTML 文件后，在菜单栏选择 文件 > 另存为模板。
  2. 在弹出的对话框中：
    • 站点： 选择你的网站站点（如果你还没有设置站点，请先设置一个）。
    • 另存为： 为你的模板命名，main_template.dwt。.dwt 是 Dreamweaver 模板的标准扩展名。
  3. 点击 保存。

你的文件已经从一个普通的 HTML 文件变成了一个模板文件，你会注意到 Dreamweaver 的设计视图顶部会出现一个黄色的标签，写着“[DWT]”。

步骤 3：构建模板的静态结构

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

我们来为模板添加基本的 HTML 结构，我们使用 Dreamweaver 的 “插入” 面板来快速布局。

  1. 插入页眉:

    • 将光标放在 <body> 标签之后。
    • 在 “插入” 面板中，切换到 “常用” 或 “布局” 分类。
    • 点击 “插入 Div 标签”。
    • 在弹出的窗口中，ID 输入 header，然后点击 确定。
    • 在 <div id="header"> 和 </div> 之间输入你的网站标题，<h1>我的公司网站</h1>。

  2. 插入导航栏:

    • 在 header 的 div 之后，再次点击 “插入 Div 标签”。
    • ID 输入 nav，点击 确定。
    • 在 nav 的 div 中，创建一个无序列表作为导航菜单：
      <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="services.html">服务</a></li>
    <li><a href="contact.html">联系我们</a></li>
</ul>

  3. 插入主要内容区:

    • 在 nav 的 div 之后，插入一个 ID 为 content 的 div,这个区域将是我们页面的主要内容。

  4. 插入侧边栏:

    • 在 content 的 div 之后，插入一个 ID 为 sidebar 的 div,这个区域用于放置次要信息。

  5. 插入页脚:

    • 之后，插入一个 ID 为 footer 的 div。
    • 在 footer 的 div 中，输入版权信息，&copy; 2025 我的公司网站，保留所有权利。

你的代码看起来应该像这样（注意 <!DOCTYPE html> 和 <html> 标签前会有 Dreamweaver 自动生成的模板代码）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">无标题文档</title>
<!-- 此处可以链接你的 CSS 文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<div id="header">
  <h1>我的公司网站</h1>
</div>
<div id="nav">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="services.html">服务</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div>
<div id="content">
  <!-- 这里将是可编辑区域 -->
</div>
<div id="sidebar">
  <!-- 这里也将是可编辑区域 -->
</div>
<div id="footer">
  &copy; 2025 我的公司网站，保留所有权利。
</div>
</body>
</html>

第三部分：定义可编辑区域

这是最关键的一步，我们需要告诉 Dreamweaver,哪些部分在基于模板创建的页面中可以被修改。

步骤 1：定义内容区的可编辑区域

  1. 将光标放在 <div id="content"> 和 </div> 之间。
  2. 在菜单栏选择 插入 > 模板对象 > 可编辑区域。
  3. 在弹出的对话框中，为该区域命名，EditRegion1。给区域一个有意义的名字非常重要，MainContent。
  4. 点击 确定。

Dreamweaver 会在该区域周围添加特殊的注释标签，<!-- TemplateBeginEditable name="MainContent" --> 和 <!-- TemplateEndEditable -->，在设计视图中，这个区域会有一个蓝色或紫色的背景边框,表示它是可编辑的。

步骤 2：定义侧边栏的可编辑区域

  1. 用同样的方法，将光标放在 <div id="sidebar"> 和 </div> 之间。
  2. 选择 插入 > 模板对象 > 可编辑区域。
  3. 命名为 SidebarContent，然后点击 确定。

步骤 3：定义 <head> 区域的可编辑区域

有时候我们希望每个页面有自己的页面标题或特定的 CSS/JS。<head> 区域默认是锁定的。

  1. 将光标放在 <head> 标签之后，<title> 标签之前。
  2. 选择 插入 > 模板对象 > 可编辑区域。
  3. 命名为 doctitle，点击 确定。

你的模板结构就完成了。header, nav, footer 是锁定区域，而 MainContent, SidebarContent, doctitle 是可编辑区域。

第四部分：基于模板创建网页

模板创建好了,现在我们来用它生成一个新页面。

步骤 1：从模板创建新文件

  1. 在菜单栏选择 文件 > 新建。
  2. 在弹出的窗口中，选择 模板中的页。
  3. 在 站点 列表中选择你的站点。
  4. 在 模板 列表中选择你刚刚创建的 main_template.dwt。
  5. 勾选 “当模板改变时更新页面”（默认已勾选）。
  6. 点击 创建。

Dreamweaver 会根据你的模板生成一个新的 HTML 文件，你会看到，header, nav, footer 的内容已经存在，