Al ver los archivos de origen de Web Designer para anuncios y páginas HTML, puede cambiar entre la vista de código y la vista de diseño. Los cambios que haga en la vista de código se reflejan en la vista de diseño, lo que le permite comprobar de forma instantánea cómo los cambios afectan a sus diseños.
Para cambiar a la vista de código, haga lo siguiente:
Haga clic en el botón Vista de código
, situado en la esquina superior derecha de la ventana.
Los paneles de la vista de diseño y algunos comandos del menú no están disponibles en la vista de código.
, situado en la esquina superior derecha de la ventana.Configuración de la vista de código
Puede ajustar las opciones de formato y editor de la vista de código en las preferencias, incluidos los siguientes ajustes:
- Tema de color
- Mapeo de teclas
- Ajuste de línea
- Tamaño de la sangría
- Sangría automática
- Autocompletar
- Usar espacios en pestañas
- Visibilidad del minimapa
Para obtener una lista completa de opciones, consulte la página sobre cómo configurar sus preferencias.
Trabajar con el código
Las funciones que se indican más abajo facilitan la creación y edición de código. También puede obtener información sobre cómo desplazarse por la vista de código en su documento o entre archivos.
Zoom
Para cambiar el tamaño del texto del código, use los controles de zoom (- y +) situados en la parte derecha de la barra del pie de página. De forma predeterminada, Google Web Designer recuerda el nivel de zoom asignado a la vista de código.
Ocultar bloques de código
Utilice las flechas del margen izquierdo para ocultar y mostrar bloques de código.
Sangrado
De forma predeterminada, Google Web Designer aplica la sangría automáticamente a las nuevas líneas a medida que escribe. Si un bloque de código no tiene la sangría adecuada (por ejemplo, si ha copiado y pegado código de otro archivo), puede seleccionar el código y pulsar la tecla Tabulador para aplicarle la sangría.
Autocompletado de código
De forma predeterminada, Google Web Designer muestra sugerencias a medida que escribe. Si ha desactivado esta preferencia, puede pulsar Ctrl + Espacio para activar el autocompletado automático.
Modo de idioma
Google Web Designer basa el color de la sintaxis y el autocompletado de código en la extensión de archivo. Para anular el modo de idioma predeterminado, haga clic en el idioma actual, en el pie de página, y seleccione el que quiera en el menú emergente.
Bibliotecas JavaScript de GreenSock
Puede añadir herramientas de animación populares de GreenSock con un comando de menú si su entorno está configurado como Display & Video 360 o si su proyecto es una página HTML.
Para insertar una biblioteca de GreenSock, siga estos pasos:
- Asegúrese de que se encuentra en la vista de código.
- En el menú Archivo, seleccione Incluir biblioteca JS > GreenSock.
- Seleccione una biblioteca de la lista.
Puede repetir el proceso para añadir varias bibliotecas.
Diferencias con el código publicado
La vista de código no refleja necesariamente cómo se mostrará el código al publicar el documento. Es posible que el código que aparece mientras crea el documento esté comprimido para ocupar menos espacio y que alguno no se muestre en la vista de código, pero se incluya en el archivo publicado.