El espacio de trabajo de Dreamweaver

Después de instalar Dreamweaver, la primera vez que inicie la aplicación, aparecerá un menú de inicio rápido en la pantalla con tres preguntas para que pueda personalizar su espacio de trabajo de Dreamweaver según sus necesidades.

Según sus respuestas a estas preguntas, Dreamweaver se abrirá en un espacio de trabajo de desarrollador (de aspecto minimalista centrado en el código) o en un espacio de trabajo estándar (pantalla dividida con herramientas visuales y una previsualización que va mostrando el código dentro de la aplicación mientras se escribe). 

Al seleccionar un espacio de trabajo, debe elegir un tema de color con el que se sienta cómodo. Después ya podrá comenzar.

Pantalla Inicio mejorada

La pantalla Inicio de Dreamweaver le proporciona acceso rápido a sus archivos, tipos de archivos y plantillas de inicio usados recientemente.

Según el estado de la suscripción, este espacio de trabajo también puede mostrar contenido adaptado a sus necesidades.

Dreamweaver muestra la pantalla Inicio cuando se inicia la aplicación o si no hay ningún documento abierto.

Opciones de inicio en Dreamweaver

Haga clic en la pestaña Formación para acceder instantáneamente a los tutoriales de Dreamweaver desde esta pantalla.

Empiece por crear documentos en Dreamweaver; para ello, haga clic en los tipos de archivo que se muestran.

Abra una de las plantillas de inicio que incluye Dreamweaver. 

Haga clic en Inicio para volver a la pantalla de inicio.  

Puede ver los ficheros recientes en los que ha estado trabajando en la pantalla de inicio. Si no tiene ningún archivo reciente, esta pestaña queda en blanco.

También puede utilizar la funcionalidad de búsqueda utilizando el icono Buscar de la esquina superior derecha de esta pantalla. Cuando escriba una consulta de búsqueda, la aplicación muestra los archivos recientes, los activos de Creative Cloud, vínculos de ayuda e imágenes de stock que coinciden con la consulta de búsqueda.

Puede hacer clic en Crear nuevo para empezar a crear los nuevos archivos de Dreamweaver. Si ya tiene archivos en su sistema, haga clic en Abrir. Para obtener más información sobre Creación y apertura de documentos en Dreamweaver, consulte Creación y apertura de archivos.

Información general sobre el espacio de trabajo

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.

Descripción general de los elementos del espacio de trabajo

El espacio de trabajo incluye los siguientes elementos:

Se encuentra a lo largo de la parte superior de la ventana de la aplicación y contiene un conmutador de espacios de trabajo, menús (solo Windows) y otros controles de la aplicación.

Contiene botones con opciones para las diferentes vistas de la ventana Documento (como la vista Diseño, la vista en vivo y la vista Código).

Para mostrar la barra de herramientas Estándar, seleccione Ventana > Barras de herramientas > Estándar. La barra de herramientas contiene botones para realizar las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer.

Se encuentra en la parte izquierda de la ventana de la aplicación y contiene botones específicos para cada vista.

Muestra el documento actual mientras lo está creando y editando.

Le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto tiene varias propiedades.

Situado en la barra de estado de la parte inferior de la ventana Documento. Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

Le ayudan a supervisar y modificar el trabajo realizado. Son ejemplos de paneles el panel Insertar, el panel Diseñador de CSS y el panel Archivos. Para ampliar un panel, haga doble clic en su pestaña.

Permite cargar y ver sus archivos PSD en Creative Cloud. Con este panel, puede extraer CSS, texto, imágenes, fuentes, colores, degradados y medidas de las composiciones PSD en su documento.

Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y elementos multimedia, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla del panel Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar del panel Insertar.

Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también permite acceder a todos los archivos almacenados en el disco local. Para obtener más información, consulte Administración de archivos y carpetas.

Permite guardar y reutilizar los fragmentos de código en distintos sitios web, sitios e instalaciones de Dreamweaver (con la configuración de sincronización). Para obtener más información, consulte Reutilización de código con fragmentos.

