Minicurso Desenvolvendo layouts com CSS

Page 1


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.


Desenvolvedor

Mozilla Firefox

Google Chrome

Internet Explorer


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;

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

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)





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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.