什么是 Dreamweaver 网页模板？

Dreamweaver 的模板是一种特殊类型的 HTML 文件，它包含一个固定的布局和可编辑区域，它的核心思想是“一次创建，多处复用”。

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

  • 优点：

    1. 提高效率： 无需为每个页面重复编写相同的页头、页脚、导航栏等。
    2. 保持一致性： 确保整个网站的风格、结构和导航完全统一。
    3. 便于维护： 当你需要修改网站通用部分（如更新版权信息或更换 Logo）时，只需修改模板文件,所有基于该模板的页面都会自动更新。

  • 模板的核心组成部分：

    • 可编辑区域: 这是模板中唯一可以被修改的部分，当你基于模板创建新页面时,你只能在可编辑区域内添加内容。
    • 锁定区域: 这是模板中固定不变的部分，如网站的 Logo、主导航菜单、页脚版权信息等，这些区域在基于模板的页面中是不可编辑的,以确保网站结构的统一。

如何创建和使用模板？

下面是一个从零开始创建并使用模板的完整流程。

步骤 1：创建一个新的模板文件

  1. 打开 Dreamweaver。
  2. 在顶部菜单栏选择 文件 > 新建。
  3. 在弹出的窗口中，选择 “模板页”。
  4. 在右侧的列表中选择你使用的技术，如 “HTML 模板”。
  5. 点击 “创建”，Dreamweaver 会创建一个 .dwt 的模板文件（untitled-1.dwt.html）。

步骤 2：设计模板布局并定义可编辑区域

  1. 设计布局： 像设计普通网页一样，在模板中构建你的网站结构，使用 Dreamweaver 的可视化工具或直接编写代码来创建页眉、导航栏、侧边栏和页脚。
  2. 定义可编辑区域： 这是最关键的一步。
    • 将光标放在你希望内容可以变化的位置（在 <body> 标签内，<h1> 标签之后）。
    • 在顶部菜单栏选择 “插入” > “模板对象” > “可编辑区域”。
    • 在弹出的对话框中，为这个区域命名（EditRegion1，建议使用有意义的名称如 main_content 或 page_title）。
    • 点击 “确定”，Dreamweaver 会在该位置用淡黄色高亮显示可编辑区域,并带有标签。
  3. 锁定其他区域： 默认情况下，除了你定义的可编辑区域，模板的其他所有部分都是锁定的，你可以尝试编辑其他地方,会发现无法修改。

示例代码结构：

adobe dreamweaver网页模板
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">无标题文档</title>
    <!-- 你的 CSS 链接 -->
</head>
<body>
    <!-- 这是锁定区域 -->
    <header>
        <h1>我的网站 Logo</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 这是可编辑区域 -->
        <div id="main_content">
            <!-- 页面内容将在这里 -->
        </div>
    </main>
    <!-- 这是锁定区域 -->
    <footer>
        <p>&copy; 2025 我的公司. 保留所有权利.</p>
    </footer>
</body>
</html>

步骤 3：基于模板创建新页面

  1. 在 Dreamweaver 中，选择 文件 > 新建。
  2. 在弹出的窗口中，选择 “模板中的页”。
  3. 在右侧，选择你的站点,然后从模板列表中选择你刚刚创建的模板。
  4. 点击 “创建”，Dreamweaver 会生成一个新页面,并自动应用模板。
  5. 在这个新页面中，你只能看到并修改之前定义的“可编辑区域”，其他部分都是灰色的,不可编辑。

步骤 4：更新模板

当你修改模板文件（.dwt）后，Dreamweaver 会弹出一个对话框，询问你是否要更新所有使用了该模板的页面，选择“是”,即可一键更新整个网站的相关部分。

在哪里可以找到现成的 Dreamweaver 网页模板？

如果你不想从零开始,可以从以下几个地方下载高质量的现成模板。

Adobe 官方资源 (首选)

Adobe 提供了大量与 Dreamweaver 兼容的模板，通常包含完整的设计、样式和响应式布局。

  • Adobe Stock: 这是 Adobe 官方的付费素材库，里面有大量专业设计师制作的网页模板。
    • 访问网址：https://stock.adobe.com/
    • 搜索关键词：Dreamweaver template, web template, HTML template。
    • 优点： 质量高、专业、风格多样，通常包含 .dwt 文件或易于转换为模板的 HTML 文件。
  • Adobe Dreamweaver Exchange: 一个社区驱动的资源中心，可以找到插件、扩展和模板。

第三方模板网站

这些网站提供大量免费和付费的 HTML 模板，虽然不是直接以 .dwt 格式提供，但它们很容易被转换为 Dreamweaver 模板。

adobe dreamweaver网页模板
（图片来源网络，侵删）
  • ThemeForest (Envato Market): 全球最大的付费模板市场之一，质量非常高。
    • 访问网址：https://themeforest.net/
    • 搜索关键词：HTML, Landing Page, Corporate。
    • 如何使用： 下载模板后，在 Dreamweaver 中打开其 HTML 文件，然后按照 步骤 2 的方法，将页眉、页脚等固定部分设为锁定区域，将内容区域设为可编辑区域，然后另存为 .dwt 模板文件即可。
  • BootstrapZero / StartBootstrap: 提供基于 Bootstrap 框架的免费、高质量的 HTML 模板。
    • 访问网址：https://startbootstrap.com/
    • 优点： 响应式设计、代码规范、免费开源,同样需要手动转换为模板。
  • 其他资源网站：

免费模板资源库

  • OpenWrt: 虽然名字相似，但请注意这是一个路由器固件项目,不是模板网站。
  • 一些个人博客和设计社区也会分享免费模板，可以通过 Google 搜索 free html templates 找到。

使用模板的最佳实践

  1. 合理命名： 为你的模板文件和可编辑区域使用清晰、有意义的名称,方便日后管理。
  2. 使用相对路径： 在模板中链接 CSS、JavaScript 文件和图片时，尽量使用相对路径（如 ../css/style.css），这样在基于模板创建的页面中,这些链接才能正常工作。
  3. 先设计，再模板化： 先完成一个完整的设计稿，确认所有页面布局都满意后，再将其转换为模板,这样可以避免后期反复修改模板带来的麻烦。
  4. 理解模板的限制： 模板适用于布局结构固定的网站，如果某些页面的布局完全不同（一个全屏宽的首页，一个带侧边栏的博客页）,你可能需要创建多个不同的模板。
  5. 善用“从模板新建”功能： 始终通过 文件 > 新建 > 模板中的页 来创建新页面,而不是直接复制粘贴模板文件。
功能 优点 适用场景
创建模板 提高效率，保证一致性，便于维护 个人博客、企业官网、电商网站等需要统一风格的多个页面
使用现成模板 节省时间