Barra de navegación HTML

  • Por
  • 05 de marzo de 2004
  • Valoración:
  • 3 Comentarios
  • Taller HTML
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:

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

oskar

30/11/2005
este articulo me esta dando problemas con i.e. no así con el firefox, ¿es error del ie o mio?

RESPUESTA

Será un error tuyo, porque el ejemplo en funcionamiento, que se puede ver con un enlace del propio artículo, se visualiza correctamente en los dos navegadores.

hackans

11/11/2006
Estos artículos sobre tablas con esquinas redondeadas y barras de navegación me están ayudando muchísimo en mis proyectos, que sin recurrir a flash ni a "altas tecnologias", le están dando una apariencia fabulosa.

Está bien lo que hacéis de los micropagos para descargarse utilidades, aunque creo excesivo que las imágenes gif de ejemplo para hacer las tablas redondeadas sean de pago; tan solo son 3 o 4 imágenes de no más de 6x6 píxeles la mitad de ellos transparentes. Creo que por pequeñas cosas así no deberían ser de pago, sino que son un complemento imprescindible para practicar uno mismo con lo que cuenta el artículo. Es decir, las imágenes de ejemplo son parte básica del mismo artículo.

Por lo demás, muy bien todo. Un saludo.

rodrigo

04/12/2008
la verdad que me complicaste todo, no saves explicar una mierda. Hacelo mas simple, esto alguien lo ve y lo pasa asi nomas porque no se entiende un sorete, es una cagada no sirve para nada.

Compartir