为什么选择学习 Dreamweaver CC？
在开始学习前，先明确一下 Dreamweaver CC 的定位：
（图片来源网络，侵删）
- 优点：
- 可视化开发：强大的“实时视图”让你能像在 Word 里一样编辑网页,同时还能看到对应的代码。
- 代码智能提示：对 HTML, CSS, JavaScript 等主流语言提供强大的代码提示和自动补全功能,大大提高编码效率。
- FTP 集成：内置 FTP/SFTP 客户端，可以方便地连接和管理服务器上的文件，实现“一键上传”。
- 响应式设计工具：内置“媒体查询”功能，可以轻松预览和编辑不同设备（手机、平板、电脑）下的网页效果。
- 生态系统：作为 Adobe Creative Cloud 的一部分，可以与其他 Adobe 软件（如 Photoshop, Illustrator, XD）无缝协作。
- 适用人群：
- 网页设计初学者,希望从可视化工具入门。
- 需要快速搭建和修改静态网站的设计师或开发者。
- 已经掌握代码，需要一个集代码编写、文件管理、预览于一体的全能工具的开发者。
Dreamweaver CC 学习路径（从入门到精通）
一个系统性的学习路径能让你少走弯路。
基础入门 (1-2周)
目标：熟悉软件界面，理解网页基本概念,能独立创建一个简单的静态页面。
- 核心知识点：
- 软件界面初识：认识菜单栏、工具栏、文件面板、插入面板、属性检查器等。
- 创建和管理站点：这是最关键的一步！学习如何定义一个本地站点，让 Dreamweaver 管理你的所有文件和链接。
- 创建和保存网页：学习创建 HTML 文件，设置页面标题（
<title>）。 - 文本编辑：输入、格式化文本，使用标题、段落、列表等。
- 插入图像：学习插入图片，设置图片的
alt属性（对 SEO 无关重要）。 - 创建超链接：链接到其他页面、外部网站、或页面内的锚点。
推荐视频：
- Bilibili (B站)：搜索“Dreamweaver CC 入门教程”，有很多 UP主 制作的全套免费教程，搜索“尚硅谷 Dreamweaver”或“黑马程序员 Dreamweaver”,通常能找到非常系统的课程。
- YouTube：搜索“Dreamweaver CC for Beginners Tutorial”，有很多英文优质教程,配有中文字幕或易于理解的演示。
核心布局 (2-3周)
目标：掌握使用 CSS 进行网页布局,告别表格布局时代。
（图片来源网络，侵删）
- 核心知识点：
- CSS 基础：理解 CSS 的作用（层叠样式表），学习选择器（元素、类、ID）。
- CSS 应用方式：在 Dreamweaver 中学习“CSS 设计器”面板，通过可视化方式创建和应用 CSS。
- 盒模型：理解网页元素都由
margin（外边距）、border（边框）、padding（内边距）、content）组成。 - 浮动：学习使用
float属性实现简单的左右并排布局。 - Flexbox（弹性布局）：现代网页布局的核心！ 重点学习使用 Flexbox 来创建灵活、响应式的布局。
- 实践项目：尝试制作一个包含“页眉、导航栏、内容区、侧边栏、页脚”的完整网页布局。
推荐视频：
- 继续在 B站 或 YouTube 搜索“Dreamweaver CSS 布局教程”或“Dreamweaver Flexbox 教程”。
- 重点寻找讲解“CSS 设计器”面板使用的视频，这是 Dreamweaver 的核心功能之一。
进阶与实战 (3-4周)
目标：制作一个完整的响应式网站,并掌握与后台的交互。
- 核心知识点：
- 响应式网页设计：
- 学习使用“媒体查询”（Media Queries）。
- 在 Dreamweaver 的“实时视图”中，使用设备预览工具（手机、平板图标）来切换和编辑不同屏幕尺寸下的样式。
- 模板和库：学习创建可重复使用的模板，统一网站的头部和底部,提高开发效率。
- 表单：创建用户注册、登录、留言等表单，学习各种表单元素（文本框、密码框、单选框、复选框、提交按钮）。
- JavaScript 基础与行为：
- 学习在 Dreamweaver 中插入简单的 JavaScript 代码。
- 使用“行为”面板（Behaviors）为页面添加一些简单的交互效果，如“交换图像”、“弹出信息”等（注意：现代开发中行为已较少用，但了解无妨）。
- 动态网站入门 (可选)：
如果需要，可以学习使用 Dreamweaver 的服务器行为（Server Behaviors）来连接数据库，实现简单的增删改查功能（需要配合 PHP/ASP 等服务器环境）。
- 响应式网页设计：
推荐视频：
（图片来源网络，侵删）
- 搜索“Dreamweaver 响应式网站教程”或“Dreamweaver 项目实战”。
- 很多教程会带你从头到尾做一个完整的商业网站项目,这是最好的学习方式。
推荐视频学习平台
Bilibili (B站) - 国内首选
B站是学习软件教程的宝库,资源免费且丰富。
- 搜索关键词：
Dreamweaver CC 教程Dreamweaver 2025 教程(新版本功能大同小异)DW 入门到精通Dreamweaver 响应式布局
- 推荐 UP主/机构：
- 尚硅谷、黑马程序员、传智播客：这些机构出品的课程非常系统、免费，质量很高,是入门的首选。
- 个人 UP主：搜索评分高、更新及时的教程,通常更灵活。
YouTube - 全球优质资源库
YouTube 上的教程通常制作精良，讲解清晰,且能接触到国际前沿的用法。
- 搜索关键词 (英文)：
Dreamweaver CC TutorialLearn Adobe DreamweaverDreamweaver Responsive Web DesignDreamweaver for Beginners
- 推荐频道：
- Traversy Media：非常知名的编程教程频道，讲解清晰,项目实战性强。
- The Net Ninja：同样是高质量的编程教程频道,内容更新快。
- LinkedIn Learning (原 Lynda.com)：虽然需要订阅，但其课程质量极高，体系非常完整，很多教程可以在 B站 找到搬运的免费版。
Adobe 官方资源
最权威、最准确的信息来源。
- Adobe Help Center：直接搜索“Adobe Dreamweaver CC User Guide”，这里有最详尽的官方文档和图文教程,遇到具体功能问题时可以随时查阅。
- Adobe YouTube 官方频道：会发布新功能介绍和官方教学视频。
学习建议与技巧
- 不要只看，一定要动手做：教程只是引导，每看完一节，请务必跟着操作一遍,并尝试自己修改和创造。
- 结合代码视图学习：Dreamweaver 的强大之处在于“代码视图”和“实时视图”的联动，在可视化操作的同时，一定要切换到代码视图，看看 Dreamweaver 帮你生成了什么样的 HTML 和 CSS 代码，这是从“使用者”到“开发者”转变的关键一步。
- 理解原理，而非死记步骤：理解“为什么”要这样做，比记住“怎么做”更重要，理解了 Flexbox 的原理，你就能举一反三,而不是只会照着教程敲代码。
- 从模仿开始，到创造结束：初期可以模仿优秀网站的布局和设计,但最终目标是能独立构思并实现自己的项目。
- 准备好素材：在学习前，准备好一些图片、图标等素材，可以从 Unsplash (免费高质量图片) 等网站下载。
希望这份详细的指南能帮助你顺利开启 Dreamweaver CC 的学习之旅！祝你学习愉快！
