为什么选择学习 Dreamweaver CS6？
在开始学习前,了解这个软件的定位很重要：
- 优点：CS6 是 Adobe 公司在推出 Creative Cloud 云服务之前的最后一个经典版本，它功能稳定，对于学习网页设计的基础核心概念（如 HTML, CSS, 布局）非常直观，其“实时视图”和“代码提示”功能能帮助初学者快速看到代码效果,是入门网页设计的好工具。
- 缺点：发布于 2012 年，相对较老，它不支持现代前端框架（如 React, Vue），对响应式设计的支持也不如现代的代码编辑器（如 VS Code）或新版的 Dreamweaver 方便。
如果您是纯初学者，想从零开始理解网页是如何构成的，Dreamweaver CS6 是一个绝佳的教学工具，但如果您的目标是成为一名现代前端开发工程师，建议在学习完基础后，尽快过渡到 VS Code 等现代工具。
Dreamweaver CS6 学习路径（从入门到精通）
一个系统的学习路径能让您事半功倍,建议按以下顺序进行：
基础入门 (约 1-2 周)
这个阶段的目标是熟悉软件界面和基本操作。
-
软件介绍与界面概览
- 了解 Dreamweaver 的各个面板（文件、插入、属性、CSS 设计器等）。
- 重点：学会自定义工作区布局，熟悉“代码视图”、“拆分视图”、“设计视图”三种模式的区别和用途。
- 关键操作：新建 HTML、CSS 文件；管理本地站点。
-
创建和管理本地站点
- 学习如何使用“站点”功能来管理您的整个网站项目，这是 Dreamweaver 的核心功能之一。
- 重点：理解“本地根文件夹”的概念，学会创建、编辑和删除站点。
-
HTML 基础
- 学习网页的骨架——HTML,重点掌握常用标签。
- 重点标签：
<html>,<head>,<title>,<body>(页面结构)<h1>-<h6>(标题)<p>(段落)<a>(超链接)<img>(图片)<ul>,<ol>,<li>(列表)
- 实践：使用 Dreamweaver 的“插入”面板来快速添加这些标签，并切换到“实时视图”查看效果。
样式美化 (约 2-3 周)
这个阶段的目标是学习如何使用 CSS 让网页变得美观。
-
CSS 基础
- 学习 CSS 的基本语法和选择器。
- 重点：理解“层叠样式表”的作用，学习 ID 选择器、类选择器、标签选择器。
-
使用 CSS 设计器面板
- 熟练使用 CS6 的“CSS 设计器”面板，这是可视化学习 CSS 的利器。
- 重点：通过面板直接修改“背景”、“边框”、“文本”等属性,并观察代码视图的自动变化。
-
常用 CSS 属性
- 学习控制网页布局和外观的核心 CSS 属性。
- 重点：
- 盒模型：
margin,padding,border,content - 文本样式：
color,font-family,font-size,text-align - 浮动：
float(这是旧版布局的核心,必须理解) - 定位：
position(了解static,relative,absolute的基本概念)
- 盒模型：
布局实战 (约 2-3 周)
这是将所学知识整合,制作一个完整网页的关键阶段。
-
表格布局 (了解)
- 学习使用
<table>标签进行页面布局。 - 注意：表格布局已基本被淘汰，但了解其原理有助于维护旧网站，重点是理解
rowspan和colspan。
- 学习使用
-
浮动布局 (重点)
- 学习使用
float属性来创建多列布局。 - 实践：制作一个包含“页眉（header）”、“内容区（content）”、“侧边栏（sidebar）”、“页脚（footer）”的经典网页布局，这是 CS6 时代最主流的布局方式。
- 学习使用
-
CSS+Div 布局
- 理解“Div+CSS”的语义化思想，用
<div>作为容器，通过 CSS 来控制其位置和样式。
- 理解“Div+CSS”的语义化思想，用
进阶与交互 (约 1-2 周)
-
表单
- 学习创建用户交互表单。
- 重点标签：
<form>,<input>,<textarea>,<select>,<button> - 实践：制作一个简单的“联系我们”或“用户注册”页面。
-
模板和库
- 学习使用 Dreamweaver 的模板功能，创建一个包含公共部分（如导航栏、页脚）的模板，然后基于它快速生成多个页面,实现一键更新。
- 实践：为您的网站创建一个模板,并生成几个子页面。
-
JavaScript 行为 (了解)
- Dreamweaver 提供了一些预设的 JavaScript 行为，如“弹出窗口”、“交换图像”等。
- 注意：这些行为生成的代码比较老旧，现在不推荐使用,但了解一下可以扩展思路。
优质视频教程资源推荐
由于 CS6 较老，最新的教程很少，但经典的中文视频教程非常丰富,足以满足学习需求。
国内主流视频平台 (Bilibili, 腾讯课堂等)
这些平台有大量免费且优质的系统教程,是首选。
-
Bilibili (B站)：
- 搜索关键词：
Dreamweaver CS6 教程、DW CS6 从零开始、网页设计 Dreamweaver - 推荐UP主/系列：
- 黑马程序员：他们有非常经典的、系统化的 Dreamweaver CS6 系列教程，内容详实，讲解清晰，非常适合零基础小白，直接在 B 站搜索“黑马程序员 Dreamweaver”即可找到。
- 传智播客：和黑马程序员类似，也提供高质量的 DW 教程。
- 搜索“点赞最高的视频”：通常播放量高、弹幕多的视频质量都比较有保障。
- 搜索关键词：
-
腾讯课堂 / 网易云课堂：
搜索“Dreamweaver CS6”，可以找到很多免费的基础课程，虽然平台主打付费，但免费的基础入门课质量通常不错,足以带你入门。
国外经典教程 (配有中文字幕)
国外教程更注重原理和最佳实践，即使软件版本旧,思想是通用的。
- YouTube：
- 搜索关键词：
Dreamweaver CS6 Tutorial for Beginners - 推荐频道：
- Tutvid：这个频道的教程制作精良，讲解非常细致，虽然版本可能不是 CS6，但基础操作和原理是相通的,可以找到很多相关的中文翻译或搬运视频。
- Adam Khoury：有非常长的 Dreamweaver 系列教程,内容非常全面。
- 使用技巧：YouTube 视频通常有自动生成的中文字幕，点击 CC 按钮即可开启。
- 搜索关键词：
文档与图文教程
视频不是唯一的学习方式,图文教程可以作为补充和参考。
- W3Schools (w3school.com.cn)：虽然是英文网站，但国内有中文镜像，这是学习 HTML, CSS, JavaScript 的“圣经”，知识点清晰,有在线实例可以动手实践。
- 菜鸟教程 (runoob.com)：同样是国内非常知名的编程入门网站，内容全面,适合查阅和复习。
学习建议与注意事项
- 动手实践，不要只看不练：网页设计是一门实践性极强的技能，跟着视频做一遍,然后自己独立尝试着做一个小的个人主页或作品集。
- 理解代码，而非依赖工具：Dreamweaver 的可视化工具是辅助，最终目的是让你理解 HTML 和 CSS 的本质，在“拆分视图”下,多观察你的操作是如何生成代码的。
- 打好基础：务必花足够的时间在 HTML 和 CSS 的基础部分，基础不牢,后面的布局和美化会非常困难。
