DHTML - La notion de couche

 

Qu'est-ce qu'une couche?

Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML:
les feuilles de style en cascade de positionnement, aussi appelée CSS-P

(Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches"

contenant des éléments et pouvant être positionnées sur l'écran.
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 DIV, SPAN et LAYER

Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV.

La première
(LAYER) est une balise spécifique à Netscape Navigator, et dont le fonctionnement est
très proche de celle énoncée ci-dessus, c'est-à-dire la superposition
de transparents (layer signifie justement couche). Les balises DIV et SPAN

sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que
Netscape Navigator
 

La balise LAYER

La syntaxe de la balise LAYER

est la suivante :

<LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut">

éléments HTML
</LAYER>

Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version
4 ou supérieure) peut se faire de la manière suivante :

<LAYER NAME="IMG1" LEFT="20" TOP="30">

<IMG SRC="image.gif">

</LAYER>

<LAYER NAME="IMG2" LEFT="25" TOP="35">

<IMG SRC="image2.gif">

</LAYER>

 

Les balises DIV et SPAN

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.
Etant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4,
les possibilités "dynamiques" qu'il offre sont plus vaste que celles de Netscape, c'est-à-dire
qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire
d'un code écrit en Javascript après chargement de la page (d'où la notion de HTML dynamique).

Le positionnement grâce aux balises DIV et SPAN est expliqué en détails dans

la section HTML 4.0

Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons :

• Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur.

Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

• Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

La syntaxe des balises DIV/SPAN est la suivante :

<DIV style="position: absolute; top: 99 px;
left: 99 px; visibility : visible;z-index : 2;">

éléments HTML
</DIV>

 

Récapitulatif des attributs des balises

<b>Balise<b>	<b>Propriété<b>	<b>Valeur<b>	<b>Description<b>
LAYER	name	Chaine de caractère	Définit un identifiant unique pour la couche
	left	valeur numérique entière	distance en pixel à la bordure gauche
	top	valeur numérique entière	distance en pixel au haut de la page
DIV et SPAN	position	static absolute relative	Aucun mouvement par rapport au document positionnement par rapport au document par rapport à l'élément précédent
	left	auto valeur numérique entière valeur en pourcentage (%)	distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pourcentage
	top	auto valeur numérique entière valeur en pourcentage (%)	distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage
	width	auto valeur numérique entière valeur en pourcentage (%)	largeur automatique largeur de l'élément en pixels largeur de l'élément en pourcentage
	height	auto valeur numérique entière valeur en pourcentage (%)	hauteur automatique hauteur de l'élément en pixels hauteur de l'élément en pourcentage
	overflow	visible hidden auto scroll	affiche le contenu même s'il est trop grand cache le contenu superflu automatique affiche des barres de défilement
	clip	auto bottom left right top	découpage automatique découpage en bas découpage à gauche découpage à droite découpage en haut
	visibility	inherit hidden visible	visibilité par défaut caché visible
	z-index	auto valeur numérique entière	superposition automatique valeur indiquant la profondeur

Précédent

• 1
• 2
• 3

Suivant

Réalisé sous la direction de Jean-François PILLOU, fondateur de CommentCaMarche.net.