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 su uso en este avanzado. Y con lo aprendido, realizar el Ejercicio paso a paso Crear mapas de imagen.
• 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. No obstante, los explicaremos para que entiendas su función:

• Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo border.
• Puedes seleccionar su alineación con respecto al texto desde el campo Alinear. En CSS, existe el atributo vertical-align.
• Por último las opciones Espacio V y Espacio H te serán ú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. En CSS, podemos hacerlo con el margin.

 

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í .