En esta página
- Imágenes
- Inserción de una imagen
- Cómo redimensionar una imagen visualmente
- Inserción de un marcador de posición de imagen
- Sustitución de un marcador de posición de imagen
- Definición de propiedades de marcador de posición de imagen
- Edición de imágenes en Dreamweaver
- Creación de una imagen de sustitución
- Uso de un editor de imágenes externo
- Aplicación de comportamientos a imágenes
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
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.
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.
-
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 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).
- 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.
-
-
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.
-
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.
.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.
-
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.
Muestrea de nuevo una imagen cuyo tamaño se ha cambiado, lo que mejora su calidad en su nuevo tamaño y forma. 
Ajusta el brillo y el contraste de una imagen. 
Ajusta la intensidad de una imagen. Si ha insertado los atributos de accesibilidad de una imagen, puede editar dichos valores en código HTML.
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.
-
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.
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.
-
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.
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.
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.
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.
-
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.
En Dreamweaver, puede volver a muestrear imágenes, recortarlas, optimizarlas y perfilarlas. También puede ajustar el brillo y el contraste de éstas.
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.
-
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.
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.
-
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.
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.
-
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.
-
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.
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.
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.
-
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.
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.
-
- 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.
- 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.
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.