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...
