Dreamweaver模板下载后如何正确使用？

1. 如何从零开始自己创建一个 Dreamweaver 模板。
2. 如何下载别人已经做好的 Dreamweaver 模板。

我会分别进行说明。

第一部分：如何在 Dreamweaver 中从零开始创建模板

创建模板是 Dreamweaver 的核心功能之一，它能让你建立一个统一的网站结构和设计，然后基于它快速创建大量风格一致的页面,极大提高效率。

创建模板的详细步骤：

创建一个新的模板文件

1. 打开 Dreamweaver。
2. 在顶部菜单栏选择 文件 > 新建。
3. 在弹出的“新建文档”窗口中，选择 “模板” 分类。
4. 在右侧，选择 “HTML 模板”，然后点击 “创建”。
5. Dreamweaver 会创建一个名为 untitled.dwt.html 的文件。保存它，并命名为一个有意义的名字，main.dwt 或 template.dwt。重要提示：模板文件通常保存在网站的根目录下一个名为 Templates 的文件夹中，如果这个文件夹不存在，Dreamweaver 会自动为你创建。

编辑模板内容（定义可编辑区域）

现在你得到了一个空的模板页面，接下来需要定义哪些部分是固定的,哪些部分是需要在每个页面中修改的。

1. 设计固定区域：像设计普通网页一样,创建你网站的固定元素，

   • 顶部的网站 Logo 和导航栏。
   • 底部的版权信息和联系方式。
   • 侧边栏的菜单结构（如果菜单项固定）。 这些区域通常是所有页面共有的。

2. 定义可编辑区域：这是模板最关键的一步,可编辑区域是你在基于模板创建的页面中可以自由修改内容的地方。

   • 将光标放在你希望成为可编辑区域的位置（放置文章正文、新闻标题、产品图片的地方）。
   • 在顶部菜单栏选择 插入 > 模板对象 > 可编辑区域...。
   • 在弹出的对话框中，为这个区域起一个清晰的名字（EditRegion_Title、EditRegion_Content），然后点击“确定”。
   • 你会看到，被定义为可编辑区域的地方会被一个浅色高亮边框和标签（<!-- TemplateBeginEditable name="EditRegion_Content" -->）包围。

保存模板

完成设计后，按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存模板，Dreamweaver 会提示你更新所有基于此模板的页面，选择“是”。

基于模板创建新页面

1. 在 Dreamweaver 中，选择 文件 > 新建。
2. 在“新建文档”窗口中，选择 “模板” 分类。
3. 在左侧的“模板用于”列表中,选择你自己的网站站点。
4. 在中间的列表中，选择你刚刚创建的模板（main.dwt）。
5. 点击 “创建”。

你得到了一个新页面，你会发现，除了你定义的可编辑区域，其他所有内容都被锁定了，无法直接修改，你只能在那些高亮的可编辑区域里输入或修改内容，修改后保存,就得到了一个与模板风格一致但又内容独立的新页面。

第二部分：如何下载 Dreamweaver 模板

直接寻找“.dwt”格式的模板文件比较困难，因为通常提供的是完整的网站模板，你需要下载的是包含模板的完整网站源文件，然后将其作为站点导入到 Dreamweaver 中使用。

以下是下载和使用的几种主要途径：

专业的网站模板市场（推荐）

这些平台提供大量高质量、设计精美的响应式网站模板，通常使用 HTML, CSS, JavaScript 构建，完全兼容 Dreamweaver。

• ThemeForest (Envato Market)

  • 网址: https://themeforest.net/
  • 简介: 全球最大的网站模板市场之一，模板质量极高，种类丰富（WordPress, HTML, Shopify 等），你可以购买 HTML 模板，然后在 Dreamweaver 中打开和编辑。
  • 优点: 设计专业、功能完善、文档详细、售后支持好。
  • 缺点: 大部分是付费的。

• TemplateMonster

  • 网址: https://www.templatemonster.com/
  • 简介: 老牌的模板供应商，提供各种类型的网站模板，同样支持 HTML 格式。
  • 优点: 模板数量多,选择范围广。

• Creative Market

  • 网址: https://creativemarket.com/
  • 简介: 一个设计师作品交易平台，也有很多优秀的 HTML 网站模板出售。

使用方法:

1. 在上述网站购买并下载一个 HTML 网站模板（通常是一个 ZIP 压缩包）。
2. 解压 ZIP 包，你会看到一个包含 index.html、CSS 文件、JS 文件、图片文件夹等的文件结构。
3. 打开 Dreamweaver，选择 站点 > 新建站点。
4. 为你的站点命名，然后选择“本地站点文件夹”,并指向你刚刚解压的模板文件夹。
5. 完成站点设置后，在 Dreamweaver 的“文件”面板中,你就可以看到整个网站的结构了。
6. 双击 index.html 文件，你就可以像编辑普通网页一样进行修改了，虽然它不是一个 .dwt 文件，但其结构清晰，代码规范，非常适合在 Dreamweaver 中二次开发。

免费模板资源站

如果你不想花钱,可以寻找免费资源。

• Free-CSS.com

  • 网址: https://free-css.com/
  • 简介: 提供大量免费的 CSS 网站模板，可以直接下载 HTML/CSS/JS 文件。
  • 优点: 免费。
  • 缺点: 模板质量参差不齐，可能比较老旧,文档和支持较少。

• Templatemo

  • 网址: https://templatemo.com/
  • 简介: 提供许多免费的响应式 HTML5 网站模板,设计比较现代。
  • 优点: 免费,设计较新。

• OpenWRT / Bootstrap 官方示例

  • 简介: 如果你使用 Bootstrap 等前端框架，可以直接访问它们的官方网站，查看和下载官方提供的示例模板，这些模板结构清晰,非常适合学习和修改。

使用方法: 与付费模板类似，下载、解压、在 Dreamweaver 中新建站点并打开文件即可。

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

如果你计划使用 WordPress, Joomla, Drupal 等系统,它们的主题本质上就是一种模板。

• WordPress.org 主题目录: https://wordpress.org/themes/
• ThemeForest 上的 WordPress 主题: 同样在 ThemeForest 可以找到。

注意: 这类主题是为特定 CMS 设计的，不能直接在 Dreamweaver 中像普通 HTML 网站一样编辑，你需要先安装 WordPress，然后上传并激活主题，再在 WordPress 的后台编辑页面内容，虽然你可以在 Dreamweaver 中修改主题的 PHP 和 CSS 文件,但这需要一定的开发知识。

希望这份详细的指南能帮助你顺利地在 Dreamweaver 中使用模板！