这份指南将涵盖模板的创建、定义、应用、管理以及常见问题,希望能帮助你彻底理解并掌握它。

dreamweaver cs3模板
（图片来源网络，侵删）

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

模板是一个预先设计好的、带有固定结构和可编辑区域的网页文件，你可以把它想象成一个“母版”或“模具”。

核心作用：

  1. 统一网站风格：确保所有页面拥有相同的页眉、页脚、导航栏和侧边栏。
  2. 提高效率：修改一次模板（比如更换导航栏链接），所有基于该模板的页面都会自动更新,无需手动修改成百上千个文件。
  3. 简化维护：对于大型网站，维护工作大大简化,降低了出错率。

模板中的两个关键区域：

  • 可编辑区域：这是模板中允许用户修改的部分，每个页面的正文内容、标题等。
  • 锁定区域：这是模板中所有页面共有的、不可直接修改的部分，网站的 Logo、版权信息、主导航菜单等，当模板被修改时,这些区域会同步到所有子页面。

创建一个 Dreamweaver CS3 模板

假设我们要为网站创建一个标准模板，包含页眉、导航、内容区和页脚。

dreamweaver cs3模板
（图片来源网络，侵删）

步骤 1：新建模板文件

  1. 在 Dreamweaver CS3 中，点击菜单栏的 文件 > 新建。
  2. 在弹出的对话框中，选择 “模板页” 分类。
  3. 在右侧选择你使用的技术，“HTML 模板”。
  4. 点击 “创建”。

Dreamweaver 会创建一个名为 dwt 的文件（template.dwt），并自动将其保存在你定义的“站点”的 Templates 文件夹中。请务必先设置好站点！

步骤 2：设计模板布局

像制作普通网页一样，使用表格或 CSS 布局来设计你的模板框架。

  • 插入你的 Logo（在页眉）。
  • 创建主导航菜单。
  • 划分出主要内容区域。
  • 插入页脚和版权信息。

整个页面都是“锁定区域”,你无法在基于此模板的页面中编辑任何内容。

步骤 3：定义可编辑区域

这是最关键的一步，你需要告诉 Dreamweaver 哪些部分是可以被修改的。

dreamweaver cs3模板
（图片来源网络，侵删）
  1. 将光标定位在你希望用户能够编辑的区域,在主要内容区点击。
  2. 点击菜单栏的 插入 > 模板对象 > 可编辑区域。
  3. 在弹出的对话框中，为这个区域起一个唯一的、有意义的名称，EditRegion1（默认名，但最好改成如 MainContent 或 PageContent）。
  4. 点击 “确定”。

你会看到，该区域被一个浅色高亮边框和标签（<!-- TemplateBeginEditable name="MainContent" --> ... <!-- TemplateEndEditable -->）包围。

你可以为模板定义多个可编辑区域，例如一个用于页面标题（PageTitle），一个用于正文（MainContent），一个用于侧边栏（Sidebar）。

步骤 4：保存模板

按 Ctrl + S 保存你的模板，模板文件会自动保存在 Templates 文件夹中。

使用模板创建新页面

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

  1. 点击菜单栏的 文件 > 新建。
  2. 在对话框中，选择 “模板” 分类。
  3. 在左侧的“模板用于”列表中,选择你自己的站点。
  4. 在中间的模板列表中，选择你刚刚创建的模板（如 template.dwt）。
  5. （可选但推荐） 勾选 “当模板改变时更新页面”。
  6. 点击 “创建”。

Dreamweaver 会生成一个基于该模板的 HTML 文件，你会发现，只有你在模板中定义的“可编辑区域”可以被修改，而其他部分都是灰色的,不可编辑。

管理模板：更新与分离

更新基于模板的页面

当你修改了模板文件（更换了导航栏的图片或修改了某个链接）后,你需要将更改同步到所有子页面。

  • 手动更新：在站点文件列表中，右键点击一个或多个基于模板的 HTML 文件，选择 “更新页面...”。
  • 自动更新：在创建新页面时勾选了该选项，Dreamweaver 会在打开页面时提示你模板已更改,并询问是否要更新。

将页面从模板分离

有时你可能需要基于某个模板的页面进行大幅度修改，以至于不再受模板限制,这时你需要将它从模板中分离。

  1. 打开你需要修改的页面。
  2. 点击菜单栏的 修改 > 模板 > 从模板中分离。

警告：此操作是不可逆的，分离后，该页面将变成一个普通的 HTML 文件，所有模板的锁定区域和可编辑区域都将变为普通内容，之后你将无法再通过模板更新功能来修改它,请谨慎使用。

Dreamweaver CS3 模板的常见问题与注意事项

  1. CS3 版本太旧了！

    • 这是事实，CS3 不支持 HTML5 和 CSS3，它的模板是基于 HTML 4.01 和 XHTML 1.0 的。
    • 建议：如果条件允许，尽量使用新版 Dreamweaver（如 Adobe Dreamweaver CC）或现代代码编辑器（如 VS Code），现代工具的组件化、文件引用等功能比 CS3 的模板更强大、更灵活。

  2. 模板文件无法直接预览！

    • 模板文件（.dwt）不是最终网页，它只是一个“模具”，你必须在浏览器中预览基于模板创建的 HTML 页面,才能看到最终效果。

  3. “可编辑区域”命名冲突

    在一个模板中，每个可编辑区域的名称必须是唯一的，如果你试图创建两个同名的可编辑区域，Dreamweaver 会报错。

  4. “可选区域”和“重复区域”

    • 除了“可编辑区域”，CS3 还支持更高级的模板对象：
      • 可选区域：根据条件（用户是否登录）显示或隐藏内容。
      • 重复区域：创建可以重复多次的区域，常用于制作新闻列表、产品表格等，你可以在重复区域内再嵌套“可编辑区域”。

  5. “锁定区域”意外被修改

    • 如果你不小心在基于模板的页面中修改了“锁定区域”的内容，Dreamweaver 会弹出一个警告。请立即放弃修改，不要保存，如果你已经保存了，该页面与模板的关系可能会被破坏,导致更新时出现问题。

从 CS3 模板到现代开发的思考

Dreamweaver CS3 的模板是静态网站管理的经典解决方案，它的核心思想——“分离不变部分与可变部分”——是现代前端开发的基石。

  • 现代替代方案：
    • 服务器端：PHP 的 include/require、JSP 的 <jsp:include>、ASP.NET 的 Master Pages，它们将页眉、页脚等拆分成独立文件,在服务器端动态组合。
    • 前端：Vue/React 组件化开发，将导航栏、页脚等封装成可复用的组件,在父组件中引用。

虽然工具和技术日新月异，但 Dreamweaver CS3 模板所传达的“代码复用”和“关注点分离”的设计理念，至今仍然非常重要，理解它,将帮助你更快地掌握现代网页开发的精髓。