Des templates sont disponibles en ligne sur le site de w3schools.com. Vous les trouverez sur le page W3.CSS templates.
Le code source est disponible dans l’application Try-it. Il peut être copié et collé dans un éditeur de texte. Cependant, les liens vers les images des modèles seront rompus.
J’ai regroupé quelques templates en reconstituant les dossiers des sites en local. Utilisez ces modèles pour les personnaliser selon vos besoins;
Vous trouverez sur le site w3schools un template intégrant un très grand nombre de fonctionnalités mises en œuvre grâce aux classes de W3.CSS. Ce template utilise un thème coloré monochromatique.
➜ Trois thèmes chromatiques sont proposées sur le site, sur la base du même template :
Supprimez les fonctionnalités dont vous n’avez pas besoin et diversifiez vos pages pour créer des sites pleinement fonctionnels.
Utiliser les thèmes chromatiques de w3.css
Il est très facile de modifier la couleur principale du template en changeant l’appel du thème coloré dans l’entête de la page (appel du thème via un link dans le header.
Le site w3schools permet de sauvegarder sous forme de liens les tests et exercices réalisés dans le bac à sable Tryit. Cette page regroupe quelques exercices ou tests intéressants réalisés par les stagiaires en formation (… ou par moi-même). Ils sont classés par thèmes d’activité.
➜ L’un d’entre eux est désigné sous le nom de Starter. Il se trouve dans le dossier intitulé “site_starter_w3css”. Nous allons utiliser ce gabarit pour prendre en main un site multipages.
Insérer des photos à la place des icônes
En commençant par la page 3, je vous propose de remplacer les icônes intégrées initialement par des photographies collectées sur les sites pexels.com ou unsplash.com.
➜ Pour cela vous êtes invités à créer un dossier « img » et à placer dedans les images que vous avez collectées. Je vous laisse déterminer la taille (et le poids) des images à intégrer à la place des icônes 😉
Choisissez des image en harmonie avec le thème chromatique que vous avez choisi !
Exemple d’image intégrée dans la page 3
➜ Je vous recommande de mentionner la taille des images utilisées dans le nom de celles-ci. Pensez à dupliquer les images avant d’en modifier la taille ou le cadrage.
Pensez à utiliser les classes disponibles pour écarter le texte de la photographie ou la photographie du texte. Testez les classes w3-image et w3-padding sur l’élément <img>. La première classe force l’image à rester visible en totalité, quelle que soit la largeur de l’espace disponible.
Modifier la grille
En remplaçant les images par des photos, vous avez certainement constaté qu’elles n’avaient pas beaucoup de place pour exister sur le tiers de largeur accordée.
➜ Je vous propose d’opter pour w3-half plutôt que le 2 tiers + 1 tiers proposé par w3schools. Vous savez maintenant où insérer cette classe 😉
D’autres agencements sont possibles, avec des photos de proportions différentes. Je vous laisse l’initiative des tests.
Externaliser une partie des CSS
Si vous examinez ce qui est codé à partir de la ligne 20 du code source, sur chacune des pages HTML, vous allez constater que les mêmes instructions CSS internes se répètent d’une page à l’autre. D’autres instructions, par contre, sont différentes sur chaque page.
Je vous demande de copier les instructions identiques dans un nouveau fichier. Vous le paramètrerez en CSS et/ou vous l’enregistrerez dans le dossier « css » du site, en nommant ce fichier « style.css ». Il s’agira d’instructions venant contredire (ou compléter) les instructions du framework.
Attention : ne modifiez jamais le framework w3.css !
Quand, vous aurez fait cela, il devrait rester entre les balises <style> et </style> les seules instructions nécessaires pour personnaliser la tailles des icônes utilisées.
Optimiser l’appel des polices
Vous allez simplifier l’appel des polices (Lato et Monserrat) puis optimiser l’appel de la police Lato. Pour cela, supprimez du nouveau fichier CSS ce qui concerne la stylisation en Monserrat. Supprimez également l’appel de la police Monserrat dans le head du code source.
Allez ensuite sur Google Font et sélectionnez toutes les fontes de Lato. Récupérez le <link> dans la partie droite et insérez-le à la place du précédent. Inutile de copier le premier link (c’est du pistage de Google).
Vous pouvez maintenant utiliser toutes les graisses de la police Lato. Il suffit de spécifier dans « style.css » les éléments ou les classes qui doivent utiliser telle ou telle fonte.
➜ Par exemple, si vous voulez que les citations soient affichées en très maigre et en italique vous insérez ce code dans la feuille de style personnalisée :
Pour découvrir comment procéder, essayez de décortiquer le head du code source du site ci-dessus… et le head du site proposé par w3schools, nommé The cafe. Vous pouvez examinez aussi le head du gabarit (téléchargeable plus haut) et nommé site_simple_onepage_brasserie_w3css (ce site est une adaptation du template « The cafe »).
➜ C’est dans les styles personnalisés internes que tout se code (… pour le moment) car nous envisageons de changer de têtière sur chaque page.
Attention, regardez attentivement le code source, l’appel d’une image dans les css ne se fait pas avec src= »… » mais avec url(« … »). N’oubliez pas les guillemets dans les parenthèses !
Publier un contenu personnel ou préparer un site type
Vous disposez maintenant d’un gabarit de site Web multipages entièrement réactif. Vous maîtrisez l’usage de la grille réactive basée sur les quarts, les tiers et les moitiés, vous êtes donc capables de modifier la présentation des contenus de chaque page.
Je vous invite donc à créer, à partir de ce gabarit un site Web de 3 à 4 pages avec le contenu de votre choix.
➜ Si vous ne souhaitez pas finaliser un site particulier, faute de contenus à intégrer dans les pages, vous pouvez travailler avec du faux texte.
Je vous suggère de mettre en place un site type pour :
une association sportive
un club d’activité de loisirs
un groupe de musique
un artisan (menuisier, plombier, …)
un commerçant
etc.
➜ Soignez le choix des photos pour donner à votre site un look soigné. Utilisez les thèmes de couleurs disponibles et/ou les bibliothèques de couleurs proposées par w3schools.com.
Il vous sera facile de remplacer plus tard le faux texte par un contenu rédactionnel adapté. Vous pourrez ainsi proposer à moindre frais à d’éventuels clients et/ou amis la réalisation de sites simples et fonctionnels répondant à leurs besoins.
Mettez vos sites en ligne et transmettez-moi les liens via Slack 😉
Exemples de sites ou gabarits de sites réalisés dans le cadre de l’exercice proposé plus haut :
