Los formatos de gráficos más comunes y admitidos de manera más frecuente en la Web son GIG (Graphic Interchange Formt o Formato de intercambio de gráficos) y JPG(Joint Photographic Experts Group o Grupo conjunto de expertos fotográficos). Cuando tengamos que decidir entre guardar un gráfico como GIF o como JPG, busquemos la máxima calidad de imágen y el tamaño de archivo más pequeño.
Como regla general, es recomendable que utilicemos GIF si el trabajo presenta grandes zonas de colores uniformes sin mezclar. GIF funciona bien con texto, gráficos geométricos, imágenes con un número limitado de colores y dimensiones de imágen muy pequeñas. Las imágenes GIF pueden guardarse, como máximo, utilizando un modode color de 8-bits, en el que sólo pueden representarse 256 colores. Los archivos GIF tienden a cargarse más rápido, tienen más opciones de optimización y admiten transparencia y animación.
Para imágenes fotográficas o imágenes con un mayor gama de tonalidades, es remomendable que utilice JPEG. El formato JPEG gestiona muy bién al combinación de colores y es capaz de producir imágenes fotográficas de calidad muy superior. JPG guarda la imagen en modo de 24-bits, mintiendo todos los colores y utilizando un sistema de compresión donde se pierden todos los datos que sobran. Cuando menor sea la calidad de un JPG, más información de la imagen se pierde mediante este proceso de eliminación de datos.
Establecer gráfico de fondo en la página
Un gráfico de fondo es un pequeño gráfico que se repite ocupando el ancho y el alto de la ventana del navegador.
Ejemplo: Cree una nueva página llamada fondo.html con las siguientes propiedades:(titulo: Fondo),(color de fondo: #CCCC99). Previsualice la página. Ahora añada una imagen de fondo desde las Propiedades de la página. Seleccione la imágen que usted desee que aparezca. Vuelva a previsualizar la página.
Insertar gráficos en una página
Podemos insertar una imagen en Dreamweaver desde cuatro lugares distintos:
- Desde la barra de menús / Insertar / Imágen.
- Desde el botón "Insertar Imagen" del menú Común del panel de objetos.
- Desde el panel de Archivos arrastrando la imaáen a la ventana del documento.
- Desde el panel de Activos arrastrando la imágen a la ventana del documento.
- imagen1.jpg
- imagen2.jpg
- imagen3.jpg
- imagen4.jpg
Ejercicio: Cree una página nueva con la misma imagen de fondo que en el ejemplo anterior (o cópiela con otro nombre) e inserte las siguientes cuatro imágenes (cada una desde un lugar distinto):
Trate que quede lo más parecido a esto:
Modificar las propiedades de las imágenes
Para modificar las propiedades de una imágen debemos seleccionarla de la ventana del documento e ir al inspector de propiedades.
Podemos modificar el tamaño de la imágen, el ancho (An) y el alto (AL). Si solo introducimos uno de estos dos parámentros la imagen se autoajustará para mantener las proporciones. Si introducimos los dos parámetros la imágen puede deformarse. Para volver al tamaño original debemos hacer clic sobre el botón "Restaurar tamaño", situado a la derecha de los campos de texto An y Al.
Podemos agregar bordes a una imagen desde el campo de texto Borde del inspector de propiedades. Podemos definir la etiqueta alt de cada imagen. El contenido de esta etiqueta será el texto que visualizará el usuario mientras la imagen se descarga, o en caso de que haya error y la imagen no pueda cargarse.
Ejercicio:
Modifique la s propiedades de las imágenes del ejercicio anterior.
- Haga el doble de grande la foto del anagrama de Internet Explorer del ejercicio anterior(340, 532).¿Haría falta introducir los dos parámetros?.
- Aplique un borde de 1 a la foto del anagrama Innternet Explorer y un borde de 3 a la del Mozilla Firefox y a Linux.
- Escriba un alt adecuado para cada uno.
- Renombre la ruta de la foto de Mozilla Firefox por un nombre que no exista.
- Visite la página.
Gestionar gráficos utilizando el panel Activos
Es posible trabajar con el panel Activos de dos maneras: Verlo con la lista Sitio, que le da un listado completo dde las imágenes del sitio; o verlo con la lista Favoritos, que muestra sólo las imágenes que seleccionó cmo favoritas. Ambas vistas le permiten añadir imágenes. E aquí la imágen del menú Activos.
Ejercicio:Añada la imagen bluvenus.jpg a Favoritos, vaya a Favoritos, y añada la imagen debajo de las tres imágenes del ejercicio anterior.