Dreamweaver MX 是一个非常古老的版本，发布于2002-2003年，它运行在 Windows XP 或 Mac OS X 上，界面和功能与现代的 Adobe Dreamweaver CC 有着天壤之别。

dreamweaver mx 教程
（图片来源网络，侵删）

这份教程的目标是：

  1. 帮助初学者理解 Dreamweaver 的核心工作原理（这些原理至今仍然适用）。
  2. 在旧版软件上完成一个完整的静态网站项目。
  3. 为学习现代网页开发打下基础。

第一部分：准备工作与核心概念

什么是 Dreamweaver MX？

Dreamweaver MX 是一个“所见即所得”（What You See Is What You Get, WYSIWYG）的网页编辑器,它最大的特点是：

  • 可视化编辑：你可以像使用 Word 一样，直接在页面上拖拽元素、输入文字，软件会自动生成对应的 HTML 和 CSS 代码。
  • 代码视图：它也提供了一个强大的代码编辑器，让你可以直接编写和修改 HTML、CSS、JavaScript 等代码。
  • 站点管理：可以方便地管理整个网站的所有文件和链接。

为什么学习旧版？

  • 核心原理不变：无论版本如何，制作网页的基本元素（HTML标签、CSS样式）和流程（创建页面 -> 设计 -> 上传服务器）是相同的。
  • 简化学习：旧版界面相对“纯粹”，没有现代版本中大量复杂的功能和云服务,更容易聚焦于基础。
  • 怀旧或特殊需求：可能在维护非常古老的网站项目。

软件获取与安装

  • 获取：由于是旧软件，你可能需要通过一些合法的渠道获取，例如旧软件收藏网站、eBay 等,请确保来源合法。
  • 安装：在 Windows 7/10/11 上可能需要使用“兼容模式”或“虚拟机”来安装和运行,否则可能会出现各种兼容性问题。

核心概念：本地站点

在学习之前，你必须理解“本地站点”这个概念。

  • 定义：本地站点是你在电脑硬盘上创建的一个文件夹，用来存放你网站的所有文件，包括 HTML 页面、图片、CSS 样式表等。
  • 为什么重要？：Dreamweaver 通过管理本地站点来跟踪文件之间的链接，确保当你移动或重命名文件时，所有相关的链接都会自动更新，避免“找不到文件”的错误。

第二部分：创建你的第一个网站

我们将创建一个简单的“个人作品集”网站。

dreamweaver mx 教程
（图片来源网络，侵删）

步骤 1：定义本地站点

  1. 打开 Dreamweaver MX。
  2. 点击菜单栏的 站点 -> 新建站点...。
  3. 在弹出的对话框中，切换到 高级 选项卡（这是 MX 版本的标准做法）。
  4. 站点名称：输入一个有意义的名字，我的个人网站”。
  5. 本地根文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录。D:\MyWebsite。
  6. 默认图像文件夹：你可以在这里指定存放图片的子文件夹，images，Dreamweaver 会自动在根目录下创建这个文件夹。
  7. 点击 确定。

Dreamweaver 的右侧面板会出现一个 “文件” 面板,显示你刚刚创建的站点结构。

步骤 2：创建第一个网页

  1. 在右侧的“文件”面板中,右键点击站点根目录。
  2. 选择 新建文件。
  3. 将新文件命名为 index.html。index.html 是网站的首页,必须使用这个名字。
  4. 再次右键点击，新建一个文件，命名为 about.html（关于我页面）和一个 styles.css 文件（用于存放样式）。

你的文件面板现在应该看起来像这样：

D:\MyWebsite\
├── index.html
├── about.html
├── styles.css
└── images\

第三部分：页面设计与代码编辑

Dreamweaver MX 提供了三种视图模式,这是它最核心的功能。

三种视图模式

  • 设计视图：纯可视化编辑区，所见即所得，你可以直接在这里输入文字、插入图片。
  • 代码视图：纯代码编辑区，显示当前页面的 HTML 和 CSS 代码。
  • 拆分视图：最常用的模式，上半部分是代码，下半部分是设计视图，你在设计视图做的任何改动，代码视图会实时更新；反之亦然,这是学习代码的最佳方式。

建议：始终使用“拆分视图”进行操作。

dreamweaver mx 教程
（图片来源网络，侵删）

页面布局（使用表格）

在 Dreamweaver MX 的时代，网页布局主要使用 表格，虽然现在我们使用 Flexbox 和 Grid，但理解表格布局有助于你阅读旧代码,并且表格在展示数据时依然有用。

  1. 在 index.html 的拆分视图中，光标放在 <body> 标签内。

  2. 点击菜单栏的 插入 -> 表格。

  3. 设置表格属性：

    • 行数: 3
    • 列数: 1
    • 表格宽度: 760 (像素),这是一个经典的网页宽度。
    • 边框粗细: 0 (我们通常用 CSS 来控制样式,所以边框设为0)

  4. 点击 确定，现在你的代码视图中会出现一个 <table> 结构。

  5. 设计视图布局：

    • 第一行（页眉）：点击第一行单元格，输入“我的个人作品集”。
    • 第二行（内容）：点击第二行单元格，输入“欢迎来到我的网站！这里是主要内容。”
    • 第三行（页脚）：点击第三行单元格，输入“© 2025 我的个人网站”。

