Abaixo está o design que iremos utilizar como base nesse tutorial. Nossa missão é montar essa criança usando nada mais nada menos que XHTML, CSS, e algumas imagens:

Antes de tudo, temos que identificar os elementos estruturais do design, para então saber como estruturar nosso documento HTML.

A web é amplamente baseada em retângulos, e nós precisamos nos lembrar disso quando estivermos dividindo nosso design. Essas divisões principais que nós iremos fazer vão terminar em tags <div>. Um <div> é basicamente um contêiner retangular, o qual podemos posicioná-lo usando CSS.

O diagrama abaixo mostra como iremos dividir o design.

Abaixo, identificamos 5 elementos principais:

* Main Navigation (área de navegação principal)
A navegação primária para este website. As imagens vão mudar on hover (quando o cursor do mouse estiver sobre elas).
Comprimento: 760px
Altura: 50px

* Header (cabeçalho)
O cabeçalho do website inclui uma imagem de fundo (puramente por estética) e o nome da companhia.
Comprimento: 760px
Altura: 150px

* Content (conteúdo)
É nesta área que ficará o conteúdo principal do website.
Comprimento: 480px
Altura: Pode mudar, dependendo do conteúdo

* Sidebar (barra lateral)
Esta terá uma camada secundária que não é tão importante quanto o conteúdo principal.
Comprimento: 280px
Altura: Pode mudar, dependendo do conteúdo

* Footer (rodapé)
Informações gerais: Copyright, créditos, e algum texto alternativo para navegação.
Comprimento: 760px
Altura: 66px

Este site será também centralizado na janela do navegador. Agora nós temos toda a informação que precisamos para começar.

Voltar   Avançar