Ya tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones esta capa contendrá la cabecera, que segurametne conste del logotipo de la web y de un hueco para, por ejemplo, algo de publicidad para sufragar los gastos de un posible dominio propio y quién sabe, de un hosting de pago... no es algo descabellado, no te creas.
Pero con esa capa sola no tenemos ni para empezar, je je. Vamos a crear una segunda capa que contendrá una barra de navegación. La llamaremos, navegacion (sin acentos, y todo en minúsculas, claro).
Una de las cosas más importantes en una página web es el dar facilidades al visitante para que pueda navegar por nuestras páginas sin perderse y que lo tenga todo siempre a mano. No es bueno tener páginas escondidas, es decir, páginas a las que para acceder haya que ir primero a la sección tal, luego a la subsección cual, luego entrar en otro lado y finalmente conseguir acceder a una página en concreto. Todas las páginas deberían ser accesibles sin más que pulsar un par de enlaces desde el index o página principal.
La barra de navegación nos ayuda a esto. En esta barra que aparecerá en todas las páginas de la web pondremos enlaces a las secciones que tratemos. Así, en cualquier momento el visitante puede ir de un lado a otro sin perderse.
Esto es son varios ejemplos de barras de navegación:
Como ves, dan acceso a varias secciones y pueden ser muy sencillas o más complicadas o llamativas con lengüetas y todo eso. Pues ahora que sabes lo que son, vamos a crear la capa de nuestra barra de navegación.
La llamaremos "navegacion" y solo va a existir una por página, luego se trata de un estilo único y se define por tanto así en la Hoja de estilo:
Escribimos eso en la Hoja de Estilo. Después abrimos la plantilla.html y escribimos, a continuación del div cabecera, esta otra línea:
Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de color de fondo gris (gray). Más adelante le pondremos más cosas, pero ahora seguimos creando el resto de capas.
Ya que estamos, vamos a crear dos capas más. La primera se llamará contenido y en ella pondremos luego un menú lateral y los textos de nuestra web, la parte principal. También vamos a crear otra capa para la parte más baja de la web que llamaremos pie en la que más tarde tendremos algunos enlaces, un mensaje de copyright y puede que otro espacio para publicidad, ya veremos.
Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la Hoja de Estilo:
Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos líneas después de la de la capa navegacion:
Tras guardar todo, en la Hoja de Estilo tendrás esto:
En la plantilla.html esto otro:
Y aquí tienes el resultado del ejemplo. Se que no parece una página web, pero no me dirás que no está tomando forma, no? Verás como esto empieza a cambiar en breve..