Guía del usuario Cancelar

Insertar y editar imágenes en Dreamweaver

Buscar

Última actualización el 29 jun 2022

Aprenda a insertar, editar, reemplazar y cambiar de tamaño las imágenes en Dreamweaver.

Las imágenes forman parte integrante de un sitio web, proporcionando contexto adicional a los visitantes del sitio. Aunque existe una amplia variedad de formatos de archivos gráficos, los formatos GIF, JPEG y PNG son los habitualmente utilizados en páginas web. Los formatos de archivo GIF y JPEG son compatibles con las páginas web y pueden verse en la mayoría de los navegadores. En el texto siguiente se indica más información sobre estos formatos de archivo:

GIF (formato de intercambio de gráficos): los archivos GIF utilizan un máximo de 256 colores y son los mejores para visualizar imágenes de tonos discontinuos. Los archivos GIF son ideales para visualizar grandes áreas de color homogéneo, como barras de navegación, botones, iconos, logotipos u otras imágenes con colores y tonos uniformes.

JPEG (grupo conjunto de expertos fotográficos): el formato de archivo JPEG es el mejor para imágenes fotográficas o de tonos continuos, ya que los archivos JPEG pueden contener millones de colores. A medida que aumenta la calidad de un archivo JPEG, también lo hace su tamaño y su tiempo de descarga. Al comprimir un archivo JPEG se puede conseguir un equilibrio adecuado entre la calidad de la imagen y el tamaño de archivo.

PNG (grupo de red portable): el formato de archivo PNG es un sustituto sin patente del GIF, que admite imágenes con color indexado, escala de grises y color verdadero, así como compatibilidad con las transparencias, mediante canal alfa. Los archivos PNG conservan la información de capa, vector, color y efectos, como las sombras paralelas. Además, todos los elementos son siempre completamente editables. Los archivos deben tener la extensión de nombre de archivo .png para que Dreamweaver pueda reconocerlos como archivos PNG.

Nota:

Dreamweaver no es un editor WYSIWYG (lo que ve es lo que obtiene). Es decir, puede añadir o insertar imágenes con Dreamweaver, pero no puede mover o colocar las imágenes a través de la interfaz.

Para mover las imágenes en el diseño, debe utilizar un CSS que muestre el contenido HTML en la forma que desee. Puede consultar los tutoriales básicos sobre HTML y CSS para saber cómo trabajar con imágenes mediante código. También puede ver el tutorial sobre cómo trabajar con imágenes en Dreamweaver.

Para saber cómo insertar y usar imágenes mediante la aplicación Dreamweaver, consulte las siguientes secciones.

Inserción de una imagen

Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si la imagen no está en el sitio actual, Dreamweaver le preguntará si desea copiar el archivo en el sitio.

Dreamweaver también le permite insertar imágenes de forma dinámica. Las imágenes dinámicas son aquellas que cambian con frecuencia. Por ejemplo, los sistemas de rotación de rótulos publicitarios que seleccionan aleatoriamente un único rótulo de una lista de posibles rótulos. El sistema muestra dinámicamente la imagen del rótulo seleccionado cuando se solicita una página.

También puede arrastrar y soltar cualquier capa del panel Extract en cualquier lugar de la Vista en vivo de Dreamweaver mediante Guías interactivas y Vista rápida de elementos. El panel Extract le permite cargar archivos PSD y después arrastrar y soltar cualquier capa del archivo PSD directamente en su documento de Dreamweaver.

Tras insertar una imagen, puede definir los atributos de etiquetas y accesibilidad de imágenes que los lectores de pantalla extraen para los usuarios con discapacidad visual. Puede editar estos atributos en código HTML.

Para obtener información sobre cómo extraer imágenes de composiciones de PSD, consulte Extraer imágenes de archivos PSD.

Coloque el punto de inserción en el lugar de la ventana de documento en el que desea que aparezca la imagen y, a continuación, siga uno de estos procedimientos:
- En el panel Insertar, seleccione HTML en la lista desplegable. Haga clic en Imagen. Haga doble clic o arrastre el icono a la ventana del documento (o a la ventana de Vista de código si está trabajando con código).
- Seleccione Insertar > Imagen.
- Arrastre una imagen desde el panel Activos (Ventana > Activos) hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.
- Arrastre una imagen desde el panel Archivos hasta la posición deseada de la ventana de documento. A continuación, salte al paso 3.
- Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.
- En Vista en vivo, arrastre una imagen desde el panel Extract o la pestaña Capas. Suelte el elemento en la parte superior, inferior, derecha o izquierda de un elemento usando las guías interactivas. También tiene la opción de soltar el elemento en un lugar exacto de la estructura del documento, haciendo clic en </> y a través de Vista rápida de elementos.
Busque y seleccione el origen de la imagen o contenido que desee insertar.

