2.1 Dreamweaver CC工作界面

Adobe Dreamweaver CC是一款集网页设计、制作和网站管理于一身的可视化网页编辑软件，它保留了Dreamweaver早期版本的各种优点，不仅可以轻松设计网站的前台页面，也可以方便地实现网站后台各种复杂的功能。

2.1.1 工作环境

Dreamweaver CC（本书采用Dreamweaver CC 2017版本）的工作环境由应用程序栏、文档工具栏、工作区切换器、工具栏、状态栏、设计窗口、代码窗口和面板等部分组成，如图2-1所示。

A. 应用程序栏　B. 文档工具栏　C. 工作区切换器　D. 工具栏　E. 设计窗口　F. 面板　G. 代码窗口　H. 标签选择器　I. 状态栏

1. 应用程序栏

应用程序栏位于应用程序窗口顶部，包含一个工作区切换器、几个菜单（仅限Windows）以及其他应用程序控件。

2. 文档工具栏

文档工具栏包含的按钮可用于选择“文档”窗口的不同视图，如“拆分”视图、“实时”视图和“代码”视图。

各按钮的含义如下。

【代码】：只在【文档】窗口中显示代码视图。代码视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码，如PHP或ColdFusion标记语言（CFML），以及任何其他类型代码的手工编码环境。

【拆分】：将【文档】窗口拆分为代码视图和设计视图。

【设计】：仅在【文档】窗口显示设计视图，该视图是对页面进行可视化设计与编辑操作的设计环境。在形成可视化页面效果的同时，自动生成网页代码，文档的设计视图与代码保持同步一致。

【实时视图】：显示动态网页代码（如JavaScript脚本等）的实时运行页面效果，并能够实现与文档的交互操作、前台网页和后台数据库的连接和读取操作等。【实时视图】不可编辑，但是可以在【代码】视图中进行编辑，然后刷新【实时视图】来查看所做的更改。

3. 状态栏

状态栏提供了正在创建文档的相关信息，位于【文档】窗口的底部。状态栏显示“文档”窗口的当前尺寸（以像素为单位）。若要将页面设计为在使用某一特定尺寸大小时具有最好的显示效果，可以将“文档”窗口调整到任一预定义大小、编辑这些预定义大小或者创建新的大小。更改“设计”视图或“实时”视图中页面的视图大小时，仅更改视图大小的尺寸，而不更改文档大小。

除了预定义和自定义大小外，Dreamweaver还会列出在媒体查询中指定的大小。选择与媒体查询对应的大小后，Dreamweaver将使用该媒体查询显示页面。还可更改页面方向以预览用于移动设备的页面，在这些页面中根据设备的持握方式更改页面布局。

要调整“文档”窗口的大小，请从“文档”窗口底部的“窗口大小”弹出菜单中选择一种大小，如图2-2所示。

4. 标签选择器

标签选择器位于“文档”窗口底部状态栏中，显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。

5. 面板

面板提供监控和修改功能，包括【文件】面板、插入【面板】和【CSS设计器】面板等。若要展开某个面板，请双击其选项卡。选择【窗口】菜单可以打开其他功能面板。

【Extract】面板：允许上传和查看Creative Cloud中的PSD文件。使用此面板，可以将PSD复合中的CSS、文本、图像、字体、颜色、渐变和度量值提取到文档。

【插入】面板：包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入它时设置不同的属性。例如，可以通过单击“插入”面板中的【表格】按钮来插入一个表格。如果愿意，可以使用【插入】菜单来插入对象，而不用通过使用【插入】面板。

【文件】面板：用于管理文件和文件夹，使用【文件】面板，还可以访问本地磁盘上的所有文件。

【代码片段】面板：可让不同的网页、不同的站点重复使用代码片段（使用同步设置）。

【CSS设计器】面板：为CSS属性检查器，可创建CSS样式和文件，并设置属性和媒体查询。

2.1.2 工作区布局

Dreamweaver为用户提供了多种工作区布局，用户可以根据需要设定工作区环境，也可以新建工作区布局，并对它进行管理和删除操作。

选择菜单【窗口】|【工作区布局】，在子菜单中选择一种工作区布局，如图2-3所示。

2.1.3 多文档的编辑界面

Dreamweaver提供了多文档的编辑界面，将多个文档集中到一个窗口中，用户可以单击文档编辑窗口上方选项卡的文件名切换到相应的文档，还可以按住鼠标左键拖动选项卡改变文档的顺序，如图2-4所示。