本节书摘来自异步社区《Adobe Dreamweaver CC经典教程》一书中的第1 章,第1.2节,作者:【美】Adobe公司 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.2 切换和拆分视图
Dreamweaver分别为编码员和设计人员提供了专用的环境,还提供了一个把这二者混合在一起的复合选项。
1.2.1 “设计”视图
“设计”视图在Dreamweaver工作区中着重显示其所见即所得的编辑器,它非常接近(但并非完美)地描绘了Web页面在浏览器中的样子。要激活“设计”视图,可以单击“文档”工具栏中的“设计”按钮(如图1-2所示)。大多数HTML元素和CSS(cascading style sheet,层叠样式表)格式化效果都可以在“设计”视图内正确地呈现,而动态内容和交互性则有重大的差别,比如链接行为、视频、音频、jQuery构建、某些表单元素等。
![d41fe89e865a7b9625b99b8c2236faade8ce8648](https://yqfile.alicdn.com/d41fe89e865a7b9625b99b8c2236faade8ce8648.png)
1.2.2 “代码”视图
“代码”视图在Dreamweaver工作区中只着重显示HTML代码以及各种提高代码编辑效率的工具。要访问“代码”视图,可以单击“文档”工具栏中的“代码”按钮(如图1-3所示)。
![62b0305a16fe1fcc3e1b9efe265653c62e8c83d4](https://yqfile.alicdn.com/62b0305a16fe1fcc3e1b9efe265653c62e8c83d4.png)
1.2.3 “拆分”视图
“拆分”视图提供了一个复合工作区,允许同时访问设计和代码。在其中一个窗口中所做的更改都会即时在另一个窗口中进行更新。要访问“拆分”视图,可以单击“文档”工具栏中的“拆分”按钮(如图1-4所示)。Dreamweaver默认将垂直拆分工作区。
![a1c8bf5125361130a8d97a7f440f64d772fa48be](https://yqfile.alicdn.com/a1c8bf5125361130a8d97a7f440f64d772fa48be.png)
也可以通过在“查看”菜单中禁用“垂直拆分”选项,水平地拆分屏幕(如图1-5所示)。
![7a98652734d5da43c8a2a7d8666fc709026049c4](https://yqfile.alicdn.com/7a98652734d5da43c8a2a7d8666fc709026049c4.png)
1.2.4 “实时”视图
为了加快开发现代Web站点的进程,Dreamweaver还包括了第四种显示模式,称为“实时”视图(如图1-6所示),它提供了大多数动态效果和交互性的类似于浏览器的预览状态。无论何时打开一个HTML文件,都可以通过单击文档窗口顶部的“实时”按钮随时访问“实时”视图。当激活“实时”视图时,大多数HTML代码将像在实际的浏览器中那样工作,从而允许预览和测试大多数应用程序。当“实时”视图处于活动状态时,将不能编辑“设计”视图窗口中显示的内容。此时,仍然可以修改“代码”视图窗口中的内容和层叠样式表。要查看任何修改,必须使用出现在文档窗口顶部的“刷新”(sx.tif)图标或者按下F5键刷新“设计”视图窗口。
![76ca9a98494ea9c2d87e81efc93d42228fbb640a](https://yqfile.alicdn.com/76ca9a98494ea9c2d87e81efc93d42228fbb640a.png)
1.2.5 “实时代码”
“实时代码”是只要激活“实时”视图就可用的HTML代码查错显示模式。要访问“实时代码”,可以激活“实时”视图,然后单击文档窗口顶部的“实时代码”按钮。当激活时,“实时代码”将会显示HTML代码,就像它出现在Internet上真实的浏览器中一样(如图1-7所示)。“代码”窗口将交互式地呈现对元素、属性和样式所做的修改。
![6c8958afb08ab37553838e891356b3fbb6d547f5](https://yqfile.alicdn.com/6c8958afb08ab37553838e891356b3fbb6d547f5.png)
1.2.6 “检查”模式
“检查”模式是只要激活了“实时”视图就可用的CSS查错显示模式。它与“CSS设计器”集成在一起,可以通过把鼠标光标移到Web页面内的元素上,识别应用于页面内的内容的CSS样式。“设计”视图窗口将高亮显示目标元素,并会显示应用于该元素或者被它继承的相关CSS规则。无论何时打开了一个HTML文件,都可以单击“实时”按钮,然后单击文档窗口顶部的“检查”按钮,随时访问“检查”模式(如图1-8所示)。
![5e2649fa65a0c23113be15ba00b962a21f26d722](https://yqfile.alicdn.com/5e2649fa65a0c23113be15ba00b962a21f26d722.png)