Ajout de texte et de blocs de texte dans Adobe Muse

Lors de la conception d’un site web, vous pouvez ajouter du texte à l’aide d’Adobe Muse en procédant de l’une des manières suivantes :

• Ajoutez une zone de texte, puis commencez à saisir votre contenu dans cette zone de texte.
• Enregistrez votre texte dans un fichier texte et importez ce fichier dans votre page Adobe Muse.
• Utilisez une application comme InDesign pour procéder à la mise en page du texte. Copiez ce texte préformaté dans le presse-papiers et collez-le dans Adobe Muse.

Dans une mise en page adaptative, vous pouvez également formater le texte en fonction de l’appareil sur lequel les utilisateurs consultent votre site web. Par exemple, vous pouvez agrandir le texte pour les smartphones et augmenter la marge intérieure par rapport à la version destinée aux postes de travail. La conception de sites web adaptatifs dans Adobe Muse permet également de formater le texte pour chaque point d’arrêt. Vous pouvez modifier le style, la couleur, l’interligne, la marge intérieure et la taille du texte pour chaque point d’arrêt. Pour plus d’informations sur le formatage du texte lors de la création d’un site web pour différents appareils dans un seul fichier, voir Formatage de texte dans les mises en page responsive.

Pour remplir les menus, vous allez copier le texte des menus à partir de fichiers texte externes et coller le contenu dans des blocs de texte. Vous allez également mettre en forme le texte en créant et en appliquant des styles de paragraphe. Procédez comme suit :

Vous pourrez trouver utile de consulter la version en ligne du site exemple, et utiliser sa conception comme une référence.

Pour plus d’informations sur l’utilisation de texte, voir Typographie dans Adobe Muse.

Utilisation du vérificateur d’orthographe intégré

Adobe Muse inclut un vérificateur d’orthographe qui permet de localiser et de corriger très facilement les fautes de frappe dans les blocs de texte. Le vérificateur d’orthographe est toujours activé. Il affiche un trait de soulignement rouge sous tous les mots introuvables dans son dictionnaire.

Si l’un des mots proposés est correct, appuyez sur la flèche vers le bas ou utilisez la souris pour sélectionner le mot suggéré que vous souhaitez utiliser, puis appuyez sur la touche Retour/Entrée pour l’appliquer. Si vous avez commis une erreur et n’avez pas choisi le mot approprié, il vous suffit d’annuler la modification (Edition > Annuler). Choisissez ensuite un autre mot suggéré ou modifiez le mot en utilisant l’outil Texte.

Si un mot signalé comme une faute de frappe n’est utilisé qu’une seule fois (comme un lieu ou le nom d’une personne) et que vous savez qu’il est correctement orthographié, il est inutile de le corriger. Le trait de soulignement rouge qui est visible dans le mode Conception n’apparaît pas lors de la prévisualisation, de la publication ou de l’exportation d’un site.

Lorsque vous utilisez des mots couramment utilisés, tels que des noms ou des adresses d’entreprise, vous pouvez ajouter ces mots au dictionnaire du vérificateur orthographique afin qu’ils ne soient pas soulignés comme fautes de frappe.

A l’aide de l’outil Texte, cliquez avec le bouton droit de la souris sur le mot que vous voulez ajouter au dictionnaire, puis choisissez l’option Ajouter au dictionnaire dans le menu contextuel qui s’affiche.

Vous pouvez définir la langue de votre choix (qui définira à son tour la langue du dictionnaire du vérificateur orthographique) pour l’ensemble du site et pour les blocs de texte individuels.

Pour définir le dictionnaire du vérificateur orthographique pour l’ensemble du site, choisissez Fichier > Propriétés du site. Cliquez sur l’onglet Texte, choisissez la langue souhaitée dans le menu Langue, puis cliquez sur OK.

Les projets de site nécessitent parfois de fournir un texte dans plusieurs langues. Dans ces cas, vous pouvez définir la langue par défaut (la plus souvent utilisée) dans les Propriétés du site, puis définir la langue du vérificateur d’orthographe pour les blocs de texte qui affichent du texte dans une autre langue.

Pour définir le dictionnaire du vérificateur orthographique pour un bloc de texte, sélectionnez le bloc de texte à l’aide de l’outil de sélection. Cliquez avec le bouton droit de la souris et sélectionnez Langue > (choisissez la langue souhaitée) dans le menu contextuel qui s’affiche.

Vous allez ensuite mettre à jour l’aspect du bloc de texte. Comme pour les rectangles et les cadres d’image, vous pouvez définir le contour, le fond et l’image d’arrière-plan des blocs de texte.

Mise à jour de l’aspect des blocs de texte

Dans cette section, vous allez mettre à jour les attributs d’un bloc de texte, afin de le faire ressortir par rapport aux graphiques d’arrière-plan sur la page.

