Editar en la Vista en vivo

La Vista en vivo utiliza un motor de procesamiento basado en Chromium, de forma que el contenido tiene el mismo aspecto en Dreamweaver que en el navegador Web preferido. Durante el desarrollo, puede cambiar a la Vista en vivo para ver rápidamente una vista previa de la página. Y, para ahorrar tiempo al cambiar de vista (Vista de código y Vista de diseño), puede editar los elementos HTML directamente desde la Vista en vivo.

La Vista en vivo se actualiza inmediatamente para mostrar los cambios en la página.

Puede utilizar los siguientes componentes para editar la página en la Vista en vivo:

• Panel DOM: (Ventana > DOM) muestra la estructura HTML del documento y permite copiar y pegar, duplicar, eliminar y reorganizar los elementos de la vista. Para obtener más información, consulte el Panel DOM.
• Visualización de elementos: aparece sobre el elemento HTML seleccionado en la Vista en vivo. La visualización de elementos permite asociar elementos HTML con clases e ID. Para obtener más información, consulte Asociar elementos HTML con clases e ID.
• Inspector rápido de propiedades: aparece cuando se hace clic en el icono de página intermedia en la Visualización de elementos o se selecciona texto. El Inspector rápido de propiedades permite editar atributos de imagen y dar formato al texto en la Vista en vivo. Consulte el Inspector rápido de propiedades para obtener más información.
• Inspector de propiedades de la Vista en vivo: aparece bajo la ventana Documento y permite editar varias propiedades HTML y CSS en la Vista en vivo. Para obtener más información, consulte el Inspector de propiedades de la Vista en vivo.
• Panel Insertar: (Ventana > Insertar) permite arrastrar elementos desde el panel directamente a la Vista en vivo. Para obtener más información, consulte Insertar elementos directamente en la Vista en vivo.

Sugerencias:

• Si la Vista en vivo se queda en blanco al editar la página, ciérrela y vuelva a abrirla.
• Si no aparecen reflejados los cambios en la página, haga clic en el botón Actualizar en la Vista en vivo.

El contenido que se presenta dinámicamente mediante bases de datos o JavaScript y las regiones no editables de las plantillas no se pueden editar en la Vista en vivo. Al hacer clic en estos elementos en la Vista en vivo, aparece un borde gris a su alrededor para indicar que no se pueden editar los elementos.

Con la Visualización de elementos, puede asociar elementos HTML con clases e ID directamente en la Vista en vivo. La Visualización de elementos muestra las clases y los ID disponibles para ayudarle a visualizar y a elegir la opción necesaria. 

También puede dar formato a las tablas mediante la opción Visualización de elementos. Para obtener más información, consulte el vínculo.

Asociación de elementos HTML con clases e ID

Haga clic en el elemento necesario en la Vista en vivo. Aparece la Visualización de elementos y muestra la clase y el ID asociados.

En la Vista en vivo, también puede hacer clic en el elemento HTML del panel DOM para ver la Visualización del elemento correspondiente.

• Para anular la asociación del elemento HTML con una clase o un ID, haga clic en la “x” próxima a la clase o al ID.
• Para cambiar la clase o el ID asociado al elemento HTML, haga clic en el cuadro. Aparece una lista de clases e ID disponibles. Haga clic en la opción necesaria.
• Para añadir una clase o un ID y aplicarlo al elemento, haga clic en “+” e introduzca el nombre. Para guardar los cambios, haga clic en “+” o pulse Intro.

A continuación puede usar el Diseñador de CSS para definir un selector que incluya esta clase o ID. Para más información, consulte Diseño de páginas con el Diseñador de CSS.

Inspector rápido de propiedades

Inspector rápido de propiedades para imágenes

El Inspector rápido de propiedades aparece justo sobre los elementos seleccionados en la Vista en vivo. Con este Inspector de propiedades, puede editar atributos o dar formato al texto en la Vista en vivo.

Para mostrar u ocultar el Inspector rápido de propiedades, pulse Ctrl + Alt + H (Win)/CMD + Ctrl + H (Mac).

En los documentos de Bootstrap, el Inspector rápido de propiedades también incluye diferentes opciones para personalizar las imágenes.

• Recortar con forma: haga clic en las esquinas de las imágenes para recortarlas en forma circular, redondear las esquinas o presentarlas como imágenes en miniatura.
• Convertir en adaptativa: haga clic para hacer que sus imágenes sean adaptativas y se ajusten a los diferentes tamaños de pantalla.

Inspector rápido de propiedades para texto

El Inspector rápido de propiedades para texto de la Vista en vivo le permite dar formato y añadir sangrías e hipervínculos a su texto rápidamente. El Inspector rápido de propiedades para texto aparece al hacer clic en el icono de sándwich de los elementos de texto siguientes: h1-h6, pre y p.

