![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
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:
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:
<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 |
Balise | Propriété | Valeur | Description |
---|---|---|---|
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 |
|
left | auto valeur numérique entière valeur en pourcentage (%) |
|
|
top | auto valeur numérique entière valeur en pourcentage (%) |
|
|
width | auto valeur numérique entière valeur en pourcentage (%) |
|
|
height | auto valeur numérique entière valeur en pourcentage (%) |
|
|
overflow | visible hidden auto scroll |
|
|
clip | auto bottom left right top |
|
|
visibility | inherit hidden visible |
|
|
z-index | auto valeur numérique entière |
|