SELFHTML: HTML / Layer - éléments positionnables / Définir et positionner des layer

SELFHTML/Quickbar HTML Layer - éléments positionnables

	Définir et positionner des layer
	Généralités sur les layer Définir des layer Définir des layer sur la ligne (effet marqueur feutre) Rogner le domaine d'affichage des layer Layer avec le contenu d'un autre fichier Imbrication de layer

Généralités sur les layer

Les layer (couches) sont un élément du langage HTML introduit par Netscape dans la version 4.0 de son navigateur. À l'aide des deux repères HTML qui en font partie, 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 layer. Vous faites commencer cette unité ainsi définie à 100 pixels de la gauche et à 50 pixels du haut de las 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 layer n'ont pourtant pas tellement d'importance excepté la possibilité du positionnement absolu d'éléments. Le but propre du layer est de former une base HTML pour HTML dynamique. Pour le positionnement dynamique, le complément pour HTML dynamique, des passages layer peuvent être modifiés de multiple façon à l'aide de JavaScript. Ainsi des passages layer peuvent voyager sur l'écran, s'ouvrir et se refermer, accepter un autre contenu etc...

Vous pouvez définir autant de layer que vous le voulez dans un fichier HTML. Les layer peuvent aussi se chevaucher. Si par exemple, vous rassemblez deux titres suivis d'un graphique et d'un texte explicatif chacun sur un layer, les deux layer peuvent avoir les mêmes positions en pixels. À l'aide de JavaScript vous pouvez alors éteindre un des layer 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 layer 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 layer, 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 layer 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. Même pour un repère HTML prévu avant tout pour le travail avec JavaScript, on y fit montre de peu de compréhension. C'est pourquoi les commandes décrites ici n'eurent pas le droit d'entrer dans le standard HTML 4.0. Si on considère le fait que les nouvelles commandes CSS pour positionner les é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 layer en HTML a été mise à l'écart. À cause de la forte liaison entre la technique des layer et HTML dynamique, tout l'apport de Netscape pour HTML dynamique en a à dire vrai été rendu fragile.

Définir des layer fixement positionnés

Exemple d'affichage: aperçu

Vous pouvez définir dans le corps d'un fichier HTML (voir ossature d'un fichier HTML) des layer fixement positionnés. De tels layer ont un coin supérieur gauche défini dans la fenêtre d'affichage. En outre, vous pouvez imposer une certaine largeur.

Exemple:

<layer id="exemple" left=300 top=250 width=150 height=400>
<h1>un titre</h1>
<img src="fichier.gif" alt="une image">
</layer>

Explication:

Avec <layer ...> vous introduisez la définition d'un passage layer dans un fichier HTML (layer = couche). Avec la mention name= vous pouvez affecter un nom au passage défini.

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 layer, avec height= la hauteur (width = largeur, height = hauteur). Les éléments dans le layer seront alors coupés de telle façon que la largeur soit respectée.

Avec id= vous pouvez affecter un nom au passage layer. Sous ce nom vous pouvez adresser le layer en JavaScript à l'aide de l'objet layers. En plus de id= la mention name= pour les layer est également interprétée dans ce but.

Entre le repère d'ouverture <layer ...> et l'indispensable repère de fermeture </layer> vous pouvez noter d'autres éléments de votre choix d'un fichier HTML, à savoir par exemple des titres, des paragraphes de texte, des tableaux, des références de graphiques ou de multimédia, des liens etc... Tous les éléments que vous définissez dans un layer se conduisent conformément aux propriétés que vous définissez pour le layer correspondant. Pour cela, vous devez vous représenter le layer lui-même comme une fenêtre d'affichage distincte sans bordure visible qui est incorporée dans la fenêtre d'affichage du navigateur WWW.

Attention:

Outre les mentions left= et top= il y a également encore les mentions similaires pagex= (produit normalement le même effet que left=) et pagey= (produit normalement le même effet que top=). La différence réside en ce que left= et top= s'orientent pour être exact sur le bord du document et non sur le bord de la fenêtre. La différence est sensible quand vous voulez imbriquer des layer. La différence entre les attributs y sera plus précisément décrite.

