Creando una web, 5ª parte y final

Continuamos con el diseño de la web, esta vez vamos a dar forma a las imágenes de abajo

Recordamos los pasos realizados desde el inicio de la web

1. Colocar imagenes en donde estan los divs de fotografias, dejamos el espacio para ellas
2. Dar estilo al menú
3. Reemplazar texto por imagenes en el encabezado
4. Colocar un background en el pie de pagina
5. Remplazar los cuadros grises por las imágenes

5. Remplazar los cuadros grises por las imágenes

Para facilitar que imagen va en que lugar he llamado a las imagenes de una forma que no se pueden confundir, esto es fotoX_n y fotoX_c, resalto la X porque es una variable que va de 1 a 6, es un criterio para seguir en los nombres de las fotografias y el _n o _c nos indica si lafotografia esta en negro o si es color.

Una vez interpretado esto vemos la estructura html de esos 6 elementos grises que es esta:

<div id="fotos">
 <div id="foto1">Fotografia 1</div>
 <div id="foto2">Fotografia 2</div>
 <div id="foto3">Fotografia 3</div>
 <div id="foto4">Fotografia 4</div>
 <div id="foto5">Fotografia 5</div>
 <div id="foto6">Fotografia 6</div>
</div>

Una vez repasado cual es el codigo ahora lo que haremos sera nuevamente reemplazar texto por imagenes. ¿Cómo lo hacemos? sobre cada div con id fotoX (pongo como x una variable) ponemos la siguientes propiedades de CSS:

div#fotoX{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/fotoX_n) no-repat;
 }

Es decir que tendremos que agregar todos este codigo 6 veces cambiando X por el numero que corresponda, quedaria asi:

div#foto1{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat; }

div#foto2{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto3{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto4{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto5{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto6{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

Resumiendo hasta aquí:
Empezamos la expliación en este punto: 07-creando-web.html
Como paso intermedio tenemos: 08-creando-web.html
Finalmente hemos llegado a: 09-creando-web.html

Para mejorar un poco el resultado final, podemos hacer que las imagenes se pongan en color al pasar el raton por encima: 09-creando-web.html

Nota: en el código CSS para colocar las imágenes, vemos que parece muy largo y que se repite lo mismo 6 veces, mas o menos. Una forma de escribir menos código y conseguir que el fichero de CSS pese menos sería de la siguiente forma:

Hemos puesto este código seis veces, uno por cada imagen, imagina la tortura que será añadir más imágenes:

div#foto1{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

Podemos poner el siguiente código con el cual tendremos el mismo resultado y al añadir mas imágenes no es necesario modificar la hoja de estilos

div#foto div{
overflow: hidden;
display: block;
}

Explicación: con esta css conseguimos que todos los div que esten dentro del div #foto tengan la misma forma y tamaño