Cabecera y pie de una página web

Desarrollando el esquema de este sitio: el marco total

En los temas anteriores presentamos varias clases o tipos de estructuras en función de los marcos y de la forma en que se les dota de dimensiones. La selección para este sitio web será usar una página con marcos CSS no fijados y un dimensionamiento elástico. El esquema HTML de partida es el siguiente:

PARA EL TOTAL DE LA PÁGINA:    
<div id="total">
    PARA LA CABECERA:    
    <div id="cabeza">...</div>
    PARA LA BOTONERA:     
    <div id="botonera">...</div>
    PARA LAS "MIGAS":     
    <div id="migas">...</div>    
    PARA EL LATERAL IZQUIERDO:     
    <div id="lateral-izdo">...</div>
    PARA EL LATERAL DERECHO:     
    <div id="lateral-dcho">...</div>
    PARA EL CONTENIDO: 
    <div id="contenido">...</div>
    PARA EL PIE: 
    <div id="pie">...</div>
</div>

Antes de hablar de la cabecera y el pie de página, hemos de comentar que conviene encerrar todo lo que va dentro de la página, es decir, todo el contenido del elemento <body> dentro de un elemento <div> identificado con id="total". Aparte de la necesidad del marco total para poder implementar el dimensionamiento elástico, contener todo dentro del bloque general id="total" es muy útil para ciertas automatizaciones como la de cambiar el tamaño de la fuente de todo el texto de la página.

Todos los navegadores actualmente ya tienen posibilidad de hacer ZOOM para ampliar o reducir la página además de poder seleccionar un tamaño de fuente a gusto del usuario, por lo que no se hasta que punto esta función es necesaria. En todo caso queda patente que es conveniente identificar con id todos los marcos de nuestra página pues podemos necesitarlo para otros aspectos. Por ejemplo, podríamos tener un editor web y así el usuario insertaría directamente el HTML en el marco de contenido mediante el uso de algún script.

De todas formas hemos puesto esta función en nuestro sitio:

function cambiarFuente() {
    var boton = document.getElementById("boton-aaa");
    var total = document.getElementById("total")
    var fs = total.style.fontSize;
    if (fs == "0.75em") {
        total.style.fontSize = "1em";
        boton.title = "Zoom 125%";
    } else if (fs == "1em") {
        total.style.fontSize = "1.25em";
        boton.title = "Zoom 150%";
    } else if (fs == "1.25em") {
        total.style.fontSize = "1.5em";
        boton.title = "Zoom 75%";
    } else {
        total.style.fontSize = "0.75em";
        boton.title = "Zoom 100%"; 
    }
}

boton AAA A su vez en el marco botonera, en la parte derecha de la misma, disponemos de un enlace con las letras "AAA" que llama a esta función:

<a href="javascript: cambiarFuente();" id="boton-aaa" title="Zoom 125%"
class="boton"><small><small>A</small></small><small>A</small>A</a>

Todo el estilo que afecta a la cabecera y pie está puesto en un archivo llamado "cabeza-pie.css" y separado de los otros marcos. Esto se hace por la razón que comentamos en el tema primero sobre los archivos css. El estilo para el cuerpo de página y el marco total es el siguiente:

body { 
    font-family: Palatino Linotype;
    font-size: 1em;
    }
div#total {
    font-size: 1em;
    min-width: 40em;
    }

Para el dimensionamiento elástico de la página es necesario declarar para <body> la familia de fuentes y el tamaño inicial que vamos a usar por defecto en nuestro sitio, lo que nos servirá para aplicar luego dimensiones relativas en em's. Luego vemos el estilo para <div id="total"> donde volvemos a repetir el tamaño de la fuente. Esto, que no es necesario para hacer una página elástica, es debido a la necesidad de usar la función anterior cambiarFuente(). Sucede que en esa función hemos de saber cuál es el valor del font-size que actualmente se está usando para luego cambiarlo. Pero sólo es posible hacerlo con total.style.fontSize si esa propiedad fue declarada explícitamente en una declaración de estilo, pues no la obtenemos a partir de la heredada de <body>. Podría hacerse en Internet Explorer con total.currentStyle.fontSize, pero en Firefox se usa otra cosa (getComputedStyle). Además para que funcione correctamente también hay que declarar estilo local, pues en otro caso no se obtiene un acceso al font-size la primera vez que se pulsa el botón:

