BlueGriffon : caractères et couleur

Posted on by


Dans cette page consacrée à BlueGriffon, nous avons examiné la manière dont BlueGriffon gérait les caractères. Nous avons pu découvrir les différents outils de la barre des outils et du menu Format.

Nous avons également constaté qu’il semblait manquer, en mode éditeur graphique, deux outils importants pour la mise forme des caractères : un outil permettant de modifier la couleur et un offrant la possibilité de modifier la taille des caractères. Cette page vous propose de découvrir les possibilités offertes par BlueGriffon en ce qui concerne les couleurs. Vous pourrez constater qu’il n’est pas nécessaire de passer par l’édition du code pour gérer la couleur et la taille des caractères.


1- Les couleurs .


a- Le texte à modifier

Créez une page web dans BlueGriffon Écrivez les quelques lignes reproduites dans la copie d’écran ci-dessous.

Copie d’écran


Information Pour mettre en forme le texte ci-dessus, revenez à la ligne en appuyant sur les touches Majuscule et Entrée. Ce texte est contenu dans un seul paragraphe avec un simple retour à la ligne en fin de ligne.

b des balises <span>


Faites Plaçons chacune des lignes du texte entre deux balises <span> et </span> :

  1. Sélectionner la première ligne
  2. Cliquer sur Format->Span ou utiliser le raccouri clavier shift-ctrl-P créé dans cette page
  3. Recommencer 1 et 2 pour les deux autres lignes

Copie d’écran


Observez
Si vous avez bien réalisé la manipulation précédente, lorsque vous cliquez sur une des 3 lignes vous devez voir au bas de l’éditeur les balises <body><p><span> affichées comme le montre la copie d’écran ci-dessus. De plus, un clic sur la balise <span> devrait sélectionner la ligne dans laquelle le curseur cligote. Dans la partie code vous derviez voir ceci :

Code source

<p>

<span>Nous allons écrire un texte en</span><br />

<span>bleu blan rouge pour la couleur du texte</span><br />

<span>et jaune noir vert pour le fond</span><br />

</p>


2 Les couleurs ! les couleurs !

Laissons de côté, pour le moment le code. Vous pouvez retrouver ici l’évolution de ce code initial. La question reste posée :
Comment pouvons-nous changer la couleur des différents caractères d’un texte alors que le menu et les boîtes à outils de BlueGriffon ne contiennent aucun item qui permettrait de procéder à ce changement ?

La réponse est : en créant un style couleur qui sera associé aux balises <span> que l’on vient de créer. Certes, mais comment procéder ?


a les styles css

Vous trouvez dans barre des outils, cette icône placée en lettrine du présent paragraphe. En la survolant avec le curseur de la souris une étiquette est affichée Styles CSS. Si vous cliquez sur cette icône vous n’aurez pas ditectement accès, comme dans un traitement de texte, à un tableau de couleurs sur lequel vous pourriez cliquer pour changer la couleur d’un texte sélectionné. Certains le regretteront. Je pense qu’un éditeur de pages HTML, n’est pas un logiciel de traitement de texte. Passer par cet outil n’est pas un détour insupportable c’est au contraire une démarche qui devrait permettre de créer une charte graphique cohérente. Cliquez donc sur cette icône.

b Création d’une classe nommée txtbleu


Information Comme vous le voyez dans la copie d’écran ci-dessous, une fenêtre de configuration des styles intitulée Styles CSS est ouverte. Le but de cette page n’est pas d’étudier en détails toutes les possibilités de cet outil essentiel de BlueGriffon. Notre objectif est précis et limité : créer une classe que nous nommerons txtbleu et que nous associerons à la première ligne de notre texte.

Copie d’écran


Faites la copie d’écran ci-dessus ne reproduit pas l’intégralité de la fenêtre Style CSS, mais vous devriez vous y retrouver. De haut en bas :

  1. Une liste déroulante offre la possibilité de créer divers types de style. Par défaut est sélectionné « Appliquer les styles à : uniquement cet élément via son ID ». Ouvrez la liste déroulante et sélectionnez tous les éléments de la classe…, comme sur la copie d’écran ci-dessus.
  2. Une ligne d’édition est alors ouverte.Écrivez txtbleu
  3. Ouvrez le dossier Couleurs
  4. Comme le montre la copie d’écran ci-dessus, vous voyez deux boutons nommés Couleur de texte et Couleur de fond. cliquez sur Couleur de texte. Une fenêtre de choix des couleurs est ouverte.

Copie d’écran


Faites Cette fenêtre de choix reproduite dans la copie d’écran ci-dessus ne devrait poser aucun problème. Pour réaliser l’objectif fixé, écrivez le nom de la couleur blue, cliquez sur OK. Le bouton Couleur de texte de la fenêtre Styles CSS devrait maintenant être bleu en son centre.

De la même façon que vous avez créé une classe txtbleu, créez une classe txtblanc, nom de la couleur white et une classe txtrouge, nom de la couleur red

Cela étant fait vous pouvez créer les classes des trois couleurs de fond que vous nommerez fondvert, nom de la couleur green, fondnoir, nom de la couleur black, fondjaune, nom de la couleur yellow. Vous voyez dans la copie d’écran ci-dessous la création de la classe fondvert.

Copie d’écran

c Association d’une classe à un « objet » html

Nous voudrions maintenant que chaque ligne de notre texte soit affichée en une couleur de texte et de fond différente, comme on le voit sur la copie d’écran ci-dessous.

