Crear una Web:Imagenes

Ahora que hemos visto algo acerca de las imagenes en a web, debes estar preguntandote¿Como hago para insertarlas y demás? No te impacientes.De eso vamos a hablar ahora.

Insertar Imagenes
Insertar imagenes en nuestra web, se parece mucho a insertar una tabla.En este caso, tambien tenemos varias opciones:
1.-Nos dirigimos a la barra de botones y pulsamos sobre el boton imagen(facil de reconocer, es una imagen)
2.-Nos dirigimos a la barra de menus, escogemos Insertar->Imagen.

Con ambos metodos podemos ver que sale un cuadro de dialogo llamado Popiedades de la imagen con 4 pestañas:Ubicacion, Dimensiones, Apariencia y Enlace.

1.-Ubicacion:Esta pestaña nos pide esta informacion:
 a)URL de la Imagen: Este cuadro de texto está destinado a escribir la ruta completa de la imagen usando una URL absoluta, si la imagen está fuera de nuestro ordenador (por ejemplo : http://www.sitio.es/images/cuadro.gif), o una URL relativa si la imagen está ubicada en alguna carpeta de nuestro ordenador. En este caso utilizaremos el botón "elegir archivo" para localizar la imagen en nuestro equipo. Este botón nos llevará a un explorador de archivos, seleccionamos la imagen deseada y pulsamos Abrir. No debemos olvidar marcar la casilla La URL es relativa a la ruta de la página, de esta forma la url de la imagen se mantendrá válida cuando subamos la página a un servidor.
b) En el apartado Título emergente escribiremos un texto relativo a nuestra imagen. Este título aparecerá también en el navegador cuando el cursor pase por encima de la imagen. Esta imagen responde al ejemplo del cuadro expuesto más arriba, al pasar el cursor por ella veremos el texto "El desierto". Si por cualquier circunstancia la imagen no se mostrara en el navegador veríamos en su lugar un cuadro vacío con el texto "Imagen del texto".

c) Texto alternativo se utiliza para dar información mientras se carga la imagen, o como texto de aviso si la imagen no se llega a mostrar (navegadores solo texto). Este texto alternativo está habilitado por defecto, por lo que si no introducimos nada en él, el editor nos mostrará el mensaje de alerta que tenemos a la derecha. Para anularlo marcamos la casilla "No usar texto alternativo".

Por último en la parte inferior de este panel tenemos una vista preliminar de la imagen antes de ser insertada en la página.

2.-Dimensiones nos da 2 opciones:
 -Tamaño Real  si está activada la imagen será mostrada en el navegador con el mismo tamaño con el que se grabó el original.
-Tamaño Personalizado, permite redimensionar la imagen. Si la opción Mantener aspecto está habilitada, al introducir uno de los valores (anchura o altura) el otro se ajustará automáticamente para mantener la misma proporción que en la imagen original.

3.-Apariencia sirve para crear un espacio o marge alrededor de la imagen, colocarle un marco, alinearla...

Si en el apartado "Espacios" introducimos los valores que figuran en la figura de la derecha(ir a  Creatuweb), la imagen mostraría un margen superior e inferior de 8 píxeles, otro a derecha e izquierda de 10 pixeles y un borde de 1 píxel de grueso.
El apartado "Alineación" nos permite elegir como estaría el texto en relación con la imagen, presentando una lista desplegable con cinco opciones.

Arriba->El texto se alinea con la parte superior de la imagen
Centro->El texto queda en el centro de la imagen
Abajo->el texto queda alineado en la parte inferior de la imagen
Fluir por la Derecha->Con esta opción todo el texto que rodea a la imagen se distribuye a la derecha de la misma, hasta sobrepasar su altura, en cuyo caso irá ocupando la totalidad de los renglones situados bajo la misma.
Fluir por la Izquierda->Con esta opción todo el texto que rodea a la imagen se coloca a la izquierda de la misma, hasta sobrepasar su altura, en cuyo caso irá ocupando la totalidad de los renglones situados bajo la misma.

4.-Enlace nos permite convertir nuestra imagen en un hiperenlace que se dirige a una URL.
Ahora podemos elegir el archivo desde los que tenemos en nuestro sistema pulsando el botón Elegir Archivo . En este caso se debe marcar la casilla .
Si la dirección está fuera de nuestro servidor pues debemos escribir la URL completa.



Por último si marcamos la opción obtendremos un antiestéico borde alrededor de la imagen de enlace, como puedes observar en este ejemplo:

Imagen enlace con borde	Imagen enlace sin borde