工具栏主要集中了一些可以在文档的不同视图之间快速切换的常用命令，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。Dreamweaver CS6中的工具栏如图1-6所示。

图1-6 工具栏

在工具栏中包含了一些图标按钮和弹出菜单，可以用不同的方式来查看文档窗口或者预览设计效果，具体各个按钮图标的功能如下：

➢：显示代码视图。

➢：在同一屏幕中以水平对比的方式显示代码和设计视图。

Dreamweaver CS6界面顶端的“布局”按钮，也用于设置页面的布局。他和工具栏中的按钮功能相同。不同的是，使用“布局”按钮的下拉列表，可以垂直分割文档窗口，即代码视图和设计视图以垂直对比的方式呈现。

➢：显示设计视图。

➢：单击该按钮，Dreamweaver将以黄色突出显示浏览器为呈现该页面而执行的代码版本，此代码是不可编辑的。再次单击该按钮，即可返回到可编辑的“代码”视图。

➢：在“设计”视图或“折分”视图下，单击该按钮可以在不打开浏览器的情况下实时预览页面的效果。再次单击该按钮，即可返回到可编辑的“设计”视图或“折分”视图。如果在“代码”视图下单击该按钮，则Dreamweaver的工作界面自动转换为“折分”视图。上半部分显示可编辑的代码，下半部分显示页面的实时预览效果。

“实时视图”可以使用户在Dreamweaver窗口中实时查看代码的效果，包括JavaScript特效。在“设计”视图中可以随时切换到“实时”视图，切换到“实时视图”之后，“设计”视图保持冻结，用户仍然可以在Dreamweaver中的任何其他传统视图（如“代码”/“拆分”）之间进行切换。“代码”视图保持可编辑状态，因此可以更改代码，然后刷新“实时视图”以查看所进行的更改是否生效。也就是说，借助“实时视图”，用户可以直接在真实的浏览器环境中设计网页，同时仍可以直接访问代码。呈现的屏幕内容会立即反映出对代码所做的更改。

此外，“实时视图”的另一优势是能够冻结JavaScript。例如，用户可以切换到“实时视图”并悬停在由于用户交互而更改颜色的基于Spry的表格行上。冻结JavaScript时，“实时视图”会将页面冻结在其当前状态。然后，用户可以编辑CSS或JavaScript并刷新页面以查看更改是否生效。该功能在查看并更改无法在传统“设计”视图中看到的弹出菜单或其他交互元素的不同状态时很有用。(www.daowen.com)

➢：在“实时视图”中单击该按钮，可以打开CSS检查模式，以可视方式调整设计，实现期望的边距和内边距。

CSS检查模式允许开发人员以可视化方式详细显示CSS框模型属性，包括填充、边框和边距，轻松切换CSS属性，且无需读取代码，或使用独立的第三方实用程序。CSS检查模式在具有某些设置时最有用，如：CSS样式面板以当前模式打开、启用拆分代码/实时视图、启用实时视图。如果没有这些设置中的任何一种，将在文档窗口顶部显示相关的提示信息。

➢：多屏幕预览。检查智能手机、平板电脑和台式计算机所建立项目的显示画面。该功能能够让用户检查HTML5内容呈现。

➢：在浏览器中预览/调试。利用该功能按钮的下拉菜单，可以在设定的浏览器中预览或调试文档。

➢：文件管理下拉菜单。

➢：使用W3C联机验证服务，以确保标准网页设计的精确性。

➢：跨浏览器兼容性检查的下拉菜单。

➢：可视化助理下拉菜单。可以使用不同的可视化助理来设计页面。

➢：刷新设计视图。

➢“标题”：设置文档的标题（页面<title></title>标签之间的内容）。