Dreamweaver套用模板后如何修改内容？

什么是模板？为什么使用它？

模板是一个预先设计好的、包含固定区域和可编辑区域的 HTML 文件。

• 固定区域: 网站中所有页面都相同的部分，网站Logo、主导航栏、页脚版权信息等，这些区域在基于模板创建的页面中是被“锁定”的,不能直接修改。
• 可编辑区域: 网站中每个页面都不同的部分，文章标题、正文内容、产品图片等,这些区域允许你在基于模板的页面中进行自由修改。

使用模板的主要好处：

1. 提高效率: 无需为每个页面重复编写和设计相同的头部、导航和页脚，只需修改模板,所有基于该模板的页面都可以快速更新。
2. 保证风格统一: 模板强制所有页面使用相同的设计结构,避免了因手动操作导致的风格不一致问题。
3. 简化维护: 当需要更换网站Logo或修改导航链接时，只需编辑模板文件，Dreamweaver 会自动提示你更新所有使用该模板的页面,省去了逐个修改的麻烦。
4. 防止误操作: 锁定的区域可以防止他人（或自己）不小心修改了不该改的结构。

创建模板

在创建模板之前,最好先有一个设计好的完整网页布局。

步骤：

1. 打开或创建一个 HTML 文件：

   
   （图片来源网络，侵删）
   • 你可以打开一个已经设计好的完整网页（index.html）。
   • 或者，新建一个 HTML 文件并设计好你的布局。

2. 将文件另存为模板：

   • 在菜单栏中选择 文件 > 另存为模板...。
   • Dreamweaver 会弹出一个对话框,要求你为模板命名。
   • 重要： 选择一个模板所在的站点，模板文件会自动保存在站点的根目录下的一个名为 Templates 的文件夹中，模板文件的后缀名是 .dwt。
   • 点击 “保存”。

3. 定义可编辑区域：

   • 这是最关键的一步，在你希望内容可以自由编辑的地方，使用 Dreamweaver 的“插入”功能来创建可编辑区域。
   • 方法一（推荐）： 在设计视图中，选中你想要设置为可编辑区域的元素（一个包含文章内容的 <div>）。
   • 将光标放在你想要创建可编辑区域的位置。
   • 在菜单栏中选择 插入 > 模板对象 > 可编辑区域。
   • 在弹出的对话框中，为这个可编辑区域命名（EditRegion1, MainContent, ArticleTitle 等），一个好的命名习惯非常重要,能让你以后更容易识别每个区域的功能。
   • 点击 “确定”。

4. 保存模板：

   • 按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存模板，你会看到可编辑区域的名称会以淡蓝色的标签形式显示在代码中,而其他区域则保持不变。

示例： 假设你的网页布局是：

+---------------------------------+
|      [Logo] [主导航]             |  <-- 锁定区域
+---------------------------------+
|                                 |
|    [页面标题]                   |  <-- 可编辑区域 "PageTitle"
|    [文章内容]                   |  <-- 可编辑区域 "MainContent"
|                                 |
+---------------------------------+
|      [版权信息] [联系方式]       |  <-- 锁定区域
+---------------------------------+

你需要将 ] 和 ] 这两个 <div> 定义为可编辑区域。

使用模板创建新页面

模板创建好后,就可以用它来生成网站的其他页面了。

步骤：

1. 新建文件：

   • 在 Dreamweaver 中，选择 文件 > 新建...。

2. 选择模板：

   • 在新建文档的对话框中，切换到 “模板” 选项卡。
   • 在左侧的站点列表中选择你的站点。
   • 在中间的模板列表中,选择你刚才创建的模板。
   • 你可以在右侧的预览窗口中看到模板的缩略图。
   • 确保底部的 “更新页面时链接” 选项被勾选（这是默认设置，推荐保持）。
   • 点击 “创建”。

3. • Dreamweaver 会根据模板生成一个新的 HTML 文件。
   • 你会发现，只有你定义的“可编辑区域”可以选中并编辑，而其他部分（如导航栏、页脚）是灰色的,无法直接修改。
   • 在可编辑区域中填入你的具体内容。

4. 保存新页面：

   • 将新页面保存到你的站点中，并命名为合适的文件名（about.html, products.html）。

管理和更新模板

当网站需要修改时,模板的优势就体现出来了。

修改模板文件：

• 直接打开你的模板文件（位于 Templates 文件夹中，site_template.dwt）。
• 修改任何你想要更改的内容，例如更换一张图片、修改一个导航链接的文字或颜色。

更新基于该模板的页面：

• 保存模板文件后，Dreamweaver 会立即弹出一个 “更新页面” 对话框。
• 在站点中更新： 这个对话框会默认选中，它会在你当前定义的站点中搜索所有使用了该模板的页面，并询问你是否要更新它们。
  • 点击 “开始”，Dreamweaver 会自动完成所有更新。
  • 更新完成后，会显示一个报告,告诉你更新了多少个文件。
• 更新整个站点： 如果你想更新整个站点，可以点击对话框中的 “查看全部” 按钮,然后选择整个站点进行更新。
• 稍后更新： 如果你现在不想更新，可以点击 “否”，稍后，你可以通过 修改 > 模板 > 更新页面... 来手动执行更新操作。

注意： 模板更新只影响锁定区域,可编辑区域的内容保持不变。

高级技巧和常见问题

创建可选区域

可能只在特定页面显示（“返回首页”链接只在子页面显示），这时可以使用“可选区域”。

• 插入方法： 选中要设为可选的元素，插入 > 模板对象 > 可选区域。
• 设置： 你可以设置该区域基于某个条件（一个布尔变量）来显示或隐藏，对于简单的“显示/隐藏”，只需在对话框中勾选“默认显示”即可。

创建可编辑标签属性

默认情况下，整个 <h1> 标签的样式都是锁定的，但有时你可能希望每个页面的 <h1> 文字颜色不同，这时可以使用“可编辑标签属性”。

• 操作方法： 在代码视图中，选中一个 HTML 标签（<h1>）。
• 属性检查器： 在下方的“属性”检查器中，你会看到一个 “模板” 分类。
• 设置： 点击“模板”分类，然后点击 “使属性可编辑...”，在弹出的对话框中，选择你希望编辑的属性（color），然后点击“确定”。
• 你就可以在任何基于该模板的页面中，自由修改这个 <h1> 标签的 color 属性了，而其他属性（如 font-size）仍然被锁定。

从模板中分离页面

如果你发现某个页面需要很大的改动，不再适合使用模板（制作一个完全不同的首页）,你可以将它从模板中分离。

• 操作方法： 打开该页面，在菜单栏中选择 修改 > 模板 > 从模板中分离。
• 结果： 页面将变成一个普通的 HTML 文件，所有区域都变成可编辑的，模板的锁定将全部解除。请谨慎操作,因为之后你就无法通过模板更新来修改这个页面了。

修改模板的关联

一个页面最初只能基于一个模板，但如果你更换了网站的主模板,可以通过修改页面的模板关联来使用新模板。

• 操作方法： 打开需要更换模板的页面，在菜单栏中选择 修改 > 模板 > 打开附加模板...。
• 在弹出的对话框中，选择一个新的模板，然后点击“附加”，页面会立即应用新模板的结构，并保留你原有的可编辑区域内容（如果新模板中也有同名区域）。

掌握模板的使用是成为高效 Dreamweaver 开发者的关键一步，虽然现在有很多现代化的前端框架（如 React, Vue）有自己的组件化方案，但 Dreamweaver 的模板系统对于中小型静态网站的管理和快速原型制作依然非常实用。