{"id":2690,"date":"2020-10-15T23:31:34","date_gmt":"2020-10-15T21:31:34","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=2690"},"modified":"2025-11-19T19:09:26","modified_gmt":"2025-11-19T18:09:26","slug":"personnaliser-gabarit-site-html-css","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/","title":{"rendered":"Personnaliser un gabarit de site HTML-CSS"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours, nous allons voir comment donner une forme attrayante au travail de r\u00e9daction pour le Web (assist\u00e9 ou non par IA) r\u00e9alis\u00e9 en amont. Nous allons <strong>int\u00e9grer le texte structur\u00e9 dans un gabarit de site responsive<\/strong>.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Les_gabarits_responsives\" >Les gabarits responsives<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Preparer_le_travail_de_personnalisation\" >Pr\u00e9parer le travail de personnalisation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Collecter_ou_creer_des_images\" >Collecter ou cr\u00e9er des images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Compresser_les_images\" >Compresser les images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Preparer_un_nuancier_etage\" >Pr\u00e9parer un nuancier \u00e9tag\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Choisir_des_polices_de_caracteres\" >Choisir des polices de caract\u00e8res<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Integrer_le_texte_redige_dans_le_gabarit\" >Int\u00e9grer le texte r\u00e9dig\u00e9 dans le gabarit<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Remarques_sur_les_balises\" >Remarques sur les balises &lt;br&gt;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Conseils_pratiques\" >Conseils pratiques<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Travaillez_sur_le_bureau\" >Travaillez sur le bureau<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Personnaliser_le_gabarit\" >Personnaliser le gabarit<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Recommandations\" >Recommandations<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Modifications_premieres\" >Modifications premi\u00e8res<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Choisir_des_mots_%E2%80%9Cstrong%E2%80%9D_importants\" >Choisir des mots \u201cstrong\u201d (importants)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Changer_limage_de_fond_du_header\" >Changer l&rsquo;image de fond du header<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Changer_les_couleurs_utilisees\" >Changer les couleurs utilis\u00e9es<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Modifier_la_variable_dune_couleur_moyenne\" >Modifier la variable d&rsquo;une couleur moyenne<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Changer_la_police_de_titrage\" >Changer la police de titrage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Ajouter_des_onglets_au_menu\" >Ajouter des onglets au menu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Modifications_non_recommandees\" >Modifications non recommand\u00e9es<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Modifier_lalignement_du_texte\" >Modifier l&rsquo;alignement du texte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Habiller_les_photos_avec_le_texte\" >Habiller les photos avec le texte<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-gabarit-site-html-css\/#Un_gabarit_de_site_multipage\" >Un gabarit de site multipage<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_gabarits_responsives\"><\/span>Les gabarits responsives<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vous trouverez sans aucun doute des centaines de gabarits responsives sur Internet. Il est tr\u00e8s probable qu&rsquo;ils soient stylis\u00e9s en faisant appel au framework Bootstrap. Or, \u00e0 ce stade de votre formation, vous ne ma\u00eetrisez pas encore cette bo\u00eete \u00e0 outil&nbsp;!<\/p>\n\n\n\n<p>Il existe pourtant quelques gabarits HTML5-CSS3 utilisables par des d\u00e9butants. Je me suis inspir\u00e9 de quelques uns d&rsquo;entre eux pour b\u00e2tir plusieurs <a href=\"https:\/\/graphizm.fr\/rwrn\/gabarits-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">gabarits de site one page<\/a>.  <strong>Je vous propose de les t\u00e9l\u00e9charger et de les examiner d&rsquo;un peu plus pr\u00e8s<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/rwrn\/gabarits-sites-responsives.zip\">T\u00e9l\u00e9charger les gabarits<\/a><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"603\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/Gabarit_v5bis-1024x603.jpg\" alt=\"\" class=\"wp-image-2907\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/Gabarit_v5bis-1024x603.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/Gabarit_v5bis-600x353.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/Gabarit_v5bis-768x452.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/Gabarit_v5bis-1200x706.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/Gabarit_v5bis.jpg 1262w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Vous constaterez qu&rsquo;<strong>ils n&rsquo;utilisent pas de code JavaScript<\/strong>. <strong>Ils ont tous \u00e9t\u00e9 optimis\u00e9s pour l&rsquo;affichage sur mobiles<\/strong>. Certains gabarits s&rsquo;adaptent mieux que d&rsquo;autres aux petits \u00e9crans. Les versions \u201cbis\u201d sont un peu plus complexes que les version sur lesquelles elles se basent.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Utiliser les fonctions d&rsquo;affichage \u201cresponsive\u201d de votre navigateur <\/strong>pour tester le rendu de chaque gabarit pour diff\u00e9rentes largeurs de fen\u00eatre du navigateur.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome-1024x608.jpg\" alt=\"\" class=\"wp-image-2909\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome-1024x608.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome-600x356.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome-768x456.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome-1200x712.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/affichage-responsive-chrome.jpg 1304w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Affichez le code source<\/strong>, examinez-le avec attention. Dans la fen\u00eatre affichant le code source, <strong>cliquez sur le lien menant \u00e0 la feuille de style<\/strong>. Parcourez-la pour rep\u00e9rer l&rsquo;articulation entre la feuille de style CSS et le fichier HTML. Notez que les feuilles de style sont partiellement comment\u00e9es.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"461\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style-1024x461.jpg\" alt=\"\" class=\"wp-image-2911\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style-1024x461.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style-600x270.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style-768x346.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style-1200x540.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/afficher-feuille-de-style.jpg 1409w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css-1024x444.jpg\" alt=\"\" class=\"wp-image-2913\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css-1024x444.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css-600x260.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css-768x333.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css-1200x520.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/style_css.jpg 1380w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">Les feuilles de syles CSS listent des instructions qui s&rsquo;appliquent aux \u00e9l\u00e9ments HTML. Pour mieux comprendre les proc\u00e9d\u00e9s utilis\u00e9s dans les feuilles de style des gabarits, je vous invite \u00e0 visionner cette vid\u00e9o qui explique <strong>comment fonctionnent les feuilles de style externes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"1 CSS les bases \u00e0 conna\u00eetre\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/qTN9bNaBCK8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preparer_le_travail_de_personnalisation\"><\/span>Pr\u00e9parer le travail de personnalisation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Collecter_ou_creer_des_images\"><\/span>Collecter ou cr\u00e9er des images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Choisissez le gabarit qui vous semble le mieux convenir \u00e0 votre texte et \u00e0 votre propos. <strong>Vous allez avoir besoin d&rsquo;images<\/strong> pour remplacer celles que j&rsquo;ai utilis\u00e9es. N&rsquo;h\u00e9sitez pas \u00e0 explorer les possibilit\u00e9s offertes par le site <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pexels.com\/fr-fr\/\" target=\"_blank\">pexels.com<\/a> pour trouver des images libres de droit.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous pouvez <strong>cr\u00e9er des illustrations th\u00e9matiques<\/strong> adapt\u00e9es \u00e0 votre sujet en utilisant les services de <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/vector-creator\" target=\"_blank\">Vector Creator<\/a>. Vous pouvez aussi <strong>composer vos propres \u201cphotos\u201d<\/strong> en faisant des montages gr\u00e2ce \u00e0 <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/creator\" target=\"_blank\">Photo Creator<\/a>.<\/p>\n\n\n\n<p>Choisissez vos photos avec soin. Je vous recommande de veiller \u00e0 l&rsquo;unit\u00e9 des couleurs et du style sur l&rsquo;ensemble de la page Web. Ne vous contentez pas de regrouper des photos sur le seul crit\u00e8re de leur rapport avec le sujet trait\u00e9.<\/p>\n\n\n\n<p>\u279c Si vous ne trouvez pas assez de photos dans les m\u00eames teintes color\u00e9es, retouchez-les en utilisant Photoshop ou une application en ligne comme <a rel=\"noreferrer noopener\" href=\"https:\/\/pixlr.com\/fr\/x\/\" target=\"_blank\">Pixlr-x<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x-1024x521.jpg\" alt=\"\" class=\"wp-image-2921\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x-1024x521.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x-600x305.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x-768x391.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x-1200x611.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/pixlr-x.jpg 1224w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Les <strong>IA g\u00e9n\u00e9ratives<\/strong> permettent de cr\u00e9er des images illustratives de tous styles (photos, dessins, peintures, etc.). Vous trouverez des IA g\u00e9n\u00e9ratives d\u00e9di\u00e9es \u00e0 tel ou tel style sur <a href=\"https:\/\/poe.com\/search?q=illustrations\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>poe.com<\/strong><\/a>. Sur cette plateforme vous disposez de 3000 points par jour. les IA r\u00e9f\u00e9renc\u00e9es annoncent chacune le nombre de points consomm\u00e9s \u00e0 chaque production d&rsquo;image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Compresser_les_images\"><\/span>Compresser les images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Rassemblez les images collect\u00e9es dans un dossier de collecte que vous nommerez explicitement. Les images collect\u00e9es dans les banques d&rsquo;images sont g\u00e9n\u00e9ralement de grandes dimensions (plus de 5000 pixels de large) et peuvent peser plusieurs Mo.<\/p>\n\n\n\n<p>L&rsquo;image de bandeau dont vous avez besoin na pas besoin de d\u00e9passer 2000 pixels de large. Il est donc n\u00e9cessaire que vous r\u00e9duisiez la taille de vos images et par cons\u00e9quent leur poids. Compressez vos images en jpg \u00e0 70% (7 sur une \u00e9chelle de 1 \u00e0 10), elle ne p\u00e8seront plus que quelques centaines de Ko&#8230;<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Placez dans le dossier \u201cimg\u201d les seules images que vous envisagez de publier<\/strong>. Si vous placez davantage d&rsquo;images dans ce dossier, le temps de faire votre choix, retirez ensuite celles que vous n&rsquo;avez pas utilis\u00e9es.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Sur le Web, on voyage l\u00e9ger&nbsp;!<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preparer_un_nuancier_etage\"><\/span>Pr\u00e9parer un nuancier \u00e9tag\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vous allez modifier les couleurs utilis\u00e9es dans les gabarits fournis. Vous allez donc devoir utiliser des couleurs dont le degr\u00e9 de luminosit\u00e9 autorise la superposition d&rsquo;une couleur sur l&rsquo;autre. Pensez au confort oculaire de vos futurs lecteur&nbsp;!<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">L&rsquo;application en ligne <a href=\"https:\/\/gradients.app\/fr\/legibility\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>gradients.app<\/strong><\/a> propose des combinaisons toutes pr\u00eates de couleurs pour l&rsquo;arri\u00e8re-plan et le texte.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/gradients.app\/fr\/legibility\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-1024x589.png\" alt=\"\" class=\"wp-image-7517\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-1024x589.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-600x345.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-768x442.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-1536x884.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-2048x1179.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-1200x691.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/gradients-app-1980x1140.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Vous pouvez aussi utiliser une couleur de luminosit\u00e9 moyenne, associ\u00e9e au noir et au blanc (ou \u00e0 une couleur tr\u00e8s fonc\u00e9e et une couleur tr\u00e8s claire). Une <a href=\"https:\/\/graphizm.fr\/fcs\/couleurs-moyennes\/\">liste de couleurs moyennes<\/a> vous est propos\u00e9e en ligne.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choisir_des_polices_de_caracteres\"><\/span>Choisir des polices de caract\u00e8res<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le moment venu, vous aurez sans doute besoin de <strong>changer la police de caract\u00e8res utilis\u00e9e pour le titrage<\/strong> dans les gabarits. Les polices de Google Fonts sont une aubaine pour les cr\u00e9ateurs d\u00e9butants&nbsp;!<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour vous aider dans votre choix, je vous invite \u00e0 vous rendre sur <a href=\"https:\/\/fontpair.co\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>fontpair.co<\/strong><\/a>. Si vous ne trouvez pas votre bonheur sur Fontpair, explorez le site <a href=\"https:\/\/www.typewolf.com\/google-fonts\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Typewolf<\/strong><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/fontpair.co\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/fontpair-co-1024x448.jpg\" alt=\"\" class=\"wp-image-2923\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/fontpair-co-1024x448.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/fontpair-co-600x262.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/fontpair-co-768x336.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/fontpair-co-1200x525.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/fontpair-co.jpg 1383w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">Pour l&rsquo;int\u00e9gration de polices diff\u00e9rentes dans le site personnalis\u00e9, voir un peu plus bas comment int\u00e9grer des polices Google.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integrer_le_texte_redige_dans_le_gabarit\"><\/span>Int\u00e9grer le texte r\u00e9dig\u00e9 dans le gabarit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La personnalisation d&rsquo;un gabarit n\u00e9cessite souvent <strong>une int\u00e9gration du texte titre par titre et paragraphe par paragraphe<\/strong>. Faute de quoi certaines parties du code impl\u00e9ment\u00e9es dans le gabarit risquent de dispara\u00eetre.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>La d\u00e9marche n&rsquo;est pas la m\u00eame que celle qui consiste \u00e0 construire un site \u00e0 partir de z\u00e9ro<\/strong> (from scratch). Elle est aussi tr\u00e8s diff\u00e9rente de la m\u00e9thode qui consiste \u00e0 changer de feuille de style externe pour modifier l&rsquo;apparence d&rsquo;une page HTML.<\/p>\n\n\n\n<p>L&rsquo;avantage d&rsquo;utiliser un \u00e9diteur markdown lors de la r\u00e9daction des textes est de b\u00e9n\u00e9ficier \u00e0 l&rsquo;export en HTML d&rsquo;un contenu proprement balis\u00e9 (surtout avec StackEdit). Cela facilite l&rsquo;int\u00e9gration des diff\u00e9rentes parties du texte dans la structure du gabarit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Remarques_sur_les_balises\"><\/span>Remarques sur les balises &lt;br&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Soyez vigilants sur la structuration du texte.<\/strong> Il se peut que le texte export\u00e9 depuis StackEdit comporte de nombreuses balises <code>&lt;br&gt;<\/code>. C&rsquo;est souvent le r\u00e9sultat d&rsquo;une erreur de saisie lors de la r\u00e9daction dans l&rsquo;\u00e9diteur Markdown. Corrigez ce d\u00e9faut lors de l&rsquo;int\u00e9gration et constituez des paragraphes courts, de taille homog\u00e8ne. <\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Dans StackEdit, <strong>en Markdown, il faut sauter 2 lignes pour faire un saut de paragraphe<\/strong>. Un simple saut de ligne g\u00e9n\u00e8re un saut de ligne dans le paragraphe (un <code>&lt;br&gt;<\/code>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conseils_pratiques\"><\/span>Conseils pratiques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Travaillez_sur_le_bureau\"><\/span>Travaillez sur le bureau<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dans le cadre des salles du GRETA, sur le P\u00f4le Plurim\u00e9dia du lyc\u00e9e La Fayette, vous pouvez \u00eatre tent\u00e9s de modifier directement des fichiers plac\u00e9s sur votre session individuelle.<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\"> \u279c Je vous recommande plut\u00f4t de copier le dossier du gabarit que vous avez l&rsquo;intention de modifier <strong>sur le bureau de votre poste de travail<\/strong>.<\/p>\n\n\n\n<p>Quand vous aurez termin\u00e9, vous sauvegarderez alors votre travail sur votre session (&#8230; et sur votre cl\u00e9 USB ou votre disque dur personnel).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_le_gabarit\"><\/span>Personnaliser le gabarit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Vous pouvez modifier la feuille de style CSS pour personnaliser le gabarit utilis\u00e9<\/strong>. Il est ainsi possible de modifier les couleurs, la police de titrage et bien d&rsquo;autres choses.<\/p>\n\n\n\n<p><strong>Soyez tr\u00e8s prudents concernant des modifications touchant \u00e0 la disposition des \u00e9l\u00e9ments dans la page<\/strong> (menu, t\u00eati\u00e8re, contenu principal, etc.). Gardez \u00e0 l&rsquo;esprit que toute modification envisag\u00e9e sur grand \u00e9cran doit \u00eatre r\u00e9percut\u00e9e sur petits \u00e9crans.<\/p>\n\n\n\n<p>Des \u201cmedia queries\u201d se trouvent en fin de feuille de style. Elles permettent de sp\u00e9cifier pr\u00e9cis\u00e9ment, \u00e0 l&rsquo;aide de nouvelles instructions CSS, comment doivent s&rsquo;afficher les \u00e9l\u00e9ments HTML quand la fen\u00eatre de navigation fait telle ou telle largeur. Toute la \u201cresponsivit\u00e9\u201d (capacit\u00e9 d&rsquo;adaptation) du gabarit repose sur ces requ\u00eates m\u00e9dias. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recommandations\"><\/span>Recommandations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>Ne vous lancez pas dans de grandes modifications du mod\u00e8le choisi<\/strong>. Soignez plut\u00f4t vos images, vos couleurs et vos typos&#8230; et la qualit\u00e9 de votre texte.<\/p>\n\n\n\n<p class=\"has-background-background-color has-background\"><strong>Pour neutraliser une instruction CSS utilisez la mise en commentaires<\/strong> plut\u00f4t que l&rsquo;effacement de l&rsquo;instruction. Cela facilitera le retour \u00e0 la version originale. Les balises de mise en commentaire CSS sont <code>\/*<\/code> et <code>*\/<\/code>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Si une tentative de modification de la feuille de style \u00e9choue, revenez \u00e0 la version originale. <strong>Ne laissez pas des instructions inop\u00e9rantes dans le code<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifications_premieres\"><\/span>Modifications premi\u00e8res<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Voici une s\u00e9rie de modification faciles \u00e0 mettre en \u0153uvre. Une fois que vous les aurez faites, votre site devrait d\u00e9j\u00e0 avoir un look satisfaisant.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Nous verrons plus tard, en utilisant notamment la feuille de style w3.css, comment optimiser la pr\u00e9sentation d&rsquo;une page en ins\u00e9rant des diaporamas, des grilles de photos, des colonnes supl\u00e9mentaires, etc.<\/p>\n\n\n\n<p>Pour le moment, vous pouvez mettre en \u0153uvre les modifications indiqu\u00e9es ci-dessous.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choisir_des_mots_%E2%80%9Cstrong%E2%80%9D_importants\"><\/span>Choisir des mots \u201cstrong\u201d (importants)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Cette modification concerne la structuration et la stylisation du texte en m\u00eame temps. En effet, <strong>les lecteurs devraient pouvoir parcourir votre texte en lisant les seuls titres et les seuls mots en gras<\/strong>.<\/p>\n\n\n\n<p>Les moteurs de recherche lisent votre texte de cette fa\u00e7on. Ils en d\u00e9duisent la coh\u00e9rence de votre propos en analysant le champ s\u00e9mantique des mots importants et des titres.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>C&rsquo;est \u00e0 vous d&rsquo;indiquer aux moteurs de recherche et \u00e0 vos lecteurs quels sont les mots importants.<\/strong> Pour cela, utilisez les balises <code>&lt;strong&gt;<\/code> et <code>&lt;\/strong&gt;<\/code> pour baliser chaque mot ou expression importante.<\/p>\n\n\n\n<p>Quand on veut afficher en gras des mots qui ne sont pas importants , on utilise les balises <code>&lt;b&gt;<\/code> et <code>&lt;\/b&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Changer_limage_de_fond_du_header\"><\/span>Changer l&rsquo;image de fond du header<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sur les gabarits que je vous propose, l&rsquo;image de la t\u00eati\u00e8re est ins\u00e9r\u00e9e dans le header via la feuille de style. Rep\u00e9rez dans la feuille de style les instructions de ce type, rattach\u00e9es au header&nbsp;:<\/p>\n\n\n\n<p><code>background-image: url(..\/css\/img\/nom-image-2000x500.jpg);<\/code><br><code>background-size: cover;<\/code><\/p>\n\n\n\n<p> Pour que certains gabarits fonctionnent en ligne, l&rsquo;appel de l&rsquo;image a \u00e9t\u00e9 modifi\u00e9 comme suit&nbsp;:<\/p>\n\n\n\n<p><code>background-image: url(img\/nom-image-2000x500.jpg);<\/code><\/p>\n\n\n\n<p>Changez le nom de l&rsquo;image utilis\u00e9e par celui de l&rsquo;image de votre choix. Utilisez une image de 2000 pixels de large et de la hauteur de votre choix.<\/p>\n\n\n\n<p>\u279c Pour optimiser le positionnement de l&rsquo;image dans l&rsquo;espace disponible, rajouter l&rsquo;instruction CSS suivante&nbsp;:<\/p>\n\n\n\n<p><code>background-position: center;<\/code><\/p>\n\n\n\n<p>Suivant l&rsquo;image que vous avez utilis\u00e9e et son contexte d&rsquo;affichage, vous pouvez donner \u00e0 <code>background-position<\/code> les valeurs <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code> ou <code>right<\/code>. Vous modifierez ainsi la mani\u00e8re dont l&rsquo;image se positionne dans le cadre disponible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Changer_les_couleurs_utilisees\"><\/span>Changer les couleurs utilis\u00e9es<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour changer les couleurs du gabarit, il faut rep\u00e9rer dans la feuille de style tous les endroits o\u00f9 un nom de couleur a \u00e9t\u00e9 utilis\u00e9. Les formes de codage de la couleur utilis\u00e9es dans les gabarits propos\u00e9s sont la forme hexad\u00e9cimale (#FFF, #FF00DD, #80F80F, etc.) et les formes rgb ou rgba (rgb(255, 255,255), rgba(255, 255, 0, 0.5), etc.).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Vous trouverez rapidement les codes de couleurs ins\u00e9r\u00e9s dans la feuille de style en utilisant la fonction \u201cRechercher\u201d (cmd-F sur MacOs). <strong>Recherchez \u201c#\u201d ou \u201drgb\u201d<\/strong>, vous trouverez imm\u00e9diatement les couleurs cod\u00e9es avec ces intitul\u00e9s.<\/p>\n\n\n\n<p>On peut aussi rechercher l&rsquo;occurence \u201ccolor\u201d (&#8230; toujours en utilisant la fonction \u201cRechercher\u201d dans Brackets). Le nom de la couleur choisie n&rsquo;est pas tr\u00e8s loin des expression comprenant cette occurence&nbsp;!<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\u279c Pensez \u00e0 utiliser des couleurs aux valeurs \u00e9tag\u00e9es et ne multipliez pas le nombre des couleurs utilis\u00e9es. <strong>Veillez au contraste entre le texte et le fond <\/strong>pour garantir \u00e0 vos lecteurs une lisibilit\u00e9 optimale.<\/p>\n\n\n\n<p>Accordez vos couleurs avec l&rsquo;image de t\u00eati\u00e8re utilis\u00e9e. Votre site gagnera en unit\u00e9 et en harmonie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifier_la_variable_dune_couleur_moyenne\"><\/span>Modifier la variable d&rsquo;une couleur moyenne<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les feuilles de style CSS des gabarits dont le num\u00e9ro de version se termine par la lettre <code>c<\/code> sont param\u00e9tr\u00e9es de telle sorte que les couleurs puissent \u00eatre modifi\u00e9es en une seule fois.<\/p>\n\n\n\n<p>Pour cela, des variables de couleur sont d\u00e9finies en t\u00eate de feuille de style (exemple ci-dessous).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/* D\u00e9claration des variables des couleurs appliqu\u00e9es sur la page *\/<br>:root {<br>--dark-color: #000;<br>--dark-grey: #333;<br>--medium-color: #307d9a;<br>--light-color: #fff;<br>--light-grey: #ddd;<br>} <\/pre>\n\n\n\n<p>Il s&rsquo;agit de gris (clair et fonc\u00e9), du noir, du blanc et d&rsquo;une <a href=\"https:\/\/graphizm.fr\/fcs\/couleurs-moyennes\/\" target=\"_blank\" rel=\"noreferrer noopener\">couleur moyenne<\/a> choisie pour r\u00e9pondre \u00e0 la norme d&rsquo;accessibilit\u00e9 AA sur le noir et sur le blanc.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour modifier la couleur moyenne dans tout le gabarit, il suffit de changer la valeur de <code>--medium-color<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Changer_la_police_de_titrage\"><\/span>Changer la police de titrage<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les polices de titrages sont appel\u00e9es depuis les serveurs de <a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/\" target=\"_blank\">Google Fonts<\/a> par la m\u00e9thode @import, au tout d\u00e9but de la feuille de style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts-1024x584.jpg\" alt=\"\" class=\"wp-image-5100\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts-1024x584.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts-600x342.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts-768x438.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts-1200x684.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/Abril_Fatface_-_Google_Fonts.jpg 1432w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Si vous n&rsquo;avez jamais utilis\u00e9 Google Fonts, je vous invite \u00e0 regarder cette vid\u00e9o pour en apprendre davantage (dur\u00e9e&nbsp;: 16 min).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Utiliser correctement Google Fonts pour ajouter des polices (nouvelle interface)\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/e-ZeyHtQZFo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ajouter_des_onglets_au_menu\"><\/span>Ajouter des onglets au menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>En fonction de la structuration du contenu r\u00e9dactionnel, vous pouvez \u00eatre amen\u00e9s \u00e0 ajouter des onglets au menu du gabarit. Choisissez des intitul\u00e9s courts en reprenant un terme du titre de la partie vers laquelle renvoie l&rsquo;onglet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifications_non_recommandees\"><\/span>Modifications non recommand\u00e9es<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifier_lalignement_du_texte\"><\/span>Modifier l&rsquo;alignement du texte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le Web, avec la diversit\u00e9 des \u00e9crans de consultation des sites, supporte mal la justification des textes. <strong>Privil\u00e9giez l&rsquo;alignement du texte \u00e0 gauche<\/strong> et quand cela se justifie, utilisez l&rsquo;alignement centr\u00e9. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Habiller_les_photos_avec_le_texte\"><\/span>Habiller les photos avec le texte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour la m\u00eame raison que celle \u00e9voqu\u00e9e plus haut, <strong>\u00e9vitez d&rsquo;habiller vos images avec du texte<\/strong>. Pour vous convaincre, examinez la mani\u00e8re dont votre texte se positionne \u00e0 proximit\u00e9 de l&rsquo;image sur les largeurs de fen\u00eatre l\u00e9g\u00e8rement plus grandes que la largeur de l&rsquo;image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_gabarit_de_site_multipage\"><\/span>Un gabarit de site multipage<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>La personnalisation d&rsquo;un gabarit de site multipage concerne en priorit\u00e9 les apprenants de la formation CDUI. <\/strong><\/p>\n\n\n\n<p>J&rsquo;ai combin\u00e9 plusieurs feuilles de style trouv\u00e9es sur le Web pour composer un gabarit de site multipage. <strong>Les explications concernant sa mise en \u0153uvre sont affich\u00e9es dans le gabarit&nbsp;!<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/combinaison-css\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"661\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/combiner-css-1024x661.png\" alt=\"\" class=\"wp-image-2697\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/combiner-css-1024x661.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/combiner-css-600x388.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/combiner-css-768x496.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/combiner-css.png 1138w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/fcs\/combinaison-css\/combinaison-css.zip\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger le gabarit multipage<\/a><\/div>\n<\/div>\n\n\n\n<p><strong>Concernant la mise en \u0153uvre de Luxbar<\/strong> (la feuille de style utilis\u00e9e dans ce gabarit pour l&rsquo;insertion du menu&#8230;), vous trouverez des pr\u00e9cisions sur la page intitul\u00e9e <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/\" target=\"_blank\">Insertion d&rsquo;un menu avec Luxbar<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours, nous allons voir comment donner une forme attrayante au travail de r\u00e9daction pour le Web (assist\u00e9 ou non par IA) r\u00e9alis\u00e9 en amont. Nous allons int\u00e9grer le texte structur\u00e9 dans un gabarit de site responsive. Les gabarits responsives Vous trouverez sans aucun doute des centaines de gabarits responsives sur Internet. Il est [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15],"tags":[],"class_list":["post-2690","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs1-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours, nous allons voir comment donner une forme attrayante au travail de r\u00e9daction pour le Web (assist\u00e9 ou non par IA) r\u00e9alis\u00e9 en amont. Nous allons int\u00e9grer le texte structur\u00e9 dans un gabarit de site responsive. Sommaire Toggle Les gabarits responsivesPr\u00e9parer le travail de personnalisationCollecter ou cr\u00e9er des imagesCompresser les imagesPr\u00e9parer un nuancier \u00e9tag\u00e9Choisir des polices de caract\u00e8resInt\u00e9grer le texte r\u00e9dig\u00e9 dans le gabaritRemarques sur les balises &lt;br&gt;Conseils pratiquesTravaillez sur le bureauPersonnaliser le gabaritRecommandationsModifications premi\u00e8resChoisir des mots \u201cstrong\u201d (importants)Changer l&rsquo;image de fond du headerChanger les couleurs utilis\u00e9esModifier la variable d&rsquo;une couleur moyenneChanger la police de titrageAjouter des onglets\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs1-cours\/\" rel=\"category tag\">FCS1-cours<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=2690"}],"version-history":[{"count":66,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2690\/revisions"}],"predecessor-version":[{"id":7623,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2690\/revisions\/7623"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=2690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=2690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=2690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}