• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 07/06/2019

Intégrez vos éléments graphiques dans Bootstrap

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous allons maintenant conclure cette initiation au responsive design en intégrant tous les éléments graphiques de notre site, que j'ai soigneusement calés sur les éléments du gabarit Bootstrap. Et nous allons enfin pouvoir admirer le résultat !

Intégrez vos éléments graphiques

Pour pouvoir adapter les éléments graphiques du gabarit Bootstrap utilisé, il suffit de repérer le dossier "images" et d'y ajouter toutes vos images précédemment exportées depuis Photoshop.

Le dossier
Le dossier "images" va nous permettre de remplacer rapidement tous les éléments graphiques du gabarit

Vous voyez qu'il contient essentiellement des photos... Car concernant les éléments d'interfaces comme les boutons, Boostrap est capable de les "dessiner" automatiquement en CSS !
Du coup je n'ai pas eu besoin d'exporter mes boutons et menus depuis Photoshop. :p

Au préalable, lors de la phase précédente d'exportation de mes éléments, j'ai bien fait attention aux images dont j'avais besoin dans le dossier "images" du gabarit. Je n'ai donc, dans le cas présent, plus qu'à glisser mes images dans ce dossier "images", ce qui écrasera les précédentes.

Voyons voir le résultat dans un navigateur :

Hum..Ce n'est pas tout à fait ça
Hum.. Ce n'est pas encore tout à fait ça...

Comme vous pouvez le voir nous sommes pour l'instant sur un mix hybride entre ma maquette et le thème du template de base. Pas de panique ! Il y a une solution pour remédier à cela. Mais il va falloir rentrer dans le code.

Code rules the web

Afin de personnaliser encore plus ce template, pour lui donner notamment les belles tonalités orangées de notre maquette, je vais à présent devoir rentrer dans le code et modifier le fichier "index.html" ainsi que le fichier "style.css" présent dans le dossier "css".

Pour cela je vais utiliser un éditeur de texte qui gère le html et le css. Il sont nombreux (n'importe quel éditeur de texte peut en fait ouvrir un fichier html !) mais les plus connus parmi eux sont :

Pour ma part, étant abonné à la suite de Adobe, je vais ici utiliser Code Inspect. Mais vous pouvez bien sûr utiliser celui que vous souhaitez, ou celui dont vous avez déjà l'habitude.

Le fait de manipuler le code sera une bonne occasion pour comprendre comment fonctionne Bootstrap. Plus vous parcourerez et vous vous approprierez ce code, plus vous comprendrez la logique sous-jacente de Bootstrap. Je vous encourage donc vivement à travailler en profondeur sur ce joli thème, qui offre déjà de nombreuses possibilités !

Pour ma part, je vais faire les modifications nécessaires pour que notre site ressemble enfin à notre maquette.

Pour cela, je vais commencer par ouvrir le fichier "index.html" et le fichier "style.css" dans Code Inspect.

Le fichier index.html
Le fichier index.html
Le fichier style.css
Le fichier style.css
  • Dans le fichier "index.html", je vais pouvoir modifier le contenu du site (notamment tout le texte dans notre cas). Je peux aussi modifier le nombre de blocs ou "container" au sein de ma grille Bootstrap : cela veut dire que j'ai totalement la main sur la mise en page de mon site ! (Je peux ajouter ou supprimer des sections entières, des éléments, etc.)

  • Dans le fichier "style.css", je vais pouvoir changer les attributs de textes, de polices de caractère, de couleurs et de taille de certains éléments.

Commencer à changer le code

Je vais m'attaquer à la première partie du site pour changer ce que j'ai entouré en rouge sur le schéma ci-dessous.

Les modifications
Les modifications que je vais faire

Le contenu

  • Je vais d'abord enlever le texte "Worthy ...." qui apparait sous le logo.

  • Je vais ensuite changer le nom des rubriques et en supprimer quelques unes qui ne nous sont pas utiles pour un site photo.

  • Enfin, je vais modifier le texte titre du milieu.

Le logo

Si je commence par le logo, je vais procéder ainsi sur "index.html" avec Code Inspect :

  • Je vais chercher la commande "Rechercher" dans le menu "Modifier" > "Rechercher" (ou ctrl+f / cmd+f). Vous avez sûrement la même fonction sur votre propre éditeur !

  • Pour trouver les lignes de code correspondant au texte que je souhaite supprimer, je vais taper une partie de ce texte : "Worthly". Je me retrouve avec 9 résultats, et l'un d'eux m'emmène à l'endroit souhaité, ligne 60 :

<!-- name-and-slogan -->
<div class="site-name-and-slogan smooth-scroll">
<div class="site-name"><a href="#banner">Worthy</a></div>
<div class="site-slogan">Free Bootstrap Theme by <a target="_blank" href="http://htmlcoder.me">HtmlCoder</a></div>
</div>

Je peux à présent supprimer le texte pour avoir :

<!-- name-and-slogan -->
<div class="site-name-and-slogan smooth-scroll">
<div class="site-name"><a href="#banner"></a></div>

Je peux tout de suite enregistrer et observer le résultat en ouvrant à nouveau (ou en actualisant) le fichier "index.html" dans mon navigateur !

La barre de navigation est plus dégagée
La barre de navigation est maintenant plus dégagée !

Les rubriques

Ce gabarit me propose 6 rubriques, mais 4 me suffisent. Qu'à cela ne tienne, je n'ai qu'à supprimer celles dont je n'ai pas besoin dans le code... A commencer par le menu.

Je peux procéder de la même façon que pour le logo : rechercher dans le code le mot "Home" par exemple, puis identifier les lignes de code correspondant au menu.

<li class="active"><a href="#banner">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#clients">Clients</a></li>
<li><a href="#contact">Contact</a></li>

Je vais supprimer et changer certains éléments pour avoir :

<li><a href="#about">Introduction</a></li>
<li><a href="#services">Carnet de voyages</a></li>
<li><a href="#portfolio">Galerie</a></li>
<li><a href="#contact">Contact</a></li>
Mes rubriques sont enfin posées!
Mes rubriques sont enfin posées !
Le titre

Je vais à présent changer le texte central. En recherchant les mots "We are Worthy", je tombe directement sur la ligne 97 :

<h1 class="text-center">We are <span>Worthy</span></h1>
<p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos debitis provident nulla illum minus enim praesentium repellendus ullam cupiditate reiciendis optio voluptatem, recusandae nobis quis aperiam, sapiente libero ut at.</p>

Et je peux donc le remplacer par le texte que je souhaite :

<h1 class="text-center"><span>Les temples d'Angkor</span></h1>
<p class="lead text-center">Le site photo de mon voyage au Cambodge</p>
Mon site commence à ressembler à ma maquette
Mon site commence à ressembler à ma maquette

Mais mon logo se sent un peu tout seul en orange... Je vais donc m'attaquer au style !

Le style

Pour modifier le style, je vais essentiellement travailler sur le fichier "style.css" (contenu dans le dossier "css" du gabarit).

Je vais rapidement pouvoir faire en sorte d'avoir en dominante le orange avec la référence hexadécimale de la couleur utilisée pour mon logo : #ff6633. 

Comment peux-tu identifier la référence hexadécimale d'une couleur sous Photoshop ?

Voici comment je procède :

Les étapes sous Photoshop pour trouver la couleur hexadécimal d'un élément
Les étapes sous Photoshop pour trouver la référence hexadécimale d'un élément
  1. Je choisis l'outil "pipette" dans la barre d'outils. 

  2. Avec la pipette, je vais cliquer sur la couleur orange de l'un de mes éléments comme le "L" du titre par exemple, qui a le même orange que mon logo.

  3. Je vais ensuite double-cliquer sur la couleur de 1er plan (le carré orange) dans la barre d'outils pour afficher la fenêtre de sélecteur de couleurs.

Le sélécteur de couleur
Le sélécteur de couleur

... Je n'ai plus qu'a copier la référence hexadécimale fournie par Photoshop. :)

