section 2.1 认识工作界面
导读
Dreamweaver CC包含了一个崭新、高效的界面，性能也得到了改进。此外，Dreamweaver CC还包含了众多新增功能，改善了软件的操作性，用户无论使用设计视图还是代码视图都可以方便地创建网页。本节主要讲述Dreamweaver CC的工作环境。
2.1.1 界面布局
微课堂 00分12秒
启动Dreamweaver CC，进入Dreamweaver CC工作界面，其中包括菜单栏、工具栏、状态栏、编辑窗口、【属性】面板和浮动面板组6个部分，如图2-1所示。
图2-1
2.1.2 工具、窗口和面板
微课堂 00分48秒
本节将详细介绍Dreamweaver CC工作界面中工具栏、编辑窗口和【属性】面板的功能和作用。
1 工具
工具栏中包含了各种工具按钮，单击左侧的【代码】按钮、【拆分】按钮、【设计】按钮，可以在文档的不同视图间快速切换，包括【代码】视图、【设计】视图，或者同时显示【代码】视图和【设计】视图的【拆分】视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图2-2所示。
图2-2
➢ 【代码】按钮：单击此按钮，可以在文档窗口中显示【代码】视图。
➢ 【拆分】按钮：在文档窗口的一部分显示【代码】视图，而在另一部分中显示【设计】视图。
➢ 【设计】按钮：单击此按钮，可以在【文档】窗口中显示【设计】视图。
➢ 【实时视图】按钮：显示不可编辑的、交互式的、基于浏览器的文档视图。
➢ 【在浏览器中预览/调试】按钮
：单击此按钮，从弹出的菜单中选择一个浏览器即可在浏览器中预览或调试文档。
➢ 【标题】文本框：可以为文档输入一个标题，该标题将显示在浏览器的标题栏中。
➢ 【文件管理】按钮
：当有多个人对一个页面进行操作时，单击该按钮可以进行获取、取出、打开文件，导出和设计附注等操作。
2 窗口
在编辑窗口中，网页制作者可以实时查看网页制作的效果，从而进行进一步的完善与修改工作，如图2-3所示。
图2-3
3 面板
Dreamweaver CC有很多面板，单击【窗口】主菜单，在弹出的菜单中用户可以根据需要将面板调出，如图2-4所示。
图2-4
2.1.3 使用【插入】面板
微课堂 00分17秒
【插入】面板中包括【常用】、【结构】、【媒体】、【表单】、jQuery Mobile、jQuery UI、【模板】和【收藏夹】8个选项，每个选项又包含多个子选项，用户可以根据需要在网页中插入适合网页的内容，如图2-5所示。
图2-5
➢ 【常用】选项：在该选项中提供了网页中常用对象的插入按钮，包括Div、图像和表格等。
➢ 【结构】选项：该选项是Dreamweaver CC新增的选项，在该选项中提供了与网页结构相关的对象的插入按钮，包括页眉、页脚和标题等。
➢ 【媒体】选项：该选项提供了网页中各种媒体对象的插入按钮，包括Flash、FLV和视频等。
➢ 【表单】选项：该选项提供了网页中表单对象的插入按钮，并且新增了许多全新的HTML5表单对象，包括表单、文本和密码等。
➢ jQuery Mobile选项：该选项提供了一系列针对移动设备页面开发的按钮，包括页面、列表视图和布局网格等。
➢ jQuery UI选项：该选项是Dreamweaver CC新增的选项，提供了以jQuery为基础的开源JavaScript网页用户界面代码库。
➢ 【模板】选项：该选项提供了Dreamweaver CC中各种模板对象的创建按钮，包括创建模板、创建可编辑区域等。
➢ 【收藏夹】选项：该选项用于收藏用户自定义的网页对象创建按钮。在默认情况下该选项中没有对象，用户可以根据自己的使用习惯将常用的网页对象创建按钮添加到该选项中。
➢ 【隐藏标签】选项：选择该选项，可以隐藏【插入】面板中各插入对象按钮后的标签提示，只显示插入按钮，如图2-6所示；当选择了【隐藏标签】选项后，该选项变为【显示标签】选项，如图2-7所示。
图2-6
图2-7
2.1.4 属性检查器
微课堂 00分21秒
Dreamweaver CC的属性检查器又称为【属性】面板，主要用于查看和更改所选择对象的各种属性。其中包含两个选项即HTML选项和CSS选项，HTML选项为默认格式。单击不同的选项可以设置不同的属性，如图2-8所示。
图2-8
使用属性检查器，可以检查和编辑当前页面选定元素的最常用属性，如文本和插入的对象。属性检查器的内容根据选定元素的不同会有所不同。
默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。单击属性检查器右上角的下拉按钮
，在弹出的菜单中选择【关闭】菜单项即可关闭属性检查器，如图2-9所示。
图2-9
2.1.5 管理面板和面板组
微课堂 00分18秒
在Dreamweaver CC工作界面中，如果打开太多面板窗口，会使工作界面显得混乱，不利于操作，这时可以单击面板右上角的【折叠为图标】按钮
，如图2-10所示。面板缩小后，即可将其排列到一起形成浮动面板组，如图2-11所示。
图2-10
图2-11
知识拓展
面板打开之后可能随意放置在屏幕上，有时会很杂乱，这时可以执行【窗口】→【工作区布局】命令，选择一种布局方式，将面板整齐地摆放在屏幕上。当需要更大的编辑窗口时，可以按F4键将所有的面板隐藏。再按一下F4键，隐藏的面板又会在原来的位置上出现。