Artigo

Site completo com sistema de notícias . Capítulo 2

Sejam bem vindos ao tutorial de como “Criar um site completocom sistema de notícias”.

Capitulo 2

Neste capitulo estarei mostrando com fazer as alteraçõesnecessárias do Wireframe.Vou começar montando as partes do topo, banner, conteúdo (corpo do site) e porúltimo o rodapé.

Praticando:

Abra o Fireworks CS4 e em seguida o arquivo “wireframe_site” salvo dentro da pasta “imagens” conforme ilustra a imagem 4.


Imagem 4


 

Notem que o nome do arquivo aparece como um item recenteneste caso é só selecionar. Caso não esteja em sua listagem selecione em “Open” para localizá-lo na pasta “imagens” onde foi salvo.

Feito isso o arquivo deve aparecer conforme ilustra a imagem 5.

 

Imagem 5

Selecione em RectangleTool  e desenhe 8 retângulos com asseguintes medidas e cores:

Retângulo 1

Cor: #000000

Width: 845px

Height: 4px

 

Retângulo 2

Cor: #f0f0f0

Width: 845px

Height: 106px

 

Retângulo 3

Cor: #000000

Width: 845px

Height: 4px

 

Retângulo 4

Cor Linear: #00CC33, #0000FF

Width: 845px

Height: 255px

 

Retângulo 5

Cor: #000000

Width: 845px

Height: 4px

 

Retângulo 6

Cor: # f0f0f0

Width: 845px

Height: 353px

 

Retângulo 7

Cor: #000000

Width: 845px

Height: 4px

 

Retângulo 8

Cor Linear: #009966, #003300

Width: 845px

Height: 75px

 


Os retângulos deveram ficar parecidos conforme ilustra a imagem .


Imagem 6

 

Depois disto alinhem os retângulos um debaixo do outroconforme ilustra a imagem 7.

Imagem 7


 

Basicamente a estrutura do site esta montada e é isso que euquero, agora vou criar a logomarca e suas propriedades.

Abaixo as configurações utilizadas na logo.

Fonte: Britannic Bold

Para a letra “B”utilizei a cor #006C39;

Para “usiness”utilizei a cor #333333;

Para “on line” utilizei a cor #666666;

A logomarca deverá ficar parecida conforme ilustra a imagem 8.

Imagem 8

" title="imagem8" alt="imagem8" />

Agora vou criar o menu e suas propriedades. Acrescente um retângulo com a seguinte medida e cor:

Width: 120px

Height: 28px

Cor: #000000

Roundness: 51%

Selecione a Text Tool e escreva a palavra SOBRE em cima do retângulo, com o Shift pressionado selecione os dois objetos. Em seguida selecione o menu Windows>Align e selecione o ícone conforme ilustra a imagem 9.

 

Imagem 9

 

O retângulo deverá ficar parecido conforme ilustra a imagem 10.

 

Imagem 10

 

Com os objetos ainda selecionados vou agora transformá-losem um botão. Dê um Ctrl + X e em seguida Ctrl + Shift + F8. Na sequencia dê umCtrl + V para colar os objetos.

Vou ter o seguinte resultado conforme ilustra a imagem 11.

Imagem 11


 

Vocês devem estar se perguntando: Mas a cor do botão erapreto? É simples eu mudei o State:de Up para Over em seguida mudei a cor para #006C39 e o tamanho da fonte para 15. Desta forma toda vez que passar o mouse no botão vai aparecer oefeito “hover”(estarei abordandomelhor sobre este efeito quanto eu chegar em Tableless, onde utilizarei o CSS), ou seja, acor de preto vai mudar para verde.

Depois de criar o botão selecione em Page 1 conforme ilustraa imagem 12.

Imagem 12

 

Agora vou duplicar o botão criado, pressionando as teclasCtrl + Alt + D. Repita esta ação 4x.

Depois de criar os demais botões vou mudar os textos, ouseja, o nome de cada um  conforme ilustraa imagem 13.

 

Para mudar o texto é só selecionar o botão desejado edigitar o nome em Text:

Bom assim finalizo o segundo capitulo deste tutorial. No terceirocapitulo mostrarei como fazer o banner do site.

Espero que tenham gostado e até a próxima.