SELFHTML/Aides à la navigation HTML/XHML Calques (Netscape)| SELFHTML/Aides à la navigation HTML/XHML Calques (Netscape) |
Les Layer (calques) sont un élément du langage HTML que Netscape introduisit avec la version Version 4.0 de son navigateur. À l'aide des deux éléments qui le composent il est possible de marquer des passages de son choix d'un fichier HTML pour les positionner exactement. Ainsi par exemple vous pouvez définir un titre, un graphique et un texte explicatif comme calque. Vous faites commencer cette unité ainsi définie à 100 pixels de la gauche et à 50 pixels du haut de la fenêtre d'affichage du navigateur. Pour l'unité totale, vous définissez une largeur maximale de 200 pixels par exemple.
En HTML seul, les calques n'ont pourtant pas tellement d'importance exceptée
la possibilité du positionnement absolu d'éléments.
Le but propre du calque est de former une base HTML pour le 
HTML dynamique d'après le modèle de Netscape. Avec ce modèle, les passages calque peuvent être modifiés de diverses manières à l'aide de 
JavaScript. Ainsi des passages calque peuvent voyager sur l'écran, s'ouvrir et se refermer, accepter un autre contenu etc.
Vous pouvez définir autant de calques que vous le voulez dans un fichier HTML. Les calques peuvent aussi se chevaucher. Si par exemple, vous rassemblez deux titres suivis d'un graphique et d'un texte explicatif chacun sur un calque, les deux calques peuvent avoir les mêmes positions en pixels. À l'aide de JavaScript vous pouvez alors éteindre un des calques de façon dynamique et allumer l'autre. Mais vous pouvez aussi afficher les deux en même temps et déterminer lequel sera posé sur l'autre.
Les calques peuvent avoir leur propre couleur d'arrière plan (papier peint). Ce qui permet aussi beaucoup de possibilités supplémentaires de gestion de la répartition des couleurs et des formes À l'écran.
Si vous définissez un graphique GIF avec arrière plan transparent comme calque, vous pouvez poser ce graphique sur ou sous du texte ou d'autres graphiques et provoquer ainsi des effets fascinants.
Le seul problème avec les calques est qu'ils sont arrivés trop tard. Le consortium W3 avait déjà prévu d'ancrer la possibilité du positionnement absolu non pas en HTML mais dans les feuilles de style CSS. C'est pour cette raison que les éléments présentés ici n'eurent pas droit de cité dans le standard de langage HTML 4.0. Si on considère le fait que les nouvelles propriétés CSS pour positionner des éléments font partie du standard officiel et sont interprétées aussi bien par Netscape que par l'Explorer Internet MS,
la technique des calques en HTML a été mise à l'écart. À cause de la forte liaison entre la technique des calques et HTML dynamique d'après Netscape 4.x, ils sont cependant encore décrits ici.
 
