PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création d'une page en mode zoning
  • Mettre en place de l'ancrage
Leçon 7.4. Ancrages et zoning
Ce que vous allez apprendre dans cette leçon
  • Qu'est ce qu'un ancrage ?
  • Créer une page en mode Zoning.
  • Mettre en place les ancrages.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
WEBDEV permet de gérer deux types d'ancrages :
  • L'ancrage au contenu : Un ancrage au contenu permet de définir le comportement du champ ou d'une zone lors de la modification de son contenu. Le champ doit-il rester à la même taille ? Doit-il s'adapter à son contenu ?
  • L'ancrage navigateur : Un ancrage navigateur permet 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 ?
    L'ancrage navigateur permet de définir le comportement des pages lors de l'affichage sur des résolutions spécifiques (tablettes, téléphones, ...).
La mise en place des ancrages se fait très facilement, grâce à une option du menu contextuel des champs.
Nous allons tout de suite manipuler les ancrages grâce à un exemple. Dans cette leçon, nous manipulerons uniquement les ancrages navigateur.
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.
  • Pour créer un projet sous WEBDEV :
    1. Lancez WEBDEV si ce n'est pas déjà fait. Si nécessaire fermez le projet en cours.
    2. Dans la fenêtre de bienvenue, cliquez sur le bouton "Créer un projet", puis sur l'option "Site". L'assistant de création du projet se lance.
    3. Saisissez le nom du projet "Ancrages" et validez les différents écrans de l'assistant avec les options par défaut.

      Note

      Un exemple corrigé est disponible à tout moment pour vérifier la validité des opérations effectuées.
      Pour ouvrir ce projet corrigé, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Ancrages (Corrigé)".
Création d'une page en mode zoning
  • Pour créer une page permettant de mettre en pratique la gestion des ancrages :
    1. 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 - Mise en page simple" et validez l'assistant.
    2. La fenêtre de sauvegarde de la page est affichée.
    3. Saisissez le titre "Ancrage". Le nom "PAGE_Ancrage" est automatiquement proposé.
    4. Validez.
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 :
    1. Sous le volet "Page", dans la zone "Edition", déroulez "Zoning" et sélectionnez "Découper la mise en page".
    2. Le curseur de la souris se transforme en crayon.
    3. 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 :
    1. Affichez la fenêtre de description de la zone : dans le menu contextuel, sélectionnez l'option "Description de la zone".
    2. Dans l'onglet "Style", sélectionnez si nécessaire l'élément "Cadre / Fond" et sélectionnez une couleur de fond (par exemple Jaune bulle).
    3. 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 :
    1. Sous l'onglet "Page", dans la zone "Edition", déroulez "Zoning" et sélectionnez "Découper la mise en page".
    2. Le curseur de la souris se transforme en crayon.
    3. 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 :
    1. Sortez du mode d'édition "Zoning" en cliquant sur l'onglet "Page" en haut de la page (sous le ruban).
    2. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Libellé simple".
    3. Cliquez dans la zone jaune. Le champ Libellé est automatiquement créé.
    4. Modifiez le libellé affiché (touche Espace du clavier) : le libellé de ce champ est "Entête".
    5. Répétez les opérations 2 à 4 pour créer :
      • un libellé dans la zone verte affichant "Menu".
      • un libellé dans la zone orange affichant "Contenu".
  • Enregistrez la page (Ctrl + S) et lancez le test de la page ( parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Redimensionnez le navigateur : la page reste centrée, mais les zones ne se redimensionnent pas.
      Nous allons changer ce fonctionnement pour que les zones s'adaptent à la taille du navigateur. Nous allons utiliser les ancrages.
  • Fermez le navigateur.
Mettre en place de l'ancrage
Tout d'abord, nous allons mettre en place 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 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.
  • Pour mettre en place l'ancrage des zones :
    1. Affichez la page en mode zoning : cliquez sur l'onglet "Zoning" en haut de la page.
    2. Sélectionnez la zone jaune.
    3. Affichez le menu contextuel et sélectionnez l'option "Ancrage". La fenêtre de gestion des ancrages s'affiche.
    4. La zone doit s'agrandir en largeur : sélectionnez l'option "Largeur" () et validez.
    5. Sélectionnez la zone verte, affichez le menu contextuel et sélectionnez l'option "Ancrage".
    6. La zone doit s'agrandir en hauteur : sélectionnez l'option "Hauteur" () et validez.
    7. 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 l'option "Largeur et hauteur" () et validez.
  • Pour mettre en place l'ancrage des champs :
    1. Affichez la page en mode Page : cliquez sur l'onglet "Page" en haut de la page.
    2. Sélectionnez le libellé "Entête".
    3. Affichez le menu contextuel et sélectionnez l'option "Ancrage".
    4. Le champ doit être centré en largeur : sélectionnez l'option "Centré horizontal" () et validez.
    5. Répétez les mêmes opérations pour le champ "Menu" et le champ "Contenu" :
      • Le libellé "Menu" doit être centré en hauteur ().
      • Le libellé "Contenu" doit être centré en largeur et en hauteur ().
  • Enregistrez la page (Ctrl + S) et lancez le test de la page ( parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Redimensionnez le navigateur : les zones s'adaptent à la place disponible dans le navigateur.
  • Fermez le navigateur.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire