|
|
|
|
|
|
|
|
|
|
- Présentation
- Les options disponibles
- Ancrages au niveau de la page : les options
- Ancrages au niveau des champs de la page : les options
- Visualisation des ancrages en Responsive Web Design
Responsive Web Design : Gestion des ancrages
 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.
En "Responsive Web Design", la taille des champs évolue selon le mode de création de la page : - Mode Desktop First : quand la largeur du navigateur va se réduire, par défaut la largeur des champs va se réduire.
- Mode Mobile First : quand la largeur du navigateur va augmenter, par défaut la largeur des champs va augmenter.
Par défaut, la taille des champs est proportionnelle à la taille du navigateur. Pour définir le redimensionnement des champs en fonction de la taille du navigateur, WEBDEV propose des ancrages, aussi bien au niveau de la page qu'au niveau des champs. Remarque : N'hésitez pas à utiliser la poignée du navigateur d'édition pour visualiser sous l'éditeur le comportement des champs lors du redimensionnement du navigateur. Utilisez cette poignée sans modération pour mettre au point votre page.
Astuce : vous pouvez aussi cliquer directement sur une tranche dans la barre des résolutions pour voir directement la page dans cette tranche. Ancrages au niveau de la page : les options Pour définir les ancrages au niveau de la page : - Dans le menu contextuel de la page, sélectionnez "Ancrage".
- La fenêtre de description des ancrages de la page apparaît.
Les options disponibles sont les suivantes : - Ancrage en largeur : Les options correspondant à l'ancrage en largeur sont :
- Largeur fixe : Cette option permet de fixer la largeur de la page. La largeur prise en compte est celle spécifiée dans l'onglet "UI" de la fenêtre de description de la page.
- Agrandir ou réduire comme le navigateur (ou son conteneur) : Grâce à cette option, la page se contracte ou s'étire selon la taille du navigateur.
- Largeur minimale : Cette option permet de définir par la largeur minimale de la page dans chaque tranche. Cette largeur peut ne pas être définie, correspondre à la taille en édition ou correspondre à une valeur (exprimée en pixels).
- Largeur maximale : Cette option permet de définir par la largeur maximale de la page dans chaque tranche. Cette largeur peut ne pas être définie, correspondre à la taille en édition ou correspondre à une valeur (exprimée en pixels).
- Ancrage en hauteur : Les options correspondant à l'ancrage en hauteur sont :
- Hauteur fixe : Cette option permet de fixer la hauteur de la page. La hauteur prise en compte est celle spécifiée dans l'onglet "UI" de la fenêtre de description de la page.
- Réduire au contenu et tirer : Cette option permet de définir la hauteur de la page en fonction du contenu de page. Par exemple, dans le cas d'un champ Zone répétée dont le nombre de lignes est infini, le champ Zone répétée s'étend et la page s'agrandit en hauteur en fonction du nombre de lignes du champ Zone répétée.
- Hauteur minimale : Cette option permet de définir la hauteur minimale de la page. Elle est disponible uniquement si une hauteur de type "Réduire au contenu et tirer" a été choisie. Cette hauteur peut ne pas être définie, correspondre à la taille en édition ou correspondre à une valeur (exprimée en pixels).
Ancrages au niveau des champs de la page : les options Pour définir les ancrages au niveau des champs : - Dans le menu contextuel du champ, sélectionnez "Ancrage".
- La fenêtre de description des ancrages du champ apparaît.
Les options disponibles sont les suivantes : - Position :
- Gauche : L'espace à gauche du champ (par rapport au champ précédent ou au bord de la page) est conservé proportionnellement lors de la modification de la largeur de la page.
- Droite : L'espace à droite du champ (par rapport au champ précédent ou au bord de la page) est conservé proportionnellement lors de la modification de la largeur de la page.
- Centre : Cette option place le champ au centre de la page. Cette option ne peut être utilisée que pour un seul champ. Si deux champs sont présents sur la même ligne, le centrage est ignoré.
- Ancrage en largeur : Les options correspondant à l'ancrage en largeur sont :
- Largeur fixe : Cette option permet de fixer la largeur du champ quelque soit la taille de la page.
- Réduire au contenu et tirer : Cette option permet de réduire la largeur du champ au minimum pour que son contenu soit visible.
- Agrandir ou réduire comme le navigateur (ou son conteneur) (option par défaut) : Cette option permet de conserver les proportions existantes sous l'éditeur lorsque la page s'étire ou se contracte. Ce comportement est similaire au comportement de la page en mode zoning.
- Largeur minimale : Cette option permet de définir par la largeur minimale dans chaque tranche. Cette largeur peut ne pas être définie, correspondre à la taille en édition ou correspondre à une valeur (exprimée en pixels).
- Largeur maximale : Cette option permet de définir par la largeur maximale dans chaque tranche. Cette largeur peut ne pas être définie, correspondre à la taille en édition ou correspondre à une valeur (exprimée en pixels).
- Ancrage en hauteur : Les options correspondant à l'ancrage en hauteur sont :
- Hauteur fixe : Cette option permet de fixer la hauteur du champ quelle que soit la taille de la page.
- Réduire au contenu et tirer : Cette option permet de réduire la hauteur du champ au minimum pour que son contenu soit visible.
- Hauteur minimale : Cette option permet de définir la hauteur minimale du champ. Elle est disponible uniquement si une hauteur de type "Réduire au contenu et tirer" a été choisie. Cette hauteur peut ne pas être définie, correspondre à la taille en édition ou correspondre à une valeur (exprimée en pixels).
- Lorsque le contenu est plus grand que le champ :
- En largeur : Cette option permet de choisir le comportement lorsque le contenu est plus grand que le champ. Il est possible de :
- Agrandir le champ et pousser les champs situés à droite.
- Tronquer le contenu.
- Activer un ascenseur (qui sera toujours visible).
- Afficher un ascenseur uniquement si nécessaire.
- En hauteur : Cette option permet de choisir le comportement lorsque le contenu est plus grand que le champ. Il est possible de :
- Agrandir le champ et pousser les champs situés en dessous.
- Tronquer le contenu.
- Activer un ascenseur (qui sera toujours visible).
- Afficher un ascenseur uniquement si nécessaire.
Visualisation des ancrages en Responsive Web Design Il est possible d'activer la visualisation des ancrages sous l'éditeur : sous le volet "Affichage", dans le groupe "Voir (tous les champs)", cliquez sur "Ancrage". Les différents symboles utilisés sont les suivants : - Ancrage de type "Largeur fixe" : ->x (symbole des versions précédentes : ->).
- Ancrage de type "Agrandir et réduire comme le navigateur" : pas de symbole (symbole des versions précédentes : o->).
- Ancrage de type "Réduire au contenu et tirer" : o<-
- Taille minimale atteinte : ||<-
- Taille maximale atteinte : ->||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|