Si está trabajando en un documento que no está guardado, Dreamweaver genera una referencia con la estructura file:// para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al documento.

Nota:

Al insertar imágenes, puede utilizar una ruta absoluta a una imagen que se encuentre en un servidor remoto. Es decir, una imagen que no esté disponible en el disco duro local. No obstante, si tiene algún problema de rendimiento al trabajar, puede desactivar la visualización de la imagen en la Vista de diseño si deja sin seleccionar la opción Comandos > Mostrar archivos externos.
Haga clic en Aceptar.

Ajustar propiedades de imagen

El inspector de propiedades de imagen permite establecer las propiedades de una imagen. Si no ve todas las propiedades de imagen, haga clic en la flecha de ampliación situada en la esquina inferior derecha.

Propiedades de imagen en el inspector de propiedades.

Para ver el inspector de propiedades de una imagen seleccionada, haga clic en la imagen y seleccione Ventana > Propiedades.
En el cuadro de texto de debajo de la imagen en miniatura, introduzca un nombre. Puede usar este nombre para hacer referencia a la imagen al utilizar un comportamiento de Dreamweaver (como Intercambiar imagen) o al utilizar un lenguaje de creación de scripts como JavaScript o VBScript.
Defina cualquiera de las opciones de imagen.

An (Anchura) y Al (Altura)

La anchura y la altura de la imagen en píxeles. Dreamweaver actualiza automáticamente estos cuadros de texto con las dimensiones originales de la imagen al insertar una imagen en una página.

Si ajusta valores de An (Anchura) y Al (Altura) que no se corresponden con la anchura y la altura reales de la imagen, es posible que esta no se muestre correctamente en los navegadores. Para restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Anchura) y Al (Altura), o bien haga clic en el botón Restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto An y Al.

Nota:

Puede cambiar estos valores para establecer la escala del tamaño de la visualización de esta instancia de imagen. Sin embargo, el cambio no reduce el tiempo de descarga, ya que el navegador descarga todos los datos de la imagen antes de escalar la imagen. Para reducir el tiempo de descarga y asegurarse de que todas las instancias de una imagen aparezcan con el mismo tamaño, utilice una aplicación de edición de imágenes para modificar sus dimensiones.

Origen

Especifica el archivo de origen de la imagen. Haga clic en el icono de carpeta para localizar el archivo de origen o escriba la ruta correspondiente.

Vínculo

Especifica un hipervínculo para la imagen. Arrastre el icono Señalar archivo hasta un archivo del panel Archivos. Haga clic en el icono de carpeta para buscar un documento del sitio o escriba manualmente la URL.

Alt

Indica el texto alternativo que aparecerá en lugar de la imagen en los navegadores que solo admiten texto o en aquellos configurados para descargar las imágenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que solo admiten texto, el texto se reproduce en voz alta. En algunos navegadores, este texto también aparece al situar el puntero sobre la imagen.

Mapa y Herramientas de zona interactiva

Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.
Destino Especifica el marco o la ventana donde se cargará la página vinculada. Esta opción no está disponible cuando la imagen no está vinculada a otro archivo. En la lista Destino figuran los nombres de todos los marcos del conjunto de marcos actual. También puede seleccionar estos nombres de destino reservados:
- _blank carga el archivo vinculado en una ventana del navegador nueva y sin nombre.
- _new carga el archivo vinculado en una nueva ventana del navegador.
- _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador.
- _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el predeterminado. No necesita especificar este valor tal cual.
- _top carga el archivo vinculado en la ventana completa del navegador, lo que hace que se quiten todos los marcos.
Editar

Ejecuta el editor de imágenes que haya indicado en las preferencias de editores externos y abre la imagen seleccionada.

Editar configuración de imagen

Abre el cuadro de diálogo Optimización de imágenes y le permite optimizar la imagen.

