Travailler avec un contenu réactif

titres Responsive adapter automatiquement aux dimensions de vue des appareils de vos utilisateurs. Les fonctions intégrées vous permettent de créer des titres qui s'adaptent automatiquement aux différents dispositifs et orientations de l'appareil. Ces caractéristiques de conception sensibles avoir à maintenir éliminent plusieurs titres ou mettre en œuvre complexe ramification.

Pour activer les fonctions sensibles et commencer par un titre réactif, cliquez sur Nouveau titre Responsive de la fenêtre de démarrage ou cliquez sur Créer un nouveau titre du fichier et sélectionnez l' onglet Titre réactif . Pour activer un titre existant, cliquez sur Options de titre sur la conception du ruban et activez l' option Activer Titre Responsive case à cocher. Pour plus de détails, voir Désigner un titre aussi sensible .

Lorsque votre titre est activé pour la conception réactive, une barre de sélection de l'appareil est ajouté à votre zone d'affichage. La barre de sélection de l'appareil contient cinq graphiques représentant les vues populaires avec les appareils d'aujourd'hui.

De gauche à droite, le point de vue de l'appareil sont les suivantes:

	Téléphone Voir Portrait
	Tablet Portrait Voir
	Vue bureau
	Tablet Paysage Voir
	Téléphone Paysage Vue

La barre de vue vous permet de basculer rapidement entre les vues afin de vérifier la façon dont votre texte et des objets sont affichés dans chaque vue. Lorsque vous ajoutez des objets au titre, les objets sont de façon optimale à l'échelle et déplacés pour chaque vue de l'appareil. Cliquez sur un graphique appareil dans la barre de sélection pour voir comment votre contenu se penchera sur chaque appareil.

Les flèches affichées à côté de l'appareil graphiques dans la barre de sélection de dispositif représentent le flux de l'héritage des changements de développement que vous faites dans la vue périphérique en cours. Les flèches indiquent la direction du flux d'héritage réactif, à partir du bureau à la tablette et au téléphone. En outre, la couleur de la flèche est représentatif de l'appareil sur lequel un remplacement a été faite en vue de dispositif particulier (vert si la substitution a été effectuée / héritée de la vue de la tablette ou orange si la substitution a été réalisée sur le téléphone). Par exemple, les propriétés des objets affichés dans la vue Portrait de téléphone sont hérités des paramètres actuels des propriétés des objets dans la vue Portrait Tablet.

Un changement que vous faites dans la vue de l'appareil non-deskop est considéré comme une dérogation à l'héritage réactif réglage du dispositif parent. Pour voir comment un objet sur Remplacements sont indiqués dans la zone de travail, ajouter un objet, comme un bloc d'image ou texte, passez en vue de l'appareil, et déplacer l'objet. Notez également que la couleur des adorners autour de l'objet et la couleur de l'étiquette de la propriété dans la zone de ruban changent aussi lorsque vous déplacez l'objet. La couleur indique que le dispositif dans lequel un remplacement a été placé sur l'objet. Modifier l'affichage de l'appareil à nouveau et remarquez comment le remplacement est placé dans la vue.

Si vous ne voulez pas comment un remplacement est affiché, vous pouvez rapidement annuler la commande prioritaire et remettre l'objet à son paramètre de propriété d' origine. Vous pouvez réinitialiser le remplacement dans la vue actuelle ou dans toutes les vues. Pour réinitialiser un remplacement sur un objet, cliquez sur Réinitialiser dans le Dérogations groupe sur les propriétés des rubans ( Propriétés , style , position et taille ) pour l'objet ou faites un clic droit sur l'objet et sélectionnez Remplacements Réinitialiser . Pour réinitialiser une dérogation pour une unité cessible, chapitre, section ou d'une page, faites un clic droit et sélectionnez override Réinitialiser . Pour plus de détails, voir Remise à zéro des remplacements de responsive design .

le placement des objets hors pages

