Comment et pourquoi configurer les Interruptions de Ligne

Bonnes pratiques > Étape 2 - Modèle > Comment créer un Site Web "Mobile-friendly"  > Comment créer un Site Web Adaptatif >

Comment et pourquoi configurer les Interruptions de Ligne

Previous pageReturn to chapter overviewNext page

À l'aide des commandes présentes dans la fenêtre Paramètres Adaptatifs il est possible de faire en sorte que chaque Page du Site puisse s'adapter aux différents dispositifs sur lesquels elle s'affichera, en définissant les modifications en fonction des points de rupture configurés.

En particulier, si vous travaillez avec l'édition Pro, dans cette fenêtre, vous pouvez, après avoir défini l'ordre des Objets et décidé quels Objets rendre non visibles, établir pour chaque point de rupture si et où configurer des Interruptions de Ligne.

L'Interruption de Ligne sert à faire en sorte qu'un Objet ou un Bloc d'Objets présent sur une ligne de la Grille de mise en page soit positionné sur une nouvelle ligne pour des définitions inférieures à celle du point de rupture sélectionné. Dans la pratique, configurer une Interruption de Ligne signifie insérer un "passage à la ligne" forcé.

Pour activer la modalité où il est possible d'insérer les Interruptions de Ligne, il suffit de cliquer sur le bouton Interruptions de Ligne. Une fois la modalité lancée, une bordure grise hachurée apparaît sur la Grille à tous les emplacements où il est possible d'insérer une Interruption de Ligne. Il suffit de cliquer sur l'un des traits pour insérer une Interruption de Ligne qui apparaîtra alors en rouge. Pour supprimer une Interruption de Ligne précédemment configurée, il suffit de cliquer une deuxième fois dessus. Une fois la configuration des Interruptions de Ligne terminée, il suffit de cliquer de nouveau sur le bouton Interruption de Ligne pour confirmer et sortir de la modalité.

Image 1. La Grille en mode Interruption de Ligne

Image 1. La Grille en mode Interruption de Ligne

Pour mieux comprendre le mécanisme, considérons l'image en exemple où, au point de rupture Bureau, des Interruptions de Ligne ont été configurées avant l'Objet 3 et après l'Objet 7 :

Image 2. Sructure pour le point de rupture Bureau

Image 2. Sructure pour le point de rupture Bureau

Notons que le symbole d'Interruption de Ligne reflète le classement configuré. De cette manière, on comprend mieux l'idée que, par exemple, l'Objet 7 sera placé au-dessus du Bloc des Objets 8, 9 et 10 du fait que l'ordre des Objets pour cette ligne va de droite à gauche.

Étant donné l'ordre configuré, les Interruptions de Ligne insérées et considérant le fait que l'Objet 2 a été rendu non visible, la structure de la Page au point de rupture suivant le point de rupture Bureau se présente comme suit :

Image 3. Structure pour le point de rupture successif au point de rupture Bureau

Image 3. Structure pour le point de rupture successif au point de rupture Bureau

Comme on peut le voir, l'absence de l'Objet 2, qui avait été rendu non visible, n'affecte en rien l'ordre des Objets qui reste inchangé. L'Interruption de Ligne force les Objets 3 et 4 à se placer sur la ligne 2 de la Grille, laissant l'Objet 1 occuper complètement la ligne 1. Sans l'Interruption de Ligne, les Objets 1, 3 et 4 auraient continué à se trouver côte-à-côte sur la ligne 1, occupant chacun 1/3 de l'espace disponible en largeur.

De la même manière, avec la deuxième Interruption de Ligne les Objets 8, 9 et 10 ne font plus partie d'un seul et même Bloc et sont placés sur de nouvelles lignes, en dessous de l'Objet 7.

Notons que, lorsqu'un Objet est placé sur plusieurs colonnes, au passage d'un point de rupture au à un autre, la proportion en largeur est maintenue. Dans l'Image 1 nous voyons par exemple qu'au point de rupture Bureau l'Objet 5 occupe 3 colonnes sur les 4 disponibles : cela signifie qu'il occupe en largeur 75% de la ligne. Cette proportion est conservée également au point de rupture suivant (image 3), même si les autres Objets alignés en largeur ne suivent pas la disposition précédente.

 


Bonnes pratiques :

-

Comment créer un Site Web "Mobile-friendly"

-

Comment créer un Site Web Adaptatif

-

Comment fonctionne le processus de classement des Objets