Dreamweaver 8 是一个发布于 2006 年的经典网页设计和开发工具，虽然现在已经有了功能更强大的现代替代品（如 Adobe Animate, VS Code, Sublime Text 等），但了解 DW8 的工作原理对于学习网页基础历史和其“所见即所得”的设计理念非常有帮助。
下面我将从 核心概念、工作界面、基本操作 和 一个完整的源码示例 四个方面来为你详细解释。
核心概念：网页源码是什么？
在开始之前,我们必须明白，Dreamweaver 8 的核心作用是生成和编辑网页源码，而不是取代它。
一个网页的源码本质上是一个纯文本文件，主要由以下三部分组成：
- HTML (超文本标记语言)：是网页的骨架，它定义了网页的结构和内容，比如哪里是标题 (
<h1>)，哪里是段落 (<p>)，哪里是图片 (<img>)，哪里是链接 (<a>)。 - CSS (层叠样式表)：是网页的服装和化妆，它负责网页的视觉表现，比如文字的颜色、字体、大小，元素的布局（居中、浮动）、间距、背景颜色等。
- JavaScript (JS)：是网页的行为和动作，它负责实现网页的交互功能，比如点击按钮弹出提示框、图片轮播、表单验证等。
对于初学者来说,DW8 的最大优势就是你可以不直接写代码，而是通过它的可视化界面来操作，它会自动帮你生成对应的 HTML 和 CSS 源码。
Dreamweaver 8 的工作界面
打开 DW8，新建一个 HTML 文件后，你会看到一个非常经典的工作区布局，主要由以下几个部分组成：
-
菜单栏：包含了所有命令，如文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助。
-
工具栏：常用功能的快捷按钮，如新建、打开、保存、在浏览器中预览等。
-
文档窗口：这是你工作的主区域，就是你最终看到的网页效果，它有三种视图模式：
（图片来源网络，侵删）- 设计视图：可视化编辑模式，你在这里可以直接拖拽元素、输入文字、设置样式，所见即所得，这是 DW8 最吸引人的地方。
- 代码视图：纯文本编辑模式，在这里你可以直接查看和编辑 HTML、CSS、JavaScript 源码，DW8 的代码视图有语法高亮，能让你更容易阅读代码。
- 拆分视图：设计视图和代码视图上下或左右分屏显示，这是学习网页源码的最佳模式！你在设计视图中做的任何操作，都能立刻在下方的代码视图中看到对应的源码是如何变化的，反之亦然。
-
属性检查器：位于界面下方，当你选中设计视图中的某个元素（比如一段文字或一张图片）时，属性检查器会显示该元素的所有可设置属性（如文字颜色、大小、链接地址等），你在这里修改，源码会实时更新。
-
插入栏：位于界面右侧，包含了各种常用元素的按钮，如插入表格、图片、链接、表单等，点击它们就可以在设计视图中插入对应的代码。
使用 DW8 创建网页的基本操作流程
假设我们要创建一个简单的个人介绍页面。
步骤 1：创建新站点 (推荐)
“站点”是 DW8 管理网站所有文件的核心，它能帮你自动管理文件链接，避免路径错误。
- 菜单栏选择
站点->新建站点...。 - 在弹出的对话框中,给你的站点起个名字（如 "MyPersonalSite"）。
- 选择一个本地根文件夹（比如在 D 盘创建一个名为
MyWeb的文件夹，用来存放你所有的网页和图片）。 - 点击“确定”，你的站点就建好了，在右侧的“文件”面板中，你就可以看到这个站点文件夹。
步骤 2：创建并保存 HTML 文件
- 菜单栏选择
文件->新建。 - 在弹出的窗口中,选择“基本页”，然后从右侧的“页面类型”列表中选择
HTML。 - 点击“创建”，一个新的空白 HTML 文件就打开了。
- 按
Ctrl + S保存，将其命名为index.html（网站首页通常都叫这个名字），并保存在你刚才创建的站点文件夹（如D:\MyWeb）中。
步骤 3：在设计视图中编辑内容
- 切换到“拆分视图”，这样你可以实时看到代码变化。
- ：在设计视图中，直接点击页面，输入“欢迎来到我的个人主页”。
- 格式：选中你刚输入的文字，在属性检查器中，将“格式”下拉菜单选择为
标题 1，你会发现代码视图中，这段文字被<h1>和</h1>标签包裹了。 - 插入图片：
- 先准备一张图片（
photo.jpg），把它也放到你的站点文件夹D:\MyWeb里。 - 在右侧“插入”栏中，点击“图像”图标（或菜单
插入->图像）。 - 选择你的
photo.jpg，点击“确定”。 - 在属性检查器中,你可以设置图片的宽度、高度，以及替换文本（当图片无法显示时，会显示这段文字）。
- 先准备一张图片（
- 输入段落：在图片下方输入一段关于你自己的介绍文字，选中文字，在属性检查器中可以设置字体、大小、颜色等。
步骤 4：添加 CSS 样式
有了,但很朴素，我们来用 CSS 美化一下。
- 定义 CSS：
- 在代码视图中,找到
<head>和</head>标签之间。 - 输入以下代码（DW8 的代码视图通常有代码提示功能）：
<style type="text/css"> body { background-color: #f0f0f0; /* 设置页面背景色为浅灰色 */ font-family: "Microsoft YaHei", Arial, sans-serif; /* 设置默认字体 */ margin: 0; /* 去掉页面默认的外边距 */ padding: 20px; } h1 { color: #333333; /* 设置标题颜色为深灰色 */ text-align: center; /* 标题居中 */ } p { line-height: 1.6; /* 设置段落行高 */ } </style>
- 在代码视图中,找到
- 应用样式：
- 回到设计视图,你会发现页面样式已经改变了。
- 你也可以给某个特定元素加一个类,比如给段落文字加一个特殊样式，在
<style>标签里再添加一个：.highlight { color: #0066cc; font-weight: bold; } - 然后在设计视图中选中一个段落,在属性检查器的“类”下拉菜单中选择
highlight，这个段落就会变成蓝色加粗。
步骤 5：预览和发布
- 预览：按
F12键，DW8 会用你系统默认的浏览器打开你的网页，让你查看最终效果。 - 发布：当你的网页和所有相关文件（图片、CSS文件等）都准备好了，只需要把它们全部上传到你的网络服务器（虚拟主机）上即可，DW8 自带了 FTP 功能，可以在“站点”管理器中设置。
完整的网页源码示例
根据上面的操作,index.html 文件在代码视图中最终的源码会是这样子的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">我的个人主页</title>
<!-- 这里是我们添加的CSS样式 -->
<style type="text/css">
body {
background-color: #f0f0f0;
font-family: "Microsoft YaHei", Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333333;
text-align: center;
}
p {
line-height: 1.6;
}
.highlight {
color: #0066cc;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 这里是页面的主体内容 -->
<h1>欢迎来到我的个人主页</h1>
<p>这是我的个人照片。</p>
<p><img src="photo.jpg" alt="我的照片" width="200"></p>
<p>大家好，我叫<strong>张三</strong>，我是一名<strong class="highlight">前端开发爱好者</strong>，喜欢用代码创造美好的网页体验。</p>
<p>感谢您的访问！</p>
</body>
</html>
总结与提醒
- 优点：Dreamweaver 8 是一个优秀的入门工具，它的“所见即所得”和“拆分视图”能极大地降低学习 HTML 和 CSS 的门槛，让你快速建立对网页结构的直观认识。
- 缺点：它生成的代码有时会比较冗余（包含很多 DW8 自己的标签和注释），对于现代复杂的前端项目（如使用 Vue, React 框架）支持不足。
- 现代替代品：如果你现在开始学习网页开发，更推荐使用 Visual Studio Code (VS Code)，它是一个免费、开源、极其强大的代码编辑器，拥有丰富的插件生态，能提供比 DW8 更智能的代码提示、Git 集成等现代化功能。
希望这份详细的指南能帮助你理解如何使用 Dreamweaver 8 来操作网页源码！
