7. Composer: Imágenes

Tamaño: px

Comenzar la demostración a partir de la página:

Download "7. Composer: Imágenes"

Manuela Carrizo Lozano
hace 8 años
Vistas:

1 7. Composer: Imágenes Para insertar una imagen en Composer podemos pulsar sobre el botón imagen de la barra de herramientas o bien a través de la barra de menú en Insertar- imagen. Cuando hemos insertado una imagen y queremos modificar sus características, la forma más fácil de hacerlo es pulsar con el ratón dos veces sobre la imagen. El cuadro de diálogo para insertar o modificar las características de una imagen tiene cuatro pestañas: 7.1. Ubicación Esta pestaña la utilizamos fundamentalmente para introducir la URL de la imagen: Página 46

Cuando hemos insertado una imagen y queremos modificar sus características, la forma más fácil de hacerlo es pulsar con el ratón dos

2 SI LA IMAGEN ESTÁ PUBLICADA EN INTERNET Podemos referenciarla de una forma u otra en función de si es una imagen que está fuera del web de la UA, fuera de nuestro sitio pero dentro del web de la UA o bien está dentro del sitio del que somos administradores. 1. Si la imagen esta fuera del web de la UA, capturamos la dirección dónde está la imagen y la pegamos en el apartado URL de la imagen. Por ejemplo la siguiente dirección. 2. Posteriormente pulsamos el botón Aceptar. Página 47

