在代码视图中修改代码

代码视图是一种显示模式，可让您在 Google Web Designer 的内置代码编辑器中查看和修改代码。除了 HTML 文件以外，您还可以处理 CSS 文件、JavaScript 文件和 XML 文件。

在查看广告和 HTML 页面的 Web Designer 源文件时，您可以在代码视图和设计视图之间切换。您在代码视图中进行的修改也会体现在设计视图中，这样一来，您便可即时测试代码更改对设计的影响。

要切换到代码视图，请执行以下操作：

点击窗口右上角的代码视图 按钮。

在代码视图中，设计视图面板和某些菜单命令会处于停用状态。

代码视图设置

您可以在偏好设置部分调整代码视图的格式设置和编辑器选项，包括以下设置：

• 色调
• 键映射
• 换行
• 缩进尺寸
• 自动缩进
• 自动补全
• 使用空格代替制表符
• 迷你地图可见性

如需查看完整的选项列表，请参阅关于设定偏好设置的页面。

编辑代码

以下功能可让您更轻松地编写和修改代码。您还可以了解如何在代码视图中浏览文档或各个文件。

缩放

要更改代码文本大小，请使用页脚栏右侧的缩放控件（- 和 +）。默认情况下，Google Web Designer 会记住您为代码视图设置的缩放级别。

收起代码块

使用左边缘中的箭头可以收起和展开代码块。

缩进

默认情况下，Google Web Designer 会在您输入时自动缩进新行。如果某个代码块未正确缩进（例如，您从其他文件复制并粘贴了代码），您可以选择相应代码，然后按 Tab 键缩进。

代码自动补全

默认情况下，Google Web Designer 会在您输入代码时显示补全建议。如果您已关闭此偏好设置，可以按 Ctrl + 空格键来启用自动补全功能。

语言模式

Google Web Designer 会根据文件扩展名来进行语法着色和代码自动补全。要替换默认语言模式，请点击页脚中的当前语言，然后从弹出式菜单中选择新语言。

GreenSock JavaScript 库

如果您的环境设为 Display & Video 360 或者您的项目为 HTML 页面，则可使用菜单命令添加热门的 GreenSock 动画工具。

要插入 GreenSock 库，请执行以下操作：

1. 确保您处于代码视图中。
2. 从文件菜单中，选择包括 JS 库 > GreenSock。
3. 从列表中选择相应的库。

如需添加多个库，请重复执行上述流程。

与发布的代码的不同之处

代码视图不一定会反映出在您发布文档后代码将会呈现的实际效果。您在创作文档时看到的代码可能经过了压缩，以减少占用的空间。另外，有些代码可能根本不会显示在代码视图中，但会包含在发布的文件中。