 Tutoriales Introducción a Dreamweaver 3
Añadiendo imágenes
 Formatos gráficos
En sus orígenes, la web estaba compuesta en su totalidad por una ingente cantidad de documentos de texto. A medida que fue creciendo su círculo de usuarios, fue creciendo la necesidad de ampliar el tipo de contenidos para la web. Primero fueron algunas im·genes estáticas, después llegaron algunas posibilidades de animación. Actualmente, la web en su evolución ha llegado a ser un medio multimedia en el que podemos publicar en formatos de sonido que emulan la calidad de sonido de los CD, transmisión de vídeo con calidad aceptable, animaciones altamente interactivas, etc..
Veremos algo más sobre la inserción de elementos Multimedia en nuestros documentos más adelante, pero por ahora nos centraremos en la inserción de imágenes.
A la hora de insertar imágenes en nuestros documentos, hemos de estar seguros de que estas imágenes están en un formato multiplataforma estándar, ya que de otra manera no todos los usuarios visualizarían nuestras páginas correctamente. Además estos ficheros con imágenes no han de ser excesivamente grandes, ya que aumentaría en exceso el tiempo de descarga de los documentos.
Cumpliendo estos requisitos fundamentales, nos encontramos con dos tipos de ficheros que podemos utilizar fundamentalmente en nuestros documentos web: GIF (GIF89) y JPEG.
- GIF: También conocido como GIF89 por el año en el que se estableció como formato estándar para la publicación de imágenes para la red, es un formato gráfico que permite publicar imágenes del tipo bitmap en documentos web. Los ficheros GIF utilizan una paleta de color indexado, que puede tener un máximo de 256 colores. Esta paleta de colores puede ser la paleta estándar de colores para la web, o puede ser una paleta propia y personalizada para el fichero en cuestión. Este tipo de formato funciona muy bien cuando la imagen esta compuesta fundamentalmente por colores planos. Para simular más colores de los que hay en la paleta, este tipo de ficheros utilizan una técnica llamada "dithering" por la cual se mezclan pequeños puntos de distintos colores para simular colores que no existen en la paleta. El usuario tiene la posibilidad de elegir uno o varios colores de la paleta para que sean transparentes, es decir, que esos colores no se vean en la imagen final dejando ver los elementos que se encuentren por debajo, como puede ser el fondo de la página.
Este es el formato gráfico más compatible de todos los formatos que podemos utilizar hoy en día en nuestros documentos. A todo lo dicho anteriormente sobre este formato, se le suma el hecho de que es el único formato gráfico que permite mostrar contenido animado, gracias a la composición de un GIF con distintos frames que se ejecutan secuencialmente, consiguiendo la animación deseada.
Este tipo de animaciones basadas en una serie de imágenes bitmap secuenciales se ha utilizado y se sigue utilizando mucho para la creación de banners, aunque la reciente aparición de tecnologías como Flash parecen desbancar al formato GIF en un futuro no muy lejano de se hegemonía en ese aspecto.
| NOTA: A pesar de todo, GIF sigue siendo el formato gráfico más extendido y compatible por la red. Para que un navegador interprete un fichero como imagen en formato GIF, este tiene que tener la extensión ".gif". |
- JPEG: Es un formato gráfico estándar que, al contrario que el GIF, permite publicar una imagen en la web sin recurrir al color indexado. Gracias a su tecnología de compresión, un fichero JPG puede estar compuesto por miles de colores RGB sin ser excesivamente grande. Es una elección muy adecuada si la imagen a publicar esta compuesta por degradados o es una imagen fotográfica real con una gran variedad de tonalidades. En ese caso, el formato GIF tal vez no mostraría la imagen con la misma claridad y realismo que lo haría el formato JPG.
Es un formato compatible con la practica totalidad de los navegadores actuales, aunque tiene como gran desventaja con respecto al GIF que no podemos mostrar contenido animado usando ficheros JPG. Tampoco podemos tener colores transparentes en una imagen JPEG, ya que esta no se basa en colores indexados.
| NOTA: Para que un navegador interprete un fichero como imagen en formato JPEG, este tiene que tener la extensión ".jpg" |
Estos son los dos formatos gráficos más extendidos, aunque en los últimos tiempos ha hecho irrupción con mucha fuerza un formato gráfico que cuenta con grandes ventajas con respecto a sus antecesores. Nos referimos al formato PNG.
- PNG: es un formato gráfico que aúna gran parte de las ventajas de un JPEG y gran parte de las ventajas de un GIF. En primer lugar, permite altos niveles de comprensión, generando ficheros muy pequeños. Podemos generar un PNG de 8 bits, en cuyo caso utilizará la técnica de indexación del color típica de los GIFS, o podemos tener PNG de 24 o 32 bits, en cuyo caso utilizará una paleta de millones de colores más propia de los formatos JPEG.
Como gran ventaja con respecto a otros formatos, se encuentra el hecho de que podemos tener hasta 256 niveles de transparencia en una imagen, permitiendo la creación de semitransparencias o transparencias degradadas, cosa que no podemos hacer con un formato GIF ni con un formato JPEG.
Sin embargo, con PNG no podemos crear ficheros animados, cosa que sí podemos hacer con GIF.
Sin duda alguna, este formato sería nuestra recomendación para la publicación de imágenes en nuestros documentos web, si no fuera porque este formato no esta soportado por algunos navegadores aún mayoritarios, como el IExplorer 4.5. Actualmente este formato esta soportado por Netscape 4.5 o superiores y por IExplorer 5.0 y superiores.
| NOTA: para que un navegador interprete un fichero como imagen en formato PNG, este tiene que tener la extensión ".png" |
| RECOMENDACIÓN: En caso de tener una imagen compuesta en su mayoría por colores planos, la mejor opción es un GIF. Si la imagen esta compuesta por degradados o es una fotografía real con muchas tonalidades, sería mejor utilizar un JPEG.
Si necesitamos publicar una imagen animada, la única alternativa posible es el GIF.
PNG es un formato que promete mucho y que tal vez sea el más indicado en casi todas las ocasiones, tan pronto como su formato este soportado por la mayoría de los navegadores, cosa que aún no sucede. |
Insertando una imagen
Una vez que hemos elegido la imagen y el formato gráfico que vamos a utilizar en nuestros documentos, ha llegado la hora de ver como podemos insertar una imagen.
La marca HTML que añade una imagen al documento es <IMG>. La marca <IMG>, es una marca HTML abierta, es decir, no tiene marca de cierre. Esta marca, tiene varios atributos, aunque todos ellos son configurables desde la paleta Propiedades de Dreamweaver, como veremos posteriormente.
Como hemos explicado en el primer capítulo de este curso, un documento HTML es solo texto, entonces ¿como podemos insertar una imagen en un documento HTML?. Bueno, en realidad no insertamos la imagen en el documento, sino que la enlazamos. Lo que hacemos es insertar una marca HTML (<IMG>) que informa al navegador donde se encuentra la imagen que queremos mostrar, el navegador buscará esa imagen y la presentará en el documento, ajustándose a los parámetros que le hayamos pasado en le marca HTML. Por tanto, en su manera más básica, una marca <IMG> debe informar al navegador donde encontrar la imagen, como vemos en el siguiente ejemplo:
<IMG SRC="http://www.ciberaula.com/imágenes/imagenejemplo.gif">
Como vemos en el ejemplo superior, el atributo SRC es el encargado de pasar la URL de la imagen a mostrar. La URL de una imagen, como cualquier otra URL, puede ser absoluta, relativa al documento o relativa a la raíz del site.
Como insertar una imagen usando Dreamweaver
Para insertar una imagen en un documento de Dreamweaver, los pasos a seguir son los siguientes:
- Posicionamos el cursor en el punto en el que queremos insertar la imagen
- Una vez en la posición adecuada, podemos acudir a menú Insert > Image, y se abrirá una ventana en la que podemos localizar la imagen a insertar dentro de nuestro disco duro. Como vimos anteriormente, una vez hayamos localizado la imagen deseada, Dreamweaver calculara por nosotros la URL de dicha imagen y creará la marca HTML adecuada.
| NOTA: Si lo deseamos, podemos insertar la imagen usando la paleta Objects > Common > Image, que realiza la misma función que la opción de menú vista anteriormente. |
Con estos dos simples pasos, habremos insertado una imagen en nuestro documento.
Ajustando propiedades de la imagen
La marca HTML <IMG> tiene bastantes atributos que permiten controlar distintos aspectos de la imagen insertada en un documento HTML. Todos esos atributos son controlables en Dreamweaver a través de la paleta Propiedades, cuando el elemento seleccionado en el documento es una imagen.
Arriba tenemos el aspecto que presenta la paleta Propiedades cuando estamos trabajando sobre una imagen en el documento. Veamos algunos de los parámetros que podemos ajustar:
- Texto Alternativo: Uno de los atributos de la marca <IMG> es ALT. Mediante este atributo podemos pasar un texto alternativo que será mostrado mientras la imagen se carga, o en aquellos casos en los que el usuario no pueda o no quiera ver las imágenes Este texto alternativo es muy importante, sobre todo porque algunos buscadores lo utilizan para indexar nuestras páginas en sus bases de datos. Para ajustar el valor de este atributo, podemos utilizar el campo Alt de la paleta de Propiedades.
- Ancho y Alto: Mediante los atributos WIDTH y HEIGHT, podemos especificar el ancho y el alto que tendrá la imagen una vez presentada en el documento. El ancho y alto de una imagen se puede pasar en pixels, o se puede pasar en términos porcentuales de la ventana del navegador. Así, 100% dará como resultado unas dimensiones iguales al 100% de la ventana del navegador. Por defecto, Dreamweaver ajusta estos valores a las medidas originales de la imagen, aunque nosotros podemos variar esos valores. Para hacerlo, tenemos los campos "W" y "H", ancho y alto respectivamente, en la paleta de Propiedades.
| NOTA: Cuando el ancho y el alto de la imagen se han variado con respecto a la imagen original, los valores de estos dos campos aparecen en negrita. Si quiere restablecer los valores originales de la imagen, puede hacer click en el botón "Refresh". Si solo desea restablecer uno de los dos valores, puede hacer doble click sobre la "W" (ancho) o sobre la "H" (alto). |
- SRC: En este campo se puede introducir la URL de la imagen. Como observará, si ha seguido los pasos descritos anteriormente para insertar una imagen, Dreamweaver ha hecho este trabajo por usted, aunque en cualquier momento usted puede variar esta URL manualmente.
| TRUCO: En caso de que queramos insertar una imagen que no se encuentre en nuestro disco duro, o que queramos usar una URL absoluta para la imagen, tendremos que añadir de manera manual la URL en el campo SRC de la paleta de propiedades.
Lo mejor que podemos hacer en ese caso es insertar una imagen cualquiera de las que tenemos en nuestro disco duro, y una vez insertada en el documento, sustituir la URL por la de la imagen que queremos. Si la imagen en cuestión no se encuentra en nuestro disco duro, Dreamweaver mostrará un icono por defecto, con las dimensiones de ancho y alto que hubiéramos establecido, en lugar de mostrarnos la imagen.
Cuando use este truco, tenga en cuenta que Dreamweaver no calculará las dimensiones de ancho y alto sobre la imagen final, ya que no la ha localizado. Por tanto, usted tendrá que introducir los valores manualmente. |
- Border: Una imagen en HTML puede tener un borde a su alrededor o no tener ninguno. Puede ajustar la cantidad de borde que desea para su imagen, en pixels, en el campo de la paleta Propiedades > Border. Por defecto, no se añade ningún borde a las imágenes y es una función que está en desuso.
- Low SRC: Un atributo muy interesante y que apenas se usa de la marca <IMG> es el atributo LOWSRC, del inglés "Low Screen" (baja resolución). Este atributo permite pasar al navegador la URL de una replica de la imagen que queremos mostrar en baja resolución. Así, el navegador mostrará esta imagen mientras la imagen de alta calidad se termina de cargar. Esta utilidad se usa con menos frecuencia de la que se debería hacer. Puede ser muy útil cuando nuestro documento esta cargado de imágenes de gran tamaño mostrar replicas en blanco y negro o en menos resolución de nuestras imágenes, de manera que el usuario pueda ver algo rápidamente, sin tener que esperar a la descarga total de las imágenes
Cierto es que para utilizar esta función, tendríamos que generar una copia de cada una de las imágenes en baja resolución que haya en nuestro documento. Aunque eso pueda suponer un trabajo añadido, el usuario final con conexiones lentas nos lo agradecerá.
Alineando imágenes
Hemos visto hasta ahora como insertar imágenes en nuestros documentos y como ajustar los parámetros de la imagen. Ahora veremos como podemos ajustar otros parámetros que permiten ajustar como se mostrará la imagen con respecto a otros elementos del documento, como puede ser el texto que la rodea. Nos referimos a las posibilidades de alineación que podemos ajustar para una imagen.
En la misma paleta de Propiedades encontramos dos controles en los que podemos ajustar valores de alineación para nuestra imagen. Antes de verlos, hemos de entender que existen dos tipos de alineaciones que podemos ajustar en una imagen:
- Alineación Absoluta: Entendemos por alineación absoluta la alineación con respecto a los márgenes de la ventana que deseamos para nuestra imagen dentro del documento actual. Esta alineación puede ser Izquierda, Centrada o Derecha. Como es lógico pensar, eligiendo una de estas alineaciones podemos hacer que nuestra imagen se alinee al margen izquierdo del documento, al centro del mismo, o al margen derecho.
Podemos ajustar esta alineación para la imagen utilizando los 3 botones, simbolizados por una especie de párrafo, que hay en la parte derecha de la paleta propiedades, justo al lado del campo "border".
- Alineación Relativa: entendemos por alineación relativa, la alineación o disposición que pueden tener los elementos colindantes, especialmente el texto, con respecto a la imagen. Así por ejemplo, podemos ajustar que el texto fluya por el margen derecho de la imagen, o que fluya por el margen derecho de la imagen, que el texto colindante se alinee con el borde superior de la imagen, o con el borde inferior. En fin, este tipo de alineación en realidad no marca cual será la alineación de la imagen en el documento, sino cual será la alineación de la imagen con respecto a los elementos que la rodean.
Podemos escoger un tipo de alineación relativa de la lista desplegable "Align", en la paleta de Propiedades. Para que sea más fácil de entender este tipo de alineación, y el resultado que cada una de las posibles opciones tiene, haga click aquí para visualizar un documento de ejemplo.
Una última opción que tenemos a la hora de ajustar la imagen con los elementos que lo rodean, es la de establecer un espacio, a modo de márgenes, alrededor de la imagen, de manera que el elemento más cercano a la imagen este fuera de esos márgenes. Este espacio lo podemos ajustar en los campos "V Space", espacio vertical, y "H Space", espacio horizontal. Visualice este ejemplo para ver lo queremos decir.
|
|
|