Nota:

El flujo de trabajo de optimización de imágenes ya no está disponible en Dreamweaver 21.0 y versiones posteriores.

Actualizar desde el original

Cuando la imagen que aparece en la página de Dreamweaver está sin sincronizar con el archivo original de Photoshop, Dreamweaver detecta que el archivo original se ha actualizado. La aplicación muestra en color rojo una de las flechas del icono de objeto inteligente. Al seleccionar la imagen web en Vista de diseño y hacer clic en el botón Actualizar desde el original en el inspector de propiedades, la imagen se actualiza automáticamente. La imagen actualizada refleja los cambios que ha realizado en el archivo original de Photoshop.

Recorte

Recorta el tamaño de una imagen y elimina las zonas no deseadas de la imagen seleccionada.

Volver a muestrear

Muestrea de nuevo una imagen cuyo tamaño se ha cambiado, lo que mejora su calidad en su nuevo tamaño y forma.

Brillo y contraste

Ajusta el brillo y el contraste de una imagen.

Perfilar

Ajusta la nitidez de una imagen.

Nota:

También puede modificar los atributos de una imagen en la Vista en vivo mediante el Inspector de propiedades de visualización rápida.

Editar atributos de accesibilidad de una imagen en el código

Si ha insertado los atributos de accesibilidad de una imagen, puede editar dichos valores en código HTML.

En la ventana Documento, haga clic en la imagen o seleccione la etiqueta de imagen en el código.
Siga uno de los siguientes procedimientos para introducir el nombre o una breve descripción de la imagen con menos de 50 caracteres en el cuadro Texto alternativo. El lector de pantalla lee la información introducida en dicho cuadro.
- Edite los atributos de imagen correspondientes en la Vista de código.
- Edite los atributos de la imagen en la Vista en vivo mediante el Inspector de propiedades de visualización rápida.
- En el inspector de propiedades, modifique el valor Alt.

Cambiar de tamaño una imagen

Se puede cambiar visualmente el tamaño de elementos, como por ejemplo las imágenes, los plug-ins, los archivos de Shockwave o SWF, los applets y los controles ActiveX en Dreamweaver.

Cambiar de tamaño visualmente una imagen le permite ver cómo afecta la imagen al diseño en diferentes dimensiones, pero no cambia la escala del archivo de imagen a las proporciones que especifique. Si cambia el tamaño de una imagen visualmente en Dreamweaver sin utilizar una aplicación de edición de imágenes, el navegador del usuario escalará la imagen cuando se cargue la página. Esto puede hacer que la descarga de la página tarde más y que la imagen no se vea correctamente en el navegador del usuario.

Si desea reducir el tiempo de descarga y garantizar que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes para cambiarles la escala. Lea el siguiente procedimiento para saber cómo redimensionar un elemento visualmente.

Cómo redimensionar un elemento visualmente

Seleccione el elemento (por ejemplo, una imagen o un archivo SWF) en la ventana de documento.

Aparecerán unos controladores de cambio de tamaño en los lados inferior y derecho del elemento y en la esquina inferior derecha. Si no aparecen los controles de cambio de tamaño, haga clic fuera del elemento y, a continuación, vuelva a seleccionarlo. Como alternativa, puede hacer clic en la etiqueta correspondiente del selector de etiquetas para seleccionar el elemento.
Cambie el tamaño del elemento siguiendo uno de estos procedimientos:
- Para ajustar la anchura del elemento, arrastre el controlador de selección del lado derecho.
- Para ajustar la altura del elemento, arrastre el controlador de selección de la parte inferior.
- Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el controlador de selección de la esquina.
- Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar sus dimensiones, arrastre el controlador de selección de la esquina mientras pulsa la tecla Mayús.
- Si desea ajustar la anchura y la altura de un elemento a un tamaño específico (por ejemplo, 1 por 1 píxel), utilice el inspector de propiedades. Introduzca un valor numérico en los campos An y Al. Puede cambiar visualmente el tamaño de los elementos hasta un mínimo de 8 por 8 píxeles.
Ajustar la anchura y la altura de un elemento mediante el inspector de propiedades
Para devolver un elemento con el tamaño cambiado a sus dimensiones originales, elimine los valores en los campos de anchura y altura en el inspector de propiedades. También puede hacer clic en el botón Restablecer tamaño del inspector de propiedades de imagen.

