value1

Construção de menu e submenu no fireworks

::Introdução::

Menu pop-up é um elemento de interface muito usado para solucionar o problema de acomodar uma grande quantidade de links de navegação em um espaço reduzido.

Neste tipo de navegação o desenvolvedor tem a possibilidade de projetar uma barra de navegação horizontal com submenus.

 

Neste tutorial mostrarei como construir uma barra de navegação horizontal para abrigar um, dois ou mais níveis de navegação, abrindo na vertical.

Os subníveis opcionalmente podem ser projetados para abrir na horizontal.

Usarei o Fireworks para gerar o HTML e o respectivo javascript para funcionamento do menu e mostrarei como exportar para uma página web.


::Uma visão antecipada::

Desenvolverei o tutorial construindo uma barra de navegação com 4 links que abrem um subnível nos links Link - 1 e Link - 2, três subníveis no Link - 3 e nenhum subnível no Link - 4.

A seguir um screenshot da barra com os subníveis do Link - 3 abertos:

menu-final

Complementarmente você poderá ver nesta página, o menu em ação.

Indo à página, passe o mouse sobre os links que estão todos ativos.


::As características da barra::

Construirei uma barra de navegação com as seguintes características:

  • Quatro links chamados de Link -1, Link -2, Link -3 e Link - 4;
  • O Link - 1com um subnível contendo 5 links:
    • Link - 1.1
    • Link - 1.2
    • Link - 1.3
    • Link - 1.4
    • Link - 1.5
  • O Link - 2um subnível contendo 3 links:
    • Link - 2.1
    • Link - 2.2
    • Link - 2.3
  • O Link - 3com três subníveis contendo no primeiro sub-nível 5 links, no segundo subnível 3 link e no terceiro subnível 2 links (ver figura acima):
    • Link - 3.1
    • Link - 3.2
    • Link - 3.3
    • Link - 3.4
      • Link - 3.4.1
      • Link - 3.4.2
        • Link - 3.4.2.1
        • Link - 3.4.2.2
      • Link - 3.4.3
      • Link - 3.4.4
    • Link - 3.5
    • Link - 3.6
  • O Link - 4 sem subníveis (um link para contato, por exemplo)

As formas para construção do menu conforme mostrado abaixo:

shapes

  • Links escritos com fonte Arial, tamanho 11, negrito e cor #cc3300;
  • Quatro retângulos de 80 x 15px com fundo #eeeeee (cinza claro) e sem bordas, para os links;
  • Um retângulo de 480 x 17px com fundo na cor #eeeeee (cinza claro) e bordas de 1px na cor #cccccc (cinza escuro);
  • Três divisores dos links na cor #ffffff (branca), - mostrados sobre o retângulo maior.

::Preparando o palco::

Abra o FW, tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento";

Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para:

Largura: 600 pixels - Altura: 400 pixels

Cor da Tela: #FFFFFF (cor branca).

Tecle OK.

Vamos colocar um grid (uma grade) no palco para facilitar a construção das formas.

Veja na figura abaixo:

  1. Menu View => Grid => Edit Grid. Esta escolha coloca no palco a caixa de diálogo Edit Grid conforme mostrada na figura;
  2. Ajuste os parâmetros conforme mostrado:
    • Color: #000000 (cor preta);
    • Marque Show grid (mostrar o grid);
    • Marque Snap to grid (fixar ao grid - isto faz com que os vértices de uma forma sejam 'atraidos' ou 'fixados' aos pontos de cruzamento do grid);
    • Defina um grid com 80px de largura por 15px de altura (as dimensões dos retângulos para para os links);
  3. Tecle OK.

grid

Agora há no palco uma grade de 80 x 15px.

Se você nunca trabalhou com Grid tente o seguinte para treinar, antes de prosseguir:

Tecle Ctrl + Alt + G para 'desligar' o grid, tecle outra vez para 'ligar'.

Dê um zoom de 200%, pegue a ferramenta retângulo e desenhe alguns retângulos para sentir como é fácil colocar os vértices sobre os pontos de interseção do grid. Isto é devido ao 'Snap to Grid'. Tecle Ctrl + Alt + Shift + G para 'ligar' e 'desligar' o Snap to Grid.

Terminando de treinar confira se o 'Snap to grid' está ligado.


::Construindo os links e as fatias (slices)::

