Adobe Dreamweaver 完整教程：从零开始到网页制作
Dreamweaver 是一款功能强大的网页设计和开发工具，它集成了可视化编辑和代码编辑两种模式，让你既能像在 Word 里一样拖拽元素，又能直接编写和修改 HTML、CSS、JavaScript 等代码,是网页开发者的得力助手。
第一部分：入门基础
什么是 Dreamweaver？
Dreamweaver 是一个用来创建和编辑网站的软件,它的核心优势在于：
- 所见即所得: 你可以在设计视图中直接看到网页效果,无需频繁刷新浏览器。
- 代码提示与高亮: 提供强大的代码编辑器，支持 HTML、CSS、JavaScript 等多种语言的代码提示、自动补全和语法高亮,提高编码效率。
- 文件管理: 内置的文件管理器可以方便地管理你网站的所有文件和文件夹。
- 多设备预览: 可以同时预览你的网页在不同设备（桌面、平板、手机）上的显示效果。
界面初识
打开 Dreamweaver,你会看到以下主要区域：
- 菜单栏: 包含所有命令，如文件、编辑、查看、插入、修改等。
- 工具栏: 包含一些常用操作的快捷按钮，如新建、打开、保存、在代码/设计/实时视图间切换等。
- 文档窗口: 这是你的“画布”，显示你正在编辑的网页，它有三种视图模式：
- 代码视图: 纯代码编辑界面。
- 设计视图: 可视化编辑界面（新版已弱化，更多依赖实时视图）。
- 实时视图: 最推荐的视图，它能在不打开浏览器的情况下，实时渲染并显示你的网页效果,同时可以检查元素。
- 属性检查器: 位于右下角，当选中页面上的某个元素（如图片、文本框）时，它会显示该元素的属性（如宽高、源文件、链接等）,并允许你直接修改。
- 文件面板: 位于右侧，是你的网站“资源管理器”,用于管理所有网站文件和文件夹。
- 插入面板: 位于右侧，提供了插入各种常用元素（如图片、表格、链接、媒体等）的按钮。
第二部分：创建和管理你的第一个网站
在开始制作网页之前，最重要的一步是定义一个站点，这能确保 Dreamweaver 正确管理你的所有文件和链接。
步骤 1：定义本地站点
- 打开 Dreamweaver，点击菜单栏的 站点 > 新建站点。
- 在弹出的窗口中，你可以选择 “基本”（向导式）或 “高级”（手动设置），这里我们选择 “基本”。
- 为您的站点命名: 给你的网站起个名字，如“我的第一个网站”，这个名字只是在你 Dreamweaver 内部显示用的。
- 编辑本地文件所在的文件夹: 点击文件夹图标，选择一个你电脑上的空文件夹，用来存放网站的所有文件，在桌面创建一个名为
MyWebsite的文件夹。 - 点击 “完成”。
你的站点就创建成功了，在右侧的 “文件” 面板中,你应该能看到你刚刚创建的文件夹。
第三部分：制作你的第一个网页
步骤 1：创建 HTML 页面
- 在 “文件” 面板中，右键点击你的站点根目录（
MyWebsite文件夹）。 - 选择 “新建文件”。
- 将这个新文件命名为
index.html。注意： 网站首页通常都命名为index.html或index.htm。
步骤 2：理解 HTML 和 CSS 的关系
- HTML (超文本标记语言): 是网页的骨架，它负责定义网页的结构和内容，比如哪里是标题 (
<h1>)，哪里是段落 (<p>)，哪里是图片 (<img>)。 - CSS (层叠样式表): 是网页的服装和化妆，它负责定义网页的样式和外观，比如文字颜色、字体大小、背景颜色、元素位置等。
Dreamweaver 可以同时帮助你编辑这两者。
步骤 3：使用 Dreamweaver 编辑网页
双击打开 index.html 文件，我们进入 “实时视图”。
可视化编辑（适合新手）
- 在光标处直接输入“欢迎来到我的网站！”。
- 样式： 选中你刚刚输入的文字，然后在左侧的 “CSS 设计器” 面板（如果没看到，可以在窗口菜单中打开）或 “属性检查器” 中，将其设置为标题 1 (
<h1>),你会看到文字变大变粗了。 - 插入图片：
- 准备一张图片（
me.jpg），并将其放入你站点的MyWebsite文件夹中。 - 将光标放在标题下方。
- 点击菜单栏的 “插入 > 图像”，或使用右侧 “插入” 面板的图像按钮。
- 选择你刚才放入的
me.jpg图片。 - 在 “属性检查器” 中,你可以调整图片的宽度和高度。
- 准备一张图片（
- 插入段落： 按回车换行,输入一些自我介绍的文字。
- 创建链接：
- 选中一段文字（点击这里访问我的GitHub”）。
- 在 “属性检查器” 的 “链接” 文本框中，输入一个网址，如
https://github.com。 - 保存文件（
Ctrl + S）。
代码编辑（核心技能）
切换到 “代码视图”，你会看到 Dreamweaver 自动为你生成了代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">无标题文档</title> </head> <body> <h1>欢迎来到我的网站！</h1> <img src="me.jpg" width="200" alt="我的照片"> <p>这里是自我介绍的文字...</p> <p><a href="https://github.com">点击这里访问我的GitHub</a></p> </body> </html>
<h1>到</h1>: 这是标题标签。<img ... />: 这是图片标签。src属性指定图片路径，width设置宽度，alt是图片的替代文本。<p>到</p>: 这是段落标签。<a>到</a>: 这是链接标签。href属性指定链接地址。
尝试修改代码： 比如将 <h1> 中的文字改成你自己的名字，保存后切换回“实时视图”,你会发现页面内容实时更新了！
第四部分：使用 CSS 美化网页
现在让我们用 CSS 来美化一下页面。
方法 1：使用“CSS 设计器”面板（推荐）
- 确保你仍在
index.html的编辑界面。 - 打开右侧的 “CSS 设计器” 面板。
- 创建新 CSS 规则：
- 点击 “源” 下面的 号，选择 “创建新的 CSS 文件”。
- 给文件起个名字，如
style.css，然后点击 “创建”。 - Dreamweaver 会自动将这个新创建的 CSS 文件链接到你的
index.html文件中（在<head>部分添加了<link>标签）。
- 应用样式：
- 在 “选择器” 区域点击 号，选择 “类选择器”，输入一个名字，如
.my-title。 - 在下面的 “属性” 区域，你可以设置样式。
- 在 “文本” 分类下，点击 颜色 旁边的方块,选择一个你喜欢的颜色。
- 在 “文本” 分类下，找到 字体,选择一个字体。
- 回到你的页面（实时或代码视图），选中
<h1>标签，在 “属性检查器” 的 “类” 下拉菜单中选择你刚刚创建的my-title的颜色和字体是不是变了？
- 在 “选择器” 区域点击 号，选择 “类选择器”，输入一个名字，如
方法 2：直接在代码中编写 CSS
你也可以直接在代码视图中写 CSS，最常见的方式是 内部样式表，即在 当你掌握了以上基础后,可以探索以下功能： 祝你学习愉快，早日用 Dreamweaver 制作出属于自己的精彩网站！<head> 标签里加入 <style>
<head>
<meta charset="UTF-8">我的网站</title>
<style>
body {
background-color: #f0f0f0; /* 设置页面背景色 */
font-family: "Microsoft YaHei", sans-serif; /* 设置默认字体 */
}
h1 {
color: blue; /* 标题颜色为蓝色 */
text-align: center; /* 标题居中 */
}
p {
line-height: 1.6; /* 段落行高 */
}
</style>
</head>
第五部分：进阶技巧与资源
<div> 是一个块级容器，是现代网页布局的核心，通常结合 CSS 来使用，用于划分页面的不同区域（如页头、页脚、侧边栏）。
第六部分：学习资源推荐
总结与建议
