Olá a todos. Gostaria de informar que estão abertas as inscrições para a nova série que será abordada aqui na coluna e acompanhada por todos vocês semanalmente. A série Sistema de publicação de fotos com comentários foi um sucesso e o principal motivo foi a escolha do tema pelos leitores da coluna. Então, ficarei no aguardo de novas sugestões de todos vocês, sugestões essas que poderão ser enviadas por e-mail.

No artigo de hoje, falaremos sobre o desenvolvimento de layouts tableless utilizando o Dreamweaver. Eu utilizo esse software no meu dia-a-dia de desenvolvimento, mas sempre no mode Code View, uma vez que sou mais produtivo assim, escrevendo meus próprios códigos e formatando-os da forma que me sinto confortável. Mas, devido a diversas dúvidas que recebo, vou mostrar-lhes que é possível também fazer layouts tableless pelo Dreamweaver no modo Design View. Vamos lá.

O Dreamweaver, a cada versão lançada, vem se adaptando sistematicamente aos padrões da web, e em sua última versão - 8 - trabalhar com esses padrões ficou mais fácil e produtivo. Para este artigo, a principal ferramenta a ser utilizada é a Insert Div Tag localizada na categoria Layout da Insert Bar. Vejamos uma imagem com sua localização na imagem abaixo:

Seu painel é bem simples e intuitvo, e no decorrer deste artigo, aprenderemos como trabalhar com ele. Então, até o momento, veja o layout que será criado:

Calma, não se assuste com o design, coloquei essas cores sem sentido, simplesmente para você enxergar cada parte do layout, o que significa dizer que teremos: um topo, a área de conteúdo, uma barra lateral e um rodapé. Genericamente falando, temos um layout de duas colunas.

É impossível você aprender todas as técnicas para se desenvolver layout tableless simplesmente com este artigo, uma vez que ela são tantas e para aprendê-las seu esforço e boa vontade será fator determinante. Neste artigo, você verá o básico e no final e no decorrer deste indicarei algumas boas referências para você estudar mais.

A primeira coisa a se fazer é criar uma nova página no Dreamweaver, para isto utilize o seguinte comando: Ctrl + N ou pelo seguinte menu: File > New.... Escolha uma página HTML com o Doctype XHTML 1.1. Observe a imagem abaixo:

Em layouts tableless e no mundo dos padrões da web, a escolha do Doctype correto é fundamental, uma vez que cada um deles tem sua finalidade e diferenças no modo de renderização do browser ao seu layout. Então, estude mais sobre o assunto. Algumas referências para você estudar:

01. www.google.com.br/search?q=xhtml+doctype
02. www.tutocle.com/search/doctype
03. www.revolucao.etc.br/archives/doctype-dtd-document-type-definition/
04. www.tableless.com.br/doctype

Com a página criada e aberta no modo Design View, vamos iniciar o nosso trabalho, até que enfim, né? Clique na opção Insert Div Tag, a opção que lhe apresentei agora há pouco e a configure da seguinte forma:

Sua configuração é bem simples, veja só:

. Insert: At insertion point = a tag div será criada onde o curso estiver localizado no código fonte da página. Quando criamos uma página, ele se posiciona logo após a abertura da tag body.

. ID: tudo = O nome, ou o identificador da tag criada. Esse atributo ID é muito importante e com ele cada tag difere-se uma da outra, uma vez que não pode haver dois elementos com o mesmo ID.

Em seguinda, vamos criar outra tag div através da opção Insert Div Tag e essa div será o nosso topo. Veja:

Bom, nada de diferente até agora. Uma dica: sempre que inserir uma tag div por esse recurso, alterne para o mode Code View para você ver a posição do cursor e desta forma conscientizar seu racioncínio. É bom saber como o programa "pensa" e passar a pensar como ele. Isto facilita o trabalho e o domínio da ferramenta em si.

Agora vamos criar nossa área de conteúdo. Observe a imagem abaixo novamente:

Antente-se para o seguinte. Indicamos em Insert a opção After tag e logo após informamos: <div id="topo">. Então, a div conteudo será inserida após a div topo, somente.

Agora, observe a imagem abaixo mais uma vez:

Ou seja, realizamos o mesmo processo; inserimos a div lateral após a div conteudo. Para finalizar, vamos inserir a div rodape, veja só:

Bom, acredito não haver nenhuma novidade na imagem acima para você. Se visualizarmos nossa página no Dreamweaver, veremos ela assim...

...pelo Design View. No Code View, a veremos da seguinte forma:

Vamos inserir algum conteúdo em nossa página, e posteriormente iremos estilizá-la através das CSS. Vamos iniciar retirando o conteúdo "Content for id "tudo" Goes Here" da div tudo, observe:

A inserção completa do conteúdo, você confere na seguinte vídeo-aula.

Bom, no próximo artigo veremos o processo de estilização dessa página e com issto concluíremos nosso artigo. Durante a semana, estude mais sobre tableless, alguns links para você:

01. http://www.tutocle.com/search/tableless
02. http://www.tutocle.com/search/tableless+%252Blayout/
03. http://www.tutocle.com/search/web+standards/

Um abraço a todos e uma ótima semana.