第一部分：Dreamweaver MX 2004 简介
什么是 Dreamweaver MX 2004？
Dreamweaver 是由 Macromedia 公司（后被 Adobe 收购）开发的一款“所见即所得”（WYSIWYG, What You See Is What You Get）的网页编辑器,它最大的特点是：
（图片来源网络，侵删）
- 可视化编辑： 你可以直接在页面上拖拽元素、设置样式，而无需编写大量代码,对于初学者非常友好。
- 代码视图： 它也提供了强大的代码编辑器，支持 HTML、CSS、JavaScript、PHP、ASP 等多种语言的语法高亮和代码提示。
- 设计视图： 这是它的核心，让你能像在 Word 里排版一样来设计网页。
- 文件管理： 内置了 FTP 功能,可以方便地上传和管理网站文件。
为什么现在还有人提它？
虽然现在有更现代的工具（如 VS Code, Sublime Text, Adobe Dreamweaver CC），但 Dreamweaver MX 2004 的教学意义在于：
- 基础扎实： 它不依赖复杂的框架和自动化工具，能让你清晰地理解 HTML 的骨架、CSS 的样式是如何作用到页面上的。
- 概念经典： 网站根目录、本地/远程站点、相对路径、绝对路径等核心概念，在 MX 2004 中体现得非常直观。
第二部分：安装与初始设置
安装软件
由于软件老旧，你可能需要寻找旧版本的安装包,请确保从可信赖的来源下载。
- 系统要求： Windows XP / 7 (32位) 或 Mac OS X。
- 注意： 在现代 Windows 10/11 系统上，建议使用虚拟机（如 VirtualBox）来运行 Windows XP 或 Windows 7,以获得最佳兼容性。
定义站点
这是使用 Dreamweaver 的最关键一步！ 定义站点可以让你管理网站的所有文件,并在本地和服务器之间同步。
- 打开 Dreamweaver MX 2004。
- 点击菜单栏的
站点->管理站点。 - 在弹出的窗口中，点击
新建->站点。 - 站点名称： 给你的网站起一个名字，我的第一个网站”。
- 本地根文件夹： 点击文件夹图标，选择你电脑上一个用来存放网站所有文件的空文件夹。
D:\MyWebsite，这个文件夹就是你的“网站根目录”。 - HTTP 地址 (可选)： 如果你有域名，可以在这里填写，方便 Dreamweaver 生成正确的链接。
- 点击
确定，完成。
完成这一步后，你的 Dreamweaver 就知道它要管理哪个网站了。
（图片来源网络，侵删）
第三部分：界面初识
打开一个新文件后，你会看到 Dreamweaver 的主界面,主要由以下几个部分组成：
- 菜单栏： 包含所有命令。
- 工具栏： 包含常用的新建、打开、保存、预览等按钮。
- 文档窗口： 这是你的“画布”，用于设计和编辑网页，它有三种视图模式：
- 设计视图： 可视化编辑界面。
- 代码视图： 显示和编辑 HTML/CSS 代码。
- 拆分视图： 强烈推荐初学者使用！ 上半部分是代码，下半部分是设计,可以实时看到代码和效果的对应关系。
- 属性检查器： 位于界面下方，当选中页面上的某个元素（如文字、图片）时，这里会显示该元素的所有属性（如字体、大小、颜色、链接等）,并允许你直接修改。
- 面板组： 位于右侧，包含
文件、插入、CSS 样式等面板。
第四部分：实战演练 - 创建你的第一个网页
我们将创建一个包含标题、段落、图片和链接的简单网页。
步骤 1：创建和保存 HTML 文件
- 点击菜单栏
文件->新建。 - 在弹出的窗口中，选择
基本页，然后在右侧选择HTML。 - 点击
创建，一个新的空白 HTML 文档就打开了。 - 立即保存它！点击
文件->保存，由于你之前已经定义了站点，它会默认保存到你设定的“本地根文件夹”中，将文件命名为index.html。index.html是网站首页的标准文件名。
步骤 2：编辑页面标题
会显示在浏览器窗口的标题栏，对 SEO 和用户体验很重要。
- 在文档窗口的顶部，找到 输入框。
- 输入“我的个人主页”,然后按回车。
步骤 3：添加页面内容
- 切换到
拆分视图,这样你可以一边操作一边学习代码。 - 在
设计视图区域的光标处，输入“欢迎来到我的个人网站！”。 - 选中你刚输入的文字，然后在底部的
属性检查器中：- 在
格式下拉菜单中选择标题 1，你会看到文字变大变粗了，同时代码视图中的<h1>标签也出现了。
- 在
- 按回车换行,输入一段自我介绍的文字。
- 选中这段文字，在
属性检查器中：- 在
字体下拉菜单中选择一种字体（如“默认 - 字体组合”）。 - 在
大小中选择12。 - 点击
格式按钮旁边的B(加粗) 和I(斜体) 按钮。 - 在
文本颜色框中选择一种你喜欢的颜色。
- 在
步骤 4：插入图片
- 准备一张图片（
photo.jpg），并将其复制到你之前创建的网站根文件夹（D:\MyWebsite）中。 - 在 Dreamweaver 的
文件面板中，你会看到index.html和photo.jpg都在里面。 - 将光标放在要插入图片的位置。
- 在右侧的
插入面板中，确保选择了常用类别，然后点击图像图标（一个方框加山脉）。 - 在弹出的窗口中选择
photo.jpg，点击确定。 - 选中插入的图片，在
属性检查器中：宽和高：可以调整图片大小。建议： 先勾选宽高比锁，然后只修改宽度或高度之一,另一个会自动按比例调整。源文件：显示图片的路径，这里应该是photo.jpg。替代：非常重要！ 在这里输入图片的描述，如“我的照片”，当图片无法显示时，这段文字会显示出来,也有利于搜索引擎理解图片内容。
步骤 5：创建超链接
- 选中你想要添加链接的文字，点击这里访问我的博客”。
- 在
属性检查器的链接输入框中，输入一个网址，https://www.google.com。 - 在
目标下拉菜单中：_blank：最常用。 点击链接后，会在一个新窗口中打开目标网页。_self：在当前窗口打开（默认行为）。
- 选中“点击这里访问我的博客”这几个字，你会发现它们下面出现了下划线,表示链接已创建。
步骤 6：预览网页
- 按下快捷键
F12。 - Dreamweaver 会自动调用你系统默认的浏览器来打开
index.html文件。 - 检查一下效果：标题是否正确？文字样式是否生效？图片是否显示？链接是否能点击并跳转到新窗口？
第五部分：使用 CSS 进行美化
MX 2004 对 CSS 的支持已经很不错了,我们用一个简单的例子来体验。
（图片来源网络，侵删）
步骤 1：创建一个 CSS 文件
1
