Fazendo um menu ilustrado com o Dreamweaver MX

Uma aplicação interessante das camadas é um menu ilustrado. Admita que você deseja mostrar foto e texto explicativo de cinco produtos numa mesma página.

À esquerda, vão ficar cinco links com os nomes dos produtos. À direita, cinco camadas superpostas, cada uma com a foto e o texto descritivo de um dos produtos.

Comecemos com as camadas. Insira as cinco camadas e depois as respectivas fotos e descrições. Selecione cada camada de 2 a 5 e, no Inspetor de Propriedades, caixa Vis (de Visualização), torne-as todas invisíveis.

Como padrão, a única camada visível será a 1. Em seguida, empilhe as camadas umas sobre as outras, todas ocupando a mesma posição na página. Agora, os links. Acione Inserir/Hyperlink.

Abre-se a janela Hyperlink. No campo Texto, digite o nome do produto 1. No campo Link, digite apenas o sinal #, que indica um link interno. Acione OK.

Repita essa operação para os outros produtos.

Façamos, agora, a ligação entre os hyperlinks e as camadas. Selecione o hyperlink e clique no botão + no painel Comportamentos.

Abre-se um menu. Escolha a opção Mostrar-Ocultar as camadas. Para o hyperlink 1, mostre a camada 1 e oculte todas as outras. Replique esse procedimento, adequadamente, até o último link. Se você precisar manipular as camadas ocultas, acione Janela/Outros/Camadas, ou F2.

No painel Camadas, os objetos ocultos aparecem com o ícone de um olho fechado. Os visíveis vêm marcado com um olho aberto.

Clique nesse ícone para inverter a condição. Salve a página e veja o resultado.

Para tornar esse menu mais profissional, em vez de links você pode usar botões de duas cores, conforme foi mostrado na dica 2.

Assim, quando o usuário clicar no botão Produto 1, ele assumirá uma cor diferente, indicando seleção.

Quando o clique for dado em outro botão, Produto 1 será restaurado para a cor normal e o outro botão assumirá a cor de seleção.