Adobe Dreamweaver CS6 全方位教程

Dreamweaver CS6 是一款经典的网页设计和开发工具，它强大的“实时视图”和“代码提示”功能让网页制作变得高效，虽然现在有更新的版本，但其核心设计理念和操作流程至今仍不过时。

第一部分：入门基础

什么是 Dreamweaver？

Dreamweaver 是一个“所见即所得”（WYSIWYG）的网页编辑器，但它不仅仅是“所见即所得”，它最大的特点是：

• 可视化设计： 像使用 Word 一样，通过拖拽和点击来构建页面布局。
• 强大的代码编辑器： 支持HTML、CSS、JavaScript等多种语言的代码编写，并提供智能提示和语法高亮。
• 工作区集成： 可视化编辑器和代码编辑器可以无缝切换，满足不同开发者的需求。

安装与启动

1. 安装： 找到 Dreamweaver CS6 的安装程序，按照向导提示完成安装，如果使用的是破解版，请务必注意安全风险。
2. 启动： 双击桌面图标启动 Dreamweaver CS6。

认识工作区界面

启动后,你会看到一个复杂但功能丰富的界面，我们先来认识几个最重要的面板：

• 菜单栏： 包含所有命令，如“文件”、“编辑”、“查看”、“插入”等。
• 工具栏： 包含一些常用操作的快捷按钮，如“代码”、“拆分”、“实时视图”等，这是最核心的视图切换区域。
• 文档窗口： 这是你的主要工作区，用来显示和编辑网页。
• 插入面板： 按类别（常用、布局、表单等）提供了各种网页元素的快捷插入按钮。
• 文件面板： 类似于 Windows 的资源管理器，用于管理你网站的所有文件和文件夹。
• 属性检查器： 选中页面上的任何元素（如图片、文字、表格），这个面板都会显示其属性，并允许你直接修改。
• CSS 设计器/样式检查器： 这是 CSS 样式的核心控制面板，用于创建和管理 CSS 规则。

第二部分：创建你的第一个网站

定义站点

这是最重要的一步！ 在开始制作网页前，你必须先告诉 Dreamweaver 你的网站文件存放在哪里。

1. 点击菜单栏的 站点 -> 新建站点。
2. 在弹出的对话框中,输入你的 站点名称（我的第一个网站）。
3. 在“本地站点文件夹”中，点击文件夹图标，选择一个空文件夹作为你网站的根目录。强烈建议不要使用中文或空格命名文件夹。
4. 点击“保存”，Dreamweaver 会在你的站点文件夹中自动生成一个 _notes 文件夹和一些缓存文件，这是正常的。

为什么必须定义站点？

• 路径管理： Dreamweaver 会自动处理图片、链接等文件的相对路径，避免网页上传到服务器后找不到文件。
• 文件管理： 方便你管理网站的所有文件。
• 服务器同步： 方便以后上传文件到 FTP 服务器。

创建第一个网页

1. 在 文件 面板中，右键点击你的站点根目录。
2. 选择 新建文件。
3. 将文件命名为 index.html。注意： 网站首页通常必须命名为 index.html、index.htm 或 default.html。

切换视图模式

在工具栏中,你会看到三个重要的视图按钮：

• 代码： 只显示 HTML/CSS/JavaScript 代码。
• 拆分： 最常用的模式！ 上半部分显示代码，下半部分显示实时预览，你可以在代码区修改，立刻在预览区看到效果，反之亦然。
• 实时视图： 只显示可视化的设计效果，你无法直接编辑代码，但可以像在浏览器中一样与页面交互。

第三部分：核心功能详解

使用“插入”面板添加元素

• 添加文本： 直接在文档窗口中输入即可。
• 添加图片：
  1. 将光标放在要插入图片的位置。
  2. 在 插入 面板中，点击“常用”类别下的“图像”图标。
  3. 选择“图像”，然后浏览并选择一张图片。
  4. 在弹出的对话框中,如果图片不在站点文件夹内，Dreamweaver 会提示你将其复制到根文件夹，请选择“是”。
  5. 在 属性检查器 中，可以设置图片的宽、高、替代文本（非常重要，利于SEO和无障碍访问）等。
• 添加链接：
  1. 选中一段文字或一张图片。
  2. 在 属性检查器 的“链接”框中，输入要跳转到的网址（如 http://www.google.com）或选择站点内的其他文件（如 about.html）。
  3. 在“目标”下拉菜单中，_blank 表示在新窗口中打开链接。

使用 CSS 进行样式设计

CSS 是网页的“化妆师”，在 DW CS6 中，主要通过 CSS 设计器 面板来管理。

• 创建内部样式表：

  1. 点击菜单栏的 窗口 -> CSS 设计器，确保该面板打开。
  2. 在 CSS 设计器面板中，点击“源”下的“+”号，选择“创建新的 CSS 文件”。
  3. 输入样式表文件名（如 style.css），并选择保存位置（通常在站点根目录下）。
  4. 你的 HTML 文件会自动链接到这个 CSS 文件。

• 应用 CSS 样式：

  
  （图片来源网络，侵删）
  1. 在 CSS 设计器面板中，点击“选择器”下的“+”号，创建一个新的选择器（为整个页面设置背景色，可以创建一个 body 选择器）。
  2. 在“属性”区域，你可以设置各种样式，如：
     • 背景： 设置背景颜色或背景图片。
     • 布局： 设置宽度、高度、外边距、内边距。
     • 文本： 设置字体、字号、颜色、行高。
  3. 设置好属性后,回到文档窗口，选中要应用样式的元素，然后在 CSS 设计器面板中直接点击你创建的选择器即可。

使用“布局”模式进行页面布局

对于初学者,使用“插入”面板中的“布局”类可以快速搭建页面框架。

• 插入表格：

  1. 在“布局”面板中，点击“表格”图标。
  2. 设置表格的行数、列数、宽度（建议使用百分比，如 100%，这样页面会自适应不同屏幕）、边框粗细等。
  3. 表格是传统布局方式,适合展示规整的数据。

• 使用 AP Div (绝对定位)：

  • 这是一种更灵活的布局方式,可以在页面上任意“漂浮”一个盒子。
  1. 在“布局”面板中，点击“绘制 AP Div”。
  2. 在页面上按住鼠标左键拖动,即可绘制出一个可移动、可调整大小的层。
  3. 你可以在 AP Div 中放置文字、图片等任何内容。
  4. 选中 AP Div 后，可以在属性检查器中精确设置其位置和大小。

第四部分：工作流程与实用技巧

模板和库

• 模板： 如果网站的多个页面有相同的头部和底部（如导航栏和版权信息），使用模板可以极大提高效率。
  1. 制作一个标准的页面（如 template.dwt）。
  2. 将需要重复使用的部分（如导航栏）设置为可编辑区域。
  3. 保存为模板,之后基于此模板创建新页面，修改模板时，所有基于它的页面都会自动更新。
• 库： 用于存放单个可重复使用的元素，比如一个标准的按钮、一段版权文本等。

Spry 框架（CS6 的特色功能）

Spry 是 Adobe 提供的一个 Ajax 框架，可以轻松创建交互式组件，无需编写复杂代码。

• 创建 Spry 菜单栏：
  1. 在 插入 面板中，切换到 Spry 类别。
  2. 点击“Spry 菜单栏”，选择水平