1.2 Dreamweaver CC 2018的工作界面
Dreamweaver CC 2018的工作区将多个文档集中到一个界面中，这样不仅可以降低系统资源的占用，而且还可以更加方便地操作文档。Dreamweaver CC 2018的操作界面包括菜单栏、文档工具栏、通用工具栏、文档窗口、状态栏和浮动面板组。如图1-7所示为Dreamweaver CC 2018的操作界面。
图1-7 Dreamweaver CC 2018的操作界面
1.2.1 菜单栏
Dreamweaver CC 2018的主菜单共分九种，文件、编辑、查看、插入、工具、查找、站点、窗口和帮助，如图1-8所示。
图1-8 菜单栏
1. “文件”菜单
“文件”菜单如图1-9所示，包含文件操作的标准菜单项，还包括用于查看当前文档或对当前文档执行操作的命令。
2. “编辑”菜单
“编辑”菜单如图1-10所示，包含用于基本编辑操作的标准菜单项。不仅包括文本、图像、表格等网页元素命令，而且提供对键盘快捷方式编辑器和代码格式的访问，以及对Dreamweaver CC 2018“首选项”的访问。
3. “查看”菜单
“查看”菜单如图1-11所示，用于在文档的各种视图之间进行切换，并且可以显示和隐藏相关文件。
图1-9 “文件”菜单
图1-10 “编辑”菜单
图1-11 “查看”菜单
4. “插入”菜单
“插入”菜单如图1-12所示，提供将页面元素插入到网页中的命令。
5. “工具”菜单
“工具”菜单如图1-13所示，用于更改选定的页面元素的属性，并且为库和模板执行不同的操作。
图1-12 “插入”菜单
图1-13 “工具”菜单
6. “查找”菜单
“查找”菜单如图1-14所示，用于在当前窗口、整个站点的浏览器中查找，还可以在HTML源程序中查找或替换源代码。
全新的“查找和替换”工具栏位于窗口顶部，如图1-15所示。不会阻挡屏幕的任何部分，与Dreamweaver的早期版本相比，“查找和替换”功能更加便捷且高效，在“查找”面板中输入搜索字符串时即开始查找该字符串，并在当前文档中高亮显示该字符串的所有实例。
图1-14 “查找”菜单
图1-15 “查找和替换”对话框
7. “站点”菜单
“站点”菜单如图1-16所示，用于创建、打开和编辑站点，以及管理当前站点中的文件。
8. “窗口”菜单
“窗口”菜单如图1-17所示，提供对Dreamweaver CC 2018中的所有浮动面板和窗口的访问。
9. “帮助”菜单
“帮助”菜单如图1-18所示，提供对Dreamweaver CC 2018帮助系统的访问，以及上、下文功能提示重置和错误报告的处理。
图1-16 “站点”菜单
图1-17 “窗口”菜单
图1-18 “帮助”菜单
1.2.2 文档工具栏
新建或打开一个网页文档后，文档窗口顶部显示文档工具栏，该工具栏集中在文档的不同视图之间快速切换的常用命令，如图1-19所示。
图1-19 文档工具栏
各个按钮图标的功能如下：
：显示代码视图。
：将文档窗口进行拆分，在同一屏幕中显示“代码”视图和“设计”视图或“实时视图”。
：在不打开浏览器的情况下实时预览页面的效果。Dreamweaver CC 2018整合了“设计视图”和“实时视图”，单击该按钮右侧的倒三角形按钮，在弹出的下拉菜单中可选择“设计”视图。
1.2.3 通用工具栏
通用工具栏位于界面左侧，开始页面的通用工具栏如图1-20所示，主要集中了一些与查看文档、在本地和远程站点间传输文档，以及代码编辑有关的常用命令和选项。
图1-20 通用工具栏
提示：不同的视图和工作区模式下，显示的通用工具栏也会有所不同。
：单击该按钮显示当前打开的所有文档列表。
：单击该按钮弹出文件管理下拉菜单。
：单击该按钮，弹出实时视图选项下拉菜单。
：隐藏／显示可视媒体查询栏。
：打开实时视图和CSS检查模式，以可视方式调整CSS属性。
：扩展全部。
：格式化源代码。
：应用注释。
：删除注释。
：自定义工具栏。单击该按钮打开如图1-21所示的“自定义工具栏”对话框，在工具列表中勾选需要的工具左侧的复选框，即可将工具添加到通用工具栏中。
图1-21 “自定义工具栏”对话框
1.2.4 文档窗口
文档窗口用于显示当前打开或编辑的文档，根据选择的视图不同而显示不同的内容。
单击文档工具栏中的
按钮，切换到“设计”视图，如图1-22所示。文档窗口显示的内容与浏览器中显示的内容基本相同。使用Dreamweaver CC 2018提供的工具或命令，可以方便地进行创建、编辑文档的各种工作，即使完全不懂HTML代码的读者也可以制作出精美的网页。
图1-22 “设计”视图
单击文档工具栏中的
按钮，切换到“代码”视图，在文档窗口中显示的是当前文档的代码，如图1-23所示。
在编写文档时，如果要兼顾设计样式和实现代码，可以单击工具栏中的
按钮，使“代码”视图与“设计”视图（或“实时视图”）同屏显示，如图1-24所示。如果选中“设计”视图或者“代码”视图中的某一部分，“代码”视图或者“设计”视图中相应的网页元素也同时被选中。
图1-23 “代码”视图
图1-24 “拆分”视图
教你一招：默认情况下，水平拆分文档窗口，选择“查看”|“拆分”|“顶部的实时视图”命令，可以将拆分的两个视图上、下进行调换；选择“查看”|“拆分”|“垂直拆分”菜单命令，可以将文档窗口左、右拆分；选择“查看”|“拆分”|“左侧的实时视图”命令，可以将拆分的两个视图左、右进行调换。
1.2.5 状态栏
Dreamweaver CC 2018的状态栏位于文档窗口底部，嵌有几个重要的工具如标签选择器、Linting图标、实时预览和窗口大小等。“拆分”视图下的状态栏如图1-25所示。
图1-25 “拆分”视图下的状态栏
提示：不同的视图下，状态栏上显示的功能图标的多少也不相同。在“代码”视图中工作时，状态栏会显示有用的信息。
1. 标签选择器
显示当前选定内容的标签。单击该标签，可以选中页面上相应的区域。例如，单击<body>标签可以选择文档的全部正文。
2. Linting图标
Dreamweaver CC 2018支持Linting，用于调试网页或网页的一部分代码，以查找任何语法或逻辑错误。HTML语法错误、CSS中的分析错误或JavaScript文件中的警告都是Linting要标记的内容。
状态栏中的Linting图标指示Linting结果：红色
表示当前文档包含错误和警告；绿色
表示当前文档没有错误。
提示：当文档中有错误或警告时，单击状态栏上的Linting图标，将打开“输出”面板，如图1-26所示。包含错误或警告的行将分别以红色和黄色突出显示，双击“输出”面板中的消息可跳转到发生错误的行。修复错误后，面板中的列表会滚动以显示下一组错误。在“代码”视图中，将鼠标悬停在错误行的行号上，可以查看错误或警告预览。
图1-26 “输出”面板
3. 文件类型
更改不同文件类型的语法高亮显示。Dreamweaver CC 2018目前适用于以下文件类型的代码着色：HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown (GitHub)、Perl、属性、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、文本、VB、VBScript、XML和YAML。
4. 窗口大小
图1-27 “窗口大小”菜单
单击窗口大小区域可弹出如图1-27所示的“窗口大小”菜单，该菜单仅在“设计”视图和“拆分”视图下可用，用于调整“文档”窗口的大小到预定义或自定义的尺寸，以像素为单位。
显示的窗口大小是指浏览器窗口的内部尺寸（不包括边框）。更改“设计”视图或“实时”视图中页面的视图大小时，仅更改视图大小的尺寸，而不更改文档尺寸。
在大多数先进的移动设备中，可根据设备的持握方式更改页面方向。当用户以垂直方向把握设备时，显示纵向视图。当用户水平翻转设备时，页面将重新调整自身，以适合横向尺寸。在Dreamweaver CC 2018中，实时视图和设计视图中都提供纵向或横向查看页面的选项，使用这些选项可预览用于移动设备的页面。
注意：在Windows中，用户可以选中“全大小”选项将文档窗口最大化，以便它填充集成窗口的整个文档区域，此时无法调整它的大小。
5. 行号和列号
行号和列号指示鼠标指针所在的行和列。
6. 输入模式
输入代码时，在INS（插入）模式和OVR（覆盖）模式之间切换。
7. 实时预览
Dreamweaver CC 2018支持在多个设备上同时预览、测试网页，且不需要安装任何移动应用程序或将设备物理连接到桌面。
单击“实时预览”按钮
，弹出如图1-28所示的“实时预览”窗口。
1）在浏览器中预览
默认情况下，将启动Internet Explorer预览网页。单击“编辑列表”命令，如图1-29所示的“首选项”对话框，用户可以添加浏览器，并指定主浏览器和次浏览器。
图1-28 “实时预览”窗口
图1-29 “首选项”对话框
Dreamweaver CC 2018已与浏览器连接，在浏览器中预览网页时，不需刷新浏览器，就能在浏览器中实时预览页面更改。
2）在设备上预览
在多个不同外形规格的设备上同时测试网页。利用要预览网页的移动设备扫描“设备预览”窗口左侧的二维码，或复制显示的短链接，并粘贴到桌面浏览器中，在弹出的登录窗口中成功登录后，已连接设备的名称将显示在“设备预览”窗口中（图1-30），并可通过该设备预览网页。
图1-30 “设备预览”窗口
注意：要在设备上预览网页，必须具备以下条件：
（1）设备上安装了QR代码扫描仪。
（2）桌面和移动设备已连接到Internet，并位于同一网络中。
（3）已准备好Adobe ID凭据。在预览时，使用桌面上Dreamweaver所用的Adobe ID登录设备。
（4）设备的浏览器设置中启用了JavaScript和Cookie。
1.2.6 浮动面板组
在Dreamweaver CC 2018工作环境的右侧停靠着许多浮动面板，并且自动对齐。这些面板可以自由地在界面上拖动，也可以将多个面板组合在一起，成为一个选项卡组，以扩充文档窗口。
在“窗口”菜单的下拉菜单中单击面板名称可以打开或者关闭这些浮动面板。
1. “属性”面板
在制作网页时，对象都有各自的属性，就要“属性”面板对对象属性进行设置。“属性”面板的设置项目会根据对象的不同而变化，如图1-31所示为在选中图形对象时“属性”面板上的内容。
图1-31 “属性”面板
默认情况下，Dreamweaver CC 2018没有开启“属性”面板，用户可以通过“窗口→属性”命令打开，并且“属性”面板上的大部分内容都可以在“编辑”菜单中找到。
“属性”面板分成上、下两部分，单击面板右下角的
按钮可以关闭“属性”面板的下面部分。此时，
按钮变成
按钮，单击此按钮可以重新打开“属性”面板的下面部分。
2. “插入”面板
网页的内容虽然多种多样，但是都可以称为对象，大部分的对象都可以通过“插入”面板插入。Dreamweaver CC 2018默认开启“插入”面板，在文档窗口右侧的浮动面板组中单击“插入”页签，即可显示“插入”面板，如图1-32所示。
“插入”面板的初始视图为“HTML”面板，单击“插入”面板中“HTML”右侧的下拉按钮，即可在弹出的下拉菜单中选择需要的面板，从而在不同的面板之间进行切换，如图1-33所示的“隐藏标签”命令。
如果要在文档中添加某一个对象，打开相应类别的“插入”面板，然后单击相应的图标即可。
图1-32 “插入”面板
图1-33 “隐藏标签”命令
教你一招：默认状态下，“插入”面板中的对象图标显示右侧标签，如图1-32所示。如果单击如图1-33中下拉菜单中的“隐藏标签”命令，则只显示对象图标而不显示图标右侧的标签，如图1-34所示。
图1-34 隐藏标签的“HTML”插入面板
3. 其他浮动面板
浮动面板的一个好处是可以节省屏幕空间。用户可以根据需要显示或隐藏浮动面板，其他浮动面板的功能简要介绍如下。
资源：管理站点资源，比如模板、库文件、各种媒体、脚本等。
行为：为页面元素添加、修改Dreamweaver CC 2018预置的行为和触发事件，创建简单的交互效果。
代码检查器：在单独的编码窗口中查看、编写或编辑代码，就像在“代码”视图中工作一样。
CSS设计器：定义、编辑CSS样式。
CSS过渡效果：创建CSS过渡效果。使用CSS过渡效果可将平滑属性变化应用于页面元素，以响应触发器事件，如悬停、单击和聚焦。
DOM：呈现包含静态和动态内容的交互式HTML树。在DOM面板中编辑HTML结构，可在实时视图中查看即时生效的更改。
Extract：提取Photoshop复合中的CSS、图像、字体、颜色、渐变和度量值，直接添加到网页中。
文件：管理本地计算机的文件及站点文件。
jQuery Mobile色板：使用此面板可以在jQuery Mobile CSS文件中预览所有色板（主题），或从jQuery Mobile Web页的各种元素中删除色板。
Git：该面板用于高效地对网站资源进行版本管理，可以使用文件名搜索存储库中的文件，并在搜索结果中查看文件的状态，帮助用户跟踪已暂存、已修改和未跟踪的文件。
结果：提供HTML、CSS、ASP、JSP等一系列代码的参考资料、验证是否有代码错误、检查各种浏览器对当前文档的支持情况、检验是否存在断点链接，以及站点服务器的测试结果。
代码片断：收集、分类一些非常有用的小代码，以便在网页中反复使用。
扩展：添加扩展功能。
注意：在安装扩展功能前必须安装功能扩展管理器，用于安装和管理Adobe应用程序中的扩展功能。如果要在多用户操作系统中安装所有用户都能访问的扩展功能，必须以管理员身份（Windows）或Root身份（Mac OS X）登录。
1.2.7 上机练习——组合、拆分浮动面板组
练习目标
1-2 上机练习——组合、拆分浮动面板组
Dreamweaver CC 2018三个重要的功能分别是网页设计、代码编写和应用程序开发，相应的浮动面板也可以这样分类。在实际使用中，用户应该根据自己的设计习惯，将常用的面板组合在一起，并放在适当的地方，以配置出最适合于个人使用的工作环境。结合本节的练习实例，使读者掌握组合、拆分浮动面板组的具体操作方法。
设计思路
首先将“插入”面板从“文件”面板组中拆分出来，然后与“资源”面板合并为一个面板组。
操作步骤
（1）选择“窗口”|“插入”命令，打开“插入”面板。
（2）在“插入”面板的标签上按下鼠标左键，然后拖动到合适的位置，释放鼠标。此时“插入”面板成为一个独立的面板，可以在工作界面上随意拖动，如图1-35所示。
（3）选择“窗口”|“资源”命令，打开“资源”面板。
（4）在“资源”面板的标签上按下鼠标左键，然后拖动到“插入”面板上，此时“插入”面板顶端将以蓝色显示，表示“插入”面板将到达的目的位置，释放鼠标。即可将“插入”面板与“资源”面板进行合并，如图1-36所示。
图1-35 分离出的“插入”面板
图1-36 组合“资源”面板和“插入”面板