Se trata de un inspector de propiedades de CSS que permite crear “visualmente” estilos CSS y archivos, así como definir propiedades y consultas de medios.

Introducción a la ventana Documento

La ventana Documento muestra el documento actual. Para cambiar de una vista del documento a otro, sírvase de las opciones de visualización de la barra de herramientas Documento. 

También puede cambiar de vista con las opciones del menú Ver.

Muestra una representación realista del aspecto que tendrá el documento en un navegador, y le permite interactuar con el documento de la misma forma que lo haría en un navegador. Puede editar elementos HTML directamente en la vista en vivo y obtener de inmediato una vista previa de los cambios en la misma vista. Para obtener más información sobre la edición en la Vista en vivo, consulte Editar elementos HTML en la Vista en vivo.

Es un entorno de diseño para diseñar y editar el aspecto que tendrá la página y desarrollar rápidamente aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.

Es un entorno de programación manual para escribir y editar código HTML, JavaScript y de cualquier otro tipo.

Es una versión dividida de la vista Código que le permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez. 

Le permite ver las dos vistas del mismo documento, Vista de código y vista en vivo, en una sola ventana.

Le permite ver las dos vistas del mismo documento, Código y Diseño, en una sola ventana.

Muestra el código que un navegador utiliza para ejecutar la página y puede cambiar dinámicamente conforme se interactúa con la página en la vista En vivo.

Cuando una ventana Documento está maximizada (configuración predeterminada), aparecen pestañas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Dreamweaver muestra un asterisco después del nombre del archivo si ha realizado cambios que aún no ha guardado.

Dreamweaver también muestra la barra de herramientas Archivos relacionados debajo de la pestaña del documento (o debajo de la barra de título del documento, si está viendo documentos en ventanas independientes). Los documentos relacionados son documentos asociados al documento actual, como archivos CSS o archivos JavaScript. Para abrir uno de los archivos relacionados en la ventana Documento, haga clic en su nombre de archivo en la barra de herramientas Archivos relacionados.

Cambio de una vista a otra

Utilice la barra de herramientas Documento para cambiar de una vista a otra rápidamente. Para obtener más información, consulte Introducción a la barra de herramientas Documento.

También puede cambiar de una vista a otra con las siguientes opciones del menú Ver:

• Solo Vista de código: seleccione Código.
• Vista dividida: seleccione Dividir y seleccione alguna de las opciones de vista dividida.
• Modo de vista: alterne entre la vista en vivo y la vista de diseño.
• Cambiar vistas: para cambiar de una vista a otra.

Reorganización o colocación de las ventanas del documento en cascada o en mosaico

Si tiene varios documentos abiertos a la vez, puede organizarlos en cascada o en mosaico.

Para colocar en cascada ventanas de documentos: seleccione Ventana > Organizar > Cascada.

Para colocar ventanas de documentos en mosaico: 

• (Windows) Seleccione Ventana > Organizar > Mosaico horizontal o Mosaico vertical.
• (Macintosh) Seleccione Ventana > Organizar > Mosaico.

Si abre más de un archivo, las ventanas de los documentos aparecen en pestañas. Para reorganizar las pestañas de las ventanas de los documentos, arrastre la pestaña de una de las ventanas a otra ubicación dentro del grupo.

Cambiar el tamaño de la ventana de documento

La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxeles). Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños o crear otros nuevos.

Cuando se cambia el tamaño de vista de una página en la vista de Diseño o la Vista en vivo, solo cambian las dimensiones de la vista. El tamaño del documento no se modifica.

Además de tamaños predeterminados y personalizados, Dreamweaver también muestra los tamaños especificados en una consulta de medios. Cuando se selecciona un tamaño correspondiente a una consulta de medios, Dreamweaver usa la consulta de medios para mostrar la página. También puede cambiar la orientación de la página para obtener la vista previa de la página para dispositivos móviles en los que el diseño de página cambia en función de cómo se sujete el dispositivo.

Para cambiar el tamaño de la ventana de documento, seleccione uno de los tamaños del menú emergente Tamaño de ventana, situado en la parte inferior de la ventana de documento.

El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor o del dispositivo móvil se indica a la derecha.

