Adobe 官方早已不再为 Dreamweaver 提供新的模板下载服务，这意味着你无法在 Adobe 官方网站上找到像以前那样打包好的、可直接使用的 .dwt (Dreamweaver Template) 文件。

dreamweaver网站设计模板
（图片来源网络，侵删）

这并不意味着 Dreamweaver 无法使用模板！现代的网页设计流程已经发生了巨大变化，现在的“模板”概念更多是指响应式网页模板，通常以 HTML、CSS 和 JavaScript 文件的形式存在，而 Dreamweaver 的核心优势在于编辑和管理这些现代模板文件。

下面我将为你详细解释如何在 Dreamweaver 中寻找、使用和管理网站模板。

第一部分：现代的“模板”概念是什么？

现在我们所说的网站模板，通常是一个完整的静态网站,它包含了：

  • HTML 文件：网站的骨架结构。
  • CSS 文件：网站的样式（颜色、字体、布局）。
  • JavaScript (JS) 文件：网站的交互功能（如轮播图、下拉菜单）。
  • 图片和字体文件：网站使用的视觉资源。
  • 可能包含的框架库：如 Bootstrap、Tailwind CSS 等,它们提供了强大的网格系统和预置组件。

这种模板的好处是响应式，能自动适应手机、平板和桌面电脑等不同屏幕尺寸。

dreamweaver网站设计模板
（图片来源网络，侵删）

第二部分：在哪里可以找到这些模板？

既然 Adobe 官方不提供了,我们可以从以下几个主流渠道获取高质量的模板：

模板市场places (最推荐)

这些是专业提供网站模板的平台，模板质量高、设计现代、文档齐全,并且通常提供技术支持。

  • ThemeForest (Envato Market 旗下)：全球最大的模板市场之一，有海量的 HTML、WordPress、Shopify 等模板，质量参差不齐,但精品很多。
  • TemplateMonster：老牌模板提供商，模板种类丰富,支持多种平台。
  • Creative Tim：提供基于 Bootstrap 和 Tailwind CSS 的高质量免费和付费模板，代码质量非常高,适合学习和商业项目。
  • Bootstrap 官方模板：Bootstrap 官方提供了一些优秀的模板示例，可以直接下载使用，是学习 Bootstrap 的好材料。

内容管理系统 (CMS) 的主题库

如果你打算用 WordPress、Joomla 或 Drupal 等建站系统,它们的官方主题库是最佳选择。

  • WordPress.org 主题目录：海量的免费主题,是搭建博客和小型网站的首选。
  • Joomla! 扩展目录：提供大量高质量的 Joomla 主题。

注意：这些 CMS 主题通常是 .zip 压缩包，需要通过 CMS 后台上传安装，而不是直接在 Dreamweaver 中编辑，但你可以下载后，用 Dreamweaver 来研究其代码结构或进行二次开发。

dreamweaver网站设计模板
（图片来源网络，侵删）

免费资源网站

适合初学者、预算有限的项目或学习参考。

  • HTML5 UP：提供大量基于 HTML5、CSS3 和 JavaScript 的免费响应式模板，设计简洁现代,非常受欢迎。
  • Colorlib：同样提供大量免费的高质量 WordPress 主题和 HTML 模板。
  • GitHub：你可以在 GitHub 上搜索 "website template" 或 "bootstrap template",找到很多开发者分享的开源模板项目。

第三部分：如何在 Dreamweaver 中使用这些模板？

这是最关键的一步，流程非常简单，核心是“打开和编辑”，而不是旧版的“基于模板创建页面”。

步骤 1：下载并解压模板

从上述任何一个网站选择一个你喜欢的模板，下载它（通常是 .zip 文件），然后将其解压到你的电脑上一个专门的文件夹里，D:\MyWebsite\template。

步骤 2：在 Dreamweaver 中打开站点

