第一部分：Dreamweaver CS6 简介

Dreamweaver CS6 是 Adobe 公司推出的一款专业的可视化网页开发工具，它最大的特点是 “所见即所得” 的可视化编辑与强大的 代码编辑 功能完美结合。

核心优势：

1. 可视化设计 (Design 视图): 无需编写代码，通过拖拽元素即可快速搭建页面布局,非常适合初学者。
2. 强大的代码编辑 (Code 视图): 提供语法高亮、代码提示、自动补全等功能,让专业开发者也能高效工作。
3. 实时视图: 一个更接近浏览器真实效果的预览模式，解决了早期 Design 视图显示不准的问题。
4. 管理站点: 方便地管理整个网站的文件、链接和资源。
5. CSS 样式面板: 直观地创建和管理 CSS 样式，支持 3D 变换等高级特性。

适用人群：

• 网页设计初学者
• 需要快速制作静态网页的设计师
• 前端开发人员（作为辅助工具）

第二部分：界面布局与核心功能初探

打开 Dreamweaver CS6,您会看到以下几个关键区域：

1. 菜单栏: 包含所有命令，如文件、编辑、查看、插入、修改、站点、窗口、帮助等。
2. 插入栏: 用于向页面中插入各种元素，如图片、表格、链接、表单、媒体等。
3. 文档工具栏: 包含视图切换按钮（代码、设计、实时视图）、浏览器预览按钮、文件管理按钮等。
4. 文档窗口: 这是您的主工作区,显示和编辑网页内容。
5. 属性检查器: （最重要的面板） 当您选中页面上的某个元素（如图片、文字、表格）时，这里会显示该元素的所有属性，并允许您直接修改,这是可视化设计的核心。
6. 面板组: 位于右侧，包含 文件（站点管理）、插入、CSS 样式、AP 元素、行为 等面板，您可以自由拖动、停靠或折叠这些面板。

第三部分：创建和管理您的第一个站点

在开始制作网页前，强烈建议先创建一个站点，这能确保所有文件的链接、图片路径都正确无误。

1. 打开站点管理器: 点击菜单栏 站点 -> 管理站点。
2. 新建站点: 在弹出的窗口中，点击 新建 -> 站点。
3. 命名站点: 给您的站点起一个名字（"我的第一个网站"），这只是为了在 Dreamweaver 中识别。
4. 选择本地根文件夹: 点击右侧文件夹图标，选择您电脑上存放网站所有文件的那个文件夹（在 D 盘创建一个名为 MyWebsite 的文件夹）。
5. 完成设置: 点击“完成”，在右侧的 文件 面板中，您就可以看到您的站点了，您可以在这里创建新的 HTML 文件、文件夹，并像在 Windows 资源管理器一样管理它们。

第四部分：核心功能详解与操作步骤

创建和保存网页

1. 在 文件 面板中，右键点击您的站点根目录，选择 新建文件。
2. 将文件命名为 index.html。（index.html 是网站首页的默认文件名）。
3. 双击打开 index.html，Dreamweaver 会自动切换到 实时视图。
4. 点击菜单 文件 -> 保存（快捷键 Ctrl+S）。

三种视图模式详解

• 代码视图: 显示页面的 HTML、CSS、JavaScript 源代码,您可以在这里直接编写或修改代码。
• 设计视图: 一个“所见即所得”的编辑器，您可以像在 Word 里一样输入文字、拖拽图片。（注意：CS6 的 Design 视图对 HTML5 和 CSS3 的支持有限，强烈推荐使用实时视图）
• 实时视图: （推荐使用） 它在一个类似浏览器的环境中渲染您的页面，比 Design 视图更准确、更现代，您可以在此视图中直接编辑内容,体验非常接近现代的网页编辑器。

插入文本和格式化

1. 在 实时视图 中,直接输入您的文字内容。
2. 选中文字，在 属性检查器 中：
   • 格式: 应用标题（如 <h1>, <h2>）或段落（<p>）。
   • 字体: 设置字体。
   • 大小: 设置字号。
   • 颜色: 设置文字颜色。
   • 粗体/斜体: 快速应用样式。

插入和编辑图片

1. 将您的图片文件（如 logo.png）放入站点文件夹中。
2. 将光标放在您想插入图片的位置。
3. 在 插入 栏中，点击 常用 选项卡下的 图像 图标，或者点击菜单 插入 -> 图像。
4. 在弹出的窗口中选择您的图片文件，点击“确定”。
5. 编辑图片属性: 选中插入的图片，在 属性检查器 中进行设置：
   • 源文件: 确认图片路径是正确的（应该在您的站点文件夹内）。
   • 宽/高: 调整图片尺寸。（建议先在图片软件中调整好尺寸再导入，这里缩放会影响加载性能）
   • 替换: 为图片添加替代文本，这对 SEO 和无障碍访问非常重要。
   • 边框: 为图片添加边框。

创建超链接

1. 选中您想设置为链接的文字或图片。
2. 在 属性检查器 的 链接 文本框中：
   • 链接到外部网站: 输入完整的网址，如 https://www.google.com。
   • 链接到网站内部页面: 点击文件夹图标，选择同一站点下的其他 HTML 文件（如 about.html）。
   • 链接到邮箱: 输入 mailto: 开头的邮箱地址，如 mailto:example@email.com。
   • 链接到页面锚点: 先在目标位置插入“命名锚点”,然后在此处选择该锚点。
3. 目标: 通常设置为 _blank,表示点击链接后在新标签页中打开。

使用 CSS 样式面板（核心功能）