Modificar los valores que aparecen en el menú emergente Tamaño de ventana

Añadir un valor al menú emergente Tamaño de ventana

Introducción a la barra de herramientas Documento

La barra de herramientas Documento contiene botones que le permiten cambiar rápidamente entre diferentes vistas del documento. La barra de herramientas contiene también algunos comandos y opciones habituales relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.

En la barra de herramientas Documento, aparecen las siguientes opciones:

Solo muestra la Vista de código en la ventana Documento.

Divide la ventana Documento entre la Vista de código y la Vista de diseño/en vivo. La opción Vista de diseño no está disponible para los documentos de cuadrícula fluida.

Es una previsualización interactiva que representa con precisión los proyectos de HTML5 y se actualiza en tiempo real para ver los cambios conforme se realizan. También puede editar elementos HTML en la vista en vivo. La lista desplegable adyacente a las opciones de Vista en vivo le permite cambiar entre la Vista en vivo y la Vista de diseño. Esta lista desplegable no está disponible en documentos de cuadrícula fluida.

Muestra una representación del documento tal y como el usuario lo verá en un navegador web. 

Introducción a la barra de herramientas Estándar

Para mostrar la barra de herramientas Estándar, seleccione Ventana > Barras de herramientas > Estándar. La barra de herramientas contiene botones para realizar las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer.

Introducción a la barra de herramientas Navegación con navegador

La barra de herramientas Navegación con navegador se activa en Vista en vivo (solo si se ha habilitado seleccionando Ventana->Barras de herramientas->Estándar), y muestra la dirección de la página que se está viendo en la ventana Documento. La Vista en vivo actúa como un navegador normal, de manera que aunque navegue a un sitio situado fuera del sitio local (por ejemplo, http://www.adobe.com), Dreamweaver cargará la página en la ventana Documento.

De manera predeterminada, los vínculos no están activos en la Vista en vivo. Que los vínculos no estén activos le permite seleccionar o hacer clic en el texto de un vínculo en la ventana Documento sin navegar a otra página. Para comprobar los vínculos en la vista En vivo, puede activar el clic único o el clic continuo seleccionando Ver > Opciones de Vista en vivo > Seguir vínculos (Ctrl + clic en vínculo) o Seguir vínculos continuamente.

Introducción a la barra de herramientas

La barra de herramientas aparece en vertical en la parte izquierda de la ventana Documento y está visible en todas las vistas: Código, En vivo y Diseño. Los botones de la barra de herramientas son específicos de cada vista y solo aparecen si son relevantes según la vista en la que se esté trabajando. Por ejemplo, si está trabajando en la vista en vivo, las opciones específicas de la Vista de código, como Formatear código fuente, no aparecerán visibles. 

Personalización de la barra de herramientas

Puede optar por personalizar esta barra de herramientas según necesite agregando opciones de menú o eliminando opciones de menú de la barra de herramientas.

Para personalizar la barra de herramientas, haga lo siguiente:

Para restaurar los botones predeterminados de la barra de herramientas, haga clic en Restaurar valores predeterminados en el cuadro de diálogo Personalizar barra de herramientas.

Introducción a la barra de estado

La barra de estado, situada en la parte inferior de la ventana Documento, proporciona información adicional sobre el documento que está creando.

Selector de etiquetas

Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o ID para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o un ID del menú contextual.

Panel de salida

Haga clic en este icono para ver el panel de salida con los errores de codificación del documento.

Color del código

(Solo disponible en la Vista de código).

Seleccione los lenguajes de codificación en este menú emergente para cambiar el color del código que mostrar según el lenguaje de programación.

Cambio entre Insertar y Sobrescribir

(Solo disponible en la Vista de código).

Permite alternar entre los modos Insertar y Sobrescribir mientras se trabaja en la Vista de código.

Número de línea y de columna

(Solo disponible en la Vista de Código).

Muestra el número de línea y el número de columna donde se encuentra el cursor.

Descripción general del inspector de propiedades

El inspector de propiedades (Ventana > Propiedades) le 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 es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen de la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de la imagen, el borde que rodea la imagen en caso de que lo haya, etc.).

El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio de trabajo, aunque puede desacoplarlo y convertirlo en un panel flotante en el espacio de trabajo.

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

Visualización y cambio de propiedades de un elemento de página

Menús contextuales

Los menús contextuales proporcionan acceso rápido a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales solo aparecen los comandos pertinentes según la selección realizada.

Para abrir un menú contextual, haga clic con el botón derecho del ratón (Windows) o presione Ctrl y haga clic (Mac) en una sección de código en la Vista de código o en un objeto en la vista en vivo o la vista de diseño.

Reorganización de paneles en Dreamweaver

Puede personalizar la colocación y el aspecto de todos los paneles de Dreamweaver en función de sus necesidades.

Acoplado y desacoplado de paneles

• Para acoplar un panel, arrástrelo por su pestaña al conjunto acoplado, a su parte superior, a su parte inferior o entre otros paneles.
• Para acoplar un grupo de paneles, arrástrelo por su barra de título (la barra vacía sólida que se encuentra encima de las pestañas) al conjunto acoplado.
• Para quitar un panel o grupo de paneles, arrástrelo fuera del conjunto acoplado por su pestaña o barra de título. Puede arrastrarlo a otro conjunto acoplado o hacer que flote con libertad.

Desplazamiento de paneles

Conforme mueva paneles, verá zonas de colocación resaltadas en azul, donde podrá mover el panel. Por ejemplo, puede mover un panel hacia arriba o hacia abajo en un conjunto acoplado arrastrándolo a la zona de colocación azul estrecha encima o debajo de otro panel. Si arrastra a un área que no es una zona de colocación, el panel flota con libertad en el espacio de trabajo.

• Para mover un panel, arrástrelo por su pestaña.
• Para mover un grupo de paneles, arrastre la barra de título.

Adición y eliminación de paneles

Si quita todos los paneles de un conjunto acoplado, este desaparece. Para crear un conjunto acoplado, mueva paneles hacia el borde derecho del espacio de trabajo hasta que aparezca una zona donde soltarlos.

• Para quitar un panel, haga clic con el botón derecho (Windows) o pulse Control y haga clic (Mac OS) en su pestaña y elija Cerrar o bien anule su selección en el menú Ventana.
• Para añadir un panel, selecciónelo en el menú Ventana y acóplelo donde desee.

Manipulación de grupos de paneles

• Para mover un panel a un grupo, arrastre la pestaña del panel a la zona de colocación resaltada dentro del grupo.
• Para reorganizar los paneles de un grupo, arrastre la pestaña de un panel a una nueva ubicación dentro del grupo.
• Para quitar un panel de un grupo de manera que flote con libertad, arrastre el panel por su pestaña fuera del grupo.
• Para mover un grupo, arrastre la barra de título (el área encima de las pestañas).

Apilado de paneles flotantes

Cuando arrastra un panel fuera de su conjunto apilado, pero no a una zona de colocación, el panel flota con libertad. Los paneles flotantes se pueden situar en cualquier lugar del espacio de trabajo. Puede apilar paneles flotantes o grupos de paneles de manera que se muevan como una unidad cuando arrastra la barra de título que se encuentra más arriba.

• Para apilar paneles flotantes, arrastre un panel por su pestaña a la zona de colocación en la parte inferior de otro panel.
• Para cambiar el orden de apilado, arrastre un panel hacia arriba o hacia abajo por su pestaña.
• Para quitar un panel o un grupo de paneles de la pila, de manera que flote solo, arrástrelo fuera por la pestaña o por la barra de título.

Cambiar el tamaño de los paneles

• Para minimizar o maximizar un panel, un grupo de paneles o una pila de paneles, haga doble clic en una pestaña. También puede hacer doble clic en el área de las pestañas (el espacio vacío que hay junto a ellas).
• Para cambiar el tamaño de un panel, arrastre cualquiera de sus lados. 

Contracción y expansión de iconos de paneles

Puede contraer los paneles a iconos para reducir la acumulación de elementos en el espacio de trabajo. En algunos casos, los paneles se contraen a iconos en el espacio de trabajo por defecto.

