Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Muse CC 2015

Découvrir des types de style

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans le même ordre d'idée que les styles de paragraphe, travaillez avec des styles de caractère, des styles d'objet et des styles de liste.

Transcription

Dans cette vidéo, je vous propose de découvrir les autres types de styles présents dans Muse, le principe est toujours le même, il s'agit de sauvegarder des propriétés de mise en forme afin de pouvoir d'une part les ré-appliquer facilement à d'autres éléments, et d'autre part de pouvoir propager rapidement des modifications. Alors vous voyez que depuis la vidéo précédente et bien j'ai appliqué une série de styles à mes éléments, j'ai également défini dans le Panneau Style de paragraphes une série de styles supplémentaires, mais maintenant, ce que j'aimerais faire et bien c'est mettre en évidence par exemple ici le mot "18 heures" alors la différence par rapport à ce que j'ai fait dans la vidéo précédente, c'est qu'ici ce n'est pas l'ensemble d'un paragraphe qui est concerné mais uniquement quelques caractères à l'intérieur d'un paragraphe. Et bien c'est là qu'interviennent les styles de caractères, alors ça fonctionne exactement de la même façon que les styles de paragraphes, je vais d'abord sélectionner les caractères à modifier, dans le panneau de texte je vais apporter certaines modifications, par exemple je vais utiliser la version Bold, la version Gras de ma police de caractère, je vais également changer la couleur du texte, et donc j'aurais envie de sauvegarder cette mise en évidence ici dans un style mais rappelez-vous comme cela ne concerne pas l'ensemble d’un paragraphe mais uniquement certains caractères au sein d'un titre ou d'un paragraphe et bien dans ce cas ci j'ai besoin des styles de caractères. Cela fonctionne exactement de la même manière donc je vais cliquer sur cette icône Créer un style à partir des attributs appliqués Voila mon style de caractère, je double clique dessus pour accéder à ses propriétés, je lui donne un nom, par exemple Mise en évidence rouge, comme ceci, alors vous pouvez également choisir une balise HTML pour tout cela, alors là on a un petit plus de choix, si vous ne connaissez pas le langage HTML, et bien je vous invite à garder la valeur par défaut qui est Span, si vous connaissez le HTML et que vous trouvez dans cette liste une balise plus appropriée et bien n'hésitez pas bien sûr à l'utiliser, dans mon cas ici le Span me convient très bien. Voila, je vais donc valider ceci, me voici avec un premier style de caractères. Alors pour bien vous montrer la différence avec un style de paragraphes et un style de caractères et bien regardez je vais me placer ici simplement sans sélectionner dans le mot "20 heures" que j'ai également envie de mettre en évidence, et puis ici quand je clique sur le style et bien vous voyez que 20 heures ne se met pas automatiquement en rouge, tout simplement parce qu'ici comme ce n'est pas un style de paragraphes Muse ne s'est pas déterminer à l'avance à quoi ce style doit s'appliquer. Quand il s'agissait d'un style de paragraphes, on savait déjà à l'avance que c'était pour l'ensemble du paragraphe dans lequel je me trouvais. Mais ici avec les styles de caractère il est obligatoire véritablement de sélectionner les éléments que vous voulez mettre en forme et puis d'appliquer le style à la sélection comme ceci. Voila donc pour les styles de caractère alors il existe encore d'autres types de styles, pour ça je vais remonter ici dans la partie supérieure de ma page pour aller sélectionner, voila, des cadres d'image. Alors attention, je vous rappelle que j'ai sélectionné ici le cadre de l'image c'est marqué ici en haut à gauche, et non pas l'image qui est chargée dans ce cadre. Donc ce cadre d'image et bien avant tout autre chose, c'est une ellipse et donc je vais pour également lui donner une série de caractéristiques, notamment une couleur de contour, alors regardez je peux choisir une couleur ici. Mais plutôt que de choisir une couleur dans le nuancier, je vais choisir une des couleurs de mon thème de couleur, alors attention, il y a une petite subtilité ici regardez, si je clique ici sur le bleu qui est la couleur que je veux utiliser, et bien vous voyez que par défaut je donne une couleur au fond de mon objet et pas au contour, alors ça c'est pas ce que j'ai envie de faire ici alors je vais supprimer cette couleur de fond ici un cliquant sur Première Sélection ici le blanc avec une barre dedans qui me permet de supprimer la couleur, et je vais retourner ici dans mon panneau Bibliothèque Creative Cloud et plutôt que de cliquer sur ma couleur bleue, je vas faire un clic droit ce qui me permet d'utiliser ici cette couleur pour le contour de l'objet sélectionné en non sur le fond comme c'est le cas par défaut. Voila donc le contour de mon objet qui est en bleu, je vais pouvoir augmenter un petit peu l'épaisseur de ce contour ici à 4 points, par exemple et puis dans les paramètres supplémentaires de ce contour, auquel j'accède par le lien contour ici, et bien je vais pouvoir choisir l'alignement de ce contour sur la ligne, donc par défaut vous voyez que le contour se trouve à l'extérieur de la ligne, je peux le mettre à l'intérieur ou au milieu, ici je vais le mettre à l'intérieur, comme ça je n'augmente pas la largeur et la hauteur de mon élément. Et donc maintenant je vais pouvoir également sauvegarder ces caractéristiques de mise en forme, cette fois ci dans un style graphique. Donc je vais me rendre dans le panneau des styles graphiques et vous voyez qu'il fonctionne exactement de la même manière que les panneaux des styles de paragraphe et des styles de caractères que nous avions déjà évoqué plus tôt dans cette formation, donc je vais créer un style graphique ici, je clique sur ce style pour donner un nom je vais l'appeler par exemple image ronde comme ceci, je valide par ok, et puis bien évidemment je peux appliquer ce style graphiques aux autres images ici des autres colonnes, et puis vous aurez deviné ce qui se passe avec les styles, si je modifie ici l'épaisseur de mon contour à 6 points et bien j'ai un petit + qui apparaît juste à côté du nom de mon style. Je peux redéfinir le style sélectionné à partir des attributs appliqués, et voila, j'ai appliqué maintenant, j'ai propagé cette modification aux autres éléments de mon site, de ma page, et de mon site bien sûr qui sont liés à ce style. Vous signaler au passage également qu'il existe des styles de puces qui vous permettront de stocker les caractéristiques de mise en forme des puces et des numéros, mais nous n'avons pas besoin de ce type de style ici dans l'exemple qui nous occupe. Voici donc un tour d'horizon de la fonctionnalité des styles dans Muse, à vous maintenant d'en tirer le meilleur parti pour un travail non seulement esthétique, mais également efficace.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !