在代码视图中导航

在代码视图中，您可以查看其他项目文件、跳转到文档中的不同位置以及搜索代码。

浏览文件

当 Google Web Designer 在代码视图下打开时，左侧的文件面板会显示项目文件夹中的文件和子文件夹列表。该面板会自动更新，以反映对该列表所做的任何更改。

打开文件

在面板中选择一个文件，即可在新标签中打开该文件。您可以打开以下类型的文件：

• Web Designer 创建的 .html 源文件
• 其他 .html 文件*
• .css*
• .js*
• .json*
• .svg*
• .xml*

^{*只能在代码视图中修改。}

您还可以打开图片文件（.jpg/.jpeg、.png、.gif）进行查看。在“文件”面板中，将鼠标指针悬停在图片的文件名上方，即可查看图片的缩略图。

Web Designer 无法打开的文件会灰显。

要打开其他项目或其他文件夹中的文件，请使用文件 > 打开…菜单命令。

过滤文件列表

在过滤文件  字段中输入文件名的一部分，让系统仅显示匹配的文件。

隐藏“文件”面板

在“文件”面板右上角点击收起 按钮可隐藏文件列表。点击展开 按钮可再次打开该面板。

浏览文档

如果您在设计视图中选择了某个元素，然后切换到代码视图，那么光标将位于选定元素的相关代码上。

转到特定行

点击页脚栏中的行号或列号以输入新值，然后按 Enter 键。

使用迷你地图

窗口右侧的迷你地图会在代码视图中显示整个文档的缩微版本。显示在编辑器中的代码部分会在迷你地图中突出显示。

在迷你地图内点击可跳至文档的相应部分，上下拖动可滚动浏览文档。

您可以在偏好设置中关闭迷你地图。

搜索代码

要查找文本，请执行以下操作：

1. 依次转到修改 > 查找，或者按 Ctrl+F (Windows) 或 ⌘+F (Mac)，在窗口底部打开搜索栏。
2. 在查找…字段中输入搜索字词。
3. 切换到所需的搜索选项：
   • 正则表达式 (.*)
   • 区分大小写 (Aa)
   • 全字匹配 ()
   • 仅限在所选内容中搜索 ()
4. Google Web Designer 会显示匹配项总数，并突出显示光标位置后的第一个匹配项。
   • 要查找下一个匹配项，请点击 图标或者按 Ctrl+G (Windows) 或 ⌘+G (Mac)。
   • 要查找上一个匹配项，请点击 图标或者按 Shift+Ctrl+G (Windows) 或 Shift+⌘+G (Mac)。
   • 要选择所有匹配项，以便同时进行修改，请点击查找全部。

按 Esc 键或点击 X 可关闭搜索栏。

要查找和替换文本，请执行以下操作：

1. 依次转到修改 > 查找/替换，或者按 Ctrl+Shift+F (Windows) 或 ⌘+Shift+F (Mac)，在窗口底部打开搜索和替换栏。
2. 在查找…字段中输入搜索字词，然后在替换…字段中输入替换文本。
3. 除了替换文本之外，您还可以使用查找文本时所用的选项（参见上文）：
   • 要替换当前匹配项并查找下一个匹配项，请点击替换。
   • 要替换所有匹配项，请点击全部替换。

切换到设计视图

在窗口右上角点击设计视图 按钮。