Observe a seqüência na figura abaixo e acompanhe os 5 passos descritos a seguir:

  1. Construa 4 (quatro) retângulos de 80 x 15px sem bordas e com a cor do fundo #eeeeee, um ao lado do outro sobre o grid;
  2. Escreva o nome dos links com fonte Arial, tamanho 11, negrito e cor #cc3300 e posicione sobre os retângulos. Por enquanto esconda os textos dos links, para não atrapalhar, indo ao painel layers (a tecla F2 mostra/esconde o painel) e desligando o olho dos textos;
  3. Clique sobre cada um dos quatro retângulos com a tecla Shift pressionada, para selecionar os 4 ao mesmo tempo.
  4. Vá ao menu Edit => Insert => Slice ou tecle Alt + Shift + U . Vai aparecer uma janela popup;
  5. Pressione o botão Multiple na janela que se abriu, ou tecle a letra M;
  6. São criadas 4 fatias (verde com um círculo) sobre os 4 retângulos como mostrado na figura.

::Construindo o conteúdo do subnível do Link - 1::

Acompanhe as etapas 1 a 4 na figura mostrada abaixo:

content1

  1. Clique no palco, fora das fatias para sumir os círculo das fatias. Clique no retângulo do Link - 1 para aparecer o círculo da sua fatia. Clique sobre o círculo para aparecer um menu e escolha Add Pop-up menu (adicionar um menu pop-up). Isto fará aparecer a janela 'Pop-up Menu Editor'.
  2. Clique no retângulo logo abaixo de 'Text' e digite o nome do primeiro link;
  3. Faça o mesmo no retângulo logo abaixo de 'Link' digitando o endereço do link, repita para o retângulo abaixo de 'Target' escolhendo onde abrir o link;
  4. Repita os passos acima para os demais links do subnível.

::Definindo a aparência do submenu do Link - 1::

Acompanhe na figura mostrada abaixo:

appearance

Tendo concluido a etapa anterior clique na aba 'Appearance' do Editor aberto;

Aqui você define a aparência dos links do subnível.

Faça algumas marcações nas caixas do painel e veja na prática o que acontece na tela branca mostrada na parte inferior do painel. Quando estiver satisfeito tecle Next ou clique na aba 'Advanced'. (Não se preocupe com detalhes agora pois você poderá editar e modificar tudo, ou parte, se não ficar legal.)


::Mais definições de aparência do submenu do Link - 1::

Acompanhe a figura mostrada abaixo:

advanced

Aqui você define mais itens de aparência colocando bordas e cores e estabelecendo a largura do submenu. Novamente faça algumas marcações nas caixas do painel e veja na prática o que acontece na tela branca mostrada na parte inferior do painel. Quando estiver satisfeito tecle Next ou clique na aba 'Position'. (Não se preocupe com detalhes agora pois você poderá editar e modificar tudo, ou parte, se não ficar legal.)


::Definindo o posicionamneto do submenu do Link - 1::

Acompanhe a figura mostrada abaixo:

position

Aqui você define o local onde será aberto o submenu e as coordenadas X e Y en relação ao Link principal. Observe no caso deste tutorial defini x = -1 para começar na borda esquerda de 1px do primeiro link e y=17 para posicionar logo abaixo do retângulo de 480 x 17px.

Terminado clique em 'Done' no Editor.

Para conferir seu trabalho faça o seguinte:

Lembra que logo após digitar o texto dos 4 links você desapareceu com eles clicando no 'olho' do painel layers? Pois bem, vamos trazê-los de volta clicando de novo no 'olho' para eles aparecerem no palco. Feito isto, clique no palco e tecle F12 para ver o resultado no navegador. Passe o passe sobre o Link - 1 para conferir o submenu que voc|ê construiu.

Não se preocupe se as coisas não ficaram como esperado, pois a seguir, mostrarei como editar e corrigir algo que tenha saido errado.

::Editando::

Você acaba de construir o subnínel do Link - 1 e conferiu sua obra no navegador. Se algo não saiu exatamente como você esperava vamos editar o subnível e fazer as correções.

Conforme mostrado na figura a seguir, basta clicar sobre o círculo do Link - 1 e escolher a opção Edit Pop-up Menu para trazer de volta a caixa de diálogo Pop-up Menu Editor. Nesta caixa você tem as quatro abas Content - Appearance - Advanced e Position que conforme visto anteriormente controlam o menu. Faça algumas experiências, veja o resultado no navegador. Repita a edição e vá experimentando até conseguir controlar tudo no menu. Agora só depende de você.

Notar que além de editar o que já foi feito, você pode escolher Delete All Behaviors (ver figura abaixo) ou seja apaga tudo que foi feito para o Link - 1.

Mas atenção, esta opção não tem volta. Apagou tem que começar tudo outra vez.

edit


::Construção do Link - 2::

O Link -2 tem um subnível com três links: Link - 2.1, Link - 2.2, Link - 2.3 e não apresenta nada diferente do Link - 1. Construa os três links da mesma maneira que foi explicado para o Link - 1. Aqui não há novidades.


