|
|
|
|
|
|
|
|
|
|
- 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.
 30 mn 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 - Affichez la page d'accueil de WEBDEV (Ctrl + <).
- Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Agencements WEBDEV", double-cliquez sur "Agencements - Exercice".
- Ouvrez la page PAGE_BarreNavigation.
Le champ Barre de navigation est le champ situé en haut de la page PAGE_BarreNavigation qui contient le menu.
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 : - Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement".
- Dans la fenêtre qui s'affiche, un agencement adapté aux téléphones et aux tablettes est automatiquement proposé. Validez la fenêtre.
- 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.
 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. - Sélectionnez si nécessaire le champ Barre de navigation dans l'agencement mobile.
- Affichez la fenêtre de description du champ Barre de navigation (Alt + Entrée).
- Dans l'onglet "UI", pour le paramètre "Mode d'affichage", cliquez sur
 pour dissocier le mode d'affichage par agencement.
- Dans la fenêtre qui s'affiche, cliquez sur l'option "Dissocier la valeur par agencement", puis dans la zone "Mobile", sélectionnez "Compact". Validez la fenêtre de dissociation.
- Validez la fenêtre de description du champ.
- 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 : - Cliquez sur le champ Barre de navigation pour le sélectionner : la zone centrale est hachurée.
- Cliquez dans la zone centrale hachurée. La popup s'affiche en édition.
Le contour jaune indique que le champ est en édition.
- 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 pour dissocier l'orientation du menu.
- 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.
- Validez la fenêtre de description.
- 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. - Sélectionnez la barre de navigation.
Les carrés rouges permettent de redimensionner les différentes zones du champ Barre de navigation. - 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 (  parmi les boutons d'accès rapide). - La page s'affiche sous le navigateur.
- Redimensionnez le navigateur : l'agencement mobile est affiché.
- Fermez le navigateur.
Maintenant, nous pouvons tester immédiatement le site sur un téléphone ou une tablette : - 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)".
- Une fenêtre proposant un QR code à flasher avec votre mobile.
- Une fois le code flashé, le site s'affiche sur le mobile.
- L'agencement "Mobile" est automatiquement affiché sur le mobile.
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é". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|