Integrantes:Ilse Alejandra Pérez VázquezMaria Guadalupe Tellez Alcantar

6.1. IntroducciónLas 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 gifUtilizan un máximo de 256 colores, y son recomendables para Dibujos con grandes áreas de un mismo color o de tonos no continuos.Formatos jng:Estas imágenes pueden contener millones de colores, en 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 degradado decolor.

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.

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.

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

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación. Para practicar

6.3. Propiedades de una imagenCuando 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 creadoanteriormente.

6.4. Cambiar el tamaño de una imagenDentro 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.

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.            

Existen dos formas de modificar el tamaño.

Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.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.

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

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.

6.6. OBJETOS INTELIGENTESLos 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.

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.