2.1 熟悉Dreamweaver CC的操作界面

Dreamweaver CC的操作界面集中了多个面板和常用工具，主要包括菜单栏、文档工具栏、编辑窗口、状态栏、“属性”面板和浮动面板组等，如图2-1所示。

2.1.1 菜单栏

Dreamweaver CC菜单栏的主菜单包括：“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”，如图2-2所示。

1. “文件”菜单

“文件”菜单主要用来执行文件的打开、关闭、保存、导入导出以及预览等操作，如图2-3所示。以下列举了部分命令的功能。

·新建：新建文件。可选的文件类型有html、css、php、JavaScript、xml等。

·全部关闭：关闭Dreamweaver中打开的所有文件。

·另存为模板：把当前的文件保存为模板，便于用户在制作大量网页时直接从模板中调用公用的内容。

·导入：导入表格式数据、Word文件、Excel文件等。

·导出：导出数据模板或表格。

·验证：验证文档的错误、警告、和隐藏，包括标记或作为XML。

·与远程服务器比较：和远程服务器中的文件比较，确认最新的文件版本。

·设计备注：为HTML文件加入备注。

2. “编辑”菜单

“编辑”菜单包含基本编辑操作的标准菜单项、选择和搜索命令，并且提供对键盘快捷方式编辑器和标签库编辑器的访问，允许用户对Dreamweaver CC菜单中的“首选参数”进行访问，如图2-4所示。以下列举了部分命令的功能。

·选择父标签：选择当前HTML标记的父标记所包含的内容。

·选择子标签：选择当前HTML标记的子标记所包含的内容。

·转到行：设置需要跳转到源代码的行数。

·显示代码提示：编辑代码时显示提示的标记或属性。

·代码提示工具：包括颜色选择器、URL选择器和字体列表提示工具。

·缩进代码：在当前代码行使源代码缩进。

·凸出代码：在当前代码行使源代码还原缩进。

·平衡大括弧：检验圆括弧、大括弧、方括弧是否对称。

·重复项：选择代码中重复的项目。

·代码折叠：选择或标记保留组织结构来隐藏或展开代码块。

·标签库：所有标签的集合。

·首选项：设定首选参数。

3. “查看”菜单

“查看”菜单可以使用户看到文档的各种视图，并且可以显示和隐藏不同类型的页面元素及不同的Dreamweaver CC工具，如图2-5所示。以下列举了部分命令的功能。

·拆分代码：通过滚动实现同时对文档的不同部分进行操作。

·代码和设计：同时显示代码和设计窗口。

·垂直拆分：将代码和设计窗口垂直拆分。

·左侧的设计视图：将设计视图在左侧显示。

·实时视图：在真实的浏览器环境中设计网页，同时仍可以直接访问代码。

·实时代码：显示浏览器用于执行该页面的实际代码。

·插件：控制窗口中文档插件的播放。

·显示面板：显示/隐藏浮动面板。

·工具栏：显示/隐藏文档样式的呈现，包括文档、标准和编码。

·相关文件：单击任何相关文件即可在“代码”视图中查看其源代码，在“设计”视图中查看父页面。

·代码浏览器：用于查看当前网页代码的相关属性。

4. “插入”菜单

“插入”菜单提供了插入栏的替代项，以便将页面元素插入到网页中，如图2-6所示。以下列出了部分命令的功能。

·Div：插入Div标签。

·图像：插入图像对象。

·表格：插入表格的各种对象。

·表单：插入不同种类的表单。

·Hyperlink：插入页面的超链接。

·电子邮件链接：插入电子邮件链接。

·IFRAME：IFRAME元素会创建包含另外一个文档的内联框架（即行内框架）。

·结构：插入命名好的Div标签。

·模板：创建模板对象。

·收藏夹：自定义收藏夹对象。

·最近的代码片断：插入最近使用过的代码片断。

5. “修改”菜单

“修改”菜单用来更改选定页面元素的属性，通过使用该菜单，用户可以编辑标签属性、更改表格和表格元素，并且对库和模板进行操作，如图2-7所示。以下列出了部分命令的功能。

·页面属性：设置当前窗口文档的属性。

·管理字体：使用免费的Web设计字体库。

·创建链接：建立或改变链接。

·移除链接：删除超链接。

·库：实现创建新库、更新当前页、更新页面等功能。

·模板：建立固定的页面模板，以后创建页面时可以反复调用，提高工作效率。

6. “格式”菜单

“格式”菜单使用户能够方便地设置文本格式，如图2-8所示。以下列出了部分命令的功能。

·缩进：页面左右同时缩进。

·凸出：缩进的逆操作。

·段落格式：设置段落、标题格式。

·列表：设置项目列表、编号列表，定义列表等。

·HTML样式：对HTML标签元素设置样式。

·CSS样式：如果定义过CSS样式表，则显示定义过的标识符。

7. “命令”菜单

“命令”菜单提供对某些特殊功能的访问，如根据格式参数的选择来设置代码格式、创建相册，以及优化图像等命令，如图2-9所示。以下列出了部分命令的功能。

·编辑命令列表：选择此命令后，可以在弹出的对话框中编辑命令。

·清理Word生成的HTML：删除由Word生成的网页中的HTML垃圾代码。

·Clean Up Web字体脚本标签：清除Web字体脚本标签。

8. “窗口”菜单

“窗口”菜单提供对Dreamweaver CC中所有面板、检查器和窗口的访问，如图2-10所示。以下列出了部分命令的功能。

