Dreamweaver模板制作如何快速上手？

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

在开始制作之前,我们先理解一下模板的核心优势：

1. 提高效率：只需修改模板，所有基于该模板的页面都会自动更新，避免了重复劳动。
2. 保持一致性：确保网站的所有页面（如导航栏、页脚、侧边栏）都具有统一的布局和风格。
3. 便于维护：当需要更换导航菜单或修改版权信息时，只需修改一个模板文件，整个网站的关联页面都会同步更新，大大降低了维护成本和出错率。

第二部分：制作模板的核心概念

在 Dreamweaver 中，模板主要依赖以下几种技术：

• 可编辑区域：这是模板中唯一可以被修改的部分，文章内容、产品图片和描述等，每个模板页面都必须至少有一个可编辑区域。
• 重复区域：用于创建可以重复出现的部分，例如新闻列表、产品缩略图、评论列表等，你可以设置重复区域为“无限重复”或“固定次数重复”。
• 可选区域：用于设置在某些页面中显示，而在另一些页面中隐藏的内容，一个“新品上市”的标签，只在产品列表页显示。
• 可选区域已修改参数：这是可选区域的高级用法，允许你在基于模板的页面中选择不同的显示状态，一个“登录/注册”按钮，模板里可以设置两种状态：登录状态和未登录状态，然后在各个页面中自由选择。
• HTML 注释标记：Dreamweaver 会自动在模板代码中插入特殊的 HTML 注释（如 <!-- TemplateBeginEditable name="content" -->）来标识这些区域，这些标记对浏览器是可见的，但不会影响页面显示。

第三部分：制作模板的详细步骤

我们将通过一个典型的博客/文章页面为例，一步步制作模板。

步骤 1：创建新模板文件

1. 打开 Dreamweaver。
2. 在菜单栏中选择 文件 > 新建。
3. 在弹出的窗口中,选择 “空白页”。
4. 在 “页面类型” 列表中，选择 HTML。
5. 在 “布局” 列表中，选择一个你喜欢的布局（“<无>”，然后自己用 Div 布局，或者选择一个预设的布局）。
6. 勾选底部的 “使用模板文件” 复选框。
7. 点击 “创建”。

Dreamweaver 会创建一个未命名的模板文件，标题栏会显示 *.dwt 的扩展名。

步骤 2：设置页面基本结构

像制作普通网页一样,搭建你的基本布局，通常包括：

• 页眉：网站 Logo、主导航菜单。
• 内容区：放置文章内容、图片等。
• 侧边栏：放置分类、标签、热门文章等。
• 页脚：版权信息、备案号、友情链接等。

使用 <div> 标签来划分这些区域，并给它们设置好 ID 或 Class，<header>, <main>, <aside>, <footer>。

步骤 3：定义可编辑区域

这是最关键的一步,你需要决定页面的哪些部分是固定的，哪些部分是变化的。

示例：定义文章内容区

1. 在设计视图中,选中你希望用户可以编辑的内容区域（一个包含 <h1> 标题、<p> 段落和图片的 <div>）。
2. 在菜单栏中选择 插入 > 模板对象 > 可编辑区域。
3. 在弹出的对话框中,为这个区域起一个有意义的名字，ArticleContent。
4. 点击 “确定”。

你会看到,Dreamweaver 在这个区域的代码前后插入了特殊的注释标记，并且在设计视图中，该区域的背景色可能会略有变化，表示它现在是可编辑的。

为其他区域设置可编辑区域：

• ：将 <h1> 标签设置为可编辑区域，命名为 ArticleTitle。
• ：虽然可以在页面属性中设置，但也可以将 <title> 标签设置为可编辑区域，命名为 PageTitle。
• 元描述：可以将 <meta name="description" ...> 标签设置为可编辑区域，命名为 PageDescription。

注意：页眉、导航栏、页脚等公共部分通常不设置为可编辑区域，因为它们是固定的。

步骤 4：定义重复区域

假设你的模板侧边栏有一个“热门文章”列表，这个列表在每篇文章页面的数量可能不同。

1. 在设计视图中,选中整个“热门文章”列表，包括 <ul> 标签和里面的所有 <li> 列表项。
2. 在菜单栏中选择 插入 > 模板对象 > 重复区域。
3. 在弹出的对话框中,为这个区域命名，PopularArticles。
4. 点击 “确定”。

