Adición y modificación de imágenes

Buscar

Imágenes

Existen muy diversos formatos de archivo gráfico, aunque para páginas Web generalmente se utilizan tres formatos de archivo gráfico: GIF, JPEG y PNG. GIF y JPEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayoría de los navegadores.

GIF (Formato de intercambio de gráficos, Graphic Interchange Format)

Los archivos GIF utilizan un máximo de 256 colores y son idóneos para visualizar imágenes con tonos no continuos o imágenes con 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, Joint Photographic Experts Group)

El formato de archivo JPEG es el mejor para imágenes fotográficas o de tonos continuos, ya que puede contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, también lo hace su tamaño y el tiempo que tarda en descargarse. A menudo es posible conseguir un equilibrio adecuado entre la calidad de la imagen y el tamaño de archivo comprimiendo el archivo JPEG.

PNG (Grupo de redes portátiles, Portable Network Group)

El formato de archivo PNG es un sustituto del formato GIF sin patente compatible con imágenes con color indexado, escala de grises y color verdadero, además de ser compatible con el canal alfa para transparencias. PNG es el formato de archivo nativo de Adobe® Fireworks®. Los archivos PNG conservan la información original de capa, vector, color y efectos (como por ejemplo las sombras), y todos los elementos pueden editarse siempre que se desee. Los archivos se deben guardar con la extensión .png para que Dreamweaver pueda reconocerlos como tales.

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 no lo está, Dreamweaver le preguntará si desea copiar el archivo en el sitio.

Asimismo, las imágenes se pueden insertar de forma dinámica. Las imágenes dinámicas son aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotación de rótulos publicitarios es necesario seleccionar de forma aleatoria un único rótulo de una lista de posibles rótulos y, después, mostrar dinámicamente la imagen del rótulo seleccionado cuando se solicite una página.

Tras insertar una imagen, puede definir atributos de accesibilidad de etiqueta de imagen que los lectores de pantalla pueden leer para usuarios ciegos. Estos atributos se pueden editar en el código HTML.

Para ver un tutorial sobre la inserción de imágenes, consulte Adición de imágenes.

  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 la categoría Común del panel Insertar, haga clic en el icono Imagen .
    • En la categoría Común del panel Insertar, haga clic en el menú Imágenes y seleccione el icono Imagen. Con el icono Imagen visible en el panel Insertar, puede arrastrar el icono a la ventana del documento (o a la ventana de visualización de código, si está trabajando en el 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, siga con el 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.
  2. En el cuadro de diálogo que aparece, siga uno de estos procedimientos:
    • Seleccione Sistema de archivos para elegir un archivo de imagen.
    • Seleccione Fuente de datos para elegir un origen de imagen dinámica.
    • Haga clic en el botón Sitios y servidores para elegir un archivo de imagen en una carpeta remota de uno de los sitios de Dreamweaver.
  3. Busque y seleccione 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, se puede utilizar una ruta absoluta a una imagen que se encuentra en un servidor remoto (es decir, una imagen que no está disponible en la unidad de disco duro local). No obstante, si tiene algún problema de rendimiento al trabajar, le sugerimos que desactive la visualización de la imagen en la vista Diseño anulando la selección de Comandos > Mostrar archivos externos.

  4. Haga clic en Aceptar. Aparece el cuadro Atributos de accesibilidad de la etiqueta de imagen si se ha activado el cuadro de diálogo en Preferencias (Edición > Preferencias).

  5. Introduzca los valores en los cuadros de texto Texto alternativo y Descripción larga y haga clic en Aceptar.
    • En el cuadro de diálogo Texto alternativo, escriba un nombre para la imagen o una breve descripción. El lector de pantalla lee la información introducida en dicho cuadro. Debe limitar la entrada a alrededor de 50 caracteres. Si desea introducir descripciones más largas, puede proporcionar un vínculo en el cuadro de texto Descripción larga, a un archivo que contenga más información sobre la imagen.
    • En el cuadro Descripción larga, escriba la ubicación de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vínculo a un archivo con el que está relacionado u ofrece más información acerca de la imagen.
    Nota:

    Puede completar uno o ambos cuadros de texto, en función de sus necesidades. El lector de pantalla lee el atributo Texto alternativo de la imagen.

    Nota:

    Si presiona Cancelar, la imagen aparece en el documento, pero Dreamweaver no le asocia etiquetas ni atributos de accesibilidad.

  6. En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la imagen.

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. Seleccione Ventana > Propiedades para ver el inspector de propiedades de una imagen seleccionada.

  2. En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver (como Intercambiar imagen) o cuando utilice un lenguaje de creación de scripts como JavaScript o VBScript.
  3. Defina cualquiera de las opciones de imagen.

    An (Ancho) y Al (Alto)

    El ancho y el alto 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 (Ancho) y Al (Alto) que no se corresponden con el ancho y el alto reales de la imagen, es posible que ésta no se muestre correctamente en el navegador. Para restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Ancho) y Al (Alto), o bien haga clic en el botón de restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto An y Al al introducir un valor nuevo.

    Nota:

    Puede cambiar estos valores para establecer la escala del tamaño de visualización de esta instancia de imagen, aunque no por ello se reducirá el tiempo de descarga, ya que el navegador descarga todos los datos de la imagen antes de asignarle una escala. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes.

    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 de señalización hasta un archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio o escriba el URL.

    Alt

    Especifica el texto alternativo que aparecerá en lugar de la imagen en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que sólo 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.

    • _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, por lo que normalmente no es preciso especificarlo.

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

    Actualizar desde original

    Cuando la imagen Web (es decir, la imagen que aparece en la página de Dreamweaver) no está sincronizada con el archivo de Photoshop original, Dreamweaver detecta que este se ha actualizado y muestra en color rojo una de las flechas del icono que corresponde al objeto inteligente. Basta con seleccionar la imagen Web en la vista Diseño y hacer clic en el botón Actualizar desde original del inspector de propiedades para que la imagen se actualice de forma automática y refleje los cambios realizados en el archivo de Photoshop original.

    Edición de la configuración de imagen

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

    Recorte

    Recorta el tamaño de una imagen, con lo que se eliminan las áreas 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.

