Aprenda a criar uma estrutura de site sem tabelas

Fala galera, neste meu primeiro tutorial eu vou mostrar como manipular o HTML utilizando CSS. Espero que gostem.

1 – Crie um novo documento HTML, eu uso o Dreamweaver é muito melhor para escrever os códigos, mas você pode fazer no próprio bloco de notas. Abra o Dreamwever e vá até a opção Create New - HTML. Veja abaixo:

2 - Escolha o modo de exibição Code como mostra na figura abaixo:

3- Dentro da Tag BODY crie a seguinte estrutura HTML  e salve em uma pasta com o nome index:

 

4- Agora vá no menu File opção New ou utilize a combinação de teclas CTRL+N e crie um novo documento CSS pois utilizaremos uma folha de CSS externa ou seja o HTML importará o Código para a página. Veja abaixo:

5-Antes de começar a criar o código salve o seu CSS na mesma pasta onde você salvou seu documento html com o nome estilo.

Para entendermos melhor o funcionamento desses elementos vamos testando no navegador cada um dos passos a seguir.

6 – No seu arquivo CSS crie a seguinte linda de código:

Onde:

Width é a largura da página que foi definida em 960 pixels;

Height é a altura que foi defina com 600 pixels;

Background-color é a cor de fundo da página.

7- Agora no arquivo index dentro da TAG HEAD insira o seguinte código:

Esta linha indica o caminho onde o arquivo CSS que será utilizado pelo seu site esta salvo. Você pode utilizar vários CSS em uma única página.

8 – Salve seu arquivo HTML e teste no navegador pressionando a tecla f12. Se você viu um quadrado azul significa que está tudo funcionado.

9 – Agora vamos centralizar nossa página, dentro do CSS complete o código do seletor #tudo.

Salve e atualize sua página no navegador note que agora ela tem que estar centralizada.

 10- Vamos definir agora as propriedades do seletor #topo:

Teste no navegador.

Obs: Com a propriedade width em 100% fazemos com o que o seletor topo ocupe 100% do espaço disponível como ele esta dentro da div tudo lá no HTML e a div tudo tem a largura de 960 pixels  a minha div topo terá o mesmo tamanho, porém eu poderia definir a div topo também em pixels e não em porcentagem.

11-  O seletor #conteudo:

Teste no navegador

12 – O seletor #sidebar:

Teste no navegador observe que A DIV SIDEBAR ficou abaixo da div conteúdo então precisamos inserir a propriedade FLOAT tanto no seletor #SIDEBAR quanto no seletor #CONTEUDO, veja o exemplo:

Teste no navegador observe que agora a div SIDEBAR ficou a direita e a div CONTEUDO ficou a esquerda graças a propriedade FLOAT.

13 - Por ultimo rodapé:

Salve e teste no navegador.

Observe que você tem uma estrutura padrão para site utilizando CSS e sem fazer o uso de tabelas.

Qualquer dúvida é só comentar.

Fui...