Layouts em CSS

O uso de layouts em CSS com HTML permite um grande controle de posicionamento na página, onde podemos controlar

milimetricamente cada região da página. Isso falando literalmente.

Este exemplo mostra um layout dividodo em 3 regiões principais:

- cabeçalho

- centro

- rodapé

O cabeçalho está dividido em

- logo

- banner

O centro está dividido em

- menu (esquerda)

- conteúdo (centro)

- módulos (direita)

O rodapé não se divide e fica abaixo.

Ainda estou iniciando em CSS mas como minha praia é a programação e trabalho sozinho, obrigatoriamente tenho que mexer com

design e o CSS é uma ferramenta expetacular, com muito mais recursos do que eu imaginava.

Aqui quero agradecer ao colega João Paulo, do DNOCS, que me ajudou a deixar este layout como está.

Veja este desenho que representa um pouco o layout:

Quiz fazer algo semelhante ao template padrão do Joomla, pois tenho planos de criar um pequeno CMS usando este layout.

A maior dificuldade que tive foi resolvida pelo comando float, que permitiu conteúdo de uma região do lado ao invés de sempre

ficar um abaixo do outro como é o padrão do HTML.

Veja o layout online e faça o download se achar por bem.

Layout CSS

Agora veja como a página fica sem CSS:

Sem CSS

Observe que o HTML, por padrão exibe cada informação abaixo do anterior.

Para mudar isso o HTML tem alguns recursos, como a tabela ou o frame, mas para layouts atualmente o mais indicado é o CSS, mesmo

que possa ser de início mais trabalhoso.