Modèles de site web
Quatre modèles de ce qui peut être réalisé sur les sites web des portails et des collections sont accessibles sur les liens suivants :
Ils recensent les différents modèles de pages, d’en-tête et de pied de page et illustrent l’utilisation de la feuille de styles CSS commentée dans un guide dédié.
Informations générales
La construction de l’en-tête varie en fonction du degré de personnalisation choisi.
Insertion d’un bandeau via la feuille de styles CSS en une seule image
Dans ce cas, la hauteur de l’en-tête doit rester fixe car ce dernier n’a pas de descendants dans l’arborescence HTML. Vous n’avez pas à télécharger vos fichiers via l’espace Site Web/En-tête.
Exemple d’en-tête : portail HAL ANR
.site-header { /* Sélecteur correspondant à l'en-tête du site */ /* Hauteur */ height: 200px; /* Hauteur minimale */ min-height: auto; /* Image de fond (URL au format /public/<nom du fichier> ou <nom du fichier>) et dégradé de fond */ background-image: url(/public/Visuel_portail_HAL_ANR_1920x200_transparent.png), radial-gradient(circle at center, #0c193d 1%, #0c193d 2%, #010203 100%); /* Répétition de l'image de fond */ background-repeat: no-repeat; /* Position de l'image de fond */ background-position: center center; /* Taille de l'image de fond */ background-size: contain; }

Insertion d’un fond abstrait via la feuille de styles CSS
Pour la même raison que dans le cas précédent, la hauteur de l’en-tête doit être fixe.
Exemple d’en-tête : portail HAL Pasteur
.site-header { /* Sélecteur correspondant à l'en-tête du site */ /* Marges */ margin: 80px 0 0 0; /* Hauteur */ height: 300px; /* Hauteur minimale */ min-height: auto; /* Image de fond : URL au format /public/<nom du fichier> ou <nom du fichier> */ background-image: url(/public/institutpasteur_53405.jpg); /* Répétition de l'image de fond */ background-repeat: no-repeat; /* Position de l'image de fond */ background-position: center center; /* Taille de l'image de fond */ background-size: cover; /* Couleur de fond */ background-color: #000000; }
Vous pouvez utiliser les requêtes @media afin de modifier les dimensions de l’image et/ou en télécharger une autre.
/* La règle est appliquée à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 815px */
@media (max-width: 815px) {
.site-header {
background-size: contain;
}
}

Insertion de texte et d’images via Site Web/En-tête
Par défaut, les éléments sont ajoutés dans une table HTML, ce code est non modifiable.

Si la hauteur de l’en-tête est fixe et dépasse celle des éléments descendants, il faut penser à les centrer verticalement.
.site-header .section-corps,
.site-header table {
/* Hauteur */
height: 100%;
}
La hauteur de l’en-tête peut également être automatique, elle s’adaptera à la hauteur du plus grand des éléments.
Exemple d’en-tête : collection HAL ARCHAM
.site-header { /* Sélecteur correspondant à l'en-tête du site */ /* Hauteur */ height: auto; /* Hauteur minimale */ min-height: auto; }

Insertion d’un bandeau via Site Web/En-tête en une seule image
Cela permet d’adapter la hauteur de l’en-tête aux dimensions du bandeau en rendant son hauteur automatique.
Exemple d’en-tête : portail HAL Mines Alès
.site-header { /* Sélecteur correspondant à l'en-tête du site */ /* Hauteur */ height: auto; /* Hauteur minimale */ min-height: auto; }

Cette approche est également illustrée dans l’en-tête du modèle de site web n°1.

Autres exemples
Cette section regroupe les différentes recettes.
Ajout du crédit dans l’en-tête
Exemple : portail HAL Pasteur
.site-header { /* Sélecteur correspondant à l'en-tête du site */ /* Permet de positionner le crédit par rapport à l'en-tête */ position: relative; } .site-header::before { /* Pseudo-élément correspondant au crédit */ /* Contenu */ content: 'Crédit : Institut Pasteur / Roberto José Toro Olmedo'; /* Type d'affichage */ display: block; /* Position */ position: absolute; /* Emplacement vertical */ bottom: 0; /* Emplacement horizontal */ right: 2rem; /* Taille de police */ font-size: 0.8rem; /* Hauteur de la boîte d'une ligne */ line-height: 3; /* Couleur du texte */ color: #ffffff; /* Curseur */ cursor: default; }

Division du fond en deux moitiés
Grâce aux pseudo-éléments, il est possible de créer un fond divisé en deux parties. Cela permet notamment de prolonger les bandeaux dont la couleur de fond est solide.
Exemple : portail HAL Mines Alès
Le z-ordre de l’image doit être supérieur à celui du fond défini via les pseudo-éléments.
.site-header img { /* Sélecteur correspondant à l'image */ /* Position de l'image */ position: relative; /* Z-ordre de l'image */ z-index : 6; }

Première moitié du fond.
.site-header::before { /* Pseudo-élément correspondant à la première moitié du fond */ /* Type d'affichage */ content: ""; /* Position */ position: absolute; /* Emplacement vertical */ top: 0; /* Emplacement horizontal */ right: 50%; /* Type d'affichage */ display: block; /* Largeur */ width: 50%; /* Hauteur */ height: 100%; /* Couleur de fond */ background-color: #01b4d5; /* Z-ordre : doit être inférieur à celui de l'image */ z-index: 5; }

Deuxième moitié du fond.
.site-header::after { /* Pseudo-élément correspondant à la deuxième moitié du fond */ /* Type d'affichage */ content: ""; /* Position */ position: absolute; /* Emplacement vertical */ top: 0; /* Emplacement horizontal */ left: 50%; /* Type d'affichage */ display: block; /* Largeur */ width: 50%; /* Hauteur */ height: 100%; /* Couleur de fond */ background-color: #e6007e; /* Z-ordre : doit être inférieur à celui de l'image */ z-index: 5; }

Date de dernière mise à jour : 2023-01