Pages dynamiques et DHTML

Résumé du document

"DHTML" beaucoup en ont entendu parler mais peu de gens savent véritablement de quoi il en retourne. Ce cours a pour but d'appréhender les mécanismes qui se cachent derrière le terme de "DHTML" et qui permettent de réaliser des sites web véritablement dynamique.

Le terme "dynamique" signifie ici que vous allez pouvoir animer vos pages web, les rendre interactives, voire même réaliser des jeux en ligne. De la définition des styles, à la conception de calques animés en passant par la possibilité de capter les événements utilisateurs, ce cours présente de manière synthétique toutes les fonctionnalités dont vous aurez besoin.

Extraits

[...] La syntaxe est alors #nom_ID { propriété de style: Valeur; . } On l'appellera de la manière suivante . On ne peut faire appel qu'à un seul même ID par page! Les calques DIV et SPAN Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises et Balise SPAN La balise sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS. [...]

[...] On les appelle feuilles de style en cascade ("Cascading Style Sheets") car on peut en définir plusieurs, et en cas de redondance de style un ordre de priorité est donné par le browser (navigateur). Elles permettent: D'avoir une présentation homogène sur tout un site. De pouvoir changer l'aspect du site entier en modifiant quelques lignes. D'offrir une plus grande lisibilité du code HTML. De positionnemer aux pixel près les éléments. D'optimiser le temps de chargement des pages Définition d'un style C'est une chose simple à faire: balise {propriété de style: Valeur; propriété de style: Valeur . [...]

[...] La réalisation de pages animées en temps réel doit employer des scripts clients réalisant du HTML dynamique, ou D-HTML. Je présente donc ci-dessus les fonctionnalités du HTML associé au JavaScript et aux feuilles de style permettant d'une part de remettre en forme ses pages au pixel près, et d'autre part d'animer le tout pour rendre vos sites plus attrayants. Les feuilles de style Le concept de feuilles de style est apparu en 1997 avec le browser Internet Explorer puis s'est généralisé avec les versions 4.0 d'Internet Explorer et de Netscape Navigator. [...]

[...] Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres: La position par rapport au haut du navigateur La position par rapport à la bordure gauche du navigateur La largeur La hauteur Le Z-Index, c'est-à-dire le niveau de superposition de la balise En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'éléments HTML pouvant être superposés à l'écran comme des carrés de papier calque et pouvant être déplacés séparément (chaque calque est repéré par un identifiant unique que l'on définit comme attribut) dans la fenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de superposition des calques, c'est-à-dire quel calque se trouve au-dessus des autres . Les balises permettant de constituer des couches que nous étudierons sont les balises SPAN et DIV. (LAYER n'étant pas compatbile Internet Explorer) La balise DIV Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN. [...]

[...] La définition des classes est aussi simple que celles des styles .classe {propriété de style: Valeur; . } Où "classe" représente le nom que vous donnez à la classe. Pour appeler cette classe il suffit de rajouter un attribut à la balise: . Créons par exemple la classe "important" .important {font-type: arial; font-color: red; font-weight: bold} Les propriétés de style Identifier les éléments d'une page HTML Dans la plupart des balises du HTML, une propriété id permet de nommer les objets créés. Cet identificateur en fait des objets au sens JavaScript du terme. [...]