Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

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

Comprendre le travail à réaliser

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
En plus du fichier Photoshop, le designer vous a laissé une série d'instructions et de recommandations. Vous allez en prendre connaissance ici.

Transcription

Afin de bien comprendre le travail que nous avons à réaliser, eh bien très souvent, les designers ne se contentent pas de nous envoyer leurs fichiers photoshop, ils nous envoient également des instructions. Ils nous communiquent ces instructions soit dans un email, ou dans un fichier PDF attaché à un email, ou peu importe finalement la méthode. Dans ce cas-ci, le desginer nous demande d'intégrer son fichier Photoshop, en utilisant le responsive design, ou le design adaptatif. Et il nous demande pour ça de faire trois points d'arrêt. Un premier point d'arrêt qui sera situé à 768 pixels et qui sera fluide. Un second point d'arrêt à 1024 pixels et qui sera de lageur fixe, et puis un dernier point d'arrêt à 1480 pixels et qui sera aussi de largeur fixe. Nous discuterons plus tard dans le cours, de ce qu'est un point d'arrêt à largeur fluide ou fixe. Alors, au niveau des polices de caractère, on en a d'ailleurs déjà parlé un petit peu plus tôt dans ce chapitre, Nous allons utiliser la police de caractères Oxygen pour les titres. Nous allons utiliser Raleway pour le corps de texte, c'est de nouveau le designer qui nous donne ces instructions. Et il nous précise également que Oxygen et Raleway sont des Google Fonts. Nous allons donc devoir nous rendre sur la bibliothèque de polices de caractère de Google, et intégrer cette police de caractère dans notre site. Si pour une raison quelconque ces polices de caractères ne sont pas disponibles, par exemple, dans le cas d'un plus vieux navigateur qui ne supporterait pas les polices en ligne, Eh bien dans ce cas-là, le designer nous autorise à substituer ces polices, par du Verdana, ou par la police sans sérif par défaut du système. Le designer nous informe aussi, que les icônes proviennent de la police de caractère Font-Awesome. Alors au niveau du menu de navigation, nous avons également là quelques instructions. Donc, ce menu doit disparaitre dans le point d'arrêt le plus étroit, et dans ce cas-là, il est remplacé par un menu vertical escamotable. Ce menu vertical escamotable doit avoir la même mise en forme que le menu horizontal. Tant mieux, ça facilitera notre travail. Et, il doit se superposer à la page une fois ouvert. Alors, si quelque chose n'est pas clair, ou si vous avez besoin d'une information complémentaire, n'hésitez pas à contacter le designer et à lui poser la question, en effet, le designer et l'intégrateur sont supposés travailler ensemble, pour la réussite du projet web. Et donc, n'hésitez pas à contacter votre designer et lui poser toutes vos questions. Voilà, nous avons maintenant l'ensemble des instructions à notre disposition, et nous sommes prêts à commencer notre travail d'intégration.

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)
Excellente formation
Yann D.
Des bons conseils, découverte d'outils comme Gridinator et un orateur qui donne des bons conseils. Même si on connait le HTML5 et CSS, c'est toujours bon de faire une petite révision
 

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 !