• Para contraer o expandir todos los iconos de paneles en una columna, haga clic en la doble flecha de la parte superior del conjunto acoplado.
• Para expandir un icono de panel único, haga clic en él.
• Para cambiar el tamaño de los iconos de paneles a fin de ver solo los iconos (pero no las etiquetas), ajuste el ancho del conjunto acoplado hasta que desaparezca el texto. Para volver a ver el texto de los iconos, aumente el ancho del conjunto acoplado.
• Para contraer un panel de vuelta a su icono, haga clic en su pestaña, en su icono o en la doble flecha de la barra de título del panel.

Crear espacios de trabajo personalizados

Puede personalizar el espacio de trabajo añadiendo o eliminando paneles según sea oportuno. Después podrá almacenar los cambios en el espacio de trabajo y acceder a ellos más adelante desde el conmutador de espacios de trabajo de la barra de herramientas Documento.

Si guarda la posición y el tamaño actuales de los paneles como un espacio de trabajo con nombre, podrá restaurar dicho espacio de trabajo incluso aunque mueva o cierre un panel.

Para guardar un espacio de trabajo personalizado:

1. Elija Ventana > Diseño del espacio de trabajo > Nuevo espacio de trabajo.
2. Escriba un nombre para el espacio de trabajo.

El espacio de trabajo se guarda y aparece visible en el conmutador de espacios de trabajo de la barra de herramientas Documento.

Para eliminar un espacio de trabajo personalizado:

Seleccione Administrar espacios de trabajo en el conmutador de espacios de trabajo de la barra de la aplicación para abrir el cuadro de diálogo Administrar espacios de trabajo. Seleccione el espacio de trabajo y, a continuación, haga clic en Eliminar.

Visualización de espacios de trabajo y cambio de uno a otro

Seleccione un espacio de trabajo en el conmutador de espacios de trabajo de la barra de herramientas Documento.

Personalización de Dreamweaver en sistemas multiusuario

Puede personalizar Dreamweaver para que se ajuste a sus necesidades, incluso en un sistema operativo multiusuario como Windows XP o Mac OS X.

Dreamweaver impide que la configuración personalizada de un usuario afecte a la configuración personalizada de otro usuario. Para lograr este objetivo, la primera vez que ejecute Dreamweaver en uno de los sistemas operativos multiusuario que reconoce la aplicación, creará copias de diversos archivos de configuración. Estos archivos de configuración se almacenan en una carpeta de su propiedad.

Si reinstala o actualiza Dreamweaver, este creará automáticamente copias de seguridad de los archivos de configuración de usuario existentes para que, en el caso de que haya personalizado dichos archivos manualmente, continúe teniendo acceso a los cambios realizados.

Visualización de documentos en pestañas (solo en Mac)

Puede ver varios documentos en una sola ventana de documento mediante las pestañas que identifican a cada uno de ellos. También puede mostrarlos como parte de un espacio de trabajo flotante en el que cada documento aparece en su propia ventana.

Apertura de un documento que se encuentra en una pestaña en una ventana independiente

Haga clic en la pestaña mientras pulsa la tecla Control y seleccione Mover a nueva ventana en el menú contextual.

Cambio de la configuración predeterminada de documento en pestaña

1. Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la categoría General.
2. Seleccione o anule la selección de Abrir documentos en pestañas y haga clic en OK.

Dreamweaver no modifica la visualización de documentos abiertos al cambiar las preferencias. No obstante, los documentos que se abran después de seleccionar una nueva preferencia se mostrarán conforme a la preferencia seleccionada.

La pantalla de bienvenida aparece al iniciar Dreamweaver y siempre que no se tiene abierto ningún documento. Puede optar por ocultar la pantalla de bienvenida y volver a mostrarla posteriormente. Cuando la pantalla de bienvenida está oculta y no hay documentos abiertos, la ventana de documento está en blanco.

Paneles de Dreamweaver más habituales

En Dreamweaver se trabaja con varios paneles. Aquí se describen algunos de los paneles que se usan con más frecuencia.

Información general sobre el panel Insertar

