Adobe Dreamweaver 完整操作步骤（全版本通用）
说明：本操作步骤适配Adobe Dreamweaver全版本（含2020/2021/2025等），兼顾可视化操作（零基础友好）和代码编辑（进阶需求），从软件安装到网站发布全流程覆盖，步骤清晰、可直接对照操作，同时融入最新版本的智能功能与优化技巧，助力高效完成网页开发。
一、软件安装与首次启动（Windows/Mac通用）
1. 安装准备
获取安装包：通过Adobe官方网站、Creative Cloud应用程序下载对应版本的Dreamweaver安装包，确保安装包与电脑系统（32位/64位、Windows/Mac）匹配。
系统要求：Windows需满足Win10及以上系统，Mac需满足macOS 10.15及以上，预留至少2GB存储空间（建议4GB以上，保障运行流畅）。
下载：
123网盘（不限速）：https://www.123865.com/s/S7DSTd-BYiGA?pwd=8888#
百度网盘（全家桶）：https://pan.baidu.com/s/17HwBHS-dsqjxzfGq0K9Bow?pwd=8888
2. 安装步骤
解压安装包（若为压缩包格式），双击运行安装程序（Windows为Setup.exe，Mac为.dmg文件）。
选择安装语言（默认中文，可根据需求切换）、安装路径（建议安装在非系统盘，避免占用C盘空间）。
点击“继续”，等待安装完成（安装过程约5-10分钟，取决于电脑配置）。
安装完成后，点击“关闭”，启动Dreamweaver。
3. 首次启动配置
启动后，登录Adobe账号完成软件激活（未激活将无法使用全部功能）。
进入欢迎界面，可选择“新建项目”“打开现有项目”或“查看教程”，新手建议先熟悉欢迎界面的快捷入口。
自定义工作区（可选）：拖动右侧面板（如属性面板、CSS设计器），调整为自己习惯的布局，可通过“窗口→工作区”保存自定义布局，方便后续使用。
二、核心界面认知（必学，快速上手）
Dreamweaver的核心优势的是“可视化+代码”双模式编辑，先熟悉界面面板，能大幅提升操作效率，各版本界面基本一致，核心面板如下：
1. 顶部菜单栏
包含所有操作命令：文件、编辑、视图、插入、格式、站点、窗口、帮助，是所有操作的基础入口，常用命令（如新建、保存、插入元素）均可在此找到。
2. 文档窗口（核心编辑区）
用于编辑网页内容，支持3种视图模式，可通过顶部切换按钮或快捷键切换，同步联动更新：
设计视图：可视化编辑，所见即所得，无需懂代码，适合零基础，可直接拖拽元素、修改样式，集成Chromium渲染引擎，支持实时预览CSS Grid、Flexbox等现代布局。
代码视图：纯代码编辑，支持HTML、CSS、JavaScript等语法高亮、Emmet快捷补全及实时Lint检查，可通过首选项配置缩进风格与代码折叠规则，适合有代码基础的使用者。
拆分视图：上半部分代码视图、下半部分设计视图，代码修改后设计视图实时同步，兼顾可视化操作和代码调整，是最常用的视图模式，可实现代码与视觉预览的毫秒级同步。
3. 右侧核心面板（常用必看）
文件面板：管理站点文件、文件夹，可新建、删除、重命名文件/文件夹，查看文件路径，支持上传/下载文件，右键点击文件可执行“复制路径”“生成缩略图”等高级操作。
属性面板：选中页面元素（文字、图片、链接等）后，可设置其属性（如字体、大小、颜色、宽高、链接地址），不同元素对应不同的属性选项，简化样式设置操作。
CSS设计器：可视化编辑、管理CSS样式，支持直接拖拽调整盒模型参数，可新建、编辑、删除样式，实时预览样式效果，支持关联内部/外部样式表，大幅提升样式设置效率。
DOM面板：查看网页HTML结构树，可快速定位元素、修改元素层级，方便排查页面结构问题，适合进阶使用者。
资产面板：管理网页中常用的图片、音频、视频、代码片段等资源，可快速插入，支持批量优化图片（如生成WebP/AVIF格式），减少网页加载体积。
4. 底部状态栏
显示当前网页的编码格式（如UTF-8）、文档类型（如HTML5）、缩放比例，可快速切换编码格式、调整页面缩放，查看页面大小等基础信息。
三、建站基础：创建本地站点（关键第一步）
Dreamweaver建站的核心是“站点管理”，所有网页文件、图片、样式表等都需放在站点文件夹中，避免文件路径混乱，导致网页无法正常显示，步骤如下：
打开Dreamweaver，点击菜单栏“站点→新建站点”（快捷键：Ctrl+Shift+N，Mac为Cmd+Shift+N）。
弹出“站点设置对象”对话框，进行基础配置：
站点名称：输入站点名称（如“个人网站”“企业官网”），仅用于识别，无特殊要求。
本地站点文件夹：点击“浏览”，选择电脑本地的一个空文件夹（建议新建专门的文件夹，如D:\Web\MySite），所有网页相关文件都将存放在此文件夹中，新版支持自动检测项目中的.gitignore文件，智能同步开发环境配置。
高级设置（可选，按需配置）：
本地信息：默认即可，可设置默认图像文件夹（建议选择站点内的images文件夹），方便后续插入图片。
远程服务器：暂时不配置，后续发布网站时再设置（支持SFTP/FTP/Git等连接方式）。
点击“保存”，完成本地站点创建，此时文件面板将显示站点文件夹，可开始新建文件、文件夹。
推荐站点结构（在文件面板右键“新建文件夹/文件”，规范命名，避免中文、空格、特殊字符）：
index.html：首页（必须命名为index.html，服务器默认优先加载此文件）。
css/：存放CSS样式表文件（如style.css），用于统一控制网页样式。
images/：存放网页中使用的图片（如logo、背景图、内容图），可批量优化图片格式，减少加载体积。
js/：存放JavaScript脚本文件（如script.js），用于实现网页交互效果（如弹窗、滚动动画）。
pages/：存放子页面（如about.html、contact.html），避免首页与子页面混乱。
Templates/：存放模板文件（.dwt），用于批量统一页面布局，提升开发效率。
四、基础操作：创建与编辑网页（零基础重点）
此部分以“设计视图”为主，无需代码，适合零基础，涵盖网页核心元素的插入与编辑，同时补充代码视图的基础操作，兼顾不同需求。
1. 创建与保存网页文件
新建HTML文件：
方法1：菜单栏“文件→新建”（快捷键：Ctrl+N，Mac为Cmd+N），在弹出的对话框中选择“HTML”（默认HTML5，推荐使用，支持响应式设计），点击“创建”，可选择空白页面或预设计的Bootstrap模板（适合响应式网页）。
方法2：欢迎界面→“新建→HTML”，快速创建空白HTML文件。
保存文件：
快捷键：Ctrl+S（Mac为Cmd+S），首次保存需选择保存路径（必须放在本地站点文件夹内）。
首页命名：必须为index.html（小写，无空格），子页面命名规范（如about.html、contact.html），文件名禁止使用中文、空格、特殊字符，避免网页加载异常。
全部保存：修改多个文件后，使用快捷键Ctrl+Shift+S（Mac为Cmd+Shift+S），可一次性保存所有修改的文件，避免遗漏。
2. 文本编辑（基础操作）
输入文本：切换到设计视图，直接在编辑区输入文字，按Enter键插入新段落，按Shift+Enter键插入换行（不新建段落）。
文本格式设置：
选中文本，在属性面板中设置：字体（推荐使用思源黑体、微软雅黑等兼容性强的字体）、字号（如16px）、颜色、加粗（B）、斜体（I）、对齐方式（左对齐、居中、右对齐）。
设置标题：选中文本，在属性面板“格式”下拉框中选择标题（H1-H6），H1为一级标题（页面唯一，适合首页标题），H2-H6为二级至六级标题，用于区分内容层级，符合SEO规范。
列表设置：选中文本，点击属性面板“有序列表”（数字序号）或“无序列表”（圆点），可设置列表缩进、列表样式，适合展示多条并列内容（如产品特点、步骤）。
3. 插入图片：
方法1：菜单栏“插入→图像”（快捷键：Ctrl+Alt+I，Mac为Cmd+Alt+I），在弹出的对话框中选择images文件夹中的图片，点击“确定”；若弹出“图像标签辅助功能属性”对话框，可直接填写替换文本（alt），点击“确定”完成插入，无需后续额外设置。
方法2：点击插入面板中的“图像”图标（全版本位置一致，通常在“常用”选项卡最上方），快速弹出文件选择对话框，选择images文件夹内的目标图片，点击“确定”即可插入。
方法3：进阶操作（快速拖拽）：打开电脑文件管理器，找到站点内images文件夹中的图片，直接拖拽至Dreamweaver的设计视图/拆分视图的目标位置，松开鼠标即可完成插入，适合批量插入多张图片，提升操作效率。
4、图片属性设置（选中图片，在属性面板操作，全版本通用）：
选中插入的图片后，右侧属性面板会显示图片专属设置选项，按需求逐一配置，确保图片显示正常、适配页面且符合规范：
1. 宽/高：可手动输入数值（单位默认px，可手动改为%，适配响应式布局），点击“锁定比例”图标（链形图标），可保持图片原有宽高比不变，避免拉伸变形；若未锁定比例，手动修改宽或高会导致图片失真，新手建议始终锁定比例。进阶技巧：若需让图片适配容器宽度，可将宽度设为100%，高度设为auto，实现响应式自适应。
2. 替换文本（alt）：必填项，输入图片简洁准确的描述（如“网站logo”“产品展示图-手机”“首页轮播图-自然风光”），不可为空。核心作用：一是SEO优化，帮助搜索引擎识别图片内容，提升页面排名；二是图片无法加载时（如网络异常、路径错误），页面会显示该文本，告知用户图片内容；三是符合无障碍设计规范（WCAG 2.2标准），方便屏幕阅读器读取图片信息，适配特殊用户需求。注意：描述需贴合图片实际内容，避免堆砌关键词。
3. 边框：默认值为0，无需修改；若需给图片添加边框，可输入数值（如1），再点击边框颜色选择器，设置边框颜色（如#ccc），适合突出图片；进阶操作：可通过CSS设计器设置边框圆角、阴影，让图片更美观。
4. 边距（margin）与内边距（padding）：调整图片与周边元素（文字、其他图片、容器）的间距。边距（margin）是图片外部与其他元素的距离，内边距（padding）是图片内部与边框的距离；可直接输入数值（单位px），分别设置上、下、左、右四个方向的间距，避免图片与其他元素挤压，提升页面美观度。
5. 对齐方式：设置图片与周边文字的对齐关系，常用选项有“左对齐”“右对齐”“居中对齐”“绝对居中”，新手可直接点击属性面板的对齐图标快速设置；进阶技巧：若需更精准的对齐，可通过CSS设计器设置float（浮动）或flex（弹性布局），适配复杂页面排版。
6. 链接设置：在属性面板“链接”输入框中填写跳转地址，实现“点击图片跳转”功能。可设置三种链接类型：① 站内链接：点击右侧“浏览”按钮，选择站点内的目标文件（如pages/about.html），自动生成相对路径，避免路径错误；② 外部链接：输入完整URL（如https://www.example.com），需包含http://或https://；③ 锚点链接：输入#+锚点名称（如#top），实现页面内快速跳转（如点击图片返回页面顶部）。链接目标可选择“_blank”（新窗口打开）、“_self”（当前窗口打开），按需设置。
7. 图像映射（进阶功能）：适合需要给图片不同区域设置不同链接的场景（如一张包含多个产品的图片，点击不同产品跳转至对应详情页）。操作步骤：选中图片，在属性面板点击“矩形/圆形/多边形”图标，在图片上绘制映射区域，选中映射区域，设置对应链接和替换文本，完成后保存文件即可生效，全版本均支持该功能。
8. 图片优化（新版强化功能）：选中图片，属性面板会显示“优化”按钮，点击后可快速压缩图片、转换格式（如将JPG转为WebP），无需借助外部工具，直接在DW内完成优化，进一步减小图片体积，提升网页加载速度；旧版本可通过“文件→导出→图像”，选择优化参数完成压缩。