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

Créer le code de la barre de navigation principale

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Réalisez le code HTML5 de la barre de navigation principale de vote site. Tenez compte des éléments devant apparaître dans les différents points d'arrêt.

Transcription

La deuxième grande zone de notre site, eh bien, c'est la barre de navigation. Alors là, il n'y a rien de particulier, vous voyez qu'il s'agit simplement d'une liste de cinq liens, comme on en recontre sur la plupart des sites, d'ailleurs. Alors, on va quand même aller voir ce qui se passe dans les autres mises en page, Donc ici, pour la mise en page un peu plus étroite, pas de problème, c'est exactement la même chose. Et puis au niveau de la tablette, alors là ça change, parce que vous voyez que ce menu n'est plus disponible. Alors à la place, on a ce gros bouton avec les barres, donc il faudra cliquer sur ce bouton pour révéler le menu. Donc, je devrai tenir compte de la présence de ce bouton, quand je créérai le code HTML. Je vais retourner dans mon éditeur de code, au niveau de Brackets, Alors pour mieux voir les choses, je vais prendre ici le header, et prendre la petite flèche pour la fermer, comme ça je ferme le header, ce qui me permet de me concentrer sur la zone suivante, la zone de navigation. Donc, j'ai besoin d'une liste de cinq liens. Donc une liste, c'est-à-dire une balise UL, et puis dans cette balise UL, je vais mettre des éléments de liste, c'est-à-dire des balises LI. Et dans ces éléments de liste, j'aurai à chaque fois des liens, donc une balise A ici, qui s'ouvre et qui se referme. Un lien qui va nulle part pour le moment, donc qui va vers DS comme ceci. Alors, j'ai besoin de cinq liens, donc je vais dupliquer ça cinq fois. Un, deux, trois, quatre, cinq, avec CTRL CMD, bien sûr. Et puis je vais écrire le texte de ces liens, donc, accueil pour le premier lien, voilà. Je vais écrire produit pour le second lien. Ici, ce sera log. Le suivant, ce sera support. Et la dernière page, ce sera à propos. Comme ceci. Alors maintenant je dois tenir compte, je vous le disais tout à l'heure, du code de l'icône, dont je vais avoir besoin sur la partie tablette, donc pour pouvoir cliquer dessus et révéler le menu. Pour ça, je vais utiliser un paragraphe, dans ce paragraphe je vais mettre un lien, puisque je dois rendre cela cliquable. Un lien qui, pour le moment, ira nulle part. Ici je vais avoir besoin également d'aller chercher une icône dans FontAwesome, donc je vais retourner rapidement sur FontAwesome, aller revoir mes icônes. Et dans le moteur de recherche je vais taper hamburger, c'est le nom qu'on donne à cet icône avec les barres. Vous voyez, j'ai trouvé sans problème mon icône hamburger ici, voilà. Je prends son code HTML, vous connaissez la technique maintenant. Je reviens dans Brackets, et je vais coller ici mon FontAwesome, à l'intérieur de mon paragraphe, et voilà, le code HTML de cette barre de lien. Rien de bien compliqué, c'est quelque chose de tout à fait classique, que l'on retrouve sur la plupart des sites.

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 !