Descubra el espacio de trabajo de Dreamweaver, las diferentes vistas y espacios de trabajo disponibles y todos los paneles y barras de herramientas de Dreamweaver.

Incorporación 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 abre en un espacio de trabajo de desarrollador (de aspecto minimalista centrado en el código) o 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.

Nota:

Podrá cambiar las preferencias del espacio de trabajo en cualquier otro momento con el cuadro de diálogo Editar > Preferencias.

El inicio

La pantalla de inicio de Dreamweaver le proporciona acceso rápido a sus archivos recientes, archivos de las bibliotecas CC 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 cuando se inicia la aplicación o si no hay ningún documento abierto.

Espacio de trabajo de inicio en Dreamweaver
Espacio de trabajo de inicio en Dreamweaver

Opciones de inicio en Dreamweaver

Archivos recientes

Abrir un archivo abierto recientemente que esté en la lista de archivos recientes.

Archivos de CC

Abrir archivos recientes guardados en las bibliotecas CC en la nube.

Inicio rápido

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

Plantillas de inicio

Abra una de las plantillas de inicio que incluye Dreamweaver. 

Nota:

Esta pantalla de inicio está activada y se abre de forma predeterminada. 

Si no necesita esta pantalla de inicio, desactive Mostrar pantalla de inicio en el cuadro de diálogo Preferencias > General.

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.

Espacio de trabajo de Dreamweaver (CC)
Espacio de trabajo de Dreamweaver

A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana Documento D. Conmutador de espacios de trabajo E. Paneles F. Vista de código G. Barra de estado H. Selector de etiquetas I. Vista en vivo J. Barra de herramientas 

Descripción general de los elementos del espacio de trabajo

El espacio de trabajo incluye los siguientes elementos:

Barra de la aplicación

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.

Barra de herramientas Documento

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

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.

Barra de herramientas

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

Ventana Documento

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

Inspector de propiedades

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

Selector de etiquetas

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.

Paneles

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

El panel Extract

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.

Panel Insertar

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.

Panel Archivos

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.

Panel Fragmentos

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.

Panel Diseñador de CSS

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

Nota:

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles, inspectores y ventanas, utilice el menú Ventana.

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.

Vista en vivo

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 Edición de elementos HTML en la Vista en vivo.

Vista de Diseño

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.

Vista de código

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

Código: Código

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. 

Código: en vivo

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

Código: Diseño

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

Código en vivo

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 fichas 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 ficha 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.
Cambio de vistas con las opciones del menú Ver
Cambio de vistas con las opciones del menú Ver

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 fichas. Para reorganizar las fichas de las ventanas de los documentos, arrastre la pestaña de una de las ventanas a otra ubicación dentro del grupo.

Cambio del 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.

Opciones de cambio de tamaño del documento
Opciones de cambio de tamaño 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.

Nota:

Si no desea asignar un tamaño tan preciso, utilice los métodos estándar de su sistema operativo, como arrastrar la esquina inferior derecha de una ventana.

Nota:

(Solo Windows) Los documentos contenidos en la ventana de documento se maximizan de manera predeterminada y no es posible cambiar el tamaño de un documento maximizado. Para que el documento deje de aparecer maximizado, haga clic en el botón para anular la visualización maximizada, en la esquina superior derecha del documento.

Modificación de los valores que aparecen en el menú emergente Tamaño de ventana

  1. Elija Editar tamaños en el menú emergente Tamaño de ventana.

  2. Haga clic en cualquiera de los valores de anchura o altura de la lista Tamaños de ventana y escriba un valor nuevo. Para hacer que la ventana de documento se ajuste solo a una anchura específica (sin modificar la altura), seleccione un valor de altura y elimínelo.

  3. Haga clic en el cuadro Descripción para introducir un texto descriptivo sobre un tamaño específico.

