1.1 Dreamweaver CC 2018的工作界面

Dreamweaver CC 2018的工作区将多个文档集中到一个窗口中，不仅降低了系统资源的占用率，还使用户可以更加方便地操作文档。Dreamweaver CC 2018的工作窗口由6个部分组成，分别是菜单栏、“插入”面板、“通用”工具栏、文档窗口、面板组和“属性”面板。Dreamweaver CC 2018的操作环境简洁明快，可大大提高设计效率。

1.1.1 友善的开始页面

启动Dreamweaver CC 2018后，首先看到的画面就是开始页面，供用户选择新建文件或打开已有的文档等，如图1-1所示。

老用户可能不太习惯开始页面，可选择“编辑 > 首选项”命令，或按Ctrl+U组合键，弹出“首选项”对话框，取消勾选“显示开始屏幕”复选框，如图1-2所示。单击“应用”按钮完成设置，单击“关闭”按钮关闭对话框。当用户再次启动Dreamweaver CC 2018时，将不再显示开始页面。

1.1.2 不同风格的界面

Dreamweaver CC 2018的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。

若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口 > 工作区布局”命令，弹出相应的子菜单，如图1-3所示，在子菜单中选择“开发人员”或“标准”命令。选择其中一种界面风格，界面会发生相应的改变。

1.1.3 伸缩自如的功能面板

在功能面板的右上方单击按钮，可以隐藏功能面板，如图1-4所示。隐藏功能面板后，单击按钮，可以展开功能面板。

如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与功能面板交界的框线处，当鼠标指针呈双向箭头形状时拖曳鼠标，可调整工作区的大小，如图1-5所示。若用户需要更大的工作区，可以将功能面板隐藏。

1.1.4 多文档的编辑界面

Dreamweaver CC 2018提供了多文档的编辑界面，可以将多个文档整合在一起，方便用户在各个文档之间切换，如图1-6所示。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以在多个文档之间切换并编辑。

1.1.5 新颖的“插入”面板

Dreamweaver CC 2018的“插入”面板可放在菜单栏的下方，如图1-7所示。

“插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQuery Mobile”“jQuery UI”“收藏夹”7个选项卡，将不同功能的按钮分门别类地放在不同的选项卡中。在Dreamweaver CC 2018中，“插入”面板可用菜单和选项卡两种样式显示。如果需要菜单样式，可用鼠标右键单击“插入”面板的选项卡，在弹出的菜单中选择“显示为菜单”命令，如图1-8所示，更改后的效果如图1-9所示。用户如果需要选项卡样式，可单击“HTML”选项右侧的按钮，在下拉菜单中选择“显示为制表符”命令，如图1-10所示，更改后的效果如图1-11所示。

“插入”面板将一些功能相关的按钮组合成了菜单，当按钮右侧有黑色倒三角符号时，表示其为展开式按钮，如图1-12所示。

1.1.6 更完整的CSS功能

传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CC 2018就提供了这样方便有效的CSS功能。

“属性”面板提供了CSS功能。用户可以通过“属性”面板中的“目标规则”下拉列表为所选的对象应用样式或创建和编辑样式，如图1-13所示。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。

“页面属性”按钮也提供了CSS功能。单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，如图1-14所示。用户可以在左侧的“分类”列表中选择“链接（CSS）”选项，在右侧的“下划线样式”下拉列表中设置超链接的样式，这个设置会自动转化成CSS样式，如图1-15所示。

Dreamweaver CC 2018提供了“CSS设计器”面板，如图1-16所示。“CSS设计器”面板使用户能够轻松查看规则的属性设置，并可快速修改嵌入当前文档或通过附加的样式表链接的CSS样式。可编辑的网格使用户可以更改显示的属性值。对选择的对象所做的更改都将立即应用，这使用户可以在操作的同时预览效果。