核心概念：网站模板

在 Dreamweaver 中，“网站模板”通常指两种东西：

dreamweaver发布网站模板
（图片来源网络，侵删）
  1. 可编辑区域模板：这是一种 Dreamweaver 特有的功能，你创建一个 .dwt 文件，定义哪些区域（如页头、页脚）是锁定的，哪些区域（如文章内容）是可编辑的，然后基于这个模板创建新页面，修改可编辑区域即可，而锁定区域会自动同步更新，这非常适合大型网站,能保持风格高度统一。
  2. 通用网站结构/布局：更常见的情况是，我们所说的“模板”其实是一个通用的 HTML/CSS 文件结构，你创建一个 index.html，里面包含了你的导航栏、页头、内容区和页脚，这个 index.html 就可以作为你网站其他页面的“模板”，你只需要复制它,然后修改内容部分即可。

本教程将重点讲解第二种情况，因为它更通用，也更容易理解,我也会简要介绍第一种方法。

第一步：准备工作

在开始之前,请确保你已经准备好以下几样东西：

  1. Adobe Dreamweaver 软件：确保已正确安装。
  2. 一个本地网站项目：你已经在 Dreamweaver 中创建了一个“站点”，这是至关重要的，因为 Dreamweaver 需要知道你所有文件的存放位置。
    • 如何创建站点：打开 Dreamweaver -> 站点 -> 新建站点，给站点起个名字，然后选择一个本地文件夹来存放你的网站文件（D:\MyWebsite）。
  3. 一个网络主机和 FTP 信息：这是将你的网站文件上传到互联网的必要条件，你需要从你的网络主机提供商那里获取以下信息：
    • FTP 主机地址：ftp.yourhostingprovider.com。
    • FTP 用户名：你的 FTP 账号。
    • FTP 密码：你的 FTP 密码。
    • 根目录路径：有时也叫做 web root、public_html 或 httpdocs，这是你网站文件上传后，能被公众访问到的顶级文件夹。请务必确认这个路径,否则网站可能无法访问。
  4. 一个域名：www.yourdomain.com,并已将其指向你的网络主机。

第二步：创建你的网站模板 (HTML/CSS 结构)

假设你已经创建了一个名为 "MyWebsite" 的本地站点。

  1. 创建主页面：

    dreamweaver发布网站模板
    （图片来源网络，侵删）
    • 在 Dreamweaver 的“文件”面板中,右键点击你的站点根目录。
    • 选择 新建 -> HTML，Dreamweaver 会为你创建一个默认的 HTML5 文档。
    • 将其重命名为 index.html，这将是你的网站首页，也是我们的“模板”。

  2. 设计页面布局：

    • 在 index.html 中，我们可以使用 Dreamweaver 的“实时视图”或“代码视图”来编写代码。
    • 一个典型的网站结构如下：
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站首页</title>
    <!-- 在这里链接你的 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>欢迎来到我的网站</h2>
        <p>这里是网站的主要内容区域，你可以在这里放置任何你想要展示的内容。</p>
    </main>
    <footer>
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

  3. 添加 CSS 样式：

    • 在“文件”面板中，右键点击站点，新建一个文件夹，命名为 css。
    • 在 css 文件夹中，新建一个 CSS 文件，命名为 style.css。
    • 在 index.html 的 <head> 部分添加了 <link rel="stylesheet" href="css/style.css">。
    • 打开 style.css 文件，为你的 HTML 元素添加样式,使其看起来更美观。

  4. 创建其他页面（基于模板）：

    • 在“文件”面板中，右键点击 index.html。
    • 选择 设计 -> 复制，你会得到一个名为 index_copy.html 的文件。
    • 将其重命名为 about.html。
    • 打开 about.html，修改 <main> 标签里的内容为关于你的信息,导航栏等其他部分保持不变。
    • 用同样的方法创建 contact.html 等页面。

你的本地网站模板和基本页面结构就完成了。

dreamweaver发布网站模板
（图片来源网络，侵删）

第三步：设置远程服务器（FTP）

这是连接你的本地电脑和网络服务器的桥梁。

  1. 在 Dreamweaver 中,打开你之前创建的站点。
  2. 在“文件”面板的顶部，点击 站点 -> 管理站点。
  3. 在弹出的窗口中，选择你的站点，然后点击 编辑。
  4. 切换到 服务器 选项卡。
  5. 点击左下角的 号,添加一个新服务器。
  6. 填写服务器信息：
    • 选项卡：基本
      • 服务器名称：给你的服务器起个名字，"My Production Server"。
      • 连接方法：选择 FTP。
      • FTP 地址：输入你从主机提供商那里获取的 FTP 主机地址。
      • FTP 路径：输入你的根目录路径，/public_html 或 。这是最容易出错的地方，请务必确认！
      • 登录信息：输入你的 FTP 用户名和密码。
      • 高级选项：可以保持默认，但建议勾选 “使用被动 FTP”,这在某些网络环境下是必需的。
    • 选项卡：高级
      • Web URL：在这里输入你的网站域名，http://www.yourdomain.com，这非常重要，因为它能让 Dreamweaver 在预览时生成正确的链接。
  7. 点击 测试 按钮，如果连接成功，会显示“已成功连接到服务器”。
  8. 点击 保存,然后关闭所有窗口。

