Manual de utilización del Dreamweaver MX 2004

 

10.- Imágenes Ir al principio

Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que lo hagamos.

Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de cada uno de los documentos o, mucho mejor, en una carpeta especial dentro del sitio a la que llamaremos imagenes ( nombre de los archivos y carpetas sin acentos ) o cualquier otro nombre que nos sugiera que, dentro de esa carpeta, están nuestras imágenes.

Para crear una carpeta dentro de la carpeta raíz del sitio: pinchamos sobre la carpeta raíz en el panel lateral derecho con el botón derecho del ratón y, en el menú conextual, elegimos Nueva carpeta

Aparecerá una nueva carpeta. DW le habrá puesto como nombre untitled

Imagen 098.png

Nosotros le cambiamos el nombre:

Imagen 099.png

Podemos llevar las imágenes a la carpeta por cualquiera de los procedimientos habituales en Windows. Si por ejemplo, tal como indicábamos al principio, la imagen no está previamente guardada en la carpeta, Dreamweaver nos va a sugerir que lo hagamos. Supongamos que queremos insertar una imagen que tenemos guardada en el Escritorio. La imagen se llama enobras.gif

Pinchamos en Insertar de la barra de menús y soltamos en Imagen :

Imagen 100.png

Se abre la ventana del explorador para que localizemos la imagen que queremos insertar:

Imagen 101.png

Le damos a Aceptar. Como la imagen está fuera de la carpeta raíz del sitio, aparece este mensaje de advertencia:

Imagen 102.png

Le decimos que sí y se nos abre la carpeta raíz del sitio:

Imagen 103.png

Hacemos doble clic sobre la carpeta imagenes:

Imagen 104.png

Y le damos a Guardar. La imagen se habrá colocado en el documento y en la barra lateral derecha, en archivos, podremos ver la imagen dentro de la carpeta imagenes

Imagen 105.png

Observa la imagen colocada en el documento. Como está seleccionada, el panel del Inspector de Propiedades estará referido a la imagen:

Imagen 106.png

Una imagen puede colocarse también como fondo de una página, o de una tabla, o de una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior vamos a poner un fondo en la primera celda de la primera fila (vamos a hacerlo desde este propio documento). Insertamos la tabla y situamos el cursor en la primera celda:

Lunes
Martes
Miércoles
Jueves
Viernes
Mañana Aula 1 Aula 2 Aula 1 Aula 2 Aula 1
Tarde Aula 1 Aula 3 Aula 1 Aula 2 Aula 1
Noche
Tiempo libre
Fiesta final

Y, en el panel del Inspector de Propiedades, nos fijamos en Imagen 108.png

Imagen 107.png

Una forma de hacerlo es pinchar en Imagen 109.png y, sin soltar el ratón, arrastar hasta pillar la imagen que queremos colocar (en este caso se llama fondo01.gif) en el panel de archivos de la derecha:

Imagen 110.png

La imagen se habrá colocado como fondo de esa celda:

Lunes
Martes
Miércoles
Jueves
Viernes
Mañana Aula 1 Aula 2 Aula 1 Aula 2 Aula 1
Tarde Aula 1 Aula 3 Aula 1 Aula 2 Aula 1
Noche
Tiempo libre
Fiesta final

A propósito de las imágenes, es muy importante que controlemos el tamaño de las mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra página. Cuando insertamos una imagen aparece, en el panel del Inspector de Propiedades, una información sobre el tamaño. Imagen 113.png Otra forma de ver estos tamaños es pulsando el icono Imagen 111.png ( Ampliar/contraer) de la franja lateral derecha. Imagen 112.png La ventana se ampliará proporcionando información sobre los tamaños de los archivos:

Imagen 114.png

Así observamos que nuestro fondo, el fondo01.gif ocupa 3 KB que es un tamaño adecuado. Observa, también, los dos formatos de imagen que aparecen aquí el .gif y el .png Los dos son muy similares, se emplean para imágnes con colores planos. El tercer formato de la web, el .jpg se emplea para imágenes con muchos matices de color.

El formato .ico es un formato de iconos. Lo que ves allí es un favicon o una pequeña imagen a modo de logotipo que se sitúa delante de la dirección URL de la página y en los listados de los favoritos.

En cuanto a los gifs, decir que un uso muy extendido son los gif animados que son imágenes con cierto movimiento que no ocupan demasiado espacio. Por ejemplo:

Imagen gato.gif

La imagen ocupa 9 KB y, siempre sin hacer un uso abusivo, estos gifs animados pueden alegrar nuestra páginas.

(Nota: Dreamweaver hace un cálculo del tamaño por aproximación redondeando al valor en KB más próximo por arriba -17,2 KB se convierte en 18 KB por ejemplo-. Si deseas ver el tamaño exacto lo puedes hacer desde el explorador de Windows: te situas con el botón derecho del ratón encima de la imagen y le das a Propiedades )

Este gif se ha sacado de la siguiente dirección: http://ausmall.com.au/freegraf/freegrfa.htm

Aunque hay muchos otros sitios web que proporcionan gifs animados, y sin animar, de forma gratuita.

Ir al principio

HTML 4.01 | ©2005 Ángel Ricardo Puente Pérez