核心概念

  • 模板: 一个包含固定内容和可编辑区域的网页文件，当您基于模板创建新页面时，固定内容会自动复制过来,而您只能在可编辑区域进行修改。
  • 可编辑区域: 模板中标记为“可编辑”的部分，这是内容变化的地方，例如文章正文、产品图片、新闻标题等。
  • 锁定区域: 模板中未标记为可编辑的所有部分，这些区域（如网站导航栏、页脚版权信息、Logo）通常保持不变,以确保所有页面风格统一。

第一步：创建一个模板文件

您可以直接创建一个新模板,或者将一个现有的网页另存为模板。

DW模板建立可编辑区域
（图片来源网络，侵删）

从现有网页创建（推荐）

  1. 打开您已经设计好的网页（index.html），这个页面包含了您希望作为“固定”布局的所有元素（导航、页脚、Logo等）。
  2. 在菜单栏中，选择 文件 > 另存为模板...。
  3. 在弹出的对话框中，为您的模板命名（main_template.dwt），然后点击 保存。
    • .dwt 是 Dreamweaver 模板文件的标准扩展名。
    • Dreamweaver 会自动在您的站点根目录下创建一个名为 Templates 的文件夹,并将模板文件保存在其中。

直接创建新模板

  1. 在菜单栏中，选择 文件 > 新建...。
  2. 在弹出的窗口中，选择 网站模板 选项卡。
  3. 从您的站点列表中选择一个站点，然后从模板列表中选择“无”。
  4. 点击 创建，这会创建一个空的模板文件,您可以像编辑普通网页一样设计它。

第二步：在模板中定义可编辑区域

这是最关键的一步，假设您已经打开了您的模板文件（main_template.dwt）,现在我们来标记哪些部分可以编辑。

示例场景： 我们的模板有一个顶部导航、一个左侧边栏和一个中间的内容区域,我们希望用户只能修改中间的内容区域。

DW模板建立可编辑区域
（图片来源网络，侵删）

  1. 选中要设置为可编辑的内容：

    • 在设计视图中，用鼠标选中您希望用户能够修改的文本、图片、表格或整个 <div> 容器。
    • 点击并拖动鼠标,选中中间正文区域的全部文字和图片。

  2. 插入可编辑区域：

    • 后，在菜单栏中，选择 插入 > 模板对象 > 可编辑区域...。
    • 或者，通过 插入 面板，切换到 常用 或 模板 类别，然后点击 可编辑区域 图标。
    • 快捷键: Ctrl + Alt + V (Windows) / Cmd + Option + V (Mac)。

  3. 命名可编辑区域：

    • 在弹出的对话框中，为这个可编辑区域输入一个清晰、独特的名称，命名为 MainContent 或 ArticleBody。
    • 注意: 名称不能包含空格或特殊字符,且不能以数字开头。
    • 点击 确定。

  4. 查看结果：

    • 您会看到，被选中的内容现在被一个淡黄色的、带有标签的边框包围，标签上显示了您刚才设置的名称（MainContent）。
    • 模板中所有没有被黄色边框包围的区域（导航、页脚等）都是锁定区域。

重复此步骤，为模板中所有需要用户修改的部分（如侧边栏的“最新文章”列表）创建不同的可编辑区域。

第三步：基于模板创建新页面

模板创建完成后,您就可以用它来快速生成新页面了。

  1. 在菜单栏中，选择 文件 > 新建...。
  2. 在弹出的窗口中，选择 网站模板 选项卡。
  3. 从您的站点列表中，选择您刚才创建的模板（main_template.dwt）。
  4. 勾选 当模板改变时更新页面 选项（这个选项非常重要，后面会解释）。
  5. 点击 创建。

Dreamweaver 会为您生成一个新页面,您会看到：

  • 锁定区域（导航、页脚）是灰色的,并且通常无法直接编辑。
  • 可编辑区域（MainContent）是正常可编辑的,您可以在这里输入新的内容。

第四步：更新模板

这是模板功能的巨大优势，当您需要修改所有页面的共同部分时（更换网站 Logo 或修改导航栏链接）,只需修改模板文件即可。

  1. 打开您的模板文件 (main_template.dwt)。
  2. 对锁定区域进行修改，将导航栏中的“首页”链接改为“Home”。
  3. 保存模板文件 (Ctrl + S / Cmd + S)。

Dreamweaver 会弹出一个 “更新页面” 对话框。

  • 更新: 选择此选项。
  • 查看正在更新的文件: 勾选此项,可以看到具体是哪些文件被更新了。
  • 在站点中更新: 选择您要更新的站点范围。

点击 开始，Dreamweaver 会自动将您对模板的修改应用到所有基于此模板创建的页面中,极大地提高了维护效率。

常用操作与技巧

  • 如何创建可选区域？

    • 可选区域允许您在基于模板的页面中显示或隐藏某些锁定内容。
    • 选中模板中要设置为可选的内容，然后选择 插入 > 模板对象 > 可选区域...。
    • 您可以设置默认是显示还是隐藏。

  • 如何创建重复区域？

    • 重复区域用于创建可以重复出现的部分，例如产品列表、新闻摘要等。
    • 选中模板中要设置为重复的块（例如一个包含“产品名”和“价格”的 <div>），然后选择 插入 > 模板对象 > 重复区域...。
    • 在基于模板的页面中,您可以通过右键点击这个区域来添加或删除重复项。

  • 如何管理模板？

    • 在 文件 面板中，展开 Templates 文件夹，您可以右键点击模板文件进行编辑、删除或从页面中分离（将一个基于模板的页面变成普通页面）。
步骤 操作 目的
创建模板 将设计好的网页另存为 .dwt 文件。 创建一个统一的布局框架。
定义可编辑区 ，使用 插入 > 模板对象 > 可编辑区域 并命名。 标记出哪些部分可以自由修改。
创建新页面 文件 > 新建 > 网站模板，选择模板并创建。 快速生成遵循统一布局的新页面。
更新模板 修改模板文件并保存，在弹窗中选择更新所有页面。 一次性修改所有页面的共同部分。

通过以上步骤，您就可以在 Dreamweaver 中高效地使用模板来管理您的网站，既保证了设计的统一性,又保证了内容更新的灵活性。