CRIAÇÃO DE NEWSLETTER – PARTE 4

 

Oi turma, tudo bem?!

 

Este tutorial é a seqüência da série Criação de Newsletter no Macromedia Fireworks. Vamos exportar as fatias que criamos no tutorial anterior e editá-las no Macromedia Dreamweaver, além de aprender algumas técnicas novas.

 

Ao final teremos um resultado semelhante ao seguinte:

 

Figura 01: exemplo final.

 

Vamos à prática!

 

1) Abra, através do menu File, Open... o arquivo com extensão .PNG que estamos trabalhando.

 

Figura 02: menu abrir.

 

Figura 03: newsletter criada e fatiada no Fireworks.

 

2) Como já “fatiamos” nosso layout e escolhemos a qualidade de exportação, basta exportá-lo. Acesse o menu File, Export... ou o atalho do teclado Ctrl + Shift + R.

 

Figura 04: menu Export.

 

3) Surgirá a janela Export, onde devemos configurar de acordo com nosso projeto. No primeiro campo, Salvar em, escolha o diretório onde salva os arquivos referentes a newsletter. No campo Nome do arquivo digite “Exemplo_newsletter”, no campo Export devemos escolher o que desejamos que seja exportado. Para nosso projeto, escolha HTML and Images. As demais opções deixe os formatos padrão e clique em Export. Veja:

 

Figura 05: preenchimento da janela Export.

 

4) Desta forma teremos exportado nossas fatias e teremos um arquivo com extensão .HTML para editar no Dreamweaver. Vá até o diretório onde salvou o arquivo e clique com o botão direito no arquivo “Exemplo_newsletter.html” e acesse a opção Edit With Dreamweaver 8.

 

Figura 06: menu para editar o arquivo no Dreamweaver.

 

Figura 07: arquivo aberto no Dreamweaver.

 

5) Com o arquivo aberto no Dreamweaver podemos executar diversas tarefas. A primeira será mudar o título do cabeçalho da página. Na opção title digite o nome que deseja dar ao cabeçalho da página. Veja:

 

Figura 08: nomeando o cabeçalho da página.

 

6) Se você clicar com o mouse sobre o layout perceberá que as quatro fatias criadas no Fireworks estão presentes no layout editado pelo Dreamweaver. Isso te possibilita inserir links nas fatias, colocar um texto descritivo que quando o usuário passar o mouse sobre uma fatia qualquer irá aparecer uma caixa de texto. Vamos ver como se cria link nas fatias. Selecione a fatia superior e selecione a ferramenta Rectangular Hotspot Tool, que se encontra na parte inferior esquerda da janela. Veja:

 

Figura 09: ferramenta Rectangular Hotspot Tool.

 

7) Faça um retângulo com esta ferramenta sobre a logomarca Fábio Almeida.

 

Figura 10: criando um link para a logomarca Fábio Almeida.

 

8) Após ter criado a área de link, vá até suas propriedades (Properties) e defina da seguinte forma:

 

Figura 11: editando as propriedades do link.

 

No campo Link devemos informar o caminho completo da página que desejamos exibir. Já no campo Target informamos como a página será exibida; _blank significa que a página será aberta em uma nova janela. A propriedade Alt serve para inserirmos algum texto para quando o usuário passar o mouse sobre a área do link este texto aparecer.

 

9) Para finalizar nosso tutorial, vamos reforçar os conceitos aprendidos no passo anterior. Façamos um link no rodapé para a página https://juliobattisti.com.br. Acompanhe os passos abaixo:

 

Figura 12: seleção da fatia desejada.

 

Figura 13: seleção da ferramenta Rectangular Hotspot Tool.

 

Figura 14: criação da área de link.

 

Figura 15: propriedades da fatia criada.

 

Como resultado final teremos o seguinte:

 

Figura 16: resultado para a fatia criada sobre a logomarca de Fábio Almeida.

 

Figura 17: resultado para a fatia criada sobre o rodapé.

 

É isso aí galera, chegamos ao final de mais um tutorial da série Design – Fireworks.

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

Estou à disposição de todos! Envie suas críticas e/ou sugestões para o e-mail webdesigner.pro@pop.com.br. Terei todo prazer em atendê-lo.

 

Pessoal, trago uma boa notícia a todos os que acompanham os tutoriais da série Fireworks, aqui no site do Júlio Battisti. Já estão à venda os cursos Fireworks Básico – Passo a Passo e Fireworks – Aprenda na Prática, ambos de minha autoria. É uma maneira fácil e didática de se aprender esta maravilhosa ferramenta de design. São inúmeros exemplos práticos que irão te levar a um mundo totalmente real em se tratando de design em geral. Clique aqui para saber mais sobre o curso Fireworks Básico – Passo a Passo e acesse o site https://juliobattisti.com.br para saber mais sobre o curso Fireworks – Aprenda na Prática.

 

Galera, participem do Fórum de Fireworks no site https://juliobattisti.com.br/ e troque conhecimentos com diversas pessoas. Acesse já!

 

Caso tenha dúvida(s), entre em contato comigo através do e-mail webdesigner.pro@pop.com.br.

 

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral, enviem e-mail para: webdesigner.pro@pop.com.br e solicite seu orçamento. Profissionalismo sempre!

 

Até a próxima!

 

Um cordial abraço a todos,

 

Fábio Almeida