Ayuda ejercicios unidad 9: Imágenes

Solución al ejercicio

Panorámica de fondo:

Utiliza la imagen panoramica.jpg que encontrarás que encontrarás en la carpeta ejercicios/parquenatural.jpg. Podrás ver que la imagen ha de ser modificada, ya que por un lado la imagen tiene un tamaño de 850x170 px, y el borde difuminado. Así que lo primero será lograr esto:

Abre GIMP.
Ve al menú Archivo → Abrir, y elige la imagen.
Utilizando la herramienta Selección de rectángulos, selecciona todo el alto de la imagen, y sólo el ancho que te interese (excluyendo a la persona de la derecha).
Una vez seleccionado, ve al menú Imagen → Recortar a la selección, para quedarte sólo con el ancho seleccionado.
Ahora, redimensiona la imagen, desde el menú Imagen → Escalar la imagen.... Dale una anchura de 850px y pulsa Escalar.
Con la herramienta Selección de rectángulos, selecciona un rectángulo que abarque todo el ancho de la imagen, y 170px de alto, encerrando la zona que quieres conservar (puedes ver el tamaño de la selección en la barra de estado).
Una vez seleccionado, ve al menú Imagen → Recortar a la selección, para quedarte sólo con el alto seleccionado.
Para acabar, ve al menú Filtros → Decorativo → Difuminar borde.
En el cuadro de diálogo, ajusta las opciones si lo necesitas, aunque las que hay por defecto seguramente estén bien. Pulsa Aceptar.
Se abrirá la una nueva ventana con la imagen modificada. Guárdala con el nombre panoramica.jpg en la carpeta imagenes del sitio parquenatural.

Esta imagen la pondremos como fondo del encabezado, dejando un margen interior superior suficiente para que quepa la imagen. Modifica el estilo del selector h1 de la siguiente manera:

