Dreamweaver 是一个功能强大的可视化网页开发工具，它的核心优势之一就是“模板”功能，可以让你创建一套统一的页面结构，然后基于它快速生成大量风格一致的网页，并能轻松更新整个网站的共同部分。

简述用drem制作网页模版的流程
（图片来源网络，侵删）

整个流程可以概括为：规划 → 创建模板 → 定义可编辑区域 → 应用模板 → 管理与更新。

第一步：规划与准备

在打开 Dreamweaver 之前，先做好规划，这会让后续工作事半功倍。

  1. 确定网站结构：思考你的网站有哪些页面，一个典型的企业网站可能包括：
    • 首页
    • 关于我们
    • 产品列表
    • 产品详情页
    • 联系我们
  2. 识别共同元素：找出所有页面都会包含的、不需要修改的部分，这些通常是：
    • 页眉：包含网站 Logo、主导航菜单等。
    • 页脚：包含版权信息、备案号、联系方式等。
    • 侧边栏：可能包含友情链接、搜索框等。
  3. 识别可变元素：找出每个页面独有的、需要单独编辑的内容，这些将是未来的“可编辑区域”。
    • 首页的轮播图和新闻摘要。
    • 产品详情页的产品图片和描述。
    • “关于我们”页面的公司介绍文字。

第二步：创建模板文件

  1. 新建模板：

    • 打开 Dreamweaver，选择 文件 > 新建。
    • 在弹出的窗口中,选择 模板 页面类型。
    • 选择 HTML 模板，然后点击 创建。
    • Dreamweaver 会自动创建一个 .dwt 后缀的文件（index.dwt），并进入模板编辑模式。

  2. 设置页面基础结构：

    简述用drem制作网页模版的流程
    （图片来源网络，侵删）
    • 在模板文件中,像创建普通 HTML 网页一样，搭建基础的 HTML 结构（<html>, <head>, <body>）。
    • 可以使用 Dreamweaver 的“实时视图”或“代码视图”来完成，你可以直接复制一个已经做好的优秀网页的框架，但只保留共同部分。

第三步：定义可编辑区域

这是模板功能的核心,你需要告诉 Dreamweaver，哪些区域是允许用户在使用模板创建的页面中进行修改的。

  1. 锁定共同区域：

    • 默认情况下,你在模板中创建的所有内容都是锁定的（不可编辑）。
    • 你制作好并放置好 Logo 和导航菜单的 <header> 区域，就是锁定的。

  2. 创建可编辑区域：

    • 将光标定位在你希望允许编辑的内容位置（在 <main> 标签内，用于放置文章正文）。
    • 在菜单栏中选择 插入 > 模板对象 > 可编辑区域。
    • 在弹出的对话框中,为这个区域命名（MainContent 或 ArticleBody），命名要有意义，方便日后识别。
    • 点击 确定。
    • 你会看到,这个区域被一个浅色的、带有标签的边框包围，表示它现在是可编辑的了。

  3. 可选：创建可选区域：

    简述用drem制作网页模版的流程
    （图片来源网络，侵删）
    • 有时你可能需要一些条件性的内容,在“产品详情页”显示“加入购物车”按钮，但在“关于我们”页隐藏。
    • 这可以使用 可选区域 或 可选编辑区域 来实现，它们允许你设置在基于模板的页面中显示或隐藏特定内容，甚至允许编辑其内容。

第四步：保存模板

完成模板的设计后,务必保存它。

  • 按 Ctrl + S (Windows) 或 Cmd + S (Mac)。
  • Dreamweaver 会提示你将模板文件保存到站点的 Templates 文件夹中。请务必让它自动创建并保存到这个位置，Dreamweaver 需要通过这个特定的文件夹来管理模板。

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

模板本身不能直接在浏览器中打开,它只是一个“模具”，你需要用它来创建实际的网页。

  1. 新建基于模板的页面：

    • 选择 文件 > 新建。
    • 在 模板 页面类型中，选择你的站点，然后你会看到刚刚创建的模板（index.dwt）。
    • 选中它,并勾选 当模板改变时更新页面 选项，然后点击 创建。
    • Dreamweaver 会生成一个新的 HTML 文件（about.html）。

  2. 编辑新页面：

    • 打开这个新页面,你会发现：
      • 页眉、页脚等共同部分是被锁定的，无法直接编辑。
      • 可编辑区域（MainContent）是空白的，或者你可以直接在里面输入内容。
    • 你现在可以像编辑普通网页一样,只在可编辑区域内添加你的具体内容（文字、图片等）。
    • 保存这个新页面。

第六步：管理与更新模板

模板最大的好处在于集中管理。

  1. 更新模板：

    • 当你需要修改网站的共同部分时（更换 Logo、修改导航菜单、更新版权信息），只需要打开 .dwt 模板文件进行修改。
    • 保存模板时,Dreamweaver 会弹出一个对话框，询问你是否要更新所有使用了该模板的页面。
    • 选择 更新，网站中所有基于此模板的页面都会自动同步修改，无需手动一个一个改。

  2. 分离页面：

    • 如果你需要单独修改某一个页面上的某个“锁定”区域（只想让首页的导航菜单多一个“首页”高亮），你可以将该页面与模板“分离”。
    • 在该页面中,选择 修改 > 模板 > 从模板中分离。
    • 警告：分离后，该页面将不再受模板控制，未来模板的更新将不再影响这个页面，请谨慎使用。
步骤 核心操作 关键点
规划 确定网站结构和共同/可变元素 好的规划是成功的一半
创建模板 新建 .dwt 文件，搭建基础框架 文件必须保存在站点的 Templates 文件夹
定义区域 使用“可编辑区域”标记可修改内容 锁定共同部分，放开可变部分
保存模板 保存 .dwt 文件 让 Dreamweaver 自动管理路径
应用模板 基于模板创建新的 HTML 页面 生成的页面只能在可编辑区操作
管理更新 修改模板并更新所有页面 实现网站“一处修改，全局更新”

通过以上流程,你就可以高效地管理和维护一个大型、风格统一的网站了。