DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Editeurs / Editeur de fenêtres et de pages / Editeur de pages / Responsive Web Design
  • 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/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Avertissement
En version 28, le mode d'édition des pages initialement appelé "Responsive Web Design : mise en page par tranche" devient "Tranches (Responsive historique pour compatibilité)".
Le mode "Responsive (zoning et agencements)" devient le mode recommandé pour les nouvelles créations. Pour plus de détails, consultez Changement du mode d'édition des sites mobile friendly.
Cette page de documentation est adaptée aux nouvelles options de la version 28.
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 historique.
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 : "Vierge" et validez. La page est automatiquement créée et affichée sous l'éditeur.
  3. Affichez la fenêtre de description de la page : Sous le volet "Page", dans le groupe "Description", cliquez sur "Description".
  4. Dans l'onglet "Général", sélectionnez le mode d'édition "Tranches (Responsive historique pour compatibilité)".
  5. Validez la fenêtre de description.
  6. Les différentes tranches apparaissent dans la page affichée sous l'éditeur. Par défaut, le mode utilisé est le mode "Desktop First - Edition en taille max.".
  7. Affichez le menu contextuel de la page (clic droit) et sélectionnez "Description".
  8. Saisissez le nom de la page "PAGE_utilisationcellule".
  9. Validez la fenêtre de description.
  10. 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 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 puis agrandissez-le en largeur sur toute la largeur de la page. 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 :
  3. Dans cette fenêtre, dans la zone "Ancrage en largeur", l'option sélectionnée est "Agrandir ou réduire comme le navigateur (ou son conteneur)". Ainsi, la largeur de l'élément sélectionné (dans notre cas, la cellule) est adaptée à 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 "Largeur fixe".
  5. Validez.
  6. Activez les erreurs d'UI 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'UI".
    • 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 : des erreurs d'UI apparaissent :
Pour corriger ces erreurs d'UI, 2 solutions :
  • Solution 1 : Revenir au paramètre d'ancrage en largeur précédent : "Agrandir ou réduire comme le navigateur (ou son conteneur)".
  • 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 "Agrandir ou réduire comme le navigateur (ou son conteneur)".
  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 "Ancrage en largeur", sélectionnez l'option "Agrandir ou réduire comme le navigateur (ou son conteneur)".
  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 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 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 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 "Largeur fixe" 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 réalité, l'image est ancrée à 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 :
  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. 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

Dernière modification : 20/06/2023

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