Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

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

Mettre en page au niveau du dernier point d'arrêt

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Réorganisez la mise en page de votre site au niveau du troisième et dernier point d'arrêt. Ainsi, rendez votre site compatible avec les ordinateurs de bureau à écran large.

Transcription

Pour terminer ce chapitre nous allons passer à la mise en place des styles CSS du plan de travail Desktop Wide, qui a donc une largeur de 1480 pixels, et donc pour ce faire, nous allons le comparer au point d'arrêt précédent, qui est donc le point d'arrêt Desktop Narrow, et là nous constatons qu'il n'y a pas beaucoup de différences entre ces deux mises en page. En fait, il n'y en a même pas du tout, c'est tout simplement tous les éléments qui sont un petit peu plus larges dans le plan de travail Desktop Wide. Alors je vais directement aller tester ceci au niveau de mon navigateur. Donc voici le point d'arrêt à 1024 pixels pour voir le point d'arrêt à 1480 pixels, je vais prendre un zoom arrière ici dans Google Chrome, donc Ctrl ou Command + « moins » puisque j'ai un écran de 1280 pixels qui ne permet pas de voir naturellement le point d'arrêt à 1480 pixels. Alors me voici dans la disposition la plus large. Là, je remarque bien que globalement, ça fonctionne plus ou moins bien, Sauf le logo « DiDaXo » ici, au-dessus qui est trop grand, et puis j'ai également, vous le voyez, un petit peu perdu ici l'alignement des colonnes par rapport au titre qui se trouve juste au-dessus. Donc je vais aller modifier ces deux éléments au niveau de ma feuille de style, donc je me place ici, dans le fond, dans le point d'arrêt à 1480 pixels, et donc je vais m'adresser au niveau de mon Header dans l'élément Figure à l'image, l'image donc c'est le logo « DiDaXo » et je vais lui donner une largeur de 17.647 %, j'ai été rechercher cette valeur sur Gridinator, bien sûr, et puis, le second élément que je dois modifier, c'est dans la zone « Main Content » je vais m'adresser à la balise Article c'est-à-dire la colonne de gauche, et je vais un petit peu augmenter sa marge margin right, je vais mettre par exemple 25 pixels donc rappelez-vous, nous avions un petit peu plus tôt ici dans la mise en forme précédente, 15 pixels. Donc j'augmente un petit peu cette valeur, ici, dans le plus large point d'arrêt. Je sauvegarde, je reviens au niveau de mon navigateur, je rafraîchis ma page, et vous voyez maintenant que le logo « DiDaXo » est bien placé, et que j'ai récupéré l'alignement de mes colonnes, donc voilà ici, le point d'arrêt le plus large, qui est correctement mis en place, et donc, j'ai vous le voyez, correctement mis en place les trois points d'arrêt que mon designer m'avait demandé de mettre en place. Voici donc, pour l'aspect réactif de cette page.

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 !