Unidad 6. Imágenes (II)
6.3. Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aquí podremos establecer distintos atributos a la imagen:
- Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.
- Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen. Puedes ver cómo en este aquí .
- En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato
title="Texto a mostrar"
. Internet Explorer muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.
- En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.
Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos están cayendo en desuso y no deberían de ser empleados:
- Puedes asignarle un grosor de borde desde el campo Borde.
- Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
- Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.
Además, encontramos algunos controles de Edición: El botón nos permite optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias como puedes ver aquí . Por otro lado, el icono nos permite editar la imagen con un programa externo, como Photoshop o Paint. Puedes ver cómo cambiar el programa de edición aquí .
Puedes seguir este ejercicio paso a paso par aprender a Crear mapas de imagen.