La cabecera de la página web de ejemplo
La cabecera es una parte idéntica a todas las páginas de la web y en ocasiones nos dá por modificarla. Bien para cambiar el logotipo, ponerle unas curvitas en las esquinas, variar el fondo o quién sabe, para añadirle un bonito banner de publicidad y sacar un dinerillo para pagar el hosting... pero eso es otra historia para la que aún falta un poco. Entendemos que nuestra cabecera está formada por la parte superior de la web hasta el menú horizontal, incluido este, oki? Aunque aún se podría dividir en la parte con fondo blanco y el menú horizontal con fondo gris.
Ese menú con fondo gris también será común a todas las páginas de la web y desde él se podrá acceder a las distintas secciones en las que dividamos los contenidos. Por ejemplo, para la página de un grupo de música estas secciones podrían ser Portada, Historia, Discografía, etc, etc. En breve trabajaremos sobre ese menú horizontal.
La cabecera, incluido el menú horizontal es por tanto todo esto:
El código de la cabecera, tal cuál está ahora en el ejemplo que llevamos hecho es este:
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
Como ves, he añadido dos líneas para encerrar a este cacho de código. Esto es para que si alguna vez le metemos mano a la página, recordemos que lo que hay dentro es común a todas las páginas de la web, y por tanto no debemos tocar nada de su interior a menos que sea siguiendo las instrucciones que os cuento en breve.
No te preocupes por esas líneas de comentario, te las explico ahora después.
Lección 5:
