Dê vida à sua página da web

Autor：Eve Cole Data da Última Atualização：2009-06-20 17:01:07

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:

<html>

<head>

<title>Um exemplo de menu</title>

</head>

<a href="menu_2.htm#abc"><b>Clique aqui!</b></a>

</body>

</html >

<html>

<head>

<title>Um exemplo de menu</title>

</head>

<b>Clique aqui!</b></a > </p>

lista 1

lista 2

lista 3

</body>

</html>

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 <a name=" "> 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 <a name=" ">, e outros itens do menu principal devem ser vinculados às suas páginas expandidas correspondentes.

Este método é muito simples de implementar, pode ser dominado rapidamente por pessoas comuns e pode ser suportado por qualquer navegador, mas suas deficiências também são óbvias. Em primeiro lugar, é lento. Chamar cada página inevitavelmente levará a uma longa espera. Somente quando a página estiver cheia de texto, você não se sentirá estagnado, em segundo lugar, é difícil compilar. , é um pouco problemático produzir um por um. Portanto, esta tecnologia ainda apresenta certas limitações.

A Microsoft usa tecnologia DHTML. DHTML é uma tecnologia relativamente nova, portanto, para alguns navegadores "antigos", esse método de implementação de menu é inútil.

Vamos dar um exemplo para ilustrar.

Conforme mostrado na Figura 3, clique em Produto e Serviços e o menu a seguir aparecerá imediatamente. Clique novamente e desaparecerá. É igual ao Macromedia, mas a diferença é que seu código fonte é o seguinte. .

<html>

<head>

<title>Bem-vindo à página inicial da Microsoft</title>

.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin -esquerda: 14;}

.NV2 {posição:relativa;tamanho da fonte:.9em;peso da fonte:normal;}

</style>

</head>

<corpo>

function clikker(a,b) {

(a.style.display ==') {

a.style.display

= 'none

;

b.src='dsmh.gif';

}

</script>

Produtos e serviços

<div CLASS="NV2" ID="BB1" STYLE ="display:';"

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

<a HREF="/products/"><p>Catálogo de produtos</a>

<a HREF=" http://support.microsoft.com/support/">Suporte Técnico </a>

<a HREF="/events/">Eventos e seminários</a>

<a HREF="/train_cert/">Treinamento e certificação</a>

<a HREF="/referral/sr_default.asp">Referências a terceiros</a> </p>

</div>

</dd>

</div>

</body>

</html>

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.

<html>

<head>

<title>Um estudo da dinâmica populacional</title>

BODY { background: white }

A:link { color: red }

A:visited { color: maroon }

A: ativo {cor: fúcsia}

A:hover {color:azul}

</style>

</head>

<body>

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

</body>

</html>

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.

<html>

<head>

<title>Alterar cor do texto</title>

<!--

.css1 { font-family: "Courier New", Courier, mono; font-size: 14pt; peso: negrito; cor: azul}

-->

</style>

function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {

var

theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE);

(theProp.indexOf("style.") != 0 &&

theObj.style != null))

eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');

}

</script>

</head>

<span class="css1" ID="x"

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.</span>

</body>

</html>

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.

<html>

<head>

<title>Botões push-in</title>

</head>

<!--

versionButton = 1

browserName = navigator.appName =

parseInt(navigator.appVersion

;

);

if (browserVer >= 3)

versionButton = "3";

if (versionButton == "3")

{

toc1on

new Image(42, 197)

;

Imagem(42, 197

)

;

função img_act(imgName)

{

if (versionButton == "3")

{

imgOn = eval(imgName + "on.src");

documento

[imgName].src = imgOn

;

function img_inact(imgName)

{

if (

versionButton

== "3")

{

imgOff = eval(imgName + "off.src");

documento

[imgName].src

imgOff

;

a href=http://www.microsoft.com

onMouseover = "img_act('toc1')"

onMouseout = "img_inact('toc1')"><img src=home.gif

width=100 height=50 border=0 nome ="toc1"></a>

</body>

</html>

Há duas coisas que devem ser observadas:

1. Certifique-se de atribuir um nome ao img e, em seguida, aplique esse nome na definição da imagem de origem.

2. Preste atenção aos vários símbolos no arquivo de origem, especialmente aspas, e também preste atenção ao caminho do arquivo de imagem de origem. É melhor usar um caminho relativo para evitar que o site não seja exibido corretamente após o upload. Claro, este método de troca de imagens também requer o suporte de um navegador versão 4.0 ou superior. Se você ainda estiver usando um navegador versão 3.0, atualize o mais rápido possível!

* Se solicitado,

coloque o mouse sobre uma imagem e as informações do prompt aparecerão, assim como os botões de muitos softwares que fornecem comandos de função. Esta função é fácil de implementar na edição de páginas da web. Vamos dar uma olhada em seu efeito.

É fácil conseguir esse efeito, basta olhar o código-fonte.

......

<tr>

<td WIDTH="57"><a HREF="who.html" TARGET="main"

ONMOUSEOVER="img_act('who')"

ONMOUSEOUT="img_inact('who') "><img

SRC="../images/button_who0.gif" NAME="who"

title="Perfil pessoal de Zhou Huajian" ALT="Quem sou eu"

BORDER="0" WIDTH="113" HEIGHT="45 "></a>

</a></td>

< /tr>

...

a parte sublinhada do código é como fazer isso. O atributo Title é muito útil! Pode ser usado em todos os elementos, exceto BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE e TITLE para definir informações de prompt quando o mouse passa sobre ele.

Acima discutimos em detalhes algumas dicas no processo de compilação de páginas da web. Existem muitas páginas lindamente projetadas e tecnologicamente avançadas na Web, e analisar seu código-fonte é uma boa maneira de aprender. A tecnologia informática avança constantemente. Diante dessas novas tecnologias que surgem uma após a outra: DHTML, CSS, XML... só nos resta enfrentar as dificuldades, dominá-las e aplicá-las às nossas páginas web para torná-las mais ativas.

(Tianjin Jixian Tourism Bureau 301900 Jia Hejing)