DreamweaverCS基础知识解析课件

1、DREAMWEAVER CS6 基础知识ADOBE FLASH PROFESSIONAL CS6第1页，共24页。DREAMWEAVER CS6 基础知识1.1 Dreamweaver CS6 简介1.2 Dreamweaver CS6 的工作界面1.3 Dreamweaver CS6 的新功能第2页，共24页。1.1 DREAMWEAVER CS6 简介Dreamweaver 是一款专业的网站设计开发软件。Dreamweaver 以及Flash、Fireworks 最早是由Macromedia 公司开发的一套网页设计软件。Flash 用来生成矢量动画，Fireworks 用来制作网页图像，D

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

3、页。1.应用程序工具栏在Adobe Dreamweaver CS6 的窗口标题栏上整合了5 个网页制作中最常用的命令，与CS5 不同的是，在Adobe CS6 系列中统一去除的CS Live 服务。2. 菜单栏它包含10 项主菜单。3. 插入栏（插入面板）在“流体布局”布局模式下，Dreamweaver CS6 将原先的插入栏默认呈现为插入面板形式。第5页，共24页。4. 文档工具栏在文档工具栏里，用户可以直接根据需要访问很多选项，它们被附在每一个文档窗口的顶部。5. 文档窗口文档窗口是在创建网络站点时，所有动作出现的地方。6. 标签选择器标签选择器位于文档窗口底部的状态栏中第6页，共24页。

4、7. 属性检查器通过属性检查器可以检查和编辑当前选定的页面元素最常用的属性。8. 标签组（又称为面板组）Dreamweaver 通过一套面板和面板组系统来轻松地处理不同的复杂界面。面板组将多个相关面板组合使用。9. 文件面板它是面板组中用来管理文件和文件夹的一个面板，这些文件可以是Dreamweaver 站点的一部分，也可以是远程服务器上的。第7页，共24页。1.2.2 工具、窗口和面板本节主要详细介绍如何使用Dreamweaver CS6 中的各种特定窗口、工具栏、面板、检查器以及Dreamweaver CS6 工作区的其他元素。1. 欢迎屏幕运行Dreamweaver CS6 软件后，我们

5、最先看到的是起始页的欢迎屏幕。第8页，共24页。2. 文档工具栏文档工具栏包含了一些与查看文档、在本地和远程站点间传输文档以及调试JavaScript 代码有关的普通按钮和选项。A.显示代码视图 I. 检查浏览器兼容性B. 显示代码视图和设计视图 J. 可视化助理C. 显示设计视图 K. 刷新设计视图D. 将设计视图切换到实时视图 L. 文档标题E. 多屏幕预览 M. 实时代码视图F. 在浏览器中预览/ 调试 N. 检查模式G. 文件管理 O. 浏览器导航H. W3C 验证 L. 实时视图选项第9页，共24页。4. 样式呈现工具栏样式呈现工具栏默认情况下处于隐藏状态，它包含一些相关的按钮。A

6、：呈现屏幕媒体类型，显示页面在计算机屏幕上的显示方式。B ：呈现打印媒体类型，显示页面在打印纸张上的显示方式。C ：呈现手持型媒体类型，显示页面在手持设备（如手机或 BlackBerry 设备）上的显示方式。D ：呈现投影媒体类型，显示页面在投影设备上的显示方式。E ：呈现 TTY 媒体类型，显示页面在电传打字机上的显示方式。F ：呈现 TV 媒体类型，显示页面在电视屏幕上的显示方式。G：切换 CSS 样式的显示，用于启用或禁用 CSS 样式。此按钮可独立于其它媒体按钮之外工作。H ：设计时样式表，可用于指定设计时样式表。第10页，共24页。5. 编码工具栏编码工具栏垂直显示在文档窗口的左侧，

7、只出现在代码视图中。在使用编码工具栏时，不能将其取消停靠或移动，但是可以将它隐藏起来。第11页，共24页。6. 状态栏状态栏位于窗口的底部，用于提供与当前文档有关的信息A ：标签选择器B ：选取工具C ：手形工具D ：缩放工具 E ：设置缩放比率F ：手机屏幕、平板电脑屏幕和显示器屏幕切换G ：窗口大小弹出菜单（在“ 代码” 视图中不可用）H ：文档大小和下载时间I ：编码指示器第12页，共24页。7. 状态栏参数设置为状态栏设置参数时，可以执行“编辑首选参数”命令，打开“首选参数”对话框。在左边的“分类”列表框中选择“窗口大小”选项，在右边就会显示出状态栏的相关设置。第13页，共24页。1.