应用 CSS 样式

现在我们让页面更好看，我们将使用 styles.css 文件。

  1. 链接 CSS 文件：

    • 切换到 index.html 的代码视图。
    • 在 <head> 标签内，输入以下代码：
      <link href="styles.css" rel="stylesheet" type="text/css" />
    • 或者，使用 Dreamweaver 的可视化方式：在代码视图中右键 <head>，选择 快速标签编辑器，输入 <link>,然后根据提示填写。

  2. 编写 CSS：

    • 打开 styles.css 文件。

    • 输入以下 CSS 代码来美化你的表格和文字：

      /* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}
/* 表格样式 */
table {
    width: 760px;
    margin: 20px auto; /* 居中显示 */
    border-collapse: collapse; /* 合并边框 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 单元格样式 */
td {
    padding: 20px;
    text-align: center;
}
/* 页眉样式 */
.header {
    background-color: #333;
    color: white;
    font-size: 24px;
    font-weight: bold;
}
/* 内容样式 */
.content {
    background-color: white;
    min-height: 400px;
}
/* 页脚样式 */
.footer {
    background-color: #333;
    color: white;
    font-size: 14px;
}

  3. 给表格单元格添加类：

    • 回到 index.html 的代码视图。
    • 为三个 <td> 标签添加 class 属性，以对应 CSS 中的样式。
    • 修改后的 <table> 结构如下：
      <table width="760" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="header">我的个人作品集</td>
  </tr>
  <tr>
    <td class="content">欢迎来到我的网站！这里是主要内容。</td>
  </tr>
  <tr>
    <td class="footer">© 2025 我的个人网站</td>
  </tr>
</table>

切换到“设计视图”,你应该能看到一个已经美化过的页面了。

第四部分：创建页面链接

  1. 设计视图操作：

    • 在 index.html 的内容区域，选中“关于我”这几个字。
    • 在属性检查器（窗口底部）的 “链接” 框中，输入 about.html。
    • 你可以设置目标为 _blank（在新窗口打开）或 _self（在当前窗口打开）。

  2. 代码视图验证：

    • 查看代码，你会发现文字被包裹在 <a href="about.html">...</a> 标签中。

第五部分：插入图片

  1. 准备图片：将一张你的照片命名为 me.jpg，并放入 images 文件夹。
  2. 插入图片：
    • 在 index.html 的内容区域，将光标放在“欢迎来到我的网站！”后面。
    • 点击菜单栏的 插入 -> 图像。
    • 选择 images/me.jpg。
    • 在属性检查器中，你可以调整图片的宽度和高度，并设置“替代文本”（这对SEO和无障碍访问很重要）。

第六部分：预览与上传

预览页面

  • 按 F12 键，这是 Dreamweaver 的快捷键,会用默认浏览器打开你正在编辑的页面。
  • 检查链接是否有效，图片是否显示正常,样式是否正确。

上传网站

在 MX 版本中，这通常通过 FTP（文件传输协议）完成。

  1. 在“文件”面板中,右键点击你的站点根目录。
  2. 选择 上传 -> 整个站点。
  3. 如果这是第一次，Dreamweaver 会提示你设置远程服务器信息，你需要从你的网站托管服务商那里获取 FTP 地址、用户名和密码。
  4. 上传成功后,你的网站就在线上了！

第三部分：从 Dreamweaver MX 到现代网页开发

学习完 Dreamweaver MX，你会发现它是一个很好的“拐杖”，但如果你想成为一名专业的现代网页开发者,你需要：

  1. 告别“所见即所得”：

    • 转向纯代码编辑器：强烈推荐 Visual Studio Code (VS Code)，它免费、强大、插件丰富。
    • 学习 HTML5 和 CSS3：现代网页使用语义化标签（如 <header>, <nav>, <main>, <footer>）和 Flexbox/Grid 布局,而不是表格。
    • 学习响应式设计：让你的网站在手机、平板、电脑上都能完美显示。

  2. 告别手动上传：

    • 使用 Git 和 GitHub/GitLab：这是现代软件开发的版本控制标准，可以让你管理代码历史、协作开发。
    • 使用构建工具：如 Vite、Webpack，它们可以帮你自动处理代码、优化资源,大大提高开发效率。

Dreamweaver MX 教程的核心在于让你理解：

  • 网站 = 文件夹 + 文件。
  • HTML 是骨架，CSS 是皮肤。
  • Dreamweaver 是一个辅助工具，帮你管理文件和可视化地编写代码。

虽然它已经过时，但通过它学习网页的“三件套”（HTML, CSS, JavaScript）和基本工作流程，是非常有效的入门方式，当你掌握了基础后，再转向更现代、更高效的开发工具和流程,你的成长之路会更加顺畅。