·“插入”“属性”“CSS设计器”“文件”“资源”等复选项用于开启或隐藏相应的浮动面板，在本节后面将进行详细介绍。

·代码片断：可以使用现有的代码片断，也可以定义自己的代码库。

·代码检查器：用于打开浮动面板组中的“代码检查器”。

·结果：包括搜索、验证、参考等命令。

·扩展管理：应用第三方插件。

·工作区布局：选择预设的工作区布局方式有经典、编码器、设计器等工作区布局方式。

·显示面板：显示或隐藏浮动面板。

·层叠：将打开的网页层叠排放。

·水平平铺：将打开的网页水平排放。

·垂直平铺：将打开的网页垂直排放。

2.1.2 文档工具栏

文档工具栏中包括“代码”视图、“拆分”视图、“设计”视图、“实时视图”按钮，可以实现文档不同视图间的快速切换。此外，还包含了一些与查看文档、在本地和远程站点间传输文档常用的选项和命令。图2-11所示为展开的文档工具栏。

该工具栏各组成部分的功能如下。

·显示“代码”视图按钮：仅在“文档”窗口中显示“代码”视图。

·显示“代码”视图和“设计”视图按钮：在“文档”窗口的一部分显示“代码”视图，而在另一部分显示“设计”视图。

·显示“设计”视图按钮：仅在“文档”窗口中显示“设计”视图。

·将设计视图切换到实时视图按钮：显示不可编辑的、交互式的、基于浏览器的文档视图。

·文档标题文本框：允许用户为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。

·在浏览器中预览/调试按钮：允许用户在浏览器中预览或调试文档。

·文件管理按钮：显示“文件管理”弹出式菜单。

2.1.3 “属性”面板

“属性”面板用来显示网页设计中各对象的属性。根据所选对象的不同，显示的属性也不同。默认情况下，“属性”面板位于文档窗口的底部，通过双击“属性”标签可使该面板显示或者隐藏，还可以通过单击并拖动的方法移动该面板到文档窗口的其他位置。图2-12所示为选中文件中某个图像元素时的“属性”面板，其中包含了图像的宽、高、源文件等信息。

在“属性”面板的右侧有3个按钮，分别是：帮助按钮、快速标签编辑器按钮和展开箭头按钮。下面分别讲述它们的作用。

·帮助按钮：单击此按钮将链接到Adobe公司的帮助文件页面（需要在连接到因特网的情况下实现）。

·快速标签编辑器按钮：单击此按钮可以在鼠标指针指示处插入标记，如图2-13所示。

·展开箭头按钮：单击此按钮可展开或隐藏“页面属性”等设置项。

2.1.4 浮动面板组

浮动面板组是Dreamweaver CC操作界面的一大特色，用户可以根据自己的需要打开相应的浮动面板，既方便使用又节省了屏幕空间。下面将对常用的浮动面板进行介绍。

1. 文件面板

通过“文件”面板能够查看站点中的文件信息。默认情况下，系统会显示本地站点，更改“文件”面板布局后可查看远程站点或测试服务器，如图2-14所示。“站点”面板包含一个集成的文件浏览器。除当前站点之外，还可以在该文件浏览器中浏览本地磁盘和网络。

2. 插入面板

“插入”面板包含用于创建和插入对象的按钮，如表格、图像和链接。这些按钮按9个类别进行组织，分别为：“常用”“结构”“媒体”“表单”“jQuery Mobile”“jQuery UI”“模板”“收藏夹”和“隐藏标签”，如图2-15所示。用户可以根据需要选择插入的对象。若当前文件包含服务器代码时，如ASP或CFML文件，还会显示其他类别。

·常用：包含表格、图像等网页制作中最常用的对象。

·结构：包含Div标记、Spry菜单栏、框架等命令。

·媒体：包含动画、视频等。

·表单：包含表单、文本字段、文本区域、复选框等命令。

·jQuery Mobile：帮助用户创建多视图或分割视图布局的移动Web页面。

·jQuery UI：包含对字体、标题的相关操作命令。

·模板：创建模板及相关操作。

·收藏夹：用户可以通过自定义的方式把常用的操作添加到收藏夹中。

·隐藏标签：可以显示或隐藏标记。

3. CSS设计器

CSS是Cascading Style Sheet的缩写，是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它简化了网页的格式代码，外部的样式表将保存在浏览器缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。另一方面，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，这在修改页面数量庞大的站点时，显得格外有用。由于避免了逐一修改网页，CSS的应用大大减少了网页制作者重复劳动的工作量。“CSS设计器”面板如图2-16所示。

·源：包含所有的CSS样式，用户还可以创建新的CSS文件、附加现有的CSS文件，以及在页面中定义。

·@媒体：一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS规则。

·选择器：要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一地控制，就要用到CSS选择器。每一条CSS样式定义由两部分组成，形式为“[code] 选择器{样式} [/code]”。在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

·属性：元素的属性及属性值。

2.1.5 状态栏

文档窗口底部的状态栏提供了用户正在创建的文档的有关信息，如图2-17所示。

其中各项的含义如下。

·标签选择器：显示当前选定内容为标签的层次结构。单击该层次结构中的任何标签可以选中该标签及其中的全部内容。如单击<body>标签则选中当前整个文件。若要设置标签选择器中某个标签的类别或ID属性，可右击该标签，然后从弹出的快捷菜单中选择一个类或ID子菜单来操作。

·窗口大小弹出式菜单（仅在“设计”视图中可见）：用来将文件窗口的大小调整到预定义或自定义的尺寸。