dreamweaver html5模板-网站模板-锦华智联科技

为什么使用 HTML5 模板？ (优势)
如何使用 Dreamweaver 内置的 HTML5 模板？ (最简单的方法)
如何创建和保存自己的可编辑区域模板？ (高级用法)
如何基于模板创建和更新网页？
一个完整的 HTML5 模板代码示例

为什么使用 HTML5 模板？

在 Dreamweaver 中使用模板（尤其是带有可编辑区域的 HTML5 模板）有以下核心优势：

（图片来源网络，侵删）

保持一致性：确保整个网站拥有统一的导航栏、页脚、侧边栏等布局和样式。
提高效率：无需为每个页面重复编写相同的头部、导航和底部代码，只需修改一次，所有基于该模板的页面都会同步更新。
简化维护：当需要修改网站导航或添加一个全局的版权信息时，只需修改模板文件，Dreamweaver 会自动提示你更新所有相关页面，极大减少了出错的可能性。
现代化标准：HTML5 提供了更语义化的标签（如 <header>, <nav>, <main>, <footer>, <article>, <section>），这不仅让代码更易读、更易于搜索引擎优化（SEO），也方便了样式的编写。

如何使用 Dreamweaver 内置的 HTML5 模板？

这是最快捷的方式,适合初学者。

步骤 1：新建文件

打开 Adobe Dreamweaver。
在主界面,选择 文件 > 新建。
在弹出的窗口中,选择 新建 > 空白页。
在 页面类型 中，选择 HTML。
在布局中，选择 <无>。
在 HTML 文档类型 中，确保选择了 HTML5。
点击创建。

Dreamweaver 会为你生成一个基础的 HTML5 文档结构，包含 <!DOCTYPE html> 和基本的 <head>、<body> 结构。

步骤 2：保存为模板

（图片来源网络，侵删）

点击菜单栏的 文件 > 另存为模板。
在弹出的对话框中,为你的模板命名（main_template 或 site_master），然后点击保存。

你的文件已经从一个普通的 HTML 文件变成了一个模板文件（.dwt 文件），Dreamweaver 会自动在文件顶部添加注释，标记这是一个模板。

步骤 3：定义可编辑区域

这是模板的核心,你需要告诉 Dreamweaver 哪些部分是可以在新页面中自由修改的，哪些部分是固定的。

在你的模板文件中,找到你希望设置为“可编辑”的内容，在 <body> 标签内，你可能有一个 <h1> 标题用于显示页面名称。
选中你想要设置为可编辑区域的文本或代码块（<h1 id="page-title">首页</h1>）。
右键点击选中的内容,选择 模板 > 新建可编辑区域。
在弹出的对话框中,为这个区域命名（doctitle 用于页面标题，head 用于页面特定的 CSS/JS，content 用于主要内容），命名要清晰且有规律。
点击确定。

Dreamweaver 会在你选中的内容周围用高亮颜色（通常是天蓝色）和注释标记出可编辑区域。

（图片来源网络，侵删）

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

点击 文件 > 新建。
在弹出的窗口中,选择 新建 > 网页上的模板。
在右侧的 模板用于 列表中，选择你刚刚创建的模板（main_template.dwt）。
点击创建。

Dreamweaver 会打开一个新页面，这个页面的布局和固定部分已经继承自模板，你只能在之前定义的“可编辑区域”内进行修改。

如何创建和保存自己的可编辑区域模板 (高级用法)

如果你想从一个完全自定义的布局开始,可以手动编写 HTML5 结构并定义可编辑区域。

手动编写结构：在 Dreamweaver 中创建一个新文件，然后手动输入一个完整的 HTML5 框架，并使用语义化标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <template_title>页面标题 - 网站名称</template_title> <!-- 这里将设为可编辑区 -->
    <link rel="stylesheet" href="css/style.css">
    <template_head></template_head> <!-- 这里将设为可编辑区，用于页面特定的CSS/JS -->
</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>
        <template_content> <!-- 这里将设为可编辑区，用于主要内容 -->
            <h2>欢迎来到我的网站</h2>
            <p>这里是页面的主要内容。</p>
        </template_content>
    </main>
    <footer>
        <p>&copy; 2025 我的公司. 保留所有权利.</p>
    </footer>
</body>
</html>

定义可编辑区域：像上面描述的那样，选中 <template_title>、<template_head> 和 <template_content> 内部的代码，右键选择 模板 > 新建可编辑区域，并为它们命名（doctitle, head, content）。
保存为模板：点击 文件 > 另存为模板，并命名。

如何基于模板创建和更新网页

创建页面：如上所述，通过 文件 > 新建 > 网页上的模板 来创建。
更新模板：当你修改了 .dwt 模板文件并保存时，Dreamweaver 会弹出一个对话框，询问你是否要更新所有基于此模板的文件，选择更新，所有页面的固定部分都会被同步修改。

一个完整的 HTML5 模板代码示例

这是一个推荐的、结构清晰的 HTML5 模板代码，你可以将其复制到 Dreamweaver 中，然后定义可编辑区域。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网站名称 - <template_doctitle>页面标题</template_doctitle></title>
    <!-- 全局 CSS 文件 -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- 在此区域可以添加页面特定的 CSS 或 Meta 标签 -->
    <template_head></template_head>
</head>
<body>
    <!-- 顶部固定栏，如登录、注册链接 -->
    <div class="top-bar">
        <span>欢迎访问！</span>
        <a href="#">登录</a> | <a href="#">注册</a>
    </div>
    <!-- 网站头部，通常包含 Logo 和主导航 -->
    <header class="main-header">
        <div class="container">
            <div class="logo">
                <a href="index.html">我的网站</a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="services.html">服务</a></li>
                    <li><a href="portfolio.html">作品集</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- 主要内容区域 -->
    <main class="main-content container">
        <template_content>
            <!-- 页面的主要内容将在这里 -->
            <h1>这是可编辑的页面标题</h1>
            <p>这里是页面的主要内容，你可以在基于此模板创建的任何页面中自由编辑这部分。</p>
        </template_content>
    </main>
    <!-- 网站页脚 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 我的公司. 版权所有.</p>
        </div>
    </footer>
    <!-- 全局 JavaScript 文件 -->
    <script src="assets/js/main.js"></script>
    <!-- 在此区域可以添加页面特定的 JavaScript -->
    <template_foot_js></template_foot_js>
</body>
</html>

如何使用这个示例模板：

将上述代码复制到 Dreamweaver 中。
选中 <template_doctitle> 和，右键创建可编辑区域，命名为 doctitle。
选中 <template_head> 和其内部的注释，右键创建可编辑区域，命名为 head。
选中 <template_content> 和其内部的全部内容，右键创建可编辑区域，命名为 content。
同样,为 <template_foot_js> 创建一个可编辑区域，命名为 foot_js。
将文件保存为模板（site_master.dwt）。

你就拥有了一个功能强大、结构清晰的 HTML5 模板，可以用来快速构建专业的网站了。