..: Construção de menu pop-up - Parte 3 :..

::Onde gravaremos o menu::

Tudo muito bom, tudo funcionando no navegador, mas de que me serve um menu que só posso visualizar quando teclo F12 no Fireworks? Como coloco o menu em minha página.

É isto que você aprenderá nesta última parte do tutorial. Vou mostrar como exportar o menu para um documento HTML e depois como colocá-lo na página.

Você conferiu e reconferiu tudo? Além de os submenus estarem abrindo, os links estão funcionando? Clicou em todos eles para testar? Muito bem, então vamos em frente.

Crie um diretório para gravar o HTML do menu.
Para exemplificar eu criei um diretório chamado menu-maujor.
Agora crie dentro do diretório menu-maujor, um subdiretório chamado imagens-menu-maujor
Para você não se perder, quando for fazer seus estudos uses os mesmos nomes que eu usei para os diretórios (fica mais fácil para acompanhar), pois mais tarde você pode deletar tudo e exportar o menu para outros diretórios que você cria ao seu gosto.

O documento HTML para o menu, será denominado de menu.htm e gravado no diretório menu-maujor. As imagens que serão geradas pelo FW serão colocadas no subdiretório imagens-menu-maujor

::Como gravar::

No FW (com o menu que você construiu, no palco, é óbvio) vá ao menu File => Export ou clique Ctrl + Shift + R para abrir uma janela conforme mostrado abaixo:

Salvar o menu

Esta janela contém tudo o que você precisa para exportar seu menu. Acompanhe a numeração na figura:

Escolha o local para salvar: o diretório menu-maujor;
Digite o nome do documento HTML : menu.html;
Escolha: HTML and images;
Escolha: Export HTML File;
Slice: Export Slices;
Marque as duas caixas de seleção;
Browse. Aqui você escolhe o diretório para colocar as imagens geradas pelo FW para o menu: imagens-menu-maujor;
Clique Export.

Pronto! Seu menu está gravado no HD da sua máquina.
Vamos dar uma olhada no diretório menu-maujor. Abra o diretório no Windows Explorer, ou equivalente que você use, e você verá algo parecido com o mostrado abaixo:

Arquivos no diretorio menu-maujor

Observe que agora, além do subdiretório imagens-menu-maujor, foram criados os arquivos menu.htm que é o HTML do menu e mm_menu.js que o script (javascript) que faz funcionar o menu.

Agora abra o subdiretório imagens-menu-maujor, e você verá algo parecido com o mostrado abaixo:

Arquivos no subdiretorio imagens-menu-maujor

Aqui estão gravadas as imagens do menu.
Você pode fazer algumas experiências interessantes, mudando as imagens geradas. Mas não altere as dimensões e nem o nome das imagens.
Por exemplo: a imagem arrows.gif é aquela flechinha preta em forma de triângulo que aparece nos links onde tem um submenu - Link - 3.4 e Link - 3.4.2 - . Abra arrows.gif no FW e altere a flechinha para um sinalzinho de mais "+" numa cor qualquer.

Você pode ao construir o menu no FW, ao projetar os Link - 1 ... Link - 4 em lugar de usar texto e retângulo com cor de um fundo, usar uma imagem de botão, mais elaborada, construida por você.

::Acessando o HTML do menu::

Localize o arquivo menu.htm e dê dois cliques para abrir no navegador. Agora você já pode visualizar seu menu fora do FW.
Vamos editar e examinar o código fonte de menu.htm. Abra o arquivo no seu editor HTML (Dreamweavwr, HTML-Kit, ou seja lá o qual você use, ou até mesmo o NotePad).
Para colocar o menu em uma página, tudo o que você porecisa é copiar e colar partes do código HTML gerado, como explicado a seguir:

Localize o seguinte trecho de código logo abaixo da tag <meta> até a tag </head>:

 <script language="JavaScript">
<!--
function mmLoadMenus() {
...
(várias linhas de código javascript)
...
//-->
</script>
<script language="JavaScript1.2" type="text/javascript" » 
src="mm_menu.js"></script>

Copie e cole este código na página onde será inserido o menu, logo acima da tag </head>;

Localize a tabela gerada, dentro da tag <body>

<script language="JavaScript1.2">mmLoadMenus();</script>
<table border="0" cellpadding="0" cellspacing="0" width="480">	  
...  
(várias linhas de código de uma tabela)
...	  
  </tr>
</table>

Copie e cole este código na página, no lugar onde você quer inserir o menu.

Salve a página com o nome a sua escolha (p.ex: página.htm) no mesmo diretório onde está menu.html.

::Salvando a página em outros diretórios::

Para que o menu funcione em uma página ela deverá estar no mesmo diretório onde foi gravado o HTML gerado pelo FW - menu.htm.

Se você quiser alterar o diretório para as páginas ou o usar o menu em muitas páginas será melhor gravar os scripts em um local do site e em lugar de copiar em cada página lincar na seção <head>.

Quanto as imagens, você terá que alterar manualmente no código o caminho para elas.
Mas como fazer foge do escopo deste tutorial e se você conhece um pouquinho de manipulação de códigos fará isso com facilidade.

::Mostre seu trabalho::

Se você desenvolveu um menu seguindo esta técnica, hospede a página e mostre para meus visitantes. Coloque o endereço nos comentários e eu transcrevo abaixo para que todos vejam. Faça seus comentários e compartilhe com meus visitantes.

« Voltar para Parte 2 Ver o menu funcionando Ver uma versão com submenus na horizontal

Deixe seu comentário sobre esta matéria: