Adobe Dreamweaver 综合使用教程
Dreamweaver (简称 DW) 是 Adobe 公司出品的一款集网页设计、代码编辑和网站管理于一体的专业软件，它最大的特点是 “可视化设计” 和 “代码编辑” 无缝结合，既适合设计师,也适合开发者。
（图片来源网络，侵删）
第一部分：入门基础
什么是 Dreamweaver？
- 可视化设计：像使用 Word 一样，通过拖拽元素来布局网页,所见即所得。
- 代码编辑：提供强大的代码编辑器，支持 HTML、CSS、JavaScript 等多种语言的代码提示、高亮和实时预览。
- 工作区模式：提供了多种工作区布局,满足不同用户的需求。
- CMS 支持：对 WordPress、Joomla 等内容管理系统有出色的集成支持。
安装与启动
- 安装：从 Adobe 官网下载 Creative Cloud，然后安装 Dreamweaver。
- 启动：打开 Dreamweaver，首次使用时需要登录你的 Adobe ID。
- 工作区选择：
- 开始：新手模式,只显示最基本的功能。
- 设计器：适合以可视化设计为主的用户，左侧是文件面板,中间是设计视图和代码视图。
- 开发者：适合以代码编写为主的用户,代码编辑区域更大。
- 经典：旧版本的布局,功能齐全但略显复杂。
- 推荐初学者使用【设计器】模式。
界面核心区域详解
熟悉 Dreamweaver 的界面是第一步。
- 菜单栏：所有命令的集合，如文件、编辑、插入、修改等。
- 工具栏：
- 实时视图：模拟浏览器显示效果,但不能编辑。
- 快速编辑：在实时视图中直接编辑元素。
- 实时代码：在实时视图中查看和编辑对应的代码。
- 检查：打开 “检查” 面板，可以同时查看和编辑桌面端和移动端的样式,是响应式设计的利器。
- 文档窗口：你设计和编写代码的主区域，可以在 “代码”、“拆分”、“实时视图” 之间切换。
- 代码视图：纯代码编辑。
- 拆分视图：最常用！上半部分是代码，下半部分是实时预览,修改代码后可以立即看到效果。
- 实时视图：所见即所得的设计视图。
- 插入面板：用于向页面中添加各种元素，如布局、图像、表格、文本等。
- 文件面板：管理你网站的所有文件和文件夹，就像 Windows 的资源管理器。
- 属性检查器：最核心的面板之一，当选中页面上的某个元素（如一张图片、一段文字）时，这里会显示该元素的所有属性（如图片的宽高、链接、源文件；文字的字体、颜色、大小等）,并允许你直接修改。
- CSS 设计器：创建和管理 CSS 样式的核心面板，你可以在这里创建、编辑选择器，并设置各种 CSS 属性。
第二部分：创建你的第一个网站
定义站点
这是使用 Dreamweaver 最重要的一步！定义站点可以告诉 Dreamweaver 你的网站文件存放在哪里，从而实现文件管理、链接检查、服务器上传等功能。
- 点击菜单栏的 站点 > 新建站点。
- 在弹出的窗口中，你可以选择 “基本”（向导式）或 “高级”（专业设置），推荐新手使用 “基本”。
- 填写站点信息：
- 站点名称：给你的网站起个名字（如“我的第一个网站”），这个名字只在 Dreamweaver 内部使用。
- 本地站点文件夹：选择一个空文件夹作为你网站的根目录，在桌面创建一个名为
MyWebsite的文件夹,然后选择它。
- 点击 “完成”。
你的 文件面板 应该已经显示你刚刚创建的站点文件夹了。
创建第一个网页
- 在 文件面板 中,右键点击站点根目录。
- 选择 新建文件。
- 将文件名命名为
index.html。注意：首页文件名必须是index.html、index.htm或default.html。 - 双击打开
index.html,你就可以开始工作了。
第三部分：核心功能实战
可视化设计模式
- 添加文本：直接在文档窗口中输入文字，然后使用 属性检查器 来修改格式（标题、段落、加粗、斜体等）。
- 插入图像：
- 将光标放在要插入图片的位置。
- 点击 插入 > 图像，或者直接从 插入面板 的“常用”类别中拖拽“图像”图标到页面。
- 选择一张图片。最佳实践：先将图片复制到你站点根目录下的一个
images文件夹中,然后从该文件夹中选择。 - 插入后，选中图片，在 属性检查器 中可以修改图片的宽高、替换文本（SEO 优化）、添加链接等。
- 创建超链接：
- 选中一段文字或一张图片。
- 在 属性检查器 的 “链接” 框中，输入要跳转的 URL 地址（如
https://www.google.com）。 - 如果要链接到网站内的其他页面，可以直接点击 “浏览文件” 图标，然后选择站点内的其他 HTML 文件。
- 使用表格：
- 插入 > 表格。
- 设置表格的行数、列数、宽度等。
- 表格主要用于数据展示，对于页面布局，现在更推荐使用 “Div” 和 “CSS”。
代码与混合模式
这是 Dreamweaver 的精髓。
（图片来源网络，侵删）
- 切换视图：点击文档窗口左上角的 “拆分” 视图。
- 实时编辑：
- 在 实时视图 中，将鼠标悬停在某个元素上（如一个段落）,该元素会高亮显示。
- 点击该元素，Dreamweaver 会自动跳转到 代码视图 中对应的代码行,并高亮显示。
- 在 代码视图 中修改代码，然后切换回 实时视图,你会立刻看到变化。
- CSS 设计器面板：
- 在 实时视图 中选中一个元素（比如一个标题）。
- 打开 CSS 设计器 面板。
- 面板会自动为这个元素创建一个 “选择器”（如
h1）。 - 在 “属性” 区域，你可以像填写表单一样，轻松地设置字体、颜色、背景、边距等 CSS 属性，所有代码都会自动生成并写入到页面的
<style>标签中。
响应式网页设计
使用 “检查” 面板轻松实现。
- 打开你的
index.html文件。 - 点击工具栏上的 “检查” 按钮,打开检查面板。
- 面板会分为 “桌面” 和 “移动设备” 两个预览窗口。
- 添加媒体查询：
- 在 CSS 设计器 面板中，点击 号添加新的 CSS 规则。
- 在弹出的窗口中，选择 “媒体查询”。
- Dreamweaver 会提供一些预设的断点（如 768px 平板，375px 手机）,你也可以自定义。
- 选择一个断点，点击“确定”。
- 设计不同屏幕尺寸的样式：
- 你添加的 CSS 规则会自动被包裹在
@media查询中。 - 在桌面预览窗口中选中一个元素，然后在 CSS 设计器 中为它设置样式（宽度 1000px）。
- 切换到移动设备预览窗口，选中同一个元素，再次在 CSS 设计器 中为它设置不同的样式（宽度 100%）。
- 这样，当浏览器窗口宽度小于你设定的断点时,就会应用移动端的样式。
- 你添加的 CSS 规则会自动被包裹在
第四部分：进阶技巧
使用模板
如果你网站的多个页面有相同的头部和底部，使用模板可以极大提高效率,并方便统一修改。
- 创建模板：
- 打开一个已经设计好的页面（如
index.html）。 - 点击 文件 > 另存为模板。
- 为模板命名（如
main.dwt）,并保存。
- 打开一个已经设计好的页面（如
- 定义可编辑区域：
- 在模板文件中，选中那些需要在各个页面中不同的内容（比如文章正文）。
- 右键点击，选择 “模板 > 新建可编辑区域”。
- 给这个区域起个名字（如
EditRegion1）。
- 基于模板创建页面：
- 文件 > 新建。
- 在弹出的窗口中，选择 “模板” 选项卡,然后选择你的站点和模板。
- 点击“创建”。
- 新页面会继承模板的结构，但你只能修改被标记为“可编辑区域”的部分。
发布网站
- 设置远程服务器：
- 点击 站点 > 管理站点，选择你的站点，点击 “编辑”。
- 切换到 “服务器” 选项卡。
- 点击 号添加一个新的服务器。
- 选择 “FTP”（最常用）或 “SFTP”。
- 填写你的主机名、用户名、密码等信息,这些信息由你的网站空间服务商提供。
- 上传文件：
- 设置完成后，回到 文件面板。
- 点击面板右上角的 “连接到远程服务器” 图标。
- 连接成功后,你会看到本地文件和远程服务器文件并排显示。
- 直接将本地文件拖拽到远程服务器一侧,即可上传。
第五部分：学习资源与建议
- 官方帮助：Dreamweaver 自带非常详尽的帮助文档，按
F1即可查看。 - Adobe 官方教程：Adobe 官网有大量高质量的入门和进阶视频教程。
- YouTube：搜索 "Dreamweaver Tutorial for Beginners",有海量的免费视频资源。
- 实践，实践，再实践：不要只看教程，亲手创建一个包含首页、关于我们、联系我们等页面的完整小网站是最好的学习方式。
Dreamweaver 是一个功能强大的工具，但它并不神秘，对于新手,建议遵循以下路径：
- 熟悉界面：花点时间认识各个面板的作用。
- 定义站点：养成先定义站点再工作的好习惯。
- 从“拆分视图”开始：一边看代码一边看效果,是学习网页技术的最佳途径。
- 掌握“属性检查器”和“CSS 设计器”：这是进行可视化设计的核心。
- 尝试“检查”面板：入门响应式设计。
希望这份教程能帮助你顺利开启 Dreamweaver 的学习之旅！
（图片来源网络，侵删）
