{"id":124696,"date":"2019-01-02T18:00:51","date_gmt":"2019-01-02T17:00:51","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-basic-responsive-prototype\/"},"modified":"2025-02-03T16:45:10","modified_gmt":"2025-02-03T15:45:10","slug":"create-a-basic-responsive-prototype","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/creer-un-prototype-de-base-responsable","title":{"rendered":"Cr\u00e9ez un prototype r\u00e9actif de base"},"content":{"rendered":"

Dans cet exercice, nous allons cr\u00e9er un prototype r\u00e9actif de base \u00e0 l’aide d’\u00e9l\u00e9ments \u00e9pingl\u00e9s et d’une hauteur et d’une largeur bas\u00e9es sur des pourcentages.
\n

    \n
  1. Cr\u00e9ez un nouveau prototype Web. Faites glisser deux widgets Rectangle sur le Canvas, en pla\u00e7ant l’un en haut de l’\u00e9cran et l’autre en bas. Ils serviront d’en-t\u00eate et de pied de page au prototype. <\/li>\n
  2. S\u00e9lectionnez le rectangle d’en-t\u00eate. Dans la palette des propri\u00e9t\u00e9s, consultez la section Arri\u00e8re-plan. T\u00e9l\u00e9chargez une image pour l’arri\u00e8re-plan du rectangle et, dans le menu d\u00e9roulant, choisissez l’option \u00ab\u00a0Couverture\u00a0\u00bb. Vous pouvez \u00e9galement choisir une couleur pour l’arri\u00e8re-plan du rectangle au lieu d’une image. \"Ajouter<\/li>\n
  3. Le rectangle \u00e9tant toujours s\u00e9lectionn\u00e9 et se trouvant toujours dans la palette Propri\u00e9t\u00e9s, consultez la section Taille. Pour la largeur, remplacez le menu d\u00e9roulant \u00ab\u00a0px\u00a0\u00bb par \u00ab\u00a0%\u00a0\u00bb et fixez la largeur \u00e0 100. Le rectangle occupera d\u00e9sormais 100 % de la largeur de l’\u00e9cran. \"100<\/li>\n
  4. Faites glisser un widget Texte en haut du rectangle d’en-t\u00eate. Il servira de titre au prototype du site web. Dans la palette Propri\u00e9t\u00e9s, consultez la section Position, cochez la case \u00ab\u00a0Afficher les options de position de l’\u00e9pingle\u00a0\u00bb. Cochez la case \u00ab\u00a0Afficher les options de position de l’\u00e9pingle\u00a0\u00bb. Dans les menus d\u00e9roulants qui apparaissent, changez le param\u00e8tre \u00ab\u00a0X\u00a0\u00bb en \u00ab\u00a0\u00c9pingler au centre\u00a0\u00bb. Laissez le param\u00e8tre \u00ab\u00a0Y\u00a0\u00bb fixe. Le texte du titre restera toujours au centre de l’\u00e9cran. \"Placer<\/li>\n
  5. Regardez le rectangle du pied de page et modifiez sa largeur pour qu’elle soit de 100 %.<\/li>\n
  6. Le rectangle de pied de page \u00e9tant toujours s\u00e9lectionn\u00e9 et se trouvant toujours dans la palette Propri\u00e9t\u00e9s, passez \u00e0 la section Position et modifiez le param\u00e8tre \u00ab\u00a0Y\u00a0\u00bb en le rempla\u00e7ant par \u00ab\u00a0\u00c9pingler au bas\u00a0\u00bb. Laissez le param\u00e8tre \u00ab\u00a0X\u00a0\u00bb fixe. Le pied de page sera d\u00e9sormais toujours affich\u00e9 en bas de l’\u00e9cran. \"\u00c9pinglez<\/li>\n
  7. Pr\u00e8s du pied de page, faites glisser deux widgets de texte et un widget d’image. Modifiez l’un des widgets Texte pour qu’il soit \u00e9pingl\u00e9 au centre et en bas, avec une marge de 100 px. Modifiez l’autre widget Texte pour qu’il soit \u00e9galement \u00e9pingl\u00e9 au centre et \u00e9pingl\u00e9 en bas avec une marge de 72 px. Enfin, modifiez le widget Image pour qu’il soit \u00e9pingl\u00e9 au centre et \u00e9pingl\u00e9 en bas avec une marge de 41 px. \"\u00c9pinglez<\/li>\n
  8. Faites glisser un widget Bouton sur le Canvas. Donnez-lui le style que vous souhaitez et fixez sa largeur \u00e0 40 %. Fixez-le au centre et au bas de l’\u00e9cran avec une marge de 260 px. Le bouton appara\u00eetra toujours au centre et en bas de l’\u00e9cran et occupera toujours 40 % de la largeur de l’\u00e9cran. \"\u00c9pinglez<\/li>\n
  9. Faites glisser un widget Texte et un widget Rectangle en haut \u00e0 droite du canevas. Intitulez le texte \u00ab\u00a0Connexion\u00a0\u00bb et le rectangle \u00ab\u00a0S’inscrire\u00a0\u00bb. Changez l’arri\u00e8re-plan du Rectangle pour qu’il soit transparent et changez sa bordure pour qu’elle soit arrondie. \"Ajouter<\/li>\n
  10. S\u00e9lectionnez le Texte et \u00e9pinglez-le \u00e0 droite avec une marge de 130px. S\u00e9lectionnez le Rectangle et \u00e9pinglez-le \u00e0 droite avec une marge de 30px. \"\u00c9pinglez<\/li>\n
  11. Faites glisser un widget Dynamic Panel sur le Canvas. Dans la section \u00ab\u00a0Disposition\u00a0\u00bb de la palette de propri\u00e9t\u00e9s, modifiez sa disposition en Vertical, puis modifiez l’espacement \u00ab\u00a0Haut\u00a0\u00bb en 40px. Il y aura d\u00e9sormais un certain espace entre le haut du panneau et son contenu. \"alignement<\/li>\n
  12. Le panneau \u00e9tant toujours s\u00e9lectionn\u00e9, \u00e9pinglez-le au centre, modifiez sa largeur \u00e0 90 % et sa hauteur \u00e0 48 %.\"Panneau<\/li>\n
  13. Double-cliquez sur le panneau et faites glisser un widget Texte dans le panneau. Modifiez sa largeur pour qu’elle soit de 77 %. Le texte occupera d\u00e9sormais 77 % de la largeur du panneau et le panneau lui-m\u00eame occupera 90 % de la largeur de l’\u00e9cran. \"Donner<\/li>\n<\/ol>\n

    Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et modifiez la largeur du navigateur de simulation. Votre prototype adaptera automatiquement les \u00e9l\u00e9ments \u00e0 la largeur du navigateur. <\/p>\n

    Remarque :<\/strong> les param\u00e8tres de la simulation doivent \u00eatre r\u00e9gl\u00e9s de mani\u00e8re \u00e0 ce que la largeur du navigateur s’\u00e9tende. Vous pouvez le sp\u00e9cifier dans les param\u00e8tres de simulation ou dans la fen\u00eatre de simulation. <\/div>\n

    \"Param\u00e8tres
    \nVous pouvez t\u00e9l\u00e9charger notre exemple ici.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Dans cet exercice, nous allons cr\u00e9er un prototype r\u00e9actif de base \u00e0 l’aide d’\u00e9l\u00e9ments \u00e9pingl\u00e9s et d’une hauteur et d’une largeur bas\u00e9es sur des pourcentages. Prototypes…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8441],"tags":[],"class_list":["post-124696","post","type-post","status-publish","format-standard","hentry","category-formation","category-prototypage-reactif"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124696"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124696"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124696\/revisions"}],"predecessor-version":[{"id":126233,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124696\/revisions\/126233"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}