.Dreamweaver CS6 基础知识VIP

DREAMWEAVERCS6基础知识 ADOBEFLASHPROFESSIONALCS6 DREAMWEAVERCS6基础知识 1 1DreamweaverCS6简介1 2DreamweaverCS6的工作界面1 3DreamweaverCS6的新功能 1 1DREAMWEAVERCS6简介 Dreamweaver是一款专业的网站设计开发软件 Dreamweaver以及Flash Fireworks最早是由Macromedia公司开发的一套网页设计软件 Flash用来生成矢量动画 Fireworks用来制作网页图像 Dreamweaver可以进行各种素材的集成和网络发布 这三款软件在国内有 网页三剑客 之称 1 2DREAMWEAVERCS6的工作界面 网页创建中的站点管理流程其实就是插入元素 文本 图像或者AP元素等 和修改已插入的元素两个过程的交替进行 1 2 1界面布局在Windows系统中的集成DreamweaverCS6工作区预设布局与DreamweaverCS5的布局种类相比 除了经典 编码器 编码人员 高级 设计器 设计人员 紧凑 和双重屏幕几种布局模式外 还新增了BusinessCatalyst 流体布局 移动应用程序这三种布局模式 1 应用程序工具栏在AdobeDreamweaverCS6的窗口标题栏上整合了5个网页制作中最常用的命令 与CS5不同的是 在AdobeCS6系列中统一去除的CSLive服务 2 菜单栏它包含10项主菜单 3 插入栏 插入面板 在 流体布局 布局模式下 DreamweaverCS6将原先的插入栏默认呈现为插入面板形式 4 文档工具栏在文档工具栏里 用户可以直接根据需要访问很多选项 它们被附在每一个文档窗口的顶部 5 文档窗口文档窗口是在创建网络站点时 所有动作出现的地方 6 标签选择器标签选择器位于文档窗口底部的状态栏中 7 属性检查器通过属性检查器可以检查和编辑当前选定的页面元素最常用的属性 8 标签组 又称为面板组 Dreamweaver通过一套面板和面板组系统来轻松地处理不同的复杂界面 面板组将多个相关面板组合使用 9 文件面板它是面板组中用来管理文件和文件夹的一个面板 这些文件可以是Dreamweaver站点的一部分 也可以是远程服务器上的 1 2 2工具 窗口和面板本节主要详细介绍如何使用DreamweaverCS6中的各种特定窗口 工具栏 面板 检查器以及DreamweaverCS6工作区的其他元素 1 欢迎屏幕运行DreamweaverCS6软件后 我们最先看到的是起始页的欢迎屏幕 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 jQueryMobile InContextEditing 文本 收藏夹 1 常用 选项卡插入栏中默认的是 常用 选项卡 它为用户准备了诸如图像 表格 媒体 链接等最常用的对象 2 布局 选项卡插入栏中的 布局 选项卡 3 表单 选项卡表单是实现HTML互动性的一个主要方式 表单 选项卡中为用户提供了用来创建基于网页表单的基本构建块 4 数据 选项卡该选项卡主要用来添加与网站后台数据库相关的动态交互元素 例如记录集 重复区域以及插入表单和更新记录表单等 5 Spry 选项卡Spry构件是一个JavaScript库 具有XML驱动的列表和表格 折叠构件 选项卡式面板 Spry工具提示等元素 6 jQueryMobile 选项卡jQueryMobile是也是一个JavaScript库 是jQuery在手机上和平板设备上的版本 具有页面 列表视图 布局网格 可折叠区块 文本输入 密码输入 滑盖 反转切换开关等元素 大大提高了移动设备应用程序的开发效率 7 InContextEditing 选项卡 InContextEditing 选项卡中包含供生成InContext编辑页面的按钮 它们分别是 创建重复区域 和 创建可编辑区域 8 文本 选项卡 文本 选项卡用于插入各种文本格式和列表格式的标签 9 收藏夹 选项卡 收藏夹 选项卡是Dreamweaver中很受欢迎的附加功能 用于将 插入 面板中最常用的按钮分组和组织到某一公共位置 提高工作效率 1 2 4属性检查器属性检查器用于检查和编辑当前选定页面元素的最常用属性 随着选定元素的不同会有所变化 它在设计视图和代码视图中都能显示 1 2 5使用管理面板和面板组Dreamweaver通过一套面板和面板组系统来轻松地处理不同的复杂界面 1 展开或折叠面板单击面板右上角的 折叠为图标 或者 展开面板 图标可以轻松展开或折叠面板 折叠为图标后的显示方式有两种 只显示图标和显示图标以及相应的文字 2 拖动面板或者面板组在众多的面板组 又称为标签组 下同 集合的部分 如果希望将其中一个面板或者面板组拖出来 用户可以直接将鼠标指针放在需要拖出的面板名称上或者面板组名称的后面 按下鼠标左键不放拖动鼠标就可以将其拖出 1 2 6Dreamweaver中的自定义功能1 自定义收藏夹 2 自定义快捷键在Dreamweaver中 快捷键的使用可以弥补选项和命令较多 操作费时 工作效率低的缺点 使用快捷键可以避免在制作过程中从菜单中寻找命令再执行 从而在制作过程中节省一些时间 提高效率 在为某项命令设置快捷键时 需要以下几个步骤 1 执行 编辑 快捷键 命令 打开 快捷键 对话框 2 选择需要更改的命令 这里选择 新建 命令 当前它的快捷键为 Ctrl N 3 单击对话框右上角的 复制副本 按钮复制为副本 可以重命名副本的名称 在副本设置中再次选择 新建 命令 4 然后单击 更改 按钮 最后单击 确定 按钮关闭当前的对话框 1 3DREAMWEAVERCS6的新功能 DreamweaverCS6版本外观变化不大 但是功能上新增了高效创建和测试跨平台和跨浏览器的HTML5内容的支持 新增加了开发和打包移动设备应用程序的功能 以及优化了FTP的性能 1 流体网格布局在Dreamweaver中可以使用新增的流体网格布局 新建 新建流体网格布局 来创建能应对不同屏幕尺寸的布局 2 增强型jQueryMobile支持使用更新的jQueryMobile支持为iOS和Android平台创建应用程序 简化移动开发工作流程 3 PhoneGapBuild云服务集成新增PhoneGapBuild云服务的直接集成 通过DreamweaverCS6用户可以使用其现有的HTML CSS和JavaScript技术来创建适用于移动设备的本机应用程序 4 更新的实时视图使用更新的 实时视图 功能在发布前测试页面 5 更新的多屏幕预览面板利用更新的 多屏幕预览 面板检查智能手机 平板电脑和台式机所呈现的页面效果6 CSS过滤效果使用新增的 CSS过渡效果 面板 能使页面元素的变化平滑运动起来 7 多CSS类选区现在可以将多个CSS类应用于单个元素 8 BusinessC