Les calques sont simplement des sortes de cadres dans lequels on peut inclure du texte, des images, des animations, et même d'autres calques. L'immense avantage est que les calques, contrairement aux tableaux, qui, eux, ne permettent pas toujours un positionnement au pixel près, les calques permettent d'être placés exactement ou on veut dans la page.
Pour créer un calque : Insertion/Calque
Il existe 2 genres de calques : les calques CSS (balise DIV, SPAN), et les calques Netscape. Les calques Netscape (balise Layer, ILayer)utilisant des balises propres à Netscape, il me semble sage de les écarter au profit des balises de CSS.
Voici un exemple de l'utilisation d'un calque assez petit, de fond cyan, en haut à gauche de la fenêtre, avec comme texte à l'intérieur : "Ceci est un calque". On constale que tout se passe dans les options de la balise <DIV>
<DIV
ID="intro"
STYLE="position :
absolute;
width :
255px;
height :
30px;
z-index :
1;
left :
8px;
top :
6px;
background-color :
#CCFFFF;
layer-background-color: #CCFFFF;
background-image :
url(/images/maison.gif)
border :
1px none #000000
overflow: visible
">
Ceci est un calque
</DIV>
| Paramètre | Explication |
| ID="intro" | [Fenêtre de propriétés : Calque] Nom du calque, qui peut être utilisé par les langages de script (VBScript, Javascript, ...) |
| position:absolute; | [Fenêtre de propriétés : ?] |
| width:255px; | [Fenêtre de propriétés : L] Largeur (Longueur) du calque exprimée en pixels. Attention bien entendu aux résolutions d'écran |
| height:30px; | [Fenêtre de propriétés : H] Hauteur du calque exprimée en pixels. Attention bien entendu aux résolutions d'écran |
| left:8px; | [Fenêtre de propriétés : G] Espacement en pixels depuis le côté gauche du calque jusqu'au côté gauche de la feuille HTML |
| top:6px; | [Fenêtre de propriétés : H] Espacement en pixels depuis le haut du calque jusqu'en haut de la feuille HTML |
| Avec les propriétés de taille (width, height, left et top), on peut définir plusieurs unités : Pixels, millimètres, picas, %ou pouces. Les deux unités qui me semblent les meilleures sont pixels (px) et %. Le pourcentage permet d'obtenir des cadres dont la taille varie en fonction de la taille de la fenêtre du navigateur. Il suffit de rajouter le signe % juste après la valeur. ATTENTION : Le pourcentage DOIT s'écrire explicitement. Dès qu'on redimensionne ou déplace le calque avec la souris, les valeurs reviennent aux pixels. Ce qui fait que ce doit être assez complexe d'ajuster plusieurs calques avec des pourcentages. | |
| z-index:1; | [Fenêtre de propriétés : Index Z] Cette option permet de donner un ordre d'affichage des calques, quand ils sont superposés (qui passe devant qui). Il me semble bien d'empêcher que les calques se superposent. Pour ce faire : Dans les propriétés de calques (fenêtre calques), il suffit d'activer pour chaque calque la case à cocher "Empêcher Le Chevauchement". Plus la valeur est élevée plus le calque passe devant les autres. |
| background-color: #CCFFFF; | [Fenêtre de propriétés : Couleur Ar. pl.] |
| layer-background-color: #CCFFFF; | [Fenêtre de propriétés : ?] |
| background-image: url(/images/maison.gif) | [Fenêtre de propriétés : image ar. pl.] Permet de mettre une image de fond en mosaïque, comme une simple page web |
| border: 1px none #000000 | [Fenêtre de propriétés : ?] Devrait permettre une bordure au cadre, mais je n'ai pas réussi. |
| overflow: visible |
[Fenêtre de propriétés : Débord.] Cette option n'est utile UNIQUEMENT lorsque le contenu du calque peut dépasser les dimensions du calque (Typiquement une image dont les dimensiosn dépassent en largeur ou en hauteur celles du calque conteneur, mais aussi un grand texte que l'on peut mettre intentionnellement dans un cadre trop petit). Les options sont : visible : Le calque va être agrandi de manière à
ce que le contenu soit visible dans tous les cas Dans DreamWeaver, même si on essaie de rétrécir un cadre plus que son contenu, ce ne sera pas visible. Les coordonnées width et height vont effectivement par contre correctement s'ajuster |
| Ceci est un calque | Contenu. Ici, c'est un simple texte, mais on peut intégrer n'importe quoi : Images, animations, ... Comme simplement dans une page sans calques. |
Attention : Si vous avez du texte en dehors de tout calque, et que vous ajoutez du calque, le texte ne viendra pas "s'enrouler" autour des calques, mais les calques passeront purement et simplement par dessus le texte.
Vous avez la possibilité de constater l'organisation de vos calques avec Fenêtre/Calques.
Il est possible de définir les options des nouveaux calques par défaut : Edition/Préférences. A gauche, cliquez sur Calques, et changez les options à droite.
Les calques ne sont pas compatibles avec les navigateurs de version 3 ou moins. Il est alors nécessaire de convertir les calques en tableaux : Modifier/Mode De Mise En Forme/Convertir les Calques En Tableaux. AVec ce système on peut d'ailleurs faire l'inverse. L'effet secondaire le plus spectaculaire est que les textes ne passent plus derrière le nouveau tableau, mais en dessous.
Les calques peuvent travailler en étroite collaboration avec la grille de positionnement. Pour faitre apparaître la grille : affichage/Grille/Afficher. (même méthode pour la faire disparaître)
Pour changer la taille des carreaux, eta les autres options de grille : affichage/Grille/Paramètres. Il y a notamment une options très pratique qui précise a quelle fréquence l'alignement doit s'effectuer (L'effet de déplacement par a coups : 5, 10, 20 Pixels ?)
Pour aligner ou non les calques sur la grille : affichage/Grille/Aligner sur