核心概念：什么是 Dreamweaver 模板？

在开始之前，先理解几个关键概念,这会让你学习起来事半功倍：

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

  1. 模板文件 (.dwt)：

    • 这是一个特殊的 HTML 文件，它定义了网站的“骨架”。
    • 它本身不是一个可以公开访问的网页，而是用来创建其他页面的“母版”。
    • 文件后缀通常是 .dwt，template.dwt。

  2. 可编辑区域：

    • 这是模板中最核心的部分，在模板中，你可以指定哪些区域是可以修改的，哪些区域是固定不变的。
    • 网站的 Logo、导航栏、页脚通常是固定的，而页面的标题、正文内容、图片则是需要每页都不同的。
    • 你必须在模板中至少定义一个可编辑区域,否则用这个模板创建的页面将无法进行任何修改。

  3. 不可编辑区域 (锁定区域)：

    • 模板中除了可编辑区域以外的所有部分，默认都是锁定的,在基于模板的页面中无法直接编辑。
    • 这确保了网站的整体布局和风格（如导航、版权信息）在所有页面中保持一致。

  4. 基于模板的页面：

    dreamweaver模板教程视频
    （图片来源网络，侵删）
    • 这是使用模板创建出来的普通 HTML 文件。
    • 它们会自动继承模板的结构和样式，并且只能修改模板中定义好的可编辑区域。
    • 当你更新模板后，可以轻松地批量更新所有基于此模板的页面,极大地提高了维护效率。

图文步骤：如何创建和使用模板

下面我们通过一个完整的流程来学习如何操作。

步骤 1：创建一个模板

  1. 打开 Dreamweaver，创建一个新的 HTML 文件，或者,打开一个你已经设计好的网页布局。
  2. 点击菜单栏的 文件 > 另存为模板。
  3. 在弹出的对话框中，为你的模板命名（main_template），然后点击“保存”。
  4. Dreamweaver 会自动在站点根目录下创建一个名为 Templates 的文件夹，并将你的模板文件 main_template.dwt 保存在其中。

步骤 2：定义可编辑区域

这是最关键的一步,假设你的页面布局是这样的：

+---------------------------------------+
| [Logo (固定)]    [导航栏 (固定)]      |
+---------------------------------------+
|                                       |(可编辑)]                   |
|                                       |(可编辑)]                   |
|                                       |
|                                       |
+---------------------------------------+
| [版权信息 (固定)]                     |
+---------------------------------------+
  1. 在你的模板文件中，选中你想要设置为“可编辑”的内容，选中页面标题文字 <h1>首页标题</h1>。
  2. 在 Dreamweaver 的顶部菜单栏中，点击 插入 > 模板对象 > 可编辑区域。
  3. 在弹出的对话框中，为这个区域命名（doctitle 或 page_title），名称最好有描述性,方便日后识别。
  4. 点击“确定”，你会看到，被选中的内容现在会被一个浅色高亮边框和标签包围，标签上显示了你在步骤 3 中输入的名称。

重复此操作，为“正文内容”区域也创建一个可编辑区域（例如命名为 main_content）。

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

  1. 点击菜单栏的 文件 > 新建。
  2. 在“新建文档”窗口中，选择 “从模板新建” 选项卡。
  3. 在左侧的“模板用于”列表中,选择你的站点。
  4. 在中间的模板列表中，选择你刚刚创建的 main_template。
  5. 右侧会显示模板的预览，确保“当模板改变时更新页面”被勾选。
  6. 点击“创建”。

你就得到了一个基于模板的新页面，你可以看到，Logo、导航栏和页脚都是灰色的，无法直接编辑,而页面标题和正文内容区域是正常可以编辑的。

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

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

这是模板功能的最大优势。

  1. 打开你的 模板文件 (template.dwt),假设你想修改导航栏中的一个链接。
  2. 修改完成后,保存模板。
  3. Dreamweaver 会弹出一个 “更新页面” 对话框,它会询问你是否要将这个更新应用到所有基于此模板的页面。
  4. 你可以选择：
    • 更新当前页面：只更新你正在编辑的这个模板文件。
    • 更新整个站点：将此更新应用到站点内所有使用此模板的页面,这是最常用的功能。
  5. 点击“更新”，Dreamweaver 会自动完成所有页面的同步更新,省去了你手动修改上百个页面的麻烦。

视频教程推荐

图文教程可能不够直观，视频教程能让你更好地理解操作流程,以下是一些优质的中文和英文视频教程资源：

中文视频教程 (推荐)

  1. Bilibili (B站) - 搜索关键词

    • Dreamweaver 模板教程、Dreamweaver dwt
    • 推荐UP主/频道：搜索结果中通常有很多计算机教学类的UP主，李老师”、“文文老师”等,他们的教程通常比较系统。
    • 优点：免费，有中文字幕,讲解风格更符合国内用户习惯。
    • 示例视频链接：B站 Dreamweaver 模板基础入门教程 (这是一个示例链接,你可以根据搜索结果找到最新的)

  2. 腾讯课堂 / 网易云课堂

    • 搜索“Dreamweaver 网页制作”等课程,很多系统课程都会包含模板的章节。
    • 优点：课程体系完整,通常从基础到进阶都有覆盖。

英文视频教程 (高质量，适合想深入学习的)

  1. YouTube - Adobe Dreamweaver Tutorials
    • Dreamweaver template tutorial for beginners、Adobe Dreamweaver editable regions
    • 推荐频道：
      • Traversy Media：讲解清晰，节奏适中,非常适合初学者。
      • The Net Ninja：系列教程非常棒，会带你一步步完成一个项目,其中包含模板的使用。
      • LinkedIn Learning (原 Lynda.com)专业，系统性强，很多是付费课程,但质量极高。
    • 优点：资源极其丰富，更新快，可以学到最标准和高级的用法,很多视频配有自动生成的中文字幕。

最佳实践与注意事项

  1. 先设计，再模板化：不要急于创建模板，先把一个页面的布局、样式设计得非常完美，确认没有问题后,再将其保存为模板。
  2. 命名要规范：模板文件和可编辑区域的命名要清晰、有意义（header_logo、footer_text）,方便团队协作和日后维护。
  3. 模板嵌套：对于大型网站，可以使用“嵌套模板”，先创建一个包含整体布局的“主模板”，然后基于这个主模板再创建针对不同栏目（如“新闻页”、“产品页”）的“子模板”,这样可以实现更灵活的管理。
  4. 与设计：尽量使用 CSS 来控制样式，而不是在 HTML 中使用 <font> 等过时的标签，这样当需要更换网站风格时，你只需要修改 CSS 文件,而无需动模板的结构。
  5. 使用库项目：对于一些在多个页面（甚至不同模板的页面）中重复使用的小块内容，比如一个“下载按钮”或“社交媒体图标”，可以考虑使用 Dreamweaver 的库项目 功能，而不是都放在模板里，库项目的更新也是全局的,更加灵活。

希望这份详细的指南能帮助你顺利掌握 Dreamweaver 模板功能！祝你学习愉快！