• La opción formato le permite cambiar la etiqueta del elemento de texto a una de estas: h1-h6, p, y pre. 
• La opción vínculo le ayuda a crear un vínculo para el elemento de texto. 
• Los iconos de negrita y cursiva le ayudan a añadir etiquetas <strong> y <em> al elemento de texto.
• El icono de sangría le ayuda a insertar sangría en el texto o a anularla. La etiqueta <blockquote> se inserta en el código o se elimina del mismo en concordancia.

En los documentos de Bootstrap, el Inspector rápido de propiedades para texto también le permite alinear y transformar los elementos de texto.

• Alinear: alinea los elementos de texto de Bootstrap a la izquierda, en el centro, a la derecha o los justifica directamente aplicando las clases correspondientes.
• Transformar: modifica las mayúsculas o minúsculas de un elemento aplicando las clases de todo minúsculas, todo mayúsculas o mayúscula inicial.

Inspector de propiedades de la Vista en vivo

Inspector de propiedades de la Vista en vivo es el tradicional Inspector de propiedades que está disponible bajo la ventana Documento.

El Inspector de propiedades de la Vista en vivo permite examinar y editar las propiedades más comunes del elemento de página seleccionado, como texto o un objeto insertado. El contenido del Inspector de propiedades de la Vista en vivo es distinto en función del elemento seleccionado.

Para acceder a la ayuda correspondiente de un Inspector de propiedades determinado, haga clic en el botón Ayuda de la esquina superior derecha del Inspector de propiedades o seleccione Ayuda en el menú Opciones de un Inspector de propiedades. 

A continuación aparecen los elementos que puede editar mediante el Inspector de propiedades de la Vista en vivo:

Editar atributos HTML

Puede añadir, editar o eliminar rápidamente atributos HTML de imágenes directamente en la Vista en vivo mediante el Inspector rápido de propiedades.

El Inspector rápido de propiedades correspondiente a las imágenes aparece al hacer clic en el icono de página intermedia . Según el espacio disponible, el Inspector de propiedades aparece a la derecha, a la izquierda, en la parte superior o en la parte inferior de la imagen. Puede mover el Inspector de propiedades y colocarlo en cualquier posición adecuada. 

Para editar los atributos, haga clic en el icono de página intermedia del Inspector rápido de propiedades. Puede cambiar el origen de la imagen junto con otros atributos como "título" y "alt", y los cambios se reflejan de forma instantánea. También puede ajustar la Anchura y la Altura de la imagen en la Vista en vivo.

Los cambios realizados se guardan al hacer alguna de las siguientes acciones:

• Hacer clic en cualquier lugar fuera del Inspector de propiedades
• Pulsar Intro
• Pulse Tabulador para editar otro atributo en el Inspector de propiedades
• Guarde el archivo
  

Cuando se cargan imágenes de forma dinámica, puede utilizar el Inspector rápido de propiedades de la imagen para examinar rápidamente los atributos definidos en la imagen. 

Editar texto directamente en la Vista en vivo

Ahora puede editar elementos de texto directamente en la Vista en vivo. No tiene más que hacer clic en el elemento de texto para editarlo. Si está en el modo Visualización de elementos presione Intro para editar el texto.

El borde de color naranja alrededor del elemento de texto indica que el modo activado es el de edición. 

El punto de inserción se coloca en el lugar en el que haga clic. Para seleccionar todo el texto del elemento, haga clic tres veces en el elemento de texto.

Se puede cortar, copiar y pegar, y deshacer-rehacer cuando se edita texto en la Vista en vivo. Al pegar texto, se hace como texto sin formato.

 La función de sincronización automática permite las ediciones realizadas en la Vista en vivo se sincronizan automáticamente con la Vista de código. 

En la tabla siguiente se enumeran las situaciones admitidas y no admitidas durante la edición de texto en la Vista en vivo:

Formatear texto

Ahora puede cambiar el formato del texto y del texto de los hipervínculos directamente en la Vista en vivo. Para ver las opciones de formato de texto, seleccione una palabra o una frase. Aparece el Inspector rápido de propiedades con opciones de formato justo encima del texto seleccionado.

Insertar elementos directamente en la Vista en vivo

Con el panel Insertar, puede arrastrar elementos directamente a la posición necesaria del documento en Vista en vivo. Las ayudas visuales en Vista en vivo, como las guías interactivas y los iconos de DOM, le ayudan a colocar los elementos arrastrados con respecto a un elemento sobre el que está el cursor.

Las guías interactivas (de color verde) aparecen al señalar con el cursor diferentes elementos de la página antes de colocar el elemento. Estas guías indican las posiciones en las que se puede insertar el elemento. Pueden aparecer encima, debajo, a la izquierda o la derecha del elemento sobre el que está el cursor.

