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 forme la barre de navigation principale

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Passez brièvement en revue les styles utilisés pour mettre en forme la barre de navigation principale du site.

Transcription

Dans cette vidéo nous allons mettre en place, la barre de navigation principale du site. Retournons dans le code HTML, pour se rappeler du code HTML justement de cette barre de navigation, donc ça commence par un paragraphe qui est ici, et qui contient l'icône dont on se servira sur la tablette, pour afficher ou masquer ce menu. Alors, la barre de lien en elle-même, la voici. C'est tout simplement une liste d'éléments, et dans chacun de ces éléments, j'ai un lien, donc c'est quelque chose de tout à fait classique. Alors au niveau de la feuille de style, eh bien vous voyez ici que j'ai déjà prévue une série de sélecteurs CSS, pour ces différents éléments. Je vous propose d'arrêter quelques instants la vidéo, et de recopier à votre aise ces éléments dans votre feuille de style. Alors, je vais revenir maintenant au niveau de Photoshop. Et vous remarquez qu'au niveau de la tablette, la barre de liens se limite à bien peu de chose, ma foi, puisqu'elle n'est pas présente sur l'écran. Et donc, j'ai que cette icône qui est ici, à droite de l'écran. Donc au niveau de ma feuille de style CSS, je vais tout simplement dire ici à mon paragraphe, textline = right Je sauvegarde, je reviens dans mon navigateur, je refraîchis ma page, et là, vous voyez que ça ne marche pas, puisque cette icône reste alignée à gauche. Alors pourquoi cela ne marche-t-il pas ? Eh bien parce que précédemment dans notre formation eh bien, nous avons été définir pour les boutons qui se trouvent ici, une apparence en block, display : block. Eh bien c'est ça qui empêche l'alignement correct de cette icône. Donc je vais changer ceci en inline block. Et maintenant que je reviens dans le navigateur, vous voyez que le bouton se met correctement à droite de son élément. Maintenant vous voyez que ce bouton touche le dessus de cette zone de navigation le dessus de la zone gris foncé, et ça, c'est pas très joli, surtout que dans Photoshop, vous remarquez que ce bouton, ne touche pas le dessus de cette zone de navigation. Je vais prendre mon outil zoom dans Photoshop, pour aller zoomer ici, et définir la distance qu'il y a, entre cet élément et les bords de la zone de navigation, les bords de son conteneur donc. Alors, vous connaissez déjà une première technique pour faire ça, c'est l'outil règle qui se trouve ici, et il est caché en dessous de l'outil règle, cet outil pipette. Alors je vais vous montrer une seconde technique pour faire la même chose, c'est beaucoup plus pratique je pense. Je vais prendre ici l'outil déplacement de Photoshop, je vais venir sélectionner cette icône, vous voyez que du coup, j'ai sélectionner le calque, qui correspond à cette icône, ici dans le panneau des calques. Et maintenant, je vais tout simplement pousser sous le bouton CMD de mon clavier, ou CTRL sur PC. Donc simplement en sélectionnant cet élément, et en passent sur les autres éléments qui sont voisins, eh bien, Photoshop va m'indiquer la distance entre l'élément sélectionné, et l'élément que je survole avec ma souris. Là, vous voyez que j'ai 12 pixels au dessus, 20 pixels sur le côté, 18 pixels sur le bas, alors on va faire simple, on va dire 20 pixels pour tout le monde. Donc je vais revenir au niveau de ma feuille de style CSS. Et je vais changer une petite chose au niveau de ma barre de navigation, et ici sur mon conteneur mainNav, je vais simplement lui mettre 20 pixels de padding, partout, comme ceci. Et donc vous allez voir que j'ai un écart de 20 pixels ici au dessus, et également un écart de 20 pixels dans le fond après le dernier lien. Pour ce qui est des liens en tant que tels, eh bien là, quand je retourne dans Photoshop, je n'ai pas d'informations au niveau de ma mise en page pour tablette, donc je vais aller voir sur la mise en page précédente, pour avoir certaines informations au niveau de mes liens, voilà qui est fait. J'ai envie d'avoir des informations au niveau de leur typographie, donc je vais prendre l'outil texte de Photoshop, me placer dans l'un de ces liens. Ils utilisent la police Oxygen, qui nous vient des GoogleFonts. Et ils ont une taille de 24 points. Donc ça, je vais aller leur mettre déjà au niveau de ma feuille de style ici. Donc, j'utilise une Font Family qui est Oxygen. Alors, je vais aller la rechercher au dessus, pour ne pas faire de fautes de frappe. Ici donc Oxygen, et rappelez-vous des instructions de notre designer, si Oxygen n'est pas disponible, on peut utiliser Verdana. Et si ni Oxygen, ni Verdana ne sont disponibles, je prends la police sans sérif par défaut du système. Je vais également définir une Font size, de 24 points, comme ceci. Alors, je reviens dans mon navigateur. Vous voyez que mes boutons commencent à prendre forme. Alors, de retour dans Photoshop, je vais définir l'effet de survol ici sur ces boutons. Voilà, je me place avec mon outil texte de Photoshop ici, vous voyez que je suis toujours en Oxygen 24 points, c'est juste la couleur ici qui a changé. Et ça correspond à la couleur bleu clair, donc, de ma palette de couleurs. J'ai également le soulignement qui est ici, alors pour ça je vais prendre mon zoom, venir sélectionner cette petite ligne, appuyer sur CMD T ou CTRL T sur PC, pour voir ici au dessus que cette petite ligne fait 5 pixels de hauteur. Donc, je vais mettre ça en place maintenant dans ma feuille de style, je reviens donc au niveau de mon éditeur de code. Et donc ici, je vais mettre une couleur à ces éléments qui correspond au bleu clair à ma palette de couleurs, comme ceci. Alors, ça se situe là, voilà. Et puis au niveau de la bordure, donc je vais avoir une border bottom solid de 5 pixels. Eh bien de même couleur, comme ceci. Alors ici, je vais revenir au niveau de mon navigateur, rafraîchir ma page et voici mon effet de survol. Alors, vous voyez que j'ai un petit problème avec ce soulignement, puisque je n'ai pas assez d'écart entre mes différents éléments. Donc là, dans mon fichier Photoshop, je n'ai pas beaucoup d'informations, à ce niveau là, puisqu'au niveau de ma tablette, ces éléments là seront mis les uns au dessus des autres, et non pas les uns à côté des autres, ça sera un menu vertical. Donc, à moins de trouver ici une valeur qui correspond bien, qui soit esthétique, là, je vais m'adresser aux LI qui sont ici, et je vais leur mettre une marge à ces LI. On va dire par exempple 20 pixels, on va voir ce que ça donne avec 20 pixels. Voilà. On va dire que c'est pas mal. Comme ça sur la tablette, quand on aura un gros doigt qui viendra pousser là dessus, on pourra bien faire la différence entre les différents liens. Tout ça est correct, et donc ici pour achever la mise en forme de la tablette, eh bien, je retourne dans mon éditeur de code. Et je vais décider de cacher cet élément UL par défaut, donc display non, dans ce cas-ci. Et donc, quand je reviens maintenant au niveau de mon navigateur, eh bien voilà la part de liens telle qu'elle apparaîtra par défaut, sur la mise en fome tablette.

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 !