DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 2024 !
Aide / Tuto WEBDEV / Tuto - Les agencements WEBDEV
  • Leçon 2 - Agencements : Gestion des menus
  • Présentation
  • Exemple pratique
  • Création de l'agencement
  • Configuration du champ Barre de navigation
  • Test de la page
  • En résumé

Tuto - Les agencements WEBDEV

Leçon 2 - Agencements : Gestion des menus
Ce que vous allez apprendre :
  • Champ Barre de navigation avec son menu "Hamburger".
  • Dissociation du menu et des options de menu.
Durée de la leçon 30 mn
Présentation
WEBDEV met à votre disposition un champ spécifique pour les agencements : le champ Barre de navigation.
Le champ Barre de navigation permet de créer notamment une zone de menu s'adaptant facilement à la taille du navigateur. Cette zone peut contenir tous les types de champs.
Dans cette leçon, nous allons intégrer un agencement dans une page contenant un champ Barre de navigation. Nous verrons ainsi la configuration nécessaire pour que cette barre de navigation s'adapte à la taille du navigateur.
Ouverture du projet exemple
  1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
  2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Agencements WEBDEV", double-cliquez sur "Agencements - Exercice".
  3. Ouvrez la page PAGE_BarreNavigation.
Exemple pratique
Le champ Barre de navigation est le champ situé en haut de la page PAGE_BarreNavigation qui contient le menu.
Champ Barre de navigation
Ce champ Barre de navigation est divisé en 3 zones :
  • A gauche, un bouton hamburger.
  • Au centre, le menu du site.
  • A droite, un champ de recherche avec le champ Image permettant de lancer la recherche.

Création de l'agencement

Nous allons créer dans la page PAGE_BarreNavigation un agencement mobile :
  1. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement".
  2. Dans la fenêtre qui s'affiche, un agencement adapté aux téléphones et aux tablettes est automatiquement proposé. Validez la fenêtre.
  3. Dans notre exemple, deux agencements sont créés. Ces agencements sont affichés sous forme de vignettes, à droite de la page "PAGE_BarreNavigation". L'agencement mobile est automatiquement sélectionné et affiché sous l'éditeur.
    Champ Barre de navigation
Le champ Barre de navigation est un champ avancé. La dissociation automatique n'est pas disponible pour ce champ. En effet, il est nécessaire de choisir des options spécifiques lors de la dissociation.

Configuration du champ Barre de navigation

Nous allons tout d'abord configurer le champ Barre de navigation pour un affichage Mobile.
  1. Sélectionnez si nécessaire le champ Barre de navigation dans l'agencement mobile.
  2. Affichez la fenêtre de description du champ Barre de navigation (Alt + Entrée).
  3. Dans l'onglet "UI", pour le paramètre "Mode d'affichage", cliquez sur Dissocier pour dissocier le mode d'affichage par agencement.
    Champ Barre de navigation
  4. Dans la fenêtre qui s'affiche, cliquez sur l'option "Dissocier la valeur par agencement", puis dans la zone "Mobile", sélectionnez "Compact".
    Dissociation par agencement
    Validez la fenêtre de dissociation.
  5. Validez la fenêtre de description du champ.
  6. Le champ Barre de navigation apparaît en mode compact dans l'agencement mobile.
Voyons maintenant l'aspect du champ Barre de navigation dans les différents agencements sous l'éditeur.
  • Affichez l'agencement "Bureau" : la barre de navigation apparaît entièrement.
  • Affichez l'agencement "Mobile" : la barre de navigation est en mode "Compact".
Restons dans l'agencement mobile pour comprendre ce mode compact.
Dans l'agencement Mobile, le champ Barre de navigation rend invisible la zone centrale. Le menu "hamburger" déroule une popup qui contient les champs de la zone centrale. Bien entendu cette popup est personnalisable, il suffit de cliquer dans le volet central. Ensuite, vous pouvez modifier cette popup comme bon vous semble.
Examinons le contenu de la zone centrale :
  1. Cliquez sur le champ Barre de navigation pour le sélectionner : la zone centrale est hachurée.
    Champ Barre de navigation
  2. Cliquez dans la zone centrale hachurée. La popup s'affiche en édition.
    Zone centrale du champ Barre de navigation
    Le contour jaune indique que le champ est en édition.
  3. Nous retrouvons le menu du site. Le menu est horizontal. Pour l'afficher verticalement, il est nécessaire de dissocier l'orientation du menu :
    • Affichez la fenêtre de description du menu (Alt + Entrée).
    • Dans l'onglet "Général", cliquez sur Dissocier pour dissocier l'orientation du menu.
      Zone centrale du champ Barre de navigation
    • Dans la fenêtre qui s'affiche :
      • Cochez l'option "Dissocier la valeur par agencement".
      • Pour l'agencement mobile, sélectionnez "Vertical pour mobile".
      • Validez.
  4. Validez la fenêtre de description.
  5. Pour sortir du mode édition de la popup, appuyez sur la touche Echap.
Une dernière modification consiste à modifier la taille des différentes zones de la barre de navigation pour afficher tous les éléments.
  1. Sélectionnez la barre de navigation.
    Les carrés rouges permettent de redimensionner les différentes zones du champ Barre de navigation.
  2. Modifiez la taille de la zone du menu et agrandissez la zone de recherche. Vous obtenez le résultat suivant :
Enregistrez la page (Ctrl + S).

Test de la page

Lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
  1. La page s'affiche sous le navigateur.
  2. Redimensionnez le navigateur : l'agencement mobile est affiché.
  3. Fermez le navigateur.
Maintenant, nous pouvons tester immédiatement le site sur un téléphone ou une tablette :
  1. Déroulez l'option depuis les boutons d'accès rapide et sélectionnez "Tester depuis un téléphone (accès via un QR Code)".
  2. Une fenêtre proposant un QR code à flasher avec votre mobile.
  3. Une fois le code flashé, le site s'affiche sur le mobile.
  4. L'agencement "Mobile" est automatiquement affiché sur le mobile.
En résumé
Ce tuto nous a permis d'aborder certains aspects de la gestion des agencements. Les agencements sont un moyen relativement simple de gérer la mobilité dans vos sites WEBDEV.
Projet corrigé :
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient la correction des différentes manipulations effectuées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Agencements WEBDEV", double-cliquez sur "Agencements - Corrigé".
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 13/12/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale