Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Importer les Google Fonts

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Importez dans votre feuille de style les polices de caractère nécessaires à la réalisation de votre page web.

Transcription

Une autre composante essentielle de la recherche graphique réalisée par notre designer, c'est une recherche au niveau de la typographie et des polices de caractère à utiliser. Rappelez-vous que plus tôt dans ce cours, le designer nous avait donner pour instruction d'aller rechercher deux polices de caractère qui se trouvent dans la bibliothèque de polices en ligne de Google. Alors, je vais me rendre sur le site de Google fonts, fonts.google.com, et je vais partir à nouveau à la recherche de ces deux polices. La première d'entre elles s'appellait Oxygen, donc, je vais faire une petite recherche sur cette police de caractère. Je la retrouve ici sans problème. Et je vais cliquer sur le petit +, ici, pour sélectionner cette police de caractère. La seconde s'appellait Raleway. Voilà, je la retrouve également sans aucun problème. Je clique également sur le petit +, ici, pour la sélectionner. Et donc, j'ai deux familles de polices de caractère qui sont maintenant sélectionnées ici sur Google fonts. Alors, je vais cliquer sur cette petite mention, ici dans le fond, deux familles sélectionnées. Plus tôt dans ce cours, nous avions cliqué sur la petite flèche qui descend ici, pour télécharger les polices de caractère sur notre système et les installer. Mais ici, la problèmatique est tout à fait différente puisqu'il s'agit de rendre ces polices de caractère disponibles pour tous les internautes qui viendront visiter notre page. Même si ces internautes n'ont pas eux-même téléchargé ces polices de caractère et ne les ont pas eux-même installées sur leur propre système. Pour ça, j'ai plusieurs techniques. La technique standard qui est exposée ici, dans le fond. C'est tout simplement une balise link que je peux copier/coller dans mon code html, qui va charger, vous voyez, une feuille de style qui est hébergée sur les serveurs de Google. L'autre technique consiste à utiliser la directive inport du css et ça, c'est quelque chose que vous devrez copier/coller dans votre code css. C'est ce que je vais faire. Donc, je vais prendre ce petit code ici. Le copier. Et venir le coller dans ma feuille de style. Donc, un petit commentaire pour me souvenir de quoi il s'agit. Donc, importer les Google fonts. Comme ceci. Et je vais donc simplement coller cette petite directive @import. Et vous voyez que ça va rechercher les polices de caractère en question via une feuille de style css qui se trouve donc hébergée sur le serveur de Google. Évidemment, pour pouvoir profiter de cela, vous devez être connecté à internet pendant le développement de votre site. Mais quand les visiteurs viendront visiter votgre site internet en ligne, ils seront connectés et pourront donc aller rechercher ces polices de caractère directemment sur les serveurs de Google même s'ils n'ont pas installé ces polices de caractère sur leur système.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !