Más capas, más capas
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).
Qué es una barra de navegación?
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.
Creando la capa navegacion
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.
Creando las capas contenido y pie
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:
#pie {background-color:brown;}
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:
Y el resultado es...
Tras guardar todo, en la Hoja de Estilo tendrás esto:
#navegacion {background-color:gray;}
#contenido {background-color:orange;}
#pie {background-color: brown;}
En la plantilla.html esto otro:
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</body>
</html>
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..
Lección 2:
