En este taller de HTML vamos a desarrollar una barra de navegación de una manera muy sencilla, en la que utilizaremos una imagen para dar un pequeño efecto para hacer uno de los bordes de la tabla oblicuo.
En este taller de HTML vamos a desarrollar una barra de navegación de una manera muy sencilla, en la que utilizaremos una imagen para dar un pequeño efecto para hacer uno de los bordes de la tabla oblicuo. El efecto buscado se puede ver en una página aparte.
La imagen
Se utiliza una imagen para presentar una parte de la celda donde se colocan los enlaces con un lado oblicuo. La imagen tiene una parte transparente y otra parte con el fondo blanco, que tiene que ser el mismo fondo de la página. Colocaremos la imagen sobre una celda del mismo color de la barra. Entonces, la parte blanca creará el sector oblicuo y la parte transparente dejará ver parte de la celda, con el color que tenga la barra creada. Color que se puede variar fácilmente con estilos o con el atributo bgcolor de las celdas.
La imagen se puede descargar en un archivo comprimido, que viene junto con el ejemplo maquetado en HTML.
La tabla
El truco para hacer la barra se basa en intercalar las celdas con los enlaces y las celdas con la imagen. Se creará una tabla con una sola fila y con tantas columnas como sean necesarias para localizar las opciones. En realidad, como se supondrá, se crearán el doble de celdas que de opciones. Para cada opción, colocaremos primero una celda con la imagen y luego otra con el enlace.
El código será algo como esto:
<table border=0 cellpadding="0" cellspacing="0">
<tr>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcion </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcion 2 </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Más opciones </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Lo que sea </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Más cosas </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Sección enésima </td>
</tr>
</table>
Detalles sobre los que fijarse:
Se ha utilizado una clase de estilos CSS para definir el formato de las celdas. En la clase se define un estilo, que incluye el color de fondo, tamaño de letra, tipografía, etc.
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.
También cabe destacar que para que el ejemplo funcione correctamente es necesario colocar los atributos de la tabla para que no haya bordes ni márgenes, con border=0, cellspacing=0 y cellpadding=0. Por ello, para crear un pequeño margen antes del enlace, se utilizan caracteres especiales , que sirven para colocar espacios en blanco.
El ejemplo en funcionamiento 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. |
La imagen
Se utiliza una imagen para presentar una parte de la celda donde se colocan los enlaces con un lado oblicuo. La imagen tiene una parte transparente y otra parte con el fondo blanco, que tiene que ser el mismo fondo de la página. Colocaremos la imagen sobre una celda del mismo color de la barra. Entonces, la parte blanca creará el sector oblicuo y la parte transparente dejará ver parte de la celda, con el color que tenga la barra creada. Color que se puede variar fácilmente con estilos o con el atributo bgcolor de las celdas.
La imagen se puede descargar en un archivo comprimido, que viene junto con el ejemplo maquetado en HTML.
La tabla
El truco para hacer la barra se basa en intercalar las celdas con los enlaces y las celdas con la imagen. Se creará una tabla con una sola fila y con tantas columnas como sean necesarias para localizar las opciones. En realidad, como se supondrá, se crearán el doble de celdas que de opciones. Para cada opción, colocaremos primero una celda con la imagen y luego otra con el enlace.
El código será algo como esto:
<table border=0 cellpadding="0" cellspacing="0">
<tr>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcion </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcion 2 </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Más opciones </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Lo que sea </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Más cosas </td>
<td class=op><img src="images/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Sección enésima </td>
</tr>
</table>
Detalles sobre los que fijarse:
Se ha utilizado una clase de estilos CSS para definir el formato de las celdas. En la clase se define un estilo, que incluye el color de fondo, tamaño de letra, tipografía, etc.
|
Nota: 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.
También cabe destacar que para que el ejemplo funcione correctamente es necesario colocar los atributos de la tabla para que no haya bordes ni márgenes, con border=0, cellspacing=0 y cellpadding=0. Por ello, para crear un pequeño margen antes del enlace, se utilizan caracteres especiales , que sirven para colocar espacios en blanco.
El ejemplo en funcionamiento se puede ver en una página aparte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...