1 Introducción
Con la continua popularización y desarrollo de Internet/Intranet, cada vez más empresas, empresas e individuos están comenzando a crear sus propios sitios web, escribir páginas web y publicar información en el mundo exterior de una nueva manera para que la gente pueda navegar. , lectura y aplicación. Por ello, la producción de páginas web ha atraído la atención de cada vez más profesionales.
Las páginas web se refieren a algunos archivos de documentos que brindan información al mundo a través de Internet, incluida información personal, comercial, de entretenimiento y otros contenidos. Las páginas web se escriben utilizando lenguaje de marcado de hipertexto (HTML) y se almacenan en servidores web en Internet/Intranet para que los visitantes las lean mediante un navegador. Las páginas web escritas en lenguaje HTML también se denominan hipertexto, es decir, las páginas web contienen información multimedia como texto, gráficos, sonidos, imágenes e hipervínculos (HyperLink).
2 DHTML Simple
Puedo acceder a una gran cantidad de páginas web escritas en HTML y lenguajes de programación en el navegador. Para facilitar la navegación, varios fabricantes de computadoras han lanzado sus propios navegadores. Estos navegadores aún no tienen un estándar unificado para admitir HTML, lo que obviamente no favorece el desarrollo de Internet. Por lo tanto, el World Wide Web Consortium (W3C) desarrolló una especificación independiente de la plataforma y el lenguaje, el Modelo de Objetos de Documento (DOM).
DOM combina HTML, CSS (hojas de estilo en cascada) y lenguajes de secuencias de comandos para formar un modelo de interoperabilidad que una o más personas pueden implementar. Tanto Netscape como Microsoft hicieron sugerencias al W3C para implementar DOM: use HTML dinámico, es decir, DHTML (HTML dinámico) para resolver el problema.
DHTML es un término general para varias funciones nuevas que se han ampliado manteniendo la compatibilidad con HTML existente. Estas nuevas funciones se refieren principalmente a funciones dinámicas, funciones de posicionamiento y la capacidad de utilizar CSS.
Hay dos razones para usar DHTML: primero, DHTML divide cada elemento de la página web en muchos objetos independientes y las propiedades de estos objetos se especifican mediante CSS. En segundo lugar, DHTML abre cada objeto a un marco de lenguaje de programación y secuencias de comandos. El lenguaje de programación C++ se puede utilizar para manipular objetos en la página web, y los scripts Java y VBscript también se pueden utilizar para manipular objetos en la página web. Esto significa que la página web y todo lo que contiene es programable, lo que aporta nuevas capacidades a la página web. Encontraremos la diferencia cuando ejecutamos la aplicación: cuando solíamos ejecutar el programa en la Web, teníamos que esperar a que la página web se volviera a descargar cada vez después de un solo elemento si una página web contenía una gran cantidad. de objetos ocultos, incluso tomaría una pantalla completa. Una página nueva pasará por el proceso de acceso al servidor nuevamente con DHTML, puede hacer clic en una imagen en la parte superior de la pantalla para hacer los párrafos en la parte inferior de la misma. La pantalla cambia inmediatamente sin tener que acceder nuevamente al servidor. Todas las tablas se convertirán en bases de datos activas y los usuarios podrán filtrar los datos de forma dinámica y ordenarlos. Esto reduce la cantidad de solicitudes al servidor, lo que reduce la carga en el servidor y mejora el rendimiento general del cliente y del servidor.
3 Uso de hojas de estilo CSS
La base de DHTML son las Hojas de Estilo en Cascada (Las Hojas de Estilo en Cascada se refieren a un conjunto de atributos de visualización y posicionamiento definidos por el autor de la página Web). La característica más importante de CSS es el diseño web orientado a objetos, es decir, cada página, cada párrafo, cada imagen y tabla se considera un objeto. Luego declare cada instancia de ese objeto. Cada instancia tiene un estilo, que es un conjunto de atributos o instrucciones de visualización. Siempre que se declaren una vez, estas propiedades se utilizarán en toda la página web o incluso en todo el sitio. A cada estilo se le puede dar un nombre, como H1, Li. Si el nombre del estilo es el mismo que el nombre de un elemento (o etiqueta) DHTML válido, el estilo se aplicará automáticamente a cada instancia del elemento; Si un estilo recibe un nombre sin una etiqueta DHTML correspondiente, el estilo debe aplicarse manualmente donde desee que aparezca.
3.1 Definir y usar estilos básicos Hay dos estilos en el siguiente segmento del programa: H1 y favorito H1 es un elemento DHTML válido. La parte marcada por 〈H1〉〈／H1〉 heredará todos los atributos del estilo H1. ; Favor es un elemento que no es DHTML. Al definirlo, debe agregar un punto delante. Al hacer referencia a él, debe usar <clase> para declararlo en el programa, la parte marcada por <favor> y <. /favor> heredará el estilo favor Todas las propiedades.
〈HTML〉
〈CABEZA〉〈TÍTULO〉prueba〈／TÍTULO〉
〈TIPO DE ESTILO=”texto／css〉
〈 !--
H1{estilo de fuente:normal;
peso de fuente: negrita;
color: verde;
altura de línea: 20pt} ／Definir estilo H1／
.favor{estilo de fuente:normal;
tamaño de fuente: 15 puntos;
imagen de fondo:url(back.imag.gif);
textalign:center} ／Definir estilo favorito／
--〉
</ESTILO>
</CABEZA>
〈H1〉¡ESTA ES UNA PRUEBA!〈／H1〉／Estilo de uso H1／
〈P CLASS=”favor”〉¿TE GUSTA ESTO?〈／P〉／Usar estilo favor／
3.2 Uso de estilos externos Las hojas de estilo también se pueden almacenar en archivos externos. La conexión entre este archivo y la página puede realizarse a través de IMPORTAR o ENLACE. , por ejemplo, la hoja de estilo se almacena en el archivo mysite.css. Puede insertar el siguiente código en el documento para llamar a la hoja de estilo externa:
〈ENLACE REL=HOJA DE ESTILO
HREF=”misitio.css”
TIPO=”texto／css”
Título = “Estilo de prueba”〉
4 Implementar la función interactiva
CSS en sí no tiene función interactiva Para realizar la interacción, es necesario combinar el objeto definido por CSS con el modelo de documento (DOM) y convertir el documento web en un documento DHTML. DOM proporciona una forma para que los lenguajes de secuencias de comandos accedan a los elementos de la página. Los modelos de objetos admitidos por Microsoft y Netscape son algo diferentes.
En el modelo de Microsoft, los lenguajes de programación tienen acceso a todos los elementos de una página HTML y todos los elementos se reflejan como objetos en document.all. El siguiente fragmento de programa se utiliza para escribir todos los elementos de la página:
para (I=0;I<document.all.length;I++)
{
document.write(document.all［I］.tagName+”＼n”);
}
En el modelo de Netscape, un lenguaje de programación puede acceder a un conjunto específico de elementos en una página HTML, como el contenido de la etiqueta <layer>. El siguiente segmento de programa se utiliza para escribir los nombres de todas las capas de la página:
para (I=0;I<documento.capas.longitud;I++)
{
documento.write(document.capas［I］.nombre+”＼n”);
}
5 El uso de tecnología de posicionamiento
En HTML, la posición de cualquier objeto siempre es relativa a otras partes de la estructura de la página web. Cuando compilamos páginas web, a menudo exprimimos una imagen de la página agregando un fragmento de texto. Ahora, utilizando la tecnología de posicionamiento DHTML, los objetos se pueden fijar y apilar, es decir, se colocan varias imágenes en la misma posición en la página y luego el objeto colocado en la parte superior se designa continuamente para lograr efectos de animación.
ejemplo:
*miespalda{color de fondo:transparente}
*mipoit
posición:absoluta;
arriba: 5 pulgadas;
derecha: 5 pulgadas;
ancho: 10 pulgadas}
CUERPO{imagen-de-fondo:url(／imagen／back.gif);}
〈clase=.mipunto〉Img(src=”／imagen／a.gif)
〈DIV CLASS=”pila” ID=”image1” estilo=”z-index:4”〉
〈DIV CLASS=”pila” ID=”image2” estilo=”z-index:3”〉
〈DIV CLASS=”pino” ID=”image3” estilo=”z-index:2”〉
〈DIV CLASS=”pino” ID=”image4” estilo=”z-index:1”〉
</CUERPO>
En el segmento del programa anterior, el fondo está configurado para permitir que la luz pase a través del mapa base. Este efecto solo se podía lograr usando herramientas de dibujo especiales en el pasado. También hay 4 imágenes apiladas en la página y los efectos de animación que producen también son muy buenos.
6 Conclusión
Lo anterior ha investigado un poco cómo usar DHTML para compilar páginas web. Todavía hay muchos problemas técnicos esperando que los productores de páginas web profundicen juntos.
Wei Xiaotan es estudiante de maestría en la Escuela de Transporte de la Universidad Northern Jiaotong, 100044, Beijing.