Las imágenes son uno de los elementos que dan más atractivo a las páginas Web. Es por eso que, como veremos, tienen tantos atributos modificadores de la posición, tamaño, etc.
Lo primero es saber cómo se inserta una imagen. Muy fácil, se pincha en el icono, o bien en Insertar/Imagen
Claro, esto exige tener una imagen previa para poder insertar. En la páginas que estamos construyendo colocaremos las imágenes en el subdirectorio imagenes .
Antes de proseguir, un poco de teoría. En internet se utilizan normalmente dos tipos de formatos para imágenes, ambos comprimen el fichero para que ocupe menos.
 |
Los Gifs animados son una sucesión de imágenes, pero que se comportan a todos los efectos como una sola. Este de la izquierda es animado y no es transparente |
 |
Los Gifs transparentes, son aquellos en los que un color o más, de los 256 posibles, no se visualiza. Este si es transparente, por lo que no se ve el fondo y da la sensación de tener una forma irregular. |
Es muy recomendable que los ficheros de imágenes sean pequeños. Un icono Gif no debe ocupar más de 3 o 4 Kb y una foto en JPG menos de 20 o 30 Kb. Es buena idea poner una foto pequeña y usarla como enlace para presentar otra de más resolución.
Resumiendo:
- Hay que escanear las fotos que vamos a poner (o tomarlas con una cámara digital directamente)
- Hay que guardar las fotos en el formato JPG, con la compresión y el tamaño adecuado (una foto de más de 640x480 se sale de la pantalla de la mayoría de los internautas)
- Hay que colocar las fotos y los iconos en el directorio adecuado.
Asumiendo que esto está hecho, pasamos al siguiente paso, ¿cómo se ponen en la página?
Como dije antes, pinchando en el icono
En la pestaña General
- Origen de la imagen. Debe aparecer la ruta de forma relativa para que funcione en Internet. Si no sabes cómo se hace Pincha aquí
- Representaciones alternativas. Elige una imagen de menos resolución y el texto que aparece cuando el cursor se detiene sobre ella.
- Hipervínculo predeterminado. La imagen puede ser también un enlace, aquí se escribe la ruta adonde apunta el enlace. Veremos los enlaces más detenidamente en la página siguiente
En la pestaña Apariencia
- Alineación. Nos indica cómo se distribuye el texto alrededor de la imagen. Prueba las diferentes opciones para comprobarlo
- Grosor del borde. Se da en píxels, también puede elegirse sin borde poniendo 0
- Espaciado horizontal y vertical. Nos permite seleccionar la distancia entre el texto y la imagen
- Especificar tamaño. Si se especifica las dimensiones de la imagen el navegador reservará el espacio para la imagen y seguirá cargando la página. Si se eligen dimensiones distintas a las que tiene la imagen, esta se puede ver deformada, con poca resolución o con demasiada.
Para poder cambiar el formato de las imágenes, el tamaño, la resolución, los colores, etc necesitas un programa adecuado para ello.
- Uno bastante sencillo es LView Pro que se puede descargar de http://www.lview.com (Shareware, 21 días de prueba, 1.36 Mb)
- Otro, más completo, es Paint Shop Pro en http://www.jasc.com (Shareware, 30 días, 3.1 Mb)
- Quizás el mejor de todos: Adobe Photoshop
Los dos primeros suelen venir en los CD de las revistas
Si quieres hacer Gifs animados, debes conseguir:
- GIF Construction Set en http://www.mindworkshop.com/alchemy/gifcon.html (1.46 Mb, Shareware) o bien:
- WWW Gif Animator en http://stud1.tuwien.ac.at/~e8925005/ (277 Kb, Shareware)
También puedes encontrar imágenes ya creadas de todos los tipos en algunas páginas de Internet, que son como bibliotecas de imágenes. Puedes mirar en
- Icon Bazaar (http://www.iconbazaar.com/)
- Rose's Backgrounds Archive (http://www.wanderers.com/rose/backgrou.htm)
- Free graphics wonderland (http://www.geocities.com/SiliconValley/Heights/1272/index.html)
- Rainfrog's Web Art (http://www.rainfrog.com/webart)
- Fairy's Free Icons (http://www.dewa.com/freeicon )
- GIF Animation Designs (http://www.webpromotion.com/stock.html )
- Over the Rainbow (http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html )
Atrás | Ejercicios | Inicio | Siguiente