El panel Insertar (Ventana > Insertar) incluye botones para crear e insertar objetos como tablas, imágenes y vínculos. Los botones están ordenados en varias categorías, entre las que puede cambiar seleccionando la categoría deseada en la lista desplegable de la parte superior.

Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Salto de línea en el menú emergente del botón Carácter, la siguiente vez que haga clic en el botón Carácter, Dreamweaver insertará un salto de línea. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.

El panel Insertar está organizado en las categorías siguientes:

Permite crear e insertar los elementos HTML más utilizados, como etiquetas div, y objetos, como imágenes y tablas.

Contiene botones para crear formularios e insertar elementos en ellos, como la búsqueda, el mes y la contraseña.

Permite guardar el documento como plantilla y marcar áreas específicas como editables, opcionales, repetidas o áreas opcionales editables.

Contiene componentes de Bootstrap para facilitar, entre otras muchas cosas, funciones de navegación, contenedores y menús desplegables para usarlos en proyectos interactivos.

Contiene botones para crear sitios que usan jQuery Mobile.

Permite insertar elementos de la IU de jQuery, como el acordeón, reguladores y botones.

Permite agrupar y organizar los botones del panel Insertar que utiliza con más frecuencia en un mismo lugar.

Insertar objeto

Para insertar un objeto mediante el panel Insertar:

Editar las preferencias del panel Insertar

Adición, eliminación o administración de archivos en la categoría Favoritos del panel Insertar

Descripción general del panel Archivos

Utilice el panel Archivos para ver y administrar los archivos del sitio de Dreamweaver.

El panel Archivos se emplea para ver archivos y carpetas, comprobar si están asociados o no a un sitio de Dreamweaver y realizar operaciones estándar de mantenimiento de archivos, como abrirlos y moverlos.

El panel Archivos también permite administrar y transferir archivos a y desde un servidor remoto. 

Para obtener más información sobre lo que puede hacer con el panel Archivos, consulte Administración de archivos y carpetas.

Diseñador de CSS

El panel Diseñador de CSS (Ventanas > Diseñador de CSS) es un inspector de propiedades de CSS que permite crear "visualmente" archivos y estilos CSS, así como definir propiedades y consultas de medios.

Puede utilizar Ctrl/Cmd + Z para deshacer o Ctrl/Cmd + Y para rehacer todas las acciones realizadas en el Diseñador de CSS. Los cambios se reflejarán automáticamente en la Vista en vivo y se actualizará el archivo CSS pertinente. Para indicar que el archivo relacionado ha cambiado, la pestaña del archivo correspondiente se resalta aproximadamente 8 segundos.

El panel Diseñador de CSS incluye los siguientes subpaneles y opciones:

Todo Muestra todo el código CSS, las consultas de medios y los selectores asociados al documento actual. Puede filtrar por las reglas CSS necesarias y modificar las propiedades. También puede usar este modo para crear sus selectores o consultas de medios.

Este modo no reconoce la selección realizada, es decir, que al seleccionar un elemento en la página, el selector, la consulta de medios o el CSS asociados no se resalta en el panel Diseñador de CSS.

Actual Muestra los estilos calculados para cualquier elemento seleccionado en la vista en vivo o la vista de diseño del documento actual. Al utilizar este modo para un archivo CSS en la Vista de código, se muestran todas las propiedades del selector seleccionado.

Este modo es sensible al contexto. Utilice esta opción si quiere editar las propiedades de los selectores asociados a los elementos seleccionados en el documento.

Fuentes Muestra todas las hojas de estilo CSS asociadas al documento. Este panel le permite crear un CSS y adjuntarlo al documento, o bien definir estilos dentro del documento.

@Medios Muestra una lista de todas las consultas de medios en la fuente seleccionada en el panel Fuentes. Si no selecciona un CSS específico, este panel muestra todas las consultas de medios asociadas al documento.

Selectores Muestra una lista de todos los selectores en la fuente seleccionada en el panel Fuentes. Si también selecciona una consulta de medios, este panel limita la lista de selectores de dicha consulta de medios. Si no hay seleccionado ningún CSS ni ninguna consulta de medios, este panel muestra todos los selectores del documento.

