Definindo um Layout de Website sem Tabelas (Tableless)
Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito <div>. Para continuar lendo esse post, você deve estar familiarizado com CSS (folha de estilos ou cascading style sheets) e com alguns estilos, principalmente com o estilo float.
Para um bom entendimento de como utilizar CSS, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.
Para saber utilizar o estilo float, acesse Estilo Float (CSS Style Float).
Sabendo um pouco de CSS, vamos focalizar agora no que vai fazer o nosso layout, o <div>. Eu posso encaixar vários divs em um documento, dando estilos diferentes a eles, formando um layout agradável. Aqui vou abordar um layout normalmente utilizado, que é com um topo, um corpo e um rodapé, sendo o corpo dividido em 3 partes, uma barra de menu a esquerda, um espaço para conteúdo e uma barra lateral a direita.
Vamos ao código de exemplo, e se você quer vê-lo funcionando, acesse Exemplo Estrutura de Site Tableless.
Vou colocar o código por partes para melhor explica-lo, e no final do post está o código completo de como fazer o site com div e sem tabela (tableless).
O Cabeçalho (<head>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" /> <title>Exemplo Estrutura de Site Tableless</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head>
A primeira linha do seu código sempre que for fazer um site, tem que ser a definição do DOCTYPE, que diz aos navegadores como deve ser tratado o seu código, e para saber mais sobre o DOCTYPE (DTD – Document Type Definition), acesse O que é e para que serve o DOCTYPE ou DTD (Document Type Definition).
O atributo xmlns da tag <html> serve para ficar nos padrões de um documento XHTML, esse atributo serve para definir o namespace que o documento utilizará. Esse valor que está no exemplo é o valor padrão.
Já dentro do cabeçalho do site (<head>), devemos dizer aos navegadores que tipo de codificação de texto estamos utilizando, isso se faz com a tag <meta>, como definido do exemplo, diz que o texto do documento está com a codificação ISO-8859-1, que é o padrão para nossa língua portuguesa, mas existe uma codificação padrão mundial que é o famoso UNICODE (UTF-8). Se seu documento estiver escrito em um tipo de código e sua tag <meta> de definição de conteúdo estiver dizendo que está em outro, o navegador poderá exibir caracteres estranhos.
A próxima tag interessante é a <link>, que serve para adicionar algum conteúdo externo ao documento, comumente utilizada para adicionar um arquivo de folha de estilos (CSS – Cascading Style Sheet) a um documento, como feito no exemplo. A tag <link> adiciona no documento a folha de estilos do arquivo estilo.css.
Para fazer um site, você deve ter em mente sempre como o navegador vai vizualizar o site, então quando for criar o site, defina seu DTD – Document Type Definition sempre e também defina sempre na criação do seu site, o código de caracteres a ser utilizado (como UTF-8 e ISO-8859-1).
A Folha de Estilos do Site (CSS – Cascading Style Sheet)
body {
margin:0px;
background-color: #cccccc;
font-family:"Trebuchet MS", Tahoma, Arial, Verdana;
font-size:12px;
color:#000;
}
#todo {
position: relative;
width: 750px;
border: 1px solid black;
margin:0px auto;
background-color: white;
}
#topo {
position: relative;
width: 746px;
height: 100px;
border: 2px solid red;
}
#meio {
position: relative;
width: 750px;
min-height: 400px;
background-color: #eeeeee;
}
#rodape {
width: 746px;
height: 75px;
border: 2px solid brown;
}
#esquerda {
float: left;
width: 150px;
min-height: 400px;
border: 2px solid green;
}
#miolo {
float: left;
width: 438px;
min-height: 400px;
border: 2px solid blue;
}
#direita {
float: right;
width: 150px;
min-height: 400px;
border: 2px solid yellow;
}
#menu {
width: 150px;
height: 400px;
}
.itemMenu {
width: 140px;
height: 21px;
background-color: lightyellow;
padding: 3px 0px 0px 10px;
border-bottom: 1px solid black;
}
#logo {
float: left;
width: 200px;
height: 100px;
text-align: center;
background-color: #cccccc;
margin-right: 20px;
}
.secao_miolo {
width: 428px;
height: 150px;
text-align: center;
background-color: #cccccc;
margin: 2px 5px 4px 5px;
}
.secao_direita {
width: 140px;
height: 100px;
text-align: center;
background-color: #cccccc;
margin: 4px 5px 4px 5px;
}
#rodape_direita {
float: right;
width: 200px;
text-align: right;
margin: 5px 10px 0px 0px
}
#rodape_direita a{color: #cc6600; text-decoration: none;}
#rodape_direita a:hover{color: #cc6600; text-decoration: underline;}
Os estilos do seu site devem ser todos definidos nesse arquivo, ou você pode separar os arquivos por parte do site, por exemplo, eu tenho um arquivo para o estilo do site todo, mas do banner e do menu (rollover ou popup), que já tenho prontos e bem definidos, eu coloco em outro arquivo, como se fosse modularizar o código, se não quero o banner, só retiro os arquivos do banner, se não quero o menu, só retiro os arquivos do menu, e assim podemos fazer com outras partes do site.
Explicando rapidamente, o elemento com o identificador todo, vai ser o elemento pai de todos os outros elementos do conteúdo do site, ele vai definir o tamanho do site e alguns estilos do site, como no exemplo, a cor de fundo do site (background). O elemento com o identificador todo, vai ser dividido verticalmente em 3 partes, o topo, o meio e o rodape.
Nesse exemplo eu coloco bordas e cor de fundo nos elementos para demonstrar onde eles estão e o tamanho deles. As partes verticais do site, tem a mesma largura, que é a largura total do site. O elemento com identificador meio vai ser dividido em 3 partes horizontais: esquerda, miolo e direita.
Normalmente na esquerda fica o menu do site (se o site tiver menu), se você quiser um menu horizontal, normalmente ficaria na parte de baixo do topo, ou logo abaixo do topo, em um outro <div>. Fazer os ajustes para o seu site ficar com um menu diferente é fácil, coloque outro <div>, coloque alguns estilos nele e pronto. Ainda na parte esquerda, colocamos o estilo float: left, pois queremos que essa parte fique na esquerda, e a próxima parte fique a direita dela.
O miolo do site também fica com o estilo float: left, pois queremos que ele fique a esquerda da próxima parte que iremos colocar. Como ele vem depois do <div> da esquerda, o miolo ficará colado a direita deste.
A parte da direita do site fica com o estilo float: right, para ficar a direita e os outros elemento a esquerda dele.
Uma parte da nossa folha de estilos que é bem interessante são as últimas duas linhas, elas dizem que qualquer tag <a>, dentro do elemento com o identificador rodape_direita, deve ter esses estilos atribuídos a elas. Isso é bem útil quando tenho em diferentes partes do meu site, diferentes estilos da mesma tag.
Para saber mais sobre a tag <a>, acesse A Tag <a> – Fazendo Link (Hyperlink).
O Código HTML do Site sem Tabelas (com <div> – Tableless)
Vamos colocar o site por partes, primeiro o topo, depois o meio e por fim o rodapé. Abaixo o código do topo.
O Topo
<body> <div id="todo"> <div id="topo"> <div id="logo">Logo</div> Aqui pode ser uma imagem de background e um texto. </div>
No corpo do documento temos um elemento <div> que vai englobar todo o nosso site. Esse elemento <div> está ai para definir a largura e altura do site, qualquer tipo de fundo (cores e imagens) e o alinhamento do site no navegador. Colocamos o identificador todo nesse <div>. Sempre que for fazer um site, defina bem a largura do site, pois se a largura for variável, o conteúdo do site pode “quebrar” o layout, fazendo o site ficar diferente do planejado.
O primeiro elemento dentro do nosso <div> todo, é um <div> que ficará responsável pela parte de cima do site, onde podemos colocar o nome do site, um logo do site e mais coisas como propagandas e até mesmo o menu do site (se o menu for horizontal). Esse <div> identificamos por topo. Normalmente ele ocupa a parte de cima inteira do site, com a mesma largura do <div> todo. A altura é variável, depende muito do que queremos colocar no topo. Uma dica é, não colocar a altura do topo muita, pois poderá esconder muitas partes do conteúdo do site, que ficará logo abaixo, mas também não colocar a altura pouca, pois se for um site de empresa, a logo, o título ou o nome do site tem que serbem visualizado.
O Meio
<div id="meio"> <div id="esquerda"> <div id="menu"> <div class="itemMenu">Principal</div> <div class="itemMenu">Empresa</div> <div class="itemMenu">Produtos</div> <div class="itemMenu">Serviços</div> <div class="itemMenu">Contato</div> </div> </div> <div id="miolo"> <div class="secao_miolo">Seção 1</div> <div class="secao_miolo">Seção 2</div> <div class="secao_miolo">Seção 3</div> </div> <div id="direita"> <div class="secao_direita">Seção 1</div> <div class="secao_direita">Seção 2</div> <div class="secao_direita">Seção 3</div> </div> <div style="clear: both;"></div> </div>
Logo após o topo, colocamos um <div> identificado por meio. Nesse meio teremos o conteúdo do nosso site. No exemplo, dividimos o meio em três partes, horizontalmente. A primeira parte, mais a esquerda, colocamos um menu.
Na parte do meio colocamos algumas seções que o site pode ter, tipo algumas notícias na página principal, ou chamadas para artigos e outros. Nessa parte fica o conteúdo do nosso site, quando clicar em um item do menu, só é necessário mudar essa parte do site, e se necessário ou quiser, mudar também a terceira parte do meio, a parte da direita.
Na parte da direita podemos colocar algumas seções do site mais importantes, para dar melhor destque a elas, ou podemos colocar propagandas de todos os tipos, ou informações fixas que se quer ter em todas as seções do site.
Como essas partes do site requerem o estilo float, colocamos um <div> na penúltima linha com o estilo clear, para corrigir o problema de ajuste de altura. Esse jeito de corrigir pode não ser o mais elegante, mas foi o que eu achei mais fácil de fazer e sem problemas de fazer.
O Rodapé
<div id="rodape"> <div id="rodape_direita"> Av. xxx yyy zzz, No 765<br/> Manaus - AM - CEP: 89000-000<br/> Email: <a href="mailto:seuemail@seudominio.com.br">seuemail@seudominio.com.br</a> </div> </div> </div> </body> </html>
Na parte de baixo do site, temos normalmente um rodapé, que diz quem fez o site, algumas informações sobre contatos da empresa do site, tipo endereço, email, telefones e outros. Nós colocamos um <div> com o identificador rodape para fazer o rodapé do site. No exemplo coloquei um outro <div> dentro do rodape, para fazer ele ficar a direita com alguns dados de contato do site.
O Código Inteiro do Site em <div> – Tableless
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" /> <title>Exemplo Estrutura de Site Tableless</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div id="todo"> <div id="topo"> <div id="logo">Logo</div> Aqui pode ser uma imagem de background e um texto. </div> <div id="meio"> <div id="esquerda"> <div id="menu"> <div class="itemMenu">Principal</div> <div class="itemMenu">Empresa</div> <div class="itemMenu">Produtos</div> <div class="itemMenu">Serviços</div> <div class="itemMenu">Contato</div> </div> </div> <div id="miolo"> <div class="secao_miolo">Seção 1</div> <div class="secao_miolo">Seção 2</div> <div class="secao_miolo">Seção 3</div> </div> <div id="direita"> <div class="secao_direita">Seção 1</div> <div class="secao_direita">Seção 2</div> <div class="secao_direita">Seção 3</div> </div> <div style="clear: both;"></div> </div> <div id="rodape"> <div id="rodape_direita"> Av. xxx yyy zzz, No 765<br/> Manaus - AM - CEP: 89000-000<br/> Email: <a href="mailto:seuemail@seudominio.com.br">seuemail@seudominio.com.br</a> </div> </div> </div> </body> </html>
Não esqueca do arquivo de folha de estilo (CSS), e ajustar o nome dele ao nome colocado na tag <link> do cabeçalho do site.
Agora já podemos fazer várias modificações para o site ficar visualmente atrativo e também já sabemos como fazer um site em <div> de graça (grátis).
Se você quiser um site ou hospedagem profissional, acesse Panasoft.
Ótimo tutorial, muito bem explicado! Agora definitivamente sei fazer o famigerado tableless haha!
junho 5th, 2009 at 22:39[...] Definindo um Layout de Website sem Tabelas (Tableless) [...]
janeiro 5th, 2010 at 16:09execelente, minha professora vai utilizar como exemplo, coloca uma referência ao seu site no exemplo
maio 5th, 2010 at 10:58Olá Leonir, muito legal saber que o que eu escrevi será usado para o ensino. Valeu e obrigado por comentar.
setembro 16th, 2010 at 15:30Abraço.