Como crear tu web





Cuarta Lección
El pie de página
Capas en línea
Altura de Capas
Aplicar Bordes
Los Enlaces
Retocando Enlaces
Menos Márgenes
Clases de Enlaces
Convertir Enlaces
Enlaces de Capa Pie
Mostrar Acentos



































El pie de página de nuestra web
Ves como poco a poco esto va tomando forma? Ha llegado el momento de meterlemano al pie de página. Vamos a intentar colocarle un hueco a la izquierda y otro a la derecha donde colocaremos 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 elpunto 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, obien 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 acolocar dentro de la capa #pie (tampoco hay que ser muy adivino...). Este es su código en la plantilla.html en estos momentos:
Este es el pié de página
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 estilosy 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 pié de página" que había antes):

pie uno
pie dos
pie tres

Listo, la vista previa se ve así:

Seguimos?
Colocar las capas en línea
Como era deesperar, nos ha pasado como cuando hicimos lo del logotipo. En lugar de aparecer una capa junto a la otra nos han salido una debajo de otra. Recuerdas como arreglamos esto la otra vez? Venga, haz un esfuerzo!! je je. Lo arreglamos colocándole un float:left a cada capa. Así que abrimos la hoja de estilos estilo-general.css y definimos esas tres capas colocándole un color de fondo para ver bien dóndeempieza y dónde termina cada una (te coloco también las líneas de antes y después para que veas donde añadir estas líneas, como verás las he colocado justo después de la capa #pie, por guardar un orden):
............

#pie {border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ; }
#pieuno {background-color: brown ; float:left}#piedos {background-color: green ; float:left}
#pietres {background-color: red ; float:left}
#curva-inferior { background-image: url(objetos/curva-infe.....
...............
Ya se van colocando en su sitio. No te preocupes por los colores, en cuanto tengamos el pie listo le pondremos otros más decentes.

Ahora les daremos dimensiones de anchura colocándoles un width. Le vamos a dar un...