Pour les modèles de titres sensibles qui ont besoin d'avoir des objets différents apparaissent plutôt que d'autres sur les différents appareils, vous pouvez échanger les objets se trouvant sur la page. Par exemple, vous voudrez peut - être Image1 apparaisse sur le bureau et la tablette, mais qui veulent Image2 apparaisse sur le téléphone. En mode de fonctionnement, seuls les objets sur la page seront affichées, ce qui signifie si vous faites glisser des objets hors d' une page pour un appareil spécifique, ils ne seront pas apparaître pendant le mode d'exécution et de publication / aperçu. Donc , dans ce scénario, vous positionner Image1 sur la page et placez Image2 hors de la page pour les vues de bureau et tablettes. Dans les vues de téléphone, vous faites glisser Image2 sur la page et faites glisser Image1 off.

Lorsque vous supprimez un objet à partir d' un titre réactif, l'objet est supprimé du titre Explorer et toutes les vues de l' appareil dans le titre. Vous recevrez un message d'avertissement lors de la suppression de l'objet de vues non-bureau. Pour plus de détails, voir Suppression d' un objet dans un titre réactif .
Vous pouvez utiliser des actions conditionnelles pour placer les images appropriées (ou désactiver) la page. Pour plus de détails, voir Spécification conditions .
Objets hors page ne sont pas publiées. Les objets placés hors de la page dans une vue ne sont pas référencés dans le contenu publié à moins d' un mouvement à l' action associée à l'objet L'importance est que les ressources de l'objet ne seront pas téléchargés sur le dispositif de visualisation.

déplacer rapidement et redimensionner des objets dans toutes les vues appareils

Vous pouvez déplacer rapidement et redimensionner des objets à travers tous les périphériques sans changer à chaque vue. Cela vous permettra de forcer un objet-déplacer vers une position désirée / taille quel que soit son état d'héritage. Tout en déplacement ou le redimensionnement d' un ou plusieurs objets sélectionnés, faites glisser tout en maintenant Maj et Ctrl . Les objets sur tous les appareils sont modifiés en conséquence. Pour plus d' informations sur les objets en mouvement en utilisant les touches Ctrl + Maj glisser et les règles qui sont appliquées, voir Déplacement et redimensionnement d' objets .

objets d'échelle réactive

Par défaut, la plupart des objets sont mis à l' échelle pour chaque point de vue de l' appareil après l' insertion en utilisant une formule calculée. Ceci implique de prendre l'objet de forme rectangulaire d' informations et le dispositif de courant que l'utilisateur est en Lors des dispositifs de commutation, la taille des objets et la position sont mises à l' échelle proportionnellement sur la base de la largeur des deux dispositifs en utilisant les constantes ci - dessous.:

Voir Device	Largeur	la taille
téléphone Portrait	480	763
téléphone Paysage	785	450
Portrait Tablet	785	1000
Paysage Tablet	1009	662
bureau	1009	662

Dans les boutons de vue non deskop, des menus et des objets de formulaire ne sont pas mises à l'échelle. De plus, il n'y a pas de mise à l'échelle lorsque l'affichage audio est un contrôleur ou une icône haut-parleur et pour les tables de contenu lorsque le type est la liste déroulante.

Page Règles de croissance en hauteur

Pour les objets qui correspondent à la hauteur de page de bureau, la hauteur de la page d'autres vues (en particulier du paysage Tablet et du paysage de téléphone) croître de sorte que ces objets restent sur la page. (Ceci est également vrai de TabletLandscape à Paysage de téléphone.) Cela s'applique à des objets qui sont complètement sur la page ainsi que partiellement / désactiver la page. Si un objet est complètement hors de la page, la page ne se développera pas pour les autres appareils.

Si la largeur d'un bloc de texte sur la vue de bureau est tel qu'il doit être réduit - et le bloc de texte développé verticalement - sur d'autres points de vue, la hauteur de page dans les autres vues augmentera également pour accueillir le bloc de texte.

règles réactives pour les objets et les textes

Voici à quoi vous attendre lors de l'élaboration de ces éléments dans les titres sensibles:

Chapitres, sections, Pages et AUs	La largeur de la page est réglable dans la vue de bureau seulement (à la fois sur le design ruban et le Propriétés ruban. Dans les autres vues sensibles, la largeur est toujours fixe. La hauteur de la page est héritée seulement au niveau de l' objet. En d' autres termes, la page hérite de la section, le chapitre hérite du titre, et ainsi de suite. la hauteur de la page ne soit pas transmise au travers des vues (de bureau pour réduire les vues). Vous pouvez changer la hauteur de page dans toutes les vues sur le design ruban et le Propriétés ruban . La Hériter Taille de la page case à cocher sur le Propriétés ruban applique à la vue de bureau uniquement; et apparaît comme Hériter page Hauteur sur les vues non bureau parce que la largeur de la page ne peut pas être modifiée. L'alignement de la page HTML par défaut pour les titres sensibles est Centré. De plus, vous ne pouvez pas ajuster l'alignement de la page HTML dans les titres sensibles. Pour les titres existants, si un régulier (non réactif) titre est activé pour répondre, puis l'alignement de la page HTML Centré sera appliqué et le contrôle désactivé (et les règles sensibles appliquent). Si un titre est sensible a changé un titre régulier, l'alignement de la page HTML est toujours centrée et le contrôle est activé afin que vous puissiez changer si on le souhaite.
Texte	Pour les titres sensibles, les options sont disponibles pour que vous puissiez facilement l'échelle du texte dans un bloc de texte. Ceci est utile lors du réglage de la façon dont le texte dans un bloc de texte apparaît dans les différentes vues de l'appareil pour les titres sensibles. Mise à l'échelle le texte crée une substitution de la valeur par défaut héritage réactif. (Les commandes de mise à l'échelle du texte sont désactivées sur le point de vue du bureau puisque vous ne pouvez pas créer Remplacements dans ce point de vue. De plus, les étiquettes dans les champs changent de couleur pour refléter les valeurs de remplacement actuelles pour chaque vue de l'appareil). Dans les cas où il y a des styles de texte multiples dans un bloc de texte les valeurs de base dans le texte panneau affiche le style de texte du premier texte dans le bloc et un indicateur - ± - que plusieurs valeurs existent, par exemple 12 ±. Les boutons ont overrides automatique si elles contiennent du texte et ne sera pas l'échelle pour la taille de la police. Cela garantit que le texte du bouton apparaît la même taille sur tous les périphériques au lieu de mise à l'échelle vers le bas à partir du bureau et de devenir plus petit dans les dispositifs inférieurs.
Boutons	Les boutons ne pas à l'échelle.
Images	Les images ont mise à l' échelle normale après avoir été inséré dans un dispositif. Si l'image correspond à la page par défaut, il est également inséré dans tous les autres appareils comme une dérogation pour qu'il soit le même size.If exactement l'image est plus grande que la page du dispositif actuel soit horizontalement ou verticalement, l'image est placée dans appareil de bureau puis vers le bas pour les mis à l' échelle des vues de l' appareil. Si l'image est plus grande que la page de l' appareil en cours et plus grand que le bureau, l'image est placé en vue de bureau et mis à l' échelle jusqu'aux limites du bureau. De là , il est mis à l' échelle plus bas pour votre appareil actuel. Les images ne sont pas être plus grande échelle. Pour les images utilisées dans un arrière-plan, l'image est mise à l'échelle en utilisant les règles de mise à l'échelle. De plus, si la ressource d'image d'arrière-plan sur les répétitions de bureau ou des tuiles, il répétera ou tuile vues plus bas. Si elle ne se répète pas ou tuile sur le bureau, il est empêché de répéter ou / carrelage dans des vues plus bas.
Formes	Les formes ont mise à l' échelle normale après avoir été inséré dans un appareil. Si la forme correspond à la page par défaut, il est également inséré dans tous les autres appareils comme une dérogation pour qu'il soit le même size.If exactement la forme est plus grande que la page du dispositif actuel soit horizontalement ou verticalement, la forme est placée dans appareil de bureau puis vers le bas pour les mis à l' échelle des vues de l' appareil. Si l'image est plus grande que la page de l' appareil en cours et plus grand que le bureau, l'image est placé en vue de bureau et mis à l' échelle jusqu'aux limites du bureau. De là , il est mis à l' échelle plus bas pour votre appareil actuel. Les formes sont mises à l'échelle en place sur le bureau si elle est attirée ailleurs, suivez l'héritage sensibles à l'écoulement de la taille vers le bas à des vues plus bas. Cela permet de maintenir la taille d'origine dans la vue où tirer sans créer une dérogation. Pour les formes utilisées dans un arrière-plan, la forme est mise à l'échelle en utilisant les règles de mise à l'échelle. De plus, si la forme de fond sur les répétitions de bureau ou des tuiles, il répétera ou tuile vues plus bas. Si elle ne se répète pas ou tuile sur le bureau, il est empêché de répéter ou / carrelage dans des vues plus bas.
Poses de caractères	poses de caractères sont des images et utilisent donc les mêmes règles de mise à l'échelle sensible.
animations	La taille est mise à l'échelle quelle que soit la vue de la mise à l'échelle et réactive. Le jeu se poursuit lorsqu'un appareil est mis en rotation. La ressource est d'être Overridable dans d'autres vues de l'appareil.
l'audio	objets audio ont besoin de règles distinctes pour les remplacements de mise à l'échelle et la taille en raison des contrôleurs. L'icône du contrôleur audio standard ou haut-parleur ne sera pas l'échelle et ne pas avoir une taille en mesure override. Si vous utilisez une image comme contrôleur, l'objet audio est mis à l'échelle comme d'autres objets d'image et permet de taille overrides. Le jeu se poursuit lorsqu'un appareil est mis en rotation. La ressource est d'être Overridable dans d'autres vues de l'appareil.
Vidéo	La taille de la vidéo est mise à l'échelle quelle que soit la vue de la mise à l'échelle et réactive. Le jeu de vidéo continue lorsqu'un appareil est mis en rotation. Le contrôleur vidéo n'est pas substituable. Le contrôleur actuellement sélectionné ou l'image est appliquée sur tous les périphériques et les vues. La ressource vidéo est d'être Overridable dans d'autres vues de l'appareil.
Vidéos youtube	Le jeu de vidéo continue lorsqu'un appareil est mis en rotation. Le contrôleur vidéo n'est pas substituable. Le contrôleur actuellement sélectionné ou l'image est appliquée sur tous les périphériques et les vues. La ressource vidéo est d'être Overridable dans d'autres vues de l'appareil.
Questions, les tests et enquêtes	Dans les titres sensibles, les questions sont insérés avec automatique sur la overrides taille de la question et la position sur tous les appareils. Les changements de propriétés pour des questions, des tests et des enquêtes seront propagées à tous les points de vue. Seuls des changements de position unique et la taille sont autorisés pour les objets d'élément de question (comme les ressources texte et image). La largeur par défaut des blocs de texte sont augmentés dans les questions afin que lorsque réduite ils aideront à empêcher le texte de sculptant ou emballage. Un 10 px supplémentaire est placé entre les boutons radio / cases à cocher et leur texte de l'étiquette. Glisser-déposer et les questions de points chauds doivent inclure une image à la question. Pour cette image la liste déroulante des ressources d'image sur le ruban propriétés de l'image est désactivé. L'image ne peut être modifiée à l'aide de la question Créateur. Comme avec d'autres changements de question, cette modification est appliquée à la question sur tous les points de vue. Pour des questions de points chauds, les taches sont réglées automatiquement sur le point de vue de l'appareil.
menus	L'objet de menu est traité comme d' autres objets texte. La taille n'est pas mise à l' échelle dans les vues non-bureau. Vous pouvez redimensionner le texte dans les vues non-bureau (sur le Propriétés ruban et maison ruban). Vous pouvez augmenter le texte (Texte Augmentation / diminution) dans toutes les vues (sur Propriétés ruban et maison ruban).
Table des matières	Table des objets contenus sont traités comme les autres objets texte. La taille de l'objet ne change pas automatiquement. Mise à l' échelle du texte est disponible sur les vues non-bureau (sur le Propriétés ruban et maison ruban). Vous pouvez augmenter le texte (Texte Augmentation / diminution) dans toutes les vues (sur Propriétés ruban et maison ruban).
Les barres de progression	Pour les barres de progression qui contiennent des images, sont appliquées les mêmes règles d'échelle d'image. À l'heure actuelle, seule l'orientation de la barre de progression est substituable.
Objets de formulaire	La taille des objets de forme ne soit pas les mises à l'échelle automatiquement en fonction de inheritance..You devra faire une taille différente si on le souhaite. Cela inclut l'étiquette de texte associé pour les cases à cocher et des boutons radio. Mise à l' échelle du texte est disponible sur les vues non-bureau (sur le Propriétés ruban et maison ruban). Vous pouvez augmenter le texte (Texte Augmentation / diminution) dans toutes les vues (sur Propriétés ruban et maison ruban). Mise à l'échelle du texte vers le haut ou vers le bas ne change pas automatiquement la taille de l'objet de formulaire. Vous devez changer la taille appropriée à la taille du texte, si on le souhaite. propriétés de l'objet de formulaire ne seront pas substituable.
HTML Extensions , flux RSS, et Web Windows	Le récipient pour ces objets sont mis à l'échelle par la position et la taille similaire aux images.
objets texte intelligents	Ceux - ci incluent la date / heure, le titre de la page, numéro de page et mie de pain. Ils lors de la détermination de la taille et la position réactive sont traitées de la même comme un bloc de texte. Vous pouvez augmenter le texte (Texte Augmentation / diminution) dans toutes les vues (sur Propriétés ruban et maison ruban). Vous pouvez augmenter le texte (Texte Augmentation / diminution) dans toutes les vues (sur Propriétés ruban et maison ruban).
Graphiques	Les graphiques sont des images et utilisent donc les mêmes règles de mise à l'échelle sensible.
Les équations	Les équations sont des images et utilisent donc les mêmes règles de mise à l'échelle sensible.
Actions et déclencheurs	Les actions et les déclencheurs ne sont pas être Overridable. Vous pouvez utiliser plusieurs actions et actions conditionnelles pour modifier le comportement entre les vues. Utilisez la rotation de l' appareil déclencheur pour définir des actions pour se produire lorsqu'un comprimé ou l'orientation du téléphone est mis en rotation. Déclencheurs de niveau de la page (sur Afficher , sur pageshow ) ne sont pas refired lorsqu'un appareil est mis en rotation. Cela empêche les objets de se cacher ou montrer de façon inappropriée ou - plus important - Modifier variables actions d'être doublé en place. Si vous voulez qu'une action se produise dans ce scénario, utilisez la rotation de l' appareil déclencheur pour l' accomplir. Les actions peuvent être subordonnées pour vous permettre d'invoquer des comportements différents sur les vues de l' appareil de remplacement. Utilisez la variable réservée CurrentView à comparer. Les valeurs enregistrées sont les suivantes : bureau TabletLandscape TabletPortrait PhoneLandscape PhonePortrait Par exemple, vous pouvez comparer que CurrentView « est égal à » TabletLandscape ou « Contient » Téléphone ou « Ne contient pas » Desktop. (Vous pouvez également raccourci, par exemple, « Contient » « T » puisque seuls les choix de la tablette contiennent un T majuscule, ou « Contient » « L » puisque seuls les choix paysage contiennent un capital L.) Si un changement contenu est exécuté sur la page après la charge initiale (par exemple, en utilisant un bouton clic), la condition résultant / apparition est affiché même lorsque l'appareil est mis en rotation l' action. Par exemple, si le changement Table des matières A à la nouvelle valeur B est exécutée sur le périphérique dans le paysage, lorsque le dispositif est mis en rotation pour la nouvelle image portrait B sera montré encore.
mises en page	Vous pouvez ajouter et gérer des mises en page sur le Propriétés ruban pour la page. Les mises en page sont reconfigurés pour chaque vue de l'appareil pour un espacement optimal, tout en prenant en compte la majorité des thèmes. (Certains thèmes ont particulièrement larges frontières, en-tête ou de pied de page graphiques. Dans ces cas, la mise en page peuvent se chevaucher légèrement.) Si vous créez une page avec une mise en page puis décider de changer la mise en page de la page. tant qu'il n'y a pas encore d'objets ajoutés (qui est, contient des conteneurs vides de mise en page), la mise en page existante est supprimée et remplacée par la nouvelle mise en page. Notez que si les objets existent, ils ne sont pas appliqués à la nouvelle mise en page. La mise en page nouvellement sélectionné est appliqué à la page.
transitions	Les transitions ne sont pas substituable.

Pour plus d'informations, visitez les communications relatives RCD-Trivantis dans notre Communauté: