PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Création de la page et du bandeau d'entête
  • Création d'une page
  • Création du bandeau d'entête
  • Création des éléments du bandeau
  • Création du titre et d'un logo
  • Mise en place du logo
  • Mise en place du titre
  • Test de la page
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation
Cette page d'aide présente pas à pas comment créer une page contenant un bandeau d'entête (header) en mode Responsive Web Design.
Les principales étapes sont :
Remarque : La même méthode peut être appliquée pour créer un bandeau de pied de page (footer).
Création de la page et du bandeau d'entête

Création d'une page

Pour créer une nouvelle page en mode "Responsive Web Design" :
  1. Cliquez sur parmi les boutons d'accès rapide.
    • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
    • L'assistant de création d'une page se lance.
  2. Sélectionnez le type de page à créer : "Page vierge" de type "Responsive Web Design".
  3. Versions 22 et supérieures
    Sélectionnez le mode de création de la page : "Desktop First" ou "Mobile First". Dans cet exemple, nous considérons que la page est en mode "Desktop First".
    Nouveauté 22
    Sélectionnez le mode de création de la page : "Desktop First" ou "Mobile First". Dans cet exemple, nous considérons que la page est en mode "Desktop First".
    Sélectionnez le mode de création de la page : "Desktop First" ou "Mobile First". Dans cet exemple, nous considérons que la page est en mode "Desktop First".
  4. Validez l'assistant. La page est automatiquement créée et affichée sous l'éditeur.
  5. Affichez le menu contextuel de la page (clic droit) et sélectionnez "Description".
  6. Saisissez le nom de la page "PAGE_utilisationcellule".
  7. Validez la fenêtre de description.
  8. Enregistrez la fenêtre (Ctrl + S).

Création du bandeau d'entête

Sous l'éditeur, la barre de présentation des tranches est affichée :
Nous allons créer un entête de page (header) avec des cellules.
Les manipulations à effectuer sont les suivantes :
  1. Cliquez dans la tranche Bureau.
    Rappel : Il faut toujours commencer par travailler dans la tranche Bureau.
    Cliquez dans la tranche Bureau.
    Rappel : Il faut toujours commencer par travailler dans la tranche de référence :
    • Tranche Bureau dans le mode Desktop First.
    • Tranche Mobile dans le mode Mobile First.
  2. Sous le volet "Création", dans le groupe "Conteneurs", sélectionnez "Cellule".
  3. Cliquez dans la page : le champ apparaît en création.
  4. Positionnez le champ dans le coin en haut à gauche (après la gouttière de gauche) puis agrandissez-le en largeur sur toute la largeur de la page (sur la totalité de la grille, avant la gouttière de droite). Il n'est pas nécessaire dans notre exemple de modifier sa hauteur.
    Astuce : Ne pas hésiter à mettre une couleur de fond dans la cellule afin de mieux la visualiser.
    Dans cet exemple, la cellule a une couleur de fond orange et un cadre arrondi.
  5. Le résultat est le suivant :
    • tranche "Bureau" :
    • tranche "Tablette" :
    • tranche "Mobile" :
Pour simuler le changement de largeur sous l'éditeur :
  1. Affichez la tranche "Bureau" : cliquez sur l'entête "Bureau".
  2. Cliquez sur la double flèche dans la bulle "Largeur du navigateur". Maintenez le bouton gauche de la souris enfoncé et déplacez-vous vers la gauche.
  3. Déplacez la souris vers la gauche ou vers la droite : la largeur du navigateur est modifiée sous l'éditeur.
  4. La cellule suit la largeur du navigateur.
    En effet, la cellule a un ancrage qui lui permet de suivre la largeur de la grille, donc de s'adapter à la largeur de la page.
Nous allons maintenant observer les options d'ancrage disponibles sur la cellule :
  1. Sélectionnez le champ Cellule.
  2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage". La fenêtre d'ancrage apparaît :
    Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage". La fenêtre d'ancrage apparaît :
  3. Dans cette fenêtre, dans la zone "Gestion de la taille", pour le paramètre "Largeur", l'option sélectionné est "Adapter à la grille". Ainsi, la largeur de l'élément sélectionné (dans notre cas, la cellule) est adaptée à la grille, c'est-à-dire à la largeur de notre page. Dans ce cas, la cellule suit la largeur de la page (nous l'avons vu précédemment).Dans cette fenêtre, dans la zone "Gestion de la largeur", pour le paramètre "Largeur", l'option sélectionné est "Adapter à la grille". Ainsi, la largeur de l'élément sélectionné (dans notre cas, la cellule) est adaptée à la grille, c'est-à-dire à la largeur de notre page. Dans ce cas, la cellule suit la largeur de la page (nous l'avons vu précédemment).
  4. Pour tester, modifiez le paramètre "Largeur" et sélectionnez l'option "Utiliser la taille d'édition".
  5. Validez.
  6. Activez les erreurs d'IHM si nécessaire :
    • sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description" : dans l'onglet "Compilation" de la description du projet, cochez l'option "Activer la compilation d'IHM".
    • affichez le volet "Erreurs de compilation" et cliquez sur l'icône .
  7. Enregistrez la page (Ctrl + S).
  8. Nous allons tester la différence de comportement :
    • Affichez la tranche "Bureau" : rien ne change.
    • Affichez la tranche "Tablette" ou "Mobile" : la cellule ne se redimensionne plus en largeur.
    • La cellule est plus large que la résolution limite : 2 erreurs d'IHM apparaissent :
      La cellule est plus large que la résolution limite : 3 erreurs d'IHM apparaissent :
