MONTANDO O CORPO DO SITE – PARTE 1

 

Tudo bem com vocês?!

 

Neste tutorial vou ensinar a criar o corpo para nosso site. Muitos podem se questionar sobre o que é o corpo do site. A resposta é simples: corpo do site é a parte central do site, onde incluiremos nossas chamadas para páginas secundárias. Outra pergunta que pode surgir é: “Tenho sempre que fazer desta forma?”. A resposta é NÃO, pois poderá buscar novos meios de se criar um corpo para o site, destacando as principais áreas. A palavra chave neste caso é criatividade. Vou ensinar a criar um, entre vários, modelos existentes. Vale aqui a ressalva de que não quero ver ninguém copiando este layout. Podem utilizá-lo para tirar idéias, mas nunca copie um layout. Veja na figura abaixo nosso efeito final:

 

 

Como para aprender temos que praticar, mãos ao mouse (rs).

 

1) Abra o arquivo que estamos desenvolvendo (com extensão .png).

 

2) Primeiramente, desenvolveremos a parte central do site. Crie um retângulo de 420 x 475 pixels sem cor de fundo e com contorno azul e o posicione ao lado do menu lateral.

 

 

3) Crie um outro retângulo de 150 x 20 pixels com o fundo na cor “#FFE6CC” e o contorno azul.

 

 

4) Utilizaremos agora uma ferramenta ainda não trabalhada. Trata-se da Ferramenta Inclinar (atalho: Q). Com o retângulo selecionado, acione esta ferramenta. Surgirá algumas “alças”. Serão nestas “alças” que daremos o efeito de inclinado. Para tal, clique na alça superior central puxando, levemente, para a direita.

 

OBS: Para inclinar o retângulo, o ponteiro do mouse terá que virar uma seta de ponta dupla. Veja a seguir:

 

        

 

5) Ainda com o retângulo selecionado, vamos aplicar um efeito em sua borda. Vá até sua propriedade Textura e escolha a opção “Linha vertical 3” e mude o valor da quantidade de textura para 100%. Posicione o retângulo no canto superior direito do retângulo maior, criado há pouco.

 

 

6) Selecione a ferramenta Texto e digite a palavra “Destaques”, posicionando-a na lateral direita do retângulo. Configurações: fonte: Tahoma, tamanho: 13, cor: “#EC7600”.

 

 

7) Para incrementar este retângulo, utilizei os botões do estilo XP que ensinei a fazer. Dupliquei as bolinhas (atalho: Ctrl+Alt+D) do menu lateral e alterei apenas o tamanho das mesmas, começando pequena e indo até a maior. Veja como deverá ficar o retângulo após a inserção das bolinhas:

 

 

8) Nossa tarefa agora é inserir as linhas de divisão para o retângulo maior. Selecione a ferramenta Linha e crie uma linha horizontal de um lado ao outro do retângulo. Sua linha deverá medir 419 pixels.

 

DICA: Para se criar uma linha reta perfeita, pressione a tecla SHIFT durante o processo de criação.

 

 

 

9) Duplique esta linha 3 vezes (atalho: Ctrl+Alt+D) e as posicione para o restante do retângulo, buscando alinhá-las entre si.

 

 

10) Nosso retângulo central está prontinho! Vamos para a barrinha do rodapé. Crie um retângulo de 720 x 20 pixels e posicione-a na parte inferior do retângulo maior.

 

 

11) Mude o preenchimento do retângulo para o efeito Radial, em Categoria de preenchimento. As cores a ser utilizada são: laranja claro: “#FFE7CE” e laranja escuro: “#FFA953”.

 

        

 

 

12) Com a ferramenta Texto digite a seguinte frase: “Copyrigth 2005 – Todos os direitos reservados” e a posicione ao centro. Configurações: fonte: Tahoma, tamanho: 12, cor: “#000000”.

 

 

13) Ao finalizar a barrinha, nosso layout terá que ter a seguinte aparência:

 

 

Ok galera, por hoje finalizamos por aqui! No próximo tutorial acabaremos o corpo de nosso site.

 

Até a próxima !

 

Enviem suas sugestões, críticas, dúvidas para o e-mail webdesigner.pro@pop.com.br.

 

Um cordial abraço,