Dreamweaver CC教程:在Dreamweaver中处理代码

Dreamweaver CC教程:在Dreamweaver中处理代码

Dreamweaver CC教程:在Dreamweaver中处理代码

了解如何使用 Dreamweaver 中的编码环境加快编写代码的过程。
如果您要在 Dreamweaver 中处理代码,可以选择使用开发者工作区。默认情况下此工作区显示“代码”视图,它只有“文件”和“代码片段”面板停靠在屏幕的左侧。
如果您需要更多功能,请单击“窗口”,然后选择所需的相应面板。
注意:
如果预先设计的工作区不能完全满足您的需要,您可以自定义自己的工作区布局。打开面板并将面板停靠在所需的位置,然后将工作区另存为自定义工作区。有关更多信息,请参阅创建自定义工作区。
在 Dreamweaver 中处理代码
您可以使用多种方式在 Dreamweaver 中处理代码。您可以使用:

“代码”视图:它的布局整洁简约,只能处理代码,不提供额外的面板或窗口。有关更多信息,请参阅在“文档”窗口中查看代码。 “拆分”视图:在此视图中,您可以看到“代码”视图以及“实时”或“设计”视图,因此在编码时可以看到所做的更改。有关更多信息,请参阅在“文档”窗口中对页面同时进行编码和编辑 — “拆分”视图。

您可以通过单击工作区顶部的“代码”、“拆分”和“设计/实时”切换按钮,在不同视图之间切换。
您还可以使用“代码检查器”在浮动窗口中显示您的 HTML。“代码检查器”可让您同时查看网站设计和代码,而无需将视图拆分为两半。有关更多信息,请参阅使用“代码检查器”在单独的窗口中查看代码。

在“文档”窗口中查看代码 —“代码”视图

选择“视图”>“代码”。

在文档窗口中对页面同时进行编码和编辑 -“拆分”视图

1、选择“视图”>“代码和设计”。
代码显示在顶部窗格中,页面显示在底部窗格中。
2、若要在顶部显示页面,请从“文档”工具栏上的“视图选项”菜单中选择顶部的“设计”视图。
3、若要调整“文档”窗口中窗格的大小,请将拆分条拖到所需的位置。拆分条位于两个窗格之间。
当在“设计”视图中进行更改时,“代码”视图自动更新。在“代码”视图中进行更改之后,通过在“设计”视图内单击或按 F5 键手动更新“设计”视图中的文档。

使用“代码检查器”在单独的窗口中查看代码

利用“代码检查器”,您可以在单独的编码窗口中工作,就像在“代码”视图中工作一样。
选择“窗口”>“代码检查器”。工具栏包含以下选项:
文件管理
上传或获取文件。
在浏览器中预览/调试
在浏览器中对文档进行预览或调试。
刷新“设计”视图
更新“设计”视图中的文档,使之反映在代码中所做的任何更改。在执行某些操作(如保存文件或单击该按钮)之前,您在代码中所做的更改不会自动显示在“设计”视图中。
代码导航
使您可以在代码中快速移动。请参阅转到 JavaScript 或 VBScript 函数。
视图选项
用于确定代码显示方式。请参阅设置代码外观。

 

推荐阅读