Tudo muito bom, tudo funcionando no navegador, mas de que me serve um menu que só posso visualizar quando teclo F12 no Fireworks? Temos que inserir o menu no ar.
É isto que você aprenderá nesta última parte da série. 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.
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,
use 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:
Esta janela contém tudo o que você precisa para exportar seu menu. Acompanhe a numeração na figura:
01. Escolha o local para salvar: o diretório menu-maujor;
02. Digite o nome do documento HTML : menu.html;
03. Escolha: HTML and images;
04. Escolha: Export HTML File;
05. Slice: Export Slices;
06. Marque as duas caixas de seleção;
07. Browse. Aqui você escolhe o diretório para colocar as imagens geradas pelo FW para o menu: imagens-menu-maujor;
08. 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:
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:
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:
01. 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>02. Copie e cole este código na página onde será inserido o menu, logo acima da tag </head>;
03. 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.
Moste seu trabalho
Se você desenvolveu um menu seguindo esta técnica, hospede a página e mostre os demais leitores, postando o endereço no espaço de comentários abaixo.
6 Comentários
Qual a sua opinião?