Les calques supplémentaires. avec Magix Designer 10 et autres versions

Transcription

1 Les calques supplémentaires avec Magix Designer 10 et autres versions Pourquoi ajouter un calque à votre page web? L'ajout d'un calque à une page web est parfois nécessaire lorsque la page est déjà bien remplie et que quelques explications ou illustrations ne peuvent prendre place dans la page. Un calque supplémentaire peut selon l'imagination du Webmaster, créer des effets surprenants de transformations d'images, de textes, etc. et laisser libre cours à son inspiration créative. Comment s'affiche un calque sur une page web? Par le Mouse Over* (souris placée au-dessus d'un objet rendu réactif par la création d'une fonction "Onemouseover"(langage html )) Cette fonction se crée automatiquement lors de l'application du lien à l'objet sélectionné, dans l'onglet "Survol de souris". (*Le mouse over affiche le calque, le temps que la souris survole l'objet réactif). Par le clic gauche traditionnel sur un objet rendu réactif par la fonction "onclick". La fonction "Onclick" est mise automatiquement en application dans l'onglet "Lien" des propriétés de l'objet à rendu réactif au click lorsque vous lui avez appliqué la destination du lien. Le clic traditionnel ouvrira le calque par un clic gauche sur le bouton que l'on aura créé pour cette opération. Le calque se refermera de lui-même lorsque la souris ne survolera plus le bouton et si, dans les paramètres, l'option "Fermer automatiquement le pop-up" n'est pas cochée. Dans le cas contraire, un clic sur une croix (générée automatiquement par Designer) sera nécessaire pour fermer le calque ouvert. L'apparition d'un calque supplémentaire est par défaut instantanée, mais peut être réglée de façon plus sophistiquée, en choisissant l'option de son apparition ainsi que la durée de sa transition. A noter que l'on peut reproduire un effet pop-up avec le procédé d'ajout de calque, ce qui est préférable, si l'on désire que l'apparition de l'objet se fasse à un endroit défini de la page web (ce qui n'est pas le cas du pop-up traditionnel). De cette manière, on peut contrôler l'agrandissement et la position de l'objet au pixel près. Le calque supplémentaire à la dimension de votre page web. Sur ce calque, ne seront visibles que les éléments que vous aurez placés dessus, ces éléments auront l'emplacement que vous leur aurez désigné ainsi que le format que vous leur aurez attribué. Il est alors aisé de comprendre que le calque Off restera visible sous le calque additionnel dans les parties qui n'ont pas été remplies sur ce dernier. De cette façon, le calque supplémentaire peut être un astucieux complément du calque Off (Nous le constaterons par la suite). Les calques supplémentaires avec Magix Designer 10 et autres versions Page 1

2 Mais où se trouve ce fameux bouton de création d'un nouveau calque? Dans la galerie des pages et des calques bien entendu, mais si l'on n'a pas sélectionné un calque de la page, il n'apparaît pas!!! De plus, le malin, prend la place d'un autre bouton! Voyons cela : Première image : Boutons affichés sans aucun calque de page sélectionné : Le bouton s'appelle Nouvelle page et qui sert à la création de pages supplémentaires. Seconde image : Boutons affichés avec sélection d'un calque, le bouton "Nouveau calque" a remplacé le bouton Nouvelle page! C'est donc en sélectionnant un calque de page que vous pourrez en créer un nouveau. Le premier calque que vous créerez portera le chiffre 5 du fait qu'il sera le cinquième de la page. Vous pourrez changer son nom si vous le désirez ou faire comme sur ces images le laisser comme tel. A savoir que si vous pouvez déplacer les calques supplémentaires à votre convenances entre eux, ils doivent rester obligatoirement au-dessus des 4 calques conventionnels. Les calques supplémentaires avec Magix Designer 10 et autres versions Page 2

3 Ces calques supplémentaires possèdent comme tous les calques de la page, un œil et un cadenas pour vous permettre (en cliquant dessus) de les visualiser, les cacher et les cadenasser sans incidence sur leur comportement lors de leur publication. Ces boutons ne sont là que pour le contrôle des objets sur les pages, par le webmaster. Lien en mode Survol de souris ou Mouse over Le calque 5 étant créé, il ne reste plus qu'à revenir sur le calque Off pour y créer un objet réactif vers ce lien. L'objet peut être ce que vous voulez : Un bouton, une image, une forme, du texte Prenons l'exemple de la page de démonstration disponible sur ce site. Les boutons réglés en MouseOver font apparaître chacun une photo différente sur la page Off par l'intermédiaire des calques supplémentaires. Chaque bouton a donc un lien "Survol de souris" vers son calque respectif. Pour créer ce lien, voici la marche à suivre : 1 - Sélectionner le bouton que vous avez créé (vous pouvez aussi utiliser un bouton proposé par Designer) 2 - Cliquer sur le bouton "Lien" en haut de votre logiciel : 3 - Choisir l'onglet "Survol de souris" Cocher "Afficher les calques pop-up" et choisir le calque dans la liste déroulante (capture ci-dessous) Si vous ne cliquez pas sur "Effet", le calque sera réglé par défaut : c'est-à-dire que la transition sera instantanée et que le calque disparaîtra lors de l'arrêt du survol du bouton par la souris. Si vous cliquez sur Effet, vous aurez le choix sur la façon dont vous voulez faire apparaître le calque. Vous pourrez régler la vitesse de la transition. En décochant la mention "Fermer automatiquement le pop-up" il faudra que l'internaute intervienne manuellement sur une croix installée automatiquement par Designer, du fait de ce choix, pour faire disparaître le calque (nous en reparlerons lors de l'activation par lien). N'oubliez pas de cliquer sur "Appliquer" en bas du menu général pour que l'effet soit fonctionnel. Les calques supplémentaires avec Magix Designer 10 et autres versions Page 3

4 Lien Calque pop-up avec le clic gauche 1 - Sélectionner le bouton que vous avez créé (vous pouvez aussi utiliser un bouton proposé par Designer) 2 - Cliquer sur le bouton "Lien" en haut de votre logiciel : 3 - Choisir l'onglet "Lien" vous cochez "Calque pop-up" et vous choisissez le calque à afficher : Dans les paramètres, vous pouvez obtenir les mêmes effets que pour le Mouse Over. En décochant la mention "Fermer automatiquement le pop-up" votre calque restera visible en permanence, même si vous affichez d'autre calques. Vous ne le refermerez que lorsque vous cliquerez sur la petite croix que Designer a prévu à cet effet. (Voir la page de démonstration). La mention "Cadre out" a été ajoutée manuellement pour information de l'utilisation de la croix. En ce qui concerne l'apparence des boutons sur les calques, l'effet est volontaire, il suffit de placer sur le calque, un bouton fictif (sans lien) au même emplacement que celui du calque Off pour faire illusion (comme pour les barres de navigation qui elles utilisent le calque Mouse Over traditionnel). Les calques supplémentaires avec Magix Designer 10 et autres versions Page 4

5 Sur le calque Off bouton actif : Sur le calque 5 Bouton neutre : Nous voici au terme de ce tutoriel sur les calques supplémentaires. 8 calques supplémentaires ont été nécessaires pour la démonstration que vous pouvez voir sur le web Avec un peu d'imagination, vous pourrez créer une multitude d'effets variés. La page web que j'ai éditée sur le sujet, est une explication simplifiée de ce que l'on peut faire avec des calques. Je pense que ce tutoriel contribuera à des vocations créatives chez certains, du moins je l'espère sincèrement François Bellanger le 9 Avril 2015 Les calques supplémentaires avec Magix Designer 10 et autres versions Page 5