Tutorial Fireworks

Tutoriais por por Maurício Samy Silva

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

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

Editar o menu


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

construcao do 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.

posicionamneto do subnivel dois


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

O link quatro

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.


« Voltar para Parte 1 Ir para Parte 3 »

Deixe seu comentário sobre esta matéria:

Site criado em 22 de julho de 2004 por Maurício Samy Silva — © Direitos de terceiros reservados 2004-2017.
Conteúdos não pertencentes a terceiros podem ser copiados à vontade (crédito será bem-vindo).
Powered by: Maujor ®