Antes de empezar hay que saber algo importante: DHTML (dinamic HTML), es la combinación de CSS y JS (JavaScript no confundir con Java) para lograr mostrar contenidos dinámicos, aunque en este artículo solo vamos a indicar el funcionamiento del CSS.
Volvamos al tema, para el diseño web es muy importante conocer el elemento DIV. Es la parte básica de toda Web que utilice CSS, se usa para designar los módulos de una Web. Vamos a hacer un ejemplo para aclararlo:
<div id=”cabecera”>cabecera</div>
<div id=”centro”>centro</div>
<div id=”derecha”>derecha</div>
<div id=”izquierda”>izquierda</div>
<div id=”pie”>pie</div>
Cada una de estas partes indica la posición en que se encuentran en la Web, pero por si solas no funciona hay que indicarlo con CSS.
Aquí te muestro una imagen para indicar el ejemplo al que me estoy refiriendo:
Este seria un sistema básico podéis descargar el ejemplo css.
De esta manera tenemos las estructuras básicas de una Web para poner sus respectivos módulos, tales como: botón buscar, nube de palabras, banners o lo que queramos poner. Todos estos modulos los pondríamos dentro de un div y a su vez dentro del div que nos interese: centro, pie, derecha, izquierda o cabecera, y utilizaríamos float para posicionar el elemento indicando el tamaño y su posición con margin y padding.
El ejemplo que os he dado es uno muy básico, pero si queréis uno mas avanzado no tenéis mas que mirar el código fuente de alguna Web, solo que a veces es difícil de interpretar, recomiendo una utilizad mas que interesante para ver el código fuente y ubicar los diferentes elementos de una Web: firebug del navegador firefox, es muy muy recomendable que la utilicéis, ya que seleccionáis con el ratón un elemento del HTML e se ilumina que parte de la Web es exactamente, esta es una de sus muchas funciones.
Aquí tenéis una muestra:
Firebug
La última cosa que me falta por explicar es el uso de id y class en CSS. Es muy sencillo.
Si usamos id=”pepe”, en el CSS #pepe -> se refiere a todas las ids que se llamen así, de modo que afectaría a cualquier elemento HTML que tenga esta id.
Si usamos class en el css haríamos div.pepe.
En ambos también podemos indicar sus sub (o sub, sub, sub…) elementos si nos interesa:
div.pepe span
#pepe span img
Me hubiera gustado poder ver el ejemplo para descargar, pero dice que no se encuentra disponible =(
Ya esta arreglado, había algunos problemillas con los enlaces