Forinsur S.L.

Centro de Formacin | Manual de Usuario

Imgenes con Dreamweaver CS3

Formatos grficos En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas. Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web, como son, jpg o gif. Insertando una imagen Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana. Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos. En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior. Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.

Tcnico Especialista en Diseo, Animacin y Programacin Web

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 raz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada fondo.jpg, se encuentra dentro de la carpeta imagenes. En el caso de insertar la imagen como relativa al Documento la ruta sera: imagenes/fondo.jpg Mientras que en el caso de ser insertada como relativa a la raz del sitio la ruta sera: /imagenes/fondo.jpg Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio. Si se inserta un BMP en un

Forinsur S.L. Centro de Formacin | Manual de Usuario

documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a esta en Internet Explorer:

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.

Y esto se vera en Mozilla Firefox:

Ajustando propiedades de imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Tcnico Especialista en Diseo, Animacin y Programacin Web

Desde aqu podrs acceder a distintas propiedades: Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques el ratn sobre ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo por los programas lectores para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por alguna razn no puede mostrarse. En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic. Puedes asignarle un tamao de borde desde el campo Borde.

Alineando imgenes Puedes seleccionar su alineacin con respecto al texto desde el campo Alinear. Las opciones Espacio V y Espacio H te sern muy 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.

Aadir un enlace en una imagen Si le damos un valor al campo Vnculo convertiremos a la imagen en un link a otra pgina. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un correo electrnico deber empezar por mailto: En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra selecionando un valor en el campo Destino.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Insertar rollover bsico Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas. Para insertar un rollover hay que dirigirse al men Insertar, Imgenes interactivas, a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imgen original y la de sustitucin. Es preferible que la opcin Carga previa de imagen de sustitucin est activa. 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 algn motivo sta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada. Creando y modificando mapas de imagen Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn tipo de comportamiento. Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del inspector de propiedades que tienen el siguiente aspecto: .

Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener forma rectangular, circular, o libre, dependiendo del botn pulsado. Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice el mapa, as como sobre el resto de lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignarle un vnculo y un texto alternativo.

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa, para que el puntero recupere su forma original al situarse sobre una imagen.

Forinsur S.L. Centro de Formacin | Manual de Usuario

De este modo, es posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen. Creando barras de navegacin Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de men para navegar dentro de una web. Una pgina web solo puede contener una nica barra de navegacin. Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de la imagen, opcin Barra de navegacin. En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno de los botones, el vnculo para cada uno de ellos, etc

A travs de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegacin, as como reordenarlos. Con un botn nuevo, con se elimina el botn seleccionado, y con se crea se

puede modificar la posicin del botn seleccionado.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Aqu tiene un ejemplo de barra de navegacin. Para su creacin se han utilizado las mismas imgenes para todos los botones, pero como puede ver, en el botn del medio aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opcin Mostrar "Imagen abajo" inicialmente estaba activa para este botn.

El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est activo, cosa que con un simple rollover no puede hacerse. A travs de la opcin Insertar, Objetos de la imagen, Barra de navegacin es posible especificar si los botones de la barra de navegacin van a aparecer de forma horizontal o vertical dentro de la pgina.