Edición de los 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 de documento, seleccione la imagen.
  2. Siga uno de estos procedimientos:
    • Edite los atributos de imagen apropiados en la vista Código.
    • Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y, a continuación, seleccione Editar etiqueta.
    • En el inspector de propiedades, edite el valor de Alt (Alternativo).

Cómo redimensionar una imagen visualmente

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.

El cambio de tamaño visual de una imagen permite ver cómo afecta la imagen al diseño en diferentes dimensiones, pero el archivo de imagen no adopta una escala con las proporciones que se especifican. Si cambia el tamaño de una imagen visualmente en Dreamweaver sin utilizar una aplicación de edición de imágenes (como por ejemplo Adobe Fireworks) para escalar el archivo de imagen al tamaño deseado, el navegador del usuario escalará la imagen cuando se cargue la página. Esto puede hacer aumentar el tiempo de descarga de la página y puede provocar que la imagen no se vea correctamente en el navegador del usuario. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes.

Cuando cambie el tamaño de una imagen en Dreamweaver, 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.

Cómo redimensionar un elemento visualmente

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

    Aparecen manejadores de cambio de tamaño en los lados inferior y derecho del elemento y en la esquina inferior derecha. Si no aparecen, haga clic en cualquier punto fuera del elemento cuyo tamaño desea cambiar y vuelva a seleccionarlo o haga clic en la etiqueta correspondiente del selector de etiquetas para seleccionar el elemento.

  2. Cambie el tamaño del elemento siguiendo uno de estos procedimientos:
    • Para ajustar el ancho del elemento, arrastre el manejador de selección del lado derecho.
    • Para ajustar el alto del elemento, arrastre el manejador de selección de la parte inferior.
    • Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el manejador de selección de la esquina.
    • Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar sus dimensiones, arrastre el manejador de selección de la esquina mientras presiona la tecla Mayús.
    • Si desea ajustar el ancho y el alto de un elemento a un tamaño específico (por ejemplo, 1 por 1 píxel), utilice el inspector de propiedades para introducir un valor numérico. Puede cambiar visualmente el tamaño de los elementos hasta un mínimo de 8 por 8 píxeles.
  3. Para restaurar las dimensiones originales de un elemento, elimine los valores de los cuadros An (Ancho) y Al (Alto) o haga clic en el botón Restablecer tamaño en el inspector de propiedades de imagen.

Recuperación del tamaño original de una imagen

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

Cómo volver a muestrear una imagen cuyo tamaño se ha cambiado

  1. Cambie el tamaño de la imagen tal como se ha descrito anteriormente.
  2. Haga clic en el botón Volver a muestrear del inspector de propiedades de imagen.
    Nota:

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

