|
|
|
|
|
|
|
|
|
|
- Présentation
- Manipulation des tranches
- Création d'une tranche
- Suppression d'une tranche
- Description d'une tranche
- Manipulation des champs dans les tranches
- Personnalisation par tranche
- Des surcharges supplémentaires : champ Image et champ Menu
- Masquage des champs par tranche
- Liste des paramètres des champs mémorisés par tranche
Responsive Web Design : Gestion des tranches
 Avertissement
En version 28, le mode d'édition des pages initialement appelé "Responsive Web Design : mise en page par tranche" devient "Tranches (Responsive historique pour compatibilité)". Le mode "Responsive (zoning et agencements)" devient le mode recommandé pour les nouvelles créations. Pour plus de détails, consultez Changement du mode d'édition des sites mobile friendly. Cette page de documentation est adaptée aux nouvelles options de la version 28.
Sous l'éditeur WEBDEV, la représentation des différentes résolutions possibles se fait à l'aide de tranches. Une tranche représente un taille de navigateur pour un appareil spécifique. Dans le cas de WEBDEV, 3 tranches sont présentes par défaut : - La tranche Mobile correspondant à des appareils de type smartphone.
- La tranche Tablette correspondant à des appareils de type tablette.
- La tranche Bureau correspondant à des appareils de type PC, MAC, etc.
Selon le mode de création de la page, la tranche par défaut (c'est-à -dire la tranche de référence) n'est pas la même : - en mode "Desktop First", la tranche par défaut est la tranche "Bureau".
- en mode "Mobile First", la tranche de référence est la tranche "Mobile".
L'unité de base utilisée pour définir un appareil de type Bureau, Tablette ou Mobile est le cm (centimètre) ou le pouce. Un mobile d'une résolution de 1920 pixels par 1080 pixels n'est pas différent d'un écran de bureau de la même résolution. Par contre, un écran de mobile peut être en 6 ou 8 pouces alors qu'un écran de bureau sera en 19, 24 ou 30 pouces. Le système des tranches permet de personnaliser le comportement des champs à partir d'un changement de résolution (largeur du navigateur) pour toutes les résolutions inférieures (en mode "Desktop First") ou supérieures (en mode "Mobile First"). Remarques : - Le nombre de tranches peut être modifié. Il est conseillé de créer une nouvelle tranche dès que la mise en page de votre page change (nécessité de changer l'organisation des champs dans la page par exemple).
- La taille des tranches peut être modifiée.
Il est possible de personnaliser pour chaque tranche : - la taille des champs,
- la position des champs,
- les propriétés CSS du style,
- le masquage des champs pour une tranche.
Remarque : des surcharges supplémentaires sont disponibles pour le champ Image et le champ Menu. Vous pouvez ainsi utiliser des images plus petites pour les mobiles ou changer l'orientation du menu. Pour plus de détails, consultez Surcharges supplémentaires. Manipulation des tranches Création d'une tranche Pour ajouter une tranche : - Sous le volet "Tranches", dans le groupe "Tranches de résolution", cliquez sur "Nouvelle tranche".
- Indiquez le nom de la tranche et sa taille puis validez.
Suppression d'une tranche Pour supprimer une tranche : - Sélectionnez la tranche à supprimer (cliquez sur son nom).
- Sous le volet "Tranches", dans le groupe "Tranches de résolution", cliquez sur "Supprimer".
- La tranche et toutes ses surcharges sont supprimées.
Description d'une tranche Pour afficher la description d'une tranche : - Affichez le menu contextuel de l'entête de la tranche (clic droit sur la zone colorée).
- Sélectionnez l'option "Description de la tranche".
- Dans la fenêtre qui s'affiche, il est possible de paramétrer :
- Le nom de la tranche. Ce nom est affiché dans l'entête de la tranche. Remarque : Ce nom est purement interne à WEBDEV : il n'est pas utilisé dans le code HTML généré.
- Le nombre de colonnes de la tranche.
- La largeur des gouttières entre les colonnes.
- L'utilisation de gouttières sur les bords gauches et droits de la page.
- Le zoom sur les polices. Cette option permet d'appliquer un pourcentage pour grossir les polices sur une plateforme. Ce pourcentage de grossissement est appliqué à toutes les polices affichées dans les champs de la tranche.
Ces options sont également disponibles dans le volet "Tranches" de WEBDEV.
Manipulation des champs dans les tranches Personnalisation par tranche Une modification de position ou de taille d'un champ présent dans la tranche par défaut est automatiquement appliquée dans toutes les tranches inférieures. Si une modification de position ou de taille d'un champ est réalisée dans une tranche spécifique : - Une surcharge est créée pour la propriété modifiée. Cette surcharge est affectée à la tranche où la modification a été effectuée.
- Cette surcharge peut être visualisée :
- dans la liste des surcharges de la tranche :
- via l'option "Tranches .. Liste des surcharges pour tous les champs" du menu contextuel d'un champ.
- via l'option "Liste des surcharges" du menu contextuel de l'entête de la tranche.
- dans la liste des surcharges du champ pour la tranche en cours. Pour afficher cette liste, sélectionnez l'option "Tranches .. Liste des surcharges pour les champs sélectionnés".
- Cette surcharge est prise en compte pour la tranche en cours et toutes les tranches inférieures (en mode "Desktop First") ou supérieures (en mode "Mobile First").
Cette règle s'applique également pour les propriétés CSS du style. Il est bien sûr également possible de modifier les propriétés CSS pour un seul état (par exemple changer la couleur de fond du champ selon la plateforme). Pour personnaliser un champ dans une tranche : - Sélectionnez la tranche (cliquez sur son nom).
- Effectuez la modification voulue : déplacement, redimensionnement, modification des propriétés CSS, etc.
- La surcharge est automatiquement effectuée et reportée sur les tranches inférieures (en mode "Desktop First") ou supérieures (en mode "Mobile First").
Des surcharges supplémentaires : champ Image et champ Menu - Pour les champs Image, il est possible de surcharger l'image par tranche.
- Cliquer sur l'entête de la tranche où l'image doit être modifiée.
- Changez le fichier image utilisé dans la fenêtre de description du champ (onglet "Détail").
- Validez. La modification est prise en compte pour la tranche en cours et les tranches inférieures (en mode "Desktop First") ou supérieures (en mode "Mobile First").
- Pour les champs Menu, il est possible de surcharger le type de menu par tranche.
- Cliquer sur l'entête de la tranche où le menu doit être modifié.
- Changez l'orientation du menu dans la fenêtre de description du champ (onglet "Détail").
- Validez. La modification est prise en compte pour la tranche en cours et les tranches inférieures (en mode "Desktop First") ou supérieures (en mode "Mobile First").
Masquage des champs par tranche Dans certains cas, selon la largeur du navigateur, il peut être nécessaire de masquer un champ. Pour masquer un champ : - Sélectionnez le champ et affichez le menu contextuel (clic droit).
- Sélectionnez l'option "Tranches", puis dans la section "Visibilité par tranche", sélectionnez la tranche où le champ doit disparaître.
Attention : Un champ masqué n'est plus sélectionnable sous l'éditeur pour la tranche où il a été masqué. Cependant, il reste présent dans la page (et donc manipulable par programmation). Par contre, il n'est pas possible de le rendre visible par programmation. Remarque : Pour rendre un champ masqué visible sous l'éditeur, sous le volet "Affichage", dans le groupe "Voir (tous les champs)", cochez l'option "Champs masqués". Liste des paramètres des champs mémorisés par tranche Par défaut, la modification d'un paramètre d'un champ (nom du champ, libellé du champ, ...) est appliquée sur toutes les tranches. Certains paramètres sont mémorisés par tranche : - Position du champ en X et en Y.
- Taille externe du champ (largeur et hauteur).
- Masquage du champ.
- Nombre de colonnes d'un champ Zone répétée.
- Nombre de colonnes d'un champ Tableau de bord.
- Masquage d'une colonne d'un champ Table.
- Source d'un champ Image (fichier associé).
- Orientation du menu.
- Mode d'affichage du champ Barre de Navigation.
- Taille de la page (hauteur et largeur).
- Style CSS du champ.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|