Dreamweaver (简称DW) 是 Adobe 公司的一款老牌网页设计和开发工具，虽然现在前端开发更流行 VS Code 等轻量级编辑器，但 Dreamweaver 凭借其可视化编辑、模板和代码提示等功能，仍然在特定领域（如企业官网、个人博客、快速原型制作）被广泛使用。

dreamweaver网页制作模板
（图片来源网络，侵删）

理解 Dreamweaver 的模板，关键在于区分两种不同类型的“模板”：

  1. Dreamweaver 内置的模板文件 (.dwt)：这是 Dreamweaver 的核心功能，用于创建可复用的网站布局模板。
  2. 下载的网页模板文件：这是指从网上下载的、已经制作好的完整网页 HTML/CSS 文件，你可以用 Dreamweaver 打开并修改它们。

下面我将详细讲解这两种模板的使用方法。

Dreamweaver 内置模板 (.dwt) - 高效创建多页面的利器

这是 DW 最强大的功能之一，通过创建一个模板，你可以定义好网站的整体布局（如导航栏、页脚、侧边栏），然后将这个模板应用到多个页面上，当需要修改布局时，只需更新模板，所有应用了该模板的页面都会自动更新。

核心概念：

  • 可编辑区域：模板中允许用户修改内容的部分，每个页面的文章标题和正文内容。
  • 锁定区域：模板中不允许用户修改的部分，网站的 Logo、导航菜单、版权信息等，这些是所有页面共享的固定元素。

创建和使用模板的步骤：

第 1 步：创建一个基础页面

dreamweaver网页制作模板
（图片来源网络，侵删）
  1. 新建一个 HTML 文件 (File > New > HTML)。
  2. 设计你的网站布局,创建一个包含顶部导航、中间内容区和底部页脚的三栏布局。
  3. 将需要固定不变的部分（如导航和页脚）制作好。

第 2 步：将页面另存为模板

  1. 点击菜单栏 File > Save as Template。
  2. 在弹出的对话框中,为你的模板命名（main.dwt），然后点击 Save。
  3. 保存后,你会看到 DW 自动在站点根目录下创建一个名为 Templates 的文件夹，并将你的模板文件 main.dwt 存放其中。

第 3 步：定义可编辑区域

这是最关键的一步,你需要告诉 DW 哪些部分是可以在新页面中修改的。

  1. 在模板文件中,选中你想要设置为可编辑区域的内容，选中中间内容区的占位文本。
  2. 在菜单栏中,点击 Insert > Template Objects > Editable Region。
  3. 在弹出的对话框中,为这个区域命名（Content 或 MainContent），然后点击 OK。
  4. 你会看到,被定义的区域会有一个蓝色标签 <div#Content> 或类似的标记，这表示它是一个可编辑区域。

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

dreamweaver网页制作模板
（图片来源网络，侵删）
  1. 点击 File > New。
  2. 在 New Document 窗口中，选择 Site > Site Templates。
  3. 在右侧的列表中,选择你刚刚创建的 main.dwt 模板，然后点击 Create。
  4. DW 会生成一个新页面，这个页面已经应用了你的模板布局，你只能修改蓝色标签标记的可编辑区域，其他部分都被锁定了。
  5. 将这个新页面保存到你的站点中,并命名为 index.html, about.html 等。

第 5 步：更新模板

假设你决定修改导航栏的链接。

  1. 打开你的模板文件 Templates/main.dwt。
  2. 修改导航栏中的链接或文字。
  3. 保存模板,DW 会弹出一个对话框，询问你是否要更新所有使用了该模板的页面。
  4. 选择 Update，DW 会自动遍历你整个站点，并更新所有基于此模板的页面。

下载现成的网页模板并修改

这种方法适合不想从零开始,或者需要快速搭建一个网站的用户，你可以从各种资源网站下载 HTML、CSS 模板，然后用 Dreamweaver 打开和编辑。

去哪里下载模板？

  1. ThemeForest：全球最大的模板市场，质量最高，但多为付费主题。
  2. Bootstrap Templates：Bootstrap 官方网站及其社区提供了大量基于其框架的免费响应式模板。
  3. HTML5 UP：提供大量设计精美、完全免费、基于现代技术的模板，非常适合个人项目。
  4. TemplateMo：提供大量免费的响应式 HTML5 模板。
  5. 国内平台：如站长素材、模板王等，也提供大量免费的网页模板。

如何用 Dreamweaver 编辑下载的模板？

下载的模板通常是一个包含 index.html、css/ 文件夹、images/ 文件夹等的压缩包。

第 1 步：设置站点

这是在 Dreamweaver 中工作的第一步，至关重要！

  1. 将下载的模板解压到一个新的文件夹（my-website）。
  2. 打开 Dreamweaver，点击 Site > New Site。
  3. 在 Site Name 中输入你的网站名称（如 My New Website）。
  4. 在 Local Site Folder 中，点击文件夹图标，选择你刚刚解压的 my-website 文件夹。
  5. 点击 Save 完成站点设置，这一步能确保 DW 正确管理文件链接。

第 2 步：打开和编辑主页

  1. 在 DW 的 Files 面板（右侧）中，双击 index.html 将其打开。
  2. 可视化编辑：如果你不熟悉代码，可以直接在 Design（设计）视图或 Live（实时）视图中拖动元素、修改文本内容。
  3. 代码编辑：切换到 Code（代码）视图，你可以直接修改 HTML 和 CSS，DW 的代码提示功能会非常有帮助。
    • 修改文本：直接在 HTML 标签之间输入你的内容。
    • 修改图片：找到 <img> 标签，将 src 属性的值（图片路径）替换为你自己的图片路径。
    • 修改样式：可以修改 <style> 标签内的 CSS 代码，或者链接到外部 CSS 文件（在 <head> 部分的 <link> 标签）进行修改。

第 3 步：管理资源和链接

  • 插入新图片：使用菜单 Insert > Image，DW 会自动将图片复制到你站点的 images 文件夹，并生成正确的相对路径。
  • 检查链接：使用 Site > Check Links Sitewide 来检查网站内部是否存在断开的链接。

推荐的 Dreamweaver 模板资源网站

为了方便你开始,这里整理了一些国内外优质的模板资源：

网站名称 特点 语言 费用
ThemeForest 模板种类最全，质量顶尖，专业性强 英文 付费为主
HTML5 UP 设计现代、简洁、免费、无广告、基于现代框架 英文 完全免费
BootstrapMade 专注于 Bootstrap 模板，响应式设计好 英文 大部分免费
TemplateMo 数量庞大，风格多样，完全免费 英文 完全免费
站长素材 中文资源丰富，模板、素材、源码应有尽有 中文 免费 + 付费
模板王 国内老牌模板网站，提供大量免费和商业模板 中文 免费 + 付费

总结与建议

  • 如果你是新手，想快速建站：建议直接从 HTML5 UP 或 TemplateMo 下载一个免费模板，然后在 Dreamweaver 中按照“设置站点 -> 打开 -> 修改内容”的流程进行二次开发，这是最快、最直观的方式。
  • 如果你是网站开发者，需要维护多个同风格网站：强烈建议使用 Dreamweaver 的 .dwt 模板文件功能，它能极大地提高工作效率，保证网站风格的统一性，并方便后期维护。
  • Dreamweaver 的定位：它是一个“所见即所得”和“代码编辑”相结合的工具，你可以先用可视化布局搭建框架，然后切换到代码视图进行精细调整，两者结合非常高效。

希望这份详细的指南能帮助你更好地利用 Dreamweaver 和模板来制作网页！