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

(Continuação)

1. Chegamos a etapa final do projeto. Comece colocando os dados dentro da div Footer (rodapé). Aquele símbolo do Copyright, colocamos com “&copy”, como pode ver na imagem, quando abrir o arquivo no navegador, ele vai ler como o símbolo.



2. Preenchemos o rodape, mas teve alguns erros. O rodapé ficou alinhado à esquerda e queremos centralizá-lo. Há outro erro. A imagem de background, aquela fita de 1 px de largura, pois é, ela ficou muito pequena para nosso layout, mas não precisaremos abrir o photoshop novamente. Vamos ajeitar isso pelo CSS.

3. Para corrigir, vamos diminuir a altura da div content.

4. Veja como melhorou.

5. No rodapé vamos deixar a font em negrito e centralizá-la. Observe que entrou font-weight e text-align e #rodape.

6. Também deu certo.

7. Agora criaremos a pagina “Quem somos”, para quando clicarmos no link “Quem somos” no menu, ele redirecione para essa página. Pressione Ctrl + N e escolha Html.

8. Salve o arquivo como quemsomos.html.

9. Copie todo o conteúdo da index.html pressionando Ctrl+C e colando na página “Quem Somos”, que ainda não tem nome, e altere o título dela na parte de cima.

10. Vamos agora Eliminar tudo que não queremos no “Quem somos”, e colocar o que queremos. As imagens e o texto em parágrafo e também subtítulos usando H2, que já está configurado no CSS.

11. Essas são as imagens que usamos até agora, as que estão dentro da pasta “images”. Note que acrescentei “maria.jpg” e “marido.jpg” antes de  configurar as imagens em quemsomos.html.

 

12. Depois de tudo, veja como fica no navegador, caso acessemos o arquivo Index.html e clicarmos em “Quem somos”. Mas surgiu um problema, as duas imagens ficaram uma em cima da outra e nós queremos deixá-las uma do lado da outra.

13.Em style.css, entramos com uma nova regra, “#fotoconteudo img” para informar que queremos que a imagem flutue à direita.(float left). Não seesqueça,na tag que chama a imagem (img) precisamos dizer também qual a largura e altura da imagem e elas tem que caber direitinho dentro.

14. Agora melhorou.

15. Como você acabou de fazer a página “Quem somos” com a ajuda do tutorial, você já tem condições de fazer sozinho a página de contato.



 

Pronto agora é só mandar esses arquivos para o servidor, que quando uma pessoa acessar o endereço, abrirá automaticamente a página “index.html”.

Coloquei o site feito no servidor. >> http://marianutricionista.vej.am

Se quiser, pode ver este tutorial sobre Favicon, para instalá-lo no site.

Espero que tenha ajudado, até mais!

Início

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 *