引言：什么是 Dreamweaver MX？

我们需要明确一点：Dreamweaver MX 是一个非常古老的版本，发布于2002年，虽然它在当时是一款革命性的网页设计软件，但网页技术（如HTML、CSS、JavaScript）和开发理念（如响应式设计、框架化开发）已经发生了翻天覆地的变化。

Dreamweaver MX教程
（图片来源网络，侵删）

这份教程的目标主要有两个：

  1. 怀旧与学习基础：如果你对网页开发的早期历史感兴趣，或者想了解网页制作的基本原理，学习 Dreamweaver MX 是一个很好的起点，它能让你在不依赖复杂框架的情况下，理解网页的骨架。
  2. 理解现代工具的演进：通过了解老工具的逻辑，你能更好地理解为什么现代工具（如 VS Code, Sublime Text, Adobe Dreamweaver CC）会采用它们现在的工作方式。

第一部分：准备工作与界面概览

在开始之前,请确保你已经安装了 Dreamweaver MX，由于年代久远，你可能需要寻找旧版本安装包，并在较新的操作系统（如 Windows 10/11 或 macOS）上使用兼容模式运行。

启动与欢迎界面

启动 Dreamweaver MX 后，你会看到一个欢迎界面，这里可以快速创建新文件、打开最近的项目或访问教程。

工作区界面详解

Dreamweaver MX 的工作区布局是后续所有操作的基础，请花点时间熟悉它，主要包含以下几个部分：

Dreamweaver MX教程
（图片来源网络，侵删）
  • 菜单栏：位于顶部，包含所有命令，如 文件、编辑、查看、插入、修改、文本、站点、窗口、帮助。
  • 工具栏：通常在菜单栏下方，提供常用操作的快捷按钮，如新建、打开、保存、在浏览器中预览等。
  • 文档窗口：中间最大的区域，是你设计和编写网页代码的地方，你可以在这里看到网页的最终效果。
  • 属性检查器：通常位于界面右下角，当你选中页面上的某个元素（如文字、图片、表格）时，这里会显示该元素的所有属性（如字体大小、颜色、链接、源文件等），并允许你直接修改。
  • 面板组：分布在界面的右侧和左侧，这些面板可以折叠和展开，用于管理站点、资源、行为等，最重要的面板包括：
    • 文件：管理你网站的所有文件和文件夹。
    • 插入：提供快速插入各种网页元素（图片、表格、链接、表单等）的按钮。
    • CSS 样式：创建和管理层叠样式表（如果安装了更新）。
    • 标签选择器：显示当前光标所在位置的 HTML 标签（如 <body>, <p>, <table>），方便你快速定位和选择。

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

在 Dreamweaver MX 中，强烈建议先定义站点，再开始制作网页，这能确保所有链接、图片路径都正确无误。

步骤 1：定义一个新站点

  1. 点击菜单栏 站点 -> 新建站点...。
  2. 在弹出的对话框中,切换到 高级 选项卡（这是 MX 版本的标准做法）。
  3. 本地根文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为你网站的根目录。D:\MyWebsite。这是最重要的一步！
  4. 默认图像文件夹：可以指定一个存放图片的子文件夹，如 images，Dreamweaver 会自动将你插入的图片保存到这个文件夹。
  5. HTTP 地址：可以填入你未来网站的域名（如果有的话），这有助于 Dreamweaver 在测试时生成正确的绝对路径。
  6. 点击 确定，你的“站点”就定义好了。

步骤 2：创建第一个网页

  1. 在右侧的 文件 面板中，右键点击你的站点根文件夹。
  2. 选择 新建文件，并将其重命名为 index.html。index.html 是网站首页的默认文件名。
  3. 双击 index.html 在文档窗口中打开它。

第三部分：核心功能实战

我们开始在 index.html 中添加内容。

添加文本

  • 直接在文档窗口中输入文字,就像在 Word 中一样。
  • 格式化文本：选中文字，在 属性检查器 中设置：
    • 格式：将文本设置为“段落”、“标题1”、“标题2”等，这对 SEO（搜索引擎优化）很重要。
    • 字体、大小、颜色：设置文本的外观。
    • 粗体、斜体、下划线：常用文本样式。

插入图像

  1. 将你想要的图片（logo.png）复制到你在站点定义中设置的 images 文件夹里。
  2. 将光标放在你想插入图片的位置。
  3. 点击右侧 插入 面板中的 图像 按钮（一个像风景画的图标）。
  4. 在弹出的对话框中,选择 images 文件夹里的 logo.png。
  5. 属性检查器 会立即显示图片的属性：
    • 源文件：显示图片的路径，这里应该是 images/logo.png（相对路径）。
    • 宽 和 高：可以调整图片尺寸。注意：直接拉伸图片会导致变形，最好在图片编辑软件中调整好尺寸再导入。
    • 垂直边距 和 水平边距：给图片周围添加空白。
    • 边框：给图片添加边框，输入像素值。
    • 替代：非常重要！这是图片的“描述性文本”，当图片无法显示时，这里的内容会显示出来，也有利于搜索引擎理解图片内容。

