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

(Continuação)
1. Agora partiremos para a configuração do corpo do site. Note na imagem abaixo que acrescentei uma imagem de 300px por 200px, e coloquei o comando dentro da div Fotoconteudo, que a mesma se encontra dentro da div CONTENT. O ideal seria colocar ela fora da div content, mas na hora que você estiver fazendo, você escolhe.

2. Visualizando no navegador.

3. Defina o tamanho, margem e borda dela usando os dados como na imagem abaixo.

4. Assim ela ficará no centro, por causa da aplicação de margin, e também terá bordas.

5. Acessei um site especializado para desenvolvedores, para criar um texto aleatório sem sentido, só para ilustrar. Lipsum.com. Mas como você está fazendo seu projeto, ou de um cliente, é necessário que você escreva os dados adequados. Note que eu coloquei título dentro da tag H1 e parágrafos dentro da P. tudo isso dentro da div content.

6. Visualizando no navegador, ficará deste jeito.

Ou seja, está tudo desconfigurado, mas logo iremos arrumar este estilo de fonte.

7.Vamos no arquivo CSS e definimos h1 e p para todo documento logo, para não estar precisando sempre de colocar os comandos dentro das tags. Veja na imagem como fazer. Mas atente só uma coisa, a propriedade “font” deve vir primeiro que todas, seguida de “font-size”, depois que vem color, coloquem certo aí no documento de vocês. Desse jeito que fiz, com os comando misturados também funciona, mas é melhor seguir o padrão.

8.Visualize no navegador para ver como ficou.
Note que o texto ficou muito colado nas laterais. Vamos ajeitar isso

9. Em content, no arquivo CSS, defina o “padding”, que é margem interna(ou enchimento) para 35pixels (só na parte de cima, para o conteudo descer mais) e “margin’ e “height” como vê na imagem.

10. Note que tudo ficará mais ajustado agora.

11. Coloquei mais conteúdo para ilustrar.

12. Veja como ficou.

13. Se retirarmos todos os backgrounds ilustrativos (background-color:#xxxxxx que colocamos para gerar uma cor em cima do nosso background laranja padrão), veja como fica.

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 *