Este documento describe cómo insertar y modificar imágenes en documentos web. Explica cómo agregar imágenes normales, rollovers e imágenes inteligentes desde Photoshop y cómo cambiar sus propiedades y tamaños. También cubre cómo crear mapas de imágenes y optimizar imágenes dentro de Dreamweaver.

1. IMÁGENES
EDGAR ALEJANDRO LARA RITO.
EDGAR D. CHAVEZ DE LA TORRE.

2. IMÁGENES
• En este tema vamos a ver cómo insertar imágenes en un
documento. También veremos cómo crear algunas imágenes
especiales, como es el caso de los Rollovers y los botones
flash, que ayudan a mejorar la apariencia de nuestras páginas.
• Introducción
• Las imágenes son un aspecto muy importante de la web. Ya
sea como complementos a la información o parte del
diseño, la hacen mucho más atractiva a ojos del visitante. No
obstante, no conviene abusar, ya que aumentarán mucho el
tamaño final de la web.
• Existen una serie de formatos de imagen más recomendables
que otros para ser introducidos en una página web. Esta
información puedes consultarla aquí .

3. IMÁGENES
• Insertar una imagen
• Para insertar una imagen hay que dirigirse al menú Insertar, a la
opción Imagen. Después de esto, ya es posible seleccionar una
imagen a través de la nueva ventana. Cuando te acostumbres, te
será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.
• En Relativa a es posible especificar si la imagen será relativa al
documento o a la carpeta raíz del sitio. Es preferible que sea relativa
al Documento, ya que si cambiamos la página de carpeta, lo habitual
es cambiar también sus imágenes.
• Lo mismo ocurre cuando se selecciona un documento para crear un
vínculo.
• La ruta en la que se encuentra la imagen aparecerá representada de
una u otra forma en el campo URL de la ventana y en el campo
Origen del inspector de propiedades, dependiendo de si ha sido
insertada como relativa a la carpeta raíz del sitio o relativa al
documento.

5. IMÁGENES
• Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio)
se encuentran la carpeta imágenes y el documento en el que deseamos insertar
la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta
imágenes.
• En el caso de insertar la imagen como relativa al Documento la ruta sería:
• imágenes/aulaclic.jpg
• Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta
sería:
• /imágenes/aulaclic.jpg
• Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al
documento o a la carpeta raíz del sitio.
•
• Otra forma de insertar una imagen, es arrastrarla directamente desde el panel
Archivos sobre el documento.
•
• Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su
nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está
roto.
• En ese caso, la imagen que aparecerá en el navegador será similar a ésta:.

6. IMÁGENES
• . Propiedades de una imagen
• Cuando seleccionamos una imagen el Inspector de
propiedades muestra esta apariencia:

7. IMÁGENES
• Desde aquí podremos establecer distintos atributos a la imagen:
• Ancho y Alto son las dimensiones de la imagen. Dreamweaver las
pondrá directamente.
• Como pasaba con el texto, podemos crear un hiperenlace en la imagen
escribiendo la dirección en el campo Vínculo, y decidir en qué ventana
se abre con el campo Destino. Podemos hacer que cada zona de la
imagen tenga un vínculo distinto, creando un Mapa de imagen. Puedes
ver su uso en este avanzado. Y con lo aprendido, realizar el Ejercicio
paso a paso Crear mapas de imagen.
• En el campo Alt escribimos el texto que remplazará a la imagen si ésta
no puede mostrarse. Es un atributo muy importante que deberíamos
incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que
se escribe será leído por los programas lectores para invidentes. Si lo
que queremos es mostrar un ayuda contextual cuando el usuario tenga
el cursor sobre la imagen, debemos de empelar el atributo title. No
podemos insertarlo desde el panel, tenemos que hacerlo desde el
código fuente con el formato title="Texto a mostrar". Internet Explorer
muestra Alt como ayuda contextual cuando la imagen no lleva title, pero
el resto de navegadores no lo harán, respetando el estándar.

