Dreamweaver for macOS 全方位教程
Dreamweaver 是一款强大的网页设计和开发工具，它结合了可视化设计界面和强大的代码编辑器，非常适合初学者入门,也能满足专业开发者的需求。
（图片来源网络，侵删）
第一部分：准备工作与界面初探
安装与激活
- 获取软件: 你需要从 Adobe 官网订阅 Creative Cloud，Dreamweaver 是 Creative Cloud 套件的一部分。
- 安装: 登录 Creative Cloud 桌面应用，找到 Dreamweaver 并点击“安装”。
- 激活: 安装完成后，启动 Dreamweaver 并使用你的 Adobe ID 登录激活。
熟悉 macOS 版本的界面
启动 Dreamweaver 后，你会看到一个功能丰富的界面，我们先来认识一下它的核心区域（从上到下，从左到右）：
- 菜单栏: 位于屏幕最顶部，包含所有命令，如“文件”、“编辑”、“视图”、“插入”等。
- 工具栏: 位于菜单栏下方，提供常用操作的快捷按钮，如“新建”、“打开”、“保存”、“实时视图”、“预览”等。
- 插入面板: 默认在右侧，是可视化设计的核心，你可以在这里插入各种元素，如布局（Div、表格）、媒体（图片、视频）、表单等。
- 文件面板: 默认在右侧，是你的“文件管理器”，在这里你可以看到网站的所有文件和文件夹,是管理项目的关键。
- 属性检查器: 默认在右下角，当你选中页面上的某个元素（如一段文字、一张图片）时，它会显示该元素的属性（如字体大小、颜色、图片源链接等）,并允许你直接修改。
- 文档窗口: 中间最大的区域，是你进行设计和编写代码的地方，它有两种主要视图：
- 代码视图: 纯代码编辑界面，语法高亮,自动补全。
- 实时视图: 所见即所得的可视化设计界面,显示最终效果。
- 拆分视图: 强烈推荐初学者使用！ 它将窗口分为上下两部分，上面是代码，下面是实时视图，你可以实时看到代码修改带来的效果,学习效率极高。
- 工作区切换: Dreamweaver 提供了多种预设的工作区布局，在菜单栏
窗口 > 工作区中，你可以选择：- 设计器: 适合纯可视化设计,面板布局更自由。
- 经典: 适合同时进行设计和代码编辑,面板布局固定。
- 编码: 适合纯代码开发,最大化编辑空间。
第二部分：创建你的第一个网站项目
在 Dreamweaver 中，“站点” 的概念非常重要，它告诉 Dreamweaver 你的网站文件存放在哪里,以及如何管理它们。
步骤 1: 定义站点
- 在菜单栏选择
站点 > 新建站点。 - 在弹出的窗口中，输入你的网站名称（
我的第一个网站）。 - 关键一步: 在
本地站点文件夹中，点击文件夹图标，选择一个空文件夹作为你的网站根目录，在你的“文稿”文件夹下创建一个名为my-first-website的文件夹。 - 点击
保存。
你的站点就创建好了，在右侧的 文件 面板中,你应该能看到你刚刚创建的站点文件夹。
步骤 2: 创建主页
- 在
文件面板中,右键点击你的站点根目录。 - 选择
新建文件。 - 将新文件命名为
index.html。注意： 网站的主页通常必须命名为index.html或default.html。
步骤 3: 编辑主页
双击 index.html 文件，它会在文档窗口中打开，默认情况下，你可能处于“实时视图”。
（图片来源网络，侵删）
- 切换到“拆分视图”: 点击文档窗口左上角的
拆分按钮。 - 查看代码: 你会看到一堆自动生成的 HTML 代码（
<!DOCTYPE html>,<html>,<head>,<body>等）,这是网页的基本骨架。 - 在实时视图中编辑: 在下方的
实时视图区域，直接点击输入文字，欢迎来到我的网站！”。 - 在代码视图中观察: 切换到上方的
代码视图，你会发现你输入的文字被自动包裹在<body>和</body>标签之间，这就是 Dreamweaver 的强大之处——可视化操作和代码同步。
第三部分：核心功能详解
文本与样式
- 输入文本: 直接在实时视图中输入。
- 格式化文本: 选中文字，在
属性检查器中可以设置标题（如<h1>,<h2>）、段落（<p>）、字体、大小、颜色等。 - 使用 CSS（层叠样式表）: 这是网页美化的核心。
- 方法一（可视化）: 选中一个元素（比如一个标题），在
属性检查器中找到CSS按钮，点击编辑规则，Dreamweaver 会打开一个 CSS 规则面板，你可以在这里设置颜色、边距、背景等，它会自动生成 CSS 代码并应用到你的文件中。 - 方法二（代码）: 在
代码视图的<head>标签内，手动编写 CSS 代码，<style> h1 { color: blue; text-align: center; } </style>
- 方法一（可视化）: 选中一个元素（比如一个标题），在
插入图像
- 准备图片: 将你的图片（如
logo.png）放入文件面板的站点文件夹中。 - 插入图片: 在实时视图中,将光标放在你想要插入图片的位置。
- 打开右侧的
插入面板，选择常用类别，点击图像图标。 - 在弹出的窗口中，选择你的
logo.png文件，点击“确定”。 - 调整图片: 选中图片，
属性检查器会出现，在这里你可以：- 修改图片的宽度和高度。
- 设置替换文本（对 SEO 和无障碍访问很重要）。
- 为图片添加链接。
创建超链接
- 选中元素: 选中你想要添加链接的文字或图片。
- 在属性检查器中设置: 在
属性检查器的链接文本框中，输入目标地址。- 外部链接: 输入完整网址，如
https://www.apple.com。 - 内部链接: 输入相对路径，如
about.html（链接到站点内的另一个页面）。 - 锚点链接: 先在目标位置创建一个“命名锚点”（
插入 > 命名锚点），然后链接到它，如#top。
- 外部链接: 输入完整网址，如
创建表格
表格主要用于展示结构化数据（如课程表、价格表）。
- 在
插入面板中，选择常用或布局类别，点击表格。 - 在弹出的对话框中，设置行数、列数、表格宽度等。
- 点击“确定”后，表格会插入到页面中,你可以在单元格内输入文字或插入图片。
创建表单
表单用于收集用户输入（如登录、注册、联系表单）。
- 将光标放在页面中需要插入表单的位置。
- 在
插入面板中，选择表单类别，点击表单，你会看到一个红色的虚线框,这就是表单的容器。 - 在容器内，你可以插入各种表单元素：
- 文本域: 用于输入单行文本（如用户名）。
- 文本区域: 用于输入多行文本（如留言）。
- 按钮: 提交、重置等。
- 复选框 和 单选按钮: 用于多选和单选。
- 列表/菜单: 用于下拉选择。
第四部分：预览、上传与管理
预览网站
- 本地预览: 在 Dreamweaver 中，点击工具栏的
在浏览器中预览按钮，选择你的浏览器（如 Safari, Chrome）即可查看最终效果。 - 实时预览:
实时视图已经非常接近最终效果,但最好还是在浏览器中做最终检查。
上传网站到服务器
这是将你本地制作的网站发布到互联网上的最后一步。
- 获取服务器信息: 你需要从你的网站空间提供商（如虚拟主机服务商）获取以下信息：
- FTP 地址
- FTP 用户名
- FTP 密码
- （可选）远程目录
- 设置远程服务器:
- 在
文件面板中，点击右上角的管理站点。 - 选择你的站点，点击
编辑。 - 在左侧选择
服务器，然后点击 号添加新服务器。 - 填入你从服务商那里获取的 FTP 信息。
- 勾选
Web 根目录（如果服务商提供了）。
- 在
- 上传文件:
- 设置好服务器后，回到
文件面板。 - 你会看到本地文件列表和远程服务器文件列表。
- 选择本地需要上传的文件和文件夹，点击右上角的
上传按钮。
- 设置好服务器后，回到
第五部分：实用技巧与资源
- 快捷键: 熟悉快捷键能极大提升效率。
Cmd + S: 保存Cmd + N: 新建文件Cmd + /: 切换代码注释Cmd + D: 复制当前行
- 实时视图和代码同步: 充分利用
拆分视图，这是 Dreamweaver 教给新手 HTML/CSS 的最佳方式。 - 清理 HTML 代码: 如果你从 Word 或其他地方复制了带格式的文本，直接粘贴会带入大量冗余代码，可以使用
命令 > 清理 HTML功能来优化代码。 - 查找和替换:
编辑 > 查找和替换功能非常强大,可以在整个站点范围内批量替换文本或代码。
推荐学习资源
- 官方 Adobe 教程: Adobe 官网提供了大量高质量的视频和图文教程，是权威的学习来源。
- YouTube 视频教程: 搜索 "Dreamweaver tutorial for beginners mac",有很多博主会从零开始一步步教学。
- 在线文档: MDN Web Docs 是学习 HTML, CSS, JavaScript 等网页技术本身的最佳资源。
希望这份详细的教程能帮助你顺利入门 Dreamweaver for macOS！祝你学习愉快！
（图片来源网络，侵删）
