El espacio de trabajo de Dreamweaver

Toma de contacto con Dreamweaver

Después de instalar Dreamweaver, cuando inicies la aplicación por primera vez, aparece un menú de inicio rápido en la pantalla que te hace tres preguntas que te ayudan a personalizar tu espacio de trabajo de Dreamweaver según tus necesidades.

Según tus respuestas a estas preguntas, Dreamweaver se abre en un espacio de trabajo de desarrollador (un diseño mínimo centrado en el código), o un espacio de trabajo estándar (un diseño dividido con herramientas visuales y una vista previa en la aplicación mientras programas). 

Al seleccionar un espacio de trabajo, debe elegir un tema de color con el que se sienta cómodo. Entonces puedes empezar.

Pantalla Inicio mejorada

La pantalla de Inicio en Dreamweaver te da acceso rápido a tus archivos usados recientemente, tipos de archivos y plantillas de inicio.

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 de Inicio al inicio o cuando no hay documentos abiertos.

Opciones de inicio en Dreamweaver

Haz clic en Aprender para acceder instantáneamente a los tutoriales de Dreamweaver desde esta pantalla.

Comienza a crear documentos en Dreamweaver haciendo clic en cualquiera de los tipos de archivos mostrados.

Abre una de las plantillas de inicio incluidas con Dreamweaver. 

Haz 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 tienes archivos recientes, esta pestaña está vacía.

También puede utilizar la funcionalidad de búsqueda utilizando el icono Buscar de la esquina superior derecha de esta pantalla. Cuando escribes una consulta de búsqueda, la aplicación muestra tus archivos recientes, recursos de Creative Cloud, enlaces de ayuda e imágenes de archivo 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 información sobre cómo crear y abrir documentos en Dreamweaver, consulte Crear y abrir 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:

Está en la parte superior de la ventana de la aplicación y contiene un selector de espacio de trabajo, menús (solo Windows) y otros controles de la aplicación.

Contiene botones que proporcionan opciones para diferentes vistas de la ventana Documento (como la vista Diseño, la vista Live 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 operaciones comunes de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer.

Está en el lado izquierdo de la ventana de la aplicación y contiene botones específicos de la 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 propiedades distintas.

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. Usando este panel, puedes extraer CSS, texto, imágenes, fuentes, colores, degradados y medidas de tus composiciones PSD en tu 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 más información, consulta Administrar 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.

es un Inspector de Propiedad CSS que te permite crear "visualmente" estilos CSS, archivos y establecer propiedades, junto con consultas de medios.

Introducción a la ventana Documento

La ventana Documento muestra el documento actual. Para cambiar vistas del documento, usa las opciones de vista en la barra de herramientas del documento. 

También puedes cambiar de vista usando las opciones de Vista en el 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 más información sobre edición en vista Live, consulta Editar elementos HTML en vista Live.

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 codificación manual para escribir y editar HTML, JavaScript y cualquier otro tipo de código.

es una versión dividida de la vista Código que te permite desplazarte para trabajar en diferentes secciones del documento al mismo tiempo. 

te permite ver tanto la vista Código como la vista Live del mismo documento en una sola ventana.

te permite ver tanto la vista Código como la vista Diseño del mismo documento en una sola ventana.

muestra el código real que usa un explorador para ejecutar la página y puede cambiar dinámicamente conforme interactúas con la página en la vista Live.

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 has realizado cambios que aún no has 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, consulta Resumen de la barra de herramientas de documento.

También puedes cambiar entre vistas usando las siguientes opciones en el menú Ver:

• Solo vista Código: selecciona Código
• Vista dividida: selecciona Dividir y selecciona cualquiera de las opciones de división
• Modo de vista: alterna entre las vistas Live y 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 organizar en cascada las ventanas de documento: selecciona Ventana > Organizar > Cascada.

Para organizar en mosaico las ventanas de documento:

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

Si abre más de un archivo, aparecen ventanas Documento en forma de fichas. Si desea cambiar el orden de las fichas de ventanas Documento, arrastre la ficha correspondiente 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 Diseño o la Vista en vivo, sólo 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 del documento, seleccione uno de los tamaños del menú emergente Tamaño de ventana en la parte inferior de la ventana del 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 nuevo 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 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:

Sólo muestra la vista Código en la ventana de documento.

Divide la ventana Documento entre la Vista de código y la Vista de diseño/en vivo. La opción de vista Diseño no está disponible para 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 que indica cómo lo ve el usuario en un explorador 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 operaciones comunes 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 probar enlaces en la vista Live, puede habilitar el clic único o el clic continuo seleccionando Ver > Opciones de vista Live > Seguir enlaces (Ctrl+clic en enlace) o Seguir enlaces 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 Live, las opciones específicas de la vista Code, como Formatear código fuente, no son visibles. 

Personalización de la barra de herramientas

Puede personalizar esta barra de herramientas según sus necesidades agregando opciones de menú o eliminando opciones de menú no deseadas 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 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 mostrar el panel Salida que muestra errores de codificación en su documento.

Color del código

(Solo disponible en la vista de código)

Seleccione cualquiera de los lenguajes de codificación de este menú emergente para cambiar la coloración del código y mostrarlo según el lenguaje de programación.

Cambio entre Insertar y Sobrescribir

(Solo disponible en la vista de código)

Le permite alternar entre los modos Insertar y Sobrescribir mientras trabaja en la vista Code.

Número de línea y de columna

(Solo disponible en la vista Code.)

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 Property Inspector (Ventana > Propiedades) le permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, 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 correspondiente a un inspector de propiedades determinado, haga clic en el botón Ayuda de la esquina superior derecha del inspector de propiedades, o seleccione Ayuda del 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. Los menús contextuales enumeran solo los comandos aplicables a la selección actual.

Para abrir un menú contextual, haga clic con el botón derecho (Windows) o Ctrl+clic (Mac) en una sección de código en la vista Code, o en un objeto en las vistas Live o Design.

Reorganización de paneles en Dreamweaver

Puedes personalizar la ubicación y apariencia de todos los paneles de Dreamweaver según tus necesidades.

Acoplar y desacoplar paneles

• Para acoplar un panel, arrástrelo por su ficha al conjunto apilado, a la parte superior, a la 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 fichas) al conjunto acoplado.
• Para quitar un panel o grupo de paneles, arrástrelo fuera del conjunto acoplado por su ficha o barra de título. Puede arrastrarlo a otro conjunto acoplado o hacer que flote con libertad.