Le titre au-dessus du menu de petit-déjeuner permet d’orienter les utilisateurs et leur indique visuellement quel menu ils sont en train de lire. Une fois ces modifications effectuées, le menu du petit-déjeuner terminé ressemble à l’image suivante.

Dans la section suivante, vous allez dupliquer le menu du petit-déjeuner, puis vous allez mettre à jour le contenu du texte dans les blocs de texte copiés afin de créer les menus du déjeuner, du dîner et la carte des desserts.

Duplication de blocs de texte

Dans les sections précédentes, vous avez créé le bloc de texte du menu du petit-déjeuner, l’avez rempli avec du texte à partir d’un fichier texte externe, avez appliqué une mise en forme de texte cohérente à l’aide des styles de paragraphe, puis mis à jour l’aspect du bloc de texte en ajoutant une image d’arrière-plan mosaïque, une couleur de fond et un contour. Vous avez également ajouté un second bloc de texte au-dessus du bloc de texte du menu, qui sert à identifier le menu du petit-déjeuner. L’étape suivante consiste à dupliquer trois fois cet ensemble d’éléments, pour créer un total de quatre menus.

Vous avez peut-être remarqué que lorsque vous faites glisser chaque copie vers le bas, la zone du pied de page que vous avez définie dans la partie 1 se déplace automatiquement vers le bas pour créer davantage d’espace vertical sur la page. En conséquence, la page des aliments est plus longue en hauteur que les autres pages de ce site exemple.

Vous devez ajouter des points d’ancrage au-dessus de chaque menu afin de créer un système de navigation qui permet aux visiteurs de passer rapidement d’un menu à l’autre. Comme la page des aliments est plus longue, le contenu défile verticalement pour afficher le menu correspondant, en fonction de l’élément de menu sur lequel les visiteurs cliquent. Vous allez également découvrir comment utiliser les Liens pour créer divers types de liens, notamment les liens de téléchargement, qui permettent aux visiteurs de télécharger un fichier PDF.

Insertion de symboles et de caractères spéciaux

Le panneau Glyphes permet d’insérer des symboles, tels que ©, ou des caractères spéciaux, tels que ᵝ, qui ne sont pas disponibles sur un clavier standard. Le panneau Glyphes permet d’insérer des caractères Unicode.

Les types de symbole et de caractère que vous pouvez insérer dépendent de la police que vous choisissez. Par exemple, certaines polices peuvent inclure les caractères internationaux (Ç, ë) et les symboles monétaires internationaux (£, ¥). La police Symbol intégrée comprend des flèches, des puces, et des symboles scientifiques.

Pour insérer des caractères à l’aide du panneau Glyphes, procédez comme suit :

Modification de l’aspect des blocs de texte

Que vous appliquiez des polices web, des polices garanties pour le web ou des polices système à un texte, vous pouvez toujours modifier le contenu du texte lorsque vous travaillez dans la vue Conception. Vous pouvez également mettre à jour l’aspect du bloc de texte lui-même, de sorte que le bloc de texte s’affiche différemment.

Représentez-vous les blocs de texte comme des conteneurs qui entourent chaque section de texte. Vous pouvez les contrôler de plusieurs façons pour agir sur la manière dont ils s’afficheront sur le site publié.

Si vous souhaitez mettre en forme des blocs de texte et définir leur style, utilisez l’outil Sélection pour sélectionner le bloc de texte, puis appliquez des modifications qui affectent l’aspect du contenu de texte.

Remarque : si vous sélectionnez le texte en utilisant l’outil Texte, vous pouvez définir le style du texte en définissant les options de mise en forme du panneau Texte ou du panneau de configuration.

Vous pouvez redimensionner un bloc de texte en faisant glisser les poignées pour l’agrandir ou le réduire. Vous pouvez également faire glisser l’ensemble du bloc de texte sur une page pour le repositionner. Lorsque vous redimensionnez le bloc de texte, une info-bulle affiche ses dimensions.

Vous pouvez également faire pivoter un bloc de texte, mais sachez que si vous le faites (quelles que soient les polices appliquées), le texte sera exporté sous la forme d’un fichier d’image. Faites-le donc avec parcimonie, et ajoutez toujours un titre au texte pivoté.

Pour mettre à jour l’aspect d’un conteneur de bloc de texte, vous pouvez utiliser les options de mise en forme que vous utilisez pour modifier des rectangles. Vous pouvez définir la couleur de fond et même ajouter des images d’arrière-plan. Vous pouvez également définir un contour et utiliser les mêmes paramètres pour contrôler l’épaisseur, la couleur et l’alignement du contour. A l’aide des menus Angles et Effets du panneau de configuration, vous pouvez définir le rayon de l’angle du bloc zone de texte et appliquer des ombres portées, des biseaux et des lueurs.

