Dreamweaver 8 教程：从入门到精通
Dreamweaver 8 是一款经典的网页设计软件，虽然现在已被 Adobe XD、Figma 等现代工具取代，但它在 WYSIWYG（所见即所得）编辑、代码提示和可视化布局方面，对于学习网页基础和进行快速原型制作,依然有其独特的价值。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 第一部分：准备工作与界面初识
- 第二部分：创建你的第一个网页
- 第三部分：核心功能详解
- 文本与格式
- 插入图像
- 创建超链接
- 表格布局（经典用法）
- CSS 样式基础
- 第四部分：预览、保存与上传
- 第五部分：进阶提示与资源
第一部分：准备工作与界面初识
安装与启动
确保你已经安装了 Dreamweaver 8，安装完成后,双击桌面图标或从开始菜单启动。
界面概览
启动后，你会看到一个熟悉的窗口,主要由以下几个部分组成：
- 菜单栏: 包含所有命令，如
文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助。 - 工具栏: 提供最常用操作的快捷按钮，如
新建、打开、保存、在浏览器中预览等，注意它有多个工具栏，可以通过窗口 > 工具栏来显示/隐藏。 - 文档窗口: 这是你工作的核心区域，也就是你正在编辑的网页本身，它有三种视图模式：
- 设计视图: 可视化编辑界面,所见即所得。
- 代码视图: 纯代码编辑界面。
- 拆分视图: 强烈推荐初学者使用！ 上半部分是代码，下半部分是设计视图，可以让你实时看到代码和效果的对应关系,是学习的最佳方式。
- 属性检查器: 最重要的面板之一！ 当你选中页面上的任何元素（如文字、图片、表格）时，这个面板会显示该元素的属性，并允许你直接修改，选中图片，就可以在这里修改图片源、宽度、高度、边框等。
- 面板组: 位于右侧的面板集合，可以折叠或展开，常用的有：
- 文件: 管理你的网站文件。
- 插入: 提供插入各种元素（表格、图像、链接等）的按钮。
- CSS 样式: 管理和编辑 CSS 样式表。
第二部分：创建你的第一个网页
让我们动手创建一个简单的个人介绍页面。
（图片来源网络，侵删）
步骤 1：定义一个站点
在 Dreamweaver 中工作前，强烈建议先定义一个站点，这能帮你管理所有网页文件和资源（图片等）,并方便后续的预览和上传。
- 点击菜单栏的
站点 > 管理站点。 - 在弹出的窗口中，点击
新建，然后选择站点。 - 在站点定义向导中，给你的站点起一个名字，
我的第一个网站。 - 在“本地根文件夹”中，点击文件夹图标，选择一个你电脑上的空文件夹作为网站存放的根目录。
D:\MyWebSite。 - 点击“确定”保存,现在你的站点就建立好了。
步骤 2：创建新文件
- 在右侧的 文件 面板中,右键点击你的站点名称。
- 选择
新建文件。 - 将新文件重命名为
index.html。index.html是网站首页的标准文件名。
步骤 3：编辑页面内容
- 在 文件 面板中双击
index.html，在 文档窗口 中打开它。 - 将视图模式切换到 拆分视图。
- 在 设计视图 中，点击页面，直接输入文字，
欢迎来到我的个人网站！ - 选中这些文字，在下方的 属性检查器 中，你可以修改：
- 格式: 将其设置为“标题 1”,字体变大加粗。
- 字体: 选择一种字体，如“宋体”。
- 大小: 设置文字大小，如“16px”。
- 按回车键，继续输入一些个人介绍，我叫[你的名字]，这是一个用 Dreamweaver 8 制作的个人主页。”
第三部分：核心功能详解
插入图像
- 准备一张图片（
photo.jpg），并将其放入你定义的站点文件夹D:\MyWebSite下。 - 将光标放在你想要插入图片的位置（个人主页”下方）。
- 点击菜单栏
插入 > 图像，或者直接在 插入 面板中点击“图像”图标。 - 在弹出的窗口中选择你刚才放入的
photo.jpg。 - 选中插入的图片，在 属性检查器 中可以调整图片的宽度和高度（建议等比例缩放，按住
Shift键拖动角点）、替换文本（图片无法显示时出现的文字，对SEO和可访问性很重要）等。
创建超链接
超链接是网页的灵魂。
- 选中你想要做成链接的文字，点击这里访问我的博客”。
- 在 属性检查器 的 链接 输入框中，输入你想要跳转到的网址，
https://www.google.com。 - 你还可以在 目标 下拉菜单中选择
_blank,这样点击链接时会在一个新窗口中打开。 - 同样，你也可以将图片设置为超链接,方法完全一样。
表格布局（经典用法）
在 CSS 盛行之前，表格是网页布局的主要方式，虽然现在不推荐,但了解它有助于理解旧网站的结构。
- 将光标放在你想要插入表格的位置。
- 点击
插入 > 表格。 - 在弹出的窗口中，设置表格的行数、列数、边框粗细等，设置为 3行3列,边框为1。
- 点击“确定”，表格就插入到页面中了，你可以直接在表格的单元格内输入文字或插入图片,通过拖动单元格边线来调整大小。
CSS 样式基础
使用 CSS 可以统一控制网页的样式，让网站更美观、更专业。
（图片来源网络，侵删）
- 创建一个外部 CSS 文件：
- 在 文件 面板中，右键点击站点，选择
新建文件。 - 将文件命名为
style.css。 - 双击打开
style.css，在 代码视图 中输入一些基本样式：body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #0066cc; }
- 在 文件 面板中，右键点击站点，选择
- 链接 CSS 文件到 HTML 页面：
- 切换回
index.html文件，在 代码视图 的<head>和</head>标签之间，输入以下代码：<link href="style.css" rel="stylesheet" type="text/css" />
- 保存所有文件并回到 设计视图，你会看到页面的背景色和标题颜色已经根据 CSS 文件改变了，这就是 CSS 的强大之处！
- 切换回
第四部分：预览、保存与上传
保存文件
完成编辑后，按 Ctrl + S 保存所有修改的文件。
在浏览器中预览
Dreamweaver 提供了非常方便的预览功能。
- 点击工具栏上的 在浏览器中预览 按钮（地球图标）。
- 你可以选择预览的浏览器（如 IE、Firefox），并可以选择“在浏览器中打开”。
- 强烈建议： 经常在不同浏览器（尤其是 IE6/7）中预览，因为不同浏览器对 HTML 和 CSS 的解析可能存在差异（这被称为“浏览器兼容性问题”）。
上传到服务器
当你完成网站制作，想把它放到互联网上时，需要使用 FTP 功能。
- 点击
站点 > 管理站点，选择你的站点，点击“编辑”。 - 在“服务器”选项卡中，点击“+”号添加一个新的服务器。
- 输入你的 FTP 信息：
- FTP 地址: 你的服务器地址。
- 用户名: 你的 FTP 用户名。
- 密码: 你的 FTP 密码。
- 根目录: 你在服务器上存放网站的文件夹路径（通常为
/public_html或/www）。
- 保存设置。
- 在 文件 面板中，点击 连接 按钮,连接到服务器。
- 连接成功后，直接将左侧的本地文件拖拽到右侧的服务器文件夹中,即可上传。
第五部分：进阶提示与资源
重要提示：Dreamweaver 8 的局限性
- 过时的标准： 它对 HTML5 和 CSS3 的支持非常有限,甚至不支持。
- 安全风险： 软件非常古老，可能存在未修复的安全漏洞,不建议连接到真实服务器。
- 现代工作流： 现代网页开发更推崇使用 VS Code、Sublime Text 等代码编辑器,配合浏览器开发者工具进行实时调试。
学习资源
- 官方帮助文档： Dreamweaver 8 自带的帮助文档 (
帮助 > Dreamweaver 帮助) 是最权威的参考资料。 - 在线教程： 在 YouTube 等视频网站搜索 "Dreamweaver 8 tutorial",可以找到大量视频教程。
- 社区论坛： 一些老牌的网页设计论坛（如蓝色理想）可能还有关于 DW8 的讨论帖。
Dreamweaver 8 是一个优秀的入门工具，它通过可视化界面降低了网页制作的门槛，同时又能让你接触到代码，通过本教程，你已经掌握了创建、编辑、美化、预览和上传一个静态网页的全过程。
虽然它已不再是主流，但理解它的操作逻辑，对于学习网页的基本构成（HTML、CSS、FTP）非常有帮助,祝你学习愉快！
