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

Travailler avec des styles de paragraphe

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez comment créer, appliquer et gérer des styles de paragraphe. Il s'agit d'accélérer et de faciliter la mise en forme des textes de votre site.

Transcription

Dans ce chapitre nous allons explorer diverses fonctionnalités vous permettant d'améliorer votre productivité en réutilisant divers éléments de votre site. Alors je suis toujours sur la page d'accueil de mon site depuis le chapitre précédent j'y ai apporté une série de petites modifications regardez j'ai simplement répartis les diverses boites de texte, que nous avions crée ensemble, j'ai ajouté certaines images, j'ai également dessiné dans le fond ces grands rectangles de couleurs qui me permettent d'avoir un petit décor de fond pour les différentes parties de cette page d'accueil. Bref, rien que vous ne sachiez pas déjà faire par vous même avec les connaissances que vous avez jusqu'à présent dans cette formation. Alors je vais partir maintenant du principe que le texte Jeux d'extérieur que je sélectionne ici pour le moment, possède la mise en forme que je veux affecter à l'ensemble des titres de mon site. Je vais donc sauvegarder les caractéristiques de mise en forme de ce texte dans un style et pouvoir réappliquer ce style à d'autres titres de ma page et même à des autres pages de mon site. Pour gérer les styles et bien Muse me propose dans le menu fenêtre, un panneau supplémentaire qui s’appelle Styles de paragraphes, et vous voyez que ce panneau n'est pas présent par défaut sur l'interface, donc je vais l'y ajouter maintenant, le voici qui s'y ajoute ici, sur le côté avec d'autres panneaux d'autres types de style qui sont là, on y reviendra plus tard dans ce chapitre. Et donc vous voyez que pour le moment le texte sélectionné n'est pas affecté à un style particulier, vous voyez qu'il est sans style. Alors je vais créer un nouveau style à partir du texte sélectionné pour se faire et bien dans le fond du panneau des styles de paragraphe j'ai une petite icône qui s'appelle Créer un style à partir des attributs appliqués, voila qui est fait donc ce style s'appelle Style de paragraphe, je vais double-cliquer sur le style de paragraphe que je viens de créer pour ouvrir cette petite boite qui va me permettre de changer le nom du style, je vais l'appeler TitrePage, voila. Je pourrais éventuellement changer la balise HTML que j'utiliserai pour ce style ici je vais garder la balise H1 je vous rappelle que cette balise H1 de l'HTML va vous permettre d'optimiser l'indexation par les moteurs de recherche de vos pages webs. Remarquez également que vous avez également un petit résumé ici de tous les paramètres de ce style. Donc je vais valider ceci et me voici avec un premier Style qui s'appelle TitrePage. Alors pour appliquer ce style à d'autres éléments, il me suffit de placer mon curseur à l'intérieur du paragraphe que je veux modifier, et puis d'aller cliquer sur le nom du style que je veux utiliser dans le panneau des styles de paragraphe. Remarquez que je n'ai pas dû sélectionner l'ensemble du texte comme je le fais ici le simple fait de me trouver à l'intérieur du paragraphe que je veux modifier suffit, tout simplement parce que je suis en train de travailler avec des styles de paragraphe, c'est à dire que Muse sait déjà à l'avance par le simple fait que se sont des styles de paragraphes et bien que ça doit s'appliquer à l'ensemble d'un titre ou d'un paragraphe, donc pas besoin de sélectionner, le simple fait d'être dans le paragraphe en question suffit. Alors on va pas s'arrêter en si bon chemin donc je vais créer maintenant un 2nd style donc je vais maintenant sélectionner voila, le texte qui est ici, je vais créer un autre style à partir des caractéristiques de ce texte donc je vais recliquer sur cette même icône et je crée donc un nouveau style de paragraphe dans mon panneau Styles de paragraphes. Alors avant de double-cliquer sur ce second style, j'ai envie de vous faire remarquer que le style a bien été crée cela dit le texte sélectionné n'est toujours pas lié à ce nouveau style vous voyez que dans le panneau style de paragraphe, c'est toujours la première entrée ici qui est sans style donc, qui est sélectionnée qui est en surbrillance quand je sélectionne mon texte. Pour véritablement faire le lien entre le texte sélectionné et le style que je viens de crée, et bien je vais devoir cliquer sur ce style et c'est maintenant seulement que le style en question est appliqué à ce texte. Donc je vais double-cliquer voila sur ce second style, lui donner un autre nom je vais l'appeler par exemple CorpsDeTexte comme ceci, je vais choisir bien sûr la balise p de l'HTML qui me permet de définir des paragraphes, et puis de nouveau vous avez ici les paramètres du style qui vous sont affichés dans cette boite. donc je valide et je vais bien évidemment appliquer ce style aux autres paragraphes dans les autres colonnes et voila comment très facilement et très simplement je peux donc réutiliser mes styles. Alors c'est pas tout, regardez, si je sélectionne ici un petit bout de texte voila et que je décide de modifier la mise en forme par exemple je vais changer la taille du texte de 17 points en 16 points par exemple. Et bien à ce moment là vous voyez dans le panneaux des styles de paragraphes que le texte sélection et bien il répond au style au style Corps de texte mais avec un petit plus à côté, et bien le petit + signifie qu'il y a quelque chose en plus qui a été ajouté après l'application du style. Et là dans la petite bulle jaune, vous voyez ce qu'il se passe, donc vous avez cette ligne pointillée là, au dessus de la ligne pointillée vous avez les caractéristiques du style et puis en-dessous de la ligne pointillée, vous avez tout ce qui a changé depuis l'application de ce style dans mon cas une taille de 16 points. Alors comment pouvez-vous gérer cette situation? Et bien il y a plusieurs façons de faire, vous avez ici plusieurs icônes dans le fond du panneau, la première d'entre elles s'appelle Effacer les remplacements, et quand j'appuie sur cette icône vous voyez que le petit + disparaît à côté du nom du style, et le texte sélection et bien il retrouve sa taille originale de 17 points, c'est à dire simplement que je réapplique le style de départ et donc que je supprime tous les ajouts qui ont été fait par la suite après l'application du style. Alors je vais remettre, voila ma taille de 16 points. Une autre façon de gérer cette situation c'est de cliquer sur l'icône juste à côté qui me permet de redéfinir le style sélectionné à partir des attributs appliqués. Donc quand j'appuie sur cette icône et bien là vous voyez que le petit plus disparaît également mais surtout vous voyez dans la bulle jaune que le style a été redéfini puisque il définit maintenant une taille de 16 points plutôt qu'une taille de 17, et donc par ricochet je vais dire, les autres éléments de mon site qui sont liés à ce style ont été redéfinis puisque les deux autres colonnes utilisent maintenant une taille de texte de 16 points. Voici donc une manière tout à fait pratique de propager une série de modifications dans l'ensemble de vos pages web. Alors une autre façon encore de gérer ces styles, regardez je me place ici dans un paragraphe, je peux cliquer sur cette icône ci qui s'appelle Dissocier le style de la sélection, à ce moment là vous voyez que la mise en forme du texte ne change pas mais le texte n'est plus lié au style, ça veut dire quoi, et bien ça veut dire que si j'apporte une modification à mon style, par exemple ici je vais changer de nouveau de manière assez drastique la taille du texte et puis modifier mon style, et bien vous voyez que mon premier paragraphe ici n'a pas été transformé tout simplement parce qu'il ne répond plus à ce style il est dissocié de ce style et donc les changements que j'apporte au style n'affectent plus ce paragraphe. Alors évidemment je vais remettre tout ça en place et donc ici je vais remettre le style corps de texte sur ce texte là, remettre une taille de 16 points pour cet élément, voila, redéfinir le style et donc vous voyez, que les autres paragraphes suivent. Voici donc une première fonctionnalité qui vous permettra non seulement de réutiliser des éléments dans l'ensemble de votre site mais aussi de propager des modifications à l'ensemble de votre site et ce de manière automatique.

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 !