Dreamweaver CC 教程：从零开始打造专业网站
Dreamweaver CC 是 Adobe 公司推出的专业网页设计和开发工具，它最大的优势在于 可视化设计 和 代码编辑 的完美结合，无论您是设计师还是程序员，都能在其中找到适合自己的工作流。
（图片来源网络，侵删）
这份教程将分为以下几个部分：
- 第一部分：入门基础 - 了解界面、创建站点和第一个页面
- 第二部分：核心功能详解 - 布局、文本、样式、链接和媒体
- 第三部分：高级应用 - 响应式设计、模板和FTP上传
- 第四部分：学习资源推荐 - 官方教程、视频课程和社区
第一部分：入门基础
什么是 Dreamweaver？
- WYSIWYG 编辑器：所见即所得，您可以在设计视图中像在 Word 中一样拖拽元素来构建页面。
- 强大的代码编辑器：支持 HTML, CSS, JavaScript, PHP 等多种语言的代码提示、高亮和实时预览。
- 站点管理工具：可以轻松管理整个网站的所有文件和链接。
- 工作流集成：可以无缝连接 Adobe Photoshop, Illustrator 等软件。
熟悉工作区界面
启动 Dreamweaver 后，您会看到以下主要区域：
- 菜单栏：包含所有命令。
- 插入栏：提供插入各种元素（如图片、表格、链接、媒体等）的快捷按钮。
- 文档窗口：您设计和编写代码的主要区域，可以在 “代码”、“拆分” 和 “设计” 视图之间切换。
- 代码视图：纯代码编辑。
- 设计视图：可视化编辑。
- 拆分视图：上下或左右同时显示代码和设计效果，强烈推荐初学者使用。
- 属性检查器：选中页面上的任何元素（如图片、文本框），这里都会显示其属性（如宽高、源文件、对齐方式等），并允许您直接修改。
- 文件面板：管理您网站的所有文件和文件夹，类似于 Windows 的资源管理器或 Mac 的访达。
创建您的第一个站点（最关键的一步！）
在开始制作任何网页之前,必须先定义一个站点，这能确保 Dreamweaver 正确管理您的文件路径，避免图片、链接等找不到资源。
- 点击菜单栏的 “站点” > “新建站点”。
- 在弹出的窗口中,您可以选择 “基本”（向导式）或 “高级”（手动设置），这里我们选择 “基本”。
- 为您的站点命名：我的第一个网站”。
- 选择站点文件夹：点击文件夹图标，选择一个本地文件夹来存放您的网站文件（
D:\my-website），Dreamweaver 会在此文件夹下自动创建一个_notes文件夹（用于存放站点信息）。 - 点击 “完成”。
您的站点就创建成功了！在 “文件” 面板中，您会看到这个站点。
（图片来源网络，侵删）
创建并保存第一个 HTML 页面
- 在 “文件” 面板中，右键点击您的站点根目录，选择 “新建文件”。
- 将新文件命名为
index.html。（index.html是网站首页的标准文件名） - 双击打开
index.html文件，默认是 “设计” 视图。 - 在设计视图中输入文字,你好，世界！”。
- 点击菜单栏的 “文件” > “保存”（快捷键
Ctrl+S）。
恭喜！您已经创建了您的第一个网页，现在可以点击 “实时视图” 按钮或按 F12 键在浏览器中预览您的成果。
第二部分：核心功能详解
布局：使用“Div”标签和“CSS 设计器”
现代网页布局的核心是 Div 容器 和 CSS (层叠样式表)。
-
插入 Div 容器：
- 在 “插入” 栏中，找到 “布局” 分类。
- 点击 “插入 Div 标签”。
- 在弹出的对话框中,您可以给这个 Div 命一个 ID（
header、main-content、footer），然后点击“确定”。
-
使用 CSS 设计器设置样式：
- 选中您刚刚插入的 Div 容器。
- 打开右侧的 “CSS 设计器” 面板（如果没有，通过菜单栏“窗口 > CSS 设计器”打开）。
- 源：点击“添加源”，选择“当前文档”。
- 选择器：点击“添加选择器”，然后输入您刚才给 Div 命名的 ID，如
#header。 - 属性：在下方设置背景颜色、宽度、高度、内边距等，为
#header设置一个背景色为灰色，宽度为 100%。
通过这种方式,您可以构建出整个网站的框架。
添加和格式化文本
- 直接在设计视图中输入文本。
- 使用 “属性检查器” 可以设置文本的格式，如标题（
<h1>,<h2>）、段落（<p>）、字体、大小、颜色、对齐方式等。 - 最佳实践：尽量使用 “CSS” 来控制样式，而不是直接在属性检查器里设置，选中一段文字，在属性检查器的“目标规则”中选择“<新内联样式>”，然后定义样式，这样代码更整洁。
使用 CSS
CSS 是网页的“化妆师”，Dreamweaver 的 “CSS 设计器” 面板非常强大。
- 创建内部样式表：样式只应用于当前页面。
- 创建外部样式表：样式可以应用于整个网站，这是最推荐的方式。
- 在 “文件” 面板中，右键点击站点，新建一个文件，命名为
style.css。 - 在
index.html文件中，打开 “CSS 设计器”，点击“源”旁边的“+”号，选择“附加现有 CSS 文件”，然后选择style.css。 - 现在所有在
style.css中定义的样式，index.html都可以使用了。
- 在 “文件” 面板中，右键点击站点，新建一个文件，命名为
插入图片和链接
-
插入图片：
- 将您的图片文件（如
logo.png）放入站点文件夹的images子文件夹中。 - 在设计视图中,将光标放在您想插入图片的位置。
- 点击 “插入” > “图像”，或直接从 “文件” 面板中拖拽图片到文档窗口。
- 在属性检查器中,您可以设置图片的替代文本（非常重要，用于SEO和无障碍访问）、调整大小等。
- 将您的图片文件（如
-
创建链接：
- 选中您想设置为链接的文本或图片。
- 在 “属性检查器” 的 “链接” 框中，输入目标地址。
- 内部链接：输入
about.html。 - 外部链接：输入
http://www.example.com。 - 锚点链接：输入
#top。
- 内部链接：输入
- 您还可以设置链接在新窗口中打开（
目标属性设为_blank）。
插入媒体
- 视频：“插入” > “HTML” > “视频”，Dreamweaver 会自动生成 HTML5 的
<video>标签，并允许您设置视频源、封面、自动播放等属性。 - 音频：“插入” > “HTML” > “音频”，类似地，生成 HTML5 的
<audio>
第三部分：高级应用
响应式设计与“流体网格布局”
响应式网页可以自动适应不同尺寸的设备（桌面、平板、手机）。
Dreamweaver 提供了 “流体网格布局” 功能来简化这个过程。
- 创建流体网格布局页面：
文件 > 新建 > > Fluid Grid Layout。 - 设置断点：Dreamweaver 会自动为不同设备（手机 < 768px, 平板 768-1024px, 桌面 > 1024px
