ADOBE FLASH PROFESSIONAL CS6 DREAMWEAVER CS6 基础知识 ADOBE FLASH PROFESSIONAL CS6

DREAMWEAVER CS6 基础知识 1.1 Dreamweaver CS6 简介 1.2 Dreamweaver CS6 的工作界面 1.3 Dreamweaver CS6 的新功能

1.1 DREAMWEAVER CS6 简介 Dreamweaver 是一款专业的网站设计开发软件。 Dreamweaver 以及Flash、Fireworks 最早是由Macromedia 公 司开发的一套网页设计软件。Flash 用来生成矢量动画，Fireworks 用来制作网页图像，Dreamweaver 可以进行各种素材的集成和网 络发布。这三款软件在国内有“网页三剑客”之称。

1.2 Dreamweaver CS6 的工作界面 网页创建中的站点管理流程其实就是插入元素（文本、图像或 者AP 元素等）和修改已插入的元素两个过程的交替进行。 1.2.1 界面布局 在Windows 系统中的集成Dreamweaver CS6 工作区预设布局与Dreamweaver CS5 的布局种类相比，除了经典、编码器、编码人员( 高级)、设计器、设计人员（ 紧凑）和双重屏幕几种布局模式外，还新增了Business Catalyst、流体布局、移动应 用程序这三种布局模式。

1.应用程序工具栏 在Adobe Dreamweaver CS6 的窗口标题栏上整合了5 个网页制作中最常用的命令，与CS5 不同 的是，在Adobe CS6 系列中统一去除的CS Live 服务。 2. 菜单栏 它包含10 项主菜单。 3. 插入栏（插入面板） 在“流体布局”布局模式下，Dreamweaver CS6 将原先的插入栏默认呈现为插入面板形式。

4. 文档工具栏 5. 文档窗口 6. 标签选择器 在文档工具栏里，用户可以直接根据需要访问很多选项，它们被附在每一个文档窗口的顶部。 文档窗口是在创建网络站点时，所有动作出现的地方。 6. 标签选择器 标签选择器位于文档窗口底部的状态栏中

7. 属性检查器 8. 标签组（又称为面板组） 9. 文件面板 通过属性检查器可以检查和编辑当前选定的页面元 素最常用的属性。 Dreamweaver 通过一套面板和面板组系统来轻松地 处理不同的复杂界面。面板组将多个相关 面板组合使用。 9. 文件面板 它是面板组中用来管理文件和文件夹的一个面板， 这些文件可以是Dreamweaver 站点的一 部分，也可以是远程服务器上的。

1.2.2 工具、窗口和面板 本节主要详细介绍如何使用Dreamweaver CS6 中的各种特定窗口 、工具栏、面板、检查器以及Dreamweaver CS6 工作区的其他元 素。 1. 欢迎屏幕 运行Dreamweaver CS6 软件后，我们最先看到的是起始页的欢迎屏幕。

2. 文档工具栏 文档工具栏包含了一些与查看文档、在本地和远程站点间传输文档以及调试JavaScript 代码 有关的普通按钮和选项。 A.显示代码视图 I. 检查浏览器兼容性 B. 显示代码视图和设计视图 J. 可视化助理 C. 显示设计视图 K. 刷新设计视图 D. 将设计视图切换到实时视图 L. 文档标题 E. 多屏幕预览 M. 实时代码视图 F. 在浏览器中预览/ 调试 N. 检查模式 G. 文件管理 O. 浏览器导航 H. W3C 验证 L. 实时视图选项

4. 样式呈现工具栏 样式呈现工具栏默认情况下处于隐藏状态，它包含一些相关的按钮。 A ：呈现屏幕媒体类型，显示页面在计算机屏幕上的显示方式。 B ：呈现打印媒体类型，显示页面在打印纸张上的显示方式。 C ：呈现手持型媒体类型，显示页面在手持设备（如手机或 BlackBerry 设备）上的显示方式。 D ：呈现投影媒体类型，显示页面在投影设备上的显示方式。 E ：呈现 TTY 媒体类型，显示页面在电传打字机上的显示方式。 F ：呈现 TV 媒体类型，显示页面在电视屏幕上的显示方式。 G：切换 CSS 样式的显示，用于启用或禁用 CSS 样式。此按钮可独立于其它媒体按钮之外工作。 H ：设计时样式表，可用于指定设计时样式表。

5. 编码工具栏 编码工具栏垂直显示在文档窗口的左侧，只出现在代码视图中。在使用编码工具栏时，不能 将其取消停靠或移动，但是可以将它隐藏起来。

6. 状态栏 状态栏位于窗口的底部，用于提供与当前文档有关的信息 A ：标签选择器 B ：选取工具 C ：手形工具 D ：缩放工具 E ：设置缩放比率 F ：手机屏幕、平板电脑屏幕和显示器屏幕切换 G ：窗口大小弹出菜单（在“ 代码” 视图中不可用） H ：文档大小和下载时间 I ：编码指示器

7. 状态栏参数设置 为状态栏设置参数时，可以执行“编辑→首选参数”命令，打开“首选参数”对话框。在左 边的“分类”列表框中选择“窗口大小”选项，在右边就会显示出状态栏的相关设置。