::Construção do Link - 3 e do subnível 3.4::

Aqui sim teremos novidades. Faça o seguinte:

Construa os links: Link - 3.1, Link - 3.2, Link - 3.3, Link - 3.4, Link - 3.5, Link - 3.6 conforme já foi explicado, mas não coloque "Link" e nem "Target" para o Link - 3.4 pois este terá os subníveis Link - 3.4.1, Link - 3.4.2, Link - 3.4.3, Link - 3.4.4 ver número 1 na figura abaixo.

Agora acompanhe a numeração pela figura abaixo:

  1. Selecione o Link - 3.4 (a linha correspondente ficará na cor azul) e clique no sinalzinho de + (mais). Abaixo da palavra Content e destacado com um círculo vermelho na figura;Nota: Se você tiver dificuldade para selecionar a linha do link, clique primeiro em um lugar vazio do palco e depois sobre a linha.
  2. Após clicar no sinalzinho de + (mais) surge uma linha em branco logo abaixo do Link - 3.4;
  3. Preencha esta linha com o primeiro link do subnível - Link - 3.4.1;
  4. Terminado de preencher selecione a linha (lembre-se: clique em um lugar vazio no palco e depois na linha) e clique no ícone de subnível mostrado na figura dentro de um círculo vermelho;
  5. Note que agora o texto Link- 3.4.1 sofreu um recuo (mostrado dentro de um círculo vermelho na figura) indicando que trata-se de um subnível do Link - 3.4.A seguir clicque no sinalzinho de +(mais) e digite o Link - 3.4.2. Mas, atenção não coloque "Link" e nem "Target" pois logo mais, aqui construiremos o terceiro subnível.

    Selecione o Link - 3.4.2 que você acabou de construir, clique no sinalzinho de + (mais) e construa normalmente o link Link - 3.4.3. Repita para o Link - 3.4.4 e a seguir veremos o terceiro subnível.

subnivel-dois

Terminada esta construção veja o resultado no navegador. Lembre-se: basta clicar no palco e teclar F12.

É provável que o submenu do Link 3.4 esteja posicionado em lugar que exija ajustes.

Para ajustar faça o seguinte:

Edite o Link 3.4 como explicado no início desta página no título Editando

Selecione a linha do Link - 3.4.1 e escolha a aba Position para abrir o editor do menu conforme mostrado na figura abaixo. Escolha um dos três ícones de posicionamento do menu, confire no navegador e se precisar repita tudo e altere as coordenadas X e Y mostradas no editor abaixo. Faça algumas experiências com todos os ícones e altere coordenadas para familiarizar-se com o posicionamento.

subposition


::Construção do subnível 3.4.2::

Vamos descer mais um nível no submenu que acabamos de construir. Observe na primeira figura do item anterior, no número 6, que deixamos o Link - 3.4.2 sem uma URL, pois aí serão abertos os links Link - 3.4.2.1 e Link - 3.4.2.2.

Você já sabe como construir estes dois links não é mesmo?

Perfeito! proceda da mesma maneira que você fez para construir os links de subnível para o Link - 3.4, ou seja Link - 3.4.1, Link - 3.4.2, Link - 3.4.3, Link - 3.4.4 e isto foi exatamente o que explicamos no ítem anterior.


::Construção do Link 4::

Este link é o mais simples de todo. Suponha que este é um link para contato com o desenvolvedor do site me por isso não tem subníveis. Ele mesmo é o link que abre um formulário de contato quando é clicado. Em resumo, pode ser um link qualquer simples, sem subníveis.

link4

Quando não há submenu a ser construido para um link da barra, você define o destino do link na janela de texto para Link e Target que aparece quando você seleciona o Link, como mostrado na figura acima. Notar que aqui você não precisa clicar sobre o círculo para abrir a janela de configurações dos subníveis. Basta selecionar o link e preencher as caixas de texto.

Tudo pronto!

Confira no navegador (Tecle F12), faça seus ajustes se necessário e vamos gerar o código HTML da nossa obra.

::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:

save

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

  1. Escolha o local para salvar: o diretório menu-maujor;
  2. Digite o nome do documento HTML : menu.html;
  3. Escolha: HTML and images;
  4. Escolha: Export HTML File;
  5. Slice: Export Slices;
  6. Marque as duas caixas de seleção;
  7. Browse. Aqui você escolhe o diretório para colocar as imagens geradas pelo FW para o menu: imagens-menu-maujor;
  8. 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:

diretorio

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:

subdiretorio

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:

  1. 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>
  2. Copie e cole este código na página onde será inserido o menu, logo acima da tag </head>;
  3. 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>
  4. 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.