Guía del usuario Cancelar

Trabajo con activos

Buscar
Dreamweaver

Dreamweaver

Abrir aplicación
  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver
  19. Solución de problemas
    1. Problemas resueltos
    2. Problemas conocidos

 

 

Utilice el panel Activos de Dreamweaver para administrar los activos del sitio actual.

Puede utilizar Adobe Dreamweaver para realizar un seguimiento y obtener vistas previas de activos almacenados en el sitio, como imágenes, películas, colores, scripts y vínculos. Además, puede arrastrar un activo para insertarlo directamente en una página del documento actual.

Los activos pueden obtenerse de distintas fuentes. Por ejemplo, puede crear activos en una aplicación como Adobe Photoshop o Adobe Animate CC, recibirlos de un compañero de trabajo o copiarlos de un CD de ilustraciones o un sitio web de gráficos.

Dreamweaver también proporciona acceso a dos tipos de activos especiales: las bibliotecas y las plantillas. Ambos son activos vinculados: al editar un elemento de biblioteca o una plantilla, Dreamweaver actualiza todos los documentos que lo utilizan. Los elementos de biblioteca suelen representar pequeños activos de diseño, como el logotipo o el copyright de un sitio. Para controlar áreas de diseño de mayor tamaño, utilice una plantilla.

Utilice el panel Activos (Ventana > Activos) para administrar los activos del sitio actual. En el panel Activos se muestran los activos del sitio asociados al documento activo en la ventana de documento.

Nota:

Deberá definir un sitio local para ver los activos en el panel Activos.

Panel Activos en Vista en vivo
Panel Activos en Vista en vivo

Panel Activos en Vista de código y diseño

El panel Activos ofrece dos formas diferentes de ver los activos:

Lista Sitio

Enumera todos los activos del sitio, incluidos los colores y URL que se utilizan en los documentos del sitio.

Lista Favoritos

Enumera únicamente los activos que haya elegido de forma explícita.

Para alternar entre estas dos vistas, seleccione el botón de opción Sitio o Favoritos situado sobre el área de vista previa. (Estas dos vistas no están disponibles para las categorías Plantillas y Biblioteca).

Nota:

La mayoría de las operaciones del panel Activos funcionan de la misma forma en ambas listas. Sin embargo, algunas tareas solo se pueden realizar en la lista Favoritos.

En ambas listas, los activos pertenecen a una de las categorías siguientes:

Imágenes

Archivos de imagen en formato GIF, JPEG o PNG.

Colores

Colores utilizados en los documentos y las hojas de estilos, incluidos los colores del texto, de los diferentes fondos y de los vínculos.

URL

