|
|
|
|
|
|
|
|
|
|
- Les secrets de la mise en page
- Présentation
- Un exemple pratique
- Création du projet exemple
- Création d'une page
- Création de zones
- Test de la page
- Mettre en place de l'ancrage
- Ancrage de la page
- Ancrage des zones
- Ancrage des champs
- Tester la page
- Mettre en place les agencements
- Création d'un agencement mobile
- Modification de l'agencement mobile
- Test de la page
- En résumé
Tuto - Ancrages, zoning et agencements
Les secrets de la mise en page Ce que vous allez apprendre : - Qu'est-ce qu'un ancrage ?
- Mettre en place les ancrages.
- Mettre en place les agencements.
 30 mn Dans ce tuto nous allons rapidement voir les différentes possibilités qu'offre WEBDEV pour réaliser facilement une mise en page s'adaptant à la taille du navigateur. Il est tout d'abord possible d'utiliser simplement des ancrages. Les ancrages permettent de définir le comportement d'un champ ou d'une zone lors du redimensionnement du navigateur. Le champ doit-il s'agrandir ? Doit-il se déplacer ?
Ce type d'ancrage (également appelé "Ancrage navigateur") permet de définir le comportement des pages lors de l'affichage sur des résolutions spécifiques (tablettes, téléphones, etc.). Un pas supplémentaire pour proposer un site "Mobile-friendly" consiste à utiliser des agencements. Mixés aux ancrages, les agencements permettent d'obtenir des sites adaptatifs. Dans ce tuto, nous allons créer un projet dans lequel nous allons créer une page permettant de mettre en place les ancrages navigateur et de visualiser leur intérêt. Par la suite, nous modifierons ce projet afin de le rendre "Mobile-friendly" grâce aux agencements. Création du projet exemple Pour créer un projet sous WEBDEV : - Lancez WEBDEV si ce n'est pas déjà fait.
- Affichez si nécessaire la page d'accueil de WEBDEV (Ctrl + <).
- Dans la page d'accueil, cliquez sur "Créer un projet", puis sur l'option "Site". L'assistant de création du projet se lance.
- Conservez les options par défaut des différentes étapes de l'assistant de création de projet, jusqu'à l'étape "Informations générales".
- Saisissez le nom du projet "Ancrages" puis cliquez sur "Terminer".
Création d'une page Pour créer une page permettant de mettre en pratique la gestion des ancrages : - Créez une nouvelle page vierge.
- Dans la fenêtre de création d'un nouvel élément, cliquez sur "Page" puis sur "Page".
Remarque : Pour afficher la fenêtre de création d'un nouvel élément, cliquez sur  parmi les boutons d'accès rapide. - L'assistant de création d'une page se lance.
- Cliquez sur "Vierge" et terminez l'assistant.
- La fenêtre de sauvegarde de la page est affichée.
- Saisissez le titre "Ancrages". Le nom "PAGE_Ancrages" est automatiquement proposé.
- Validez.
Création de zones Nous allons maintenant diviser notre page en 3 zones : - Un entête (en haut sur toute la largeur).
- Un menu à gauche (sur toute la hauteur).
- Une zone de contenu au centre.
Chaque zone aura un comportement spécifique lors du redimensionnement de la page. Pour créer les zones, nous allons utiliser la fonctionnalité de zoning. Pour créer une première zone de titre en haut de la page : - Sous le volet "Page", dans la zone "Edition", déroulez "Zoning" et sélectionnez "Découper horizontalement".
- Le curseur de la souris se transforme en crayon.
- Cliquez en haut de la page et dessinez un trait horizontal. Lorsque le bouton de la souris est relâché, la zone est créée.
Pour visualiser cette zone, nous allons lui associer une couleur de fond : - Affichez la fenêtre de description de la zone : dans le menu contextuel, sélectionnez l'option "Description de la zone".
- Dans l'onglet "Style", sélectionnez si nécessaire l'élément "Cadre / Fond" et sélectionnez une couleur de fond (par exemple Jaune pastel).
- Validez la fenêtre de description de la zone.
Nous allons faire les mêmes opérations pour séparer en deux la zone basse de notre page : - Sous le volet "Page", dans la zone "Edition", déroulez "Zoning" et sélectionnez "Découper verticalement".
- Le curseur de la souris se transforme en crayon.
- Cliquez au milieu de la zone basse et dessinez un trait vertical.
Pour visualiser ces zones, associez la couleur verte à la zone basse de gauche et la couleur orange à la zone basse de droite. Nous allons maintenant créer des champs Libellé dans chaque zone : - Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Libellé simple".
- Cliquez dans la zone jaune. Le champ Libellé est automatiquement créé.
- Modifiez le libellé affiché (touche Espace du clavier) : le libellé de ce champ est "Entête".
- Répétez les opérations 2 et 3 pour créer :
- un libellé dans la zone verte affichant "Menu".
- un libellé dans la zone orange affichant "Contenu".
- 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 : la page reste centrée, mais les zones ne se redimensionnent pas.
Nous allons changer ce fonctionnement pour que la page et les zones s'adaptent à la taille du navigateur. Pour cela, nous allons utiliser les ancrages.
Fermez le navigateur. Mettre en place de l'ancrage Tout d'abord, nous allons mettre en place l'ancrage de la page, l'ancrage des zones, puis l'ancrage des champs dans les zones. Nous voulons obtenir le fonctionnement suivant lors de l'agrandissement du navigateur : - La page doit s'agrandir en hauteur et largeur.
- La zone d'entête (jaune) doit s'agrandir en largeur.
- La zone de menu (verte) doit s'agrandir en hauteur.
- La zone de contenu (orange) doit s'agrandir en largeur et en hauteur.
- Pour les champs, nous souhaitons qu'ils restent centrés par rapport à leur zone.
Nous allons maintenant faire toutes les manipulations nécessaires. Ancrage de la page Pour mettre en place l'ancrage de la page : - Cliquez dans l'éditeur en dehors de la page.
- Affichez le menu contextuel et sélectionnez l'option "Ancrage". La fenêtre de gestion des ancrages de la page s'affiche.
- La page doit s'agrandir en largeur et en hauteur. Sélectionnez :
- Position : Conservez la position proposée (
 ). - Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur).
