Fenêtre Style des Lignes

Étape 4 - Pages > Commandes Barre d’Outils et Grille >

Fenêtre Style des Lignes

Previous pageReturn to chapter overviewNext page

Avec les commandes de cette fenêtre, que vous pouvez rappeler à l'aide du bouton Style des Lignes présent dans la barre d'outils de la Grille de mise en page proposée dans la fenêtre Création de la page, vous pouvez définir l'aspect graphique d'une Ligne, c'est-à-dire d'une bande horizontale occupée par un groupe d'Objets placés dans une Page.

La fenêtre Style des Lignes propose :

une Grille qui reprend la configuration de la Page telle qu'elle a été définie dans la fenêtre Création de la page ;
la liste des options disponibles.

Il suffit de sélectionner la Ligne sur laquelle vous souhaitez travailler et d'utiliser les options disponibles pour en définir l'aspect. La Ligne sélectionnée est colorée en bleu et le chiffre qui l'identifie est écrit en gras.

A côté de chaque Ligne une petite boule s'affiche pleine ou vide selon l'aspect de la Ligne (déjà défini ou pas).

Il est possible de relier entre elles plusieurs Lignes consécutives afin qu'elles aient le même aspect graphique. Parfois, selon la disposition des Objets sur la Grille ou bien leur ordre en cas de Site Adaptatif, certaines Lignes sont automatiquement unies. Pour plus d'informations, voir Comment travailler sur l'Aspect d'une Ligne.

Une fois que vous avez sélectionné la Ligne ou le groupe de Lignes sur lesquelles vous souhaitez travailler, vous pouvez continuer en définissant, tout d'abord, le type Arrière-plan que vous souhaitez configurer en choisissant entre :

Coloré : l'arrière-plan de la Ligne est coloré en teinte unie.

Bordure nuancée : l'arrière-plan de la Ligne est rempli par un gradient dont vous pouvez définir les couleurs de départ et de fin ainsi que la direction du dégradé.

Image : l'arrière plan de la Ligne est créé en important une image.

Liste des images : un diaporama où défilent les images les unes après les autres est configuré en arrière-plan de la Ligne.

Vidéo : une vidéo est utilisée en arrière-plan de la Ligne.

Plan : une Carte est utilisée en arrière-plan de la Ligne.

Selon le type d'Arrière-plan, vous pouvez agir sur différentes options de l'encadré Paramètres. Les options qui peuvent être disponibles sont :

Couleur  : permet de définir la couleur à utiliser pour remplir l'arrière-plan de la cellule.
Couleur initiale  / Couleur finale  : permettent d'indiquer les couleurs de départ et de fin à utiliser pour composer le dégradé.
Diffusion  : permet d'établir si la première ou la dernière couleur doit être prédominante dans le dégradé, en définissant l'espace (en %) à l'intérieur duquel doit avoir lieu la transition du premier au second.
Sens  : configure l’ouverture de l’angle qui définit l’orientation du dégradé.
Fichier local sur l'ordinateur  : 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  : permet d'indiquer 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 horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. En plus, il est possible de faire en sorte que l'image soit adaptée, autrement redimensionnée  de façon à couvrir tout l'arrière-plan.
Alignement  : spécifie comment l'image insérée comme arrière-plan doit être alignée par rapport à la zone occupée par la Ligne.
Ajouter... / Supprimer : permettent de créer la liste d’images à utiliser en arrière-plan de la Ligne, en ajoutant de nouveaux fichiers (en format .JPG, .GIF, .PNG) ou en supprimant les fichiers sélectionnés parmi ceux déjà insérés.

En cliquant sur le petit triangle présent sur le bouton Ajouter... vous pouvez afficher un sous-menu avec les éléments suivants : Ajouter une image... et Image depuis Bibliothèque en ligne....

Grâce à la fenêtre rappelée avec la commande Image depuis Bibliothèque en ligne... une collection de plus de 900 000 images libres de droits s'affiche, parmi lesquelles vous pouvez choisir avec simplicité celles que vous souhaitez importer.