Vínculos externos de los documentos del sitio actual, incluidos FTP, gopher, HTTP, HTTPS, JavaScript, correo electrónico (mailto) y vínculos de archivos locales (file://).

Medios

Archivos multimedia como archivos de Adobe Flash (solo SWF), archivos de Adobe Shockwave, QuickTime, o archivos MPEG.

Scripts

Archivos JavaScript o VBScript. Los scripts de archivos HTML, a diferencia de los archivos JavaScript o VBScript independientes, no aparecen en el panel Activos. Esta categoría solo está disponible en Vista de código y en la vista de Diseño.

Plantillas

Diseños de página maestra utilizados en múltiples páginas. La modificación de una plantilla modifica automáticamente todas las páginas asociadas a ella. Esta categoría solo está disponible en Vista de código y en la vista de Diseño.

Elementos de biblioteca

Elementos de diseño que se utilizan en múltiples páginas. Cuando se modifica un elemento de biblioteca, se actualizan todas las páginas que contienen ese elemento. Esta categoría solo está disponible en Vista de código y en la vista de Diseño.

Nota:

Para que aparezca en el panel Activos, un archivo debe pertenecer a una de estas categorías. Otros tipos de archivos a veces se denominan activos, pero no se muestran en este panel.

De manera predeterminada, los activos de una categoría se enumeran alfabéticamente por nombre, pero puede ordenarlos por tipo y otros criterios. Se puede obtener una vista previa de los activos y cambiar el tamaño de las columnas y del área de vista previa.

El icono de Creative Cloud que aparece junto al color en las sugerencias para el código indica que esos colores están guardados en Creative Cloud. Puede hacer doble clic en el icono de Creative Cloud para remuestrear los colores correspondientes. Para obtener más información sobre la reutilización de activos en Bibliotecas CC, consulte Bibliotecas Creative Cloud en Dreamweaver.

Visualización de un activo en el área de vista previa

  1. Seleccione el activo en el panel Activos.

Visualización de los activos de una categoría

  1. Haga clic en el icono de categoría situado en la parte izquierda del panel Activos.

Ordenación de activos

  1. Haga clic en el encabezado de una columna.

    Por ejemplo, para ordenar la lista de imágenes por tipo (de modo que todas las imágenes GIF, JPEG, etc. aparezcan juntas), haga clic en el encabezado de columna Tipo.

Cambio del tamaño de una columna

  1. Arrastre la línea que separa los dos encabezados de columna.

Cambio del tamaño del área de vista previa

  1. Arrastre la barra de separación (entre el área de vista previa y la lista de activos) hacia arriba o hacia abajo.

Actualización del panel Activos

La lista Sitio puede tardar varios segundos en generarse debido a que Dreamweaver debe leer primero la caché del sitio.

Algunos cambios no aparecen inmediatamente en el panel Activos. Por ejemplo, al añadir o eliminar un activo del sitio, los cambios no se reflejan en el panel Activos hasta que se actualiza la lista Sitio haciendo clic en el botón Actualizar lista del sitio. Si añade o elimina un activo fuera de Dreamweaver, utilizando por ejemplo el Explorador de Windows o el Finder, deberá volver a generar la caché del sitio para actualizar el panel Activos.

Si elimina la única instancia de un determinado color o URL en el sitio o si guarda un archivo nuevo que contiene un color o URL que aún no se usa en el sitio, los cambios no se mostrarán en el panel Activos hasta que actualice la lista Sitio.

  • Para actualizar la lista Sitio manualmente, haga clic en el botón Actualizar lista del sitio . Dreamweaver crea o actualiza la caché del sitio según sea necesario.
  • Para actualizar la lista Sitio y volver a generar manualmente la caché del sitio, haga clic con el botón derecho del ratón (Windows), o pulse Comando y haga clic (Macintosh), en la lista Activos y seleccione Actualizar lista del sitio.

Adición de un activo a un documento

Puede insertar la mayoría de los activos en un documento arrastrándolos a la ventana de documento en Vista en Vivo, Vista de código o la vista de Diseño, o utilizando el botón Insertar del panel. Puede arrastrar los activos tanto desde la vista de lista como desde el panel de vista previa del panel Activos.

Nota: Solo podrá arrastrar desde el panel de vista previa en Mac.

Puede insertar colores y URL en la vista de Diseño o en Vista en vivo. En la vista de Diseño, puede aplicar colores y URL a ciertos elementos.

 

  1. En el documento, sitúe el punto de inserción en el lugar donde desea que aparezca el activo.

  2. En el panel Activos, seleccione entre los botones de categorías de activos de la izquierda.
    Nota:

    Seleccione cualquier categoría salvo Plantillas. Una plantilla puede aplicarse a un documento completo; no se puede insertar en un documento.

  3. Seleccione Sitio o Favoritos en la parte superior del panel y, después, seleccione el activo.

    No hay listas Sitio o Favoritos para elementos de biblioteca. Omita este paso si desea insertar un elemento de biblioteca.

  4. Siga uno de estos procedimientos:

    • Arrastre el activo desde el panel hasta el documento. Puede arrastrarlo tanto desde la vista de lista como desde el panel de vista previa.

      Nota: En Windows, no puede arrastrar activos desde el panel de vista previa.

      Puede arrastrar scripts y colocarlos en el área de contenido de encabezado de la ventana de documento. Si el área está oculta, elija Ver > Contenido de encabezado.

    • Seleccione el activo en el panel y haga clic en Insertar.

      Si el activo insertado es un color, este se aplicará al texto que aparezca después del punto de inserción.

Aplicación de un color a un texto con el panel Activos

El panel Activos muestra los colores que ya ha aplicado a diversos elementos, como texto, bordes de tablas, fondos, etc.

  1. En la vista de Diseño, realice los pasos siguientes:

    1. Seleccione el texto en el documento.

    2. En el panel Activos, seleccione la categoría Colores.

    3. Seleccione el color que desee y haga clic en Aplicar.

  2. En la Vista en vivo, realice los pasos siguientes:

    1. En el panel Activos, seleccione la categoría Colores.

    2. Siga uno de estos procedimientos:

      • Haga clic con el botón derecho del ratón en el color del panel Activos y haga clic en Copiar valor de color. El valor de color se copia en el Portapapeles. Ahora puede pegar el valor de color (Ctrl + V, Cmd + V) en el Diseñador de CSS.
      • Arrastre el color de la vista previa y pase el puntero del ratón por encima de los elementos de la Vista en vivo. Cuando suelte el color, aparecerá el cuadro de diálogo de Nueva regla CSS. Después de hacer clic en OK, se aplicará el color al elemento seleccionado.
      • En el panel Activos, haga clic en Aplicar. El cuadro de diálogo de Nueva regla CSS aparecerá y, tras hacer clic en OK, se aplicará el color al elemento seleccionado.

Asignar URL a imágenes o texto 

  1. En la vista de Diseño, realice los pasos siguientes:

    1. Seleccione el texto o la imagen.

    2. En el panel Activos, seleccione la categoría URL en la vista Sitios o Favoritos, dependiendo de donde esté almacenado el URL.

      Nota:

      Los URL de los archivos del sitio se almacenan en la vista Sitios de forma predeterminada. La vista Favoritos contiene los URL que ha añadido.

    3. Seleccione el URL.
    4. Siga uno de estos procedimientos:

      • Arrastre el URL desde el panel hasta la selección en la vista de Diseño.

      • Seleccione el URL y, a continuación, haga clic en Insertar.

  2. En la Vista en vivo, realice los pasos siguientes:

    1. En el panel Activos, seleccione la categoría URL en la vista Sitios o Favoritos, dependiendo de donde esté almacenado el URL.

    2. Siga uno de estos procedimientos:

      • Arrastre el URL desde la vista previa o la vista de lista. Pase el puntero del ratón por encima de los elementos de la Vista en vivo. Cuando coloque el URL, <a> rodeará el elemento resaltado en la Vista en vivo.
      • Haga clic en el elemento necesario en la Vista en vivo. Elija el URL en el panel Activos y haga clic en Aplicar. El elemento seleccionado se envolverá con la etiqueta <a>.

Selección y edición de activos

El panel Activos permite seleccionar múltiples activos simultáneamente. Asimismo, constituye un método rápido para comenzar a editar activos.

Selección de varios activos

  1. En el panel Activos, seleccione un activo.
  2. Seleccione los otros activos de una de estas formas:

    • Pulse la tecla Mayús mientras hace clic para seleccionar una serie de activos consecutivos.

    • Pulse Control (Windows) o Comando (Macintosh) mientras hace clic para añadir un activo individual a la selección (aunque no sea adyacente a la selección existente). Pulse la tecla Control o Comando mientras hace clic en un activo seleccionado para dejar de seleccionarlo.

Edición de un activo

Al editar un activo en el panel Activos, el comportamiento varía en función del tipo de activo de que se trate. Para algunos activos, como es el caso de las imágenes, deberá utilizar un editor externo, que se abrirá automáticamente si ha definido un editor para dicho tipo de activos. No se pueden editar colores y URL en la lista Favoritos solamente. Al editar plantillas y elementos de biblioteca, los cambios se realizan en Dreamweaver.

  1. En el panel Activos, siga uno de estos procedimientos:

    • Haga doble clic en el activo.

    • Seleccione el activo y, a continuación, haga clic en el botón Editar.

    Nota:

    Si es preciso editar el activo en un editor externo y no se abre ninguno automáticamente, elija Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh), seleccione la categoría Tipos de archivo/editores y compruebe que ha definido un editor externo para este tipo de activos.

  2. Realice los cambios.
  3. Cuando termine, realice una de las siguientes acciones:

    • Si el activo está basado en archivos (cualquier activo salvo un color o un URL), guárdelo (en el editor que empleó para editarlo) y ciérrelo.

    • Si el activo es un URL, haga clic en OK en el cuadro de diálogo Editar URL.

    Nota:

    Si el activo es un color, el selector de color se cerrará automáticamente cuando elija un color. Para ocultar el selector de color sin elegir un color, pulse la tecla Esc.

Reutilización de activos en otro sitio

El panel Activos muestra todos los activos (de tipos reconocidos) presentes en el sitio actual. Para utilizar un activo del sitio actual en otro sitio deberá copiarlo. Puede copiar un activo individual, un conjunto de activos individuales o toda la carpeta Favoritos al mismo tiempo.

Antes de transferir el activo al sitio remoto o desde este, es posible que tenga que localizar en el panel Archivos el archivo correspondiente a un activo del panel Activos.

Nota:

El panel Archivos puede mostrar un sitio distinto del que aparece en el panel Activos. Esto se debe a que el panel Activos está asociado al documento activo.

Localización del archivo de un activo en el panel Archivos

  1. En el panel Activos, seleccione la categoría del activo que desea localizar.
  2. Haga clic con el botón derecho (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en el nombre o el icono del activo del panel Activos y elija Localizar en sitio en el menú contextual.
    Nota:

    La opción Localizar en sitio no está disponible para colores o URL, pues éstos no corresponden a archivos del sitio.

    Aparecerá el panel Archivos con el archivo del activo seleccionado. El comando Localizar en sitio localiza el archivo correspondiente al activo, no un archivo que haga uso de este.

Copia de activos del panel Activos a otro sitio

  1. En el panel Activos, seleccione la categoría del activo que desea copiar.
  2. Haga clic con el botón derecho (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en uno o varios activos de la lista Sitio o la lista Favoritos, seleccione Copiar en sitio y seleccione el nombre del sitio de destino en el submenú en el que se enumeran todos los sitios definidos.
    Nota:

    En la lista Favoritos, puede copiar una carpeta Favoritos y activos individuales.

    Los activos se copian a su ubicación correspondiente del sitio de destino. Dreamweaver crea nuevas carpetas en la jerarquía del sitio de destino si es preciso. Los activos también se añaden a la lista Favoritos del sitio de destino.

    Nota:

    Si el activo que ha copiado es un color o un URL, solo aparecerá en la lista Favoritos del sitio de destino. Dado que los colores y los URL no se corresponden con archivos, no hay ningún archivo que copiar en el otro sitio.

Páginas relacionadas

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Vínculos rápidos

Ver todos los planes Administrar los planes
Ver vínculos rápidos
Ocultar vínculos rápidos

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