Dreamweaver 网页模板使用教程

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

在开始之前,我们先理解一下什么是模板。

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

网页模板就是一个已经创建好的、具有固定布局和结构的 HTML 文件，它包含了网站的公共部分，比如页眉、页脚、主导航栏等，模板中还有一些特定的区域，这些区域是可编辑的，用于放置每页不同的内容（如文章标题、正文、图片等）。

使用模板的核心优势：

  1. 提高效率：你不需要为每个新页面重复编写页眉、页脚和导航，只需基于模板创建新页面，然后专注于编辑内容即可。
  2. 保持一致性：确保整个网站的风格、导航和布局完全统一，避免因手动复制粘贴导致的错误和不一致。
  3. 简化更新：当你需要修改网站的公共部分（比如更换 Logo、修改版权信息或添加一个导航项）时，只需修改模板文件，所有基于该模板的页面都会自动更新，这大大减少了维护成本。
  4. 团队协作：对于大型项目，设计师可以负责创建和维护模板，而内容编辑者则可以基于模板创建和编辑页面，互不干扰。

Dreamweaver 模板的核心概念

在 Dreamweaver 中，模板主要由两部分组成：

  1. 模板文件：

    dreamweaver网页模板使用教程
    （图片来源网络，侵删）
    • 扩展名为 .dwt.html (template.dwt.html)。
    • 它存储在你的站点根目录下的一个名为 Templates 的文件夹中（Dreamweaver 会自动创建）。
    • 模板文件本身是不可直接在浏览器中访问的。

  2. 可编辑区域：

    • 这是模板中最重要的部分,它定义了哪些区域可以在基于模板创建的页面中进行修改。
    • 没有被定义为“可编辑区域”的模板部分，在子页面中是被锁定的，无法编辑。

使用模板的完整工作流程

我们将按照以下步骤进行学习：

  1. 创建站点：准备工作。
  2. 创建模板：从零开始或从现有页面创建。
  3. 定义可编辑区域：指定哪些内容可以修改。
  4. 基于模板创建页面：生成新页面。
  5. 编辑基于模板的页面。
  6. 更新模板：修改模板并更新所有页面。

详细操作步骤

步骤 1：创建和管理站点

在使用 Dreamweaver 任何功能之前，强烈建议先定义一个本地站点，这有助于 Dreamweaver 正确管理文件路径和模板。

  1. 打开 Dreamweaver。
  2. 转到 站点 > 新建站点。
  3. 为你的站点命名（"我的模板网站"）。
  4. 选择 本地站点文件夹，并指定一个你电脑上的文件夹来存放网站文件。
  5. 点击 完成，Dreamweaver 会在你的站点文件夹中自动创建一个 Templates 文件夹。

步骤 2：创建新模板

你有两种主要方式创建模板：

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

方法 A：从零开始创建模板

  1. 确保你已定义站点。
  2. 转到 文件 > 新建。
  3. 在弹出的窗口中,选择 模板页，然后选择 HTML 模板。
  4. 点击 创建。
  5. Dreamweaver 会创建一个名为 untitled.dwt.html 的新模板文件，并自动保存在 Templates 文件夹中，你可以重命名它，main_template.dwt.html。

方法 B：将现有页面另存为模板

  1. 打开一个你已有的、布局良好的 HTML 页面（例如你的首页 index.html）。
  2. 转到 文件 > 另存为模板。
  3. 在弹出的对话框中,选择站点，为模板命名（main_template），然后点击 保存。
  4. 这个页面现在就被保存为模板了,并会出现在 Templates 面板中。

步骤 3：定义可编辑区域

这是模板制作的关键一步,假设你的模板包含一个页眉、一个主导航、一个内容区和一个页脚。

  1. 在你的模板文件 (main_template.dwt.html) 中，用鼠标选中你希望用户可以修改的内容。
    • 选中页面正中间的 <h1> 标签和 <p> 段落。
  2. 转到 插入 > 模板对象 > 可编辑区域。
  3. 在弹出的对话框中,为这个区域命名（EditRegion1，但最好起一个有意义的名字，如 MainContent）。
  4. 点击 确定。

