Este documento describe diferentes formatos de imágenes y cómo insertar, modificar y aplicar efectos a imágenes en una página web usando Dreamweaver. Explica formatos como GIF, JPG y PNG y cómo cambiar el tamaño, crear hipervínculos y rollovers. También cubre objetos inteligentes y cómo modificar imágenes directamente desde Photoshop.

1. Integrantes:
I ls e Ale jan d ra P é re z Vá z q u e z
Maria Guadalupe Tellez Alcantar

3. 6.1. 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.
Tipos de formatos
Formato gif
Utilizan un máximo de 256 colores, y son recomendable
para
Dibujos con grandes áreas de un mismo color o de tonos
no
continuos.
Formatos jng:
Estas imágenes pueden contener millones de colores, e
un
archivo comprimido, de tamaño razonable.
Formato png:
Se trata de un formato de compresión sin perdida.
también
resulta especialmente indicado para imágenes con

4. 6.2. 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 .

5. 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
Si insertamos una imagendelluego o relativa al la
relativa a la carpeta raíz y sitio la borramos,
documento.
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: .
Aparece un recuadro blanco con una X roja, junto con el
nombre
de la imagen o el contenido del campo Alt del inspector d
propiedades, que explicaremos a continuación.
Para practicar

6. 6.3. Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de
propiedades muestra esta apariencia:
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.
•En el campo ALT escribimos el texto que remplazara a
la imagen si estas no puede mostrarse.
•En clase podrás asignarle un estilo que hayas creado
anteriormente.

7. 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.
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:
El resultado mas o menos satisfactorio, dependiendo
del navegador que es el que aplica realmente el
recalado aunque en ocasiones es imposible rescatar
la calidad de la imagen.

8. Existen dos formas de modificar el tamaño.
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.
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.

9. D r e a m w e a v e r t a m b ié n n o s p e r m it e c a m b ia r e l
t a m a ñ o r e a l d e l a r c h iv o d e im a g e n .
P a r a h a c e r lo , s e le c c io n a m o s la im a g e n , y p u ls a m o s
e n e l ic o n o d e l I n s p e c t o r d e p r o p ie d a d e s . S e
a b r ir á la v e n t a n a P r e s e n t a c ió n p r e lim in a r d e la
im a g e n . N o s fij a m o s e n la p e s t a ñ a A r c h iv o .

10. 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.
6.5. IMAGEN DE SUSTITUCIÓN. ROLLOVER
Un rollover es una imagen que cambia por otra
cuando el puntero se sitúa sobre ella.
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.

11. 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.
*Existe una forma parecida de crear estos efectos
utilizando CSS, y de hecho son más utilizados.
Básicamente consiste en cambiar la imagen de fondo
de un elemento.

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

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