Tabela melhorada com imagens
para barra de navegação ( Uma tabela de links HTML a qual intercalamos
imagens para transformá-la um pouco e torná-la mais vistosa. Utilizável
em uma barra de navegação.)
 |
| Portal |
 |
| Introdução |
|
| Todos os assuntos |
|
| O que desejar |
|
| Mais epígrafes |
|
| Acabando os links |
|
| Entrar em contato |
Neste artigo veremos como uma pequena imagem pode ser muito vistosa para construir uma barra de navegação para nosso website.
Vamos construir uma tabela como a que pode ser vista à direita, onde
poderemos observar a utilização de imagens para camuflar o fato de que
as células são sempre retangulares. As imagens aplicam um leve corte e
eliminam uma esquina, com o qual melhora sensivelmente a aparência das
tabelas.
Nota: Um efeito como este ou parecido
pode-se conseguir de muitas maneiras, portanto temos que tomar este
artigo somente como uma idéia das possibilidades e o modo de construir
as tabelas. |
As imagensAcredito que vendo as imagens que colocamos na tabela se compreenderá um
pouco a idéia a qual trabalhamos. As imagens estão ampliadas para que
se possa observar melhor suas linhas. Podem criar-se com qualquer editor
gráfico do qual dispomos.
Esta é a imagem que colocamos entre duas células de texto.
Esta é a imagem que colocamos na parte de cima da célula superior. Não
podemos colocar a mesma que a do meio porque não fica bem.
Vamos colocar cada elemento na tabela em uma célula independente. Na
primeira célula colocaremos a imagem destinada para a parte de cima, na
segunda o texto do primeiro link, logo a imagem que colocamos no meio de
cada célula de texto, seguida por outra célula com o texto do seguinte
link, logo outra vez a imagem, logo texto, etc.
A tabela tem que ser criada de forma que não fique a separação entre as
células, nem margens, pois caso fique não pareceria que as células da
imagem e as do texto formam um mesmo bloco e apareceria desengonçada. Os
atributos cellspacing e cellpadding ficariam a zero.
Ademais, as etiquetas <TD> e as das imagens, <IMG>, têm que
estar no código sem espaços entre o meio, pois se não for assim tampouco
conseguiríamos que as células ficassem coladas umas as outras.
No mais, nos resta dizer que aplicamos estilo às células de texto
utilizando CSS (Folhas de estilo em cascata), que são muito mais cômodas
e nos permitem definir uma única vez o estilo para todas as células no
lugar de repetir as etiquetas e atributos HTML para cada uma.
Código da tabelaColocamos o código de toda a página no lugar de somente a tabela para
que possam ser vistas as etiquetas para colocar os estilos CSS, que
aparecem no cabeçalho.
- Código:
-
<html>
<head>
<title>Tabela links legal</title>
<style>
.celula {background-color:#848ED3; font-size:8pt;
font-family:verdana,arial; color:#ffffff; font-weight:bold;
padding-left:3px; padding-bottom:2px;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="acima.gif" width="155" height="6" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Portal</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Introdução</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Todos os assuntos</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">O que desejar</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Mais epígrafes</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Acabando os links</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Entrar em contato</td>
</tr>
</table>
</body>
</html>
Pode-se ver o exercício em funcionamento em uma página a parte.