Copie d’écran


Observez …la copie-décran ci-dessus. Le curseur est placée dans la troisième ligne, texte rouge, sur fond vert. Reamarquez que :

  1. La liste déroulante, en haut et à droite de la copie d’écran affiche fondvert txtrouge. La copie d’écran suivante et le panneau d’activités associés vous indiquent comment arriver à ce résultat.
  2. La ligne d’état en dessous de la zone d’édition ne contient plus seulement <span>, mais <span.fondvert.txtrouge>. Les noms des classes fondvert et txtrouge que nous avons créées sont donc été intégrées à la balise ouvrante <span>. Ces noms sont précédés d’un point, c’est une notation interne à BlueGriffon qui vous permet de différencier, à ce niveau, les différents types de style CSS.

Copie d’écran


Faites Comme vous le suggère la copie d’écran ci_dessus, pour associer la ligne 1 du texte aux classes fondvert et txtbleu, vous devez :

  1. Sélectionner la ligne 1, en cliquant dans cette ligne avec le bouton gauche de la souris, puis en cliquant dans la barre d’état en dessous de l’aire d’édition sur <span>
  2. Ouvrir la liste déroulante de droite et cliquer sur fondvert. La liste déroulante se referme ; elle affiche le nom fondvert ; la ligne 1 est affichée sur un fond vert ; la barre d’état contient maintenant <span.fondvert>
  3. Rouvrez la liste déroulante et sélectionnez cette fois txtbleu. La ligne 1 est affichée comme nous le voulions, fond vert, texte bleu.
  4. Recommencez les actions 1,2 et 3 en les appliquant aux lignes 2 et 3. Bien entendu, vous sélectionnerez les classes adaptées à l’affichage voulu.


3 Comment ça marche ?

Nous avons vu au niveau de l’éditeur graphique les maniplations à faire pour modifier les couleurs du texte et du fond. Intéressons-nous brièvement à la manière dont tout cela à été retranscrit dans le code html.

a Code : le retour

Code source des styles CSS

<head>

<style type=« text/css »>

.txtbleu{
color: blue;
}

.txtblanc{
color: white;
}

.txtrouge{
color: red;
}

.fondvert{
background-color: green;
}

.fondnoir{
background-color: black;
}

.fondjaune{
background-color: yellow;
}

</style>

</head>

Code source de l’affichage

<body>

<p>

<span class= »textbleu » class= »fondjaune « > Nous allons écrire un texte en </span><br />

<span class= »textblanc » class= »fondnoir « >bleu blanc rouge pour la couleur du texte </span><br />

<span class= »textrouge » class= »fondvert « > et jaune noir vert pour le fond </span>

</p>

</body>


Faites Ces deux colonnes placées côte à côte montrent le code produit par BlueGriffon après les manipulations que nous avons faites pour changer les couleurs des caractères et de fond de chaque ligne de notre texte.

  1. Dans la partie gauche on voit l’écriture entre les balises de l’en-tête du code html <head>, encadrées par les balises <style…> et </style>, des styles que nous avons créés à partir de l’éditeur de styles CSS. Six styles ont été créés. Le nom de chaque style commence par un point (.); Ce point indique au navigateur qu’il s’agit d’une feuille de type classe.
  2. La colonne de droite montre l’enregistrement des associations que nous avons réalisées entre les classes mémorisées dans l’en-tête et les balises <span> qui encadrent chacune des lignes du texte. Pour mémoire vous pouvez consulter le code du texte avant la création des styles CSS ici.

b Portée des styles CSS

Vous aurez noté que que le nom du type de style class est intégré à une balise ouvrante, ici la balise <span>. Le mot class est un mot réservé. Il faut respecter cette orthographe anglaise pour qu’il soit reconnu par le navigateur web que vous utilisez. Une même balise peut contenir plusieurs classes. L’association entre la classe définie dans l’en-tête du code html est faite par le signe = suivi du nom de la classe entre guillemets. Toutes le classes définies dans une page sont utilisables par toutes les balises html auxquelles les attributs et leur valeur sont applicables. Ces valeurs sont alors appliquées dans les limites définies par une balise ouvrante et la balise fermante correspondant.

4 Conclusion

Peut-être serez vous de ceux qui penseront que tout cela est bien long pour permettre d’afficher trois malheureuses lignes en couleurs et vous frémissez à l’idée d’utiliser les couleurs de l’arc en ciel ! Tenez compte du fait que cette impression est due, en grande partie, à la longueur de cette page et au désir qui est le mien d’essayer de donnér des explications détaillées.

Comprenez surtout que la conception de Bluegriffon est complétement liée à une bonne utilisation des feuilles de style, les CSS. En effet, les feuilles de style sont nées du désir de mettre plus de clarté dans le code et dans la tête des créateurs de site web. Pour cela il a semblé nécessaire de séparer la forme et le fond, le contenant et le contenu. Le contenant relève de la conception graphique de toutes le pages d’un site. Sa réalisation devrait s’appuyer sur une charte graphique qui devrait fixer la répartition des éléments de la page, les couleurs utilisées limitées à un nombre restreint et associées à des mises en évidence précises et pertinentes. Bref tous ces styles de positionnement, de couleurs, de dimension des contenants, etc… ne seront pas rassemblés comme nous l’avons vu dans l’en-tête d’une page mais dans un fichier que l’on nommera style.css, par exemple, et auquel on pourra accéder depuis n’importe quelle page.