8、2.3 使用插入栏插入栏在“设计器”的工作区预设中做为一个面板悬停在文档窗口的右侧，我们可以通过面板的下拉菜单中选择相应的类别来使用不同的对象插入功能。插入栏包含9 类对象，分别是常用、布局、表单、数据、Spry、jQuery Mobile、InContextEditing、文本、收藏夹。1. “ 常用”选项卡插入栏中默认的是“常用”选项卡。它为用户准备了诸如图像、表格、媒体、链接等最常用的对象。2. “ 布局”选项卡插入栏中的“布局”选项卡第14页，共24页。3. “ 表单”选项卡表单是实现HTML 互动性的一个主要方式。“表单”选项卡中为用户提供了用来创建基于网页表单的基本构建块。4. “

9、 数据”选项卡该选项卡主要用来添加与网站后台数据库相关的动态交互元素，例如记录集、重复区域以及插入表单和更新记录表单等。5. “ Spry”选项卡Spry 构件是一个JavaScript 库，具有XML 驱动的列表和表格、折叠构件、选项卡式面板、Spry 工具提示等元素。第15页，共24页。6. “ jQuery Mobile”选项卡jQuery Mobile 是也是一个JavaScript 库，是jQuery 在手机上和平板设备上的版本，具有页面、列表视图、布局网格、可折叠区块、文本输入、密码输入、滑盖、反转切换开关等元素，大大提高了移动设备应用程序的开发效率。7. “ InContext

10、Editing”选项卡“InContext Editing”选项卡中包含供生成 InContext 编辑页面的按钮，它们分别是“创建重复区域”和“创建可编辑区域”。8. “ 文本”选项卡“文本”选项卡用于插入各种文本格式和列表格式的标签。9. “ 收藏夹”选项卡“收藏夹”选项卡是Dreamweaver 中很受欢迎的附加功能，用于将“插入”面板中最常用的按钮分组和组织到某一公共位置，提高工作效率。第16页，共24页。1.2.4 属性检查器属性检查器用于检查和编辑当前选定页面元素的最常用属性，随着选定元素的不同会有所变化。它在设计视图和代码视图中都能显示。1.2.5 使用管理面板和面板组Dream

11、weaver 通过一套面板和面板组系统来轻松地处理不同的复杂界面。第17页，共24页。1. 展开或折叠面板单击面板右上角的“折叠为图标”或者“展开面板”图标可以轻松展开或折叠面板，折叠为图标后的显示方式有两种：只显示图标和显示图标以及相应的文字。2. 拖动面板或者面板组在众多的面板组（又称为标签组，下同）集合的部分，如果希望将其中一个面板或者面板组拖出来，用户可以直接将鼠标指针放在需要拖出的面板名称上或者面板组名称的后面，按下鼠标左键不放拖动鼠标就可以将其拖出。第18页，共24页。1.2.6 Dreamweaver 中的自定义功能 1. 自定义收藏夹第19页，共24页。2. 自定义快捷键在Dr

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

13、功能Dreamweaver CS6 版本外观变化不大，但是功能上新增了高效创建和测试跨平台和跨浏览器的HTML5 内容的支持，新增加了开发和打包移动设备应用程序的功能，以及优化了FTP 的性能。1. 流体网格布局在 Dreamweaver 中可以使用新增的流体网格布局（“新建新建流体网格布局”）来创建能应对不同屏幕尺寸的布局。第21页，共24页。2. 增强型jQuery Mobile 支持使用更新的 jQuery Mobile 支持为 iOS 和 Android 平台创建应用程序，简化移动开发工作流程。3. PhoneGap Build 云服务集成新增PhoneGap Build 云服务的直接集成，通过Dreamweaver CS6 用户可以使用其现有的HTML、CSS 和 JavaScript 技术来创建适用于移动设备的本机应用程序。第22页，共24页。4. 更新的实时视图使用更新的“实时视图”功能在发布前测试页面。5. 更新的多屏幕预览面板利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所呈现的页面效果6. CSS 过滤效果使用新增的“CSS 过渡效果”面板，能使页面元素的变化平滑运动起来。第23页，共24页。7. 多 CSS 类选区现在可以将多个 CSS 类应用于单个元素。8. Business Catalyst 集成