Capas y Divs

Ahora si acá veremos con mas detalle que cosa son las dichosas capas también llamadas Div, seguramete ya se han hecho una idea de para que sirven estas etiquetas verda?, pues sirven exactamente para lo que hemos hecho hasta ahora, tomar un pedazo de página encerrarla en un div y darle atributos y características especificas independientemente del resto de la página.

También se usan los divs para colocar divisiones dentro de la página, por ejemplo supongamos que nuestro amigo websito quiere separar su web en la siguiente manera:

Un espacio para su banner con el nombre de Websito’s web,
una columna a la izquierda donde ponga el menú y enlaces.

Supongamos que sus amigos phpsito, htmloncio y aspcita le piden un intercambio de enlaces, ahora websito decido ponerlo en una columna a la derecha y hacer el contenido en el medio de ambas columnas.

Todo esto lo podemos separar con divs, un div para el banner un div cada columna un div para el contenido… Con esto estamos en la posibilidad de darles diferentes atributos a cada uno de los divs para que se comporten de la manera que mejor nos parezca. Ahora bien, todos los atributos y características que le daremos a cada Div lo haremos desde nuestra hoja de estilos, no se me asusten van a ver que les será muy fácil, veamos…

Tenemos que tener ahora bien en claro que es lo que vamos a hacer, la web que haremos será muy parecida a la de Axside así que deberá tener una estructura parecida a esta imagen:

Bueno… amm pos quizá no se vea muy bonita ahora pero mas o menos ese será la estructura de la página, no se me asusten que asi exactamente no va quedar jeje.

Como ven tenemos 6 secciones:

Banner
Menu Lateral 1
Menu Lateral 2
Contenido
Base 1
Base 2

Por lo que les dije líneas atrás se habrán podido dar cuenta de que cada una de las secciones amerita un DIV, lo que quiere decir que tendremos nuestra página formada por 6 divs principales a los cuales se les asignara características, comportamientos o propiedades diferentes, y eso como lo hacemos? BINGO! Desde la hoja de estilos.

Tenemos que tener presente también que un div puede contener muchos divs adicionales, esto se usa para que los Divs no esten sueltos sino esten dentro de un div madre para que podamos moverlos uniformemente y en conjunto si queremos y otras cosas que mediante vayamos avanzando se daran cuenta... Asi que para nuestro uso aparte de esos 6 Divs tendremos 2 Divs mas, El primero contendra el Menu Lateral 1, Menu lateral 2 y el Contenido y el otro contendra a la Base 1 y 2, muy bien eso lo haremos en el siguiente apartado no se me emocionen.

Primero vamos a revisar lo que tenemos hasta aca, el código de nuestro index debe estar en estos momentos asi:

<!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="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>
</body>
</html>

Y en nuestra hoja estilos.css deberíamos tener esto:

.cuerpo {
text-align:center;
font-family:Tahoma, Verdana, "Trebuchet MS";
font-size:14px;
color:#003399;
}

Bien una vez comprobado que todo nos esta saliendo a la perfección pasemos a la siguiente sección donde haremos la estructura de la página.. vamos..

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