Inserción de un marcador de posición de imagen

Un marcador de posición de imagen es un gráfico que se utiliza hasta que el gráfico definitivo está listo para su incorporación a la página Web. Puede establecer el tamaño y el color del marcado de posición y asignarle una etiqueta de texto.

  1. En la ventana de documento, coloque el punto de inserción en el lugar en el que desea insertar el gráfico del marcador de posición.

  2. Seleccione Insertar > Objetos de imagen > Marcador de posición de imagen.

  3. Para Nombre (Opcional), introduzca el texto que desea que aparezca como etiqueta del marcador de posición de imagen. Deje el cuadro de texto en blanco si no desea que aparezca ninguna etiqueta. El nombre debe comenzar con una letra e incluir exclusivamente letras y números; no se permite la introducción de espacios ni caracteres ASCII altos.
  4. Para Ancho y Altura (Obligatorios), introduzca un número para establecer el tamaño de la imagen en píxeles.
  5. Para Color (Opcional), siga uno de estos procedimientos para aplicar un color:
    • Utilice el selector de color para seleccionar un color.
    • Escriba el valor hexadecimal del color deseado (por ejemplo, #FF0000).
    • Escriba el nombre de un color apto para la Web, como, por ejemplo, red (rojo en inglés).
  6. Para Texto alternativo (Opcional), introduzca un texto que describa la imagen para los usuarios que utilicen un navegador de sólo texto.
    Nota:

    Se inserta automáticamente una etiqueta de imagen en el código HTML que contenga un atributo src vacío.

  7. Haga clic en Aceptar.

    El color, los atributos de tamaño y la etiqueta del marcador de posición se presentan del modo siguiente:

    Marcador de posición de imagen con atributos.

    Cuando se visualiza en un navegador, la etiqueta y el texto de tamaño no aparecen.

Sustitución de un marcador de posición de imagen

Un marcador de posición de imagen no muestra una imagen en un navegador. Antes de publicar el sitio, debe reemplazar todos los marcadores de posición de imágenes que haya añadido por archivos de imágenes aptos para la Web, como son los archivos GIF o JPEG.

Si dispone de Fireworks, puede crear un nuevo gráfico desde el marcador de posición de imagen de Dreamweaver. La nueva imagen se configura con el mismo tamaño que la imagen del marcador de posición. Puede editar la imagen y luego reemplazarla en Dreamweaver.

  1. En la ventana de documento, siga uno de estos procedimientos:
    • Haga doble clic en el marcador de posición de imagen.
    • Haga clic en el marcador de posición de imagen para seleccionarlo y, a continuación, en el inspector de propiedades (Ventana > Propiedades), haga clic en el icono de carpeta situado junto al campo Origen.
  2. En el cuadro de diálogo Origen de imagen, desplácese hasta la imagen con la que desea reemplazar el marcador de posición de imagen y haga clic en Aceptar.

Definición de propiedades de marcador de posición de imagen

Para configurar las propiedades de un marcador de posición de imagen, seleccione un marcador de posición de imagen en la ventana de documento y, a continuación, elija Ventana > Propiedades para mostrar el inspector de propiedades. Para ver todas las propiedades, haga clic en la flecha de ampliación, situada en la esquina inferior derecha.

Utilice el inspector de propiedades para establecer los valores de nombre, ancho, alto, origen de imagen, descripción de texto alternativo, alineación y color para la imagen del marcador de posición.

Inspector de propiedades de marcador de posición de imagen.

En el inspector de propiedades del marcador de posición, el cuadro de texto gris y el cuadro de texto Alinear están desactivados. Puede configurar estas propiedades en el inspector de propiedades de imagen cuando reemplace el marcador de posición por una imagen.

  1. Defina cualquiera de las opciones siguientes:

    An (Ancho) y Al (Alto)

    Especifican el ancho y el alto del marcador de posición de la imagen en píxeles.

    Origen

    Especifica el archivo de origen para la imagen. Este cuadro de texto está vacío en el caso de una imagen de marcador de posición. Haga clic en el botón Examinar para seleccionar una imagen que reemplace al gráfico del marcador de posición.

    Vínculo

    Especifica un hipervínculo para el marcador de posición de la imagen. Arrastre el icono de señalización hasta un archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio o escriba el URL.

    Alt

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

    Crear

    Inicia Fireworks para crear una imagen que reemplace al marcador de posición. El botón Crear estará desactivado a no ser que Fireworks también esté instalado en el equipo.

    Actualizar desde original

    Cuando la imagen Web (es decir, la imagen que aparece en la página de Dreamweaver) no está sincronizada con el archivo de Photoshop original, Dreamweaver detecta que este se ha actualizado y muestra en color rojo una de las flechas del icono que corresponde al objeto inteligente. Basta con seleccionar la imagen Web en la vista Diseño y hacer clic en el botón Actualizar desde original del inspector de propiedades para que la imagen se actualice de forma automática y refleje los cambios realizados en el archivo de Photoshop original.

    Color

    Especifica un color para el marcador de posición de la imagen.

Edición de imágenes en Dreamweaver

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

Funciones de edición de imágenes

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

Nota:

No es necesario tener instalado Fireworks 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 Modificar > Imagen. Establezca cualquiera de las siguientes funciones de edición de imágenes de Dreamweaver:

    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

    Permite editar imágenes mediante la reducción del área de la imagen. Normalmente, suele recortarse una imagen para poner más énfasis en el tema de la imagen y eliminar aspectos no deseados alrededor del centro de interés de la imagen.

    Brillo y contraste

    Modifica el contraste o el brillo de los píxeles de la imagen. Esto afecta a los resaltados, sombras y medios tonos de la imagen. 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 mediante el aumento del contraste de los bordes de dentro de la imagen. Cuando se explora una imagen o se realiza 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 que aparecen en la imagen. Esto evita que se pierdan detalles minúsculos en los píxeles de los que se componen las imágenes digitales. Sin embargo, para mostrar estos detalles en los archivos de imagen digital, a menudo es necesario perfilar la imagen, con lo que aumenta el contraste de los bordes y la imagen aparece 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.

Recorte de una imagen

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

Nota:

Cuando se recorta una imagen, se cambia el archivo de imagen de origen en el disco. Por esta razón, debe conservar una copia de seguridad del archivo de imagen en caso de que necesite volver a la imagen original.

  1. Abra la página que contiene la imagen que desea recortar, seleccione la imagen y siga uno de estos procedimientos:
    • Haga clic en el icono Herramienta Recorte del inspector de propiedades de imagen.
    • Seleccione Modificar > Imagen > Recorte.
    • Aparecerán manejadores de recorte alrededor de la imagen seleccionada.
  2. Ajuste los manejadores 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 presione 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 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.

  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 de recorte (y con ello volver al archivo de imagen original) hasta el momento en que salga de Dreamweaver, o puede editar el archivo en una aplicación de edición de imágenes externa.

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 desea optimizar, seleccione la imagen y siga uno de estos procedimientos:
    • Haga clic en el botón Editar la configuración de imagen en el inspector de propiedades de imagen.
    • Seleccione Modificar > Imagen > Optimizar.

  2. Realice los cambios deseados en el cuadro de diálogo Optimización de imágenes y haga clic en Aceptar.

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 Modificar > Imagen > Perfilar.
  2. Para especificar el grado de perfilado que Dreamweaver aplicará a la imagen, puede arrastrar el control deslizante o bien introducir un valor entre el 0 y el 10 en el cuadro de texto. Mientras ajusta la nitidez de la imagen mediante el cuadro de diálogo Nitidez, puede obtener una vista previa del cambio en la imagen.
  3. Haga clic en Aceptar 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:

    Sólo puede deshacer el efecto del comando de perfilado (y con ello 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 quedarán guardados de forma permanente.

Ajuste del brillo y el contraste de una imagen

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

  1. Abra la página que contiene la imagen que desea ajustar, seleccione la imagen y siga uno de estos procedimientos:
    • Haga clic en el botón Brillo/Contraste en el inspector de propiedades de imagen.
    • Seleccione Modificar > 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.
  3. Haga clic en Aceptar.

Creación de una imagen de sustitución

Se pueden insertar imágenes de sustitución en la página. Una imagen de sustitución es una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella.

Debe tener dos imágenes para crear una imagen de sustitución: la imagen principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver cambia el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera.

Las imágenes de sustitución están automáticamente configuradas para que respondan al evento onMouseOver. Puede definir una imagen para que responda a otro evento (por ejemplo, un clic del ratón) o cambiar 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 la categoría Común del panel Insertar, haga clic en el menú Imágenes y seleccione el icono Imagen de sustitución. Con el icono Imagen de sustitución visible en el panel Insertar, puede arrastrar el icono hasta la ventana de documento.
    • Seleccione Insertar > Objetos de imagen > Imagen de sustitución.
  3. Establezca las opciones y haga clic en Aceptar.

    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 sólo 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 establece un vínculo para la imagen, Dreamweaver insertará un vínculo nulo (#) en el código HTML relativo al comportamiento de sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de funcionar.

  4. Seleccione Archivo > Vista previa en el navegador o presione 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

Desde Dreamweaver puede abrir una imagen seleccionada en un editor de imágenes externo. Al regresar a Dreamweaver después de guardar el archivo de imagen editado, los cambios realizados serán visibles en la ventana de documento.

Puede configurar Fireworks como editor externo principal. También puede configurar los tipos de archivo que abre un editor; además, puede seleccionar varios editores de imagen. Por ejemplo, puede establecer preferencias para iniciar Fireworks cuando desee editar un archivo GIF e iniciar un editor de imágenes distinto cuando desee editar un archivo JPG o JPEG.

Inicio de un editor de imágenes externo

  1. Siga uno de estos procedimientos:
    • Haga doble clic en la imagen que desea editar.
    • Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la imagen que desea editar, elija Editar con > Examinar y seleccione un editor.
    • Seleccione la imagen que desea 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.
    Nota:

    Al abrir una imagen desde el panel Archivos, las funciones de integración de Fireworks no surten efecto y Fireworks no abre el archivo PNG original. Para utilizar las funciones de integración de Fireworks, abra las imágenes desde la ventana de documento.

    Si tras regresar a la ventana de Dreamweaver no ve una imagen actualizada, seleccione la imagen y, a continuación, haga clic en el botón Actualizar en el inspector de propiedades.

Configuración de un editor de imágenes externo para un tipo de archivo existente

Puede seleccionar el editor de imagen con el que desea abrir y editar los archivos gráficos.

  1. Abra la categoría Tipos de archivo/editores del cuadro de diálogo Preferencias siguiendo uno de estos procedimientos:
    • Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y seleccione Tipos de archivo/editores en la lista Categoría de la izquierda.
    • Seleccione Edición > Editar con Editor externo y seleccione Tipos de archivo/editores.
  2. En la lista Extensiones, seleccione la extensión de archivo para la que desea configurar un editor externo.
  3. Haga clic en el botón Añadir (+) situado encima de la lista Editores.

  4. En el cuadro de diálogo Seleccionar editor externo, desplácese hasta 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. Abra la categoría Tipos de archivo/editores del cuadro de diálogo Preferencias siguiendo uno de estos procedimientos:

    • Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y seleccione Tipos de archivo/editores en la lista Categoría de la izquierda.
    • Seleccione Edición > Editar con Editor externo y seleccione Tipos de archivo/editores.

  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. Escriba la extensión del tipo de archivo que desea iniciar con un editor determinado.
  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 desea 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.

Cambio de la preferencia de un editor existente

  1. Abra la categoría Tipos de archivo/editores del cuadro de diálogo Preferencias siguiendo uno de estos procedimientos:

    • Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y seleccione Tipos de archivo/editores en la lista Categoría de la izquierda.
    • Seleccione Edición > Editar con Editor externo y seleccione Tipos de archivo/editores.

  2. En la categoría Tipos de archivo/editores del cuadro de diálogo Preferencias, seleccione el tipo de archivo que desea cambiar en la lista Extensiones para ver los editores existentes.

  3. En la lista Editores, seleccione el editor deseado y luego siga uno de estos procedimientos:
    • Haga clic en los botones Añadir (+) o Eliminar (–) situados sobre la lista Editores para añadir o eliminar un editor.
    • Haga clic en el botón Convertir en principal para cambiar el editor que debe iniciarse de manera predeterminada.

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

Carga previa de imágenes

Carga en la memoria caché del navegador las imágenes que no aparecen en la página de inmediato (como aquellas que se intercambiarán por comportamientos, elementos PA o scripts de JavaScript). Esto contribuye a evitar las demoras debidas a la descarga cuando llega 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 imagen intercambiada

Restaura los archivos de origen del último conjunto de imágenes intercambiadas. Esta acción se añade automáticamente siempre que se adjunta la acción Intercambiar imagen a un objeto de forma predeterminada. No suele ser necesario seleccionarla manualmente.

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

Logotipo de Adobe

Inicia sesión en tu cuenta

Vínculos rápidos

Ver todos los planes Administrar los planes

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