Trabajo con activos

Última actualización el 25 abr. 2024

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, podría crear recursos en una aplicación como Adobe Photoshop o Adobe Animate, o recibirlos de un compañero de trabajo, o copiarlos de un CD de imágenes prediseñadas o de 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 antes de 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 Assets ofrece diferentes formas de ver los recursos:

Lista Sitio

Muestra todos los recursos de su sitio, incluidos los colores y las URL que se usan en cualquier documento del sitio.

Lista Favoritos

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

Para cambiar entre estas dos vistas, seleccione el botón de opción Sitio o Favoritos encima del á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 sólo se pueden realizar en la lista Favoritos.

En ambas listas, los activos quedan dentro de una de estas categorías:

Imágenes

Archivos de imagen en formatos GIF, JPEG o PNG.

Colores

Colores usados en documentos y hojas de estilo, incluidos los colores del texto, fondos y vínculos.

URL

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

Medios

Archivos de medios como archivos Adobe Flash (solo SWF), archivos Adobe Shockwave, QuickTime o 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 la vista de código y 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 la Vista de código y 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 la vista de código y 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 forma predeterminada, los recursos de una categoría aparecen en orden alfabético por nombre, pero puede ordenarlos por tipo y varios otros criterios.También puede obtener una vista previa de los recursos y cambiar el tamaño de las columnas y el á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 recursos en Bibliotecas Creative Cloud, consulte Bibliotecas Creative Cloud en Dreamweaver.

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

Seleccione el activo en el panel Activos.

Visualización de los activos de una categoría

Haga clic en un icono de categoría en la parte izquierda del panel Assets.

Ordenación de activos

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 estén juntas, todas las imágenes JPEG estén juntas, y así sucesivamente), haga clic en el encabezado de columna Tipo.

Cambio del tamaño de una columna

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

Cambio del tamaño del área de vista previa

Arrastre la barra divisoria (entre el área de vista previa y la lista de recursos) hacia arriba o hacia abajo.

Actualización del panel Activos

Puede tardar unos segundos en crear la lista de sitio porque 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 agrega o quita un recurso fuera de Dreamweaver (usando el Explorador de Windows o el Finder, por ejemplo), debe reconstruir la caché del sitio para actualizar el panel Recursos.

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 reflejarán en el panel Activos hasta que actualice la lista Sitio.

  • Para actualizar la lista de sitio manualmente, haga clic en el botón Actualizar lista de sitio .Dreamweaver crea la caché del sitio o la actualiza según sea necesario.
  • Para actualizar la lista del sitio y reconstruir manualmente la caché del sitio, haga clic con el botón derecho (Windows) o mantenga pulsada la tecla Comando y haga clic (Macintosh) en la lista de Assets y, a continuación, 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. Puedes arrastrar los activos tanto desde la vista de lista como desde el panel de vista previa del panel Activos.

Nota: Arrastrar desde el panel de vista previa solo es compatible en Mac.

Puede insertar colores y URL en la vista de Diseño o en Vista en vivo. En la Vista de diseño, puedes aplicar colores y URL a los elementos seleccionados.

 

En el documento, coloca el punto de inserción donde quieras que aparezca el activo.

En el panel Assets, selecciona entre los botones de categoría de recursos de la izquierda.
Nota

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

Selecciona Sitio o Favoritos en la parte superior del panel, luego selecciona el activo.

No hay listas de Sitio o Favoritos para elementos de biblioteca; omite este paso si insertas un elemento de biblioteca.

Siga uno de estos procedimientos:
  • Arrastre el activo desde el panel hasta el documento. Puedes arrastrar tanto desde la vista de lista como desde el panel de vista previa.

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

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

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

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

Aplicar color al texto con el panel Assets

El panel Activos muestra los colores que ya has aplicado a varios elementos, como texto, bordes de tabla, fondos, etc.

En la Vista de diseño, realiza los siguientes pasos:

Seleccione el texto en el documento.

En el panel Activos, selecciona la categoría Colores.

Seleccionar el color deseado y hacer clic en Aplicar.

En la Vista en vivo, realiza los siguientes pasos:

En el panel Activos, selecciona la categoría Colores.

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 puedes pegar el valor del color (Ctrl+v, Cmd+v) en CSS Designer.
  • 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 sueltes el color, aparece el cuadro de diálogo Nueva regla CSS y cuando hagas clic en Aceptar, el color se aplica al elemento seleccionado.
  • En el panel Activos, haga clic en Aplicar. Aparece el cuadro de diálogo Nueva regla CSS y cuando hagas clic en Aceptar, el color se aplica al elemento seleccionado.

