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