3 Si la imagen esta fuera de nuestro sitio pero dentro del web de la UA, en principio es igual que antes, capturamos la dirección dónde está imagen y la pegamos en el apartado URL de la imagen. Por ejemplo, vamos a poner en nuestra página el logotipo de la UA. Como se trata de una imagen que está en el web de la UA, aunque fuera del sitio del que somos administradores (suponemos que somos los administradores del web del Servicio de Prevención cuya dirección es: lo que debemos hacer es quitar el prefijo de la dirección de la imagen ( tal y como está explicado en el apartado 2 de enlaces y nos queda: Página 48

Como se trata de una imagen que está en el web de la UA, aunque fuera del sitio del que somos administradores (suponemos que somos los administradores del web del Servicio

4 3. Si la imagen esta dentro del sitio del que somos administradores, la forma más sencilla de enlazar esa imagen es irnos al Publiweb, copiar la URL de la imagen en el portapapeles y posteriormente pegarla en el apartado URL de la imagen. Para hacer un ejemplo, igual que antes, suponemos que somos los administradores de la web del Servicio de Prevención, cuya dirección es: y queremos insertar una imagen en nuestra página web. Para insertarla nos vamos al publiweb, entramos en el directorio donde están las imágenes y pulsamos con el botón derecho del ratón sobre la imagen que queremos insertar en nuestra página web. En este caso hemos pulsado con el botón derecho sobre la imagen calendari.gif. Al pulsar, nos aparece un menú contextual que nos permite seleccionar la opción Copiar la ruta del enlace. Esta función nos copia en el portapapeles la dirección de esa imagen. Posteriormente nos vamos al Composer donde tenemos editada nuestra página web, situamos el cursor en la posición donde queremos insertar la imagen, pulsamos en el botón imagen de la barra de herramientas y en el apartado URL de la imagen dentro de la pestaña Ubicación pegamos (Barra de menús editar - pegar) lo que tenemos en el portapapeles. Al pegar nos queda: Página 49

prevencion/index.html y queremos insertar una imagen en nuestra página web.

5 Como se trata de un enlace a una imagen que está dentro del sitio del que somos administradores lo que tenemos que hacer es marcar la casilla La URL es relativa a al ruta de la página. Al marcarla Composer convierte la dirección en relativa y nos queda: Si por cualquier circunstancia la casilla La URL es relativa a la ruta de la página estuviera deshabilitada, la solución para habilitarla es salir de las Propiedades de la imagen y posteriormente volver a entrar, entonces ya aparecerá habilitada (ver apartado 6.3 de enlaces). Además, para que nuestras páginas webs sean lo más accesibles posibles por personas con algún tipo de disminución visual es aconsejable poner un texto alternativo. Página 50

Al marcarla Composer convierte la dirección en relativa y nos queda: Si por cualquier circunstancia la casilla La URL es relativa a la ruta de la página estuviera

6 4. SI LA IMAGEN ESTÁ ALMACENADA EN NUESTRO DISCO DURO Cuando queramos introducir una imagen de nuestro disco duro en una página web, primero la debemos publicar con el Publiweb y luego la enlazamos yéndonos al Publiweb tal y como hemos visto en el apartado anterior. El resto de opciones que tiene la pestaña UBICACIÓN son: El texto alternativo aunque no obligatorio, puesto que podemos activar la opción No usar texto alternativo, es aconsejable ponerlo para describir una imagen y para facilitar el acceso a las personas con algún tipo de disminución visual. Aparecerá cuando por cualquier circunstancia no se muestre la imagen. En el consejo pondremos un título para informar sobre la imagen. Debe aparecer cuando pongamos el ratón sobre la imagen. Tanto el texto alternativo como el consejo no funcionan de la misma manera en todos los navegadores (comparar Explorer, Netscape y Mozilla). La edición avanzada permite introducir atributos, estilos y eventos adicionales a la etiqueta imagen. Página 51

El resto de opciones que tiene la pestaña UBICACIÓN son: El texto alternativo aunque no obligatorio, puesto que podemos activar la opción No usar texto alternativo, es aconsejable ponerlo para

7 7.2. Dimensiones En esta ventana introduciremos el tamaño de la imagen. Por defecto, aparece marcado el Tamaño real de la imagen, que es el que debe mantenerse por defecto, siempre. La opción tamaño personalizado nos permite reducir o aumentar el tamaño de una imagen, manteniendo o no sus proporciones, dependiendo de si está marcada o no, la pestaña Mantener aspecto. No es aconsejable el cambio del tamaño de una imagen desde Mozilla. Los cambios de tamaño, SIEMPRE deben hacerse desde un programa de retoque fotográfico. Hay dos razones principalmente. Para aumentar las dimensiones de una imagen, Mozilla incrementa el tamaño de los puntos que componen dicha imagen. El resultado es una imagen distorsionada. No obstante, los programas de retoque fotográfico trabajan de la misma forma, por tanto, siempre debemos partir de una imagen fuente lo suficientemente grande para que nunca la tengamos que ampliar. Para reducir las dimensiones de una imagen, Mozilla reduce el tamaño de los puntos que componen la imagen, sin embargo, no realiza el suavizado que incorporan los programas de retoque fotográfico y el resultado no es el más óptimo. Además, estamos obligando a los usuarios a descargarse imágenes de un tamaño superior al que luego verán en su navegador. Es más óptimo reducir la imagen en nuestro programa de retoque fotográfico y colocar esa imagen optimizada en nuestra página web, de esta forma el usuario descargará una imagen del tamaño que verá en su navegador. Página 52

No es aconsejable el cambio del tamaño de una imagen desde Mozilla. Los cambios de tamaño, SIEMPRE deben hacerse desde un programa de retoque fotográfico. Hay dos razones principalmente.

8 7.3. Apariencia Composer: Imágenes En esta carpeta configuramos el espacio en blanco alrededor de la imagen y el tamaño de su borde. Además podemos indicar como fluye el texto entorno a la imagen. Si la imagen tuviera definido un mapa (imagen sensible por diferentes zonas) esta ventana nos ofrece la posibilidad de eliminarlo. Por último, incorpora la Edición avanzada... que nos permite lo mismo que en apartados anteriores. Página 53

Si la imagen tuviera definido un mapa (imagen sensible por diferentes zonas) esta ventana nos ofrece la

9 7.4. Enlace En el caso de que la imagen funcione como enlace, es en esta pestaña donde debemos introducirlo teniendo en cuenta todas las consideraciones hechas en el apartado de enlaces. NOTA El botón Edición avanzada... que aparece en todas las pestañas de la ventana Propiedades de la imagen nos permite añadir atributos, estilos o eventos adicionales a los que tiene definidos por defecto Mozilla, para una imagen. Página 54

Documentos relacionados

9. Composer: Bugs y consejos.

9. Composer: Bugs y consejos. Composer: bugs y consejos 9.1. Sobre la barra de herramientas de formato Elegir color para remarcar texto En la actualidad existe un lenguaje complementario a las etiquetas