WEBDEV 2024 : Les concepts

58 Partie 2 : Développement d’un site 3 Manipuler les champs sous l’éditeur 3.1 Les poignées des champs Lorsqu’un champ vient d’être créé ou lorsqu’il est sélectionné, il s’affiche avec des poignées. Les poi- gnées permettent de : • visualiser la taille d’un champ, • modifier la taille d’un champ. Les couleurs des poignées permettent de connaître les actions réalisables : • Les poignées noires permettent de visualiser et de redimensionner un champ. • Les poignées blanches permettent uniquement de visualiser un champ. Par exemple, lors de la sélection de plusieurs champs, les poignées blanches indiquent qu’il est impossible de modi- fier la taille des champs sélectionnés. Ce type de poignées est aussi affiché lorsqu’une page est en lecture seulement pour le déve- loppeur : les champs ne peuvent pas être modi- fiés. • Les poignées grises indiquent le premier champ sélectionné lors d’une sélection multiple. Ce champ sera le champ de référence. 3.2 Manipulations disponibles L’éditeur de pages permet de : • Sélectionner un ou plusieurs champs (par exemple à l’aide du lasso). • Regrouper des champs sélectionnés. • Déplacer un champ. • Modifier le libellé d’un champ. • Afficher une bulle d’aide avancée lors du survol d’un champ. Cette bulle d’aide contient : le nom du champ, sa position, sa taille, son état initial (si le champ est invisible). 4 Alignement des champs L’alignement des champs permet d’obtenir des UI "professionnelles" et harmonieuses. Pour vous aider à concevoir des UI standard, WEBDEV vous pro- posent les outils suivants : • les règles. • la grille. • le correcteur d’interface en temps réel (proposé automatiquement lors d’un positionnement d’un champ). • le correcteur d’interface avancé. • les options d’alignement. • le zoom paramétrable. 4.1 Les règles Sous l’éditeur de pages, il est possible de faire appa- raître des règles d’alignement. Dans ces règles, des guides magnétiques sont affichés : tout champ approché d’un guide est auto- matiquement "attiré" par celui-ci. Ce magnétisme permet d’utiliser les guides pour faciliter le position- nement, l’alignement ou le redimensionnement des champs de la page. Afficher les règles Pour afficher les règles, sous le volet "Affichage", dans le groupe "Aide à l’édition", cochez "Règles". Deux types de guides peuvent alors être utilisés : • les guides , permettant d’aligner et de disposer les champs à l’intérieur des pages. • les guides de bordure , permettant de déterminer une bordure de taille identique de chaque côté de la page. Remarque  : L’option "Afficher les guides" du menu contextuel des règles permet de visualiser la page avec ou sans ses guides. Visibles ou non, les guides sont toujours actifs : un champ déplacé vers un re- père est automatiquement accolé à celui-ci. Manipuler les repères Les repères sont facilement manipulables à l’aide de la souris dans l’éditeur. Lorsque la souris survole un repère, le curseur se transforme en une double flèche.