Creando una web, 2ª parte

Continuo con la web que habia empezado en el post anterior. El objetivo del artículo es crear una web desde cero hasta conseguir una web como la que vemos arriba

Quedan por ver los siguentes puntos:

Colocar imagenes en donde estan los divs de fotografias, dejamos el espacio para ellas

Continuamos con la parte de las fotos de abajo, las incluidas en el pie. Buscamos realizar la siguiente composición de las fotografías

La estructura que tienen las fotografias que estan en el pie de pagina es la siguiente (creamos un div que llamo «fotos» que conteniene todas las fotografías, y por cada foto creo otro div que los llamo foto1, foto2, foto3, foto4, foto5 y foto6):

<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>

Copia este código en tu programa de diseño web, por ejemplo Dreamweaver, en el codigo fuente y tendrás esta pantalla:

Para que cada div se ponga uno al lado del otro le colocaremos la propiedad Float: left; (alineamos los div todos a la izquierda) y ademas como las imagenes tendran un tamaño de 100px de ancho por 69px de alto, esos seran los valores del las propiedades width y height. Por otra parte estaran separados por un margen de 10px superior, 9px a la derecha, 15px inferior y 9px a la izquiera, por lo que la propiedad margin para cada elemento sera:

margin: 10px 9px 15px 9px;

Otra forma de presentar este mismo código para el margen es la siguiente:

margin-top: 10px;
margin-right: 9px;
margin-bottom: 15px;
margin-left: 9px;

Y además, como queremos que se muestren 2 filas por 3 columnas el contenedor con id=”fotos” tendra un width que supere los 100*3 + (9+9)*3 px esto es 100 de cada width asignado a cada elemento y 9 por cada margen izquierdo de cada y elemento y 9 por cada margen derecho de cada elemento. En total puede tener un ancho aproximado de 360px (Ya se que el numero anterior sale 354px, mejor que sobre espacio). Por lo que id=”fotos” quedaria con un width: 370px; Damos un tamaño mayor para no tener problemas, de esta forma no se solapan div y siempre es mejor que sobre un poco.

Con todo esto la hoja de etilos queda así:


body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;}
#cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
#encabezado{ height: 32px; margin-bottom: 40px; width: 693px;}
/*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/

#contenido{ width: 500px; float: left; margin-bottom: 70px;}
#contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
#contenido h2 span{ color: #a7a7a7; } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/
#contenido p{font-size: 13px;}

#menu{ width: 180px; float: left; text-transform: uppercase}

#fotos {width: 370px;}
#fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver; }
/*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/

#pie{ clear: both; height: 296px;}
#pie h2{ font-size: 18px; color: #464545; font-weight: normal }
#pie h2 span{ color: #a7a7a7; }
#pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}

Resumiendo hasta aquí:
Antes de esta explicación tenemos: 04-creando-web.html
Después de la explicación tenemos: 05-creando-web.html
Hemos dejado un espacio en gris donde irán las fotos colocadas, al final del ejercicio vermos como se colocan las imágenes. Dejamos para mas adelante ya que resultará mas facil de comprender el resultado.