1 Introduction
Avec la vulgarisation et le développement continus d'Internet/Intranet, de plus en plus d'entreprises et de particuliers commencent à créer leurs propres sites Web, à rédiger des pages Web et à publier des informations vers le monde extérieur d'une nouvelle façon pour que les gens puissent les parcourir. . , lecture et application. Par conséquent, la production de pages Web a attiré l’attention de plus en plus de professionnels.
Les pages Web font référence à certains fichiers de documents qui fournissent des informations au monde via Internet, notamment des informations personnelles, commerciales, de divertissement et autres contenus. Les pages Web sont écrites à l'aide du langage HTML (HyperText Markup Language) et sont stockées sur des serveurs Web sur Internet/Intranet pour que les visiteurs puissent les lire à l'aide d'un navigateur. Les pages Web écrites en langage HTML sont également appelées hypertextes, c'est-à-dire que les pages Web contiennent des informations multimédia telles que du texte, des graphiques, des sons, des images et des hyperliens (HyperLink).
2 DHTML Simple
Je peux accéder à un grand nombre de pages Web écrites en HTML et en langages de script dans le navigateur. Afin de faciliter la navigation, différents fabricants d'ordinateurs ont lancé leurs propres navigateurs. Ces navigateurs ne disposent pas encore d'un standard unifié pour supporter le HTML, ce qui n'est évidemment pas propice au développement d'Internet. C'est pourquoi le World Wide Web Consortium (W3C) a développé une spécification indépendante de la plate-forme et du langage, le Document Object Model (DOM).
DOM combine HTML, CSS (feuilles de style en cascade) et langages de script pour former un modèle d'interopérabilité qu'une ou plusieurs personnes peuvent implémenter. Netscape et Microsoft ont tous deux fait des suggestions au W3C pour implémenter le DOM : utiliser du HTML dynamique, c'est-à-dire DHTML (Dynamic HTML) pour résoudre le problème.
DHTML est un terme général désignant plusieurs nouvelles fonctions qui ont été étendues tout en conservant la compatibilité avec le HTML existant. Ces nouvelles fonctionnalités font principalement référence aux fonctionnalités dynamiques, aux fonctionnalités de positionnement et à la possibilité d'utiliser CSS.
Il y a deux raisons d'utiliser DHTML : Premièrement, DHTML divise chaque élément de la page Web en de nombreux objets indépendants, et les propriétés de ces objets sont spécifiées via CSS. Deuxièmement, DHTML ouvre chaque objet à un cadre de langage de programmation et de script. Le langage de programmation C++ peut être utilisé pour manipuler des objets sur la page Web, et Java script et VBscript peuvent également être utilisés pour manipuler des objets sur la page Web. Cela signifie que la page Web et tout ce qu'elle contient sont programmables, ce qui apporte de nouvelles fonctionnalités à la page Web. Nous verrons la différence lorsque nous exécuterons l'application : lorsque nous exécutions le programme sur le Web, nous devions attendre que la page Web soit retéléchargée à chaque fois après un seul élément si une page Web en contenait un grand nombre. d'objets cachés, il faudrait même un plein écran. Une toute nouvelle page passera par le processus d'accès au serveur avec DHTML, vous pouvez cliquer sur une image en haut de l'écran pour faire les paragraphes en bas de l'écran ; changement d'écran immédiatement sans avoir à accéder à nouveau au serveur. Toutes les tables deviendront des bases de données actives et les utilisateurs pourront filtrer les données de manière dynamique et triées. Cela réduit le nombre de requêtes adressées au serveur, réduisant ainsi la charge sur le serveur et améliorant les performances globales du client et du serveur.
3 Utilisation des feuilles de style CSS
La base du DHTML est constituée des feuilles de style en cascade (le style fait référence à un ensemble d'attributs d'affichage et de positionnement définis par l'auteur de la page Web). La plus grande fonctionnalité du CSS est la conception Web orientée objet, c'est-à-dire que chaque page, chaque paragraphe, chaque image et chaque tableau est considéré comme un objet. Déclarez ensuite chaque instance de cet objet. Chaque instance possède un style, qui est un ensemble d'attributs ou d'instructions d'affichage. Pour peu qu’elles soient déclarées une seule fois, ces propriétés seront utilisées sur l’ensemble de la page web voire sur l’ensemble du site. Chaque style peut recevoir un nom, tel que H1, Li. Si le nom du style est le même que le nom d'un élément (ou d'une balise) DHTML valide, le style s'appliquera automatiquement à chaque instance de l'élément s'il est donné ; Si un style est nommé sans balise DHTML correspondante, le style doit être appliqué manuellement à l'endroit où vous souhaitez qu'il apparaisse.
3.1 Définir et utiliser les styles de base. Il existe deux styles dans le segment de programme suivant : H1 et favori sont un élément DHTML valide. La partie marquée par 〈H1〈／H1〉 dans le programme héritera de tous les attributs du style H1. ; Favor est un élément non DHTML. Lors de sa définition, vous devez ajouter un point devant lui. Lors du référencement, vous devez utiliser <class> pour le déclarer dans le programme, la partie marquée par <favor> et <. /favor> héritera du style favor Toutes les propriétés.
〈HTML〉
〈TÊTE〉〈TITRE〉test〈／TITRE〉
〈TYPE DE STYLE=”text／css〉
〈 !--
H1{style de police : normal ;
poids de la police : gras ;
couleur : vert ;
line-height:20pt} ／Définir le style H1／
.favor{font-style:normal;
taille de police : 15 pt ;
image d'arrière-plan:url(back.imag.gif);
textalign:center} ／Définir le style favori／
--〉
</STYLE>
</TÊTE>
〈H1〉CECI EST UN TEST !〈／H1〉／Style d'utilisation H1／
〈P CLASS=”favor”〉AIMEZ-VOUS CECI ?〈／P〉／Utiliser style favor／
3.2 Utilisation de styles externes Les feuilles de style peuvent également être stockées dans des fichiers externes. La connexion entre ce fichier et la page peut se faire via IMPORT ou LINK. , par exemple, La feuille de style est stockée dans le fichier monsite.css. Vous pouvez insérer le code suivant dans le document pour appeler la feuille de style externe :
〈LIEN REL=FEUILLE DE STYLE
HREF=”monsite.css”
TYPE=”text／css”
Title=”Test Style”〉
4 Réaliser la fonction interactive
CSS lui-même n'a pas de fonction interactive, pour réaliser l'interaction, il est nécessaire de combiner l'objet défini par CSS avec le modèle de document (DOM) et de convertir le document Web en un document DHTML. DOM permet aux langages de script d'accéder aux éléments de la page. Les modèles objet pris en charge par Microsoft et Netscape sont quelque peu différents.
Dans le modèle de Microsoft, les langages de script ont accès à tous les éléments d'une page HTML, et tous les éléments sont reflétés sous forme d'objets dans document.all. L'extrait de programme suivant est utilisé pour écrire tous les éléments de la page :
pour (I=0;I<document.all.length;I++)
{
document.write(document.all［I］.tagName+”＼n” );
}
Dans le modèle de Netscape, un langage de script peut accéder à un ensemble spécifique d'éléments sur une page HTML, comme le contenu de la balise <layer>. Le segment de programme suivant est utilisé pour écrire les noms de toutes les couches de la page :
pour (I=0;I<document.layers.length;I++)
{
document.write(document.layers［I］.name+”＼n”);
}
5 L'utilisation de la technologie de positionnement
En HTML, la position de tout objet est toujours relative aux autres parties de la structure de la page Web. Lorsque nous compilons des pages Web, nous extrayons souvent une image de la page en ajoutant un morceau de texte. Désormais, grâce à la technologie de positionnement DHTML, les objets peuvent être fixes et empilés, c'est-à-dire que plusieurs images sont placées à la même position sur la page, puis l'objet placé au-dessus est désigné en continu pour obtenir des effets d'animation.
exemple:
*mon dos{background-color:transparent}
*mon point
position : absolue ;
haut : 5 pouces ;
à droite : 5 pouces ;
largeur : 10 pouces}
CORPS{background-image:url(／image／back.gif);}
〈class=.mypoint〉Img(src=”／image／a.gif)
〈DIV CLASS=”pile” ID=”image1” style=”z-index:4”〉
〈DIV CLASS=”pile” ID=”image2” style=”z-index:3”〉
〈DIV CLASS=”pine” ID=”image3” style=”z-index:2”〉
〈DIV CLASS=”pine” ID=”image4” style=”z-index:1”〉
</CORPS>
Dans le segment de programme ci-dessus, l'arrière-plan est défini pour permettre à la lumière de traverser la carte de base. Cet effet ne pouvait être obtenu qu'en utilisant des outils de dessin spéciaux dans le passé. Il y a également 4 images empilées sur la page, et les effets d'animation qu'elles produisent sont également très bons.
6 Conclusion
Ce qui précède a fait quelques recherches sur la façon d'utiliser le DHTML pour compiler des pages Web. De nombreux problèmes techniques attendent encore que les producteurs de pages Web les approfondissent ensemble.
Wei Xiaotan est étudiant en maîtrise à l'École des transports, Université Jiaotong du Nord, 100044, Pékin.