Objetivo

Utilizando GIMP y a partir de una fotografa de gran tamao, tomada por una cmara de fotos, vamos a obtener dos fotografas: una miniatura, de un tamao de 100x75 px, y otra grande, aunque menor que la original, para mostrarla en la pgina cuando se pulsa sobre la fotografa. La foto que tomaremos es flor_amarilla_grande.gif, que puedes encontrar en la carpeta de ejercicios.

Ejercicio 1: Reducir la imagen

1. Arranca GIMP. 2. Para abrir la imagen, arrastra la el archivo flor_amarilla_grande.gif desde la ventana del explorador que muestra la carpeta de ejercicios hasta la ventana de GIMP. 3. Pulsa en el men Imagen y selecciona Escalar la imagen... para acceder a la ventana Escalar la imagen que se muestra a continuacin.

4. Vamos a reducirla a la mitad. En el desplegable que aparece junto al tamao de la imagen, selecciona porcentajes en lugar de pixeles. 5. 6. 7. 8. 9. 10. En Anchura, introduce 50. Para aplicar el reescalado, pulsa Escala. Vamos a guardar la imagen. Pulsa en el men Archivo Guardar como.... En Nombre, cambia el nombre a flor_amarilla.jpg. Pulsa Guardar. En la siguiente ventana podramos ajustar otros parmetros. No vamos a entrar en detalles, as que pulsa Guardar.

Ejercicio 2: Crear una miniatura

Hasta ahora, hemos obtenido una imagen igual que la original, pero de la mitad de tamao. An as, la imagen es bastante grande. Ahora, vamos a crear una miniatura de 100x75px. Para ello no slo reduciremos la imagen, si no que la recortamos para que muestre, sobre todo, la flor.

1. Haz clic sobre la herramienta Seleccin de rectngulos

2. Sobre la imagen, traza un cuadrado con lo que quieres que se muestre en la miniatura. Fjate slo en el ancho, y deja el alto ms grande de lo que correspondera. Ya lo ajustaremos al tamao exacto. 3. En el men Imagen, selecciona Recortar a la seleccin. 4. En el men Imagen, selecciona Escalar la imagen.... 5. En el desplegable del tamao, selecciona pxeles. 6. En anchura, introduce 100 y pulsa Escala. 7. Aumenta el zoom. En la barra de estado encontrars un desplegable. Selecciona 100%. 8. Con la herramienta Seleccin de rectngulos , traza un rectngulo ms ancho que la imagen. 9. En el panel Caja de herramientas, a la izquierda, en la parte inferior, encontramos la seccin Tamao, con dos valores. El primero es el ancho de la seleccin y el segundo el alto. Establece el alto a la medida que se nos indicaba, 75 px. El Ancho da igual, siempre que sea mayor de 100 px. 10. Mueve la seleccin arriba o abajo, haciendo clic sobre ella y arrastrando, para que encierre el rea que nos interesa en la miniatura. Asegrate de que est seleccionado todo el ancho. 11. En el men Imagen, selecciona Recortar a la seleccin. 12. Vamos a guardar la imagen. Pulsa en el men Archivo Guardar como.... 13. En Nombre, cambia el nombre a flor_amarilla_mini.jpg. 14. Pulsa Guardar. 15. Vuelve a pulsar Guardar. Aqu tienes algunos ejemplos de cmo puede haber quedado la miniatura:

Ejercicio
1. Abre el bloc de notas. 2. Pulsa Archivo Abrir, y busca el archivo estilo_texto.htm. 3. Para declarar los estilos en la propia pgina, aade, dentro del head, pero despus de </title>, la etiqueta <style type="text/css"> </style>. Todo lo referente a los estilos ir en estas etiquetas. 4. Comenzamos por lo ms genrico. Declara el selector body{}. 5. Ahora, le asgnale una fuente sin serifa ( font-family: Arial, Sans-Serif;) y establece los colores de texto (color: #880000;) y fondo (background-color: #F7F0E2;) de la pgina. 6. 7. 8. 9. } 10. Declara el selector del ttulo (h1 {}). 11. Cntralo (text-align: underline;). 12. 13. 14. } 15. Declara el selector para el encabezado 2 (h2 { }). 16. Cmbiale el color de fondo ( background-color: #EFD1D1;), dale un poco de margen a la izquierda (padding-left: 1em;), y transforma el texto a maysculas pequeas (font-variant: small-caps;). 17. 18. 19. 20. h2 { background-color: #EFD1D1; padding-left: 1em; font-variant: small-caps; h1 { text-align: center; text-decoration: underline; center;) y subryalo (text-decoration: body { font-family: Arial, Sans-Serif; background-color: #F7F0E2; color: #880000;

} 21. Declara el selector para los prrafos (p { }).

