Aprenda a diseñar, editar y obtener vistas previas de páginas web directamente en Vista en vivo. Reorganice o introduzca elementos, aplique selectores, edite atributos de imagen, inserte, edite y dé formato al texto sin cambiar a la Vista de código.

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.

Nota:

Si la página cambia dinámicamente (debido a los scripts) o metarefresh está activado, podrían perderse los cambios realizados 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.

Los elementos con borde gris no pueden editarse en Vista en vivo
Los elementos con borde gris no pueden editarse en Vista en vivo

Nota:

En la Vista en vivo, solo las opciones que son aplicables al elemento seleccionado están disponibles en el menú principal. Las opciones que no son aplicables se muestran atenuadas cuando se selecciona el elemento.

Visualización de 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.

Visualización de elemento para el elemento
Visualización de elemento para el elemento

  • 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.

Nota:

La visualización de elemento para elementos transitorios no se mueve junto con los elementos cuando se activa la transición. Sin embargo, los cambios realizados mediante la visualización de elementos se aplican aunque no esté en la misma ubicación que el elemento de transición. 

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.

El Inspector rápido de propiedades que aparece justo sobre los elementos de la página en la Vista en vivo
El Inspector rápido de propiedades que aparece justo sobre los elementos de la página en la Vista en vivo

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

Nota:

El icono del navegador de código no se muestra en la Vista en vivo cuando se utiliza el Inspector rápido de propiedades.

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

Inspector rápido de propiedades para imágenes en los documentos de Bootstrap
Inspector rápido de propiedades para imágenes en los documentos de Bootstrap

  • 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.

Inspector rápido de propiedades para texto
Inspector rápido de propiedades para texto

  • 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.

Nota:

El Inspector de propiedades de la Vista en vivo no está disponible en las páginas de cuadrícula fluida.

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:

  • HTML
  • CSS
  • Imagen
  • Tabla
  • Multimedia (solo audio HTML5 y vídeo HTML5)
  • Ancla
  • Formulario
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

Nota:

Las propiedades relacionadas con la interfaz de usuario de jQuery y las plantillas no se pueden editar en el Inspector de propiedades de la Vista en vivo.

Edición de 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. 

Inspector rápido de propiedades para editar atributos
Inspector rápido de propiedades para editar atributos

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. 

Edición de 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 doble clic en el elemento de texto para editarlo. También puede hacer clic en el elemento de texto para ver la Visualización de elementos y entonces pulsar Intro.

Nota:

Al pulsar Intro tras pasar a modo de edición, los resultados varían dependiendo de dónde estaba el punto de inserción antes de pulsar Intro. Los cambios son similares a lo que sucede cuando se pulsa Intro mientras se edita texto en la vista de Diseño.

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

Un borde de color naranja indica modo de edición
Un borde de color naranja indica modo de edición

El punto de inserción se encuentra en la posición de doble 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.

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

Admitido No admitido
Todos los elementos HTML que pueden contener texto

Edición de etiquetas no válidas o rotas. Si el HTML contiene etiquetas rotas o no válidas, su edición dependerá de cómo entiendan los navegadores estas etiquetas:

  • Si el navegador arregla el HTML y cierra la etiqueta rota, es posible que pueda editar las etiquetas en la Vista en vivo.
  • Si el navegador añade una nueva etiqueta al leer el HTML, no podrá editar las etiquetas rotas o no válidas.

 

Archivos HTML derivados de plantillas en la Vista en vivo
Edición de páginas de jQuery
Etiquetas estructurales que contienen elementos en línea. Se presentan juntas en un solo cuadro para editarlas.
Edición de etiquetas con contenido estático y dinámico. Aunque puede editar los selectores para dichas etiquetas, el texto no se puede editar directamente 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.
Texto estático en páginas dinámicas
 
Páginas de cuadrícula fluida en la Vista en vivo sin cuadrículas
 
Texto que contiene entidades  

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.

Inspector rápido de propiedades para dar formato al texto
Inspector rápido de propiedades para dar formato al texto

Inserción de 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.
Guías interactivas en la parte superior e inferior
Guías interactivas en la parte superior e inferior de los elementos señalados

  • 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'.
Guías interactivas a la derecha e izquierda de los elementos señalados
Guías interactivas a la derecha e izquierda de los elementos señalados

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:

  1. Cambie a la Vista en vivo.

  2. En el panel Insertar, haga clic en el elemento necesario y arrástrelo al documento. Como alternativa, simplemente puede hacer clic en el elemento necesario en el panel Insertar.

    Sugerencia: si no puede arrastrar un elemento del panel Insertar a la página, reinicie el equipo y vuelva a intentarlo.

  3. Coloque el elemento en la parte superior, inferior, derecha o izquierda de un elemento mediante las guías interactivas. Alternativamente, puede colocar el elemento en un lugar exacto en la estructura de documento haciendo clic en </> y utilizando el panel DOM.

    El elemento se inserta en la página y queda resaltado.

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. 

Nota:

La selección de recuadro de la Vista en vivo está restringida a las operaciones compatibles con el navegador. 

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.

Puede seleccionar el contenido completo de dicha etiqueta en la Vista de código haciendo clic en el nombre de la etiqueta en la Vista en vivo.
Puede seleccionar el contenido completo de dicha etiqueta en 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.).

  1. Con el documento abierto en la ventana de documento, haga clic en Ver > Inspeccionar.

    Nota:

    Si todavía no se encuentra en la Vista en vivo, el modo de inspección la activará automáticamente.

  2. Pase el puntero del ratón por encima de elementos de la página para ver el modelo de cuadro CSS. El modo de inspección resalta diferentes colores para el borde, el margen, el relleno y el contenido.

  3. (Opcional) Presione la flecha izquierda del teclado de su equipo para resaltar el elemento padre del elemento actualmente resaltado. Presione la flecha derecha para regresar al resaltado del elemento hijo.

  4. (Opcional) Haga clic en un elemento para bloquear una selección resaltada.

    Nota:

    Al hacer clic en un elemento para bloquear una selección resaltada, se desactiva el modo de inspección.

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.

La imagen es seleccionada en primer lugar
Imagen seleccionada en primer lugar. Al pulsar la tecla de flecha abajo, se selecciona el párrafo debajo de la imagen, como se muestra en la imagen siguiente.

Texto en negrita seleccionado
Texto en negrita seleccionado.

El párrafo se selecciona aquí
Párrafo seleccionado. Al volver a pulsar la tecla de flecha abajo, se selecciona el elemento siguiente de la estructura DOM, el texto en negrita, como se muestra en la imagen siguiente.


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: 

El selector seleccionado se resalta
El selector seleccionado aparece resaltado con un borde de color ámbar.

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

Nota:

Puede utilizar Ctrl + [ o Cmd + [ para seleccionar un elemento principal y Ctrl + ] o Cmd + ] para seleccionar uno secundario.

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

Si prefiere no utilizar la Visualización de elementos ni el Inspector rápido de propiedades en la Vista en vivo, puede desactivar estas funciones de edición.

Métodos abreviados de teclado:

  • (Windows) Ctrl + Alt + H
  • (Mac) Cmd + Ctrl + H

  1. Cambie a la Vista en vivo y haga clic en Ver > Opciones de Vista en vivo.

  2. Seleccione Ocultar visualizaciones de 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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea