Vamos tratar de explicar o processo de criação uma barra de navegação simples, mas muito versátil que poderíamos incluir em uma página web. O trabalho é simples, se se dominam as tabelas do HTML, que como muitos saberão, são os principais elementos que temos a nossa disposição para planejar uma web, a parte das camadas.
O resultado que pretendemos conseguir pode ser visto
em uma página a parte.
Referências: Em nosso manual de HTML temos toda a teoria e um pouco da prática necessária para dominar as tabelas.
As imagens
Vamos utilizar três imagens muito simples. Uma é a lateral esquerda dos campos dos links, outra a lateral direita, e um píxel transparente.
Com as imagens laterais vamos fazer o efeito de campo com a borda com esquinas suavizadas. Uma se utilizará na parte da direita e outra na esquerda. Com o píxel transparente utilizaremos algum truque de planejamento muito habitual em HTML, que consiste em colocar a imagem para criar um espaço de um tamanho definido por nós.
As imagens utilizam a transparência do GIF para poder criar barras de navegação as quais podemos aplicar distintas cores, facilmente editáveis se utilizamos uma folha de estilos.
A tabela com o link
Vamos dividir o problema em várias partes para que seja mais fácil de entender cada uma delas e o efeito global. Agora vamos ver como fazer uma aba. Ao reunir várias abas criaremos a barra de navegação.
As abas se criam com este código HTML:
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="imagens/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="imagens/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="imagens/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="imagens/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opção</td>
</tr>
</table>
O que dá como resultado este efeito:
Como detalhes do código anterior podemos assinalar que se utiliza uma classe para definir o estilo da aba. As classes são uma possibilidade das folhas de estilos. Uma classe não é mais que um estilo definido, que podemos aplicar a diversos elementos do HTML. Definem-se com um código como este no cabeçalho do documento HTML:
<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>
Assim estamos definindo que os elementos dessa classe tenham tamanho de letra 10, fonte verdana, ou em seu padrão, arial, e fundo de cor alaranjado.
Outra coisa sobre a que queremos chamar a atenção é o uso do píxel transparente. O que se utiliza em primeiro lugar está para criar a linha da borda de cima da aba, apesar de que a cor negra é dada pelo atributo bgcolor="000000" que tem a célula. O outro píxel se coloca para fazer com que esta espaço onde se colocam as letras seja suficientemente alto.
Por último, dizer que a tabela não tem borda e os atributos cellspacing e cellpadding estão a zero, para que não tenha margens nem espaços entre as células. Uma proba que podemos fazer para entender a forma desta tabela é colocar a borda=1, com o que veremos a forma da tabela mais facilmente. Logo, voltaremos a colocar a borda=0 porque as bordas ficam muito feias.
Colocar várias abas juntas
Logo, para criar o efeito de barra de navegação, vamos criar uma tabela onde colocaremos os distintos códigos HTML das abas. Esta tabela é muito mais simples. Simplesmente tem um espaço para cada aba e uma célula na parte debaixo com a linha sobre a que aparecem as abas.
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td COLSPAN=3 bgcolor=000000><img src="imagens/pontonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>
Esta tabela nos daria espaço para colocar três abas... dependendo do número de opções vamos colocar mais ou menos células na primeira fila. Posteriormente, deveremos colocar o código de cada aba dentro de cada célula. Com isso, estará realizada nossa barra.
Um exemplo de código completo pode ser visto a seguir:
<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/esq.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/dir.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>Opção xxx</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.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/dir.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>Outra Opção</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.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/dir.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>O que deseje</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.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/dir.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 opção</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td COLSPAN=6 bgcolor=000000><img src="images/pontonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>
O exemplo conseguido pode ser visto na barra de cima que aparece
nesta página de exemplo.
Comentários do artigo
