11.- Imágenes.

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

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 y sin letras no disponibles en el idioma inglés como la ñ) 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, pulsamos el botón derecho del ratón sobre cualquier punto vacío de la ventana derecha de las dos del sitio y elegimos Nueva carpeta del menú contextual:

Se creará una carpeta con el nombre untitled que habrá que cambiar por el que deseemos tenga nuestra carpeta de imágenes:

Por ejemplo, podemos llamarla imag:

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

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

Aparecerá la ventana Seleccionar origen de la imagen:

Pinchamos en Escritorio y seleccionamos la imagen: obras03

Aparecerá el mensaje de advertencia diciéndonos que la imagen no está en la carpeta raíz del sitio:

Le decimos que Sí y se abrirá la ventana Copiar archivo como

Hacemos doble clic sobre la carpeta imag para abrirla

Le damos a Guardar. La imagen se guardará en la carpeta imag y se colocará en el documento:

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

Podemos poner una imagen de fondo en alguna o algunas de las celdas. Por ejemplo, seleccionamos la primera celda (colocamos el cursor en ella y pulsamos <td> en la barra de estado). En el panel de Propiedades pinchamos en de

Aparecerá la ventana

Le damos a Seleccionar y la imagen se colocará como fondo de la celda seleccionada.

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. Para ver el tamaño de la imagen, vamos a la doble ventana del sitio y allí obtenemos información sobre su tamaño:

Así vemos que la imagen obras03 ocupa 3 KB lo cual es un tamaño aceptable. En cambio el fondo1 ocupa mucho espacio: 24 KB. Esta imagen sería adecuado sustituirla por otra que fuese bastante más ligera.

El tamaño indicado por Dreamweaver es una aproximación por exceso al número entero más próximo. El tamaño exacto se consigue con el Explorador de Windows: Botón derecho del ratón sobre el archivo y Propiedades. En los casos anteriores el tamaño exacto es de 2,79 y 23,8 KB respectivamente:

Observa que los dos formatos de imagen que más abundan (precisamente porque no ocupan demasiado) en Internet, son los formatos gif y los jpg. Los gif se emplean para imágenes con pocos colores y los jpg para imágenes, como fotografías, que requieren más colores. Ahora empieza a extenderse otro formato: el png.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:

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

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.