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 imagensVamos 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 linkVamos 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:
- Código:
-
<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:
- Código:
-
<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 juntasLogo, 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.
- Código:
-
<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:
- Código:
-
<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.