• Encima y Debajo: aparece al señalar con el cursor todo tipo de elementos/etiquetas, excepto etiquetas en línea. Cuando señala con el cursor el primer 50 % (la parte superior) del elemento, aparecen guías encima del elemento señalado. Cuando se sitúa el cursor sobre el segundo 50 % (la parte inferior) del elemento, aparecen guías debajo del elemento sobre el que está el cursor.

• Izquierda y Derecha: aparece al poner el cursor sobre las etiquetas en línea, por ejemplo, <a>, <span> o sobre las etiquetas que tienen establecida la propiedad 'float'.

Al detenerse un momento antes de colocar el elemento, aparece el icono DOM (</>). Cuando se sitúa el cursor sobre este icono, se abrirá el panel DOM y podrá colocar el elemento dentro de la estructura DOM del documento.

Para insertar elementos directamente en Vista en vivo, siga los pasos siguientes:

Selección de recuadro

La selección de recuadro le permite seleccionar fácilmente un bloque de texto haciendo clic y arrastrándolo hasta el interior de la etiqueta en Vista en vivo. En las versiones de Dreamweaver anteriores a la 2014.1, cuando se hacía clic y se arrastraba un bloque de texto, el elemento solía moverse en su conjunto. 

Selección, arrastre y colocación de los elementos

En la Vista en vivo, puede mover un elemento haciendo clic en el nombre de la etiqueta y arrastrándolo seguidamente hasta la ubicación deseada. Al hacer clic en el nombre de una etiqueta, aparecerá el icono del cursor en forma de mano para indicarle que puede arrastrar la etiqueta desde ese punto. Cuando empiece a arrastrar la etiqueta, las guías le ayudarán a colocarla en la ubicación precisa.  

Puede seleccionar el contenido completo de una etiqueta de la Vista de código haciendo clic en el nombre de la etiqueta en la Vista en vivo.

Inspeccionar código en la Vista en vivo.

El modo de inspección funciona conjuntamente con la Vista en vivo para ayudarle a identificar rápidamente los elementos HTML y sus estilos CSS asociados. Con el modo de inspección activado, puede pasar el puntero del ratón por encima de elementos de la página para ver los atributos de modelo de cuadro CSS correspondientes a cualquier elemento de nivel de bloque.

Además de ver una representación visual del modelo de cuadro en el modo de inspección, también puede usar el Diseñador de CSS mientras pasa el puntero del ratón por encima de elementos en la Vista en vivo.

Cuando tenga abierto el Diseñador de CSS en el modo Actual y pase el puntero del ratón por encima de un elemento de la página, las reglas y propiedades del Diseñador de CSS se actualizarán automáticamente para mostrar las reglas y propiedades de dicho elemento.

Asimismo, también se actualizará cualquier vista o panel relacionado con el elemento por el que esté pasando el puntero del ratón (por ejemplo, la Vista de código, el selector de etiquetas, el inspector de propiedades, etc.).

Desplazamiento con teclado en la Vista en vivo

En Visualización de elementos, puede utilizar el teclado para desplazarse por los elementos o selectores de la página para agilizar el proceso de edición. 

Desplazamiento por los elementos de la página

Las teclas de flecha arriba y abajo le ayudan a desplazarse por los elementos de la página en Vista en vivo. El desplazamiento se basa en la estructura DOM del documento.

El desplazamiento con teclado en Vista en vivo facilita el acceso a elementos anidados y ajustados.

Al acceder a un elemento mediante la tecla de flecha arriba o abajo, aparecerá la Visualización de elemento para dicho elemento. A continuación, puede navegar a los selectores en Visualización de elementos o pulsar Intro para editar el texto directamente en Vista en vivo.

Desplazamiento por selectores

Pulse la tecla Tab para desplazarse por los selectores en Visualización de elementos. El selector seleccionado aparece con un borde de color ámbar, como se muestra a continuación: 

Si pulsa la tecla Tab después del último selector aplicado, aparecerá el cuadro de texto de adición de selector. 

Desactivación de la edición en la Vista en vivo

Escenarios no admitidos

• Los archivos de plantillas de Dreamweaver no pueden editarse en la Vista en vivo.
• Las etiquetas con contenido estático y dinámico. Aunque puede editar los selectores para estas etiquetas, el texto no se puede editar en la Vista en vivo. Si hace doble clic en estos elementos en la Vista en vivo, aparece un borde gris alrededor de ellos, lo que indica que no se puede editar el texto.
• Etiquetas con pseudoselectores aplicados. Puede obtener resultados inesperados al intentar editar estos elementos en la Vista en vivo.
• Las cuadrículas de CSS se admiten solo en La Vista en vivo de Dreamweaver 2019 y versiones posteriores.