Google Web Designer 有一个较大的中心区域，您可以在其中构建项目和修改代码。该中心区域的周围分布着工具栏、工具选项栏、时间轴，以及一组用于修改元素、添加组件、添加事件和执行其他操作的面板。
文档
在 Web Designer 界面的中心，您会看到当前文档。
系统提供两种不同的文档视图：
- 设计视图会直观地显示文档的图片、文字和其他元素，就像显示在浏览器中一样。白色场景代表广告或网页的可见区域。
- 代码视图会显示采用适当颜色编码和格式的文档代码。
您可以指定偏好设置，以自定义设计视图和代码视图。
1. 工具栏 2. 工具选项栏 3. 时间轴 4. 面板 5. 视图栏
视图栏
通过视图栏，您可在“设计视图”和“代码视图”之间进行切换、在浏览器中预览文档以及发布广告。
工具
工具栏中包含用于在场景中创建和操控元素的各种工具，其中包括用于创建文字和简单页面元素的工具、颜色选择工具和 3D 工具。
| 工具 | 说明 |
|---|---|
选择工具 |
在场景上选择和移动对象。 |
动画路径工具 |
为动画元素绘制曲线动画路径。不适用于 AMPHTML 或图片广告。 |
3D 对象旋转工具 |
在三维空间内旋转对象。 |
3D 对象平移工具 |
在三维空间内移动对象。 |
元素工具 |
通过在场景上点击并拖动，创建任意类型的 HTML 标记。 |
| 钢笔、椭圆形、矩形和直线工具 |
绘制 SVG 图形，包括使用形状工具绘制基本形状，以及使用钢笔工具绘制贝赛尔曲线。 |
文字工具 |
添加或修改文字。 |
矩形、椭圆形和多边形遮罩 |
向元素添加裁剪路径遮罩。 |
矩形、椭圆形和多边形背景幕工具 |
添加带背景幕滤镜的 div。仅适用于图片和视频文档。 |
填充、描边和渐变工具 |
修改项目中元素的颜色，包括元素的填充颜色、描边颜色和渐变填充颜色。 |
取色器工具 |
从场景中的元素选择颜色。 |
3D 场景旋转工具 |
更改项目的 3D 视图。 |
手形工具 |
更改场景的视图。 |
缩放工具 |
放大和缩小广告素材。 |
 填充颜色和描边颜色 |
更改当前的填充颜色和描边（边框）颜色。 |
工具选项
顶部的工具选项栏会显示当前所选工具的选项。例如，选择“文字工具”时，工具选项栏会显示字体和文字版式选项。
时间轴
通过时间轴，您可以使用关键帧制作动画。在快速模式下，您可以按场景制作动画；在高级模式下，您可以为每个元素分别添加动画效果。
面板
面板包括颜色、属性、文字、组件、CSS、CSS 效果、自适应、事件、动态、资源库、广告验证工具和大纲面板。您可以调整这些面板的大小，也可以对其执行重新排列、组合以及关闭操作。不妨详细了解如何整理面板。
文档标签
打开多个文档时，它们的文件名会显示在各自的标签上。您可通过以下方式在这些文档之间切换：直接点击相应标签页、按 Ctrl+Tab 跳转到下一个文档或按 Shift+Ctrl+Tab 跳转到上一个文档。
如果窗口中容纳不下所有文档标签页，您只需点击这些标签页右侧的“更多”图标 