Dê vida à sua página da web

A nova especificação HTML 4.0 definida pela organização W3C ( www.w3c.org ) traz ferramentas mais poderosas para todos os web designers. Esta é uma mudança que afeta todos os desenvolvedores e designers web que muitos pensaram no passado. inimaginável agora pode ser facilmente alcançado com a ajuda de DHTML e CSS. Aqui está uma descrição detalhada da implementação de alguns efeitos durante o processo de compilação da página da web.

* Tecnologia de menu

Se as pessoas que visitaram os sites da Microsoft e Macromedia forem cuidadosas, com certeza notarão a tecnologia de menu Clique para exibir um submenu e clique novamente para ocultar o submenu. O autor baixou essas duas páginas respectivamente. Depois de analisar o código-fonte, descobri que eles não usavam o mesmo método e que ambos os métodos têm seus prós e contras.

A Macromedia usa tecnologia de múltiplas páginas. Isto é, primeiro crie uma página do menu principal sem itens expandidos e, em seguida, crie uma página para cada item do menu principal expandido. Quantas subpáginas são necessárias para corresponder ao número de itens no menu principal. Vamos dar um exemplo simples para ilustrar:

Clique aqui!

Clique aqui!

lista 1

lista 2

lista 3

Clique em Clique aqui na Figura 1 e o efeito da Figura 2 aparecerá. Durante a implementação específica, você deve prestar atenção à definição e ao uso da tag e obter correspondência um a um, caso contrário, será caótico. Além disso, quando houver muitos itens de menu, lembre-se de que apenas o submenu listado atualmente é definido com , e outros itens do menu principal devem ser vinculados às suas páginas expandidas correspondentes.

Produtos e serviços

onclick="window.event.cancelBubble = true;">

Catálogo de produtos

Suporte Técnico

Eventos e seminários

Treinamento e certificação

Referências a terceiros

No código-fonte, .NV1 e .NV2 são definições de fonte CSS, e a função clicker controla a exibição e ocultação de itens de menu. A variável a controla o texto e a variável b controla as imagens (não mostradas na imagem devido ao download incompleto). Na aplicação real, preste atenção ao escopo definido pela div e não oculte outros itens do menu principal ao clicar.

O método de implementação da Microsoft é relativamente inteligente, rápido, relativamente simples de criar e requer apenas uma página. A desvantagem é que requer pelo menos o suporte do IE 4.0 ou NN 4.0 ou superior.

Ambos os métodos têm seus prós e contras. A escolha depende da natureza da sua página inicial e do suporte do navegador.

* Mudança de cor do texto

Esta é a tecnologia mais comum na Web Quando o mouse passa sobre um elemento, o elemento muda imediatamente de cor e às vezes emite um som, assim como um software educacional multimídia. Se você misturar bem as cores, a página ficará muito agradável aos olhos.

Existem muitas maneiras de alterar a cor do texto. Aqui apresentamos apenas duas delas.

O primeiro método é simplesmente usar a tecnologia CSS. Atualmente, apenas o IE 4.0 suporta esta tecnologia. Seu código de exemplo é o seguinte.

Este é o exemplo mais simples de uso da tecnologia CSS para controlar a cor do texto.

Neste exemplo, o texto do link é inicialmente exibido em vermelho, fica azul quando o mouse passa sobre o texto, muda para magenta quando clicado para acessar e fica marrom após acessar. Como o Netscape ainda não suporta atributos CSS como link, visitado e foco, você não poderá ver esses efeitos se usar o Communicator.

O segundo método é usar JavaScript para escrever um pequeno programa de script para ser executado, de modo a atingir o objetivo de mudar de cor. Seu código de exemplo é o seguinte.

onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">

Altere a cor do texto.

Como o IE 4.0 e o NN 4.0 possuem mecanismos de controle diferentes para objetos, você precisa primeiro verificar o navegador e depois fazer o acordo correspondente. A função MM_changeProp() implementa este método de mudança de cor de texto. Este método requer a definição do ID com span e a adição de onmouseover e onmouseout em todos os lugares onde ele deve ser alterado, o que é muito mais problemático do que o primeiro método. Portanto, se você não tem uma opinião forte contra a Microsoft, é melhor usar o primeiro método.

* Botões dinâmicos

Os botões dinâmicos aqui não são animações .gif nem os vários botões de efeitos especiais fornecidos no FrontPage. Acredito que você já deve ter se deparado com esta situação: quando o mouse passa sobre um determinado botão, ele se move de repente, parecendo tentá-lo a clicar nele. É interessante, não é? Vamos implementá-lo abaixo.

Primeiro de tudo, você deve preparar duas imagens. Como são botões, não precisam ser muito grandes e as cores não precisam ser muito elaboradas. duas fotos para que não fiquem visíveis após a movimentação. Abaixo estão duas fotos que fiz.

A seguir, vamos dar uma olhada em como os efeitos dinâmicos são alcançados. Seu código fonte é o seguinte.