Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 3

(Continuação)
1. Agora começaremos a criar as divs para dividir a página. Criamos as divs onde vamos acomodar cada item respectivo. Observe que a imagem indica setas coloridas onde você pode fazer a associação a cada item.



2. Agora vamos colocar uma palavra dentro de cada um, para quando visualizarmos no navegador, (salvando e abrindo no Firefox ou apertando F12 no Dreamweaver) ela apareça e fique mais fácil de distinguir. Colocamos uma palavra dentro de cada um, Rodapé, foto conteúdo, e nosso menu. Não colocamos as palavras dentro de Box tudo, content e topo porque elas já acomodam as outras divs citadas.

3. Se visualizarmos no navegador, já aparece assim.

4. No arquivo CSS criaremos uma regra para cada div como vê na imagem.

5. E acrescentamos uma cor diferente de background para cada regra. Note que acrescentei o “margin 0 auto”, que é para todo o conteúdo colar em suas extremidades. Se salvarmos o arquivo index.html e o css e visualizarmos no navegador, só vai aparecer as div Rodapé, Foto no conteúdo e nosso Menu com as cores escolhidas, visto que ainda não definimos o tamanho dos itens. ( De acordo com o nomenclatura oficial, chamamos de Seletor o primeiro item, Propriedade o segundo e Valor o terceiro. Ex. #content { background-color: #0D24F2} /  #Content é Seletor, background-color: é a propriedade e #0D24F2; é valor. )

6. Definimos essas regras no nosso CSS e salvamos os arquivos. Quando visualizamos no navegador, aparece desse jeito.

7. Agora no Photoshop, com a ferramenta Crop, cortamos o fundo laranja de cima para baixo, no nosso arquivo layout.

8. Selecione File / Save for Web and devices e Salve com a altura do nosso background CSS que é a DIV Box tudo, 667 px. E a largura deixe 1px. Salve como jpg para preservar a qualidade da imagem. Atente para clicar o iconezinho do lado da caixa Image Size, na janela que aparecer. Ela deixa você escolher as dimensões sem diminuir proporcionalmente. Crie uma pasta chamada “images” dentro da pasta do seu site. E salve a figura como background.jpg.

Próximo

Este post é parte integrante de um tutorial sobre como criar um site simples usando PSD, html e CSS. São 7 partes.
Acompanhe abaixo.

Parte 1 / Parte 2 / Parte 3 / Parte 4 / Parte 5 / Parte 6 / Parte 7

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *