核心概念：网页模板是什么？

网页模板通常是一个或多个已经设计好的 HTML 文件，可能还包含 CSS 样式表、JavaScript 文件以及图片资源，它为你搭建好了网站的“骨架”和“外观”，你只需要替换其中的内容（如文字、图片）即可快速搭建出页面。

使用 Dreamweaver 内置的“启动屏幕”或“新建”功能（最推荐）

这是最简单、最官方的方法，适合新手和快速开始一个新项目，Dreamweaver 自带了一些高质量的模板,你不需要从外部下载。

操作步骤：

  1. 打开 Dreamweaver。
  2. 在启动屏幕中，点击 “新建” (New)。
  3. 在打开的界面中，左侧选择 “网站模板” (Site Templates)。
  4. 在中间区域，你会看到 Dreamweaver 提供的多种模板，它们按类别（如“个人”、“商业”、“作品集”）排列。
  5. 选择一个你喜欢的模板,右侧会显示预览。
  6. 点击右下角的 “创建” (Create) 按钮。

完成！ Dreamweaver 会自动为你创建一个新站点，并将模板文件放入其中，你可以在文件面板中看到所有相关文件，并直接编辑 index.html 来开始你的工作。

从外部网站下载模板文件，然后在 DW 中打开

当你从像 ThemeForest、BootstrapMade、或各种免费模板网站上找到心仪的模板时,就需要使用这种方法。

操作步骤：

第一步：下载模板文件

  1. 找到下载地址：在模板网站上，找到“Download”、“Download Free”或“购买并下载”等按钮。
  2. 下载文件：点击按钮，通常会下载一个压缩包，格式为 .zip 或 .rar。
  3. 解压文件：将下载的压缩包解压到一个你容易找到的文件夹里，解压后，你会看到类似这样的文件结构：
    • index.html (首页)
    • about.html (关于我们页)
    • css/ 文件夹 (存放样式表)
    • js/ 文件夹 (存放脚本)
    • images/ 文件夹 (存放图片)

第二步：在 Dreamweaver 中打开和使用

你有两种方式在 DW 中处理这些文件：

方式A：直接打开和编辑（简单直接）

  1. 打开 Dreamweaver。
  2. 点击顶部菜单栏的 “文件” > “打开” (File > Open)。
  3. 在弹出的窗口中，找到你刚才解压的文件夹，选择 index.html 文件，然后点击“打开”。
  4. 模板页面就会在 DW 的设计视图中显示，你现在可以直接点击文字或图片进行修改，就像在 Word 里编辑一样。

优点：非常直观，适合只想快速修改一两个页面的情况。 缺点：如果你新建一个页面（contact.html），需要手动复制 index.html 的代码结构,比较麻烦。

方式B：将模板创建为“Dreamweaver 模板”（专业方法）

这是最专业、最高效的方法，特别适合需要制作多个结构相似页面的网站（如企业官网）。

  1. 打开主文件：按照方式A的步骤，在 DW 中打开你下载的模板主文件（通常是 index.html）。

  2. 定义可编辑区域：这是最关键的一步，你需要告诉 DW 哪些部分是可以修改的，哪些部分是固定的（比如导航栏、页脚）。

    • 在设计视图中,选中你希望可以修改的文本块或图片。
    • 点击顶部菜单栏的 “插入” > “模板对象” > “可编辑区域” (Insert > Template Objects > Editable Region)。
    • 给这个区域起一个名字（MainContent 或 ContentArea），然后点击“确定”。
    • 你会看到，被定义为“可编辑区域”的部分会有一个淡黄色的标签。

  3. 保存为模板：

    • 点击顶部菜单栏的 “文件” > “另存为模板” (File > Save as Template)。
    • 在弹出的窗口中，给模板起一个名字（mySiteTemplate），然后点击“保存”。
    • 你的 index.html 已经变成了一个真正的 DW 模板文件（文件名后缀可能会变为 .dwt），并保存在你站点根目录下的 Templates 文件夹中。

  4. 基于模板创建新页面：

    • 你可以创建新页面了，点击 “文件” > “新建” (File > New)。
    • 在弹出的窗口中，选择 “模板中的页” (Page from Template)。
    • 在右侧的“站点”中选择你的站点名称，在“模板”列表中选择你刚刚保存的 mySiteTemplate。
    • 点击“创建”。
    • DW 会生成一个新页面，这个页面已经继承了模板的结构，并且你只能在之前定义的“可编辑区域”内进行修改，导航栏、页脚等固定部分是无法直接编辑的,这保证了网站风格的一致性。

使用“附加”功能（用于已有站点）

如果你已经有一个 Dreamweaver 站点,现在想为这个站点添加一个从外部下载的模板。

  1. 下载并解压：同方法二的第一步。
  2. 将文件复制到站点：将解压后的所有文件（index.html, css 文件夹等）复制并粘贴到你 Dreamweaver 站点根目录下。
  3. 在 DW 中打开站点：确保你在 DW 的“文件”面板中选中了这个站点。
  4. 刷新文件面板：如果文件没有自动出现，右键点击站点根目录，选择 “刷新”。
  5. 附加模板：
    • 在“文件”面板中，双击打开 index.html。
    • 按照方法二中的步骤，定义可编辑区域，“另存为模板”。
    • 之后，你就可以像方法二的方式B一样,基于这个新模板创建站点内的其他页面了。

总结与建议

场景 推荐方法 优点 缺点
新手入门，想快速建站 使用内置模板 无需下载，一键创建，官方支持 模板选择有限，可能不够独特
从网站找到心仪模板，想直接修改 方式A - 直接打开 操作简单，直观快捷 不利于网站长期维护，新建页面麻烦
需要建立多页面、风格统一的专业网站 方式B - 创建DW模板 最推荐，效率高，维护方便，保证页面一致性 初次设置需要学习“可编辑区域”概念
已有网站，想为它添加新模板 附加模板 无缝集成到现有站点中 需要先理解 Dreamweaver 站点的概念

给新手的建议：

  1. 先从 方法一 开始，熟悉 Dreamweaver 的基本操作。
  2. 然后尝试下载一个简单的模板，用 方法二的方式A 打开并修改,感受一下。
  3. 当你想要制作一个完整的网站时，一定要花时间学习 方法二的方式B，这会是你 DW 使用生涯中的一个重要技能提升点。