- Ancrage en hauteur : Agrandir ou réduire comme le navigateur (ou son conteneur).
- Validez.
Ancrage des zones Pour mettre en place l'ancrage des zones : - Sélectionnez la zone jaune.
- Affichez le menu contextuel et sélectionnez l'option "Ancrage". La fenêtre de gestion des ancrages s'affiche.
- La zone doit s'agrandir en largeur. Sélectionnez :
- Position : Le champ conserve sa position.
- Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur).
- Ancrage en hauteur : Hauteur fixe.
- Validez.
- Sélectionnez la zone verte, affichez le menu contextuel et sélectionnez l'option "Ancrage".
- La zone doit s'agrandir en hauteur. Sélectionnez :
- Position : Le champ conserve sa position ().
- Ancrage en largeur : Largeur fixe.
- Ancrage en hauteur : Agrandir ou réduire comme le navigateur (ou son conteneur).
- Validez.
- Sélectionnez la zone orange et affichez la fenêtre de gestion des ancrages. La zone doit s'agrandir en largeur et hauteur. Sélectionnez :
- Position : Le champ conserve sa position ().
- Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur).
- Ancrage en hauteur : Agrandir ou réduire comme le navigateur (ou son conteneur).
- Validez.
Ancrage des champs Pour mettre en place l'ancrage des champs : - Sélectionnez le libellé "Entête".
- Affichez le menu contextuel et sélectionnez l'option "Ancrage".
- Le champ doit être centré en largeur :
- Position : Centré horizontal.
- Ancrage en largeur : Largeur fixe.
- Ancrage en hauteur : Hauteur fixe.
- Validez.
- Répétez les mêmes opérations pour le champ "Menu" et le champ "Contenu" :
- Le libellé "Menu" doit être centré en hauteur (option "Centré vertical").
- Le libellé "Contenu" doit être centré (option "Centré").
Enregistrez la page (Ctrl + S). Tester 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 : les zones s'adaptent à la place disponible dans le navigateur.
Fermez le navigateur. Mettre en place les agencements Les zones et les ancrages permettent de gérer facilement les "petits" redimensionnements. Comme nous l'avons vu précédemment, un site doit être "Mobile-friendly" dès sa conception. L'affichage en mode "Mobile" demande bien souvent plus qu'un simple ancrage. En effet, dans certains cas, des champs ou des zones entières doivent disparaître afin de garder une interface lisible sur le mobile. Ces opérations sont effectuées à l'aide des agencements.  L'agencement permet de définir plusieurs vues d'une page dans un même projet sans dupliquer cette page. Il est ainsi par exemple possible de définir : - une vue spécifique pour l'affichage sur un mobile,
- une vue spécifique pour l'impression,
- une vue spécifique pour une utilisation de la page dans une application WINDEV.
- une vue spécifique pour une utilisation de la page dans une application WINDEV Mobile.
- etc.
Nous allons modifier notre page afin de mettre en place un agencement spécifique pour mobile. Cet agencement permettra de supprimer l'affichage de la zone verte. Nous testerons ensuite directement le site sur un mobile. Cette leçon propose une approche rapide des agencements dans un site WEBDEV. La mise en place et la gestion des agencements dans un site WEBDEV est détaillée dans les différentes leçons du tuto Les agencements WEBDEV. Création d'un agencement mobile Pour créer un nouvel 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_Ancrages".
Modification de l'agencement mobile Affichez l'agencement "Mobile" : - Double-cliquez sur la vignette de l'agencement Mobile : la page correspondant à cet agencement s'affiche au centre de l'éditeur.
- L'option "Dissociation automatique"
 (en haut à droite de la fenêtre principale, dans la barre de titre) permet de savoir si le mode "Dissociation automatique" est activé. Si ce mode est activé, toute modification effectuée sur une des pages spécifiques de l'agencement ne sera pas reportée sur les autres. Conservez le mode "Dissociation automatique" activé.
Nous allons modifier la visibilité des champs dans l'agencement Mobile. En effet, la zone de menu à gauche (et le libellé correspondant) peut être supprimée en mobile, au profit par exemple d'un menu déroulant (nous verrons dans une prochaine leçon comment le mettre en place). Pour plus de facilité, nous allons faire ces modifications dans l'agencement "Bureau". - Double-cliquez sur la vignette "Bureau".
- Sélectionnez la zone verte.
- Dans le menu contextuel du champ, sélectionnez l'option "Agencements .. Visibilité par agencement" et désélectionnez l'option "Mobile (Smartphone)".
- La vignette de l'agencement mobile est automatiquement mise à jour. Si vous affichez l'agencement mobile, la zone verte et son libellé ne sont plus visibles.
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 s'affiche, 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.
Dans cette leçon, nous avons créé un exemple didactique pour appréhender le fonctionnement des ancrages (aussi bien sur les champs que sur les zones). Nous avons également mixé ces ancrages avec les agencements. Pour une utilisation avancée des agencements, nous vous conseillons de suivre le tuto Agencements 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 - Ancrages, zoning et agencements", double-cliquez sur "Ancrages - Corrigé". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|