<div id="total" style="font-size: 1em"> 

Para terminar con el estilo del marco total comentamos que se establece el ancho mínimo con min-width: 40em, lo que puede equipararse con unos 650 píxeles en un monitor estándar. Estos detalles los puede encontrar en el tema anterior sobre las páginas elásticas.

La cabecera y el pie de página

Vemos todo lo relativo a la cabecera y pie de una página. El esquema de partida lo reproducimos a continuación señalando estos marcos:

CABEZA
BOTONERA
MIGAS


LATERAL
IZQUIERDO

   CONTENIDO   

LATERAL
DERECHO

PIE

La cabecera será el lugar donde ubiquemos nuestro logotipo y el nombre del sitio. El estilo que le queramos dar a la cabecera dependerá del objetivo final de la página. En muchos casos suele incluirse una gran imagen en el fondo de la misma, pero hay que vigilar el tamaño para que no retrase la carga de la página. En el pie suelen incluirse los créditos, legislación aplicable, validaciones, etc. Los elementos HTML que interviene en la cabecera y pie son:

<div id="total" style="font-size: 1em;">
    CABECERA
    <div id="cabeza">
        <img src="..." class="cabimg" alt="..." />
        <span class="titulo">...</span>
    </div>
    BOTONERA
    ...
    MIGAS
    ...
    LATERAL IZQUIERDO
    ...
    LATERAL DERECHO
    ...
    CONTENIDO
    ...
    PIE
    <div id="pie">
        ...
    </div>
</div>

Hemos de recordar que los marcos no tienen limitación al extenderse verticalmente. Así si el título de la página lo ponemos en ese <span> hemos de vigilar que si la longitud del texto supera el min-width establecido para el marco total, entonces esa línea de texto del título se saltará. El estilo CSS para estos marcos es el siguiente:

div#cabeza {
    margin-left: 0.2em; 
    margin-right: 0.2em; 
    padding-left: 0.5em;     
    background-color: rgb(49, 99, 98);
    }
div#cabeza span.titulo {
    color: orange;
    font-size: 2.5em;
    vertical-align: middle;    
    }
div#cabeza img.cabimg {
    vertical-align: middle;
    }
div#pie {
    margin-top: 0.5em; 
    margin-left: 0.2em; 
    margin-right: 0.2em;
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
    padding-left: 0.5em; 
    padding-right: 0.5em;
    background-color: rgb(200, 225, 225); 
    border-bottom:  rgb(49, 99, 98) solid 0.2em;
    font-family: 'Arial Narrow';     
    height: 2em;
    }

Como decíamos en la exposición de páginas elásticas, no es necesario especificar el ancho de los marcos cabeza y pie. Los dotamos de márgenes izquierdo y derecho, usando siempre un mismo valor (0.2em), de tal forma que alineamos todos los marcos a ambos lados. También usamos ese valor para los rellenos (padding) declarándolos donde creamos conveniente. Al pie le hemos limitado la altura, pero sería una cuestión de gusto.

Se observa que todas las medidas son relativas em's, con lo que logramos el efecto de página elástica, incluso para el grosor de bordes. Lo único que hemos de cuidar es no cambiar el tamaño de la fuente de los propios marcos, pues el redimensionamiento se verá afectado. Por ejemplo, los margin y padding del marco de cabecera están declarados en em relativos al tamaño de la fuente de ese marco <div id="cabeza">. Si cambiamos ese tamaño entonces esos márgenes y rellenos se verán también afectados.

Si necesitamos otro tamaño distinto, sólo tenemos que ubicar en el interior del marco cualquier elemento sobre el cual le cambiamos el tamaño de la misma, por ejemplo, un span que es un elemento en línea (como hicimos para el título de la página con un tamaño de 2.5em), o un div que es un elemento en bloque, ambos elementos de HTML que no tienen ningún formato predefinido. Por ejemplo, en el pie hemos cambiado la familia de fuentes que venía heredada del <body> de Palatino Linotype a otra fuente Arial Narrow porqué es más estrecha y caben más caracteres en el mismo espacio horizontal. Pero eso no cambiará el tamaño de la fuente que sigue siendo de 1em.