Adición de un valor al menú emergente Tamaño de ventana

  1. Elija Editar tamaños en el menú emergente Tamaño de ventana.

    Adición de tamaños de ventana al menú emergente Tamaño de ventana
    Adición de tamaños de ventana al menú emergente Tamaño de ventana

  2. Haga clic en el espacio en blanco situado debajo del último valor de la columna Anchura.

  3. Introduzca valores en Anchura y Altura.

    Para establecer solo el Ancho o la Altura, sencillamente deje un campo vacío.

  4. Haga clic en el campo Descripción para introducir el texto descriptivo sobre el tamaño añadido.

    Por ejemplo, puede escribir SVGA o PC estándar junto a la entrada correspondiente a un monitor de 800 x 600 píxeles, y Mac 17 pulg. junto a la entrada correspondiente a un monitor de 832 x 624 píxeles. La mayoría de los monitores se pueden ajustar a varias dimensiones de píxeles.

  5. Haga clic en Aplicar y cierre el cuadro de diálogo.

    El nuevo tamaño de ventana ya está disponible para utilizarse en el 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.

Barra de herramientas Documento (CC)
Barra de herramientas Documento

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

Vista de código

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

Vista dividida

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.

Vista en vivo

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.

Vista de diseño

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

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 la Vista en vivo y muestra la dirección de la página que 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/es), Dreamweaver cargará la página en la ventana Documento.

Barra de herramientas de navegación con navegador (CC)
Barra de herramientas de navegación con navegador

A. Controles de navegador B. Cuadro de dirección 

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:

  1. Haga clic en  en la barra de herramientas para abrir el cuadro de diálogo Personalizar barra de herramientas.

    Personalización de barras de herramientas
    Personalización de barras de herramientas

  2. Seleccione las opciones del menú que desee tener disponibles en la barra de herramientas, o anule su selección; haga clic en Listo para guardar la barra de herramientas.

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.

Barra de estado (CC)
Barra de estado

A. Selector de etiquetas B. Panel de salida C. Color del código D. Cambio entre Insertar y Sobrescribir E. Número de línea y de columna 

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 una 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 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.).

Inspector de propiedades (CC)
Inspector de propiedades

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.

Nota:

Utilice el inspector de etiquetas para ver y editar todos los atributos asociados con una propiedad de etiqueta determinada.

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

  1. Seleccione el elemento de página en la ventana de documento.

    Es posible que tenga que ampliar el inspector de propiedades para ver todas las propiedades del elemento seleccionado.

  2. Cambie las propiedades en cuestión en el inspector de propiedades.

    Nota:

    Para obtener información sobre propiedades específicas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono de ayuda, situado en la esquina superior derecha del inspector de propiedades.

  3. Si los cambios realizados no se aplican inmediatamente en la ventana de documento, aplíquelos mediante uno de estos procedimientos:

    • Haga clic fuera de los campos de texto de edición de propiedades.
    • Presione Intro (Windows) o Retorno (Macintosh).
    • Presione el tabulador para cambiar a otra propiedad.

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

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 ficha.
  • Para mover un grupo de paneles, arrastre la barra de título.

Nota:

