Header & Footer

Lo primero explicare como es la estructura de la pagina. Tenemos un Header y un Footer, para que todas las paginas tenga el mismo aspecto utilizando includes en cada una de ellas. El header constara de un array con todas las pestanas que tendra la pagina. El footer constara unicamente de una linea con mi nombre.
Para que se muestren el header y el footer hay que llamarlos asi desde cada pagina:

<?
include('includes/header.php')

Aqui ira el contenido de la pagina…

include('includes/footer.php')
?>

Por suspuesto, necesitaremos una pagina que sera header.php y otra footer.php, que contendran lo que se repetira en todas las paginas. La estructura en pestañas hace muy comoda la navegacion, siempre que se muestre una pestaña como “activa”. Para mostrar en el menu de pestañas de arriba este efecto utlizamos este codigo PHP, que significa: Si la pagina en la que estas coincide con la que te devuelve el servidor, aplica (esto en html): class=”active”.

<? foreach ($nav as $link => $title) { /*rollover del menu de arriba*/ ?>
	<li <? if (false !== strpos($_SERVER['PHP_SELF'], $link)){?>class="active"<? }?>><a href="<?=$link?>"><?=$title?></a></li>

<? } ?>

Despues con CSS estipularemos lo que hara este class=”active”

Tambien resulta indespensable, para hacer una navegacion intuitiva y agradable, utilizar el efecto conocido como “rollover” (cuando pasas el raton por encima de una pestaña, esta cambia de color). Por medio de este codigo css:


#navigation li a:hover {
	background: transparent url(../images/nav-bg-roll.gif) repeat-x bottom left;
}

De manera que cuando pasemos por encima el raton, la imagen de fondo cambiara a esta otra.