Neste artigo de HTML vamos desenvolver uma barra de navegação de uma maneira muito simples, na qual utilizaremos uma imagem para dar um pequeno efeito para fazer uma das bordas da tabela oblíqua. O efeito que buscamos 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.
|
A imagemUtiliza-se uma imagem para apresentar uma parte da célula onde se
colocam os links com um lado oblíquo. A imagem tem uma parte
transparente e outra parte com o fundo branco, que tem que ser o mesmo
fundo da página. Colocaremos a imagem sobre uma célula da mesma cor da
barra. Então, a parte branca criará o setor oblíquo e a parte
transparente deixará ver a parte da célula com a cor que tenha a barra
criada. Cor que se pode variar facilmente com estilos ou com o atributo
bgcolor das células.
A tabelaO truque para fazer a barra se baseia em intercalar as células com os
links e as células com a imagem. Será criada uma tabela com uma só fila e
com tantas colunas como forem necessárias para localizar as opções. Na
verdade, como se pode supor, serão criadas o dobro de células que de
opções. Para cada opção, colocaremos primeiro uma célula com a imagem e
logo outra com o link.
O código será algo como isto:
- Código:
-
<table border=0 cellpadding="0" cellspacing="0">
<tr>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcao </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcao 2 </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Mais opcoes </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> O que seja </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Mais coisas </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Secao enésima </td>
</tr>
</table>
Detalhes para estar atento: Foi utilizado uma classe de estilos CSS para definir o formato das
células. Na classe se define um estilo, que inclui a cor de fundo,
tamanho de letra, tipografia, etc.
Nota: 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.
Também cabe destacar que para que o exemplo funcione corretamente é
necessário colocar os atributos da tabela para que não tenha bordas nem
margens, com border=0, cellspacing=0 e cellpadding=0. Por isso, para
criar uma pequena margem antes do link, utilizam-se caracteres especiais
, que servem para colocar espaços em branco.
O exemplo em funcionamento pode ser visto em uma página a parte.
