1.1 Dreamweaver 2020的工作界面

Dreamweaver 2020的工作界面将多个文档集中到一个窗口中，不仅减少对系统资源的占用，还可以使用户更方便地操作文档。Dreamweaver 2020的工作界面简洁易用，可大大提高网页的设计及制作效率。

1.1.1 友好的开始界面

启动Dreamweaver 2020，首先看到的是开始界面，用户可在此界面中选择新建文件的类型或打开已有的文档等，如图1-1所示。

如果不太习惯开始界面，可选择“编辑>首选项”命令，或按Ctrl+U组合键，弹出“首选项”对话框，取消选中“显示开始屏幕”复选框，如图1-2所示。单击“应用”按钮，然后单击“关闭”按钮。这样打开Dreamweaver 2020时将不再显示开始界面。

1.1.2 不同风格的工作界面

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

1.1.3 伸缩自如的面板

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

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

1.1.4 多文档编辑界面

Dreamweaver 2020提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换，如图1-6所示。单击文档编辑窗口上方的标签，即可快速切换到相应的文档，方便同时编辑多个文档。

1.1.5 新颖的“插入”面板

Dreamweaver 2020的“插入”面板可以与其他面板组合。为了方便操作，一般会将它放置在菜单栏的下方，如图1-7所示。

“插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQuery Mobile”“jQuery UI”“收藏夹”7个标签，具有不同功能的按钮分门别类地放在不同标签对应的选项卡中。在Dreamweaver 2020中，“插入”面板可用菜单和标签2种样式显示。如果需要以菜单样式显示，可在“插入”面板上单击鼠标右键，在弹出的快捷菜单中选择“显示为菜单”命令，如图1-8所示，更改后的效果如图1-9所示。

如果需要以标签样式显示，可单击“HTML”右侧的下拉按钮，在下拉列表中选择“显示为制表符”选项，如图1-10所示，更改后的效果如图1-7所示。

“插入”面板将一些功能相似的按钮组合在一起，当某个按钮右侧有黑色箭头时，表示其为展开式按钮，如图1-11所示。

1.1.6 更完整的CSS功能

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

Dreamweaver 2020中的“属性”面板提供了CSS功能。用户可以通过“属性”面板对所选的对象应用、创建和编辑样式，如图1-12所示。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。

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