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:

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:

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

 

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
  • 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

 


 

 

 

 











Ajouter aux Favoris Ajouter aux votre page
 

 


Acceuil | Forum| Contactez-Nous | Annace |Chat| Music |Radios|Sockets |Protocoles|Windows NT
Langage C |Langage C++ | Assembleur | Java | Perl |Pascal/delphi | Visual basic|MERISE | SQL| JDBC| ODBC
ASP|CGI |HTML |DHTML |XML|Javascript |JSP |PHP|Servlets |VBScript |WAP |UNIX |Linux |MacOS|Windows 9x
Assemblage-PC |Modèle relationnel|Histoire-PC|Fonctionnement-PC|photo pour rire|MS-Dos|Architecture-PC
Flash MX |Word-2003|Power Point|Excel|Langage C|Langage Java|Visual Basic|La base XP | programming
Physique Arabic partie I|Programation en arabe|Physique Français|Internet| Sécurité Informatique
HTML |Agebre en Français|Math Français partie I|Physique Arabic partie II| الطرق العددية
Electricité| Math Français partie II|Math en Arabic|Agebre en Arabic| الأعداد العقدية
Tous les cours informatiques en vidéos |Droit Informatique |logiciels
Tous les cours physiques en vidéos |Microsoft office
Cours math en vidéos | Msn en ligne
TV Live


Autoformations les cours informatiques en vidéos gratuitement
:: Copyright © 2008 http://www.autoformations.co.cc All rights reserved ::