Obtención de vista previa de páginas en Dreamweaver

La Vista en vivo se diferencia de la vista de diseño tradicional de Dreamweaver en que ofrece una representación no editable más realista de la apariencia que tendrá la página en un navegador. La Vista en vivo no sustituye al comando Vista previa en el navegador, sino que proporciona otra forma de ver la página “en vivo” sin tener que abandonar el espacio de trabajo de Dreamweaver.

Podrá cambiar a la Vista en vivo en cualquier momento mientras se encuentre en la vista Diseño. No obstante, el cambio a la Vista en vivo no está relacionado con el cambio entre cualquiera de las otras vistas tradicionales de Dreamweaver (Código/Dividida/Diseño). Al cambiar a la Vista en vivo desde la vista Diseño, simplemente estará alternando la vista Diseño entre editable y “en vivo”.

Mientras la vista Diseño permanece congelada al entrar en la Vista en vivo, la vista Código permanece editable, de manera que pueda cambiar el código y luego actualizar la Vista en vivo para comprobar cómo surten efecto los cambios realizados. Cuando se encuentre en la Vista en vivo, dispondrá de una opción adicional para ver el código en vivo. La vista Código en vivo se asemeja a la Vista en vivo en que muestra una versión del código que ejecuta el navegador para representar la página. Al igual que la Vista en vivo, la vista Código en vivo es una vista no editable.

Una ventaja añadida de la Vista en vivo es su capacidad para congelar el código JavaScript. Por ejemplo, puede cambiar a la Vista en vivo y pasar el puntero por filas de una tabla basada en Spry que cambian de color como resultado de la interacción del usuario. Al congelar el código JavaScript, la Vista en vivo congela la página en su estado actual. Puede editar el código CSS o JavaScript y actualizar la página para comprobar cómo surten efecto los cambios. La congelación del código JavaScript en la Vista en vivo puede ser útil para comprobar y cambiar propiedades de los diferentes estados de los menús emergentes u otros elementos interactivos que no pueda ver en la vista Diseño tradicional.

Para ver un tutorial en vídeo acerca del trabajo con la Vista en vivo, archivos relacionados y el navegador de código, consulte www.adobe.com/go/lrvid4044_dw_es.

1. Asegúrese de que se encuentra en la vista Diseño (Ver > Diseño) o en las vistas Código y Diseño (Ver > Código y Diseño).

2. Haga clic en el botón Vista en vivo .

3. (Opcional) Realice los cambios deseados en la vista Código, en el panel Estilos CSS, en una hoja de estilos CSS externa o en otro archivo relacionado.

   Aunque no es posible realizar modificaciones en la Vista en vivo, las opciones para realizar cambios en otras áreas (por ejemplo, en el panel Estilos CSS o en la vista Código) cambian al hacer clic en Vista en vivo.

   Puede trabajar con archivos relacionados (por ejemplo, hojas de estilos CSS) mientras mantiene el foco en la Vista en vivo abriendo el archivo relacionado desde la barra de herramientas Archivos relacionados, situada en la parte superior del documento.

4. Si ha realizado cambios en la vista Código o en un archivo relacionado, actualice la vista haciendo clic en el botón Actualizar de la barra de herramientas Documento o presionando F5.

5. Para regresar a la vista Diseño editable, haga clic de nuevo en el botón Vista en vivo.

El código mostrado en la vista Código en vivo se asemeja a lo que se ve al mostrar el código fuente de la página desde un navegador. A diferencia de dicho código fuente de página, que es estático y sólo ofrece el código fuente de la página desde el navegador, la vista Código en vivo es dinámica y se actualiza conforme se interactúa con la página en la Vista en vivo.

1. Asegúrese de que se encuentra en la Vista en vivo.

2. Haga clic en el botón Código en vivo .

   Dreamweaver muestra el código en vivo que el navegador utilizaría para ejecutar la página. El código se resalta en amarillo y no es editable.

3. Para regresar a la vista Código editable, haga clic de nuevo en el botón Código en vivo.

Siga uno de estos procedimientos:

• Presione F6

• Seleccione Congelar JavaScript del menú emergente del botón Vista en vivo.

Una barra de información, situada en la parte superior del documento, le indica que el código JavaScript está congelado. Para cerrar la barra de información, haga clic en el vínculo cerrar.

Además de la opción Congelar JavaScript, hay otras opciones disponibles en el menú emergente del botón Vista en vivo o a través del elemento de menú Ver > Opciones de vista en vivo.

Congelar JavaScript

Congela elementos afectados por código JavaScript en su estado actual.

Desactivar JavaScript

Desactiva el código JavaScript y vuelve a representar la página como se mostraría en un navegador que no tuviera JavaScript activado.

Desactivar plug-ins

Desactiva los plug-ins y vuelve a representar la página como se mostraría en un navegador que no tuviera plug-ins activados.

Utilizar servidor de prueba para origen de documentos

Se utiliza principalmente para páginas dinámicas (como páginas ColdFusion) y se selecciona de manera predeterminada para páginas dinámicas. Cuando está seleccionada esta opción, Dreamweaver utiliza la versión del archivo existente en el servidor de prueba del sitio como origen para la visualización de la Vista en vivo.

Utilizar archivos locales para vínculos de documentos

La configuración predeterminada para sitios no dinámicos. Cuando se selecciona esta opción para sitios dinámicos que utilizan un servidor de prueba, Dreamweaver utiliza las versiones locales de los archivos que están vinculados al documento (por ejemplo, los archivos CSS y JavaScript), en lugar de los archivos del servidor de prueba. Seguidamente, podrá realizar cambios locales en los archivos relacionados, de manera que pueda comprobar su apariencia antes de colocarlos en el servidor de prueba. Si no está seleccionada esta opción, Dreamweaver utilizará las versiones de los archivos relacionados existentes en el servidor de prueba.

Configuración de petición HTTP

Abre un cuadro de diálogo de configuración avanzada en el que podrá introducir valores para la visualización de datos en vivo. Para más información, haga clic en el botón Ayuda del cuadro de diálogo.