Neste capitulo mostrarei como montar o rodapé, fatiar epreparar as imagens para exportação. 

Abra o Fireworks CS4 e em seguida o arquivo “wireframe_site.png”.

A ideia é deixar o rodapé conforme ilustra a imagem 30.

Imagem 30



Vamos ao que interessa.

Estou utilizando a fonte Cambria, size 12 para o endereço, telefone e e-mail. E para os menus a fonte é a mesma sendo que o size 13 é claro que os dados são fictíciosfica a sua escolha destas informações.

Depois de ter criado o rodapébasicamente o layout do site foi finalizado ele deverá ficar parecido conformeilustra a imagem 31.

Imagem 31



Agora eu vou agrupar e separar as4 partes do site, quando falo das 4 partes eu me refiro menu, banner, corpo e o rodapé. Vou começar atacando pelo menu então o selecione e pressione Ctrl+ G para agrupá-los.

Em seguida pressione Ctrl + Cpara copiar, Ctrl + N para um novo documento e Ctrl + V para colar o menu. Depois disso crie uma pasta com onome “fireworks_png” e salve oarquivo com o nome de “menu.png”.

Repita o procedimento para o banner, corpo e o rodapé. Abaixo asimagens 32, 33, 34 e 35 ilustram como as partes deverão ficar agrupadas.

Imagem 32


Imagem 33


Imagem 34


Imagem 35



Depois de ter agrupado eseparados os arquivos “png” agoravou exportar todas as 4 partes. Antes crie mais uma pasta com o nome “menu” no Fireworks selecione o arquivo menu.png e pressione Ctrl + Shift + R.A imagem 36 ilustra a tela de exportação.

Imagem 36

Deixe todas as opções marcadas eclique em Save. Note que dentro da pasta “menu” o sistema criou uma subpasta “images” contendo todas as imagens fatiadas do menu e um arquivo com o nome “menu.htm”.A imagem 37 ilustra os arquivos de imagens geradas.

Imagem 37

Agora selecione o arquivo “banner.png” pressione novamente Ctrl +Shift + R e salve dentro da pasta “imagens”com o nome de “banner.jpg”. Repitaeste procedimento para o arquivo “corpo.png”e “rodape.png”.

Nota: Em matéria de organização dos arquivos do site, mova paradentro da pasta “fireworks_png” oarquivo “wireframe_site.png” queesta dentro da pasta “imagens”.

Bom finaliza mais um capitulo e aparte de utilização do Fireworks CS4. No capitulo 6 vou trabalhar com oservidor web Apache2triad e o Dreamweaver CS4 junto com barra Developer ToolBoxCS4, para você que está acompanhando o tutorial desde o 1º capitulo, paracontinuar acompanhando será necessário estar instalados estes programas citadosanteriormente.

Vou deixar aqui os arquivos “png” para downloads.

Em caso de dúvidas ou sugestões deixem seu comentário queserá bem vindo.

Até a próxima.