Neste artigo vamos estudar o modo de cria��o de uma p�gina web medianamente avan�ada, na qual temos uma estrutura de colunas para mostrar os conte�dos. Para criar a estrutura de colunas utilizaremos tabelas HTML e explicaremos alguns dos truques t�picos utilizados para a constru��o com tabelas.
A motivação deste artigo que recebi muitas vezes consultas sobre o procedimento para criar paginas web com diferentes colunas. No manual de HTML se explicam todos os detalhes sobre a criação de tabelas, e realmente não se conta como utiliza-las para construir uma página web. De modo que me parecia necessario apresentar um artigo prático para cobrir este assunto.
Também é importante dizer que a corrente atual de design de páginas web utiliza CSS e camadas, ao inves de tabelas, para o posicionamento dos conteudos. Se você já conhece CSS possivelmente não se interessara ler este artigo. Nesse caso lhe recomendaria ler os conteudos sobre a construidos em CSS. Porém, na prática, muita gente visita CriarWeb.com para aprender a fazer páginas web desde zero, e em um primeiro momento ou se s� tiver conhecimentos de HTML, e mais simples começar a construir páginas usando tabelas.
Construido por tabelas passo a passo
As tabelas na verdade estão pensadas para apresentar informando tabulada, ou seja, usando filas e colunas. Entretanto, este uso pode ser estendido a toda a página web e podemos criar uma macro-tabela que englobe todos os conteudos que pode ser mostrados na página inteira. Como as tabelas tem filas e colunas, nos serviriam para criar várias áreas onde se mostrado os conteudos construidos como se fosse uma revista ou um portal.
Neste artigo vamos criar um exemplo medianamente simples de construido usando tabelas. Podemos ve-lo a seguir para termos uma idéia do objetivo buscado.
Como vimos, esta página esta composta por um cabeçalho e um corpo de página. Para criar o cabeçalho e o corpo utilizaremos tabelas independentes. Fazemos isto porque com duas tabelas separadas se simplifica o exemplo, ou seja, por comodidade e porque se torna mais fácil de desenhar. Não obstante, como a distribuindo de colunas e filas no cabeçalho e corpo neste exemplo é diferente, necessitamos utilizar tabelas independentes. Porém, a razão mais importante de colocar cabeçalho e corpo nas tabelas diferentes é que em alguns navegadores, quando h� desenhos com tabelas, at� que n�o se carregue o c�digo da tabela inteira n�o se mostra nada. Se tiv�ssemos toda a p�gina colocada na mesma tabela, o usu�rio n�o veria nada at� que n�o se terminasse de carregar toda a p�gina em seu navegador. Se separarmos as tabelas de cabe�alho e corpo conseguiremos que o cabe�alho da p�gina se carregue e se mostre mais rapidamente e logo, embora demore bastante em carregar o resto da p�gina com todo o corpo, pelo menos o usu�rio v� o cabe�alho e pode saber que a p�gina est� sendo toda carregada.
Neste caso, o cabe�alho � bastante t�pico, com o logotipo, um banner e uma barra de navega��o horizontal. O c�digo pode ser como o seguinte.
 |  |
Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda | |
Se observarmos, o cabe�alho tinha um contorno negro. Isto o conseguimos de maneira similar a como explicamos em um artigo anterior de HTML: Caixa elegante e simples com HTML. Simplesmente colocamos uma cor de fundo preta � tabela, logo fazemos com que os campos estejam separados (cellspacing) de um p�xel e definimos em branco a cor de todos os campos. Assim, a separa��o entre campos aparecer� em preto e os campos em branco. Neste caso definimos uma margem entre a borda do campo e o conte�do (cellpadding) de tr�s pixels, para que o conte�do dos campos n�o se grude na borda.
A barra de navega��o horizontal ocupa toda a largura do cabe�alho, por isso tem um colspan=2. Colocamos um fundo degrad� para melhorar um pouco o desenho.
Outra coisa destac�vel � a largura da tabela, que fizemos de 778 pixels. Poder�amos ter feito um desenho que ocupasse toda a largura da p�gina, por�m criei um desenho n�o fluido com largura fixa. Este tipo de design em minha opini�o � mais simples do que ficar bem. O tamanho de 778 pixels � porque � o m�ximo que se pode colocar que caiba em defini��es de tela de 800 x 600. Podemos conhecer mais sobre designs fluidos no artigo P�ginas fluidas. Tamb�m temos outro artigo onde podemos saber mais sobre defini��es de tela.
Por sua vez, o corpo tem uma distribui��o de tr�s colunas. O c�digo da tabela que englobaria todo o corpo � o seguinte:
A t�cnica para fazer esta tabela � diferente que a tabela do cabe�alho. Esta tabela n�o tem a borda preta, para n�o recarregar demais o desenho da p�gina. Por�m, o mais importante � que as margens e o espa�o entre as c�lulas (cellspacing e cellpadding) foram eliminados ou visto a zero. Ent�o, os espa�os que tem que haver entre as c�lulas foram colocados com c�lulas vazias de 10 pixel. Fa�o isto assim porque deste modo me resulta mais simples de calcular os espa�os da tabela e porque assim podemos definir margens que n�o afetam a todas as c�lulas da tabela, e sim s� as que necessitam.
A tabela tem tr�s c�lulas onde se colocar�o conte�dos e duas c�lulas com espa�o ou margens para separar os tr�s campos onde est�o os conte�dos. Dentro de cada c�lula colocamos os conte�dos necess�rios. Na primeira ir� a barra de navega��o da esquerda, na c�lula do centro o corpo principal e no terceiro campo ir� a lateral direita que utilizamos para colocar publicidade.
As larguras de cada c�lula, definidas pelo atributo width, s�o bastante t�picas neste tipo de estruturas de tr�s colunas. Ademais, podemos ver que todas as c�lulas t�m o atributo valign="top" para que os conte�dos se situem na parte de cima da tabela.
O conte�do de cada uma das c�lulas do corpo inclui mais c�digo HTML, inclusive outras tabelas aninhadas. Em geral, podemos colocar em cada coluna o c�digo HTML que necessitarmos com qualquer etiqueta, tendo em conta que a largura dispon�vel est� limitada � largura da c�lula.
0 commentaires :
إرسال تعليق