你会看到,被选中的区域现在被一个淡绿色的、带有标签的矩形框包围，这表示它是一个可编辑区域。

重复此操作，为其他需要修改的区域（如侧边栏、文章标题等）也定义可编辑区域，页眉、页脚和导航栏通常不定义为可编辑区域，除非你有特殊需求。

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

模板创建好了,现在来生成新页面。

  1. 转到 文件 > 新建。
  2. 在弹出的窗口中,选择 模板 选项卡。
  3. 在左侧选择你的站点,在中间的列表中选择你刚刚创建的模板（main_template）。
  4. 勾选 当模板改变时更新页面 选项（这是一个好习惯）。
  5. 点击 创建。

Dreamweaver 会生成一个新页面，这个页面已经应用了你的模板布局，你会发现，只有你在模板中定义的可编辑区域是高亮且可以点击编辑的，其他部分都是灰色的，无法修改，将这个页面保存为 about.html 或 contact.html 等名称。

步骤 5：编辑基于模板的页面

现在打开你刚刚创建的 about.html 页面。

  1. 你可以像编辑普通 HTML 页面一样，点击并修改那些可编辑区域。
  2. 尝试点击页眉或页脚,你会发现无法选中或修改它们，这正是模板的保护作用。

步骤 6：更新模板

这是模板最强大的功能,假设你现在决定在所有页面的页脚增加一个“隐私政策”链接。

  1. 打开你的模板文件 main_template.dwt.html。
  2. 在页脚的适当位置,添加一个 <a> 标签：<a href="privacy.html">隐私政策</a>。
  3. 保存模板（Ctrl + S 或 Cmd + S）。

Dreamweaver 会弹出一个 “更新模板文件” 的对话框，询问你是否要将模板的修改应用到所有基于该模板的页面。 4. 点击 “更新”。

Dreamweaver 会开始扫描你的站点，并显示一个更新日志，告诉你有多少个文件被成功更新，完成后，所有使用该模板的页面（index.html, about.html 等）都会自动包含这个新的“隐私政策”链接。

高级技巧与常见问题

使用可选区域

有时,你可能希望某些内容在某些页面显示，而在另一些页面不显示（一个“特价商品”横幅）。

  • 创建可选区域：在模板中，将希望可选的内容选中，插入 > 模板对象 > 可选区域。
  • 设置默认显示/隐藏：在属性检查器中，你可以设置该区域在默认情况下是显示还是隐藏，这允许你在创建新页面时选择是否包含这个区域。

使用重复区域

对于列表或表格,你可能希望每页可以有不同的行数。

  • 创建重复区域：在模板中，选中表格的一行 <tr> 或列表的一个 <li>，插入 > 模板对象 > 重复区域。
  • 编辑：在基于模板的页面中，你可以通过右键点击重复区域来添加或删除重复的行/项，而无需修改模板。

“锁定”警告

如果你在编辑基于模板的页面时,试图修改一个锁定区域，Dreamweaver 会弹出警告，告诉你该区域受模板保护，这是正常现象，请通过修改模板来更新这些部分。

如何“脱离模板”？

如果你有一个基于模板的页面,但需要对布局进行大幅度修改，使其不再受模板限制。

  • 打开该页面。
  • 转到 修改 > 模板 > 脱离模板。
  • 确认操作。

警告：脱离模板后，该页面将变成一个独立的 HTML 文件，未来模板的任何更新都不会再影响它，请谨慎使用。

使用 Dreamweaver 的模板功能是构建专业、高效网站的最佳实践，遵循以下流程，你就能轻松掌握它：

  1. 规划：想好网站的公共部分和可变部分。
  2. 建站：在 Dreamweaver 中定义好本地站点。
  3. 做模板：创建或修改一个页面作为模板，并使用“可编辑区域”标出内容区。
  4. 生子页：基于模板快速创建所有页面。
  5. ：只编辑可编辑区域，填充具体内容。
  6. 统更新：修改模板，一键更新全站。

希望这份详细的教程能帮助你快速上手！