WEBDEV 2025 : 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 : • 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 Grille magnétique La grille magnétique permet de placer des repères (verticaux et horizontaux) dans la page. Les champs créés viennent se placer contre ces repères, comme si les champs et les repères étaient magnétisés. La grille magnétique permet ainsi d’aligner les champs selon les repères. 4.2 Correcteur d’interface en temps réel Lors du déplacement d’un champ dans une page, le correcteur d’interface en temps réel affiche auto- matiquement des guides. Ces guides sont magné- tisés et permettent d’aligner le champ déplacé avec les champs présents dans la page.