Pour corriger ces erreurs d'IHM, 2 solutions :
  • Solution 1 : Revenir au paramètre d'ancrage en largeur précédent : "Adapter à la grille".
  • Solution 2 : Dans chaque tranche où se situe l'erreur, changer spécifiquement la largeur de la cellule. La largeur de la cellule sera ainsi fixée dans chaque tranche.
    Par exemple, dans l'illustration ci-dessous, la largeur de la cellule a été modifiée dans la tranche "Mobile".
La solution 2 est simple mais est valable uniquement si la dimension des tranches "Bureau", "Tablette" et "Mobile" est fixe et connue : le site Web fonctionne uniquement sur le même type de matériel/navigateur.
La solution 1 est plus adaptative et fonctionnera quelque soit la résolution de votre navigateur. Vous n'avez pas à connaître votre cible.
Pour la suite de cette manipulation, nous allons revenir à la solution 1 : nous allons modifier le paramètre d'ancrage en largeur pour utiliser l'option "Adapter à la grille".
  1. Affichez la tranche "Bureau".
  2. Sélectionnez le champ Cellule et affichez le menu contextuel (clic droit). Sélectionnez l'option "Ancrage".
  3. Dans la zone "Gestion de la taille", pour le paramètre "Largeur", sélectionnez l'option "Adapter à la grille".Dans la zone "Gestion de la largeur", pour le paramètre "Largeur", sélectionnez l'option "Adapter à la grille".
  4. Validez
Création des éléments du bandeau

Création du titre et d'un logo

Nous allons ajouter un titre et un logo dans la cellule.
Pour créer le titre :
  1. Affichez la tranche "Bureau".
  2. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur puis cliquez dans la page en haut à gauche dans la cellule : le champ apparaît en création.
Pour créer le logo :
  1. Affichez la tranche "Bureau".
  2. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Image" et sélectionnez "Image".
  3. Cliquez dans la page en haut à droite dans la cellule : le champ apparaît en création.

Mise en place du logo

Nous allons tout d'abord manipuler l'image :
  1. Sélectionnez une image dans le catalogue de WEBDEV :
    • Affichez la fenêtre de description du champ Image (option "Description" du menu contextuel).
    • Dans l'onglet "Général", cliquez sur le bouton "Catalogue".
      Dans l'onglet "Général", cliquez sur le bouton Bouton déroulant à droite du champ "Image". Dans le menu qui s'affiche, sélectionnez l'option "Catalogue".
    • Dans le catalogue d'images, saisissez le mot "voiture" par exemple et sélectionnez une image de la liste.
    • Sélectionnez une largeur de 80 et validez.
    • Validez l'écran suivant pour enregistrer l'image dans le répertoire du site.
  2. La fenêtre de description de l'image est mise à jour. Validez.
Si l'image n'est pas affichée entièrement, redimensionnez l'image en largeur et/ou hauteur TOUT en maintenant la touche Maj enfoncée.
Remarque : L'utilisation de la touche Maj enfoncée permet d'effectuer ces manipulations sans tenir compte de la grille (du magnétisme) : le déplacement et le redimensionnement sont réalisés au pixel.
Après ces manipulations, vous obtenez :
Nous avons fini les manipulations sur la tranche "Bureau". Regardons maintenant ce qui se passe dans les 2 autres tranches ("Tablette" et "Mobile") :
  1. Sélectionnez la tranche "Tablette" puis la tranche "Mobile".
    • Tranche "Tablette" :
    • Tranche "Mobile" :
  2. Dans les deux modes de présentation, l'image est tronquée. Ce problème d'affichage provient d'un problème d'ancrage.
  3. Restez dans la tranche "Mobile" pour commencer. Nous corrigerons et vérifierons les autres tranches par la suite.
  4. Consultez les paramètres d'ancrage du champ Image (option "Ancrage" du menu contextuel du champ).
    L'image a une taille en largeur adaptée à la grille : la largeur de l'image est proportionnelle à la largeur de la grille.
  5. Pour que l'image conserve ses propriétés de largeur, l'ancrage en largeur doit correspondre à l'option "Utiliser la taille d'édition".
    Dans ce cas, l'image conserve la largeur de création dans l'éditeur de WEBDEV. La largeur n'est pas dépendante (et donc proportionnelle) à la largeur de la page.
  6. Sélectionnez l'option "Utiliser la taille d'édition" et validez.
  7. L'image a retrouvé ses proportions, elle déborde (il y a une erreur d'IHM).
    Il faut déplacer l'image vers la gauche pour l'afficher correctement et ne plus être en dehors de la page.
  8. Sélectionnez la tranche "Tablette". Le même problème d'affichage apparaît.
  9. Réalisez les mêmes manipulations pour corriger l'affichage.
Nous avons fini les manipulations sur la tranche "Bureau". Regardons maintenant ce qui se passe dans les 2 autres tranches ("Tablette" et "Mobile") :
  1. Sélectionnez la tranche "Tablette" puis la tranche "Mobile".
    • Tranche "Tablette" :
    • Tranche "Mobile" :
  2. Dans les deux modes de présentation, l'image déborde de la zone. Ce problème d'affichage provient d'un problème d'ancrage.
  3. Restez dans la tranche "Mobile" pour commencer. Nous corrigerons et vérifierons les autres tranches par la suite.
  4. Consultez les paramètres d'ancrage du champ Image (option "Ancrage" du menu contextuel du champ).
    L'image conserve la largeur de création dans l'éditeur de WEBDEV. La largeur n'est pas dépendante (et donc proportionnelle) à la largeur de la page.
  5. Il faut déplacer l'image vers la gauche pour l'afficher correctement et ne plus être en dehors de la page.
  6. Sélectionnez la tranche "Tablette". Le même problème d'affichage apparaît.
  7. Réalisez les mêmes manipulations pour corriger l'affichage.

Mise en place du titre

Maintenant, intéressons-nous au titre :
  1. Affichez la tranche "Bureau".
  2. Saisissez le titre et choisissez un style pour le texte :
    • Affichez le menu contextuel du champ Libellé (clic droit) et sélectionnez l'option "Description".
    • Dans la fenêtre de description :
      • Donnez un nom au champ : "ZTR_TITRE".
      • Cliquez sur le bouton "Editez le texte riche" et saisissez par exemple le texte "Page avec cellules".
      • Choisissez la police "Times New Roman" en taille 20 pixels.
  3. Utilisez la touche Echap pour sortir du mode édition du champ.
  4. Affichez les tranches "Tablette" puis "Mobile" :
    • Tranche "Tablette" :
    • Tranche "Mobile" :
  5. Le libellé est rétréci en largeur, le texte n'est plus visible dans la tranche "Mobile". Dans la tranche "Tablette", le libellé est juste visible.
Pour corriger ce problème d'affichage du champ Libellé, il est nécessaire de modifier les paramètres d'ancrage du champ Libellé.
  1. Sélectionnez si nécessaire la tranche "Mobile".
  2. Sélectionnez le champ Libellé.
  3. Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Ancrage".
  4. Modifiez l'option d'ancrage en largeur. Sélectionnez "Utiliser la taille d'édition" et validez.
  5. Le champ s'étire pour que le contenu soit visible entièrement.
Test de la page
Maintenant que le bandeau d'entête est terminé, vérifions son comportement en exécution.
  1. Lancez le test de la page ( parmi les boutons d'accès rapide).
  2. Vous obtenez ces 3 représentations (diminuez la largeur de votre navigateur pour simuler une exécution sur une tablette ou un mobile).
    • Navigateur (tranche "Bureau") :
    • Navigateur (tranche "Tablette") :
    • Navigateur (tranche "Mobile") :
L'image se déplace et n'est pas alignée correctement avec le bord droit du navigateur. De plus, elle passe à la ligne en dessous du titre.
Il s'agit une nouvelle fois d'un problème d'ancrage.
Le problème vient de l'ancrage en X. En réalité, l'image est ancrée en X à gauche, or il faudrait qu'elle suive le bord droit du navigateur, et ceci quelque soit la largeur du navigateur.
Nous allons donc changer le paramètre d'ancrage et ancrer l'image à droite en X :
  1. Sélectionnez la tranche "Bureau".
  2. Sélectionnez le champ Image.
  3. Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Ancrage".
  4. Modifiez l'option d'ancrage en X. Sélectionnez "Droite" et validez.
  5. Lancez le test de la page ( parmi les boutons d'accès rapide).
  6. L'image est bien alignée même dans une petite résolution.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire