Adobe Dreamweaver 完整教程：从入门到精通
Dreamweaver 是一款功能强大的网页设计和开发工具，它集成了可视化编辑器和强大的代码编辑器，能够满足从初学者到专业开发者的各种需求,本教程将带你一步步掌握它。
第一部分：入门基础
什么是 Dreamweaver？
Dreamweaver 是 Adobe 公司出品的一款“所见即所得”（WYSIWYG）的网页编辑器,它的核心优势在于：
- 可视化设计： 你可以像使用 Word 或 PowerPoint 一样，通过拖拽元素来布局网页,无需编写代码即可看到效果。
- 强大的代码编辑： 它内置了业界顶级的代码编辑器，支持 HTML, CSS, JavaScript 以及各种服务器端语言（如 PHP, ASP），提供代码提示、高亮、格式化等功能。
- 工作流集成： 无缝集成 Adobe Creative Cloud（Photoshop, Illustrator, XD 等）,方便素材的导入和管理。
- 响应式设计支持： 内置“实时视图”和“媒体查询”，让你轻松设计和预览适配不同设备（桌面、平板、手机）的网页。
安装与启动
- 确保你的电脑满足 Adobe Creative Cloud 的系统要求。
- 从 Adobe 官网下载并安装 Adobe Creative Cloud 应用。
- 登录你的 Adobe ID，在 Creative Cloud 中找到 Dreamweaver 并安装。
- 安装完成后，启动 Dreamweaver。
界面初探
启动 Dreamweaver 后，你会看到一个现代化的界面,让我们来认识一下几个关键区域：
- 菜单栏: 包含所有命令，如文件、编辑、插入、修改、站点等。
- 工具栏: 提供常用操作的快捷按钮，如代码/设计视图切换、实时视图、预览等。
- 文档窗口: 这是你编辑和设计网页的主区域。
- 面板组: 位于右侧，是 Dreamweaver 的核心功能区，主要包括：
- 文件: 管理你网站的所有文件和文件夹。
- 插入: 快速插入各种网页元素（图片、链接、表格、媒体等）。
- CSS 设计器: 创建和管理 CSS 样式,是现代网页设计的核心。
- 属性检查器: 位于底部，显示当前选中元素的属性（如图片的宽高、链接地址等）,并允许你直接修改。
- 代码视图: 显示当前文档的源代码，并提供语法高亮、代码提示等功能。
第二部分：核心工作流程——创建你的第一个网站
这是使用 Dreamweaver 的标准流程,也是最重要的部分。
步骤 1：定义站点
“定义站点”是 Dreamweaver 的灵魂！ 在开始任何工作之前，你必须告诉 Dreamweaver 你的网站项目存放的位置，这能确保所有链接、图片路径都正确无误。
- 点击菜单栏的
站点->新建站点。 - 在弹出的窗口中，你可以选择
基本（向导式）或高级（专业设置），对于新手，基本模式更友好。 - 基本模式设置：
- 站点名称: 给你的网站起个名字（如“我的第一个网站”），这只是在 Dreamweaver 内部使用的。
- 本地站点文件夹: 点击文件夹图标，选择一个空文件夹作为你网站的根目录。这是最重要的一步！
D:\MyWebsite。
- 点击“完成”，在右侧的
文件面板中,你应该能看到你刚刚创建的本地站点文件夹。
步骤 2：创建主页
网站的主页通常命名为 index.html。
- 在右侧
文件面板中,右键点击你的站点根目录。 - 选择
新建文件。 - 将新文件重命名为
index.html。
步骤 3：编辑主页内容
现在你可以开始编辑 index.html 了，Dreamweaver 提供了三种视图模式：
- 代码视图: 显示纯 HTML/CSS/JS 代码,适合高级开发者进行精细控制。
- 实时视图: 一个基于 WebKit 的浏览器预览，让你看到网页在真实浏览器中的样子,同时可以点击和交互。
- 设计视图: 一个古老的“所见即所得”视图，功能相对有限，现代开发中已不常用。
推荐使用 实时视图 和 代码视图 结合的方式。
使用可视化工具添加内容：
- 确保
index.html在文档窗口中打开。 - 将视图切换到
实时视图。 - 将光标放在文档中，点击菜单栏的
插入->图像，选择一张图片,它会自动插入。 - 在底部的
属性检查器中，你可以修改图片的宽高、替换文本等。 - 输入一些文字，然后选中文字，在
属性检查器中设置标题、字体、颜色等。
使用 CSS 设计器美化网页：
- 打开右侧的
CSS 设计器面板。 - 在
源选项卡下，点击 号，选择创建新的 CSS 文件。 - 给文件命名，如
style.css，并确保它被链接到你的index.html。 - 在
选择器中，你可以选择一个 HTML 元素（如h1），或者点击选择器旁边的目标规则图标,然后用鼠标在实时视图中点击你想要美化的元素。 - 在下方的
属性区域，你可以设置颜色、背景、边距、盒模型等，所有修改都会实时写入style.css文件中。
第三部分：核心功能详解
表格
表格曾是网页布局的主力，现在主要用于展示结构化数据（如课程表、成绩单）。
- 插入表格:
插入->表格。 - 编辑表格: 选中表格后，在
属性检查器中可以调整行数、列数、边框、间距等,你也可以直接在单元格中输入内容。
超链接
超链接是网页的基石。
- 选中一段文字或一张图片。
- 在
属性检查器的链接框中，输入目标地址。- 外部链接:
https://www.google.com - 内部链接: 如果你的网站有
about.html页面，直接输入about.html。定义站点后，Dreamweaver 会自动处理路径。 - 锚点链接: 链接到页面内的某个特定位置，先在目标位置插入“命名锚记”（
插入->命名锚记），然后链接时输入#锚记名称。
- 外部链接:
模板
模板可以让你创建一个统一的页面布局，然后基于它生成多个页面，当修改模板时，所有基于该模板的页面都会自动更新,极大地提高了效率。
- 创建一个布局完美的页面（如
template.dwt）。 - 在页面中定义可编辑区域：选中某个区域（如文章内容区），右键选择
模板->新建可编辑区域。 - 保存为模板文件。
- 通过
文件->新建->从模板新建来创建基于模板的页面。
行为
行为是 Dreamweaver 的一个老功能，通过 JavaScript 实现简单的交互效果，如弹出窗口、显示/隐藏元素等，在现代开发中，这些效果通常用 jQuery 或原生 JS 实现,但了解它有助于理解网页交互的基本原理。
第四部分：现代网页开发
是 Dreamweaver 在当今前端开发中的核心价值。
响应式设计
Dreamweaver 内置了强大的响应式设计工具。
- 使用“流体网格布局”: 在新建文件时，可以选择“流体网格布局”，它会帮你创建一个基于百分比和媒体查询的响应式框架,你只需在设计视图中拖拽元素即可。
- 使用“媒体查询”: 在
CSS 设计器中，你可以轻松添加不同屏幕尺寸的断点（如 768px, 480px），为每个断点设置不同的样式，Dreamweaver 会自动生成@media查询代码。 - 实时预览: 切换到
实时视图，点击工具栏上的设备图标，可以预览你的网页在不同设备（iPhone, iPad, 桌面）上的效果。
使用 Bootstrap 框架
Bootstrap 是最流行的 CSS 框架之一,能让你快速构建美观且响应式的网站。
- 下载 Bootstrap: 从 getbootstrap.com 下载 CSS 和 JS 文件。
- 引入 Bootstrap: 将下载的 CSS 和 JS 文件放入你的站点文件夹中，在
index.html的<head>标签内，通过链接面板或手动代码引入 Bootstrap 的 CSS 文件。 - 使用 Bootstrap 组件: Dreamweaver 的
插入面板中包含了 Bootstrap 组件，你可以直接拖拽导航栏、轮播图、警告框等组件到页面中，并直接在属性检查器中进行配置。
FTP 上传与同步
完成网站后,你需要将它上传到服务器上。
- 设置远程服务器:
站点->管理站点-> 选择你的站点 ->编辑->服务器-> 号。 - 填入服务器信息：
- 服务器名称: 任意命名（如“我的网站服务器”）。
- 连接方法: 选择
FTP。 - FTP 地址: 你的 FTP 服务器地址。
- 用户名/密码: 你的 FTP 登录凭据。
- 根目录: 通常是
/public_html或/www。
- 上传文件: 连接成功后，在
文件面板中，你可以看到本地文件和远程文件，直接将本地文件拖拽到远程文件夹，或右键选择上传，你也可以使用同步功能来保持本地和服务器文件一致。
第五部分：实用技巧与最佳实践
- 快捷键: 学习常用快捷键能极大提升效率。
Ctrl+S(保存),Ctrl+B(加粗),F12(在浏览器中预览)。 - 代码提示: 在代码视图中，输入 (CSS 类) 或 (CSS ID) 会自动列出可用选项。
- 代码折叠: 对于复杂的代码，可以使用代码折叠功能来隐藏或显示特定的代码块,保持界面整洁。
- 保持代码整洁: 定期使用
编辑->格式化代码功能来统一代码风格。 - 与样式: 尽量使用
<div>和<span>等标签来构建结构，而将所有样式（颜色、字体、布局）都放在 CSS 文件中,这是现代网页设计的核心原则。
第六部分：资源与进阶学习
- 官方资源:
- Adobe Dreamweaver 官方教程: https://helpx.adobe.com/cn/dreamweaver/tutorials.html (最权威、最全面)
- Adobe Creative Cloud 帮助文档: 详细的功能介绍。
- 视频教程:
- Bilibili / YouTube: 搜索 “Dreamweaver 教程”、“响应式设计 Dreamweaver” 等关键词,有大量中文和英文的免费视频课程。
- 社区:
- Adobe 论坛: 可以向官方专家和社区用户提问。
Dreamweaver 是一个功能极其强大的工具，它既能满足初学者通过可视化界面快速上手网页设计，也能为专业开发者提供高效的代码编辑和项目管理环境，掌握“定义站点”和“CSS 设计器”是使用 Dreamweaver 的关键，随着现代前端技术的发展，Dreamweaver 在响应式设计和框架集成方面的能力使其依然在网页开发领域占据一席之地。
希望这份教程能帮助你开启 Dreamweaver 的学习之旅！祝你学习愉快！
