Las imágenes

Uno de los elementos que más enriquecen los sitios web son las imagenes.

1. Insertar imágenes desde archivo

Cuando tenemos una imagen guardada (siempre que sea dentro del sitio web, preferiblemente en la carpeta images) podemos insertarla en una página web de la siguiente manera:

Vamos al menú Insertar y seleccionamos Imagen  >  desde archivo
A continuación usamos la ventana de exploración hasta encontrar la imagen correspondiente. La seleccionamos y pinchamos en Aceptar.

2. Insertar una imagen desde el catálogo de imágenes

Esta es una de las opciones más interesantes de FrontPage 2003. Si vamos a Insertar > Imagen > Imágenes Prediseñadas, nos encontraremos con una ventana como esta:
 

Con esta opción podemos buscar imágenes entre unos catálogos online amplísimos. En el ejemplo de esta imagen, he insertado la palabra "colegio" y he pinchado en buscar. Entonces nos salen las miniaturas y sólo nos queda elegir una y hacer doble clic para que nos la inserte en la página web. Para utilizar las imágenes prediseñadas de FrontPage se requiere conexión a internet. Cuando en una página web hayamos insertado imágenes de internet nos va a ocurrir lo siguiente: al ir a guardar la página web (Archivo > Guardar) nos aparecerá la siguiente pantalla: Esta ventana sirve para decirle al Frontpage en qué parte de nuestro propio sitio web queremos guardar la imagen que hemos incrustado en la página. Es conveniente pinchar en Cambiar carpeta... y seleccionar la carpeta images.

3. Insertar una imagen desde internet

Si encontramos en internet una imagen que nos interese y cuyo uso esté permitido libremente, podemos insertarla en nuestra página de la siguiente manera:
Navegando por internet, encontramos una imagen, pinchamos sobre ella con el botón derecho y seleccionamos Copiar. Luego, en nuestra página web pinchamos con el botón derecho en el lugar deseado y seleccionamos Pegar.
Conozco un par de sitios que permiten copiar sus imágenes con la condición de citar la procedencia (incluyendo un enlace a su página). Se trata de:
ARTIE: Con cientos de imágenes animadas.
GRAPHICSBYDEZIGN: con diseños especialmente pensados para sitios web.

Seguro que hay muchos más, pero no he buscado mucho.

Por cierto, una imagen animada (normalmente llamados gifs animados) es esto:
Pues eso, una imagen que se mueve.
 

4. Modificar imágenes

Si pinchamos sobre cualquiera de las imágenes que hemos insertado en nuestra página, nos aparecerá la barra de herramientas de imagen:

Si no aparece iremos al menú Ver > Barras de herramientas > Imagen.

Insertar imagen desde archivo. (Una imagen que está dentro de nuestro ordenador).

Insertar un texto superpuesto a una imagen.

Crea una miniatura de la imagen.

Coloca la imagen en posición absoluta (por encima de todas las demás capas)

Estos iconos colocan la imagen por delante o por detrás de otras capas.

Estos son para rotar la imagen 90 º, a la izquierda o a la derecha.

Rotar:   -->  

Estos son para voltear la imagen, horizontal o verticalmente:

Voltear horizontal:     Voltear vertical:   

Ajustar contraste y brillo de la imagen.

Recortar: Si queremos recortar un trozo de la imagen (por ejemplo, de una foto de cuerpo entero quedarnos sólo con la cara) hay que pinchar en este botón, luego seleccionar el trozo deseado y luego volver a pinchar en el botón.

Definir color transparente. Si insertamos una imagen como esta sobre un fondo de color:

Si queremos que la imagen se integre en el fondo tenemos que hacer transparente el color blanco de la imagen. Eso se hace con la herramienta , que vuelve transparente el color que pincha. El resultado es este:

Ajustar color: poner en blanco y negro, escala de grises, etc.

Dar efecto biselado:

Sin biselado:     Con biselado:

Volver a muestrear. Es necesario pulsar este botón cada vez que se cambie el tamaño de una imagen, para que quede memorizada con el nuevo tamaño.

Estas herramientas sirven para definir zonas activas en una imagen. Esto sirve para definir zonas con hipervínculos diferentes dentro de una misma imagen.

En esta imagen, cada futbolista nos llevará a su propia página si pinchamos sobre él. Es porque hemos definido zonas activas. Para ello elegimos la herramienta: Definir zona rectangular Definir zona elíptica o circular Definir zona poligonal (el más utilizado para formas no definidas. Se define el contorno de la zona activa punto a punto) Cuando definimos una zona dentro de la imagen con estas herramientas nos sale al momento la ventana en la que tenemos que insertar el hipervínculo (la dirección a la que nos tiene que llevar cada zona activa)

Volver al índice                   Siguiente capítulo: bordes compartidos