Amigos que usaram o QQ para bater papo adoram sua função de ocultação automática de janelas, que pode fazer com que a janela pareça nova, limpa e dinâmica. Vários de meus amigos desejam adicionar coisas semelhantes às suas páginas da web e, após exploração conjunta, descobriram isso. efeito pode ser alcançado com o Dreamweaer. Vamos dar uma olhada na produção de uma barra de menu ativa.
Passo 1: Faça a aparência do menu.
Crie um novo arquivo no Dreamweaer, desenhe uma camada, insira uma tabela na camada (como mostrado na Figura 1), modifique a tabela, adicione itens de menu e crie hiperlinks para cada item para remover. o sublinhado de um hiperlink, você pode editar o estilo CSS do hiperlink. No painel de estilo CSS, defina a "Decoração" de "Link" e "Hover" para "Nenhum" através do seletor CSS. Color" é definido como vermelho e, finalmente, o estilo definido é aplicado a cada barra de menu (você pode pressionar a tecla "F12" para visualizar o efeito).
Figura 1
Passo 2: Projete o efeito dinâmico do menu
1. Selecione a camada, mantenha pressionado o botão esquerdo quando o mouse mudar para o formato de "cruz" e arraste a camada para o canto superior direito da página (de forma que toda a barra de menu fique totalmente exposta, mas a borda superior fique apenas próximo à borda superior da página) e abra o tempo no menu da janela Painel linha, selecione a camada e arraste-a para a linha do tempo. O Dreamweaer gerará automaticamente um objeto de animação com comprimento de 15 quadros. o objeto de animação para o 30º quadro e defina seu comprimento para 30 quadros. Em seguida, clique com o botão direito no quadro 15, selecione a opção "Adicionar quadro-chave" no menu de atalho pop-up para inserir um quadro-chave e arraste a camada para a posição apropriada (Figura 2).
Figura 2 Clique com o botão direito novamente no quadro 15 da janela da linha do tempo, selecione "Adicionar ação" no menu de atalho pop-up, adicione um comportamento interativo ao quadro e o Dreamweaer abrirá automaticamente o painel de comportamento. Clique no botão "+" no painel de comportamento, selecione "Timeline/Stop Timeline" no menu pop-up, abra a caixa de diálogo "Stop Timeline", selecione "Timeline1" e clique no botão "OK" para fechar a caixa de diálogo . O evento do comportamento interativo é “onFrame15” e a ação é “Stop Timeline”, de forma que quando a linha do tempo atingir o 15º quadro, a animação irá parar de ser reproduzida, realizando assim a função de salto da barra de menu.
2. Use o mesmo método para adicionar um comportamento interativo "Stop Timeline" no 30º quadro da linha do tempo, realizando assim a função de menu pop-up. Após adicionar esses dois comportamentos interativos, um quadrado azul aparece no quadro correspondente na janela da linha do tempo, representando um comportamento interativo. Selecione a caixa de seleção "Autoplay and Loop" para permitir que a animação faça um loop automático (Figura 3).
Figura 3
3. Agora você precisa configurar um comportamento para permitir que a linha do tempo continue sendo reproduzida após ser interrompida. Minha ideia é a seguinte: no estado normal, a barra de menu aparece, mas mantém apenas as palavras "Campus Grand View" abaixo, e o pop-up e o rebote da barra de menu são controlados pelo fato de o mouse passar sobre o "Campus Grand View" Ver" na barra de menu. Você pode continuar assim: selecione a palavra “Campus Grand View” na barra de menu (certifique-se de que o endereço do hiperlink desta palavra seja “#”, ou seja, um link vazio), clique no botão “+” no painel de comportamento , e no pop-up Selecione "Timeline/Play Timeline" no menu, selecione "Timeline1" na caixa de diálogo que aparece e clique no botão OK. Neste momento, um comportamento será adicionado ao painel de comportamento e. selecione o evento "onMouseOver" em sua lista suspensa "Eventos", indicando que a animação será reproduzida quando o mouse estiver sobre a palavra (Figura 4).
Figura 4 Neste ponto, uma barra de menu ativa é concluída. Você pode pressionar a tecla “F12” para visualizar seu efeito.
Mas esta barra de menu tem uma falha: ela deve desaparecer quando o mouse passa por uma área específica abaixo da barra de menu (neste caso, as palavras “Campus Grand View”). Afaste o mouse da barra de menu para fazer o menu desaparecer. Talvez seja necessário usar o Fireworks ou o Flash. Se você tiver algum método bom, escreva-nos para discutir o assunto.