Pour ajouter de la transparence à un bloc de texte, modifiez la valeur de l’opacité en utilisant le curseur Opacité.

Et utilisez le menu Hyperlien et le champ Hyperlien pour ajouter des titres au texte, mais aussi ajouter des liens et définir si le lien s’ouvre dans une nouvelle fenêtre de navigateur.

Contrôle de l’alignement du texte et de l’habillage du texte autour d’une image

Les blocs de texte sont extrêmement utiles pour la création d’un contenu de page. Comme vous l’avez vu à la section précédente, les blocs de texte peuvent contenir des éléments et des effets graphiques, ainsi que des contenus de texte.

Dans cette section, vous allez apprendre à contrôler le contenu de texte au sein d’un bloc de texte, en définissant la marge intérieure pour ajouter plus d’espace. Vous découvrirez également comment créer des mise en page de type magazines en créant les colonnes de texte entourant les images.

Ajout d’une marge intérieure à un texte

Par défaut, le texte que vous saisissez, importez ou collez dans un bloc de texte est aligné sur le côté gauche. Si vous observez les paramètres dans le panneau Espacement, vous verrez qu’ils sont tous définis sur 0.

Pour ajouter plus d’espace sur la gauche, la droite, en haut ou en bas du bloc de texte, entrez la valeur souhaitée (en pixels) ou cliquez sur les flèches vers le haut et vers le bas en regard de chaque champ pour augmenter ou réduire la valeur numérique.

Mise en retrait d’un texte et contrôle des valeurs d’interligne et d’interlettrage

Vous pouvez contrôler la mise en forme du texte dans Adobe Muse de la même façon que vous mettez à jour le contenu du texte dans les applications de traitement de texte et de nombreux autres outils de retouche d’images. Le panneau Texte comprend un grand nombre de paramètres supplémentaires, dont certains ne sont pas affichés dans le panneau de configuration lorsque du texte est sélectionné.

Pour mettre en retrait la première ligne de texte dans un paragraphe, procédez comme suit :

L’option Interlettrage du panneau Texte permet de définir l’espace entre chaque caractère. Elle est particulièrement utile pour les effets de texte et pour rendre les polices stylisées ou ornées plus faciles à lire sur le web.

Vous pouvez appliquer l’interlettrage au texte sélectionné en entrant le nombre de pixels dans le champ interlettrage. Vous pouvez également cliquer sur les flèches vers le haut et vers le bas pour augmenter ou diminuer la valeur jusqu’à obtenir l’effet désiré.

L’interligne est une autre fonctionnalité très utile que vous pouvez utiliser pour contrôler le format du texte dans les paragraphes. L’interligne vous permet d’ajuster l’espace entre les lignes de texte. La fonction Interligne est disponible dans le panneau de configuration et le panneau Texte.

Les quatre autres paramètres typographiques disponibles dans le panneau Texte sont les suivants :

Marge gauche et Marge droite

Comme vous vous en doutez, ces paramètres permettent de gérer l’espace entre les caractères sur l’un ou l’autre des côtés du bloc de texte, et la bordure des blocs de texte. Ils sont très similaires à la définition des valeurs d’interlettrage dans le panneau Espacement, sauf que vous sélectionnez le bloc de texte avec l’outil Sélection (au lieu de sélectionner le contenu de texte avec l’outil Texte) pour modifier les valeurs d’interlettrage.

Espace avant et Espace après

Vous pouvez utiliser ces paramètres pour contrôler l’espace (en pixels) qui s’affiche avant ou après un saut de paragraphe. Ces paramètres vous permettent d’afficher plus ou moins d’espace entre un ensemble de paragraphes placés dans un même bloc de texte.

N’hésitez pas à faire des essais en utilisant tous les paramètres du panneau Texte pour découvrir comment vous pouvez contrôler l’affichage du contenu de texte sur les pages que vous créez.

Importation de texte à partir d’un fichier texte sur une page

Les fichiers source qui contiennent le corps du texte pour cet exemple de projet se trouvent dans le dossier Kevins_Koffee_Kart. Le texte est enregistré dans des fichiers TXT. Dans Adobe Muse, vous pouvez importer un fichier de texte entier pour ajouter du texte à votre page. Il n’est pas nécessaire d’ouvrir les fichiers de texte dans un éditeur de texte ni de copier les lignes de texte pour les coller sur vos pages.

Utilisation du texte synchronisé

Pour plus d’informations sur l’utilisation du texte synchronisé, voir Utilisation du texte synchronisé.

Utilisation de texte dans une mise en page responsive

Pour découvrir comment formater du texte dans une mise en page responsive, voir Formatage de texte dans une mise en page responsive.