1.2.3 使用插入栏 插入栏在“设计器”的工作区预设中做为一个面板悬停在文档窗口的右侧，我们可以通过面 板的下拉菜单中选择相应的类别来使用不同的对象插入功能。 插入栏包含9 类对象，分别是常用、布局、表单、数据、Spry、jQuery Mobile、InContext Editing、文本、收藏夹。 1. “ 常用”选项卡 插入栏中默认的是“常用”选项卡。它为用户准备了诸如图像、表格、媒体、链接等最常用的对 象。 2. “ 布局”选项卡 插入栏中的“布局”选项卡

3. “ 表单”选项卡 4. “ 数据”选项卡 5. “ Spry”选项卡 表单是实现HTML 互动性的一个主要方式。“表单”选项卡中为用户提供了用来创建基于网页表 单的基本构建块。 4. “ 数据”选项卡 该选项卡主要用来添加与网站后台数据库相关的动态交互元素，例如记录集、重复区域以及 插入表单和更新记录表单等。 5. “ Spry”选项卡 Spry 构件是一个JavaScript 库，具有XML 驱动的列表和表格、折叠构件、选项卡式面板、 Spry 工具提示等元素。

7. “ InContext Editing”选项卡 6. “ jQuery Mobile”选项卡 jQuery Mobile 是也是一个JavaScript 库，是jQuery 在手机上和平板设备上的版本，具有页面、列表视 图、布局网格、可折叠区块、文本输入、密码输入 、滑盖、反转切换开关等元素，大大提高了移动设 备应用程序的开发效率。 7. “ InContext Editing”选项卡 “InContext Editing”选项卡中包含供生成 InContext 编辑页面的按钮，它们分别是“创建重复区域”和 “创建可编辑区域”。 8. “ 文本”选项卡 “文本”选项卡用于插入各种文本格式和列表格式 的标签。 9. “ 收藏夹”选项卡 “收藏夹”选项卡是Dreamweaver 中很受欢迎的 附加功能，用于将“插入”面板中最常用的按钮分 组和组织到某一公共位置，提高工作效率。

1.2.4 属性检查器 属性检查器用于检查和编辑当前选定页面元素的最常用属性，随着 选定元素的不同会有所变化。它在设计视图和代码视图中都能显 示。 1.2.5 使用管理面板和面板组 Dreamweaver 通过一套面板和面板组系统来轻松地处理不同的复杂 界面。

1. 展开或折叠面板 单击面板右上角的“折叠为图标”或者“ 展开面板”图标可以轻松展开或折叠 面板，折叠为图标后的显示方式有两 种：只显示图标和显示图标以及相应 的文字。 2. 拖动面板或者面板组 在众多的面板组（又称为标签组，下同） 集合的部分，如果希望将其中一个面 板或者面板组拖出来，用户可以直接 将鼠标指针放在需要拖出的面板名称 上或者面板组名称的后面，按下鼠标 左键不放拖动鼠标就可以将其拖出。

1.2.6 Dreamweaver 中的自定义功能 1. 自定义收藏夹

2. 自定义快捷键 在Dreamweaver 中，快捷键的 使用可以弥补选项和命令较多，操 作费时，工作效率低的缺点。使用 快捷键可以避免在制作过程中从菜 单中寻找命令再执行，从而在制作 过程中节省一些时间，提高效率。 在为某项命令设置快捷键时，需要以下几个步骤 。 （1）执行“编辑→快捷键”命令，打开“快捷键 ”对话框。 （2）选择需要更改的命令，这里选择“新建”命 令，当前它的快捷键为“Ctrl+N”。 （3）单击对话框右上角的“复制副本”按钮复制 为副本（可以重命名副本的名称），在副本 设置中再次选择“新建”命令。 （4）然后单击“更改”按钮，最后单击“确定” 按钮关闭当前的对话框。

1.3 Dreamweaver CS6 的新功能 Dreamweaver CS6 版本外观变化不大，但是功能上新增了高效 创建和测试跨平台和跨浏览器的HTML5 内容的支持，新增加了开发 和打包移动设备应用程序的功能，以及优化了FTP 的性能。 1. 流体网格布局 在 Dreamweaver 中可以使用新增的流体网格布局（“新建→新建流体网格布局”）来创建 能应 对不同屏幕尺寸的布局。

2. 增强型jQuery Mobile 支持 3. PhoneGap Build 云服务集成 使用更新的 jQuery Mobile 支持为 iOS 和 Android 平台创建应用程序，简化移动开发工作流程。 3. PhoneGap Build 云服务集成 新增PhoneGap Build 云服务的直接集成，通过 Dreamweaver CS6 用户可以使用其现有的HTML 、CSS 和 JavaScript 技术来创建适用于移动设备 的本机应用程序。

4. 更新的实时视图 5. 更新的多屏幕预览面板 6. CSS 过滤效果 使用更新的“实时视图”功能在发布前测试页面。 利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所呈现的页面效果 6. CSS 过滤效果 使用新增的“CSS 过渡效果”面板，能使页面元素的变化平滑运动起来。

7. 多 CSS 类选区 8. Business Catalyst 集成 9. Web 字体 10. 简化的 PSD 优化 在 Dreamweaver 中可以使用有创造性的 Web 支持字体（如 Google 或 Typekit Web 字体 ） 10. 简化的 PSD 优化 Dreamweaver CS5“图像预览”对话框现在 叫做“图像优化”对话框。 11. 对 FTP 传递的改进 Dreamweaver 使用多线程传输选定文件 12. 站点管理面板改进