Multimedia>>Imagen
Cuando pulsamos el icono
para insertar
imágenes se despliega una ventana de opciones muy completa.
La primera pestaña se utilizará para seleccionar el archivo de imagen que pretendemos incluir en la página. Al pulsar el botón correspondiente iniciaremos una navegación por el disco para buscar el archivo de imagen que queremos incluir en la página.
La configuración por defecto tiene activada la
opción
por lo
que si pulsamos
sin
haber tecleado un texto nos encontraremos con un aviso que nos recuerda
la función del mismo.
Cuando iniciemos la exploración de las carpetas se
mostrarán las imágenes almacenadas en alguno de
los tres formatos con los que hemos trabajado hasta ahora: gif, png y
jpg.
De todas maneras podemos utilizar la vista
para
introducir directamente en el código la referencia a una
imagen guardada en formato bmp
que también se
mostrará correctamente, pero no es recomendable hacerlo, ya
que el tamaño de las imágenes bmp es muy grande
al tratarse de un archivo sin pérdida y
no son adecuadas para su transmisión
por Internet.
La
segunda pestaña permitirá mantener el
tamaño original o modificarlo introduciendo las nuevas
dimensiones si seleccionamos
e introducimos los valores
numéricos que queremos adjudicarle. También
puedo, cuando he seleccionado una imagen y la tengo ya en la pantalla,
modificar su tamaño si pincho y arrastro alguno de sus
vértices. (Si lo hiciera sobre uno de los lados la
modificación no respetaría las proporciones).
Este procedimiento sería el equivalente gráfico
de la modificación numérica de las dimensiones en
la pantalla general de la imagen.
Si nos planteamos nuestra comodidad a la hora de
diseñar la página está claro que es un
método muy rápido, pero... ya hemos visto como
existe un procedimiento bastante rápido para escalar las imágenes
y hacer que el "peso" de las mismas se redujera considerablemente,
así que ... si tenemos en cuenta a los posibles visitantes
de nuestra página la única conclusión
razonable es:
¡No
lo hagas nunca!
¿Por qué tienes que obligar a quien visita la
página a que descargue toda la información de la
imagen original para que luego su navegador ajuste el tamaño
y le muestre una miniatura?
La pestaña
presenta una
pantalla en la que se pueden indicar el espaciado alrededor de la
imagen, el grosor de los bordes y la alineación entre el
texto y la imagen.
Los iconos que representan la alineación del texto respecto a la imagen son suficientemente explicativos: la imagen que introducimos, independientemente de su tamaño, tiene la misma consideración que una letra, por lo que habrá que tener en cuenta que las alineaciones superior, central e inferior sólo se aplicarán al texto que quepa hasta el siguiente salto de línea, ya que al producirse el salto de línea el siguiente renglón se colocará debajo del que se acaba de completar. Aunque esto se verá con detenimiento cuando se estudien los estilos podemos adelantar que es porque las imágenes, al igual que las letras formar lo que se denomina un elemento "en línea" a la hora de construir una página.
Como lo que se pretende habitualmente cuando utilizamos la alineación entre texto e imágenes es que el texto fluya alrededor de la imagen lo más común será utilizar una de las dos últimas opciones que permiten que la imagen se alinee a la derecha o la izquierda, respectivamente mientras el texto fluye por el costado libre.
En cuanto al espacio alrededor de la imagen es de cero
píxeles, tanto en horizontal como en vertical, al igual que
el borde sólido. Si queremos que la imagen mantenga una
distancia respecto al texto que la rodea será
aquí donde lo especifiquemos.
Una vez
que hemos incluido una imagen en nuestra página podremos
volver en cualquier momento a la pantalla de propiedades para modificar
alguna de las características. Para ello podemos hacer doble
clic sobre la imagen, pulsar con el botón secundario del
ratón sobre la imagen y elegir , o bien utilizar la
opción de
menú .
Aunque no se pueden dictar normas generales, suele ser recomendable que dejemos un espaciado horizontal alrededor de la imagen. Ten en cuenta que dicho espacio se aplicará a ambos lados de la imagen. El espaciado vertical no suele ser necesario, ya que el propio interlineado es suficiente en la mayoría de los casos.
En cuanto al borde sólido no es más que un marco (de color negro) que se coloca alrededor de la imagen. No aporta mucho estéticamente y puede acabar por dar un cierto tono fúnebre, ya que si se pone un poco grueso recuerda inevitablemente a una esquela mortuoria. Posiblemente sólo esté justificado en determinadas imágenes en las que, por sus especiales características, el marco pueda suponer un realce estético.
Si la imagen soporta un enlace el cuadro se pone de color azul o morado según hayamos visitado o no el enlace. El lenguaje gráfico de la WEB ha evolucionado lo suficiente como para que no sea necesario indicar con un recuadro que esa imagen es un enlace.
Si en algún momento pretendes localizar en el código las etiquetas que tienen que ver con las imágenes verás que tienen la siguiente forma según el modo de trabajo que estés utilizando
Si trabajas con los estilos CSS desactivados:
<img src="atencion.gif" width="28"
height="25" alt="marca de aviso">
Si trabajas con los estilos CSS activados:
<img src="atencion.gif"
style="width:28px;
height:25px; float:right;" alt="marca de aviso">
Como ves, en el caso de trabajar con CSS los atributos de ancho, alto y alineación, se agrupan dentro del selector style. Además hay una interpretación desde diferente punto de vista de la alineación: mientras que en el primer caso se considera el punto en el que se encuentra alineada la imagen (align="left") en el segundo se utiliza la idea de flotación, indicando el lugar en el que flotará la imagen (float: left). El resto de elementos de la etiqueta son la identificación de la fuente de imagen, esto es, el nombre del archivo, y el atributo alt que nos indica el texto descriptivo que se mostrará durante el proceso de carga o cuando esté desactivada la visualización de imágenes.
Es muy importante
que figuren los atributos de anchura y altura, porque eso permite al
navegador que reserve un espacio para la imagen y continúe
cargando el resto de la página aunque no haya recibido
completamente la imagen. N|VU calcula automáticamente estas
medidas a partir de las dimensiones de la imagen y las incluye en el
código.
El recordatorio que presenta
N|VU es muy claro en cuanto a la función que
desempeña el texto alternativo. Sin embargo, una mala
práctica tradicional, a la que ha colaborado la
interpretación que hace Internet Explorer del atributo
alt
,
ha confundido su función: Internet Explorer presenta el
texto alternativo como texto emergente que se muestra al colocarse
sobre una imagen, cuando si queremos conseguir ese efecto lo correcto
es utilizar el atributo title
. Los
navegadores que se ajustan a las especificaciones
del W3C sólo
muestran texto emergente cuando se ha
utilizado el atributo title
, reservando el
contenido alt
para la
función que se ha creado.
Para especificar el texto podemos hacerlo de varias formas:
<img>
en la barra de estado y eligiendo . Una vez allí desplegamos los , elegimos title
y escribimos el texto en la caja disponible para especificar el title="Texto
que aparecerá"
desde
la pestaña Abre la actividad34.html
y modifica las imágenes para
que incluyan los atributos alt
y title
.
Si trabajas en Windows es muy conveniente que
compruebes el comportamiento de otros navegadores cuando no
existe la etiqueta title
. Para ello es muy recomendable que instales
Firefox y visualices con este navegadorl el resultado de las
páginas que estás creando.