Le bleu actuel du template a pour code : #55acee. Je vais donc pouvoir rechercher où cette couleur est utilisée dans la feuille de style, et la remplacer à chaque fois par ma référence !

Mais comment as-tu fait pour trouver la référence utilisée dans le template cette fois ?!

J'ai retrouvé la référence de ce bleu directement depuis Chrome :

  • Je sélectionne le texte bleu dans le navigateur et avec un clic droit, je "procède à l'inspection de cet élément".

L'inspecteur des éléments dans Chrome
L'inspecteur des éléments dans Chrome
  • L'inspecteur des éléments s'affiche et je peux ainsi fouiller dans le code et voir à droite la référence hexadécimale du bleu en question.

Dans mon fichier "style.css", je peux maintenant retrouver tous les endroits où cette couleur est utilisée et la remplacer à chaque fois par le code de ma propre couleur. 

Ca y'est je retrouve mon orange :)
Ouf, j'ai retrouvé mon orange :)

Vous l'aurez compris, vous pouvez de cette façon effectuer les modifications nécessaires pour rendre le site le plus fidèle possible à nos maquettes. Cela nécessite de bien parcourir les fichiers HTML et CSS et ça peut sembler assez compliqué au début, mais c'est plus accessible qu'il n'y parait.

Si vous souhaitez voir le résultat auquel on peut parvenir, je vous propose à présent de télécharger mon gabarit entièrement modifié. Ouvrez le nouveau fichier "index.html" dans votre navigateur et admirez le résultat !

>> Télécharger le gabarit complet du site Virak Cool Trip

Nous avons maintenant un prototype fonctionnel de notre site responsive ! Grâce à l'utilisation de gabarits pour le code (basés sur le framework Bootstrap), cette étape reste relativement accessible, même sans des connaissances poussées en code. Mais pour développer ensuite de véritables sites originaux (et pouvoir ainsi laisser libre cours à toute votre créativité sur vos maquettes), vous aurez besoin d'un vrai spécialiste du code. Ou d'en devenir un vous-même. ;) 

Je vous remercie de m'avoir suivi durant toute cette aventure ! J'espère qu'elle vous aura définitivement convaincu d'adopter ce standard du web qu'est le responsive design.

À vous les joies de la conception web : n'hésitez pas à m'envoyer vos belles créations et à les partager sur le forum !

Pour aller plus loin

Si vous souhaitez aller plus loin sur le fonctionnement de Bootstrap et lancer votre site responsive sur la toile à partir de vos propres maquette originales, je vous conseille de suivre le cours "Prenez en main Bootstrap" de Maurice Chavelli. Vous apprendrez à coder correctement vos propres structures et découvrirez les possibilités nombreuses de ce framework !

Pour compléter ce cours, vous pouvez également retrouver l'ebook "Projet responsive web design - Du recueil des besoins à la mise en ligne" des éditions Eyrolles.

Exemple de certificat de réussite
Exemple de certificat de réussite