Lorsque l'on fait défiler une Page vers le bas, à partir d'un certain point, l'En-tête ne sera plus visible. En général, l’En-tête contient des éléments importants tels que le Logo, le Titre du Site, mais surtout le Menu de navigation principal. Pour permettre aux visiteurs du Site de toujours s’orienter au mieux, vous pouvez faire en sorte que ces éléments soient repris dans une barre qui, lorsque la page défile, reste toujours visible, ancrée à la partie supérieure de la fenêtre du Navigateur. Cette barre prend le nom de Barre Sticky et peut être personnalisée tant dans le contenu que dans le style graphique, à l’aide d’options spécifiques présentes dans les sections suivantes :
Si vous travaillez à la réalisation d’un Site adaptatif, vous pouvez travailler sur la Barre Sticky pour les Affichages correspondant aux différents points de rupture configurés. Dans ces cas, en effet, la fenêtre présente une Barre Adaptative qui reprend celle proposée dans la fenêtre Définitions et Conception Adaptative. La Barre Adaptative repropose tous les points de rupture configurés et, en fonction de ceux-ci, identifie des intervalles : il suffit de cliquer sur un intervalle pour le sélectionner et procéder à la définition des paramètres graphiques ou des contenus de la Barre Sticky.
Pour faire en sorte que, même quand l'en-tête n'est plus visible, une barre apparaisse encore avec le Menu, il suffit d'activer l'option Afficher une barre supérieure.
Une fois la Barre du Barre Sticky, son aspect peut être personnalisé à l'aide des options présentes dans la section Style :
| ▪ | Couleur d'arrière-plan : spécifie la couleur à utiliser comme remplissage d'arrière-plan. |
| ▪ | Fichier image : sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan. Vous pouvez rechercher l'image dans la Bibliothèque en ligne consultable à l'aide du bouton  ou dans les dossiers locaux avec le bouton  Sélection fichier. |
| ▪ | Disposition : spécifie si l'image insérée comme arrière-plan doit être répétée ou non. L'image peut être répétée en sens horizontal, en sens vertical ou dans les deux sens, afin d'occuper tout l'espace disponible. De plus, vous pouvez faire en sorte que l'image soit adaptée, c'est-à-dire redimensionnée afin de couvrir tout l'arrière-plan: dans ce cas, les proportions originales sont susceptibles de ne pas être respectées. |
| ▪ | Alignement : définit de quelle manière l'image doit être alignée par rapport à la Barre Sticky. |
| ▪ | Hauteur : indique la valeur en pixels de la hauteur de la Barre Sticky. |
| ▪ | Opacité : configure le niveau d’opacité de la couleur de l’arrière-plan de la Barre Sticky. Pour des valeurs proches de 0, l'opacité diminue et le filtre devient plus transparent, laissant voir les contenus de la Page. |
| ▪ | Agrandir à la largeur de la fenêtre du Navigateur: si elle est active, cette option fait en sorte que la Barre Sticky s'étende sur toute la largeur de la fenêtre du Navigateur et pas seulement sur la largeur des Contenus de la Page. |
|
Une fois l’aspect graphique défini, vous devez vous occuper des contenus de la Barre Sticky.
Pour composer la Barre Sticky, vous pouvez utiliser un éditeur graphique identique à celui qui est disponible pour le Modèle (fenêtre Contenu du Modèle). Cet éditeur présente une Barre d’Outils et, en dessous, une zone de travail qui reprend automatiquement l’image utilisée comme arrière-plan : l'image s’affiche à l’échelle 1:1 et, le cas échéant, peut défiler à l’aide de la barre de défilement horizontal prévue à cet effet. Sur cette image, toutes les modifications apportées à l’aide des commandes disponibles s’affichent en temps réel.
Immédiatement en dessous de l’image chargée se trouve une Barre d'État où figurent :
| ▪ | Position : affiche les coordonnées x et y qui déterminent la position de l’angle supérieur droit de l’Objet sélectionné, par rapport à la zone occupée par la Barre Sticky. |
| ▪ | Dimension : affiche la valeur exprimée en pixels de la largeur et de la hauteur de l’Objet sélectionné. |
Enfin, sous la Barre d'État figure la liste de tous les Objets que vous pouvez utiliser pour composer la Barre Sticky.
Les Objets sont les mêmes que pour composer les Pages (voir, Étape 4 - Pages): pour faciliter leur identification, ils sont organisés avec des filtres et chacun est présenté par un aperçu.
|
Dans la Sticky Bar, il convient d’indiquer les éléments principaux de l’En-tête et, avant tout, le logo de l’entreprise ou le titre du site, ainsi que le menu de navigation principal.
|
|
Bonnes pratiques :