CSS 是网页的“化妆师”，Dreamweaver 提供了强大的 CSS 管理工具。

创建内部样式表（适用于单页）

1. 打开 CSS 样式 面板（通常在右侧）。
2. 点击面板右下角的 新建 CSS 规则 图标。
3. 在弹出的窗口中：
   • 选择器类型: 选择 类（最常用，可重复使用）。
   • 选择器名称: 输入一个以点 开头的名字，如 .blue-text。
   • 规则定义: 选择 仅限该文档。
4. 点击“确定”，会弹出 CSS 规则定义 窗口，在这里您可以设置：
   • 类型: 字体、大小、颜色、行高等。
   • 背景: 背景颜色、背景图片等。
   • 区块: 文本对齐、字母间距等。
   • 方框: 宽度、高度、内外边距等。
   • 边框: 边框样式、颜色、宽度。
   • 定位: 元素的定位方式。
5. 设置完成后点击“确定”，您会发现 .blue-text 这个样式已经出现在 CSS 样式 面板中。
6. 应用样式: 选中页面上的文字，然后在 属性检查器 的 类 下拉菜单中选择 .blue-text 即可。

创建外部样式表（推荐，适用于多页网站）

1. 在 CSS 样式 面板中，点击 新建 CSS 规则。
2. 在弹出的窗口中：
   • 选择器类型: 类。
   • 选择器名称: 如 .button-style。
   • 规则定义: 选择 新建样式表文件。
3. 点击“确定”，会提示您保存这个 CSS 文件，将其命名为 style.css 并保存在站点的文件夹中。
4. 接下来会弹出 CSS 规则定义窗口,像上面一样设置您的样式。
5. 应用样式: 应用方法和内部样式完全一样，这样，您网站的所有页面都可以链接到这个 style.css 文件,实现样式的统一管理和复用。

第五部分：使用表格和 Div+CSS 布局

使用表格布局（传统方法）

表格主要用于展示数据,但在过去也常用于页面整体布局。

1. 点击菜单 插入 -> 表格。
2. 设置表格的行数、列数、宽度（建议使用像素 px 以保证在不同屏幕下一致）、边框等。
3. 您可以直接在单元格内输入文字、插入图片。
4. 通过合并/拆分单元格,可以创建复杂的布局。

使用 Div+CSS 布局（现代标准方法）

这是目前网页开发的主流和标准。Div 是一个容器，用于包裹内容；CSS 负责定义这个容器的大小、位置、样式等。

1. 插入 Div 容器: 将光标放在页面想放置内容的位置，点击菜单 插入 -> 布局对象 -> Div 标签。
2. 设置 ID: 在弹出的窗口中，为这个 Div 设置一个唯一的 ID，如 header（用于页头）、main-content（用于主体内容）、footer（用于页脚），ID 以 开头。
3. 应用 CSS 样式:
   • 打开 CSS 样式 面板。
   • 点击 新建 CSS 规则。
   • 选择器类型: 高级 (ID, 伪类选择器等)。
   • 选择器: 直接输入 #header。
   • 规则定义: 选择 新建样式表文件 并保存为 style.css。
4. 设置布局属性: 在 CSS 规则定义窗口中，切换到 方框 和 定位 分类。
   • 宽度: 设置为 960px 或 100%。
   • 高度: 根据需要设置。
   • 浮动: 这是实现并排布局的关键！设置为 左对齐 或 右对齐。
   • 内外边距: 用于调整元素之间的间距。
5. 通过创建多个 Div 并为它们设置不同的 ID（如 #nav, #sidebar, #content），然后通过 CSS 控制它们的浮动和位置，就可以构建出灵活、强大的网页布局。

第六部分：实用技巧与最佳实践

1. 善用快捷键: Ctrl+S (保存), Ctrl+B (粗体), Ctrl+I (斜体), F12 (在浏览器中预览)。
2. 多使用“实时视图”: 尽量在实时视图中进行内容编辑,它比设计视图更可靠。
3. 先规划，后制作: 在动手前,用纸笔画出网站的结构草图。
4. 命名规范: 文件夹和文件名使用小写字母和下划线，避免使用空格和特殊字符（如 my_home_page.html）。
5. 善用代码提示: 在代码视图中，输入标签或 CSS 属性的前几个字母，Dreamweaver 会提供智能提示,提高编码效率。
6. 定期保存: 养成随手保存的好习惯。
7. 学习 HTML 和 CSS: Dreamweaver 是工具，理解 HTML 和 CSS 的基本原理能让您用得更得心应手，当可视化编辑达不到预期时,切换到代码视图进行微调是专业开发者的必备技能。

第七部分：资源与学习路径

1. 官方帮助文档: Dreamweaver 自带非常详细的帮助系统，按 F1 键即可访问,是遇到问题时最好的参考资料。
2. 在线视频教程:
   • Bilibili / YouTube: 搜索 "Dreamweaver CS6 教程" 或 "Dreamweaver CS6 从入门到精通",有大量中文免费视频课程。
   • 推荐搜索关键词: "DW CS6 基础教程", "DW CS6 网站制作实例", "DW CS6 CSS 样式面板"。
3. 练习项目:
   • 从制作一个简单的个人介绍页面开始。
   • 尝试制作一个包含“首页”、“关于我们”、“联系方式”三个页面的完整网站。
   • 练习使用 Div+CSS 布局一个博客主页或企业官网的首页。

Dreamweaver CS6 虽然版本较旧，但其核心的设计理念和操作流程对于理解网页制作流程非常有帮助，掌握它，您将能轻松地在可视化和代码之间切换，高效地完成静态网页的制作,祝您学习愉快！