《Adobe Dreamweaver CC经典教程》——1.2 切换和拆分视图

本节书摘来自异步社区《Adobe Dreamweaver CC经典教程》一书中的第1 章，第1.2节，作者：【美】Adobe公司 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2　切换和拆分视图

Dreamweaver分别为编码员和设计人员提供了专用的环境，还提供了一个把这二者混合在一起的复合选项。

1.2.1　“设计”视图
“设计”视图在Dreamweaver工作区中着重显示其所见即所得的编辑器，它非常接近（但并非完美）地描绘了Web页面在浏览器中的样子。要激活“设计”视图，可以单击“文档”工具栏中的“设计”按钮（如图1-2所示）。大多数HTML元素和CSS（cascading style sheet，层叠样式表）格式化效果都可以在“设计”视图内正确地呈现，而动态内容和交互性则有重大的差别，比如链接行为、视频、音频、jQuery构建、某些表单元素等。

1.2.2　“代码”视图
“代码”视图在Dreamweaver工作区中只着重显示HTML代码以及各种提高代码编辑效率的工具。要访问“代码”视图，可以单击“文档”工具栏中的“代码”按钮（如图1-3所示）。

1.2.3　“拆分”视图
“拆分”视图提供了一个复合工作区，允许同时访问设计和代码。在其中一个窗口中所做的更改都会即时在另一个窗口中进行更新。要访问“拆分”视图，可以单击“文档”工具栏中的“拆分”按钮（如图1-4所示）。Dreamweaver默认将垂直拆分工作区。

也可以通过在“查看”菜单中禁用“垂直拆分”选项，水平地拆分屏幕（如图1-5所示）。

1.2.4　“实时”视图
为了加快开发现代Web站点的进程，Dreamweaver还包括了第四种显示模式，称为“实时”视图（如图1-6所示），它提供了大多数动态效果和交互性的类似于浏览器的预览状态。无论何时打开一个HTML文件，都可以通过单击文档窗口顶部的“实时”按钮随时访问“实时”视图。当激活“实时”视图时，大多数HTML代码将像在实际的浏览器中那样工作，从而允许预览和测试大多数应用程序。当“实时”视图处于活动状态时，将不能编辑“设计”视图窗口中显示的内容。此时，仍然可以修改“代码”视图窗口中的内容和层叠样式表。要查看任何修改，必须使用出现在文档窗口顶部的“刷新”（sx.tif）图标或者按下F5键刷新“设计”视图窗口。

1.2.5　“实时代码”
“实时代码”是只要激活“实时”视图就可用的HTML代码查错显示模式。要访问“实时代码”，可以激活“实时”视图，然后单击文档窗口顶部的“实时代码”按钮。当激活时，“实时代码”将会显示HTML代码，就像它出现在Internet上真实的浏览器中一样（如图1-7所示）。“代码”窗口将交互式地呈现对元素、属性和样式所做的修改。

1.2.6　“检查”模式
“检查”模式是只要激活了“实时”视图就可用的CSS查错显示模式。它与“CSS设计器”集成在一起，可以通过把鼠标光标移到Web页面内的元素上，识别应用于页面内的内容的CSS样式。“设计”视图窗口将高亮显示目标元素，并会显示应用于该元素或者被它继承的相关CSS规则。无论何时打开了一个HTML文件，都可以单击“实时”按钮，然后单击文档窗口顶部的“检查”按钮，随时访问“检查”模式（如图1-8所示）。