Todos los pasos para conseguir implementar una barra de navegación cuyos enlaces tienen un estilo similar a una solapa.
Vamos a tratar de explicar el proceso de creación de una barra de navegación sencilla pero muy versátil que podríamos incluir en una página web. El trabajo es sencillo, si se dominan las tablas del HTML, que como muchos sabrán, son el principal elemento que tenemos a nuestra disposición para maquetar una web, aparte de las capas.
El resultado que pretendemos conseguir se puede ver en una página aparte.
Referencias: En nuestro manual de HTML tenemos toda la teoría y un poco de la práctica necesaria para dominar las tablas. En nuestro taller de HTML tenemos unas interesantes prácticas con tablas que pueden orientarnos también.
Las imágenes
Vamos a utilizar tres imágenes muy simples. Una es el lateral izquierdo de las cajas de los enlaces, otra el lateral derecho, y un píxel transparente. Las podemos descargar en un archivo comprimido .zip.
Con las imágenes laterales vamos a hacer el efecto de caja con el borde con esquinas suavizadas. Una se utilizará en la parte de la derecha y otra en la izquierda. Con el píxel transparente utilizaremos algún truco de maquetación muy habitual en HTML, que consiste en colocar la imagen para crear un espacio de un tamaño definido por nosotros.
Las imágenes utilizan la transparencia del GIF para poder crear barras de navegación a las que podemos aplicarles distintos colores, fácilmente editables si utilizamos una hoja de estilos.
La tabla con el enlace
Vamos a dividir el problema en varias partes para que sea más fácil de entender cada una de ellas y el efecto global. Ahora vamos a ver cómo hacer una solapa. Al reunir varias solapas crearemos la barra de navegación.
Las solapas se crean con este código HTML:
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opción</td>
</tr>
</table>
Lo que da como resultado este efecto:
Como detalles del código anterior podemos señalar que se utiliza una clase para definir el estilo de la solapa. Las clases son una posibilidad de las hojas de estilos. Una clase no es más que un estilo definido, que podemos aplicar a diversos elementos del HTML. Se definen con un código como este en la cabecera del documento HTML:
<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>
Así estamos definiendo que los elementos de esa clase tengan tamaño de letra 10, fuente verdana, o en su defecto, arial, y fondo de color anaranjado.
Otra cosa sobre la que queremos llamar la atención es el uso del píxel transparente. El que se utiliza en primer lugar está para crear la línea del borde de arriba de la solapa, aunque el color negro se lo da el atributo bgcolor="000000" que tiene la celda. El otro píxel se coloca para hacer que el espacio donde se colocan las letras sea lo suficientemente alto.
Por último, decir que la tabla no tiene borde y los atributos cellspacing y cellpadding están a cero, para que no haya márgenes ni espacios entre las celdas. Una prueba que podemos hacer para entender la forma de esta tabla es colocar el borde=1, con lo que veremos la forma de la tabla más fácilmente. Luego volvemos a colocar el borde=0 porque los bordes quedan muy feos.
Colocar varias solapas juntas
Luego, para crear el efecto de barra de navegación, vamos a crear una tabla donde colocaremos los distintos códigos HTML de las solapas. Esta tabla es mucho más sencilla. Simplemente tiene un espacio para cada solapa y una celda en la parte de abajo con la línea sobre la que aparecen las solapas.
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td COLSPAN=3 bgcolor=000000><img src="images/puntonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>
Esta tabla nos daría espacio para colocar tres solapas... dependiendo del número de opciones vamos a colocar más o menos celdas en la primera fila. Posteriormente deberemos colocar el código de cada solapa dentro de cada celda. Con ello estará realizada nuestra barra.
Un ejemplo de código completo se puede ver a continuación:
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td> </td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opción xxx</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Otra Opción</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Lo que desees</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Última opción</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td COLSPAN=6 bgcolor=000000><img src="images/puntonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>
El ejemplo conseguido puede verse en la barra de arriba que aparece en esta página de ejemplo.
El resultado que pretendemos conseguir se puede ver en una página aparte.
Referencias: En nuestro manual de HTML tenemos toda la teoría y un poco de la práctica necesaria para dominar las tablas. En nuestro taller de HTML tenemos unas interesantes prácticas con tablas que pueden orientarnos también.
Las imágenes
Vamos a utilizar tres imágenes muy simples. Una es el lateral izquierdo de las cajas de los enlaces, otra el lateral derecho, y un píxel transparente. Las podemos descargar en un archivo comprimido .zip.
Con las imágenes laterales vamos a hacer el efecto de caja con el borde con esquinas suavizadas. Una se utilizará en la parte de la derecha y otra en la izquierda. Con el píxel transparente utilizaremos algún truco de maquetación muy habitual en HTML, que consiste en colocar la imagen para crear un espacio de un tamaño definido por nosotros.
Las imágenes utilizan la transparencia del GIF para poder crear barras de navegación a las que podemos aplicarles distintos colores, fácilmente editables si utilizamos una hoja de estilos.
La tabla con el enlace
Vamos a dividir el problema en varias partes para que sea más fácil de entender cada una de ellas y el efecto global. Ahora vamos a ver cómo hacer una solapa. Al reunir varias solapas crearemos la barra de navegación.
Las solapas se crean con este código HTML:
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opción</td>
</tr>
</table>
Lo que da como resultado este efecto:
 |
 |
 |
|
|
Opción | ||
Como detalles del código anterior podemos señalar que se utiliza una clase para definir el estilo de la solapa. Las clases son una posibilidad de las hojas de estilos. Una clase no es más que un estilo definido, que podemos aplicar a diversos elementos del HTML. Se definen con un código como este en la cabecera del documento HTML:
<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>
Así estamos definiendo que los elementos de esa clase tengan tamaño de letra 10, fuente verdana, o en su defecto, arial, y fondo de color anaranjado.
Otra cosa sobre la que queremos llamar la atención es el uso del píxel transparente. El que se utiliza en primer lugar está para crear la línea del borde de arriba de la solapa, aunque el color negro se lo da el atributo bgcolor="000000" que tiene la celda. El otro píxel se coloca para hacer que el espacio donde se colocan las letras sea lo suficientemente alto.
Por último, decir que la tabla no tiene borde y los atributos cellspacing y cellpadding están a cero, para que no haya márgenes ni espacios entre las celdas. Una prueba que podemos hacer para entender la forma de esta tabla es colocar el borde=1, con lo que veremos la forma de la tabla más fácilmente. Luego volvemos a colocar el borde=0 porque los bordes quedan muy feos.
Colocar varias solapas juntas
Luego, para crear el efecto de barra de navegación, vamos a crear una tabla donde colocaremos los distintos códigos HTML de las solapas. Esta tabla es mucho más sencilla. Simplemente tiene un espacio para cada solapa y una celda en la parte de abajo con la línea sobre la que aparecen las solapas.
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td COLSPAN=3 bgcolor=000000><img src="images/puntonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>
Esta tabla nos daría espacio para colocar tres solapas... dependiendo del número de opciones vamos a colocar más o menos celdas en la primera fila. Posteriormente deberemos colocar el código de cada solapa dentro de cada celda. Con ello estará realizada nuestra barra.
Un ejemplo de código completo se puede ver a continuación:
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td> </td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opción xxx</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Otra Opción</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Lo que desees</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/izq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Última opción</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td COLSPAN=6 bgcolor=000000><img src="images/puntonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>
El ejemplo conseguido puede verse en la barra de arriba que aparece en esta página de ejemplo.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...