Asignar URL a imágenes o texto

En la Vista de diseño, realiza los siguientes pasos:

Selecciona el texto o la imagen.

En el panel Activos, selecciona la categoría URL en la vista Sitios o Favoritos, dependiendo de dónde esté almacenada la URL.

Nota

Las URL de los archivos de tu sitio se almacenan en la vista Sitios por defecto.La vista Favoritos contiene las URL que has añadido tú mismo.

Seleccione el URL.
Siga uno de estos procedimientos:
  • Arrastra la URL del panel a la selección en la Vista de diseño.

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

En la Vista en vivo, sigue estos pasos:

En el panel Assets, seleccione la categoría URL en la vista Sites o Favoritos, según dónde esté almacenada la URL.

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 sueltas la URL, <a> envuelve 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 envuelve con la etiqueta <a>.

Selección y edición de activos

El panel Assets te permite seleccionar varios recursos a la vez.Asimismo, constituye un método rápido para comenzar a editar activos.

Selección de varios activos

En el panel Activos, seleccione un activo.
Seleccione los otros activos de una de estas formas:
  • Mantén pulsada la tecla Mayús y haz clic para seleccionar una serie consecutiva de activos.

  • Pulsa Ctrl y haz clic (Windows) o Cmd y haz clic (Macintosh) para añadir un activo individual a la selección (esté o no adyacente a la selección existente). Pulsa Ctrl y haz clic o Cmd y haz clic en un activo seleccionado para deseleccionarlo.

Edición de un activo

Cuando editas un activo en el panel Activos, el comportamiento varía según el tipo de activo. Para algunos activos, como imágenes, usas un editor externo que se abre automáticamente si has definido un editor para ese tipo de activo. Solo puedes editar colores y URL en la lista Favoritos. Cuando editas plantillas y elementos de biblioteca, realizas los cambios dentro de Dreamweaver.

En el panel Activos, haz una de las siguientes acciones:
  • Haga doble clic en el activo.

  • Selecciona el activo y luego haz 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.

Realice los cambios.
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 Aceptar 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, presione la tecla Esc.

Reutilización de activos en otro sitio

El panel Activos muestra todos los activos (de tipos reconocidos) en tu sitio actual. Para usar un activo del sitio actual en otro sitio, debes copiarlo al otro sitio. Puedes copiar un activo individual, un conjunto de activos individuales o una carpeta completa de Favoritos a la vez.

Es posible que necesites localizar el archivo en el panel Archivos que corresponde a un activo en el panel Activos antes de transferir el activo hacia o desde tu sitio remoto.

Nota

El panel Archivos podría mostrar un sitio diferente del que muestra el panel Activos. Esto se debe a que el panel Assets está asociado con el documento activo.

Localizar un archivo de activo en el panel Archivos

En el panel Activos, selecciona la categoría del activo que quieres encontrar.
Haz clic con el botón derecho (Windows) o pulsa Ctrl y haz clic (Macintosh) en el nombre o icono del activo en el panel Activos, luego selecciona Localizar en sitio del menú contextual.
Nota

La función Localizar en sitio no está disponible para colores y URL que no corresponden a archivos del sitio.

Se abre el panel Archivos con el archivo del activo seleccionado. El comando Localizar en sitio localiza el archivo que corresponde al propio activo; no localiza archivos que usen ese activo.

Copiar activos del panel Activos a otro sitio

En el panel Activos, selecciona la categoría del activo que quieres copiar.
Haz clic con el botón derecho (Windows) o Control+clic (Macintosh) en uno o varios activos en la lista Sitio o la lista Favoritos, selecciona Copiar a sitio y selecciona el nombre del sitio de destino del submenú que enumera todos los sitios que has definido.
Nota

En la lista Favoritos, puedes copiar una carpeta de Favoritos así como activos individuales.

Los activos se copian a sus ubicaciones correspondientes en el sitio de destino. Dreamweaver crea nuevas carpetas en la jerarquía del sitio de destino según sea necesario. Los activos también se añaden a la lista de Favoritos del sitio de destino.

Nota

Si el activo que copiaste es un color o una URL, aparece solo en la lista de Favoritos del sitio de destino. Dado que los colores y las URL no corresponden a archivos, no hay archivo que copiar en el otro sitio.