MONTANDO O CORPO DO SITE – PARTE 2

 

Olá galera, tudo beleza com vocês?!

 

Iremos neste tutorial dar continuidade à criação do corpo do site. Lembra-se o que vem a ser o corpo do site? Vou refrescar um pouco a mente de vocês: Trata-se da área onde inserimos os links que farão as chamadas para as páginas secundárias. Agora que estão com o conceito fresquinho em mente, vamos dar continuidade.

 

1) Abra o arquivo que iniciamos no tutorial passado (com extensão .png).

 

 

2) Até o momento nossa página está da seguinte forma:

 

 

3) Crie um retângulo de 120 x 112 pixels sem cor de fundo e com o contorno na cor azul e posicione-o no canto superior direito da tela.

 

 

    

 

4) Duplique (atalho: Ctrl+Alt+D) o retângulo criado três vezes e posicione-os abaixo do original. Veja a aparência que a página deverá ter após a duplicação e posicionamento dos retângulos.

 

 

5) Agora vamos criar a parte superior para os retângulos criados. Selecione a ferramenta Linha e desenhe uma linha horizontal de 119 pixels e a posicione na parte superior do primeiro retângulo.

 

 

6) Utilize para a linha criada o mesmo efeito que usamos para construir as linhas de divisões do retângulo central. Suas configurações são: Linha Vertical 1, Quantidade de Textura: 90%, Cor da Linha: azul.

 

     

 

7) Seguindo, selecione e duplique (atalho: Ctrl+Alt+D) as três bolinhas utilizadas no retângulo central e as posicione a esquerda do retângulo menor no qual estamos trabalhando.

 

 

8) Faça o mesmo procedimento para o texto. Duplique-o (atalho: Ctrl+Alt+D) e o posicione a direita do retângulo que estamos trabalhando. Para o primeiro retângulo digite a palavra “Parceiros”. Configurações a serem utilizadas no texto:

 

» Fonte: Tahoma

» Tamanho: 13

» Cor: Laranja (#EC7600)

 

 

9) Repita os procedimentos 7 e 8 para completar a criação dos demais retângulos. Insira os seguintes textos:

 

» Segundo Retângulo: Curiosidades

» Terceiro Retângulo: Downloads

» Quarto Retângulo: Invente-se

 

 

10) Falta apenas criar a parte esquerda da página, onde será criada a parte de Newsletter e inserida a logomarca pessoal. Com a ferramenta Texto selecionada digite a palavra Newsletter e posicione-a abaixo do menu lateral. Configure o texto da seguinte forma:

 

» Fonte: Tahoma

» Tamanho: 14

» Cor: Preto (#000000)

 

 

11) Ainda com a ferramenta Texto selecionada, digite as palavras “Nome” e “E-mail”, utilizando as seguintes configurações:

 

» Fonte: Tahoma

» Tamanho: 11

» Cor: Laranja (#EC7600)

 

 

12) Crie dois retângulos de 125 x 16 pixels sem cor de fundo e com contorno na cor laranja (#EC7600) e os posicione logo abaixo das palavras “Nome” e “E-mail”.

 

 

13) Falta ainda criar o botão de Enviar. Crie um retângulo de 50 x 16 pixels sem cor de fundo e com contorno na cor laranja (#EC7600).

 

 

14) Digite a palavra Enviar e insira dentro do retângulo criado. Configurações para o texto:

 

» Fonte: Tahoma

» Tamanho: 11

» Cor: Cinza Escuro (#666666)

 

 

15) Para finalizarmos, importe a logomarca e a posicione abaixo da seção Newsletter. Acesse o menu Arquivo, Importar (atalho: Ctrl+R) selecionando a logomarca desejada.

 

         

 

 

16) Veja como ficou o layout final de nossa página:

 

 

Para obter um resultado final tão satisfatório quanto este, vale o esforço!

 

Muita bem galera, desta forma finaliza aqui mais um tutorial sobre esta maravilhosa ferramenta de design – o Fireworks.

 

Caso tenha dúvidas, sugestões, opiniões e até mesmo elogios, favor enviá-las para o seguinte e-mail: webdesigner.pro@pop.com.br

 

Acesse: www.fabio.trampos.net

 

Um cordial abraço,