h1 { 
  text-align: center;
  color: #5F8F11;
  letter-spacing: .2em;
  background-image: url(imagenes/panoramica.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 170px;
  margin: 0;
  }

Ocurre que la fotografía que usamos no es nuestra, la hemos cogido de aquí. Está sujeta a la licencia CreativeCommons, que nos dice que podemos usarla siempre que reconozcamos al autor, y la distribuyamos bajo la misma licencia. La mejor forma de hacerlo, es con un enlace a la página del autor y al tipo de licencia, que pondremos al pie de nuestra página. Añade a las páginas (a todas, porque usarán la imagen), debajo del div.contenido, el siguiente código:
```
<div class="autores"> 
  La imagen del t&iacute;tulo pertenece <a href="http://www.flickr.com/photos/amagill/2740376079/">AMagill</a>
   y se distribuye bajo licencia <a href="http://creativecommons.org/licenses/by/2.0/deed.es">CreativeCommons</a>.
</div>
```

Y añade a la hoja de estilos el estilo para esa clase:

div.autores {
    color: #BFBFBF;
    font-size: 85%;
    text-align: center;
    font-style: oblique;
 }
 div.autores a {
    color: #BFBFBF;
 }

Estilo de las cajas. Todo esto lo haremos con Inkscape.

Hemos de lograr que el body tenga las esquinas redondeadas, y el contenido muestre un degradado al principio y al final.

Crea la imagen para las cuatro esquinas del body. Para hacerlo, sigue los mismos pasos que los vistos en la teoría y el videotutorial para crear las esquinas redondeadas con borde naranja del sitio_flores de la teoría. De hecho, si has guardado el documento svg en el que creaste esas esquinas, puedes utilizarlo y sólo tendrás que cambiar el color. Hemos llamado a los gráficos resultantes body_lt.png , body_rt.png , body_lb.png y body_rb.png .
Como vimos en la teoría, vamos a utilizar dos divisiones pa raponer las esquinas como fondo. Añade dos divisiones al principio del body, y dos al final como se ve en el siguiente código:
```
<body> 
  <div class="red_arriba"> <div></div> </div>
...
  <div class="red_abajo"> <div></div> </div> 
</body> 
```

A continuación, añade los siguientes estilos: Observa que ponemos las imágenes como fondo, y utilizamos el posicionamiento relativo para que queden por encima del borde:

div.red_arriba, div.red_arriba div, div.red_abajo, div.red_abajo div {
  height: 10px;
  background-repeat: no-repeat;
  position: relative;
}
div.red_arriba {
  background-image: url(imagenes/body_lt.png);
  background-position: left top;
  left: -1px;
  top: -1px;
}
div.red_arriba div {
  background-image: url(imagenes/body_rt.png);
  background-position: right top;
  right: -2px;
}
div.red_abajo {
  background-image: url(imagenes/body_lb.png);
  background-position: left bottom;
  left: -1px;
}

También hemos de hacer que el div.contenido muestre un degradado al principio y al final. El primer paso será crear el degradado con Inkscape:

Abre un nuevo documento de Inkscape.
Con la herramienta Rectángulo, crea un rectángulo de 40px de alto y 20px de ancho. Puedes cambiar el tamaño después de crearlo desde la barra de herramientas.
Cambia su relleno por un degradado, pulsando en Relleno en la barra inferior y luego en Gradiente lineal en el panel que se abre.
Pulsa en Editar... para cambiar sus colores. La primera parada ha de ser gris (color e6e6e6ff). La segunda, puede ser blanca o totalmente transparente.
Haz clic sobre la herramienta Crear y editar gradientes (la penúltima).
Modifica la dirección para que la zona gris quede arriba. Te será más fácil si lo haces con la tecla Ctrl pulsada.
Cuando lo tengas, con el rectángulo seleccionado, ve al menú Archivo → Exportar mapa de bits.
Guárdala llamándola contenido_top.png en la carpeta imagenes del sitio parquenatural.
Duplica el rectángulo (Edición → Duplicar) y sepáralo un poco del original.
Con la herramienta Crear y editar gradientes modifica la dirección para que la zona gris quede abajo.
Exporta la imagen al sitio llamándola contenido_bottom.png.
Ahora tenemos que poner la imagen de fondo. Cómo en el div..contenido sólo podemos poner una, vamos a crear otro div dentro de esté. Ahora el texto de la página estará dentro de este segundo div. Cambia la estructura de la página para que quede:
```
...
<ul id="menu"> 
  ...
</ul>
<div class="contenido">
<div class="contenido_abajo">
...
</div>  
</div>  
<div class="autores">
... 
```

Ahora, daremos los estilos necesarios para que muestren las imágenes de fondo:

div.contenido {
  border: #d3d3d3 1px solid;
  margin: 20px 20px 10px 140px; 
  background-image: url(imagenes/contenido_top.png);
  background-repeat: repeat-x;
  }
div.contenido_abajo {
  background-image: url(imagenes/contenido_bottom.png);
  background-repeat: repeat-x;
  background-position: bottom left;
  padding: 10px 15px;
}

Observa que hemos cambiado el padding del div.contenido al div.contenido_abajo.

Estilo del menú.

Ya sólo nos queda crear las imágenes que usamos de fondo para los elementos del menú, también con Inkscape:

Siguiendo los pasos anteriores, crea un rectángulo de 30px de alto (el alto de los elementos del menú) y 20px de ancho.
Rellénalo con un degradado lineal, donde la primera parada sea de color 9ed01bff y la otra totalmente transparente (ffffff00). Cambia la dirección para que la parte coloreada quede abajo.
Expórtalo como un mapa de bits llamándolo menu_activa.png.
Crea otro rectángulo como el anterior, pero cambiando el color de la primera parada por bf823b99.
Expórtalo como un mapa de bits llamándolo menu_normal.png.

Para acabar, modificamos los estilos para que muestren la imagen en vez del color de fondo. Observa que para el estilo :hover sólo cambiamos el color de fondo, que se verá a través de la transparencia.

#menu li {
  border: #d3d3d3 1px solid;
  background-color: #fff;
  margin-bottom: 5px;
  font-size: 90%;
  text-align: center;
  line-height: 30px;
  background-image: url(imagenes/menu_normal.png);
  background-repeat: repeat-x;
  background-position: bottom left;
}
#menu a { 
  display: block; 
  text-decoration: none; 
  color: #4F4F4F;
}
#menu li:hover {
  border-color: #9F9F9F;
  background-color: #E5CDB2;
}
#menu li:hover a {
  color: #000;
}
#menu li.activa, #menu li.activa:hover {
  border: #d3d3d3 1px solid; 
  background-color: #fff;
  background-image: url(imagenes/menu_activa.png);  
}
 #menu li.activa a, #menu li.activa:hover a{
    color: #000;
 }

Guarda todos los cambios.

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies