Layouts sem tabelas
2007-09-13 15:27:32
Categoria: Web Standards
Tabelas foram feitas para quê? Para armazenar dados, dados tabulares como uma planilha de Excel. Porém, desde o seu surgimento, as tabelas são largamente utilizadas para estruturar páginas inteiras e isso é semanticamente errado, esta não é a finalidade das tabelas. Quem deve fazer o papel de formatar a página é o CSS.
A substituição de tabelas por um HTML semanticamente correto e o uso do CSS, faz a separação do conteúdo da forma. Há várias vantagens em se utilizar os padrões webs, porém descrevê-las vai além do objetivo do tutorial. Veja algumas referências sobre o assunto:
- Maujor - CSS para Design. Para conhecer melhor o painel CSS do DW leia o tutorioal O painel Styles do DWMX 2004.
- Tableless – Blog brasileiro com várias artigos
- Revolução – Site sobre diversos assuntos relacionados à webstandards.
Neste tutorial você vai ver como construir uma página com um cabeçalho, um corpo com três colunas e um rodapé, com 760px de largura, centralizada na tela, e sem tabelas. Neste tutorial usarei o Dreamweaver 8, porém se você tiver versões anteriores não vai sentir grandes dificuldades, apenar de ter ocorrido algumas mudanças nesta última versão. Caso queira ver antecipadamente o resultado final: veja aqui.
Configurando o Dreamweaver
Para configurações vá em Edit » Preferences (Ctrl+U), depois vá em Defaut Document Type (DTD) (Tipo de documento padrão) e escolha a versão desejada do (X)HTML que o Dreamwevaer irá trabalhar.
Criando arquivo:
Crie uma nova página (Ctrl+N) em branco. Agora vamos criar uma arquivo CSS, vá em File (arquivo) » New (novo) » Category (categoria): Basic page (página estáticas) » CSS (folha de estilo em cascata) » Creat (criar).
A estrutura
A estrutura da página será assim:
Conhecendo as <div> ... </div>
Esta marcação tem como função definir um bloco de texto. Nele você poderá aplicar estilos CSS com mais liberdade. O atributo align está em desuso.
Definindo a dimensão da página e centralizando-a
1. Vá em Layout (visual) » Insert Div Tag (inserir a marcação Div).
2. Aparecerá um tela de opções, defina o ID (identificador) como "geral".
3. Note que ao passar o cursor do mouse sobre os limites da Div ele fica vermelho. Clicando a Div e permanecendo o mouse em cima dela você poderá verificar várias informações, isso é uma novidade da versão 8. Veja:
Agora vamos criar o estilo nesta camada, a fim de tornar toda a página com 760px de largura e centralizada na tela.
Vá no painel CSS (em versões anteriores fica em Design) » New CSS Rule
, abrirá uma tela de opções, configure do seguinte modo:
Seletor Type (Seleção de tipo): Advenced
Selector: #geral
Define in: (New Style Sheet File)
Depois crie um arquivo chamado estilo.css.
4. Abrirá uma tela de opções, esse é o painel de estilos CSS do Dreamweaver, é com ele que você poderá tornar seu trabalho muito mais rápido. Configure da seguinte forma:
Aqui definimos na Category Box a largura na página e suas margens, são as margens que centraliza a página. Este passo terminou, veja como ficou aqui, acrescentei um cor de plano de fundo apenas por uma questão visual.
Criando as áreas do layout
Agora com a largura definida e a página centralizada vamos criar as áreas da página.
1. Apague o conteúdo da Div #geral » vá em Layout » Inserir Div tag » Deixe os outros atributos como estão em defina o ID com o "topo"
2. Agora vamos criar mais 4 Div’s, uma para o lado esquerdo, outra para o centro, outra para o lado direito e por fim o rodapé. Novamente vá em Layout » Inserir Div tag » Defina os atributos da seguinte maneira:
Inset (inserção): After tag (ao fim da marcação) » escolha o “topo”, isso para esta Div seja inserida depois da topo, se você não selecionar esse opção teria inserido o Div dentro da Div “topo”, e não é isso que nós queremos.
Class (classe): *vazia
ID: esquerdo
Mude o modo de exibição para Split (mistura o visual com o código na mesma tela) é bastante útil para ir construindo o visual da página em CSS sem perder a noção da estrutura do (X)HTML. A estrutura do HTML está assim:
[…]
<div id="geral">
<div id="topo">Content for id "topo" Goes Here</div>
<div id="esquerda">Content for id "esquerda" Goes Here</div>
</div>
[...]
Sempre selecionado After tag (ao fim da marcação) e a última tag inserida, adicione o restante das Div’s para que a estrutura do HTML fique assim:
[…]
<div id="geral">
<div id="topo">Content for id "topo" Goes Here</div>
<div id="esquerda">Content for id "esquerda" Goes Here</div>
<div id="centro">Content for id "centro" Goes Here</div>
<div id="direita">Content for id "direita" Goes Here</div>
<div id="rodape">Content for id "rodape" Goes Here</div>
</div>
[...]
Veja o resultado deste passo aqui. Note que uma DIV cria um bloco de texto, este bloco ocupa toda a linha, assim fica um bloco em baixo do outro. Isso acontece porque essas são as propriedade padrão do HTML, mas podemos mudá-las utilizando o CSS.
Formatando a página (X)HTML via CSS
Neste passo vamos alinhar os blocos de texto para que não fiquem um embaixo do outro e sim do modo como planejamos. A página HTML está basicamente pronta, vamos agora criar as classes CSS para as Div’s no seu painel CSS.
1. Do mesmo jeito que criamos a classe #geral vamos criar as outras classe. Vá em CSS (design em versões anteriores) » New CSS Rule 
, abrirá uma tela de opções, configure do seguinte modo:
Seletor Type (Seleção de tipo): Advenced
Selector: #esquerda, #direita
Define in: estilo.css
Note que separamos duas classes por vírgula, isso serve para evitar redundâncias, já algumas propriedades são comuns na coluna esquerda e na direita. Crie uma classe chamada #centro e outra #rodape.
2. Você pode abrir o painel CSS do Dreamweaver clicando duas vezes sobre a classe desejada, ou clicando a classe desejada e depois em Edit Style
Configure os estilos #esquerdo, #direito da seguinte forma:
O atributo Float define onde uma imagem ou texto aparecerá em outro elemento. No caso queremos que fique do lado esquerdo.
3. Semelhante ao passo anterior abra a classe #centro e defina em Category » Box » Width: 356 pixels e Float: left também.
Isso fará com que as Div’s “esquerda”, “centro” e “direita” fiquem em forma de colunas.
4. Abra a classe #rodape em Category » Box » Clear: both. O atributo Clear é aplicado em nível de blocos, define restrições relacionadas com o posicionamento de elemento flutuante (foating) de acordo com o elemento colocado anteriormente.
Definindo classes para marcações
Vamos ajustar um pouco o espaçamento entre os blocos de textos para que não fiquem colados. Crie uma classe CSS da seguinte forma
Isso para que todas as Div da página tenha certo espaçamento entre elas. Vá em Category: Box » Padding » marque Same for all (igual para todas) » 4 pixels. O atributo Padding serve justamente para definir o espaçamento dentro da Div.
Pronto! Agora temos toda a estrutura e formatação básica da página terminada. Veja aqui o resultado deste passo. Adicionei conteúdo à página usando as funcionalidades comuns do DW.
Definindo classes para marcações dentro de outra
Podemos criar classes CSS formatadoras de marcações dentro de outra.
Ex.:
<div id="topo">
<h1>Tableless</h1>
</div>
Podemos formatar este título se criarmos uma classe chamada: #topo h1
Com essa idéia simples criei algumas outras classes CSS para formatar o conteúdo que adicionei a página. Veja o resultado final aqui.
Avaliando e validando os códigos desenvolvidos neste tutorial
A W3C fornece um mecanismo de validação. Veja os resultados:
XHTML
CSS
O código gerado é mais do que válido pela W3C, é acessível e limpo.
Sempre escuto dizer que Dreamweaver gera código sujo, mas saiba que isso é uma mentira. Ele não escreve código sozinho, ele faz apenas o que você o manda fazer. Em momento nenhum neste tutorial abrir o código para editá-lo, em apenas um momento pedi para abrir o modo Split, isso para ter noção da estrutura (X) HTML e não para editá-lo.
Mesmo assim é essencial o conhecimento das linguagens usadas no processo de criação. Para que o DW crie um código limpo e dentro dos padrões você precisa conhecer os padrões e aplicá-los.
Ao contrário da opinião de muita gente, esta ferramenta é apenas uma muleta para quem desconhece as linguagens e padrões webs. Se você tiver boas referências e souber trabalhar bem com este programa, poderá construir página com a mesma qualidade do que se você estivesse escrevendo o código à mão, porém de uma forma extremamente mais rápido.
Comentários
- Lucas Rizzotto 2007-10-12 08:10:17
- Boa iniciativa amigo. Um belo exemplar a ser estudado.
- Elias Gomes 2007-11-04 11:08:29
- Blz. Bem prático esse DW. Gostaria de ver algo sobre spry.
- Amorim 2008-05-22 14:31:56
- Gostei muito, parabéns pelo tutorail. Estou iniciando e foi de muita ajuda. Obrigado
- Douglas 2008-11-04 09:51:16
- Haha! Muito obrigado, me adiantou bastante!
- Roberto 2009-07-25 14:03:08
- Onde estão as imagens?
- Carlos R. Bacha 2009-10-31 03:19:24
- Não se vê nenhuma imagem.
- PauloTG 2010-01-25 09:18:01
- Muito bom este tutorial. Prova realmente aos meio inseguros que dá sim para fazer um bom layout sem tabelas.
- leandro 2010-03-20 08:59:29
- Belo tutorial,gostaria que saber fazer com draw div ap e caber em qualquer resolução de tela.Vlw.
- Anomimo 2010-06-07 09:13:45
- Uma Merda
- Gabriel 2010-11-01 16:32:38
- Uma pena que as imagens estao quebradas... mas mesmo assim valeu pelo Tuto. ;-)
- fernando 2010-12-17 18:08:08
- cade as imagens.. o tutorial é excelente mais as imagens nao aparecem.
- felipespencer 2011-06-08 11:31:32
- cade as imagens? nao tao aparecendo ?!?!?!