什么是 Dreamweaver 网页模板？
Dreamweaver 网页模板是一种预先设计好的网页框架文件（通常是 .dwt 格式），它包含：
- 可编辑区域: 网页中内容可以变化的部分，例如文章正文、产品图片、新闻列表等。
- 锁定区域: 网页中保持不变的公共部分，例如网站 Logo、主导航栏、页脚版权信息等。
使用模板的最大好处是：当你修改模板中的锁定区域（比如更新了导航菜单）后，所有基于该模板创建的页面都会自动同步更新，极大地提高了大型网站的维护效率。
在哪里可以找到 Dreamweaver 网页模板？
获取模板的途径主要分为以下几类：
官方资源库 (Adobe Stock / Dreamweaver 内置模板)
这是最安全、最直接的来源。
- Adobe Stock: Adobe Stock 是一个高质量的设计资源库，其中包含大量专业的 Dreamweaver 网页模板，这些模板通常设计精美、代码规范，并且支持响应式设计。
- 访问方式: 你需要 Adobe Creative Cloud 订阅才能访问和下载 Adobe Stock 中的资源。
- 优点: 质量、版权都有保障，与 Adobe 生态系统无缝集成。
- Dreamweaver 内置模板: 较新版本的 Dreamweaver 在启动时或通过“新建”文档功能中，会提供一些基础的模板，这些模板通常比较简单，适合快速开始一个项目，但选择有限。
第三方模板网站
这些网站提供大量免费和付费的网页模板,其中很多虽然是 HTML 格式，但完全可以导入 Dreamweaver 中进行编辑。
-
免费模板网站:
- Templated: 提供大量免费、现代的 HTML/CSS 模板，设计风格多样，可商用。
- HTML5 UP: 以其完全响应式、基于现代框架（如 Skeleton, Bootstrap）的设计而闻名，所有模板都免费且开源。
- Free CSS: 一个巨大的 CSS 模板集合，你可以根据颜色、列数、布局等筛选，找到心仪的模板。
- ThemeForest (Envato Market): 虽然是付费市场，但有时会有免费下载的模板，质量非常高。
-
付费模板网站:
- ThemeForest: 全球最大的网站模板市场之一，拥有海量的高质量 HTML, WordPress, Shopify 等模板，购买后你得到的是完整的 HTML 文件，可以轻松地在 Dreamweaver 中打开和修改。
- TemplateMonster: 另一个老牌的模板供应商，提供各种类型的网站模板。
重要提示: 从第三方网站下载的模板通常是 HTML/CSS/JS 文件包，而不是 Dreamweaver 的 .dwt 模板文件，你需要将它们作为普通网页在 Dreamweaver 中打开，然后根据需要创建自己的 .dwt 模板。
管理系统 导入
如果你使用 WordPress、Joomla 或 Drupal 等 CMS 系统，你可以在其官方市场或第三方主题网站上下载主题，虽然这些主题是为 CMS 设计的，但你可以：
- 下载主题的 ZIP 包。
- 解压后,找到其中的
index.html或主要模板文件。 - 在 Dreamweaver 中打开这个 HTML 文件，分析其结构和 CSS。
- 基于此创建你自己的 Dreamweaver 模板。
如何在 Dreamweaver 中使用模板？
这里我们以将一个从 HTML5 UP 下载的模板为例，说明如何在 Dreamweaver 中将其转化为一个可重复使用的模板。
步骤 1: 创建一个新的站点
在开始任何项目之前,强烈建议在 Dreamweaver 中定义一个“站点”，这有助于管理所有文件和链接。
- 菜单栏:
站点->新建站点... - 填写站点名称（如 "MyNewSite"），并选择本地站点文件夹的存放位置。
步骤 2: 下载并解压模板文件
将你从第三方网站下载的模板 ZIP 文件解压，并将所有文件（如 index.html, css/, js/, images/ 文件夹）复制到你刚刚创建的站点文件夹中。
步骤 3: 打开主页文件
在 Dreamweaver 的“文件”面板中，双击打开 index.html 文件。
步骤 4: 创建可编辑区域
这是最关键的一步,你需要决定哪些部分是内容，哪些是布局。
- 选中要设为可编辑的区域：选中页面中间的文章标题和正文。
- 插入可编辑区域：
- 菜单栏:
插入->模板对象->可编辑区域... - 或者在选中的内容右键,选择
模板对象->可编辑区域...
- 菜单栏:
- 为区域命名：在弹出的对话框中，给这个区域起一个有意义的名字，如
ArticleContent，点击“确定”。 - 你会看到,被设置为可编辑区域的内容会被一个淡色高亮边框和标签
<div id="ArticleContent">包裹。
重复此步骤,为所有需要动态变化的内容（如侧边栏、图片轮播、产品列表等）创建可编辑区域。
步骤 5: 将页面另存为模板
- 菜单栏:
文件->另存为模板... - Dreamweaver 会提示你这是站点中的第一个模板，为模板起一个名字，如
main.dwt。 - 点击“保存”，你的
index.html已经变成了main.dwt文件，并保存在站点的Templates文件夹中（Dreamweaver 会自动创建）。
步骤 6: 基于模板创建新页面
- 在“文件”面板中，右键点击
Templates文件夹中的main.dwt。 - 选择
从模板新建...。 - Dreamweaver 会自动创建一个新 HTML 文件，你可以看到，只有你之前定义的可编辑区域是可编辑的，其他部分（如导航、页脚）都是灰色的，不可修改。
- 保存这个新页面,例如命名为
about.html。
当你再次打开 main.dwt 模板文件，修改导航链接并保存时，Dreamweaver 会弹出一个对话框，询问你是否要更新所有基于该模板的页面（如 index.html, about.html 等），点击“更新”，所有页面的导航都会同步修改。
现代网页设计的趋势与 Dreamweaver 的角色
需要注意的是,现代网页设计已经发生了很大变化：
- 响应式设计是标配: 几乎所有新模板都必须是响应式的，能完美适配手机、平板和桌面，Dreamweaver 对此有很好的支持，尤其是在使用 Bootstrap 等框架时。
- 内容管理系统 主导: 对于大多数非技术用户来说，使用 WordPress、Wix、Squarespace 等 CMS 是更简单、更高效的选择，它们自带强大的后台和主题系统。
- 前端框架流行: 像 Vue.js, React 这样的框架正在改变网页的构建方式，但 Dreamweaver 在处理这些复杂项目时可能不如 VS Code 等专业代码编辑器灵活。
Dreamweaver 仍然是一个功能强大的可视化网页设计和开发工具，特别适合：
- 初学者: 通过可视化界面快速理解 HTML 和 CSS 结构。
- 中小型企业网站: 需要一个独立、可控的网站，但又不想依赖 CMS。
- 有经验的开发者: 需要一个高效的代码编辑器和可视化工具结合的环境。
给你的建议：
- 从 Adobe Stock 或 HTML5 UP 开始： 下载一个高质量的响应式模板。
- 在 Dreamweaver 中建立站点： 养成良好习惯。
- 将 HTML 转化为
.dwt模板： 利用模板功能提高效率。 - 学习基础代码： 即使使用可视化工具，了解 HTML/CSS 也能让你更好地控制设计。
希望这份详细的指南能帮助你顺利地使用 Dreamweaver 和网页模板！
