Après la confusion étrange dans la dernière vidéo sur l'en-tête que nous faisions réellement, cette fois, nous allons vraiment implémenter l'en-tête personnalisé pour la page Deals! Celui-ci a été réalisé par Meg Hunt.
Comme tous les en-têtes, nous avons passé un certain temps à regarder les fichiers originaux et à déterminer comment cela allait le mieux se placer sur la page. Nous essayons quelques options, mais décidons finalement de le mettre dans une boîte confinée (par opposition à quelque chose comme l'en-tête Demos où l'en-tête se fond dans une bordure autour du contenu.
En l'exportant, nous jouons avec beaucoup de formats graphiques différents. Ce style particulier, intéressant, est à peu près égal en qualité et en taille de fichier entre PNG et JPG.webp. Nous le produisons à 2000px de large, ce qui devrait bien paraître sur n'importe quel écran. Nous avons également atteint environ 150k, ce qui est gros mais pour un graphique de héros comme celui-ci, c'est une cible OK.
Nous commençons à mettre en ordre le modèle pour les offres, notamment en examinant comment les offres sont chaque champ personnalisé individuel qui est randomisé avant d'être sorti. Nous passerons plus de temps sur ce balisage et tout cela plus tard, mais puisque nous sommes dans ce modèle pour préparer les choses pour l'en-tête, nous pourrions aussi bien le nettoyer.
Nous examinons plusieurs possibilités différentes pour mettre le graphique d'en-tête personnalisé sur la page. Une image d'arrière-plan a le plus de sens, car nous utilisons une sémantique
pour le remplacement du titre et de l'image. En utilisant background-size, nous vérifions cover, mais cela peut provoquer des coupures. Nous vérifions contenir, mais cela laisse de l'espace à l'extérieur. 100%fait l'affaire, mais nous devrons créer une boîte de style de rapport d'aspect pour que cela fonctionne bien. C'est facile cependant, nous faisons juste la hauteur 0 et utilisons un rembourrage supérieur en pourcentage pour que cela fonctionne (boîte rembourrée).
C'est le septième en-tête personnalisé que nous avons créé et chacun d'entre eux a été fait différemment. Conception de sites Web, hein? Quel voyage.