创建超链接

  1. 选中你想要变成链接的文字或图片。
  2. 在 属性检查器 的 链接 文本框中输入目标地址。
    • 外部链接：输入完整的网址，如 https://www.google.com。
    • 内部链接：输入网站内其他文件的路径，如 about.html。
    • 锚点链接：链接到页面的特定位置，先要在目标位置创建一个“命名锚记”（插入 -> 命名锚记），然后链接的地址就是 #锚点名。
  3. 目标：指定链接在哪个窗口打开。
    • _blank：在新窗口中打开（最常用）。
    • _self：在当前窗口打开（默认）。

使用表格进行布局

在 CSS 流行之前，表格是网页布局的主要工具，虽然现在不推荐，但了解它是理解网页历史的重要一环。

  1. 将光标放在你想插入表格的位置。
  2. 点击 插入 -> 表格。
  3. 在弹出的对话框中设置：
    • 行数 和 列数：表格的尺寸。
    • 表格宽度：可以设置为像素值或百分比，百分比意味着表格会随着浏览器窗口大小变化。
    • 边框粗细：设置为 0 可以创建出没有边框的表格，用于布局。
  4. 插入后,你可以直接在表格的单元格中输入文字、插入图片。
  5. 通过 属性检查器 可以调整单元格的属性，如合并单元格、拆分单元格、背景色等。

使用 CSS 样式（MX 2004 版本功能增强）

Dreamweaver MX 本身对 CSS 的支持有限，但如果你安装了 Dreamweaver MX 2004，它的 CSS 功能会强大很多，这里以 MX 2004 为例：

Dreamweaver MX教程
（图片来源网络，侵删）

  1. 新建 CSS 规则：

    • 打开 CSS 样式 面板（窗口 -> CSS 样式）。
    • 点击面板下方的 新建 CSS 规则 按钮。
    • 选择 类，并给它起一个名字，如 .red-text（注意类名前有一个点）。
    • 选择 仅对该文档 或 新建样式表文件，后者更好，因为可以被多个页面复用。
    • 在定义样式的对话框中,你可以设置 类型（字体、颜色、大小）、背景、区块（对齐、间距）、方框（边距、填充、浮动）等。

  2. 应用 CSS 样式：

    • 选中页面上的文本。
    • 在 属性检查器 的 样式 下拉菜单中，选择你刚刚创建的 .red-text。
    • 选中的文本就会立即应用上红色样式。

第四部分：预览、保存与上传

预览网页

  • 按快捷键 F12，这是最常用的方法。
  • Dreamweaver 会调用你系统默认的浏览器来打开 index.html。
  • 强烈建议：同时安装并测试 Internet Explorer 6 和 Netscape Navigator（或 Firefox 的早期版本），因为 MX 时代需要兼容这些浏览器。

保存文件

  • 按快捷键 Ctrl + S，Dreamweaver 会自动处理所有内部链接的相对路径。

上传文件到服务器

  1. 在 文件 面板中，点击工具栏上的 连接到远端服务器 按钮（像地球的图标）。
  2. 如果是第一次连接,系统会提示你进行服务器设置，你需要从你的网站主机提供商那里获取以下信息：
    • 主机 FTP 地址：如 ftp.yourhost.com。
    • 主机目录：通常是 public_html 或 www。
    • 登录：你的 FTP 用户名。
    • 密码：你的 FTP 密码。
  3. 连接成功后,文件 面板会分为左右两栏：左边是你的本地文件，右边是服务器上的文件。
  4. 将左边本地站点中的文件（文件夹）直接拖到右边，即可上传。

第五部分：总结与现代对比

Dreamweaver MX 的优点（在当时）

  • 可视化编辑：所见即所得，降低了网页制作的门槛。
  • 代码提示：MX 版本开始引入基本的代码提示功能，提高了编写 HTML 的效率。
  • 站点管理：强大的站点管理功能，让维护大型网站变得有序。
  • 集成开发环境：集成了代码编辑、文件管理、FTP 上传等功能，一站式解决。

Dreamweaver MX 的局限性（在今天）

  • 代码老旧：生成的 HTML 和 CSS 代码冗长、不规范，不符合现代 Web 标准。
  • 缺乏现代框架支持：对 Bootstrap、Vue、React 等现代前端框架无能为力。
  • 响应式设计支持差：在那个时代，人们大多为固定宽度的屏幕（如 1024x768）设计，无法轻松制作适应手机、平板的响应式网页。
  • 性能问题：在今天的电脑上运行，可能会感觉非常卡顿。

给现代学习者的建议

  • 如果你想学网页开发：请直接学习 HTML5, CSS3, JavaScript，并使用现代代码编辑器，如 Visual Studio Code，它免费、强大、插件丰富，是当前行业的主流选择。
  • 如果你是设计师：现代的 Adobe Dreamweaver CC 已经整合了强大的 Adobe XD 功能，可以让你在设计和代码之间无缝切换，并且支持 CMS（如 WordPress）和预览框架。
  • 如果你只是怀旧：Dreamweaver MX 是一个绝佳的工具，它能让你亲手触摸到网页开发的“石器时代”，从而更加珍惜今天高效、强大的开发工具。

希望这份教程能帮助你顺利上手 Dreamweaver MX！