logotipo

Voy 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 maquetear una web, aparte de las capas.

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.

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:

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:

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.

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:

VALORAR UNA WEB 

PROTEGER CODIGO FUENTE DE UNA WEB 

DESHABILITAR BARRA DE IMAGENES DE INTERNET EXPLORER 

BARRAS DE NAVEGACION HTML

FRAMES SIN BORDES

GESTION DE MAPAS