Movimiento 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 ficha.
• Para mover un grupo de paneles, arrastre su 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 ficha y elija Cerrar o bien deselecciónelo 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 ficha del panel a la zona de colocación resaltada en el grupo.
• Para reorganizar los paneles de un grupo, arrastre la ficha de un panel a una nueva ubicación del grupo.
• Para quitar un panel de un grupo de manera que flote con libertad, arrastre el panel por su ficha fuera del grupo.
• Para mover un grupo, arrastre su barra de título (encima de las fichas).

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 ficha a la zona de colocación en la parte inferior de otro panel.
• Para cambiar el orden de apilado, arrastre un panel arriba o abajo por su ficha.
• Para quitar un panel o un grupo de paneles de la pila, de manera que flote por sí mismo, arrástrelo fuera de su ficha o barra de título.

Cambio del 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 ficha. 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 ficha, 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 puede guardar estos cambios en su espacio de trabajo guardándolo para acceder más tarde desde el Conmutador de Workspace en la barra de herramientas del 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 Workspace.
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 paso de uno a otro

Seleccione un espacio de trabajo del conmutador de espacio de trabajo en la barra de herramientas del documento.

Personalización de Dreamweaver en sistemas multiusuario

Puedes personalizar Dreamweaver para satisfacer tus 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 vuelves a instalar o actualizas Dreamweaver, Dreamweaver crea automáticamente copias de seguridad de los archivos de configuración de usuario existentes, por lo que si personalizaste esos archivos manualmente, aún tienes 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 ficha en una ventana independiente

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

Cambio de la configuración predeterminada de documento en ficha

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

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 más utilizados.

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 organizados en varias categorías, que puedes cambiar seleccionando la categoría deseada de la lista desplegable en 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 seleccionas Salto de línea del elemento emergente del botón Carácter, la próxima vez que hagas 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:

Te 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 de formulario, como búsqueda, mes y contraseña.

Te permite guardar el documento como una plantilla y marcar zonas específicas como regiones editables, opcionales, repetidas o editables opcionales.

Contiene componentes Bootstrap para proporcionar navegación, contenedores, menús desplegables y mucho más que puedes usar en proyectos adaptables.

Contiene botones para generar sitios que usan jQuery Mobile.

Te permite insertar elementos de interfaz de usuario de jQuery como acordeón, controles deslizantes y botones.

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

Insertar objeto

Para insertar un objeto usando 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

Utiliza el panel Archivos para ver y administrar los archivos de tu 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 todo lo que puede hacer con el panel Archivos, consulte Administrar archivos y carpetas.

Diseñador CSS

El panel CSS Designer (Windows > CSS Designer) es un Inspector de propiedades CSS que le permite crear "visualmente" estilos CSS, archivos y establecer propiedades, junto con 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 CSS Designer consta de los siguientes paneles 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 puedes usar este modo para comenzar a crear selectores o consultas de medios.

Este modo no reconoce la selección realizada, Esto significa que cuando selecciona un elemento en la página, el selector asociado, la consulta de medios o el CSS no se resaltan en CSS Designer.

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

Este modo es sensible al contexto. Utilice esta opción para editar las propiedades de los selectores asociados con 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 selecciona Global en el panel @Media, se muestran todos los selectores que no están incluidos en una 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 Establecer 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 ver las propiedades de un selector específico, haz clic en el nombre de ese selector en el panel.

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

Introducción a las guías visuales

Dreamweaver proporciona varios tipos de guías visuales para ayudarte a diseñar documentos y predecir aproximadamente cómo aparecen en los exploradores.Puedes hacer cualquiera de las siguientes acciones:

• Ajustar instantáneamente el tamaño deseado para una ventana de documento y comprobar si caben los elementos en la página.

• Utilizar 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 Adobe® Photoshop® o Adobe® Fireworks®.

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

• Utilizar 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 acercar 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 acercar o alejar una página, selecciona Ver > Opciones de vista de diseño > Ampliación y elige cualquiera de las opciones de ampliación disponibles.

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

• Ajustar selección - Selecciona un objeto o texto y elige esta opción para llenar la ventana de documento con la selección.
• Ajustar todo - Llena la ventana de documento con una Página completa
• Ajustar Anchura - Llena 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 información sobre cómo establecer una codificación predeterminada para nuevos documentos, consulta Crear y abrir documentos.

Personalización de colores de resaltado de Dreamweaver

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

Temas similares

• Apertura de archivos relacionados
• Información general sobre la programación en Dreamweaver
• Configuración de las preferencias de programación
• Visualización y edición del contenido de head
• Usar ayudas visuales al diseñar
• Vista previa de páginas
• Trabajar con archivos en el panel Archivos