当你在基于此模板的页面中编辑时,可以点击这个区域，然后在属性检查器中设置它是“重复”还是“删除”。

步骤 5：定义可选区域

假设你的模板页眉有一个“促销横幅”，但不是所有页面都需要它。

1. 在设计视图中,选中整个“促销横幅” <div>。
2. 在菜单栏中选择 插入 > 模板对象 > 可选区域。
3. 在弹出的对话框中,为这个区域命名，PromoBanner。
4. 点击 “确定”。

这样,在基于模板的页面中，你就可以选择显示或隐藏这个横幅。

步骤 6：保存模板

完成所有区域的定义后,务必保存你的模板。

1. 按 Ctrl + S (Windows) 或 Cmd + S (Mac)。
2. Dreamweaver 会提示你为模板命名。请使用一个有意义的名称，并且不要使用空格或特殊字符，article_template.dwt。
3. 将模板文件保存在你网站的根目录下的一个名为 Templates 的文件夹中，Dreamweaver 会自动创建这个文件夹。这个文件夹名是固定的，不能修改。

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

模板制作完成后,就可以用它来生成新页面了。

1. 在 Dreamweaver 中，选择 文件 > 新建。
2. 在弹出的窗口中,切换到 “从模板新建” 选项卡。
3. 在 “站点” 下拉菜单中，选择你的网站。
4. 在 “模板” 列表中，你刚刚创建的 article_template.dwt 会出现在这里。
5. 选中它,右侧会显示模板的预览。
6. 勾选 “更新页面时编辑模板” 复选框（可选，建议勾选）。
7. 点击 “创建”。

Dreamweaver 会根据模板生成一个新的 HTML 文件，在这个新文件中，只有你定义为“可编辑区域”的部分可以被修改，其他所有部分都是被锁定的，当你尝试点击锁定区域时，Dreamweaver 会提示你。

第五部分：更新模板

这是模板最强大的功能。

1. 打开你的模板文件 article_template.dwt。
2. 对模板进行任何修改,你想在页脚增加一个“关于我们”的链接。
3. 保存模板 (Ctrl + S)。
4. Dreamweaver 会弹出一个至关重要的对话框：“更新模板文件？”。
   • “更新模板文件”：只保存模板本身的修改。
   • “更新页面”：这个选项才是关键！ 它会扫描整个网站，找出所有基于此模板的页面，并自动应用你的修改。

强烈建议：在保存模板时，始终选择 “更新页面”，以确保所有关联页面都保持同步。

第六部分：分离模板

这是一个非常实用的功能,用于将模板与某个基于它的页面“解绑”。

1. 打开一个基于模板的页面。
2. 在菜单栏中选择 修改 > 模板 > 分离模板。
3. Dreamweaver 会询问你是否确定，点击“是”。

执行此操作后,该页面将变成一个完全独立的、普通的 HTML 文件，它与模板之间的所有链接都会被切断，之后对该模板的任何更新，都将不再影响这个页面。

何时使用分离？ 当你需要对这个页面进行大幅度、独特的修改，且不希望它再跟随模板的更新时，可以使用此功能。

第七部分：常见问题与最佳实践

• Q: 为什么我修改了模板，有些页面没更新？

  • A: 可能在保存模板时没有选择“更新页面”，请手动打开模板，修改后保存，并确保勾选“更新页面”，或者，你可以选择 修改 > 模板 > 更新页面，然后在弹出的窗口中选择“整个站点”进行强制更新。

• Q: 可编辑区域的命名有什么讲究？

  • A: 命名应该清晰、有意义，便于识别。MainContent、LeftSidebar、ArticleTitle，避免使用 content1, content2 这样的模糊名称。

• Q: 模板文件一定要放在 Templates 文件夹里吗？

  • A: 是的，这是 Dreamweaver 的硬性规定，如果不在该文件夹下，Dreamweaver 将无法正确识别和管理它。

• 最佳实践：

  1. 规划先行：在开始编码前，先规划好哪些是固定区域，哪些是可编辑区域。
  2. 命名规范：文件名和区域名都使用有意义的英文。
  3. 善用重复和可选区域：不要把所有可变内容都做成一个巨大的可编辑区域，使用重复和可选区域可以让模板更灵活、更强大。
  4. 定期备份：虽然 Dreamweaver 很稳定，但养成备份好习惯总没错。

通过以上步骤,你就可以熟练地使用 Dreamweaver 模板功能来高效管理和维护你的网站了。