Pulse Ctrl (Windows) o Comando (Mac OS) mientras mueve un panel para evitar que se acople. Pulse Esc mientras mueve el panel para cancelar la operación.

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 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 ficha fuera del grupo.
  • Para mover un grupo, arrastre la barra de título (el área 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 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.

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 fichas (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.

Creación de 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 fichas (solo en Mac)

Puede ver varios documentos en una sola ventana de documento mediante las fichas 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 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.

Panel Insertar
Panel Insertar

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:

HTML

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

Formulario

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

Plantillas

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

Componentes de Bootstrap

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

jQuery Mobile

Contiene botones para crear sitios que usan jQuery Mobile.

IU de jQuery

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

Favoritos

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

Nota:

 Si utiliza determinados tipos de archivos, como XML, JavaScript, Java y CSS, el panel Insertar y la opción de vista de Diseño están atenuadas, ya que no pueden insertarse elementos en esos archivos de código.

Insertar objeto

Para insertar un objeto mediante el panel Insertar:

  1. Seleccione la categoría en cuestión en el menú emergente Categoría del panel Insertar.

  2. Siga uno de estos procedimientos:

    • Haga clic en un botón de objeto o arrastre el icono correspondiente a la ventana Documento (en Vista de diseño, Vista en vivo o Vista de código).

    • Haga clic en la flecha de un botón y seleccione una opción del menú.

      Dependiendo del objeto de que se trate, aparecerá un cuadro de diálogo de inserción de objeto, que solicitará que se busque un archivo o se especifiquen los parámetros del objeto. Otra posibilidad es que Dreamweaver inserte código en el documento o abra un panel o un editor de etiquetas para especificar información antes de insertar el código.

      Para algunos objetos, no aparece ningún cuadro de diálogo si se inserta el objeto en la Vista de diseño, pero aparece un editor de etiquetas si se utiliza la Vista de código. Con algunos objetos, al insertar el objeto en la Vista de diseño, Dreamweaver cambia a la Vista de código antes de insertar el objeto.

Edición de las preferencias del panel Insertar

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

  2. En la categoría General del cuadro de diálogo Preferencias, desactive Mostrar diálogo al insertar objetos para suprimir cuadros de diálogo al insertar objetos como imágenes, tablas, scripts y elementos de encabezado, o mantenga presionada la tecla Control (Windows) o la tecla Opción (Macintosh) mientras esté creando el objeto.

Nota:

Cuando se inserta un objeto con esta opción desactivada, el objeto recibe valores de atributo predeterminados. Después de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades.

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

  1. Seleccione una categoría en el panel Insertar.

  2. Haga clic con el botón derecho del ratón (Windows) o presione Control y haga clic (Macintosh) en el área en la que aparecen los botones y, seguidamente, seleccione Personalizar favoritos.

  3. En el cuadro de diálogo Personalizar objetos favoritos, realice los cambios que sean necesarios y haga clic en Aceptar.

    Para añadir un objeto, selecciónelo en el panel Objetos disponibles de la izquierda y, a continuación, haga clic en la flecha situada entre los dos paneles o haga doble clic en el objeto en el panel Objetos disponibles.

    Personalización de favoritos en el panel Insertar
    Personalización de favoritos en el panel Insertar

    Nota:

    Los objetos se añaden de uno en uno. No se puede seleccionar un nombre de categoría, como por ejemplo Común, para añadir una categoría completa a la lista de favoritos.

    • Para suprimir un objeto o separador, seleccione el objeto que desee en el panel Objetos favoritos, situado a la derecha y, a continuación, haga clic en el botón Quite el objeto seleccionado de la lista de objetos favoritos que está encima del panel.
    • Para mover un objeto, seleccione el objeto que desee en el panel Objetos favoritos, situado a la derecha, y, a continuación, haga clic en el botón de flecha arriba o abajo que está encima del panel.
    • Para añadir un separador debajo de un objeto, seleccione el objeto que desee en el panel Objetos favoritos, situado a la derecha y, a continuación, haga clic en el botón Añadir separador que está debajo del panel.
  4. Si no está en la categoría Favoritos del panel Insertar, selecciónela para ver los cambios que haya realizado.

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. 

Panel Archivos
Panel Archivos

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 ficha del archivo correspondiente se resalta aproximadamente 8 segundos.

Panel Diseñador de CSS (CC)
Panel Diseñador de CSS

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

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

Nota:

También puede aumentar y reducir la vista sin necesidad de recurrir a la herramienta Zoom: presione Control+= (Windows) o Comando+= (Macintosh). También puede reducir la vista sin necesidad de recurrir a la herramienta Zoom: presione Control+- (Windows) o Comando+- (Macintosh).

Configuración de preferencias generales para Dreamweaver

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

  2. Defina cualquiera de las opciones siguientes:

    Abrir documentos en fichas Abre todos los documentos en una sola ventana con fichas para que pueda pasar de un documento a otro (solo en Mac).

    Mostrar pantalla de inicio Muestra la pantalla de bienvenida de Dreamweaver cuando inicia la aplicación o cuando no hay ningún documento abierto.

    Volver a abrir documentos al iniciar Abre todos los documentos que estaban abiertos cuando se cerró Dreamweaver. Si esta opción no está seleccionada, Dreamweaver muestra la pantalla de bienvenida o una pantalla en blanco al iniciarse (en función del valor de Mostrar pantalla de bienvenida).

    Advertir al abrir archivos de solo lectura Avisa cuando se abre un archivo de solo lectura (bloqueado). Elija entre desbloquear/proteger el archivo, ver el archivo o cancelar.

    Activar archivos relacionados Le permite ver los archivos que están conectados al documento actual (por ejemplo, archivos CSS o JavaScript). Dreamweaver muestra un botón por cada archivo relacionado en la parte superior del documento y abre el archivo cuando se hace clic en el botón.

    Detectar archivos relacionados dinámicamente Le permite seleccionar si Archivos relacionados dinámicamente debe aparecer en la barra de herramientas Archivos relacionados de forma automática o tras una interacción manual. También puede optar por deshabilitar la detección de Archivos relacionados dinámicamente.

    Actualizar vínculos al mover archivos Determina qué sucede al mover, cambiar el nombre o eliminar un documento del sitio. Establezca esta preferencia para actualizar siempre los vínculos de manera automática, para no actualizarlos nunca o para que se muestre un mensaje que pregunte si desea actualizarlos. (Consulte Actualización automática de vínculos).

    Mostrar diálogo al insertar objetos Determina si Dreamweaver solicita especificar información adicional cuando se insertan imágenes, tablas, películas de Shockwave y otros objetos, con el panel Insertar o el menú Insertar. Si esta opción está desactivada, no aparecerá el cuadro de diálogo y deberá emplear el inspector de propiedades para especificar el archivo de origen para imágenes, el número de filas de una tabla, etc. Para imágenes de sustitución y HTML de Fireworks, siempre aparece un cuadro de diálogo cuando inserta el objeto, independientemente de la configuración de esta opción. (Para anular temporalmente esta configuración, haga clic mientras pulsa la tecla Control (Windows) o mientras pulsa la tecla Comando (Macintosh) durante la creación e inserción de objetos).

    Permitir entrada en línea de doble byte Permite introducir texto de doble byte directamente en la ventana de documento si utiliza un kit de lenguaje o entorno de desarrollo que facilite texto de doble byte (como los caracteres japoneses). Cuando esta opción está desactivada, aparece una ventana para introducir y convertir texto de doble byte. El texto aparecerá en la ventana de documento cuando sea aceptado.

    Cambiar a párrafo sencillo tras el encabezado Especifica que al pulsar Intro (Windows) o Retorno (Macintosh) al final de un párrafo de encabezado en la vista de diseño o en vivo, se cree un nuevo párrafo con la etiqueta p. (El párrafo de encabezado es el que lleva una etiqueta de encabezado, como h1 o h2). Si se desactiva esta opción, al pulsar Intro o Retorno al final de un párrafo de encabezado, se crea un nuevo párrafo con la misma etiqueta de encabezado (lo que permite escribir varios encabezados seguidos y luego volver para especificar los detalles).

    Permitir múltiples espacios consecutivos Especifica que al introducir uno o varios espacios en la vista de diseño o en vivo, se creen espacios indivisibles que aparecerán en un navegador como varios espacios múltiples. (Por ejemplo, puede introducir dos espacios entre frases, tal y como lo haría con una máquina de escribir). Esta opción está diseñada principalmente para gente que está acostumbrada a teclear en un procesador de textos. Si está desactivada, varios espacios se consideran un espacio único (puesto que así lo hacen los navegadores).

    Usar <strong> y <em> en lugar de <b> e <i> Especifica que Dreamweaver debe aplicar la etiqueta strong cuando realice una acción que aplicaría normalmente a la etiqueta b, y que debe aplicar la etiqueta em cuando realice una acción que aplicaría normalmente la etiqueta i. Estas acciones incluyen hacer clic en los botones Negrita o Cursiva en el inspector de propiedades de texto en modo HTML y elegir Formato > Estilo > Negrita o Formato > Estilo > Cursiva. Para utilizar las etiquetas b e i en sus documentos, desactive esta opción.

    Nota: El World Wide Web Consortium desaconseja el uso de las etiquetas b e i; las etiquetas strong y em proporcionan más información semántica que las etiquetas b e i.

    Advertir al colocar regiones editables entre etiquetas <p> o <h1> - <h6> Especifica si debe mostrarse un mensaje de advertencia al guardar una plantilla de Dreamweaver que tiene una región editable dentro de una etiqueta de párrafo o encabezado. El mensaje indica que los usuarios no podrán crear más párrafos en la región. Está activada de manera predeterminada.

    Limitar las veces que se puede deshacer en el documento activo Limita el número máximo de operaciones de deshacer.

    Número máximo de pasos de Historial Determina el número de pasos que guarda y muestra el panel Historial. (El valor predeterminado suele ser válido para la mayoría de los usuarios). Si supera el número máximo de pasos definido para el panel Historial, se eliminarán los pasos más antiguos.

    Diccionario ortográfico Muestra los diccionarios ortográficos disponibles. Si un diccionario contiene múltiples variantes o convenciones ortográficas (por ejemplo, español de México o español de Colombia), dichas variantes se enumerarán por separado en el menú emergente Diccionario ortográfico.

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.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).

  2. Seleccione Fuentes en la lista Categoría de la izquierda.

  3. Seleccione un tipo de codificación (por ejemplo, Europeo occidental o Japonés) en la lista de configuración de fuentes.

    Nota:

    Para mostrar un idioma asiático, deberá utilizar un sistema operativo que admita fuentes de doble byte.

  4. Seleccione una fuente y un tamaño para cada categoría de la codificación seleccionada.

    Nota:

    Para que una fuente aparezca en los menús emergentes de fuentes, esta deberá estar instalada en el equipo. Por ejemplo, para ver texto en japonés deberá contar con una fuente japonesa instalada.

    Fuente proporcional

    La fuente que utiliza Dreamweaver para mostrar texto normal (por ejemplo, texto en párrafos, encabezados y tablas). El valor predeterminado depende de las fuentes que estén instaladas en el sistema. Para la mayoría de los sistemas de Estados Unidos, el valor predeterminado es Times New Roman 12 pt. (medio) en Windows y Times 12 pt. en Mac OS.

    Fuente fija

    La fuente que utiliza Dreamweaver para mostrar texto en etiquetas pre, code y tt. El valor predeterminado depende de las fuentes que estén instaladas en el sistema. Para la mayoría de los sistemas de Estados Unidos, el valor predeterminado es Courier New 10 pt. (pequeño) en Windows y Monaco 12 pt. en Mac OS.

    Vista de código

    La fuente utilizada para todo el texto que aparece en la Vista de código del inspector de código. El valor predeterminado depende de las fuentes que estén instaladas en el sistema.

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.

  1. Seleccione Edición > Preferencias y seleccione la categoría Resaltando.

  2. Haga clic en el cuadro de color situado junto al objeto cuyo color de resaltado desea cambiar y, a continuación, utilice el selector de color para seleccionar un nuevo color, o especifique un valor hexadecimal.

  3. Para activar o desactivar el resaltado para una opción concreta, seleccione la opción Mostrar, o anule su selección.

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