Devolver una imagen a su tamaño original

Haga clic en el botón Restablecer tamaño del inspector de propiedades de imagen.

Revertir una imagen a su tamaño original

Volver a muestrear una imagen con tamaño cambiado

Cuando cambie el tamaño de una imagen en Dreamweaver, también puede volver a muestrearla para adaptarla a sus nuevas dimensiones. El nuevo muestreo añade o quita píxeles de archivos de imagen JPEG y GIF cuyo tamaño se ha cambiado a fin de que se parezcan lo máximo posible a la imagen original. Al muestrear de nuevo una imagen, se reduce el tamaño del archivo y mejora el rendimiento de la descarga.

Cambie el tamaño de la imagen tal y como se describe en la sección Cambiar de tamaño una imagen.
Haga clic en el botón Volver a muestrear del inspector de propiedades de imagen.

Volver a muestrear una imagen en Dreamweaver

Nota:

No es posible volver a muestrear elementos o marcadores de posición de imagen que no sean imágenes de mapa de bits.

Edición de imágenes en Dreamweaver

Dreamweaver proporciona funciones básicas de edición de imágenes que permiten modificar las imágenes sin tener que iniciar una aplicación externa de edición de imágenes como Photoshop. Las herramientas de edición de imágenes de Dreamweaver están diseñadas para que pueda trabajar con diseñadores de contenido que crean archivos de imágenes que se pueden utilizar en el sitio web.

En Dreamweaver, puede volver a muestrear imágenes, recortarlas, optimizarlas y perfilarlas. También puede ajustar el brillo y el contraste de las imágenes.

Nota:

No es necesario tener instalada Photoshop u otra aplicación de edición de imágenes en el equipo para poder utilizar las funciones de edición de imágenes de Dreamweaver.

Seleccione Editar > Imagen. Puede definir las siguientes funciones de edición de imágenes de Dreamweaver:

Optimizar

Seleccione un ajuste preestablecido, especifique un formato de archivo y especifique un nivel de calidad. Al mover el regulador a través de los niveles de calidad, puede ver el tamaño de archivo de la imagen en el cuadro de diálogo. A continuación, haga clic en Aceptar.

Volver a muestrear

Añade o quita píxeles en archivos de imagen JPEG y GIF cuyo tamaño se ha cambiado a fin de que se parezcan lo máximo posible a la imagen original. Al muestrear de nuevo una imagen, se reduce el tamaño del archivo y mejora el rendimiento de la descarga.

Cuando cambie el tamaño de una imagen en Dreamweaver, puede volver a muestrearla para adaptarla a sus nuevas dimensiones. Al muestrear de nuevo un objeto de mapa de bits, se añaden o quitan píxeles en la imagen para hacerla mayor o menor. Si se muestrea una imagen con una resolución más alta, la pérdida de calidad suele ser poco importante. Sin embargo, si se muestrea con una resolución más baja, siempre se pierden datos y se reduce la calidad.

Recorte

Editar imágenes reduciendo su área. Puede usar la opción de recorte para poner más énfasis en el tema de la imagen y eliminar elementos no deseados que haya alrededor del centro de interés.

Brillo y contraste

Modifica el contraste o el brillo de los píxeles de una imagen. Brillo y contraste afecta a los resaltados, las sombras y los tonos medios de las imágenes. Normalmente, la función Brillo/Contraste se utiliza para corregir imágenes que son demasiado oscuras o demasiado claras.

Perfilar

Ajusta el enfoque de una imagen aumentando el contraste de los bordes que haya en la imagen. Cuando se explora una imagen o se toma una foto digital, la acción predeterminada de la mayoría del software de captura de imágenes consiste en suavizar los bordes de los objetos de la imagen. La digitalización evita que se pierdan detalles minúsculos en los píxeles de que se componen las imágenes digitales. Sin embargo, para mostrar los detalles de los archivos de imágenes digitales, a menudo es necesario perfilar la imagen. Mediante la opción Perfilar se aumenta el contraste de los bordes, haciendo que la imagen aparezca más definida.

Nota:

las funciones de edición de imágenes de Dreamweaver solo se aplican a los formatos de archivo de imagen JPEG, GIF y PNG. Los demás formatos de archivo de imagen de mapa de bits no pueden editarse mediante estas funciones.