第四步：发布你的网站

激动人心的时刻到了！

  1. 检查本地文件：确保所有需要上传的文件（index.html, about.html, css/style.css, 以及图片等）都在你的本地站点文件夹中，并且链接路径正确（相对路径）。

  2. 上传文件：

    • 在 Dreamweaver 的“文件”面板中,确保你选择了你的站点。
    • 你会看到两个视图：本地站点 和 远程服务器，点击 远程服务器 标签，然后点击“连接”按钮（看起来像一个插头），Dreamweaver 会开始连接你的 FTP 服务器。
    • 连接成功后，远程服务器 窗格会显示你服务器上的文件（通常是空的，或者只有一些默认文件）。
    • 选择所有本地文件：在 本地站点 窗格中，按 Ctrl + A (Windows) 或 Cmd + A (Mac) 选择所有文件和文件夹。
    • 上传：将选中的文件拖拽到 远程服务器 窗格中，或者右键点击选中的文件，选择 上传。

  3. 等待上传完成：

    • Dreamweaver 会开始逐个上传文件，你可以通过右下角的“传输”面板查看上传进度。
    • 上传完成后,你的网站就已经正式发布到互联网上了！

  4. 验证网站：

    • 在浏览器中输入你的域名（www.yourdomain.com）。
    • 如果一切顺利，你应该能看到你的 index.html 页面。
    • 点击导航栏中的“关于我们”，检查是否能正确跳转到 about.html 页面。
    • 检查图片和 CSS 样式是否都正确加载。

第五步：更新和维护网站

网站发布后不是一劳永逸的。

  • 更新本地文件：当你需要修改网站内容时，直接在 Dreamweaver 中编辑你的本地文件。
  • 同步/上传修改：
    • 简单方法：修改后，再次选择所有文件，点击“上传”按钮，Dreamweaver 会提示你哪些文件已更改,并只上传这些文件。
    • 高级方法：在“文件”面板中，点击 同步 按钮，这会非常有用，它可以：
      • 从本地到远程：将本地所有修改过的文件上传到服务器。
      • 从远程到本地：将服务器上更新过的文件下载到本地（如果你的团队在协作，这个功能很有用）。
      • 两者之间：双向同步,智能地决定哪些文件需要更新。

补充：使用 Dreamweaver 的“模板”功能 (可选)

如果你想让网站维护更自动化，可以尝试使用 Dreamweaver 的 .dwt 模板功能。

  1. 创建模板文件：

    • 在“文件”面板中，新建一个文件，选择 模板页 -> HTML 模板，保存为 templates/site_template.dwt。
    • 在这个 site_template.dwt 文件中，设计你的网站布局（和前面的 index.html 类似）。
    • 选中你想要让用户修改的区域（<main> 标签内的内容），然后在顶部菜单栏选择 插入 -> 模板对象 -> 可编辑区域，给这个区域起个名字，"ContentArea"。
    • 其他部分（如 <header>, <footer>, <nav>）都是锁定的。

  2. 基于模板创建页面：

    • 右键点击 site_template.dwt，选择 在模板中新建。
    • Dreamweaver 会创建一个新页面,并自动应用模板。
    • 你只能在 "ContentArea" 这个可编辑区域内修改内容，其他区域是灰色的,无法编辑。

  3. 更新模板：

    • 当你需要修改网站的通用布局（比如修改页脚的版权信息）时，直接打开 site_template.dwt 文件进行修改。
    • 保存时，Dreamweaver 会弹出一个窗口，询问你是否更新所有基于此模板的页面，选择“是”，所有页面都会自动更新！这大大提高了维护效率。
步骤 关键操作 目的
准备 创建本地站点，获取 FTP 信息 建立开发环境和网络连接
设计 创建 index.html 和 CSS 文件，构建页面结构 设计网站的“模板”和外观
配置 在 Dreamweaver 中设置 FTP 服务器信息 告诉 Dreamweaver 如何连接到你的网站空间
发布 连接服务器，上传所有本地文件 将网站文件从你的电脑传输到互联网上
维护 修改本地文件，然后同步或上传更新 保持网站内容的新鲜和功能的完善

希望这份详细的指南能帮助你成功使用 Dreamweaver 发布你的网站！祝你成功！