Este documento proporciona instrucciones sobre cómo insertar y modificar imágenes en Dreamweaver. Explica cómo insertar imágenes, ajustar sus propiedades como el tamaño y vínculos, y crear efectos como rollovers. También cubre cómo insertar objetos inteligentes desde Photoshop para permitir la edición y actualización fácil de imágenes.

1. imágene
s

2. Unidad 6. Imágenes (I)

3. • 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.
• Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio)
se encuentran la carpeta imagenes y el documento en el que deseamos insertar la
imagen. Dicha imagen, llamadaaulaclic.jpg, se encuentra dentro de la
carpeta imagenes.
• En el caso de insertar la imagen como relativa al Documento la ruta sería:
• imagenes/aulaclic.jpg

5. • Mientras que en el caso de ser insertada como relativa a
la Raíz del sitio la ruta sería:
• /imagenes/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.

6. • Cuando seleccionamos una imagen el Inspector de
propiedades muestra esta apariencia:

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

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

10. • 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.
• Es muy probable que la imagen resultante no sea de buena
calidad, en comparación de cómo podría quedar modificándola
desde un editor externo, como Fireworks, Photoshop, etc..
• 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 Con tamaño modificado

11. • El resultado puede ser más o menos satisfactorio,
dependiendo del navegador que es el que aplica
realmente el reescalado, 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.

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

14. • 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 previsualizació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.

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

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

17. • es preferible que la opción Carga previa de imagen
de sustitución esté activa. Si se activa, la imagen
de sustitución se carga cuando se carga la página,
de este modo se evitan las demoras debidas a la
descarga de la imagen cuando llega el momento de
que aparezca.
• El Texto alternativo es el texto que aparece al
situar el puntero sobre una imagen, o el que
aparecerá en lugar de la imagen en el caso de que
por algún motivo ésta no pueda ser mostrada en el
navegador.
• El texto alternativo puede asignarse a todas las
imágenes, no sólo a los rollovers. Puede hacerse a
través del campo Alt del inspector de
propiedades de la imagen seleccionada.

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

19. • Pero una archivo .psd no es un archivo que podamos mostrar
en una página web. Por eso, lo que hará Dreamweaver es
convertirlo a un formato estándar. Por eso, tras abrirlo,
Dreamweaver nos pedirá que elijamos uno de los
formatos gif, png o jpg y lo guardemos, con las mismas
opciones que encontrábamos al pulsar el botón del Inspector
de propiedades.
• ¿Qué ventajas obtenemos con todo esto? Si observas la
esquina superior izquierda del objeto inteligente encontrarás
un icono como éste . Las dos flechas verdes indican que
el archivo está sincronizado, es decir, la imagen está
generada a partir del último 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.

20. • 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 Actualizar desde origen.
•
• Por lo tanto, los objetos inteligentes son útiles para
imágenes que tengamos que editar frecuentemente.