anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como criar um Menu Pop-Up no Fireworks

Capa do Post Fireworks Pop Up

Que o Fireworks é um programa cheio de recursos, ninguém tem dúvida. Apesar de anunciado recentemente que o programa será descontinuado pela Adobe, ele ainda reserva excelentes recursos e boas surpresas para aqueles que o utilizam na montagem de uma página web. Que tal fazer um Menu Pop Up bonito e funcional em poucos passos? O Blog do Web Design vai te mostrar como!

– Nota do moderador: o post que você irá ler a seguir foi escrito pelo instrutor Elson Lorena, da Microcamp Praia Grande. Você pode conhecer melhor o Elson e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog. 

Olá amigos do Blog do Web Design, tudo bem? Hoje vamos falar um pouco sobre um recurso muito importante na realização de uma página da web. É o Menu “Pop-Up”. Para quem não conhece, esse menu é um elemento que soluciona o problema de acomodar uma variedade de links em um espaço reduzido. O Fireworks possui uma ferramenta com opções que contém um leque de opções e de aplicações para construirmos esse elemento tão comuns em páginas web.

Importante: para a realização deste tutorial, você deve utilizar a versão CS5 ou superior do programa.

Vamos começar?

Construindo um Botão

Para iniciarmos a construção do nosso Menu, vamos abrir um documento novo (Arquivo > Novo ou use o atalho Control + N)  com o tamanho  505×120 pixels, resolução de 96 pixels e fundo Branco.

Com o documento novo criado, vamos preparar um fundo com a ferramenta Retângulo, onde iremos construir um botão que servirá para que o usuário possa passar o cursor do mouse, liberando o efeito.

Ferramenta retangulo

Desenhe um retângulo com o tamanho de 505×35 pixels. Pinte o Retângulo com a cor que desejar, como você pode ver na imagem abaixo.

Retângulo

Agora desenhe um outro retângulo de tamanho 75×25 pixels e escolha uma cor para ele. Depois, digite um titulo para o botão utilizando a ferramenta Texto. Esse botão dará acesso a primeira página do site que aqui será HOME, como na maioria dos casos.

Botão home

Crie os demais Botões como na imagem a seguir:

Botões diversos

Criando FATIAS

Agora, vamos usar a ferramenta FATIA para criar uma área sensível em cima do botão. Essa ferramenta está na barra lateral do programa, no conjunto de ferramentas Web.

Ferramenta fatia

Com a ferramenta, desenhe uma Fatia em cima do Botão Serviço:

fatia botão serviço

Criando o Menu Pop-Up

Após desenhar a fatia, selecione-a e clique no menu Modificar , depois em Menu Pop-Up e logo em seguida na opção Adicionar menu pop-up:

Menu Pop Up

Aparecerá uma janela chamada Editor de menu pop-up. Ela é muito importante porque é com ela que faremos mudanças na estrutura e no visual de nosso menu.

Editar Pop Up

No campo Texto podemos colocar a opção que aparecerá no Pop-Up do botão, já em Link podemos colocar o endereço da Página que abrirá ao ser clicado, e em Destino colocaremos a maneira da página ser aberta (se ela será aberta na mesma página, em uma outra página etc).

opção Pop-Up

Ao clicar em Avançar entraremos na aba Aparência, onde podemos alterar as opções das Células, a Fonte e os Tamanhos. Podemos alterar também o Estado Normal do Botão e o Estado Sobreposto, onde serve para escolher a cor do botão quando o cursor do mouse estiver por cima dele.

Aba Aparência

Ao clicar em Avançar, entraremos na Aba Avançado, nela poderemos alterar a Largura e Altura das caixinhas do Menu Pop-Up.

Aba Avançado

Ao clicar em Avançar, entraremos na ultima aba chamado Posição, onde poderemos alterar o local onde aparecerão as opções do Menu Pop-Up.

Aba Posição

Pronto. Ao clicar no botão de Concluído, poderemos conferir o resultado de nosso trabalho, ou seja, o nosso Menu Pop-Up. Aperte F12 para visualizar no seu navegador:

Concluido

Esse processo deverá ser repetido em todos os botões do Menu em que você desejar inserir esse efeito.

Finalizando

Agora você poderá exportar seu documento no formato HTML e colocar as imagens em uma subpasta. Para isso, pressione CTRL+SHIFT+R.  Escolha as opções de exportação como você vê na imagem a seguir: Exportar HTML e imagens, Exportar fatias, Página Atual, Incluir áreas sem fatias e colocar imagens em subpasta.

Salvando

Se seguiu todos os nossos passos demonstrados aqui, seu menu pop-up está funcional e pronto para ser inserido em sua página da web!

Gostou? Você quer outras dicas ou tutoriais sobre Fireworks? Você pode postar os seus comentários e deixar a sua contribuição. Não esqueçam também de curtir e compartilhar com os amigos… O Blog do Web Design agradece. Até o próximo post!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

O fim do Fireworks e da Adobe Creative Suite – O que isso significa?
A Adobe anunciou que a Creative Suite deixará de existir após a versão CS6 e