Minicurso Desenvolvendo layouts com CSS

18

description

Minicurso de CSS

Transcript of Minicurso Desenvolvendo layouts com CSS

1º Passo:

• Desenhe a mão um esboço do layout da página.

• Atente-se a cada detalhe que o cliente tenha passado.

• Nesta etapa seja fiel as ideias do cliente.

2º Passo:

• De posse do esboço, é hora de começar a desenvolver o Layout propriamente dito.

• Nesta etapa, sinta-se a vontade para fazer alterações.

• Aprove o Layout com o cliente.

3º Passo:

• Fatie o Layout, utilize um programa de editoração gráfica.

• Eu utilizo Adobe Photoshop, porém outros programas como Corel Draw, Ilustrator, Fireworks e até mesmo o Paint podem ser usados.

Navegadores:

• Os navegadores são organismos vivos, sendo assim, enfrente-os com força máxima.

• Cada um deles tem particularidades, ou seja, é normal um comando gerar um retornos diferentes. Mas no final, o resultado em todos eles devem ser o mesmo.

Mozilla Firefox

Google Chrome

Internet Explorer

Desenvolvedor

4º Passo:

• Agora sim, vamos começar a diversão.

• Divida o Layout em grandes áreas, como “Topo”, “Conteúdo Central”, “Lateral Esquerda”, “Lateral Direita” e “Menu”.

5º Passo: • Vamos criar outras div’s que

possibilitarão maiores possibilidades de controle.

Quatro dicas importantíssimas sobre CSS

1 - Utilize declarações abreviadas Ex: margin: 10 5 10 0; 2 - Organize a identação 3 - Estabeleça padrões de nomenclaturas 4 - Especialize classes (criando outras classes que retiram atributos indesejados em uma classe)

margin-top: 10px; margin-right: 5px; margin-bottom: 10px;

margin-left: 0px;

“...Não importa se tocam a primeira parte da canção.

A gente escreve o resto, em linhas tortas, nas portas da perseguição.

Em paredes de banheiro, nas folhas que o outono leva ao chão.

Nos livros de história, seremos a memória dos dias que virão”...

Exército de um Homem Só

Engenheiros do Hawaii