这是 Dreamweaver 强大功能的关键一步。

  1. 打开 Adobe Dreamweaver。
  2. 在主界面，选择 “站点” -> “新建站点...” (Site -> New Site...)。
  3. 在弹出的窗口中，你可以选择 “基本” 模式，给站点起一个名字（如 "我的新网站"），然后点击“下一步”。
  4. 在“站点”设置中，选择 “本地站点文件夹”，然后浏览并选择你刚才解压模板的那个文件夹（D:\MyWebsite\template）。
  5. 点击“完成”。

为什么要做这一步？ 建立站点后，Dreamweaver 会自动管理你的文件链接，当你移动或重命名文件时，它会自动更新所有相关链接，避免出现图片显示不出来、CSS 样式失效等常见问题。

步骤 3：编辑和自定义模板

你的模板文件已经全部显示在 Dreamweaver 的 “文件” 面板中了。

  • 编辑主页：双击 index.html 文件，它会在 Dreamweaver 的设计视图和代码视图中打开。

    • 设计视图：你可以像在 Word 里一样直接修改文本、图片，选中图片，在“属性”检查器中可以替换为你自己的图片。
    • 代码视图：对于更精细的控制，可以直接修改 HTML 和 CSS 代码，Dreamweaver 的代码提示功能会非常有帮助。
    • 实时视图：这是一个预览模式，可以看到接近真实浏览器效果的页面，并且可以在这个视图中直接点击元素进行编辑,非常方便。

  • 修改样式：如果你想改变整个网站的颜色、字体等，最好的方法是编辑 CSS 文件。

    • 在“文件”面板中找到并打开 style.css 或 main.css 文件。
    • 在代码视图中，使用 Dreamweaver 的 “CSS 设计器” 面板，这个面板非常强大，你可以通过可视化的方式创建、修改和删除 CSS 规则,无需手写代码。

  • 添加新页面：

    • 复制 index.html 文件，将其重命名为 about.html（或其他你想要的名称）。
    • 打开 about.html,修改其内容。
    • 由于你之前建立了“站点”，所以新页面与 CSS、JS 文件的链接是自动关联的,你不需要做任何额外操作。

步骤 4：预览和测试

在编辑过程中，随时可以按 F12 键在默认浏览器中快速预览你的网站,检查效果是否符合预期。

第四部分：关于旧版 Dreamweaver 模板 (.dwt 文件)

如果你在寻找非常老旧的教程或资源，可能会提到 .dwt (Dreamweaver Template) 文件。

  • 工作原理：创建一个 .dwt 模板文件，定义好可编辑区域和不可编辑区域，之后基于这个模板创建新页面，新页面会自动继承模板的结构，当修改 .dwt 模板时,所有基于它的页面都会自动更新。
  • 现状：这种技术主要用于大型、结构非常固定的网站开发，以保持页面风格的高度统一，在现代响应式网站开发中，由于其灵活性较差，已经很少被使用了。对于初学者和大多数项目，完全可以忽略 .dwt，直接使用现代的 HTML/CSS 模板即可。

总结与建议

  1. 忘掉官方模板：不要再 Adobe 官网找模板了,那里已经没有新内容。
  2. 寻找现代模板：去 ThemeForest、HTML5 UP、Bootstrap 官网 等地方寻找 HTML/CSS/JS 格式的响应式模板。
  3. 使用“站点”功能：在 Dreamweaver 中创建一个“站点”，并把它指向你的模板文件夹，这是高效、无错操作的前提。
  4. 可视化编辑为主：充分利用 Dreamweaver 的 设计视图 和 CSS 设计器 面板进行可视化编辑,减少手写代码的难度。
  5. 从简单开始：如果你是新手，建议从 HTML5 UP 的免费模板开始，它们设计精良，结构清晰,非常适合学习和二次开发。

希望这份详细的指南能帮助你顺利地在 Dreamweaver 中使用网站模板！祝你设计愉快！