Cuando se selecciona Global en el panel @Medios, se muestran todos los selectores no incluidos en la consulta de medios de la fuente seleccionada.

Propiedades Muestra las propiedades que se pueden definir para el selector especificado. Para obtener más información, consulte Configurar propiedades.

Al contraer o ampliar los paneles del Diseñador de CSS, los tamaños de los mismos se conservan durante el resto de una misma sesión. Los paneles Fuentes y Medios se mantienen en los tamaños personalizados hasta que los vuelva a modificar.

Nota: Cuando seleccione un elemento de página, se elegirá el selector más específico en el panel Selectores. Para consultar las propiedades de un selector específico, haga clic en el nombre del selector en cuestión en el panel.

Para ver todos los selectores, puede elegir Todas las fuentes en el panel Fuentes. Para ver los selectores que no pertenecen a ninguna consulta de medios en la fuente seleccionada, haga clic en Global en el panel @Medios.

Introducción a las guías visuales

Dreamweaver proporciona varios tipos de guías visuales para ayudarle a diseñar documentos y predecir de forma aproximada cuál será su apariencia en los navegadores. Puede seguir uno de estos procedimientos:

• Ajuste instantáneamente el tamaño deseado de la ventana Documento y compruebe si caben los elementos en la página.

• Use una imagen de rastreo como fondo de la página para ayudarle a copiar un diseño creado en una aplicación de edición de ilustraciones o imágenes como, por ejemplo, Adobe® Photoshop® o Adobe® Fireworks®.

• Use reglas y guías para proporcionar una pista visual que permita colocar y cambiar el tamaño de los elementos de página con precisión.

• Utilice la cuadrícula para lograr una mayor precisión en la colocación y ajuste del tamaño de elementos con posición absoluta (elementos PA).

  Las marcas de cuadrícula de la página le ayudan a alinear los elementos PA y, cuando está activada la función de ajuste, permiten ajustar automáticamente los elementos PA con el punto más próximo de la cuadrícula al moverlas o ajustar su tamaño. Los demás objetos, como las imágenes y los párrafos, no se ajustan a la cuadrícula. El ajuste funciona independientemente de que la cuadrícula esté visible.

Aumento y reducción de una página

Dreamweaver le permite aumentar la ventana de documento para que pueda comprobar la precisión de los píxeles de los gráficos, seleccionar elementos pequeños con mayor facilidad, diseñar páginas con texto pequeño, diseñar páginas grandes, etc.

Para aumentar o reducir una página, seleccione Ver > Opciones de Vista de diseño > Nivel de aumento y, a continuación, seleccione cualquiera de las opciones de ampliación disponibles.

Puede elegir entre distintas opciones de ampliación. También puede elegir:

• Ajustar selección: seleccione un objeto o un texto y, a continuación, elija esta opción para llenar la ventana de documento con la selección.
• Ajustar todo: llenar la ventana de documento con una página completa.
• Encajar: llenar la ventana de documento con toda la anchura de una página.

Configuración de preferencias generales para Dreamweaver

Configuración de las preferencias de fuentes para documentos de Dreamweaver

La codificación de un documento determina el aspecto que tendrá en un navegador. Las preferencias de fuentes de Dreamweaver le permiten ver una codificación determinada con la fuente y en el tamaño que prefiera. No obstante, las fuentes que seleccione en la categoría Fuentes del cuadro de diálogo Preferencias solo afectarán a la forma en que aparecen las fuentes en Dreamweaver, no a la forma en que se muestra el documento en el navegador de un visitante. Para cambiar la forma en que se muestran las fuentes en un navegador, deberá cambiar el texto mediante el inspector de propiedades o aplicando una regla CSS.

Para obtener más información sobre cómo establecer una codificación predeterminada para los documentos nuevos, consulte Creación y apertura de documentos.

Personalización de colores de resaltado de Dreamweaver

Utilice las preferencias Resaltando para personalizar los colores que identifican regiones de plantillas, elementos de biblioteca, etiquetas de terceros, elementos de diseño y código en Dreamweaver.