Como criar e usar um menu popup com o Fireworks MX e Dreamweaver MX

Neste tutorial será explicado como criar e usar um menu popup com os softwares Fireworks e Dreamweaver (ambos na versão MX). Ao iniciar o Fireworks, deve-se criar um novo documento de 430x300 px. com a cor branca como fundo e em seguida desenhar uma interface. Neste exemplo, forai criada uma empresa fictícia chamada 'Lex Advogados':

Selecione o objeto que terá de ser clicado para o menu aparecer. Com o botão direto, clique e selecione Inserir fatia. Neste exemplo, foi escolhida a caneta como o 'ícone do menu'. Após inserir a fatia o objeto ficará assim:

Clicar na fatia e selecionar no menu Modificar -> Menu pop-up -> Adicionar menu pop-up. Uma janela chamada Editor de menu pop-up será aberta. Na primeira aba (Conteúdo) deve-se digitar todos os itens do menu:

Neste exemplo há uma amostra de todas opções disponíveis: foram criados tópicos (Quem Somos, Clientes, Artigos, Fale Conosco) e sub-tópicos (História e Área de atuação, Pessoas Físicas e Pessoas Jurídicas). E foi usada a opção 'Destino' para _blank (nova página). O uso desta aba é bem fácil: o primeiro botão adiciona uma nova linha de menu; o segundo remove uma linha (caso haja sub-tópicos pendentes nesta linha eles também serão removidos); o terceiro recua uma linha para a esquerda e finalmente o quarto menu recua uma linha para a direita (criando assim um sub-tópico).

Agora clique no botão Próximo no canto inferior desta janela. Na aba 'Aparência' terão as seguintes opções:

Esta aba muda de acordo com a seleção ativa na opção 'Células' e nesta opção é possível determinar se as células serão feitas usando códigos HTML ou se será criada imagens. Na imagem acima a opção ativa é HTML e abaixo veremos a mesma aba com a opção 'Imagem' ativa.

Ao lado da opção 'Célula' pode-se escolher se o menu será vertical ou horizontal. O resto das opções são simples: escolhe-se a fonte, o tamanho, se será em negrito e/ou em itálico e escolhe-se uma entre as três opções de alinhamento do texto dentro da célula (tudo isto com acompanhamento em tempo real por um quadro em baixo da janela). Por fim temos as opções de 'Estado Acima' e 'Estado Sobre', sendo que em ambas são escolhidas a cor do texto e a cor da célula. O estado 'acima' é o estado normal da célula e o 'sobre' define qual será a cor de fundo e a cor do texto quando se passa o mouse por certa célula.

A mesma aba com a opção 'Imagem' selecionada:

São as mesmas opções com a grande diferença de permitir a escolha de 'Estilos' para a célula ! Clique em 'Próxima' para passar para a próxima aba: ela chama-se 'Avançada' e oferece boas opções de aprimoramento do menu ao destino final. Veja:

Nos campos de Largura/Altura da célula é possível determinar um número, em pixels, para as dimensões das células ou deixar no modo 'Automática' em que as células serão ajustadas ao texto. Os campos de preenchimento da célula e espaçamento entre as células representam as tags: cellpadding e cellspacing, respectivamente. O campo 'Recuo do texto' define o tamanho do espaço entre o canto esquerdo e o início do texto e a 'Espera do menu' escolhe-se o tempo que irá demorar para o menu aparecer.
A caixa 'Mostrar borda' habilita ou não o aparecimento das bordas no menu. Por fim, as quatro últimas opções: Largura da Borda, Sombra, Cor da Borda e Realce. Estas opções não estão disponíveis quando são usadas imagens ao invés de HTML para a construção do menu.

A última aba (Posição) é esta:

Basta selecionar uma das pré-disposições de menu ou entrar com oss próprio valores. Para ter mais informações sobre cada opção basta passar o mouse sobre elas. Após isso deve-se clicar em Concluído. A aparência agora será esta:

Note que há uma tabela com 4 linhas: ela representa o menu. Arraste-a para onde desejar que ela apareça. Agora selecione o menu Arquivo -> Visualizar Exportação para que você escolha o formato mais adequado à interface criada. Caso haja muitas cores (como dêgrades), dê preferência ao formato JPEG e se houver poucas cores utilize o formato GIF (como neste exemplo). Clique então em Exportar e caso apareça um aviso dizendo que as fatias serão ignoradas, clique em OK. Escolha uma pasta onde será salvo o arquivo HTML e configure as opções desta maneira:

Nome: Escolher um nome para o arquivo HTML. No exemplo usamos: lex.htm
Salvar como: HTML e imagens
HTML: Exportar arquivo HTML

Nas três últimas caixas deixar marcada apenas as caixas de seleção 'Incluir áreas sem fatias' e 'Colocar imagens na subpasta'. A caixa 'Incluir áreas sem fatias' faz com que todas as partes mesmo as sem fatias sejam exportadas e a segunda caixa 'Colocar imagens na subpasta' proporciona uma maior organização dos arquivos. Após marcar esta caixa, clique em 'Procurar' e crie uma subpasta imagens dentro da pasta que ficará o arquivo HTML clicando em Abrir logo em seguida. A parte inferior ficará assim:

Clique em Salvar.
Agora será usado o Dreamweaver: crie um novo documento e salve-o na mesma pasta onde o arquivo HTML do Fireworks está. Clique em Inserir -> Imagens Interativas -> HTML do Fireworks. Localize o arquivo HTML do Fireworks e clique duas vezes sobre o mesmo, certificando-se que a caixa 'Excluir o arquivo após a inserção' não está marcada. Se tudo ocorreu bem você terá a mesma interface criada no Fireworks agora no Dreamweaver. Também é possível que acima da tabela haja o ícone : ele representa o script em JavaScript gerado pelo Fireworks com todas informações do menu.

Salve novamente o arquivo e visualize-o no navegador (pressione a tecla F12). Pronto!
Veja aqui como ficou o arquivo final usado no exemplo: lembre que, como é apenas um exemplo os links não funcionam. Para baixar o arquivo fonte (PNG) usado neste exemplo, visualize esta imagem e depois clique com o botão direito do mouse escolhendo a opção Salvar. Depois abra-a no Fireworks :) ...