IMGENES WEB FIREWORKS

1. Imgenes 2. Introduccin Para trabajar con imgenes para Web debemos considerar el peso y la definicin. Es importante tomar en cuenta que las medidas a utilizar son pxeles, ya que es la unidad de los monitores. No podemos traspasar de centmetros a pxeles ya que depender de la resolucin del monitor y esto vara dependiendo de la configuracin de cada usuario. Habitualmente se utilizan un ancho de 960 pxeles para el diseo de una pgina Web pero no es una regla. Las imgenes deben usarse del tamao que necesitamos en la pgina Web. No se recomienda usar imgenes grandes para luego ajustar el tamao ya que estas quedan pesadas. Siempre se recomienda procesar primero las imgenes antes de subirlas a nuestro sitio. Podemos utilizar un editor de imgenes como Photoshop, Fireworks o el que sea de su conveniencia. 3. Formatos de imagen: Gif Gif:- Este formato trabaja con una mximo de 256 colores. Es recomendable usar gif cuando tenemos una imagen con colores slidos como textos y logotipos o ilustraciones sin degradados. 4. Abrimos esta imagen con FireworksLuego vamos a Archivo / Presentacin preliminar de la exportacinSe abre la siguiente ventana: 5. En formato seleccionamos gif como formato y vemos el peso que va a tener el documento con una resolucin de 128 colores.Si nuestra imagen tiene solamente 3 colores, 128 es mucho, as que selecciono 8 colores y as mi imagen ser mas liviana y mantendr una buena calidad.Como regla, si una imagen tiene 2 colores seleccionar 4 en la exportacin. Si tiene 5 colocar 16. Siempre la opcin superior que sea el doble o ms del doble. Esto permite tener una imagen liviana y clara en los archivos gif. 6. En la opcin Archivo podemos cambiar el tamao de nuestra imagen segn nuestra necesidadPara mantener la proporcin tanto en ancho como en alto debe estar seleccionado el cuadro de Restringir.Una vez que estemos de acuerdo con el peso del documento, el tamao y su resolucin, podemos proceder a exportar. Dentro de nuestro sitio creamos una carpeta de nombre imgenes (no utilizar tildes) y guardamos el documento con un nombre corto, claro y sin tildes ni espacios. En nuestro ejemplo podemos llamarlo logo.gif 7. En DreamweaverEn Dreamweaver, en la ventana Files, donde tenemos configurado nuestro sitio se ver as: 8. Formatos de imagen: JpgLas imgenes jpg son muy tiles para trabajar con fotografas o imgenes con degradados. Trabaja muy bien con sombras y cambios de tonalidad. 9. Esta imagen debemos seleccionar jpg y la calidad podemos disminuirla hasta 60 y no notaremos que se psela, manteniendo un buen peso y calidad.En la pestaa archivo se ha seleccionado un tamao de 250 pixeles de ancho.Posteriormente exportamos y guardamos en la carpeta imagenes de nuestro sitio. 10. Insertar una imagenPara insertar una imagen, abrimos nuestro documento index.html y arrastramos la imagen desde la ventana Files sobre el rea de diseo de nuestro documento. 11. Aparecer la siguiente ventana:Donde dice Alternate text debemos poner un texto que describa la foto, por ejemplo; Cielo. Este texto es importante al momento de validar nuestro html en la pgina w3.org. 12. Etiqueta imgUna vez insertada la imagen podemos ver que el cdigo es el siguiente:<imgsrc="imagenes/cielo.jpg" alt="Cielo" width="250" height="188" /> La etiqueta <img /> es una etiqueta vaca ya que solamente tiene una parte. Abre y sierra al mismo tiempo. Fjense como mantiene el cerrado luego de sus parmetros. Los parmetros de una imagen principalmente son cuatro:src= es la instruccin que llama a la imagen. Si tenemos configurado el sitio llamar desde el directorio raiz donde se encuentra el archivo HTML. Entre comillas se escribe la ruta. En nuestro ejemplo entra en la carpeta imgenes y encuentra nuestro documento: imgenes/cielo.jpg alt= es el texto alternativo. Si por alguna razn la ruta del llamado a la imagen se encuentra roto y no se muetra la imagen correctamente,

aparecer el texto que describe a la imagen. width="" y height="" determina el ancho y la altura en pixeles. 13. ConclusinDreamweaver, as como otros editores HTML coloca colores a las etiquetas y sus parmetros para una mejor lectura. En nuestro ejemplo las etiquetas y los parmetros son violetas, las comillas y su contenido es azul El formato PNG es ahora muy comn en el diseo de sitios Web, pero al ser de un peso superior y sus usos son diversos, veremos este tema cuando trabajemos con CSS.