Formando la Estructura

Ahora le daremos la parte mágica a los divs ya creados, vamos a asignarle propiedades individuales a cada uno para que se comporten de diferente manera y tomen la forma de la página a la que queremos llegar.

Primero abrimos nuestra hoja de estilos, recuerden desde la paleta de archivos de la derecha dándole doble click, una vez abierto nos ubicamos después del corchete de cierre del class .cuerpo

Muy bien empezaremos ahora por nuestro primer div, el banner. Recuerden que le asignamos el nombre banner al primer div dentro de nuestra página index mediante este código.

<div class=”banner”></div>.

Ahora bien en nuestra hoja de estilos escribimos lo siguiente

.banner {
}

Como vemos para llamar desde la hoja de estilos a una clase en especifico de nuestra página html se sigue un orden, primero se pone un punto (.) luego el nombre de la clase en este caso “banner” y luego los corchetes {}, todas las propiedades de esa clase banner iran dentro de los corchetes, ahora escribimos este pedazo de código dentro de los corchetes

margin:auto;
width: 770px;
height: 130px;

Margin es el margen que el div dejara desde el borde de la pantalla hasta su inicio en este caso hemos puesto auto para que el navegador lo alinie automáticamente dependiendo de el tamaño de pantalla donde lo estemos viendo, solo les dejare esta explicación, ya que en la siguiente lección habrá un apartado únicamente para hablar de los márgenes ok?.

Bueno ahora suponiendo que ustedes colegas no sean bilingües como yo..tampoco lo soy jeje les paso a explicar que significa width y height según nuestro amigo google o también llamado "mataburro", Widht es la anchura y Height es altura, lo que quiere decir que 770px y 130 se refieren a la anchura y altura del div respectivamente y el px se refiere a pixeles.

OjO amigos que las medidas yo no las pongo al azar, estas medidas harán que tu web se vea bien en una pantalla de 800 x 600 como en una de 1024 x 768 que son creo las mas usadas en los monitores, asi que no cambiemos las medidas.

Ahora daremos las propiedades al menú izquierdo ya saben como llamarlo asi que te recomiendo fuertemente que lo escribas manualmente, no te sirvas tanto del copy paste para que te vayas acostumbrando a los códigos, yo lo pondre defrente para ahorrar tiempo. Bien el código seria este:

.menuIzq {
width: 170px;
float: left;
}

Widht :170px nos indica que el div tendrá una ancho de 170px, no hemos pusto height, ya que la altura dependerá que pongamos en nuestro menú, el Float nos indica donde estará flotando o donde estará ubicado el div, hemos puesto left para indicarle que se ubique en la izquierda.
Ojo como ven después de cada instrucción estamos poniendo un punto y coma (;) esto es obligatorio cuando tienes mas de 1 instrucción entre los corchetes.

Muy bien ahora nos toca el cuerpo asi que colocamos lo siguiente debajo del menú izquierdo:

.cuerpo {
width: 420px;
float:left;
}

Como ven no hay nada nuevo, el widh que nos indica un ancho de 420 pixeles y el float que nos indica que el div flotara a la izquierda(left).

Ahora pasamos rápidamente al menú derecho, colocamos esto:

.menuDer {
width: 160;
float: right;
}

En este estilo nos menciona el ancho de 160 del div pero ahora nos dice que el div ira flotanto a la derecha float:right, esto es para que los divs queden en su correcta posición.

Ahora le daremos propiedades a el Div contenedor que como recuerdan es el div que encierra al menú izquierdo y derecho y al cuerpo. El código de estilos para este div es:

.contenedor {
width: 760px;
margin: auto;
}

El ancho(width) es de 760 lo que alcanza para encerrar a los divs antes mencionados y nuevamente aparece el maginn:auto que como dije mas arriba le da al navegador la decisión de escoger el margen según mejor convenga.

Y por último le vamos a dar estilos al div llamado pie de página, el código es este:

.piepágina{
width: 100%;
float: left;
}

Ahora el ancho nos presenta de otra forma ya no con pixeles sino con porcentaje de 100%, que quiere decir esto? Pues que el div ocupe el 100% de la pantalla, ya veremos mas adelante el porque de este porcentaje, y pues nuevamente nuestro amigo float que hara flotar al div a la izquierda(left).

Muy bien si aun siguen vivos y consientes les habrá quedado toda su hoja de estilo asi:

.cuerpo {
text-align:center;
font-family:Tahoma, Verdana, "Trebuchet MS";
font-size:14px;
color:#003399;
}
.banner {
width: 770px;
height: 130;
}
.menuIzq {
width: 170px;
float: left;
}
.cuerpo {
width: 420;
float:left;
}
.menuDer {
width: 160;
float: right;
}
.piepágina{
width: 100%;
float: left;
}
.contenedor {
width: 760px;
margin: auto;
}

Ahora guardamos los cambios de nuestra hoja de estilos y nos vamos a nuestro index.. OHHHHHHH ahora si parece mas una página verda jeje, denle a F12 y comprueben como queda en su navegador, no crean que la página queda ahii ehh esto es solo la primera parte es solo la estructura, ahora si iremos por lo estético en la siguiente lección.

<<<<< Anterior Siguiente >>>>>