Cómo Crear una Página Web Usando DIV o Capas

Después de ver en el Ejemplo con Tablas cómo estructurar el contenido de una página web utilizando las tablas, vamos a pasar a aprender otra tecnología más actual y que suele ser utilizada por los webmasters más avanzados. Llegados a este punto tú mismo ya lo eres o te queda poco, de modo que es hora de que aprendas los secretos de las capas.

Bueno... y que narices es un DIV?

En castellano las llamamos capas. Es un "algo" normalmente rectangular que puede contener cosas dentro, como textos, enlaces, dibujos, otras capas o una combinación de las anteriores. Varios de estos elementos se suelen englobar dentro de un DIV para otorgarles propiedades comunes. A diferencia de la estructura a través de tablas con las que dividíamos la página en celdas para colocar una cosilla en cada una de ellas (el logotipo arriba a la izquierda, el menú en la izquierda, etc, etc) en este caso lo que hacemos es definir cada una de las celdas (capas) por separado, dándoles las características que deseemos como color o imagen de fondo, tamaño de letra, anchura, altura... y una vez definidas todas las celdas (vamos a llamarlas capas ya de una vez...), una vez definidas todas las capas le asignamos una posición en la página, una por una, hasta conseguir hacer el puzzle, es decir, la web. Al final obtenemos lo mismo que usando las tablas, pero de un modo más profesional. Además, parece ser que los buscadores como Google leen más fácilmente el contenido de las capas o DIVs que el de las celdas de una tabla. Si no sabes por qué nos interesa que lo lean bien ya estás mirando la sección La Promoción de esta web.

Como buen webmaster, vas a usar los estilos CSS para asignar las propiedades de cada una de las capas. Luego en el Html de la página bastará con escribir el contenido y decirle que esa capa es del tipo fulanito. Así, como ya sabes (y si no aprenderás en esta sección o también puedes leerte el Curso de Estilos CSS) si alguna vez quieres cambiar el aspecto de una capa como por ejemplo el color o la anchura, basta con cambiarlo una sola vez en la hoja de estilo y no en cada una de las páginas de tu web. Por otro lado, al separar la definición de todas esas características en la hoja de estilo, dejamos más límpio el código Html en sí, lo cual es bueno para nosotros (podremos encontrar lo que buscamos dentro del código más fácilmente) y para buscadores como Google, que solo tienen que leer lo importante (el color y la anchura no es para nada importante, solo los textos, ya sabes). No te preocupes si no conoces el CSS, lo aprenderás a lo largo de estas lecciones, al igual que todo lo que vamos a ir necesitando. Será fácil, y si surgen problemas ya sabes que en el Foro CCTW lo resolvemos todo (hay una sección para las Capas y otra para CSS).

El material que usaremos será el notepad de windows . Me hubiera gustado seguir utilizando el Dreamweaver 3.0 en español para explicar esto, pero como veo que ya es muy dificil encontrarlo intentaremos hacerlo sin usar otro programa. Si en algún momento necesitamos usar alguno para subir los archivos de ejemplo quizás usemos el NVU o el HtmlKit, que son gratis y están disponibles para todo el mundo. También puede que usemos algún programa de dibujo para crear los contornos de las capas y cosillas fáciles pero vistosas, ya veremos...

En fin, nada más y nada menos. Cuando lo consigas verás que habrás aprendido un montón. No todos los webmasters saben usar las capas, no creas. Estarás al menos por encima de la media .