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
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.
|
" title="imagem8" alt="imagem8" />
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. |