Déplacer au-dessus / Déplacer en dessous : agissent sur l’ordre d’affichage des images déjà insérées dans la liste, en déplaçant vers le haut ou vers le bas l’image sélectionnée.
Affichage  : précise de quelle manière doit se produire la transition entre les images utilisées en arrière-plan de la Ligne. Vous pouvez choisir parmi les choix suivants :
Images en séquence temporelle : les images s’affichent les unes après les autres avec un effet de fondu. La transition a lieu après un intervalle prédéfini de 3 secondes.
Images en séquence en fonction du défilement : les images s’affichent les unes après les autres, sans aucun effet de transition. L’affichage dépend de la position du curseur de défilement de la page.
Images superposées entre elles : les images s’affichent toutes simultanément, les unes sur les autres. Dans ce cas, il convient d’utiliser un effet de parallaxe sur des images sauvegardées en format .PNG avec un effet de transparence.
Type de vidéo  : définit si pour la vidéo à configurer comme arrière-plan de la Ligne, vous devez utiliser un Fichier local sur l'ordinateur, un Fichier Internet ou un Vidéo de YouTube.
Fichier local sur l'ordinateur  / Fichier Internet / URL Vidéo YouTube  : proposés selon le Type de vidéo sélectionné, ces champs permettent de sélectionner le fichier vidéo à importer ou de saisir l'adresse URL où le fichier de la vidéo est déjà disponible en ligne.
Couverture  : spécifie une image d'aperçu à associer à la Vidéo. Dans ce cas également, 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.

L'image d'aperçu s'affiche avant la vidéo et disparaît avec un effet de fondu uniquement après le lancement de la vidéo. La configuration d'une image d'aperçu est donc particulièrement utile pour gérer l'affichage sur des dispositifs mobiles où le lancement de la vidéo n'est jamais automatique.

Adresse  : il s’agit de l'adresse qui doit s’afficher sur la Carte configurée comme arrière-plan de la Ligne.
Style  : spécifie la modalité d’affichage de la Carte, au choix entre Routier, Satellite, Hybride et Terrain.
Facteur de Zoom  : définit le facteur d’agrandissement avec lequel afficher la carte.
Opacité: définit le degré d'opacité de la couleur/de la nuance/de l'image de la vidéo/de la carte d'arrière-plan appliqué. Pour des valeurs proches de 0, l'opacité diminue et l'arrière-plan de la Ligne devient plus transparent, laissant voir l'arrière-plan de la Page.

Indépendamment du type d’Arrière-plan choisi, il est possible d’appliquer une Superposition, à savoir un filtre coloré, en définissant les paramètres suivants :

Couleur  : spécifie la couleur à utiliser pour créer le filtre à appliquer sur l’arrière-plan.
Opacité : définit le degré d’opacité de la couleur du filtre à appliquer. Pour des valeurs proches de 0, l'opacité diminue et le filtre devient plus transparent, laissant voir l'arrière-plan de la Page.
Activer transition de couleur : en activant cette option, la Superposition appliquée sur l'arrière-plan est animée. L'animation prévoit la transition en loop de la couleur initiale à la Couleur finale en passant, le cas échéant, par la Couleur intermédiaire .

Enfin, vous pouvez activer les Options suivantes :

Agrandir à la largeur de la fenêtre du Navigateur : l'aspect défini pour la Ligne n'est pas appliqué uniquement pour la largeur correspondant au contenu de la Page, mais s'étend sur toute la largeur de la fenêtre du Navigateur.
Effet : active l'effet parallaxe sur la Ligne sélectionnée. Le parallaxe est une technique visuelle qui, grâce au mouvement d'images à différentes vitesses et sous différentes perspectives, donne de la profondeur et de la richesse au design d'une Page Web, créant une illusion de 3D. Cet effet permet au Visiteur de vivre une expérience plus captivante lorsqu'il fait défiler les Pages d'un Site. Vous pouvez choisir parmi différents types de parallaxe : Parallaxe, Parallaxe inversé et Parallaxe fixe.

Étant donné qu'il est basé sur le mouvement d'images à différentes vitesses, l'effet parallaxe ne peut pas être activé si une couleur en teinte unie est configurée comme arrière-plan d'une Ligne.

 


Bonnes pratiques :

-

Comment travailler sur le Style des Lignes


Approfondissements :

-

Le Box Model dans WebSite X5