Recortar una imagen

Dreamweaver permite recortar o ajustar imágenes de archivos de mapa de bits.

Nota:

Al recortar una imagen, se cambia el archivo de imagen original del disco. Se recomienda conservar una copia de seguridad del archivo de imagen por si necesitara recuperar la imagen original.

Abra la página que contiene la imagen que desea recortar, seleccione la imagen y realice una de las siguientes acciones:
- Haga clic en el icono Herramienta Recortar del inspector de propiedades de imagen.
- Seleccione Editar > Imagen > Recortar.
- Aparecerán unos controladores de recorte alrededor de la imagen seleccionada.
Recortar imágenes en Dreamweaver
Ajuste los controladores de recorte de modo que el recuadro de límite rodee el área de la imagen de mapa de bits que desee mantener.
Haga doble clic en el recuadro de límite o pulse Intro para recortar la selección.
En un cuadro de diálogo se le informará de que el archivo de imagen que está recortando cambiará en el disco. Haga clic en Aceptar.

Los píxeles del mapa de bits seleccionado que se encuentren fuera del recuadro de límite se eliminarán, pero el resto de los objetos de la imagen permanecerán.
Muestre una vista previa de la imagen para comprobar que la imagen ha quedado como esperaba. Si no es así, seleccione Edición > Deshacer Recortar para volver a la imagen original.

Nota:

Puede deshacer el efecto del comando Recortar y volver al archivo de imagen original hasta salir de Dreamweaver, o bien editar el archivo con una aplicación externa de edición de imágenes.

Optimizar una imagen

Puede optimizar imágenes de páginas web a través de Dreamweaver.

Abra la página que contiene la imagen que desee optimizar. Seleccione la imagen deseada y, a continuación, realice una de las siguientes acciones:
- Haga clic en el botón Editar configuración de imagen en el inspector de propiedades de imagen.
- Seleccione Editar > Imagen > Optimizar.
Editar la configuración de las imágenes mediante el inspector de propiedades
Realice los cambios deseados en el cuadro de diálogo Optimización de imágenes y haga clic en Aceptar.

Optimizar la imagen en Dreamweaver

Cómo perfilar una imagen

El perfilado aumenta el contraste de los píxeles situados alrededor de los bordes de los objetos para aumentar la definición o nitidez de la imagen.

Abra la página que contiene la imagen que desee perfilar, seleccione la imagen y siga uno de estos procedimientos:
- Haga clic en el botón Perfilar del inspector de propiedades de imagen.
- Seleccione Editar > Imagen > Perfilar.
Para especificar el grado de perfilado que Dreamweaver aplicará a la imagen, arrastre el regulador de control. También puede introducir un valor entre 0 y 10 en el cuadro de texto. Mientras ajusta la nitidez de la imagen en el cuadro de diálogo Perfilar, puede ver una vista previa del cambio de la imagen.

Perfilar imágenes en Dreamweaver
Haga clic en Aceptar cuando esté satisfecho con la imagen.
Guarde los cambios; para ello, seleccione Archivo > Guardar, o recupere la imagen original seleccionando Edición > Deshacer perfilar.

Nota:

Solo puede deshacer el efecto del comando Perfilar y volver al archivo de imagen original antes de guardar la página que contiene la imagen. Una vez que haya guardado la página, los cambios realizados en la imagen serán permanentes.

Ajustar el brillo y el contraste de una imagen

La opción Brillo y contraste modifica el contraste o el brillo de los píxeles de la imagen. Esta opción afecta a los resaltados, sombras y tonos medios de la imagen. Normalmente, la función Brillo y contraste se utiliza para corregir imágenes que sean demasiado oscuras o demasiado claras.

Abra la página con la imagen que desee ajustar, selecciónela y siga uno de estos procedimientos:
- Haga clic en el botón Brillo y contraste del inspector de propiedades de imagen.
- Seleccione Editar > Imagen > Brillo/Contraste.
Arrastre los controles deslizantes de Brillo y Contraste para ajustar los valores. Los valores pueden estar comprendidos entre -100 y 100.

Ajustar el brillo y el contraste de las imágenes
Haga clic en Aceptar.

Creación de una imagen de sustitución

