Trabajando con DIVS

Muy bien, ahora ya llegamos a este punto teniendo en mente como va ser el modelo de nuestra web, y como en toda costrucción, como en una casa, primero se construye las columnas y las paredes asi que eso vamos a hacer nosotros. Haremos los Divs que encerraran a las partes de nuestra página.

Bueno los buenos albañiles saben que toda construcción e realiza de abajo hacia arriba y siempre seguirá ese orden, pero como nosotros no somos albañiles sino webmasters pues lo haremos de arriba hacia abajo y de izquierda a derecha je, bueno vamos por ello.

Primero pondremos el Div donde quedará almazenado nuestro banner, logo, nombre etc, esto es el primer div de la parte superior. Recuerden que tenemos que hacerlo de una manera ordenada para evitar contratiempos futuros, nuestro código tenemos que ponerlo entonces antes de el div cuerpo y obviamente dentro de la etiqueta <body>

Lo que pondremos será este pedazo de código

Y para saber que ese Div le corresponde al banner escribimos la palabra Banner dentro del div, entonces nos quedara:

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

Como ven llamé a este div banner para luego aplicarle estilos a nuestro antojo, en donde? See en nuestra hoja de estilos.

Tenemos el primer div correspondiente al banner ahora vamos por el div del menu izquierdo.

Debajo de todo el último div escrito osea debajo del </div> correspondiente al class banner vamos a poner otro div ahora correspondiente al menú izquierdo, ponemos el siguiente código.

Y ahora escribimos Menu Izquierdo dentro del div para saber a cual div nos referimos, nos quedaría nuestro código asi:

<div class=”menuIzq”>Menu Izquierdo</div>

Igual que en el div anterior le otorgamos el nombre de “menuIzq” para aplicarle luego dentro de nuestra hoja de estilos sus características propias.
Siguiendo de izquierda a derecha ahora nos tocaria el div correspondiente al cuerpo, pero recuerden que ese div ya lo tenemos,es donde practicamos los parrafos, asi que nos pasamos ese div y vamos al próximo que sería el div correspondiente al div del menú derecho.

Nos ubicamos ahora después de TODO el div cuerpo ya que si lo ponemos dentro seria parte de ese div y eso no es lo que queremos, ya que nosotros queremos que sea un div totalmente nuevo e independiente asi que nos aseguramos ubicarnos después del div de cierre del div cuerpo osea del </div>

Bueno escribimos ahora el prox código siempre asigandole un nombre para nuestra hoja de estilos y escribiendo dentro del div también para saber a cual nos referimos, nuestro código quedaria así:

<div class=”menuDer”>Menu Derecho</div>

Y luego de ese código pondremos los divs de las 2 bases una tras otra, supongo que ya se les hara fácil hacerlo ustedes solos cierto?.. se que si pero solo por las moscas el código es:

Bueno ahora ya tenemos nuestros divs que formaran la estructura, pero como mencionamos en el apartado anterior, aun nos quedan por crear 2 Divs mas, los que encerraran al los menus el cuerpo y la base.

Empezaremos primero por el Div al cual llamaremos "contenedor" este div encerrara al menú derecho, izquierdo y el cuerpo. Primero nos ubicamos despues de la etiqueta de cierre del Div banner y escribimos en otra linea el inicio de un nuevo Div al que como dije llamaremos contenedor, el código seria este:

Recordemos que el div contenedor debe encerrar 3 divs que son el menu izquierdo el cuerpo y el menu derecho asi que ahora para poner la etiqueta de cierre debemos ubicarnos al final del último div que vendria a ser el div correspondiente al menu derecho, habiendolo encontrado al final de este ponemos el cierre para nuestro div contenedor, me refiero a </div>

Ahora bien solo nos falta el div que encierra a la base 1 y 2, ah este div lo llamaremos "piepagina" pues ya me imagino que sabran como hacerlo, solo se ubican antes del div de la base 1 y ponen el siguiente codigo:

Luego van al final de la base 2 y colocan el cierre para ese div, el </div>

Muy bien ahora si completamos toda nuestra estructura.. cansados? No verdad ah sido muy sencillo =). Si lo hemos hecho todo correctamente todo nuestro código del index debió quedar así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>

<body>

<div class="banner">Banner</div>
<div class="contenedor">
<div class="menuIzq">Menu Izquierda</div>
<div class="cuerpo">

<p>“Este es el primer texto de nuestra página!!” </p>
<p>Segundo parrafo, pueden poner lo que ustedes quieran </p>
<p>Wow tanto codigo, aprendiendo ahora a cambiar de linea.. <br />
Y wualaaa ya esta! </p>
<br />
<a href="www.axside.com" ><img src="imagenes/objeto1.jpg" alt="texto alternativo" width="127" height="95" border="0" longdesc="Descripcion larga"></a><br />
página creada con ayuda de <a href="www.axside.com" target="_blank">Axside</a></div>
<div class="menuDer">Menu Derecha</div>
</div>
<div class="piepágina">
<div class="base1">Base 1</div>
<div class="base2">Base 2</div>
</div>
</body>
</html>

Ahora si podemos ir a nuestra pestaña diseño y ver los resultados en el navegador dándole F12, pero recuerden que antes tienen que guardar los cambios.

Pero axel eso no parece una página..!! Me estas engañando ¡ devuélveme mi dinero!!

Aer primero no sean graciosos que no me han dado ningún dinero ¬¬ y segundo recuerden que aun no aplicamos las características en nuestra hoja de estilo, cuando lo hagamos y le demos un poco de color verán que si se parecerá ya a una página web, eso lo haremos en el siguiente apartadado, vamos no se me duerman…!!

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