Aprenda a insertar, editar, reemplazar y cambiar el tamaño de 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. El texto siguiente proporciona 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. Comprimiendo un archivo JPEG puede conseguirse 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.

Dreamweaver no es un editor WYSIWYG (lo que ve es lo que obtiene). Es decir, puede añadir o insertar imágenes mediante Dreamweaver, pero no puede mover o situar las imágenes mediante la interfaz.

Para mover sus imágenes en el diseño, debe utilizar CSS, que muestra el contenido HTML en la forma que desee. Puede dirigirse a los tutoriales básicos de HTML y CSS para aprender a trabajar con imágenes utilizando 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 recogen para los usuarios con discapacidad visual. Puede editar estos atributos en código HTML.

Para obtener información pertinente a la extracción de imágenes de sus composiciones de PSD, consulte Extraer imágenes de archivos PSD.

  1. 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 Documento; a continuación, salte al paso 3.
    • En Vista en vivo, arrastre una imagen desde el panel Extract o la ficha Capas. Suelte el elemento en la parte superior, inferior, derecha o izquierda de un elemento, usando las guías interactivas. Alternativamente, puede soltar el elemento en un lugar exacto de la estructura de documento, haciendo clic en </> y utilizando Vista rápida de elementos.
  2. Examine para seleccionar el origen de 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, quitando la selección de Comandos > Mostrar archivos externos.

  3. Haga clic en OK

Definición de 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.
  1. Para ver el inspector de propiedades de una imagen seleccionada, haga clic en la imagen y seleccione Ventana > Propiedades.

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

  3. 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 establece 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 escalarlas.

    Origen

    Especifica el archivo de origen para 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 el URL.

    Alt

    Especifica 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 de 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 de forma explícita.
    •  _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos.

    Editar

    Inicia el editor de imágenes que ha especificado 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.

    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 intensidad de una imagen.

    Nota:

    También puede editar 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.

  1. En la ventana Documento, haga clic en la imagen o seleccione la etiqueta de imagen en el código.

  2. 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 apropiados en la Vista de código.
    • En el inspector de propiedades, edite el valor Alt.


Cambiar de tamaño una imagen

Puede cambiar visualmente en Dreamweaver el tamaño de elementos, como imágenes, plug-in, archivos de Shockwave o SWF, applets y controles ActiveX.

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 provocar un retraso en la descarga de la página y que la imagen no se vea correctamente en el navegador del usuario.

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

Cómo redimensionar un elemento visualmente

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

    Aparecen 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 adecuada del selector de etiquetas para seleccionar el elemento.

  2. 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 la anchura y la altura del elemento, arrastre el controlador de selección de la esquina.
    • Para conservar las proporciones del elemento (su relación anchura/altura) 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
    Ajustar la anchura y la altura de un elemento mediante el inspector de propiedades
  3. 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
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.

  1. Cambie del tamaño de la imagen como se describe en la sección Cambiar el tamaño de una imagen.

  2. Haga clic en el botón Volver a muestrear del inspector de propiedades de imagen.

    Volver a muestrear una imagen en Dreamweaver
    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 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 instalado 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.

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

    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 el recorte para poner más énfasis en el tema de la imagen y eliminar aspectos 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 en el disco el archivo de imagen de origen. Se recomienda conservar una copia de seguridad del archivo de imagen, por si necesitara volver a la imagen original.

  1. 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 controladores de recorte alrededor de la imagen seleccionada.
    Recortar imágenes en Dreamweaver
    Recortar imágenes en Dreamweaver
  2. Ajuste los controladores de recorte de modo que el recuadro de límite rodee el área de la imagen de mapa de bits que desea mantener.
  3. Haga doble clic en el recuadro de límite o pulse Intro para recortar la selección.
  4. Un cuadro de diálogo le informa de que el archivo de imagen que está cortando cambiará en el disco. Haga clic en OK.

    Los píxeles del mapa de bits seleccionado que se encuentren fuera del cuadro delimitador se eliminarán, pero el resto de los objetos de la imagen permanecerán.

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

Optimización de una imagen

Puede optimizar imágenes de páginas web desde Dreamweaver.

  1. 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
    Editar la configuración de las imágenes mediante el inspector de propiedades
  2. Realice los cambios deseados en el cuadro de diálogo Optimización de imágenes y haga clic en OK.

    Optimizar la imagen en Dreamweaver
    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.

  1. Abra la página que contiene la imagen que desea 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.
  2. 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 mediante el cuadro de diálogo Perfilar, puede obtener una vista previa del cambio de la imagen.

    Perfilar imágenes en Dreamweaver
    Perfilar imágenes en Dreamweaver
  3. Haga clic en OK cuando esté satisfecho con la imagen.
  4. 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.

  1. Abra la página que contiene la imagen que desee ajustar, seleccione la imagen 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.
  2. 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 en Dreamweaver
    Ajustar el brillo y el contraste de las imágenes
  3. Haga clic en OK.

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 definir una imagen para responder a un evento diferente. Por ejemplo, un clic del ratón o el cambio de una imagen de sustitución.

  1. En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la imagen de sustitución.
  2. 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.
  3. 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
    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 pase 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 desea 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 deja de funcionar.

  4. Para obtener una vista previa de la imagen de sustitución, seleccione Archivo > Vista previa en tiempo real, o pulse F12.

  5. 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 serán visibles 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

  1. 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 especificado ningún editor de imágenes, Dreamweaver iniciará 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, a continuación, 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:

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y seleccione Tipos de archivo/editores en la lista Categoría del panel izquierdo.

  2. En la lista Extensiones, seleccione la extensión para la que desea configurar un editor externo.

    Definir un editor externo para tipos de archivo específicos
    Definir un editor externo para tipos de archivo específicos
  3. Haga clic en el botón Añadir (+) situado sobre la lista Editores.
  4. En el cuadro de diálogo Seleccionar editor externo, examine hasta encontrar la aplicación que desea iniciar como editor para este tipo de archivo.

  5. En el cuadro de diálogo Preferencias, haga clic en Convertir en principal si desea que este editor sea el editor primario de este tipo de archivo.

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

Adición de un nuevo tipo de archivo a la lista Extensiones

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y seleccione Tipos de archivo/editores en la lista Categoría del panel izquierdo.

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

  3. Seleccione la extensión del tipo de archivo para el que desea definir un editor.

  4. Para seleccionar un editor externo para el tipo de archivo, haga clic en el botón Añadir (+) situado encima de la lista Editores.

  5. En el cuadro de diálogo que aparece a continuación, elija la aplicación que quiera utilizar para editar este tipo de imagen.

  6. Haga clic en Convertir en principal si desea que este editor sea el editor principal para este tipo de imágenes.

Cambiar una preferencia de editor existente

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y seleccione Tipos de archivo/editores en la lista Categoría del panel izquierdo.

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

  3. 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 debe 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 en comportamientos, elementos PA o JavaScript). La carga previa de imágenes evita demoras por descarga al llegar el momento de que aparezcan 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.

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