El pie de página de nuestra web
Ves como poco a poco esto va tomando forma? Ha llegado el momento de meterle mano al pie de página. Vamos a intentar colocarle un hueco a la izquierda y otro a la derecha donde pondremos accesos directos (enlaces) a diversas secciones de la web que conviene que el visitante tenga a la vista en todo momento. Me refiero a enlaces al mapa de la web (importante para el posicionamiento de la página), a una página desde donde puedan contactarnos (muy útil para conocer siempre el punto de vista del visitante), otro enlace hacia una página de enlaces (que usaremos a la hora de darnos de alta en directorios) y también por qué no, unos enlaces al futuro foro, top y directorio de nuestra web (todo eso lo aprenderemos más adelante).
En medio de estos dos espacios dejaremos un hueco con dimensiones idoneas para incorporar en un futuro, o bien otra serie de enlaces amigos, o bien una ventanita donde colocar las últimas noticias o avisos que queramos dejar o, seguramente, para colocar un poco de publicidad que nos ayude a pagar un buen hosting sin necesidad de poner un centavo de nuestro bolsillo. Los hobbies están muy bien, pero si nos salen gratis... mejor que mejor, no? Je je je.
Dónde va el pie de página?
Como bien habrás adivinado el pie de página lo vamos a colocar dentro de la capa #pie (tampoco hay que ser muy adivino...). Este es su código en la plantilla.html en estos momentos:
Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.
Los nombres que les voy a dar son, #pieuno, #piedos y #pietres así que ahora mismo, las escribo en el código de la plantilla.html y coloco una palabrita dentro para ver como van quedando cuando haga vista previa. Ha de quedar así en la plantilla.html (fíjate que borro el texto "Este es el pie de página" que había antes):
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
</div>
Listo, la vista previa se ve así:
Seguimos?
Lección 4:
