La nueva especificación HTML 4.0 definida por la organización W3C ( www.w3c.org ) trae herramientas más poderosas para cada diseñador web. Este es un cambio que afecta a todos los desarrolladores y diseñadores web en los que muchos han pensado en efectos dinámicos. Lo inimaginable ahora se puede lograr fácilmente con la ayuda de DHTML y CSS. Aquí hay una descripción detallada de la implementación de algunos efectos durante el proceso de compilación de la página web. Espero que pueda usarlo para darle vida a su página web.
* Tecnología de menú
Si las personas que han visitado los sitios de Microsoft y Macromedia tienen cuidado, definitivamente notarán la tecnología de menú. Haga clic para mostrar un submenú y haga clic nuevamente para ocultar el submenú. Es muy interesante y práctico. El autor descargó estas dos páginas respectivamente. Después de analizar el código fuente, descubrí que no usaban el mismo método y ambos métodos tienen sus ventajas y desventajas.
Macromedia utiliza tecnología de varias páginas. Es decir, primero cree una página del menú principal sin elementos expandidos y luego cree una página para cada elemento del menú principal expandido. Cuántas subpáginas se necesitan para corresponder a la cantidad de elementos en el menú principal. Pongamos un ejemplo sencillo para ilustrar:
<html>
<head>
<title>Un ejemplo de menú</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF ">
<a name="abc"></a><p>
<a href="menu_2.htm#abc"><b>¡Haz clic aquí!</b></a>
</body>
</html >
<html>
<head>
<title>Un ejemplo de menú</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="# FFFFFF">
<p><a name="abc"></a></p>
<p><a href="menu_1.htm#abc">
<b>¡Haz clic aquí!</b></a > </p>
lista 1
lista 2
lista 3
</cuerpo>
</html>
Haga clic en ¡Haga clic aquí! en la Figura 1 y aparecerá el efecto de la Figura 2. Durante la implementación específica, debe prestar atención a la definición y el uso de la etiqueta <a name=" "> y lograr una correspondencia uno a uno, de lo contrario será caótico. Además, cuando hay muchos elementos de menú, recuerde que solo el submenú que aparece actualmente se define con <a name=" ">, y otros elementos del menú principal deben estar vinculados a sus páginas expandidas correspondientes.
Este método es muy simple de implementar, la gente común puede dominarlo rápidamente y puede ser compatible con cualquier navegador, pero sus deficiencias también son obvias. En primer lugar, es lento llamar a cada página de un lado a otro inevitablemente conducirá a una larga espera. Solo cuando la página esté llena de texto, no se sentirá estancado. En segundo lugar, aunque la tecnología es simple. , es un poco problemático producir uno por uno. Por tanto, esta tecnología todavía tiene ciertas limitaciones.
Microsoft utiliza tecnología DHTML. DHTML es una tecnología relativamente nueva, por lo que para algunos navegadores "antiguos", este método de implementación del menú es inútil.
Pongamos un ejemplo para ilustrar.
Como se muestra en la Figura 3, haga clic en Productos y servicios y aparecerá el siguiente menú. Haga clic nuevamente y desaparecerá. Es lo mismo que Macromedia, pero la diferencia es que parece ser mucho más rápido. .
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bienvenido a la página de inicio de Microsoft</title>
<estilo TYPE="text/css">
.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margen -izquierda: 14;}
.NV2 {posición:relativa;tamaño de fuente:.9em;peso de fuente:normal;}
</estilo>
</cabeza>
<cuerpo>
<script TIPO="texto/javascript">
función clikker(a,b) {
if (a.style.display ==') {
a.style.display = 'none';
b.src='usm.gif'
}
else {
a.style.display='; ;
b.src='dsmh.gif';
}
}
</script>
<div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);">
<dd><img ID="BBp " SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11">
Productos y servicios
<div CLASS="NV2" ID="BB1" STYLE ="display:';"
onclick="window.event.cancelBubble = true;">
<a HREF="/products/"><p>Catálogo de productos</a>
<a HREF=" http://support.microsoft.com/support/">Soporte técnico </a>
<a HREF="/events/">Eventos y seminarios</a>
<a HREF="/train_cert/">Capacitación y certificación</a>
<a HREF="/referral/sr_default.asp">Referencias a terceros</a> </p>
</div>
</dd>
</div>
</body>
</html>
En el código fuente, .NV1 y .NV2 son definiciones de fuentes CSS, y la función clikker controla la visualización y ocultación de los elementos del menú. La variable a controla el texto y la variable b controla las imágenes (no se muestra en la imagen debido a una descarga incompleta). En la aplicación real, preste atención al alcance definido por el div y no oculte otros elementos del menú principal al hacer clic.
El método de implementación de Microsoft es relativamente inteligente, rápido, relativamente simple de crear y solo requiere una página. La desventaja es que requiere al menos soporte de IE 4.0 o NN 4.0 o superior.
Ambos métodos tienen sus pros y sus contras. El que elija depende de la naturaleza de su página de inicio y del soporte del navegador.
* Cambio de color del texto
Esta es la tecnología más común en la Web Cuando el mouse se mueve sobre un elemento, el elemento inmediatamente cambia de color y, a veces, emite un sonido, como el software educativo multimedia. Si mezclas bien tus colores, la página será muy agradable a la vista.
Hay muchas formas de lograr el cambio de color del texto. Aquí solo presentamos brevemente dos de ellas.
El primer método consiste simplemente en utilizar la tecnología CSS. Actualmente, sólo IE 4.0 admite esta tecnología. Su código de muestra es el siguiente.
<html>
<head>
<title>Un estudio de la dinámica de la población</title>
<style type="text/css">
BODY { fondo: blanco }
A:link { color: rojo }
A:visited { color: granate }
A: activo { color: fucsia }
A:hover {color:azul}
</style>
</head>
<body>
<p> <a href=" www.microsoft.com ">
Este es el ejemplo más simple del uso de la tecnología CSS para controlar el color del texto.</a></p>
</body>
</html>
En este ejemplo, el texto del enlace se muestra inicialmente en rojo, se vuelve azul cuando el mouse se mueve sobre el texto, cambia a magenta cuando se hace clic para acceder y se vuelve marrón después de acceder. Dado que Netscape aún no admite atributos CSS como enlace, visitado y desplazamiento, no podrá ver estos efectos si utiliza Communicator.
El segundo método consiste en utilizar JavaScript para escribir un pequeño programa de script para ejecutarlo y lograr el propósito de cambiar de color. Su código de muestra es el siguiente.
<html>
<head>
<title>Cambiar color del texto</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.css1 { font-family: "Courier New", Courier, mono; tamaño de fuente: 14pt; estilo de fuente: altura de línea: normal; peso: negrita; color: azul}
-->
</estilo>
<script language="JavaScript">
function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {
var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE
if ((theObj != null) &&); (theProp.indexOf("style.") != 0 &&
theObj.style != null))
eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<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')">
Cambia el color del texto.</span>
</body>
</html>
Dado que IE 4.0 y NN 4.0 tienen diferentes mecanismos de control para objetos, primero debes verificar el navegador y luego hacer el trato correspondiente. La función MM_changeProp() implementa este método de cambio de color del texto. Este método requiere definir el ID con span y agregar onmouseover y onmouseout en todos los lugares donde se debe cambiar, lo cual es mucho más problemático que el primer método. Por tanto, si no tienes una opinión firme contra Microsoft, es mejor utilizar el primer método.
* Botones dinámicos
Los botones dinámicos aquí no son animaciones .gif ni los diversos botones de efectos especiales proporcionados en FrontPage. Creo que debes haberte encontrado con esta situación: cuando el mouse se mueve sobre un determinado botón, de repente se mueve, pareciendo tentarte a hacer clic en él. Es interesante, ¿no? Implementémoslo a continuación.
En primer lugar, debes preparar dos imágenes. Como son botones, no tienen que ser muy grandes y los colores no tienen que ser demasiado elegantes. Debería haber algunas diferencias entre ellos. dos imágenes para que no sean visibles después de moverse. A continuación se muestran dos fotografías que hice.
A continuación, echemos un vistazo a cómo se logran los efectos dinámicos. Su código fuente es el siguiente.
<html>
<head>
<title>Botones pulsadores</title>
</head>
<body bgcolor=ffffff>
<script>
<
!--
versionButton = 1
browserName = navigator.appName;
);
if (browserVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = nueva Imagen(42, 197
)
;
Imagen(42, 197);
toc1off.src = "inicio.gif"
;
function 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
ancho=100 alto=50 borde=0 nombre ="toc1"></a>
</body>
</html>
Hay dos cosas que deben tenerse en cuenta:
1. Asegúrese de asignar un nombre a img y luego aplique este nombre en la definición de la imagen de origen.
2. Preste atención a varios símbolos en el archivo fuente, especialmente las comillas, y también preste atención a la ruta del archivo de imagen fuente. Es mejor utilizar una ruta relativa para evitar que el sitio no se muestre correctamente después de la carga. Por supuesto, este método de intercambio de imágenes también requiere la compatibilidad con una versión de navegador 4.0 o superior. Si todavía estás utilizando una versión de navegador 3.0, ¡actualízala lo antes posible!
* Si se le solicita,
coloque el mouse sobre una imagen y aparecerá la información del mensaje, al igual que los botones de muchos programas que brindan mensajes de función. Esta función es fácil de implementar en la edición de páginas web. Veamos su efecto.
Es fácil lograr este efecto, solo mire el código fuente.
......
<tr>
<td WIDTH="57"><a HREF="quién.html" TARGET="principal"
ONMOUSEOVER="img_act('quién')"
ONMOUSEOUT="img_inact('quién') "><img
SRC="../images/button_who0.gif" NAME="quién"
title="Perfil personal de Zhou Huajian" ALT="Quién soy"
BORDER="0" WIDTH="113" HEIGHT="45 "></a>
<a HREF="quién.html" TARGET="_parent" ONMOUSEOVER="img_act('quién')" ONMOUSEOUT="img_inact('quién')">
</a></td>< /tr>
...
la parte subrayada del código es cómo hacerlo. ¡El atributo Título es muy útil! Se puede utilizar en todos los elementos excepto BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE y TITLE para definir la información solicitada cuando el mouse pasa sobre él.
Arriba hemos discutido en detalle algunos consejos en el proceso de compilación de una página web. Hay muchas páginas bellamente diseñadas y tecnológicamente avanzadas en la Web, y analizar su código fuente es una buena manera de aprender. La tecnología informática avanza constantemente ante estas nuevas tecnologías que se suceden una tras otra: DHTML, CSS, XML… solo podemos afrontar las dificultades, dominarlas y aplicarlas a nuestras páginas web para hacerlas más activas.
(Oficina de Turismo de Tianjin Jixian 301900 Jia Hejing)