Neste artigo vamos finalizar nosso projeto tableless através do modo design do Dreamweaver e mostrar que isso é possível. Se você não leu a primeira parte, clique aqui para ler.

No artigo anterior, nós criamos a estrutura e definimos o conteúdo da nossa página. Neste artigo, veremos como estilizar tal estrutura e o conteúdo presente nela. Para tal, utilizaremos as CSS - Cascading Style Sheet - com ela será possível fazermos o que quisermos e o que a criatividade permitir.

Para iniciar, precisamos criar uma página que guardará toda estilização do site e vinculá-la a nossa página. Se você desejar, veja a página com a estrutura e o conteúdo .

Para criar uma página básica em CSS, faça o seguinte: Ctrl + N, selecione a categoria Basic Page e posteriormente CSS. Observe a imagem abaixo:

Uma vez que a página foi criada, salve-a com um nome desejado. E agora, iremos vinculá-la a nossa página que contém a estrutura e o conteúdo com essa última página aberta, vá até o painel CSS - Shift + F11 - após a abertura do painel clique no ícone Attach Style Sheet; veja a imagem abaixo com sua localização:

Com esse procedimento, teremos o painel Attach External Style Sheet para que possamos configurá-lo, veja a imagem abaixo com sua configuração:

No painel acima, configuramos o File/URL - onde informamos a localização do arquivo CSS - e em Add as - selecionamos a opção Link e em Media deixamos em branco. Todos esses detalhes rendem muito assunto, então, não irei abordá-los neste artigo. O resultado final dessa vinculação resulta no seguinte em nosso código HTML:

Com nossa página CSS criada e com ela devidamente vinculada a página desejada, podemos iniciar a criação dos estilos CSS; vamos lá.

No painel CSS - Shift + F11 - temos a seguinte opção: New CSS Rule, observe:

Ao clicarmos em tal opção, teremos o painel: New CSS Rule e iremos configurá-lo da seguinte forma:

Ou seja, informamos que o tipo de seletor será uma tag e que essa tag será o body e que as regras CSS serão definidas em nosso arquivo css - css-exemplo.css foi o nome que eu defini para minha folha de estilo.

Após esses passos, teremos o painel CSS Rule Definition... e nossa primeira configuração será para a tag body como definimos no painel New CSS Rule, observe:

Para a tag body, definimos o seguinte:

. Font: Verdana, Arial, Helvetica, sans-serif
. Size: small
. Color: #000000

Agora, iremos definir a estilização para o topo, observe:

Ao contrário da primeira configuração do painel acima, definimos agora o tipo de seletor como Advanced, onde poderemos informar o ID de uma referida tag desejada, neste caso a tag div cujo ID é igual topo. E a estilização derá o seguinte:

Ou seja, informamos que ela terá um padding - espaçamento entre a borda e conteúdo - de 5px em todos os lados - em cima, à direita, em baixo, à esquerda.

Agora, vamos definir como será a estrututa do nosso menu presente no topo, observe:

Desta vez, nosso seletor será: #topo ul li, ou seja, as tags li que estão aninhadas à tag ul e essa por sua vez na div topo.

Informamos que as tags li ficarão dispostas de forma inline, com isso teremos o efeito de uma menu na horizontal e excluíremos os "bullets" - Type: none.

Veja a primeira prévia do layout:

Agora, vamos estilizar o conteúdo, observe:

Bom, para a div conteudo, informamos que ela terá uma largura - width - de 75% e que ela "flutuará" à esquerda da página - float: left..

Agora, observe a estilização da lateral:

Ao contrário da div conteudo, a div lateral terá uma largura - width - de 24.5% e ela "flutuará" à direita da página - float: right.

Veja a segunda prévida do layout:

Bom, agora precisamos estilizar o rodapé do nosso layout, vejamos os procedimentos:

Com a declaração CSS - clear:both - o rodapé ficará sempre abaixo das colunas - conteúdo e lateral - uma vez que tal declaração tem o objetivo de "clarear" os elementos que "flutuamos" - conteúdo e lateral - para que empurrem o que estiver abaixo. Observe novamente o layout:

Bom, o restante das estilizações fica acargo de vocês, meu objetivo foi demonstrar a criação de um Layout Tableless com o Dreamweaver. Os detalhes são tantos que não teríamos tempo para descrevê-los todos aqui.

Aconselho a leitura do artigo Layout CSS de 2 colunas com faux column postado aqui no iMasters e de autoria do Mauricio Samy.

Como vocês podem perceber, desenvolver um layout Tableless com o Dreamweaver de forma visual - Mode Design View - é muito trabalhoso, particularmente, faço as declarações sempre pelo modo Code View, uma vez que sou mais produtivo e já domino as declarações CSS.

Escreverei em breve um artigo, falando sobre as vantagens e facilidade que o Dreamweaver oferece para quem trabalha no modo Code View, até lá.

Páginas utilizadas neste exemplo:

. Página com a estrutura e o conteúdo;
. Página CSS;

Um abraço a todos e até o próximo.