Si vous travaillez avec des layer 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ément à afficher dans des layer 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 mises hors service. Si par exemple un graphique ou un tableau prennent 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 layer.

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 layer commencera simplement en haut à gauche comme premier élément dans le corps de fichier du fichier HTML.

Quand les layer ne contiennent rien d'autre que des graphiques GIF avec arrière plan transparent, vous pouvez superposer ces graphiques à volonté à l'aide de layer et créer ainsi des effets intéressants.

Définir des layer sur la ligne (effet marqueur feutre)

Exemple d'affichage: aperçu

Les layer sur la ligne (effet marqueur feutre) commencent relativement à l'endroit auquel ils se trouvent dans le fichier HTML. Ce genre de layer ne crée pas un paragraphe distinct dans le corps du texte. Autrement ils peuvent avoir toutes les propriétés des layer par exemple une propre couleur d'arrière plan.

Exemple:

C'est un<ilayer>layer sur la ligne (effet marqueur feutre)</ilayer> au milieu d'un texte.

Explication:

Avec <ilayer ...> vous introduisez la définition d'un passage layer sur la ligne (ilayer = layer sur la ligne ). Avec la mention name= vous pouvez affecter un nom au passage défini.

Ainsi qu'il a été défini dans l'exemple ci-dessus, un passage <ilayer> n'a aucun effet. Ce n'est qu'en mentionnant des couleurs d'arrière plan et une image d'arrière plan qu'on atteint des effets intéressants.

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 layer sur la ligne. Ainsi vous pouvez par exemple noter une instruction telle que:
Ce <ilayer top=3>mot</ilayer> apparaît exactement 3 pixels plus bas que le reste du texte

Rogner le domaine d'affichage des layer

Exemple d'affichage: comment on fait

Vous pouvez imposer un domaine dans lequel le contenu d'un layer 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 des effets que le contenu d'un layer apparaît comme vu par la fenêtre par laquelle on n'aperçoit qu'une partie du contenu.

Exemple:

<layer name="exemple" left=30 top=20 width=260 clip="20,30,200,300">
<h1>un titre</h1>
<img src="fichier.gif" alt="une image">
</layer>

Explication:

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é. La mention doit figurer entre guillemets. 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 layer. Si donc dans le premier des exemples ci-dessus, un coin en haut et à gauche est défini pour le layer 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 layer (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 layer. Si donc dans le deuxième des exemples ci-dessus vous voulez avec width= imposer une certaine largeur du layer et vous assurez que la largeur sera aussi respectée si le contenu du layer est plus large, vous pouvez grâce à clip="200,Höhe" imposer que la largeur soit maintenue.

Layer avec le contenu d'un autre fichier

Exemple d'affichage: aperçu

Il est possible d'afficher un autre fichier HTML dans un layer.

Exemple:

<layer src="news.htm" top=150 left=200</layer>

Explication:

Avec l'attribut src= vous pouvez incorporer un autre fichier HTML dans un layer. 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 layer

Vous pouvez dans des passages de layer définir d'autres layer.

Exemple 1:

<layer top=100 left=100>
  <layer top=100 left=100>
     <img src="image1.gif">
  </layer>
</layer>

Exemple 2:

<layer top=100 left=100>
  <layer pagey=100 pagex=100>
     <img src="image1.gif">
  </layer>
</layer>

Explication:

Dans un layer, vous pouvez définir d'autres layer.

L'important c'est l'effet différent des mentions de positions. Dans l'exemple 1 ci-dessus le layer intérieur reçoit les mêmes mentions pour left= et top= que le layer extérieur. Le layer extérieur est donc le point de référence pour la position de départ du layer intérieur, et non pas la fenêtre d'affichage! Le layer 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 layer extérieur.

Par contre il en va tout à fait différemment dans l'exemple 2. Là le layer intérieur reçoit les mentions 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 layer placé plus haut dans la hiérarchie. Dans l'exemple 2, la conséquence en est que le layer extérieur et intérieur commencent exactement à la même position. Étant donné que le layer extérieur dans l'exemple n'a pas d'autre contenu que le layer intérieur, seul le layer intérieur est visible à l'écran.


après:	Arrière plan de layer
avant:	Types Mime pour formats de fichiers

SELFHTML/Quickbar HTML Layer - éléments positionnables