22. Separa un poco los prrafos entre s, y un poco ms con los laterales de la pgina ( margin: 1.5em 3em). Para que el lateral derecho no quede dentado, justifica el texto (text-align: justify;). Por ltimo, aumenta el alto de la lnea ( lineheight: 1.5em;). 23. 24. 25. 26. p { margin: 1.5em 3em; text-align: justify; line-height: 1.5em;

} 27. Hay fragmentos de texto con un estilo especial. Utilizaremos un span, as que declara el selector span { }. 28. Al span, dale un fondo blanco (background-color: white;) y un color gris (color: #666666;). Adems, cambia la fuente a monospace (font-family: monospace;) y aumntale un poco el tamao (font-size: 110%;). 29. 30. 31. 32. 33. } 34. Para acabar, encierra los fragmentos de texto a los que hay que aplicar el ltimo estilo entre etiquetas <span></span>. span { font-family: monospace; font-size: 110%; color: #666666; background-color: white;

Ejericicio
1. Abre
con KompoZer (men Archivo Abrir archivo), la pgina estilos_sencillos.html que encontrars en la carpeta de ejercicios. Vamos a aplicarle estilos para que se vea as.

2. En KompoZer, pulsa el botn CaScadeS de la parte superior para acceder al editor CSS. 3. Pulsa en el icono de la paleta (arriba a la izquierda) para definir una nueva regla. 4. Escribe body como nombre de la regla y pulsa en Crear nueva regla de estilo. 5. Pulsa en la pestaa Texto. 6. En Tipo de letra, marca Usar tipo de letra personalizado y escribe Verdana, Arial, sans-serif. 7. En Tamao de la letra, escribe 15px. 8. En Color, introduce #735846. 9. En Alineacin, selecciona Justificado. 10. Ve a la pestaa Fondo, y en Color introduce #3d2e2a. 11. Vuelve a pulsar el icono de la paleta a la izquierda, para definir una nueva regla. 12. Dale el nombre h1 y pulsa crear regla. 13. En la pestaa Texto, asgnale el Color #d38451 y el Tamao de letra 180%. 14. Haz clic en la pestaa Caja. Dale mrgenes Superior de 20px e Izquierdo de 80px. 15. Siguiendo los pasos anteriores, crea una nueva regla con el nombre h2, h3. 16. En la pestaa Texto, establece el Tipo de letra personalizado Georgia, Times, serif, tamao 150% y color #A52A2A. 17. En la pestaa Caja, establece el margen Superior a 0 y el Izquierdo a 30px. 18. Define una nueva regla para el elemento h3, que cambie su Color de texto a #B8860B. 19. Define un nuevo estilo para los prrafos (p). 20. En la pestaa Texto, cambia la altura de lnea a 1.5em. En la pestaa Caja, establece los mrgenes a 35px. 21. Crea una nueva regla para la imagen (img). 22. Desde la pestaa Bordes establece el estilo del borde, con Estilo solid, Anchura 2px y Color #d38451. Solo es necesario que rellenes la primera fila, a no ser que quieras bordes distintos para cada lado. Desde la pestaa Caja dale un margen de 10px. En esa misma pestaa, en el desplegable Flotar selecciona derecha. Esto mostrar al imagen a la derecha de la pgina. Explicaremos esta propiedad ms adelante. 23. Crea una nueva regla para .cuerpo (observa que es la clase que tiene aplicada el div donde est todo el texto. 24. Asgnales un margen de 0 en la parte superior, y de 20px al resto. Adems dale el Color de Fondo #f5e4cc. 25. Crea una ltima regla para la clase .azul. 26. En la pestaa Texto, en Peso de la fuente elige Negrita, y en Color #6C6CCA.