|
|
|
|
|
|
|
|
|
 |
|
Alineación y dimensionado de imágenes
Texto por Francisco Arocena, © 1997
- Alineación de las imágenes
La alineación de las imágenes fue, en su día, el primer golpe de efecto del programa Navigator de Netscape. Permitió alinear una imagen a la izquierda o a la derecha de la página y hacer que el texto la rodee completamente, consiguiéndose así una apariencia similar a la de una revista. Esto se consigue con las extensiones de la etiqueta ALIGN, (que ya se vió en el Capítulo 4 con los comandos TOP, MIDDLE y BOTTOM). Pero entonces sólo se hacía referencia al titular de la imagen, es decir, a un texto explicativo, pero menor que una línea completa, pues en caso de rebasarla, el texto saltaba a la parte inferior de la imagen, dejando un hueco en blanco, con lo que su utilidad era muy limitada. Este inconveniente queda solventado con los comandos de Netscape RIGHT (derecha) y LEFT (izquierda).
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <BR>:
<BR CLEAR=LEFT>Busca el primer margen libre (clear) a la izquierda.
<BR CLEAR=RIGHT>Busca el primer margen libre a la derecha.
<BR CLEAR=ALL>Busca el primer margen libre a ambos lados.
Un ejemplo para aclarar esto:
 Este texto estaría a un lado de la imagen.
Este tambien estaría a un lado de la imagen, pero en la linea siguiente.
Este otro texto, en cambio, habría buscado el primer margen libre a la izquierda.
- Dimensionando la imagen
Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes.
Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la pantalla.
Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen <IMG SRC="imagen.gif"> que sirven para indicar al navegador cuáles son sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algún programa gráfico).
En este caso, el navegador actúa de una forma más favorable, ya que entonces, como conoce las dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las imágenes.
Estos comandos son WIDTH (ancho) y HEIGHT (alto).
Por ejemplo, para la imagen azul.gif:
<IMG SRC="azul.gif" WIDTH=120 HEIGHT=127>
Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el proceso de carga del documento.
Se pueden también, si se quiere, dimensionar las imágenes con unos valores distintos a los que realmente tienen, variando el tamaño, la anchura o la altura. Esto es muy conveniente, por ejemplo para poner en la página un thumbnail (reproducción en pequeño de una imagen), que hace de enlace a la imagen en su verdadero tamaño. De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar.
He aquí un ejemplo de thumbnail:
Suponemos que la imagen, "negro.gif", tiene realmente unas dimensiones de 120x127 pixels (datos obtenidos de un programa gráfico). Para dimensionar el thumbnail a 60x63 (guardando unas proporciones parecidas al original, de 2:1), lo conseguimos con:
<IMG SRC="negro.gif" WIDTH=60 HEIGHT=63>
Y su resultado es:
Para hacer que esta imagen reducida sea el enlace con la imagen en su tamaño original, lo conseguimos con:
<A HREF="negro.gif"><IMG SRC="negro.gif" WIDTH=60 HEIGHT=63></A>
También se puede conseguir esto de otra manera, más correcta aunque más laboriosa. Es la de reducir en un programa gráfico esta imagen a 150x75, guardarla con otro nombre, y luego hacer que la pequeña sea el enlace de la grande. Es más correcta esta otra solución porque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, incluso tampoco algunas de las versiones más antiguas de Netscape.
|
|
|
|
Partiendo del ejemplo práctico del capítulo anterior, mipag7.htm, vamos a dimensionar las imágenes existentes y añadir otra, cara.gif, como ejemplo de imagen alineada a la izquierda, con su texto correspondiente.
Capturamos la imagen "cara.gif" y la guardamos junto con el fichero que vamos a crear. Cargamos el fichero mipag7.htm y cambiamos las etiquetas de las imágenes de la siguiente manera:
<IMG SRC="negro.gif"> por <IMG SRC="negro.gif" WIDTH=60 HEIGHT=63>
<IMG SRC="rojo.gif"> por <IMG SRC="rojo.gif" WIDTH= 60 HEIGHT=63>
<IMG SRC="azul.gif"> por <IMG SRC="azul.gif" WIDTH= 120 HEIGHT=127>
(La imagen del fondo "nubes.jpg" no se dimensiona).
Además de esto, añadimos entre las etiquetas </CENTER> y </BODY> (al final del documento), lo siguiente:
Guardamos este fichero como mipag8.htm y lo cargamos en el navegador para verlo.
Las imágenes utilizadas en este capítulo son propiedad de © Diana Peralta.
|
|
|
|
|
|