Una sustitución es una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella. Debe disponer de dos imágenes para crear la sustitución. Una imagen principal (la que aparece al cargarse inicialmente la página) y una imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Las dos imágenes de una sustitución deben ser del mismo tamaño. Si las imágenes no son del mismo tamaño, Dreamweaver cambia el tamaño de la segunda imagen para que concuerde con las propiedades de la primera.

Las imágenes de sustitución están automáticamente configuradas para responder al evento onMouseOver. Puede hacer que una imagen responda a un evento diferente. Por ejemplo, un clic del ratón o el cambio de una imagen de sustitución.

En la ventana de documento, sitúe el punto de inserción en el lugar donde desee que aparezca la imagen de sustitución.
Introduzca la imagen de sustitución mediante uno de estos métodos:
- En el panel Insertar, seleccione HTML en la lista desplegable. Seleccione Imagen de sustitución en la lista de opciones.
- Seleccione Insertar > HTML > Imagen de sustitución.
En el cuadro de diálogo Insertar imagen de sustitución, seleccione las imágenes y defina las propiedades de la sustitución. Puede configurar las siguientes propiedades:

Configuración de las propiedades de una imagen de sustitución

Nombre de la imagen

El nombre de la imagen de sustitución.

Imagen original

La imagen que desea que aparezca al cargarse la página. Introduzca la ruta en el cuadro de texto o haga clic en Examinar y seleccione la imagen.

Imagen de sustitución

La imagen que desea que aparezca cuando el puntero pase por encima de la imagen original. Introduzca la ruta o haga clic en Examinar para seleccionar la imagen.

Precargar imagen de sustitución

Realiza una carga previa de imágenes en la caché del navegador para que la imagen no tarde en aparecer cuando el usuario pasa el puntero sobre la imagen.

Texto alternativo

(Opcional) Texto que describa la imagen para los usuarios que utilicen un navegador de solo texto.

Al hacerse clic, ir a URL

El archivo que desee que se abra cuando un usuario haga clic en la imagen de sustitución. Introduzca la ruta o haga clic en Examinar y seleccione el archivo.

Nota:

