{"id":1196,"date":"2020-06-10T09:44:21","date_gmt":"2020-06-10T07:44:21","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=1196"},"modified":"2024-09-25T18:30:30","modified_gmt":"2024-09-25T16:30:30","slug":"portfolio-avec-w3css","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/","title":{"rendered":"Cr\u00e9er son portfolio avec w3.css"},"content":{"rendered":"\n<p>Dans ce cours nous allons voir comment <strong>personnaliser un gabarit de portfolio mis au point \u00e0 l&rsquo;aide du framework w3.css<\/strong>. Les pr\u00e9requis sont les suivants&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>utiliser l&rsquo;\u00e9diteur de code Brackets<\/li><li>identifier et modifier la structure HTML d&rsquo;un site<\/li><li>identifier et modifier une feuille de style CSS<\/li><li>r\u00e9diger des textes pour la publication en ligne<\/li><li>collecter, concevoir et traiter des images pour le Web<\/li><\/ul>\n\n\n\n<p>Une partie de ce cours est un rappel des fonctionnalit\u00e9s de base de w3.css. Elles ont \u00e9t\u00e9 vues lors du cours intitul\u00e9 <a href=\"http:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Se familiariser avec w3.css<\/a><\/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\/w3css\/portfolio-avec-w3css\/#Telecharger_les_gabarits\" >T\u00e9l\u00e9charger les gabarits<\/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\/w3css\/portfolio-avec-w3css\/#La_structure_dun_portfolio\" >La structure d&rsquo;un portfolio<\/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\/w3css\/portfolio-avec-w3css\/#En_savoir_plus\" >En savoir plus<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Les_images_de_travaux\" >Les images de travaux<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#La_preparation_des_contenus\" >La pr\u00e9paration des contenus<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Lister_les_images_a_produire\" >Lister les images \u00e0 produire<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Lister_les_textes_a_produire\" >Lister les textes \u00e0 produire<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#La_personnalisation_des_gabarits_fournis\" >La personnalisation des gabarits fournis<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Lutilisation_des_identifiants_%C2%AB_class_%C2%BB\" >L&rsquo;utilisation des identifiants  \u00ab\u00a0class\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Lappel_des_CSS_et_des_polices_de_caracteres\" >L&rsquo;appel des CSS et des polices de caract\u00e8res<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Les_icones_Font_Awesome\" >Les ic\u00f4nes Font Awesome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Utilisez_des_photos_de_maquette\" >Utilisez des photos de maquette<\/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\/w3css\/portfolio-avec-w3css\/#Le_parametrage_des_grilles\" >Le param\u00e9trage des grilles<\/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\/w3css\/portfolio-avec-w3css\/#Les_grilles_Half-Third-Quarter_et_Small-Medium-Large\" >Les grilles Half-Third-Quarter et Small-Medium-Large<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Aller_plus_loin_en_integrant_des_textures\" >Aller plus loin en int\u00e9grant des textures<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/graphizm.fr\/greta\/w3css\/portfolio-avec-w3css\/#Aller_plus_loin_en_utilisant_Bootstrap\" >Aller plus loin en utilisant Bootstrap<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Telecharger_les_gabarits\"><\/span>T\u00e9l\u00e9charger les gabarits<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour vous permettre de r\u00e9aliser rapidement un portfolio de qualit\u00e9 professionnelle, <strong>je mets \u00e0 votre disposition plusieurs gabarits de portfolios<\/strong>. Collect\u00e9s sur le site de w3schools, ils ont \u00e9t\u00e9 <strong>optimis\u00e9s pour vous permettre de gagner du temps lors de leur mise en \u0153uvre<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/comptetestfpw.alwaysdata.net\/darkPortfolio-w3css\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/darkPortfolio-1024x523.png\" alt=\"\" class=\"wp-image-1359\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/darkPortfolio-1024x523.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/darkPortfolio-600x307.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/darkPortfolio-768x393.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/darkPortfolio-1200x613.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/darkPortfolio.png 1399w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">Vous \u00eates invit\u00e9s \u00e0 t\u00e9l\u00e9charger les gabarits optimis\u00e9s pour en prendre connaissance et analyser la mani\u00e8re dont ils ont \u00e9t\u00e9 construits.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex 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\" href=\"http:\/\/graphizm.fr\/w3css\/gabarits-portfolios-revised-w3css.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les gabarits de portfolios W3CSS<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"> \u279c La solution optimale pour travailler sur l&rsquo;ensemble de ces ressources est d&rsquo;<strong>ouvrir le dossier contenant tous les gabarits avec Brackets (Fichier &gt; Ouvrir un dossier)<\/strong>. La liste de tous les gabarits s&rsquo;affiche alors dans la colonne de gauche, dans Brackets, vous permettant d&rsquo;acc\u00e9der \u00e0 l&rsquo;ensemble des contenus mis \u00e0 votre disposition.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"582\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08-1024x582.jpg\" alt=\"\" class=\"wp-image-1251\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08-1024x582.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08-600x341.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08-768x436.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08-1200x682.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-08.jpg 1450w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Pour l&rsquo;utilisation et la personnalisation de Brackets, je vous renvoie vers le cours des fondamentaux de la cr\u00e9ation de site intitul\u00e9 <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/personnaliser-brackets\/\" target=\"_blank\">Personnaliser Brackets<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour l&rsquo;utilisation du framework w3.css, voir le cours intitul\u00e9 <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/\" target=\"_blank\">Se familiariser avec w3css<\/a>. L&rsquo;utilisation de w3.css est d\u00e9taill\u00e9e sur le site <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/default.asp\" target=\"_blank\">w3schools.com<\/a> que je vous invite \u00e0 <strong>consulter ce site aussi souvent que n\u00e9cessaire<\/strong>.<\/p>\n\n\n\n<p class=\"has-background-background-color has-background\">Les gabarits mis \u00e0 votre disposition sont pr\u00e9sent\u00e9s sous leur forme originale (avant optimisation par mes soins) sur cette page&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/w3css_templates.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/w3css\/w3css_templates.asp<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_structure_dun_portfolio\"><\/span>La structure d&rsquo;un portfolio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dispos\u00e9s sur une seule page ou sur plusieurs pages Web, vous retrouverez dans tous les portfolios les \u00e9l\u00e9ments, sections ou pages suivantes&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>un menu<\/strong> permettant la navigation quel que soit la taille de la fen\u00eatre de navigation<\/li><li><strong>une t\u00eati\u00e8re<\/strong> mentionnant le nom du studio ou du designer (parfois r\u00e9duite \u00e0 une mention dans le menu)<\/li><li><strong>une biographie<\/strong> du designer \u00e0 laquelle est associ\u00e9e la mention <strong>des comp\u00e9tences<\/strong> du designer et <strong>un cv t\u00e9l\u00e9chargeable<\/strong> au format pdf<\/li><li><strong>des listes de services<\/strong> auxquelles sont parfois associ\u00e9s <strong>des t\u00e9moignages<\/strong> de clients, <strong>des statistique<\/strong>s de satisfaction et <strong>des listes de r\u00e9f\u00e9rences<\/strong><\/li><li><strong>une pr\u00e9sentation de travaux<\/strong> ou de projets (le portfolio proprement dit), souvent sous forme de grille dont le comportement varie selon les gabarits propos\u00e9s<\/li><li><strong>une section<\/strong> <strong>contact<\/strong> mentionnant les diverses possibilit\u00e9s offertes pour rencontrer le designer, \u00e9ventuellement \u00e9tay\u00e9e par <strong>un plan d&rsquo;acc\u00e8s<\/strong> \u00e0 son bureau<\/li><li><strong>un pied de page<\/strong> comportant quelques mentions utiles<\/li><\/ul>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Il est recommand\u00e9, \u00e0 un niveau professionnel, d&rsquo;expliquer dans son portfolio comment nous travaillons. Il est donc envisageable de <strong>cr\u00e9er une section \u00ab\u00a0M\u00e9thodologie\u00a0\u00bb<\/strong>, en plus de celles mentionn\u00e9es plus haut.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01-1024x493.jpg\" alt=\"\" class=\"wp-image-1204\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01-1024x493.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01-600x289.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01-768x369.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01-1200x577.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/Dark_portfolio-01.jpg 1399w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Retrouvez les diff\u00e9rentes \u00e9l\u00e9ments mentionn\u00e9s<\/strong> dans les gabarits mis \u00e0 votre disposition. Vous pouvez aussi rep\u00e9rer ces \u00e9l\u00e9ments dans les portfolios de graphistes connus.<\/p>\n\n\n\n<p>Une <strong>liste de portfolios<\/strong> est disponible sous forme de carte XMind \u00e0 cette adresse (l&rsquo;inscription \u00e0 Biggerplate est obligatoire pour pouvoir t\u00e9l\u00e9charger la ressource)&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.biggerplate.com\/mindmaps\/6cV6PxzD\/portfolios-de-graphistes-fev-2020\" target=\"_blank\">https:\/\/www.biggerplate.com\/mindmaps\/6cV6PxzD\/portfolios-de-graphistes-fev-2020<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"En_savoir_plus\"><\/span> En savoir plus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Voici un diaporama sur les diff\u00e9rentes options s&rsquo;offrant \u00e0 un designer graphique souhaitant pr\u00e9senter ses travaux sans d\u00e9penser une fortune \ud83d\ude09<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-slideshare wp-block-embed-slideshare wp-embed-aspect-1-1 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.slideshare.net\/cabaroc\/creer-sonportfolio\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_images_de_travaux\"><\/span>Les images de travaux<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>La grille de pr\u00e9sentation des travaux permet de prendre connaissance des projets men\u00e9s par vos soins, <\/strong>dans le cadre de votre formation, dans le cadre de votre stage en entreprise ou \u00e0 titre personnel. Cette grille est constitu\u00e9e d&rsquo;images dont le comportement peut \u00eatre diff\u00e9rent d&rsquo;un gabarit \u00e0 l&rsquo;autre.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Rep\u00e9rez les comportements des images<\/strong> dans les mod\u00e8les mis \u00e0 votre disposition. Le portfolio intitul\u00e9 \u00ab\u00a0darkPortfolio-w3css\u00a0\u00bb pr\u00e9sente, dans sa section \u00ab\u00a0Travaux\u00a0\u00bb trois comportement d&rsquo;images diff\u00e9rents (un comportement par colonne d&rsquo;images). Cela vous permettra de <strong>rep\u00e9rer les avantages et les inconv\u00e9nients de chacun de ces comportements<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Inventaire des comportements d&rsquo;image<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>L&rsquo;image ne r\u00e9agit pas au survol du curseur ou au clic.<\/strong> C&rsquo;est le cas dans quelques mod\u00e8les propos\u00e9s sur le site w3schools.com. Observez par exemple le comportement des images du template <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/tryw3css_templates_photo.htm\" target=\"_blank\">Photolio<\/a> ou celle du gabarit <a href=\"https:\/\/www.w3schools.com\/w3css\/tryw3css_templates_streetart.htm\" target=\"_blank\" rel=\"noreferrer noopener\">Art Template<\/a><\/li><li><strong>Lorsque nous cliquons sur l&rsquo;image, celle-ci s&rsquo;ouvre dans une nouvelle fen\u00eatre.<\/strong> C&rsquo;est le cas des images de la premi\u00e8re colonne du gabarit \u00ab\u00a0darkPortfolio-w3css\u00a0\u00bb<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02-1024x495.jpg\" alt=\"\" class=\"wp-image-1213\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02-1024x495.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02-600x290.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02-768x371.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02-1200x580.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-02.jpg 1394w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Lorsque nous cliquons sur l&rsquo;image, une fen\u00eatre modale s&rsquo;ouvre et nous permet de voir l&rsquo;image en plus grand.<\/strong> L&rsquo;image est parfois accompagn\u00e9e d&rsquo;une l\u00e9gende. C&rsquo;est le cas des images de la deuxi\u00e8me colonne du gabarit \u00ab\u00a0darkPortfolio-w3css\u00a0\u00bb. C&rsquo;est aussi le cas des images du template en ligne <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/tryw3css_templates_portfolio2.htm\" target=\"_blank\">People Portfolio Template<\/a>. Un clic sur l&rsquo;image referme la fen\u00eatre modale.<\/li><li><strong>Lorsque nous cliquons sur l&rsquo;image, une nouvelle page s&rsquo;affiche dans notre navigateur. <\/strong>L&rsquo;image sur laquelle nous venons de cliquer est pr\u00e9sent\u00e9e en grand, accompagn\u00e9e parfois d&rsquo;autres images (ayant elles aussi des comportements variables). C&rsquo;est le cas des images de la troisi\u00e8me colonne du gabarit \u00ab\u00a0darkPortfolio-w3css\u00a0\u00bb ou des photographies pr\u00e9sent\u00e9es sur le gabarit \u00ab\u00a0BlackAndWhitePhoto-w3css\u00a0\u00bb.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03-1024x496.jpg\" alt=\"\" class=\"wp-image-1216\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03-1024x496.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03-600x290.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03-768x372.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03-1200x581.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-03.jpg 1397w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-04-1024x498.jpg\" alt=\"\" class=\"wp-image-1218\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-04-1024x498.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-04-600x292.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-04-768x373.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-04-1200x583.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-04.jpg 1395w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_preparation_des_contenus\"><\/span>La pr\u00e9paration des contenus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La mise en \u0153uvre la plus simple consiste bien s\u00fbr \u00e0 pr\u00e9senter les travaux de telle mani\u00e8re que nous n&rsquo;ayons pas \u00e0 multiplier le nombre d&rsquo;images par projet.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Chacun choisit donc le mode de pr\u00e9sentation des travaux qui lui convient le mieux.<\/strong> Quel que soit le choix effectu\u00e9, il s&rsquo;agit maintenant de <strong>lister les contenus \u00e0 produire<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lister_les_images_a_produire\"><\/span>Lister les images \u00e0 produire<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u279c <strong>Il faut \u00e9tablir une liste pr\u00e9cise de ses besoins iconographiques<\/strong> pour ne pas \u00eatre pris au d\u00e9pourvu au moment de finaliser son portfolio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Lister les dimensions de images \u00e0 produire<\/h4>\n\n\n\n<p>Dans les gabarits que je mets \u00e0 votre disposition, certaines \u201cimages\u201d ont \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9es par le site <a rel=\"noreferrer noopener\" href=\"https:\/\/placeholder.com\/\" target=\"_blank\">placeholder.com<\/a>. Leurs dimensions sont affich\u00e9es automatiquement (param\u00e9tr\u00e9e directement dans le code d&rsquo;appel de l&rsquo;image). Il s&rsquo;agit d&rsquo;images sans sujet, r\u00e9sum\u00e9es \u00e0 un aplat de couleur (param\u00e9trable) et un texte (\u00e9galement param\u00e9trable). Cet outil est utilis\u00e9 en maquettage Web pour faire du \u00ab\u00a0zoning\u00a0\u00bb (d\u00e9terminer la place occup\u00e9e par les contenus).<\/p>\n\n\n\n<p>\u279c Faites vos <strong>tests d&rsquo;affichage d&rsquo;images<\/strong> en utilisant <a rel=\"noreferrer noopener\" href=\"https:\/\/placeholder.com\/\" target=\"_blank\">placeholder.com<\/a> et d\u00e9terminez la taille optimale des images que vous souhaitez utilisez. Notez les dimensions requises et pr\u00e9parez vos images de travaux en cons\u00e9quence&nbsp;!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Choisir un style de pr\u00e9sentation des images de travaux<\/h4>\n\n\n\n<p>Les grilles d&rsquo;images n\u00e9cessitent parfois de penser \u00e0 l&rsquo;unit\u00e9 graphique de la page de pr\u00e9sentation des travaux. Pour cela, w3schools.com nous aide \u00e0 appliquer quelques astuces.<\/p>\n\n\n\n<p>Plusieurs options s&rsquo;offrent \u00e0 vous&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Utiliser un d\u00e9tail de l&rsquo;image totale, \u00e0 utiliser comme image d&rsquo;appel positionn\u00e9e en \u00ab\u00a0ma\u00e7onnerie\u00a0\u00bb<\/li><li>Appliquer le m\u00eame filtre sur toutes les images de la grille<\/li><li>Assombrir toutes les images de la grille et r\u00e9v\u00e9ler les v\u00e9ritables couleur d&rsquo;une image au survol de celle-ci par le curseur<\/li><li>Animer les images \u00e0 l&rsquo;ouverture de la page ou de la fen\u00eatre modale<\/li><li>etc.<\/li><\/ul>\n\n\n\n<p>Voyez les pages suivantes sur w3schools.com&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/w3css_images.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/w3css\/w3css_images.asp<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/w3css_effects.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/w3css\/w3css_effects.asp<\/a><\/li><li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_animate.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/w3css\/w3css_animate.asp<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">Ne soyez pas trop ambitieux et notez que <strong>l&rsquo;impact visuel d&rsquo;un portfolio repose en grande partie sur la qualit\u00e9 et sur l&rsquo;unit\u00e9 des images pr\u00e9sent\u00e9es<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lister_les_textes_a_produire\"><\/span>Lister les textes \u00e0 produire<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Apr\u00e8s avoir list\u00e9 les images \u00e0 produire il convient de <strong>lister les textes \u00e0 r\u00e9diger<\/strong>. Le plus d\u00e9licat est souvent la r\u00e9daction de la biographie.<\/p>\n\n\n\n<p><strong>Le curriculum vitae propos\u00e9 en t\u00e9l\u00e9chargement est \u00e0 mettre \u00e0 jour ou \u00e0 concevoir professionnellement.<\/strong> R\u00e9alis\u00e9 dans InDesign et export\u00e9 au format pdf, il d\u00e9montre parfaitement vos comp\u00e9tences acquises en PAO. Il est \u00e9galement possible d&rsquo;utiliser les services en ligne de la plateforme Canva.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV-1024x546.jpg\" alt=\"\" class=\"wp-image-1225\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV-1024x546.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV-600x320.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV-768x410.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV-1200x640.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/canva-CV.jpg 1310w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour trouver de l&rsquo;inspiration en mati\u00e8re de formulation des textes de votre biographie, je vous invite \u00e0 <strong>consulter les portfolios de plusieurs graphistes<\/strong>. Utilisez la liste de portfolios disponible sous forme de carte Xmind t\u00e9l\u00e9chargeable sur <a rel=\"noreferrer noopener\" href=\"https:\/\/www.biggerplate.com\/mindmaps\/NuIS8KM7\/portfolios-de-graphistes\" target=\"_blank\">Biggerplate<\/a> (apr\u00e8s inscription).<\/p>\n\n\n\n<p>Si vous souhaitez <strong>ins\u00e9rer un logo personnel dans votre portfolio<\/strong>, il vous faudra mener \u00e0 son terme la d\u00e9marche expliqu\u00e9e dans le cours intitul\u00e9 <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/com-crea\/designer-un-logo\/\" target=\"_blank\">Designer un logo<\/a>. L\u00e0 encore, si vous \u00eates press\u00e9s, vous pouvez utiliser les services de <a rel=\"noreferrer noopener\" href=\"https:\/\/www.canva.com\/fr_fr\/creer\/logos\/\" target=\"_blank\">la plateforme Canva<\/a>. Vous y serez guid\u00e9s dans la d\u00e9marche de conception de votre logo. Dans les gabarits que je vous ai fournis, une simple ic\u00f4ne est utilis\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_personnalisation_des_gabarits_fournis\"><\/span>La personnalisation des gabarits fournis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>\u00c0 cette \u00e9tape de la pr\u00e9paration de votre portfolio, le plus simple est d&rsquo;utiliser l&rsquo;un des gabarits fournis en l&rsquo;\u00e9tat<\/strong>, sans en modifier ni les polices de caract\u00e8res, ni les couleurs et encore moins l&rsquo;agencement des contenus.<\/p>\n\n\n\n<p>Toutefois, je vais vous indiquer comment effectuer quelques modifications \u00e9l\u00e9mentaires en vous rappelant comment utiliser le framework w3.css. Vous agirez ensuite comme bon vous semblera. \ud83d\ude09<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c N&rsquo;h\u00e9sitez pas \u00e0 consulter le cours intitul\u00e9 <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/\" target=\"_blank\">Se familiariser avec<strong> <\/strong>W3CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lutilisation_des_identifiants_%C2%AB_class_%C2%BB\"><\/span>L&rsquo;utilisation des identifiants  \u00ab\u00a0class\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Comme tous les frameworks CSS, w3.css utilise les identifiants HTML de classe<\/strong>, pour appliquer aux \u00e9l\u00e9ments ainsi identifi\u00e9s des instructions CSS pr\u00e9\u00e9tablies. Une classe permet de cibler un \u00e9l\u00e9ment HTML en vue de lui attribuer des propri\u00e9t\u00e9s d\u00e9finies dans une feuille de style.<\/p>\n\n\n\n<p>Par exemple, avec le framework w3.css, <strong>si un \u00e9l\u00e9ment HTML est identifi\u00e9 avec la classe \u00ab\u00a0w3-red\u00a0\u00bb, la couleurs d&rsquo;arri\u00e8re-plan de cet \u00e9l\u00e9ment sera rouge et le texte qu&rsquo;il contient sera blanc<\/strong>. Dans le code source des gabarits de portfolios fournis vous constaterez que les classes utilis\u00e9es identifient souvent des \u00e9l\u00e9ments &lt;div&gt; (divisions g\u00e9n\u00e9riques).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-05.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-05-1024x452.jpg\" alt=\"\" class=\"wp-image-1243\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-05-1024x452.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-05-600x265.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-05-768x339.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-05.jpg 1189w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c La capture d&rsquo;\u00e9cran ci-dessus a \u00e9t\u00e9 faite \u00e0 partir de l&rsquo;\u00e9diteur de code Try-it, int\u00e9gr\u00e9 \u00e0 w3school.com. Si vous effectuez un changement dans le code source, avec cet \u00e9diteur, cliquez sur le bouton \u201cRun\u201d pour afficher le r\u00e9sultat dans l&rsquo;espace de pr\u00e9visualisation. Vous pouvez retrouver cet exemple sur <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/code\/tryit.asp?filename=GFONEDWBX12E\" target=\"_blank\">w3shools.com<\/a>.<\/p>\n\n\n\n<p>Si vous souhaitez <strong>en apprendre davantage<\/strong> sur l&rsquo;utilisation des classes (et des id) en g\u00e9n\u00e9ral, vous pouvez consulter le cours de Pierre Giraud consacr\u00e9 aux <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pierre-giraud.com\/html-css-apprendre-coder-cours\/class-id\/\" target=\"_blank\">attributs HTML class et id<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lappel_des_CSS_et_des_polices_de_caracteres\"><\/span>L&rsquo;appel des CSS et des polices de caract\u00e8res<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour que les classes utilis\u00e9es dans le code HTML soient effectives, il est indispensable que la feuille de style CSS correspondantes soit charg\u00e9e par le navigateur. Tout se passe dans le \u00ab\u00a0head\u00a0\u00bb de la page (ou tout simplement au dessus du \u00ab\u00a0body\u00a0\u00bb). Le feuille de style du framework est nomm\u00e9e \u00ab\u00a0w3.css\u00a0\u00bb, comme le framework lui-m\u00eame&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"566\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07-1024x566.jpg\" alt=\"\" class=\"wp-image-1254\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07-1024x566.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07-600x331.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07-768x424.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07-1200x663.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-07.jpg 1412w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Les polices de caract\u00e8res utilis\u00e9es sont appel\u00e9es depuis le serveur de Google Fonts<\/strong>, o\u00f9 elles ont \u00e9t\u00e9 s\u00e9lectionn\u00e9es. Pour savoir comment proc\u00e9der pour charger une police de caract\u00e8res s\u00e9lectionn\u00e9e sur Google Fonts puis pour l&rsquo;utiliser dans une page Web, je vous recommande de visionner la vid\u00e9o qui suit.<\/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<p>Le code pr\u00e9sent\u00e9 dans cette vid\u00e9o est disponible sur CodePen. Vous y acc\u00e8derez directement par le lien suivant&nbsp;:<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/believemy\/pen\/gOaRXGL\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/believemy\/pen\/gOaRXGL<\/a><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c En ce qui vous concerne, le lien &lt;link &#8230; &gt; se trouve bien dans le &lt;head&gt; des pages de vos gabarits et si vous consultez les feuilles de style de personnalisation de ces pages (nomm\u00e9s \u00ab\u00a0style.css\u00a0\u00bb), vous constaterez qu&rsquo;il est bien sp\u00e9cifi\u00e9 que les polices charg\u00e9es sont utilis\u00e9es dans le corps des pages concern\u00e9es. <strong>Les instructions contenus dans le fichier style.css annulent celles contenues dans le fichier w3.css<\/strong> (elles sont prises en compte prioritairement puisque style.css est appel\u00e9 apr\u00e8s w3.css).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-09-1024x424.jpg\" alt=\"\" class=\"wp-image-1256\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-09-1024x424.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-09-600x249.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-09-768x318.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-09-1200x497.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-09.jpg 1404w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c Vous pouvez maintenant modifier sans difficult\u00e9 la police de caract\u00e8res utilis\u00e9e dans tel ou tel gabarit. Choisissez votre police avec soin et optez toujours pour la simplicit\u00e9 et la lisibilit\u00e9. <strong>Pensez bien \u00e0 modifier \u00e0 la fois le &lt;link&gt; dans la page HTML et l&rsquo;instruction \u00ab\u00a0font-family\u00a0\u00bb dans le fichier \u00ab\u00a0style.css\u00a0\u00bb<\/strong> \ud83d\ude09<\/p>\n\n\n\n<p>Si vous souhaitez utiliser la m\u00e9thode @import dans la feuille de style personnalis\u00e9e de tel ou tel gabarit, rien ne vous en emp\u00eache. C&rsquo;est en effet ce que recommande l&rsquo;auteur de la vid\u00e9o propos\u00e9e plus haut, mais ce n&rsquo;est pas avec cette m\u00e9thode que les gabarits ont \u00e9t\u00e9 construits \u00e0 l&rsquo;origine par w3schools.<\/p>\n\n\n\n<p>\u279c N&rsquo;h\u00e9sitez pas, en revanche, \u00e0 appeler toutes les fontes dont vous aurez besoin (light, regular, bold, black, etc), que ce soit avec la m\u00e9thode link\u201d ou @import.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_icones_Font_Awesome\"><\/span>Les ic\u00f4nes Font Awesome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les gabarits de portfolios construits avec w3css utilisent les ic\u00f4nes de la biblioth\u00e8que <strong>Font Awesome version 4.7<\/strong> (notez bien ce num\u00e9ro de version&#8230;). <\/p>\n\n\n\n<p>Comme pour les feuilles de style et les polices de Google Fonts,<strong> les ic\u00f4nes sont appel\u00e9es depuis les serveurs de Font Awesome<\/strong>. Vous avez d\u00e9j\u00e0 fait ce constat sur les captures d&rsquo;\u00e9cran pr\u00e9c\u00e9dentes.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c J&rsquo;ai mentionn\u00e9 dans le commentaire encadr\u00e9 sur l&rsquo;image ci-dessous l&rsquo;adresse du site sur lequel vous pouvez <strong>choisir d&rsquo;autres ic\u00f4nes disponibles<\/strong> (si vous souhaitez remplacer celles propos\u00e9es sur les pages fournies).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"629\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10-1024x629.jpg\" alt=\"\" class=\"wp-image-1264\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10-1024x629.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10-600x368.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10-768x472.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10-1200x737.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/w3css-10.jpg 1407w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Rep\u00e9rez dans le code HTML les endroits o\u00f9 sont utilis\u00e9es des ic\u00f4nes (entre balises &lt;i&gt; et &lt;\/i&gt;. <strong>Changez simplement le nom des ic\u00f4nes<\/strong> et vous verrez s&rsquo;afficher en remplacement l&rsquo;ic\u00f4ne que vous avez choisie sur le site <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/v4.7.0\/icons\/\" target=\"_blank\">https:\/\/fontawesome.com\/v4.7.0\/icons\/<\/a> \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisez_des_photos_de_maquette\"><\/span>Utilisez des photos de maquette<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Certains gabarits fournis utilisent les services du site placeholder.com pour importer des images pr\u00e9sentant un fond uni avec la mention des dimensions de l&rsquo;image.<\/p>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser les services du site <a rel=\"noreferrer noopener\" href=\"https:\/\/picsum.photos\/\" target=\"_blank\">picsum.photos<\/a> (Lorem Picsum) pour ins\u00e9rer des photographies aux dimensions voulues. Par d\u00e9faut, les photos sont choisies al\u00e9atoirement dans une liste de photos disponibles (provenant de la banque d&rsquo;images Unsplash). Vous pouvez choisir la photo souhait\u00e9e dans la liste disponible. Vous pouvez aussi appliquer un filtre flou et \u00e9ventuellement un filtre gris.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01-1024x495.jpg\" alt=\"\" class=\"wp-image-3725\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01-1024x495.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01-600x290.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01-768x371.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01-1200x580.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-01.jpg 1260w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1-1024x492.jpg\" alt=\"\" class=\"wp-image-3727\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1-1024x492.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1-600x288.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1-768x369.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1-1200x577.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-02-1.jpg 1271w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03-1024x521.jpg\" alt=\"\" class=\"wp-image-3728\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03-1024x521.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03-600x305.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03-768x391.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03-1200x610.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/picsum-photos-03.jpg 1274w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Le_parametrage_des_grilles\"><\/span>Le param\u00e9trage des grilles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Les gabarits de porfolios fournis comportent tous des grilles sur lesquelles sont positionn\u00e9es les images des travaux pr\u00e9sent\u00e9es.<\/strong> Leur affichage (nombre de colonnes et de rang\u00e9es) d\u00e9pend de la largeur de la fen\u00eatre de navigation (et donc de la taille de l&rsquo;\u00e9cran en navigation plein \u00e9cran&#8230;)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_grilles_Half-Third-Quarter_et_Small-Medium-Large\"><\/span>Les grilles Half-Third-Quarter et Small-Medium-Large<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le framework <strong>w3.css utilise 2 types de grilles<\/strong> dont la documentation sur le site de r\u00e9f\u00e9rence de w3schools se trouve sur ces 2 pages&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_responsive.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/w3css\/w3css_responsive.asp<\/a><\/li><li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_grid.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/w3css\/w3css_grid.asp<\/a><\/li><\/ul>\n\n\n\n<p>Le premier type de grille, d\u00e9sign\u00e9 comme m\u00e9thode adaptative (r\u00e9active ou responsive), permet de diviser une rang\u00e9e en colonnes occupant une moiti\u00e9, un tiers, deux tiers, un quart ou trois quart de l&rsquo;espace disponible en pleine largeur. Dans ce cours, nous nommerons ce type de grille \u00ab\u00a0half-third-quarter\u00a0\u00bb ou grille HTQ.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter-1024x467.png\" alt=\"\" class=\"wp-image-1273\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter-1024x467.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter-600x274.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter-768x351.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter-1200x548.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-half-third-quarter.png 1415w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Le second type de grille permet de diviser une rang\u00e9e en colonnes de 1 \u00e0 12 fractions (ou unit\u00e9s) de large, en d\u00e9terminant la largeur des colonnes sur petits \u00e9crans (small), sur \u00e9crans moyens (medium) et larges \u00e9crans (large). Dans ce cours, nous nommerons ce type de grille \u00ab\u00a0small-medium-large\u00a0\u00bb ou grille SML<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large-1024x467.png\" alt=\"\" class=\"wp-image-1274\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large-1024x467.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large-600x274.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large-768x350.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large-1200x547.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-small-medium-large.png 1416w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Rep\u00e9rez<\/strong> dans le code source des gabarits de portfolios fournis <strong>quel est le type de grille utilis\u00e9e<\/strong> (il est possible que les 2 types de grilles soient imbriqu\u00e9s ou utilis\u00e9s successivement).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"540\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes-1024x540.png\" alt=\"\" class=\"wp-image-1278\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes-1024x540.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes-600x316.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes-768x405.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes-1200x632.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/grille-rangees-differentes.png 1395w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><em><strong>Rappel<\/strong> : dans la grille pr\u00e9sent\u00e9e ci-dessus (gabarit \u00ab\u00a0parallaxTemplate-w3css), les images sont appel\u00e9es depuis le site <a rel=\"noreferrer noopener\" href=\"https:\/\/placeholder.com\/\" target=\"_blank\">placeholder.com<\/a>, un service en ligne permettant de placer des images neutres dans une maquette, en affichant les dimensions de l&rsquo;image appel\u00e9e (et non les dimensions de l&rsquo;image dans la page Web&#8230;)<\/em><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c En modifiant le nom des classes utilis\u00e9es, vous pouvez <strong>modifier l&rsquo;apparence de la grille du portfolio que vous souhaitez personnaliser<\/strong>. Attention, si vous passez d&rsquo;une division aux quarts \u00e0 une division aux tiers, il faudra supprimer une image dans la rang\u00e9e concern\u00e9e. Si vous r\u00e9alisez l&rsquo;op\u00e9ration inverse, n&rsquo;oubliez pas d&rsquo;ajouter une image.<\/p>\n\n\n\n<p>\u279c Notez bien que <strong>la disposition des images dans une grille est une chose distincte du comportement des images<\/strong> lorsque vous cliquez sur l&rsquo;une d&rsquo;elles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Aller_plus_loin_en_integrant_des_textures\"><\/span>Aller plus loin en int\u00e9grant des textures<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Je vous propose de personnaliser <strong>un gabarit de portfolio bas\u00e9 sur une navigation par l&rsquo;interm\u00e9diaire de cartes cliquables<\/strong>. Bas\u00e9 sur le gabarit Starter, cette version s&rsquo;en \u00e9loigne cependant par l&rsquo;ajout de nombreuses fonctionnalit\u00e9s dont des <strong>effets au survol<\/strong> (tr\u00e8s faciles \u00e0 mettre en \u0153uvre), cr\u00e9\u00e9s \u00e0 partir de la feuille de style <a rel=\"noreferrer noopener\" href=\"http:\/\/www.imagehover.io\/\" target=\"_blank\">imagehover.css<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex 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\" href=\"https:\/\/graphizm.fr\/w3css\/portfolio-cartes\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">VOIR LE GABARIT<\/a><\/div>\n<\/div>\n\n\n\n<p><strong>Ce gabarit int\u00e8gre de nombreuses textures<\/strong>, dans le but de vous montrer le potentiel de ce type de rendu graphique. Il est n\u00e9cessaire de faire un choix et de se limiter \u00e0 tel ou tel type de texture.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/w3css\/portfolio-cartes\/index.html\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css-1024x581.png\" alt=\"\" class=\"wp-image-5226\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css-1024x581.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css-600x341.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css-768x436.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css-1536x872.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css-1200x681.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/potfolio-cartes-w3css.png 1557w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>La page \u201cgalerie.html\u201d pr\u00e9sente de nombreuses mani\u00e8res d&rsquo;afficher des images<\/strong>, depuis la grille de cartes jusqu&rsquo;au diaporama actionn\u00e9 manuellement en passant par les images en onglets et les grilles de cellules.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/graphizm.fr\/w3css\/portfolio-cartes.zip\" style=\"border-radius:22px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger le GABARIT<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Les diff\u00e9rentes pages de ce gabarit peuvent servir de base \u00e0 de nombreux sites \u201cone page\u201d ou multipages. Exercez-vous en cr\u00e9ant <strong>des sites en compl\u00e9ment des affiches que vous r\u00e9alisez lors de la formation PAO-Tech<\/strong> (expo requin blanc, international jazz day, etc).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Aller_plus_loin_en_utilisant_Bootstrap\"><\/span>Aller plus loin en utilisant Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour \u00e9largir vos connaissances sur les grilles, je vous recommande la lecture du <a rel=\"noreferrer noopener\" href=\"https:\/\/iut-info.univ-reims.fr\/users\/nocent\/web\/?section=15\" target=\"_blank\">cours d&rsquo;Olivier Nocent sur les frameworks CSS<\/a>. Il y est question de <strong>Bootstrap, un autre framework CSS avec lequel sont construits de nombreux gabarits de portfolios<\/strong>. J&rsquo;ai optimis\u00e9 quelques templates r\u00e9alis\u00e9s avec Bootstrap. Je vous propose de les t\u00e9l\u00e9charger si vous souhaitez les utiliser.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link\" href=\"http:\/\/graphizm.fr\/w3css\/portfolios-Bootstrap.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les gabarits de portfolios BOOTSTRAP<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"http:\/\/comptetestfpw.alwaysdata.net\/freelancerPortfolio2-Bootstrap4\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/portfolio_Freelancer-1024x523.jpg\" alt=\"\" class=\"wp-image-1356\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/portfolio_Freelancer-1024x523.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/portfolio_Freelancer-600x306.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/portfolio_Freelancer-768x392.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/portfolio_Freelancer-1200x613.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/06\/portfolio_Freelancer.jpg 1389w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Personnalisation du gabarit Freelancer<\/figcaption><\/figure><\/div>\n\n\n\n<p>La syntaxe des classes de Bootstrap est moins intuitive que celle de w3.css mais <strong>avec l&rsquo;aide de la documentation en ligne<\/strong>, disponible sur <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/bootstrap4\/default.asp\" target=\"_blank\">w3shools.com<\/a>, vous devriez parvenir \u00e0 personnaliser ces gabarits comme vous le souhaitez.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Bootstrap n&rsquo;est pas au programme de la pr\u00e9paration au <strong>Titre Pro Infographiste Metteur en Page<\/strong> (niveau Bac). Par contre il est abord\u00e9, apr\u00e8s avoir vu W3.CSS, lors de la pr\u00e9paration au <strong>Titre Pro Designer Web<\/strong> (niveau BTS).<\/p>\n\n\n\n<p>Pour les plus curieux d&rsquo;entre les apprenants pr\u00e9parant le titre pro IMeP, n&rsquo;h\u00e9sitez pas \u00e0 vous lancer. Vous risquez juste de devoir ajouter une ligne de plus \u00e0 votre cv&#8230; ou augmenter le seuil de la barre de comp\u00e9tence \u201cDesign Web\u201d sur votre portfolio \ud83d\ude00<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c J&rsquo;ai propos\u00e9 aux stagiaires les plus avanc\u00e9s en webdesign de <strong>transformer le gabarit Bootstrap du portfolio ci-dessus (Freelancer) en gabarit W3.CSS<\/strong>. Le d\u00e9fi a \u00e9t\u00e9 relev\u00e9 et nous disposons aujourd&rsquo;hui d&rsquo;une partie de la structure de la page d&rsquo;accueil&#8230; Affaire \u00e0 suivre&nbsp;!<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours nous allons voir comment personnaliser un gabarit de portfolio mis au point \u00e0 l&rsquo;aide du framework w3.css. Les pr\u00e9requis sont les suivants&nbsp;: utiliser l&rsquo;\u00e9diteur de code Brackets identifier et modifier la structure HTML d&rsquo;un site identifier et modifier une feuille de style CSS r\u00e9diger des textes pour la publication en ligne collecter, [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,26],"tags":[],"class_list":["post-1196","post","type-post","status-publish","format-standard","hentry","category-w3css","category-w3css-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 personnaliser un gabarit de portfolio mis au point \u00e0 l&rsquo;aide du framework w3.css. Les pr\u00e9requis sont les suivants&nbsp;: utiliser l&rsquo;\u00e9diteur de code Bracketsidentifier et modifier la structure HTML d&rsquo;un siteidentifier et modifier une feuille de style CSSr\u00e9diger des textes pour la publication en lignecollecter, concevoir et traiter des images pour le Web Une partie de ce cours est un rappel des fonctionnalit\u00e9s de base de w3.css. Elles ont \u00e9t\u00e9 vues lors du cours intitul\u00e9 Se familiariser avec w3.css Sommaire Toggle T\u00e9l\u00e9charger les gabaritsLa structure d&rsquo;un portfolioEn savoir plusLes images de travauxLa pr\u00e9paration des\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/w3css\/\" rel=\"category tag\">W3CSS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/w3css\/w3css-cours\/\" rel=\"category tag\">W3CSS-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\/1196","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=1196"}],"version-history":[{"count":121,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1196\/revisions"}],"predecessor-version":[{"id":5232,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1196\/revisions\/5232"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=1196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=1196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=1196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}