8. IMÁGENES
• En Clase podrás asignarle un estilo que hayas creado
anteriormente, así podrás darle alineación, bordes e incluso tamaño
con sólo un clic.
• Existen otros atributos que afectan al diseño de la imagen. Como ya
hemos explicado, la tendencia actual es utilizar CSS para todo lo
relativo a diseño, por lo que estos atributos están cayendo en
desuso y no deberían de ser empleados. No obstante, los
explicaremos para que entiendas su función:
• Puedes asignarle un grosor de borde desde el campo Borde. En
CSS, existe el atributo border.
• Puedes seleccionar su alineación con respecto al texto desde el
campo Alinear. En CSS, existe el atributo vertical- align.
• Por último las opciones Espacio V y Espacio H te serán útiles para
separar la imagen del texto y así no queden demasiado pegadas a él.
Estos campos indican el espacio vertical y horizontal
respectivamente entre la imagen y el texto. En CSS, podemos
hacerlo con el margin.

9. Además, encontramos algunos controles de Edición: El botón nos
permite optimizar la imagen desde Dreamweaver, cambiando el formato o
creando transparencias como puedes ver aquí . Por otro lado, el
icono nos permite editar la imagen con un programa externo, como
Photoshop o Paint. Puedes ver cómo cambiar el programa de edición
aquí .
Unidad 6. Imágenes (III)
6.4. Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de
las imágenes.
Por un lado, podemos cambiar el tamaño con el que se ve
una imagen, pero dicho cambio de tamaño no se aplica
directamente sobre el archivo de imagen, que conservará
el tamaño original.

10. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que
representa el icono de Dreamweaver y modificamos su tamaño de
varias formas diferentes:
Tamaño original C on tamaño modificado
El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el
que aplica realmente el ree scalado, pero en ocasiones puede resultar útil modificar el
tamaño de algunas imágenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamaño.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de
los recuadros negros que aparecen alrededor de la imagen.

11. La otra es a través de inspector de propiedades, cambiando los
campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté
seleccionada alguna imagen.
Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá
resaltado en negrita y aparecerá a la derecha una flecha circular que permite
volver al tamaño original haciendo clic sobre ella
Como hemos comentado, este cambio de tamaño se produce alterando los
atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo
que el usuario deberá descargarse el archivo completo con su tamaño original.
Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño
grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por
ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría
descargando el archivo completo, y no una miniatura real que ocuparía mucho
menos tamaño. Dreamweaver también nos permite cambiar el tamaño real del
archivo de imagen.

12. Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de
propiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos
fijamos en la pestaña Archivo.

13. En la sección escala, podemos establecer un
porcentaje del tamaño original.
El nuevo tamaño se mostrará en An (ancho)
y Al (alto). También podemos introducir
directamente el nuevo tamaño.
Incluso podemos recortar un área de la
imagen, seleccionando Exportar área, y
seleccionando el área de la imagen en la pre
visualización de la derecha (no se ve en la
imagen anterior).
Cuando lo tengamos, pulsamos Aceptar.
En este caso, si hemos alterado físicamente el
archivo.
El resultado es bastante bueno, aunque siempre
será mejor con herramientas
especializadas, como Photoshop o GIMP.

14. unidad 6. Imágenes (IV)
6.5. Imagen de sustitución. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa
sobre ella. Este tipo de imagen suele utilizarse en los menús o en los
botones para desplazarnos a través de distintas páginas.
Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes
Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo
que ocurre.

15. Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la
opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen
original y la de sustitución.

16. Unidad 6. Imágenes (V)
6.6. Objetos inteligentes
Los objetos inteligentes son imágenes que obtenemos directamente
desde un archivo de Photoshop (.psd).
Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el
archivo de Photoshop.
Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo
abriendo el archivo .psd, o pulsando el icono del Inspector de propiedades, que abrirá el
archivo fuente de Photoshop.
Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver
ha cambiado, mostrando ahora una flecha roja: . Esto indica que la imagen que
estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original
(psd) ya que se ha modificado. Podemos volverla a generar pulsando el icono