Si no define un vínculo para la imagen, Dreamweaver insertará un vínculo nulo (#) en el código fuente HTML al que va unido el comportamiento de la sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de funcionar.
Para obtener una vista previa de la imagen de sustitución, seleccione Archivo > Vista previa en tiempo real o pulse F12.
En el navegador, desplace el puntero sobre la imagen original para ver la imagen de sustitución.

Nota:

No se puede ver el efecto que causa una imagen de sustitución en la vista de diseño.

Uso de un editor de imágenes externo

Mientras esté en Dreamweaver, puede abrir una imagen seleccionada en un editor externo de imágenes. Al regresar a Dreamweaver después de guardar el archivo de imagen editado, los cambios realizados en la imagen se podrán ver en la ventana Documento.

Puede configurar un editor primario externo y también definir los tipos de archivo que abre un editor. Puede seleccionar varios editores de imagen. Por ejemplo, puede establecer las preferencias para iniciar Photoshop cuando quiera editar un archivo JPEG e iniciar un editor de imágenes distinto cuando desee editar un GIF animado.

Iniciar el editor externo de imágenes

Para abrir un editor externo, realice una de las siguientes acciones:
- Haga doble clic en la imagen que quiera editar.
- Haga clic con el botón derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en la imagen que quiera editar. A continuación, haga clic en Editar con > Examinar y seleccione un editor.
- Seleccione la imagen que quiera editar y haga clic en Editar en el inspector de propiedades.
- Haga doble clic en el archivo de imagen en el panel Archivos para iniciar el editor de imágenes principal. Si no ha indicado ningún editor de imágenes, Dreamweaver abrirá el editor predeterminado para el tipo de archivo en cuestión.
Si tras regresar a la ventana de Dreamweaver no aparece una imagen actualizada, seleccione la imagen y después haga clic en el botón Actualizar del inspector de propiedades.

Configurar un editor externo de imágenes para un tipo de archivo existente

Puede seleccionar el editor de imagen con el que desea abrir y editar los archivos gráficos. Para seleccionar un editor externo de imágenes, siga los pasos siguientes:

Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y luego Tipos de archivo/editores en la lista Categoría del panel izquierdo.
En la lista Extensiones, seleccione la extensión para la que desee establecer un editor externo.

Definir un editor externo para tipos de archivo específicos
Haga clic en el botón Añadir (+) situado sobre la lista Editores.
En el cuadro de diálogo Seleccionar editor externo, busque hasta encontrar la aplicación que desea iniciar como editor para este tipo de archivo.
En el cuadro de diálogo Preferencias, haga clic en Convertir en principal si desea que este editor sea el editor principal de este tipo de archivo.
Si desea configurar un editor adicional para este tipo de archivo, repita los pasos 3 y 4.

Dreamweaver utilizará automáticamente el editor principal cuando decida editar una imagen de este tipo. Puede elegir otros editores que figuren en el menú contextual de la imagen en la ventana de documento.

Añadir un nuevo tipo de archivo a la lista Extensiones

Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y luego Tipos de archivo/editores en la lista Categoría del panel izquierdo.
En la categoría Tipos de archivo/editores del cuadro de diálogo Preferencias, haga clic en el botón Añadir (+) situado encima de la lista Extensiones.

Aparecerá un cuadro de texto en la lista Extensiones.
Seleccione la extensión del tipo de archivo para el que desee establecer un editor.
Para seleccionar un editor externo para el tipo de archivo, haga clic en el botón Añadir (+) situado encima de la lista Editores.
En el cuadro de diálogo que aparece a continuación, elija la aplicación que quiera utilizar para editar este tipo de imagen.
Haga clic en Convertir en principal si desea que este editor sea el editor principal para este tipo de imagen.

Cambiar la preferencia de un editor existente

Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y luego Tipos de archivo/editores en la lista Categoría del panel izquierdo.
En el cuadro de diálogo de preferencias Tipos de archivo/editores, seleccione el tipo de archivo que va a cambiar en la lista Extensiones para ver los editores existentes.
En la lista Editores, seleccione el editor deseado y luego realice una de las siguientes acciones:
- Para añadir o quitar un editor, haga clic en los botones Añadir (+) o Eliminar (–) situados sobre la lista Editores.
- Para cambiar el editor que deba iniciarse de manera predeterminada para la edición, haga clic en el botón Convertir en principal.

Aplicar comportamientos a imágenes

Puede aplicar cualquier comportamiento disponible a una imagen o zona interactiva de imagen. Al aplicar un comportamiento a una zona interactiva, Dreamweaver inserta el código HTML en la etiqueta area. Hay tres comportamientos que se aplican específicamente a las imágenes: Carga previa de imágenes, Intercambiar imagen y Restaurar imagen intercambiada.

Cargar previamente imágenes

Carga en la memoria caché del navegador las imágenes que no aparecen inmediatamente en la página (como las que se intercambian con comportamientos, elementos PA o JavaScript). La carga previa de imágenes evita demoras por descarga al llegar el momento en que aparecen las imágenes.

Intercambiar imagen

Intercambia una imagen por otra cambiando el atributo src de la etiqueta img. Use esta acción para crear sustituciones de botones y otros efectos de imágenes (incluido el intercambio de varias imágenes a la vez).

Restaurar imágenes intercambiadas

Restaura el último conjunto de imágenes intercambiadas a sus archivos de origen anteriores Esta acción se añade automáticamente siempre que se adjunta la acción Intercambiar imagen a un objeto de forma predeterminada. En este caso, no es necesario seleccionar manualmente la opción Intercambiar.

También puede usar comportamientos para crear sistemas de navegación más sofisticados, como los menús de salto.

Temas similares

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

¿Nuevo usuario?

Insertar y editar imágenes en Dreamweaver

Inserción de una imagen

Ajustar propiedades de imagen

Editar atributos de accesibilidad de una imagen en el código

Cambiar de tamaño una imagen

Cómo redimensionar un elemento visualmente

Devolver una imagen a su tamaño original

Volver a muestrear una imagen con tamaño cambiado

Edición de imágenes en Dreamweaver

Recortar una imagen

Optimizar una imagen

Cómo perfilar una imagen

Ajustar el brillo y el contraste de una imagen

Creación de una imagen de sustitución

Uso de un editor de imágenes externo

Iniciar el editor externo de imágenes

Configurar un editor externo de imágenes para un tipo de archivo existente

Añadir un nuevo tipo de archivo a la lista Extensiones

Cambiar la preferencia de un editor existente

Aplicar comportamientos a imágenes

Temas similares

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

Pregunte a la comunidad

Contacto