Ao visualizar arquivos de origem de anúncios e páginas HTML do Google Web Designer, você pode alternar entre a Visualização de código e a de design. As edições feitas na primeira são refletidas na segunda, o que permite testar instantaneamente como as alterações no código afetam o design do projeto.
Mudar para a Visualização de código:
Clique no botão Visualização de código
no canto superior direito da janela.
Os painéis da Visualização de design e alguns comandos de menu não estão disponíveis nessa visualização.
no canto superior direito da janela.Configurações da Visualização de código
É possível ajustar as opções de formatação e do editor da Visualização de código nas preferências, incluindo as seguintes configurações:
- Tema de cores
- Mapa de atalhos
- Quebra de linha
- Tamanho do recuo
- Recuo automático
- Preenchimento automático
- Como usar espaços para tabulações
- Visibilidade do minimapa
Para ver uma lista completa de opções, consulte a página sobre como definir suas preferências.
Trabalhar com o código
Os recursos a seguir facilitam a escrita e a edição de código. Saiba também como navegar pela Visualização de código no documento ou entre arquivos.
Zoom
Para alterar o tamanho do texto do código, use os controles de zoom (- e +) no lado direito da barra de rodapé. Por padrão, o Google Web Designer lembra o nível de zoom que você definiu para a Visualização de código.
Recolher blocos de código
Use as setas na margem esquerda para recolher e expandir blocos de código.
Recuo
Por padrão, o Google Web Designer recua automaticamente novas linhas enquanto você digita. Se um bloco de código não estiver recuado corretamente (por exemplo, depois de ser copiado e colado de outro arquivo), selecione o código e pressione Tab para aplicar o recuo.
Preenchimento automático de código
Por padrão, o Google Web Designer exibe sugestões enquanto você digita. Se você tiver desativado essa preferência, pressione Ctrl+Espaço para acionar o preenchimento automático.
Modo de linguagem
No Google Web Designer, as cores de sintaxe e o preenchimento automático de código são baseados na extensão do arquivo. Para modificar o modo de linguagem padrão, clique na linguagem atual no rodapé e selecione uma nova no menu pop-up.
Bibliotecas JavaScript do GreenSock
É possível adicionar ferramentas de animação comuns do GreenSock usando um comando de menu quando o ambiente está configurado como Display & Video 360 ou o projeto é uma página HTML.
Para inserir uma biblioteca GreenSock:
- Acesse a Visualização de código.
- No menu Arquivo, selecione Incluir biblioteca JS > GreenSock.
- Selecione uma opção na lista.
Repita o processo para adicionar várias bibliotecas.
Diferenças em relação ao código publicado
A Visualização de código não reflete necessariamente a forma como o código será exibido ao publicar o documento. O código que você vê ao criar um documento pode ser comprimido para ocupar menos espaço. Além disso, talvez uma parte desse código não esteja visível na visualização correspondente, mas será incluída no arquivo publicado.