|
Définir des calquesVous pouvez définir dans le corps d'un fichier HTML des calques fixement positionnés. De tels calques ont un coin supérieur gauche défini dans la fenêtre d'affichage. En outre, vous pouvez imposer une certaine largeur.
<html> <head> <title>Texte du titre</title> </head> <body> <layer id="exemple_ID" name="nomexemple" top="150" left="250" width="300"> <h1>Quelque part sur votre écran ...</h1> <p>Tout ce que vous voyez ici est intégré dans un calque. Même cette image :</p> <p><img src="image.gif" width="68" height="68" border="0" alt="Tout ce que la lune ne doit pas voir"></p> </layer> </body> </html> |
Avec <layer> vous introduisez la définition d'un passage
calque dans un fichier HTML (layer = calque). Avec la mention name= vous pouvez affecter un nom au passage défini. Entre le repère d'ouverture <layer> et le repère de fermeture </layer> vous pouvez noter d'autres éléments de fichier HTML de votre choix, donc par exemple des titres, des paragraphes, des tableaux, des graphiques ou des références multimédia, des liens etc. Tous les éléments que vous définissez dans un calque se comportent conformément aux propriétés que vous définissez pour le calque correspondant. Vous devez vous représenter le calque-même comme une fenêtre d'affichage distincte sans bordure visible et qui est incorporée dans la fenêtre d'affichage normale du navigateur Web.
Avec la mention left= vous déterminez le nombre de pixels du bord gauche de la fenêtre d'affichage, avec top= le nombre de pixels du bord haut de la fenêtre d'affichage (left = gauche, top = haut). Avec width= vous pouvez imposer une largeur pour le passage calque, avec height= la hauteur (width = largeur, height = hauteur). Les éléments dans le calque seront alors coupés de telle façon que la largeur soit respectée.
Avec id= vous pouvez affecter un nom au passage calque. Sous
ce nom vous pouvez adresser le calque en JavaScript à l'aide de l'objet layers . Avec id= la mention name= pour les calques est également interprétée dans ce but.
Si vous travaillez avec des calques et que vous les positionnez de façon absolue dans l'espace d'affichage, il sera judicieux dans la plupart des cas de noter dans un fichier HTML, tous les éléments à afficher dans des calques fixement positionnés. Car dans le cas contraire, vous perdrez vite le contrôle de l'affichage.
Si le contenu l'exige, les mentions de largeur seront désactivées. Si
par exemple un graphique ou un tableau prend plus de place que la largeur
mentionnée, le graphique ou le tableau sera montré de toutes façons en pleine largeur. Vous pouvez de toutes façons l'éviter - voir rogner le domaine d'affichage des calques.
Les mentions du coin en haut à gauche et de la largeur sont bien dans la plupart des cas souhaités mais pourtant pas impératives. Si vous n'en faites aucune mention, le calque commencera simplement en haut à gauche comme premier élément dans le corps de fichier du fichier HTML.
|
|
Définir des calques incorporés (effet marqueur feutre)Les calques incorporés commencent relativement par rapport à l'endroit auquel ils sont placés dans le fichier HTML. Ces calques ne créent pas de paragraphe distinct dans le flux de texte. Sinon ils peuvent avoir toutes les propriétés des calques donc par exemple leur propre couleur d'arrière plan.
<html> <head> <title>Texte du titre</title> </head> <body> <p>Ceci est <ilayer bgcolor="#FFEECC" top="3">un texte calque</ilayer> en plein milieu d'un texte. Le mot "texte calque" est placé dans un calque incorporé auquel une couleur d'arrière plan est affectée. En outre le calque incorporé a été placé 3 pixels plus bas que le texte normal.</p> </body> </html> |
Avec <ilayer> vous introduisez la définition d'un
passage calque sur la ligne, avec </ilayer> vous le fermez (ilayer = inline layer= calque incorporé).
Vous pouvez également utiliser des attributs comme top= ou left= sur un passage <ilayer>. Ces mentions ne seront alors pas interprétées comme valeurs mesurées à partir du bord de la fenêtre, mais comme valeurs mesurées`a partir de la position normale du calque sur la ligne. Ainsi vous pouvez par exemple noter une instruction telle que:
<ilayer top="3">Mot</ilayer>. Alors ce mot unique apparaît exactement 3 pixels plus bas que le reste du texte.
Même les attributs id= et name= sont permis pour les calques incorporés.
|
|
Rogner le domaine d'affichage des calquesVous pouvez imposer un domaine dans lequel le contenu d'un calque doit être affiché. Si le contenu nécessite davantage de place (par exemple parce que le graphique est plus large), il sera rogné. Avec cette particularité, vous pouvez créer l'illusion que le contenu d'un calque apparaît comme vu par la fenêtre par laquelle on n'aperçoit qu'une partie du contenu.
<html> <head> <title>Texte du titre</title> </head> <body> <h1>Demie lune</h1> <layer top="100" left="150" clip="0,0,68,34"> <img src="image.gif" width="68" height="68" border="0" alt="lune"> </layer> </body> </html> |
Avec l'attribut clip= vous pouvez imposer un domaine d'affichage (clip = extrait). Derrière le signe égal notez deux ou quatre valeurs pour délimiter le domaine désiré. Séparez les valeurs par des virgules.
Si vous mentionnez quatre valeurs les chiffres signifient les coordonnées du rectangle désiré (dans cet ordre):
clip="pixels pour la gauche, pixels pour le haut, pixels pour la droite,
pixels pour le bas""
et cela par rapport au coin en haut à gauche du calque. Si donc dans le premier
des exemples ci-dessus, un coin en haut et à gauche est défini de façon absolue pour le calque par left="30" et top="20", ainsi la première mention
pour clip= - 20 - signifie à peu près: le domaine d'affichage forcé commence à gauche à 20 pixels du bord gauche du calque (qui se trouve à 30 pixels), considéré de façon absolue donc À 50 pixels.
Si vous mentionnez deux valeurs, les chiffres signifient les largeur et
hauteur du rectangle désiré (dans cet ordre):
clip="pixels pour largeur, pixels pour hauteur"
et cela par rapport au coin en haut à gauche du calque. Si donc dans le
deuxième des exemples ci-dessus vous voulez avec width= imposer une certaine largeur du calque et vous assurer que la largeur sera aussi respectée si le contenu du calque est plus large, vous pouvez grâce à clip="200,[hauteur]" imposer que la largeur soit maintenue.
|
|
Définir des calques avec le contenu d'autres fichiersIl est possible d'afficher un autre fichier HTML dans un calque.
<html> <head> <title>Texte du titre</title> </head> <body> <h1>SELFHTML dans un calque</h1> <layer top="80" left="40" src="../../../index.htm"></layer> </body> </html> |
Avec l'attribut src= vous pouvez incorporer un autre fichier HTML
dans un calque. Ici s'appliquent les règles pour référencer en HTML. Le fichier prend alors la place habituelle dans la fenêtre d'affichage, en commençant aux positions mentionnées par top= et left=. Les mentions width= et height= ne seront respectées que si le contenu du fichier en largeur et en hauteur exige moins de place.
|
|
Imbrication de calquesVous pouvez dans des passages de calque définir d'autres calques.
<html> <head> <title>Texte du titre</title> </head> <body> <layer top="100" left="100" bgcolor="#FF99FF"> <h1>La puissance</h1> <layer pagex="80" left="40" bgcolor="#99FFFF"> <h1>vient des ténèbres</h1> </layer> </layer> </body> </html> |
L'important c'est l'effet différent des mentions de positions. Dans
l'exemple ci-dessus le calque intérieur reçoit les mêmes mentions pour left= et top= que le calque extérieur. Le calque extérieur est donc le point de référence pour la position de départ du calque intérieur, et non pas la fenêtre d'affichage! Le calque intérieur commence dans l'exemple à 100 pixels du haut et à 100 pixels de la gauche, mesurés à partir du coin en haut
et à gauche du calque extérieur.
Il est cependant également possible de positionner le calque intérieur de façon absolue. Pour le faire, les attributs supplémentaires suivant sont disponibles pagey=100 et pagex=100 (pagex = page x = valeur de la page x, pagey = page y = valeur de la page y). Ces mentions
font en sorte que le point de référence utilisé sera la fenêtre d'affichage et non pas le calque placé plus haut dans la hiérarchie.
|
|
Couleur d'arrière plan de calqueVous pouvez définir une couleur d'arrière plan distincte pour chaque calque qu'il soit fixement positionné ou non.
<html> <head> <title>Texte du titre</title> </head> <body> <layer top="0" left="0" width="50" height="40" bgcolor="#000000"></layer> <layer top="0" left="50" width="50" height="40" bgcolor="#000033"></layer> <layer top="0" left="100" width="50" height="40" bgcolor="#000066"></layer> <layer top="0" left="150" width="50" height="40" bgcolor="#000099"></layer> <layer top="0" left="200" width="50" height="40" bgcolor="#0000CC"></layer> <layer top="0" left="250" width="50" height="40" bgcolor="#0000FF"></layer> </body> </html> |
Avec l'attribut bgcolor= dans le repère d'ouverture d'un calque <layer> ou <ilayer> vous déterminez une couleur d'arrière plan (bgcolor = background color = couleur d'arrière plan). Ici s'appliquent les règles pour définir les couleurs en HTML.
Si vous définissez une couleur d'arrière plan pour un calque, vous devez choisir pour le texte figurant sur le calque une couleur de police qui contraste.
|
|
Image d'arrière plan (papier peint) pour calquePour tout calque fixement positionné ou non une image d'arrière plan
distincte (papier peint) peut être définie. Cela fonctionne exactement comme pour les images
d'arrière plan (papier peint) pour tout le fichier.
<html> <head> <title>Texte du titre</title> </head> <body background="retour1.jpg"> <layer top="0" left="0" width="400" height="300" background="retour2.gif"> <h1>Couleurs du temps</h1> </layer> </body> </html> |
Avec la mention background= dans le repère d'ouverture, vous
pouvez déterminer une image d'arrière plan pour le calque (background = arrière plan). Ici s'appliquent les règles pour référencer en HTML.
Dans ce document vous trouverez dans la partie sur les sortes de graphiques
typiques pour les pages WWW quelques images d'arrière plan.
Netscape interprète aussi des graphiques GIF animés comme images d'arrière plan.
|
| |
 |
Ranger et contrôler les calques
|
 |
Incorporer du multimédia (Netscape traditionnel)
|
| SELFHTML/Aides à la navigation HTML/XHML Calques (Netscape) |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
