Rendez-vous sur le site de BlueGriffon à l’adresse : http://bluegriffon.org/pages/Download. Vous verrez le tableau ci-dessous  :

Copie d’écran

Au-dessus de ce tableau vous trouvez le numéro de la version stable la plus récente, la date de sa publication et son petit nom. À la date du 7 avril 2012 vous pouvez lire ceci :
Most recent stable version: v 1.4.1 « Lothal » 02-mar-2012.

Attention Si vous devez installer BlueGriffon, dans une distribution GNU/Linux qui utilise un noyau de la branche 2.6, comme les versions de Ubuntu antérieures à Ubuntu 10.10, Debian 6, Mageia 1, etc.. ne choisissez pas la version de BlueGriffon 1.4.1, mais la version 1.4

Si vous n’êtes pas dans le cas signalé par le panneau ci-dessus, vous choisirez donc le fichier téléchargeable à partir du lien download tar.bz2 placé en face de Ubuntu 11.10., en fonction de la configuration de votre ordinateur en 32 ou 64 bits. Si vous ne savez pas de quoi il retourne choisissez 32 bits.

Explications Les fichiers dont l’extension du nom est tar.bz2. sont des archives compressées. Des archives, cela signifie que sont réunis en un seul fichier, un ensemble de fichiers et répertoires dont l’arborescence est conservée et sera restituée lors du désarchivage. Ils sont compressés au format bz2 qui est un protocole de compression très efficace et très utilisé dans les systèmes Unix et Linux. Toutes les distributions GNU/Linux disposent d’un outil graphique qui permet le désarchivage et la décompression des ces fichiers.

Certains d’entre vous voudront peut-être télécharger la version 1.4 de BlueGriffon parce qu’ils utilisent une distribution avec laquelle BlueGriffon ne fonctionne pas comme je l’ai indiqué dans un premier panneau attention.Voici les informations qui vous permettront de procéder à ce téléchargement.

Information Notez cependant que sur le site de ubuntu, une solution est proposée à ceux qui rencontreraient les difficultés liées à l’installation d’une version 1.4.1. Je n’ai pas testé cette solution. J’ai préféré charger la version 1.4 dans ce cas là. Si vous voulez mettre en œuvre la solution préconisée par la documentation Ubuntu, allez à cette adresse :
http://doc.ubuntu-fr.org/bluegriffon#installation

Poursuivons. En faisant défiler ves le bas la page de téléchargement de BlueGriffon, vous devez découvrir une série de liens qui pointent sur d’anciennes versions du logiciel. Vous devriez voir ceci :

Cliquez, comme vous le montre la copie d’écran ci-dessus, sur le lien version 1.4. La page qui s’ouvre vous offre la possibilité de télécharger diverses versions de Bluegriffon.

Pour choisir la bonne version de Bluegriffon, survolez les différents liens affichés. Observez dans la barre d’état de votre navigateur (en bas de celui-ci)… vous verrez le nom complet du fichier, malheureusement tronqué dans le taleau affiché. Par exemple, au survol par le curseur de la souris du deuxième nom de fichier, vous voyez dans la barre d’état le nom complet : http://bluegriffon.org/freshmeat/1.4/BlueGriffon-1.4-Linux-x86.tar.bz2. Le nom du fichier est évidemment la dernière partie du lien. On y aprrend que :

Explications

1. Le nom du logiciel est BlueGriffon,
2. Le numéro de version est 1.4
3. Le système d’exploitation sur lequel le logiciel fonctionne est Linux
4. Le type de processeur avec lequel le logiciel fonctionne est x86, c’est à dire un type d’architecture 32 bits.
5. Qu’il est archivé et compressé comme l’indique l’extension de nom .tar.bz2

.

Pour installer la dernière version stable de BlueGriffon, cliquez sur download tar.bz2 adapté à votre ordinateur (32 ou 64 bits), ou sur le bon lien de téléchargement de la version 1.4, comme indiqué dans le paragraphe précédent. S’affiche alors à l’écran un boîte de dialogue qui vous propose de choisir entre le téléchargement du fichier et son ouverture dans un gestionnaire d’archives, semblable à la copie d’écran ci-dessous…

…ou à celle ci-dessous selon le navigateur que vous utilisez sur votre système.

Une fois que vous avez opté pour l’ouverture du fichier BlueGriffon par un gestionnaire d’archives, le téléchargement commence. Lorsque le tranfert du fichier est terminé, la fenêtre du gestionnaire d’archives s’ouvre. Elle peut ressembler à ceci…

observez Vous constatez, en observant cet outil qu’il comprend une aire d’affichage dans laquelle se trouve un dossier nommé BlueGriffon. Si vous cliquez sur ce dossier, l’aborescence est ouverte et les sous-dossiers et fichiers sont affichés. Vous devez cliquer sur le bouton Extraire pour installer BlueGriffon désarchivé et décompressé sur votre disque dur.

Le clic sur le bouton Extraire déclenche l’ouverture d’une boîte de dialogue qui ressemble à ceci…

Remarque J’écris « ressemble » car j’ai testé cette installation sur toutes les distributions Linux installées sur mes ordinateurs personnels. La copie d’écran ci-dessous vient d’un test sur une distribution Linux Mint 12. Le navigateur web que j’ai utilisé à cette occasion est le navigateur opera.

Observez De haut en bas sur la copie d’écran ci-dessus…

1. Le fichier BlueGriffon ouvert par le gestionnaire d’archives, ark en la circonstance, a bien été enregistré sur le disque dur dans un dossier temporaire…pierre/.opera/temporary_download. Il s’agit du fichier BlueGriffon-1.4.1-Linux-x86.tar.bz2.
2. Le dossier pierre est le nom du dossier personnel de celui qui utilise la machine. Il correspond à l’identifiant de l’utilisateur…C’est dans ce dossier que nous voulons extraire le fichier BlueGriffon.
3. Notez le point du nom du dossier .opera. Il s’agit d’un fichier caché. Tous les noms des dossiers ou fichiers commençant par un point sont des dossiers ou fichiers cachés.
4. Colonne Extraire, le choix Tous les fichiers doit être coché.
5. Colonne Actions les cases Recréer les dossiers et Écrasez les fichiers existants sont cochées.
6. Le bouton, Extraire en bas et à droite sur lequel vous ne DEVEZ SURTOUT PAS CLIQUER AVANT D’AVOIR SÉLECTIONNÉ LE DOSSIER PIERRE.
7. Notez que le bas de l’image est une copie d’écran enregistrée après la sélection du répertoire pierre. Après avoir sélectionné ce répertoire, vous pouvez cliquer sur le bouton Extraire

La suite ne devrait pas poser de problème, comme le montre la copie d’écran ci-dessous. L’extraction se déroule et vous pouvez constater dans un gestionnaire de fichiers que le dossier BlueGriffon est bien enregistré dans le dossier pierre.

Ouvrez le gestionnaire de fichier de la distribution Linux que vous utilisez. Vous devez retrouver le dossier BlueGriffon. Cliquez sur ce dossier pour l’ouvrir. Vous trouverez un fichier nommé bluegriffon. Faites un double clic sur ce fichier. Si tout va bien le logiciel BlueGriffon s’ouvrira !

La copie d’écran ci-dessus vous montre le gestionnaire de fichiers de la distribution Mandriva et le fichier bluegriffon sur le quel il faut faire un double clic.

Cette méthode peut paraître fastidieuse. Il faut chaque fois ouvrir le gestionnaire de fichiers, ouvrir le répertoire BlueGriffon, double cliquer sur le bon fichier. Il semblerait nettement préférable d’intégrer un lanceur à un menu, de le placer surr le bureau, dans un tableau de bord, ou une barre des tâches selon les distributions.Nous prendrons l’exemple de l’ajout d’un lanceur dans une distribution opensuse 12.1 avec l’interface graphique KDE et d’un lanceur pour une distribution Ubuntu 11.10 et son interface graphique Unity.

• Lanceur dans une distribution OpenSuse 12.1 :

  Certaines distributions Linux utilisent le gestionnaire de fenêtres KDE. Parmi elles Kubuntu, dérivée d’Ubuntu. Pratiquement toutes les grandes distributions, Fedora, Debian, etc..offrent la possibilité d’utiliser KDE. C’est avec OpenSuse que nous allons montrer l’installation d’un lanceur sur le bureau.
  Le bureau KDE se présente ainsi :

  Copie d’écran
  

  
  

  
  observez Le bureau KDE utilise une fenêtre transparente qui occupe une partie limitée de l’écran comme vous pouvez le voir dans la copie d’écran ci-dessus. L’image ci-dessus ne montre qu’une partie de l’écran. Le bureau KDE occupe, selon la résolution des écrans entre un sixième et un cinquième de la surface de l’écran. On peut évidemment le positionner sur l’écran et le configurer. Les lanceurs de différentes applications y sont rangées automatiquement. Un seul clique sur l’icône du logiciel que l’on veut lancer suffit pour déclencher l’exécution de l’application choisie.

  C’est sur ce bureau que nous voulons placer un lanceur BlueGriffon. Pour cela un clic droit sur le bureau tel que nous venons de le présenter ouvre un menu contextuel comme vous le montre la copie d’écran ci-dessous.

  Copie d’écran
  

  
  

  Survolez avec le curseur Créer un nouveau pour faire apparaître le sous-menu à droite du menu pricipal. Cliquez sur Lien vers une application. La fenêtre affichée dans la copie d’écran ci-dessous est ouverte.

  Copie d’écran
  

  
  

  Cette boîte de dialogue comprend plusieurs onglets. Nous ne nous occuperons que de l’onglet Général, ouvert par défaut et de l’onglet Application. À la place de Lien vers une application, écrivez BlueGriffon. le système utilisera cette étiquette sur le bureau pour identifier l’application à lancer. Cliquez maintenant sur l’onglet Aplication. Vous devriez voir quelque chose qui ressemble à la copie d’écran ci-dessous.

  Copie d’écran
  

  
  

  Remplissez les champs comme vous le voyez sur la copie d’écran ci-dessus. Cela est évidemment valable si vous avez installé Bluegriffon dans le réperoire pierre et que par voie de conséquence le chemin d’accès au fichier exécutable bluegriffon est /home/pierre/BlueGrifffon/bluegriffon. Si tel n’était pas le cas, vous pouvez cliquer sur le bouton parcourir. Le gestionnaire de fichier sera ouvert et vous pourrez retrouver l’emplacement du fichier exécutable bluegriffon. Vous cliquez sur OK, dans la boîte de dialogue et vous trouverez le lanceur intégré au bureau KDE.

  Il ne reste plus qu’à régler le problème de l’icône associée à ce lanceur. par défaut le système installe cette icône . Il est évident que si vous installez plusieurs lanceurs vous voudriez que chacun d’entre eux soient associés à une icône spécifique.

  Pour remédier à cela, cliquez vaec le bouton droit de la souris sur le lanceur que vous venez d’installer. Un menu contextuel s’ouvre. tou en bas de ce menu, sélectionnez l’item Propriétés. La boîte de dialogue précédemment ouverte de création d’un lien vers une application est ouverte. Vous retrouvez l’onglet Général et l’icône . Cliquez sur cette icône. Un gestionnaire de fichiers s’ouvre et vous pouvez choisir l’image que vous voulez pour l’appication Bluegriffon. Bien entendu le logo BlueGriffon sur le site de l’application serait le plus adapté…Cliquez sur OK. Re bingo, l’icône par défaut est remplacée par .

• Lanceur dans une distribution Ubuntu 11.10

  J’ai délibérément choisi de parler de l’installation d’un lanceur dans la distribution Ubuntu 11.10 parce que la prochaine version d’Ubuntu, la 12.04 sort le 27 avril 2012. Cette prochaine version sera une version LTS (Long Term Support), c’est à dire une version sur laquelle Ubuntu garantit une maintenance sur le long terme. Pour les utilisateurs d’Ubuntu, ceux qui veulent le rester, il est important de se familiariser avec cette nouvelle version, et ce, d’autant plus que la durée de la maintenance est allongée et passe de 3 ans à 5 ans. La prochaine version d’Ubuntu sera donc maintenue jusqu’en avril 2007…

  Certes, la version LTS 10.04, devrait être maintenue jusqu’en avril 2013, mais l’installation d’un nouveau lanceur dans cette version 10.04, ne pose aucun problème. Un clic droit sur le bureau ou dans le tableau de bord supérieur et on ouvre une boîte de dialogue qui permet de choisir d’ajouter un nouveau lanceur. La procédure, même si l’interface graphique est différente est semblable à ce que nous avons vu pour OpenSuse 12.1. Mieux encore, en utilisant le menu Système->Préférnces->Menu pricipal, on ouvre une interface graphique qui vous permet de facilement intéger au menu Applications->Internet, par exemple, un lanceur pour Bluegriffon.

  Il n’en va pas de même avec la nouvelle interface graphique, Unity proposée par Ubuntu depuis la version 10.11. L’installation de Bluegriffon ne pose aucun problème et vous pouvez lancer l’exécution de ce logiciel en utilisant la navigateur de fichiers intégré au tableau de bord latéral gauche. nous avons déà vu cela.
  Inutile de faire longs développements sur l’interface Unity. Ce n’est pas le sujet de cette page. J’y consacrerai quelques pages lorsque la version 12.04 sera publiée. Quelques copies d’écran suffiront à vous guider pour l’intégration d’un lanceur dans un menu ou dans le tableau de bord, appelé dash en anglais.

  Copie d’écran
  

  
  

  
  Observez La copie d’écran ci-dessus montre le coin supérieur gauche de l’écran d’une distribution Ubuntu 11.10. Le deuxième bouton, en dessous du mot Éditeur est le lanceur du navigateur de fichiers d’Ubuntu, Nautilus. Cliquez sur ce lanceur pour retrouver la procédure de lancement que nous avons vu précédemment. En revanche, un clic sur le premier bouton permet d’obtenir une nouvelle présentation du bureau d’Ubuntu, comme le montre la copie d’écran ci-dessous.

  Copie d’écran
  

  
  

  
  Observez Le lanceur sur lequel vous venez de cliquer ouvre une ligne d’édition dans laquelle vous écrivez le mot terminal puis validez. Les applications de type terminal installées dans le système sont affichées. Cliquez sur la première marquée Terminal. Un terminal est ouvert…

  Copie d’écran
  

  
  

  
  Faites Un curseur clignote dans ce terminal. Écrivez très précisément ce que vous voyez écrit sur la copie d’écran ci-dessus :

  sudo apt-get install gnome-panel

  puis validez. Votre mot de passe utilisateur vous est demandé. Écrivez-le, puis validez. Le programme installe le paquet gnome-panel. Comme vous aviez écrit le mot Terminal, ici, écrivez alacarte, tout attaché. Une icône MainMenu est affichée. Cliquez sur celle ci. Certains d’entre-vous vont retrouver un outil familier de la version 10.04 d’ubuntu : l’éditeur de menu comme le montre la copie d’écran ci-dessous.

  Copie d’écran
  

  
  

  
  Faites Comme le montre la copie d’écran ci-dessus, dans la colonne de gauche, cliquez sur Internet, puis ur le bouton New item ou Nouvel élément, si la version que vous utilisez de alacarte est mieux francisée…Une boîte de configuration Créer un lanceur est ouverte.

  Copie d’écran
  

  
  

  
  Faites Remplissez les champs comme vous le voyez sur la copie d’écran ci-dessus. Le champ commande est :

  /home/pierre/BlueGriffon/bluegriffon

  Bien entendu vous remplacez l’dentifiant pierre, par votre identifiant personnel. Comme vu précédemment, il ne vous reste plus quà remplacer l’icône proposée par défaut, par celle de votre choix, le logo de BlueGriffon, par exemple. Cliquez sur Valider

  Copie d’écran
  

  
  

  
  Faites Pour accéder au lanceur, cliquez sur le bouton en haut du tableau de bord latéral. Un bureau s’ouvre. Cliquez sur l’icône Plus d’applications, cliquez sur Filtrer les résultats et enfin sur Tout.
  Faites défiler la liste jusqu’à ce que vous trouviez Bluegriffon comme le montre la copie d’écran ci-dessus. J’entends bien…quatre ou cinq clics pour lancer Blue Griffon…

  Copie d’écran .. autant utiliser le gestionnaire de fichiers ! Non, le but n’est pas encore atteint. Nous avons fait tout cela pour intégrer le lanceur au tableau latéral comme vous le voyez sur la copie à gauche. Donc, clic gauche sur l’icône de BlueGriffon et glisser/déposer dans le tableau de bord. Un seul clic et BlueGriffon est là.
  
  

J’ai effectué les tests d’installation par cette méthode sur tous les ordinateurs dont je dispose. L’installation réalisée de cette manière se déroule sans problème à condition, comme je l’ai signalé ici, de bien télécharger la version 1.4 de BlueGriffon pour cetrtaines distributions.. Sinon, avec Ubuntu 11.04, mandriva 2010, Ubuntu 11.10, OpenSuse 12.1, Linux Mint 12, Linux Mint Debian, Mageia 1.0, Fedora 16 Gnome, fedora 16 xfce, Studio Ubuntu 10.04 j’ai pu, après installation utiliser BlueGriffon normalement..

Information J’ai utilisé cette méthode d’installation pour vérifier qu’elle était fonctionnelle sur toutes les distributions Linux. Mais les plus attentifs n’auront pas manqué de remarquer que sur le tableau de téléchargement de BlueGriffon, il y avait la possibilité d’installer un fichier RPM installable automatiquement dans toutes les distributions qui utilisent les paquets au format RPM. Voir ce tabeau ici. J’ai testé cela avec OpenSuse 12.1, par exemple. Mieux encore, la dernière version de Fedora 16 propose dans les dépôts de la distribution, l’installation de BlueGriffon. Dans ces cas là, évidemment Bluegriffon est installé en un clic. Il est aussi intégré au menu de la distribution automatiquement.

Les limites de cette installation sont assez évidentes. BlueGriffon, n’est accesible que par un utilisateur puisqu’il est installé dans le dossier personnel d’un utilisateur déterminé. Il faudrait donc trouver un autre emplacement, acessible à tous les utilisateurs, pour installer le fichier désarchivé et déccompressé. Mais c’est une autre histoire…

a- Ouvrir un fichier

En revanche il est tout à fait possible que vous ayez sur votre disque un fichier html que vous auriez pu créer avec un éditeur de textes ou que vous auriez téléchargé sur internet. Vous auriez pu, par exemple, suivre les conseils que vous trouvez sur le site du zéro et écrire dan un éditeur,gedit ou kwrite, selon la distribution linux.

FaitesVous pourriez ouvrir ce fichier web correspondant au code ci-dessus dans BlueGriffon, mais l’intérêt resterait limité. Vous ne verriez qu’un simple affichage de la phrase Ici j’écris le contenu de ma page.Nous ne sous attarderons pas sur cette possibilité de découvrir l’outil BlueGriffon.

Nous ne nous attarderons pas non plus avec cette possibilité de prendre en mains BlueGriffon. Cette découverte du logiciel ne semble pas idéale pour des premiers pas.

Cliquez donc sur l’item Nouveau du menu..

La copie d’écran précédente vous montre le texte que nous avons écrit, en utilisant les différents types de texte proposés par la liste déroulante…paragraphe, titres de type 1,2,3,4,5,6…Cliquez sur le bouton d’accès au code. Si vous avez exactement écrit ce qui apparaît dans la copie d’écran précédente, le code associé devrait être semblable à celui présenté dans la copie d’écran ci-dessous.

Copie d’écran

Information Comme vous pouvez le constater, nous retrouvons les balises html, dont nous avions commencé à parler dans cette page. Vous devinez aisément que les balises <h1>,<h2>… <h6>, correspondent aux différents niveaux de titre. Notez que l’association entre une balise ouvrante <h1> et la balise fermante correspondant </h1> détermine un bloc dans lequel est écrit le texte. En l’absence de toute autre information, nous devons penser que les composantes taille, police, couleur, graisse, inclinaison, décoration sont prédéfinies par le système, ou mieux encore définies dans les spécifications de l’html. Nous ne pouvons que constater des variations de taille, le titre 1 utilise des caractères d’une taille plus grande que le style 2,etc…Lee caractères du style adresse sont inclinés et sont probablement en italique, le texte préformaté est écrit avec des caractères de police et de taille différents.

Essayons tout d’abord de découvrir dans la barre des outils, les icônes ou les listes qui permettent de moifier les écomposantes d’un caractère. Pour cela…

Faites
Cliquez dans chacune des lignes écites dans la fenêtre visualisation et observez les icônes de la barre d’outils qui sont activées en fonction de la ligne dans laquelle vous avez cliqué. Ci-dessous vous trouverez deux copies d’écran qui mettent en évidence les outils de modification des caractères.

Copie d’écran

Observez
Cette copie d’écran vous montre la barre des outils lorsque l’on clique dans la ligne Un titre de niveau 1 Je vous invite à observez les trois zones encadrées en rouge, vert et bleu.

1. Le cadre rouge est une liste déroulante qui permet de sélectionner un type de bloc d’écriture. Sa valeur est Titre de niveau 1
2. Le cadre vert entoure toutes les icônes qui permettent de modifier l’une ou l’autre des composantes d’un caractère. Dans ce cas là nous voyons que l’icône est activée. Cette icône permet de mettre en gras un ou plusieurs caractères sélectionnés.
3. le cadre bleu entoure une liste déroulante dont la valeur sélectionnée est Largeur variable. Nous verrons plus en détails le contenu de cette liste.

La copie d’écran ci-dessous montre les modifications apportées dans la barre des outils lorsque l’on clique dans la ligne Un texte préformaté . Vous constaterez qu’aucune icône de modification d’un caractère n’est activée. Seules les listes déroulantes sont modifiées, affichant d’une part, le type de texte, Préformaté, d’autre part,…un type une famille de pollice, Largeur fixe.

Copie d’écran

 Nous allons maintenant utiliser les icônes de modification des caractères accessibles dans la barre des outils. Elles sont au nombre de six…De gauche à droite vous trouvez la mise en :

1. emphase du texte sélectionné
2. emphase forte du texte sélectionné
3. type code du texte sélectionné
4. gras du texte sélectionné
5. italique du texte sélectionné
6. italique du texte sélectionné

Pour mettre en évidence la portée et les effets de ces outils, nous allons écrire dans BlueGriffon, les noms des modifications apportées par chacun des outils dans un le style de caractère associé. Vous devriez voir ce que montre la copie d’écran ci-dessous.

Observez
L’observation de la copie d’écran ci-dessus permet de constater que certaines modifications activent deux icônes. C’est le cas pour les « styles » Emphase et Emphase forte. Pour l’un l’icône est associée à l’icône , pour l’autre l’icône est associée à l’icône . Il est encore plus intéressant d’examiner, sur la copie d’écran ci-dessous, le code produit par BlueGriffon. Nous pouvons distinguer deux types de codes :

Observez
En effet, nous pouvons distinguer deux types de code :

1. des balise html simple, comme <em>, <strong> ou <code>
2. une autre balise <span> ouvrante et fermante. La différence avec les balise précédentes et que la blaise ouvrante contient une information supplémentaire de la forme <span style= »font-weight: bold; »>. Cela mérite un petit détour par la balise span et les feuilles de style (CSS).

Nous avons pu constater que le code associé à une action dans l’éditeur est produit automatiquement par BlueGriffon. Le but de ce paragraphe n’est pas de vous demander d’écrire dans la partie d’édition du code, mais d’utiliser cette édition du code comme un outil pédagogique qui vous apprendra à mieux maîtriser l’éditeur visuel.

Ainsi nous avons pu rencontrer un certain nombre de balises html qui « encadrent » les texte affichés. Nous n’en retiendrons que deux, la balise <p> et la balise <span>. Nous ne retiendrons également qu’une différence entre le comportement de ces balises par rapport au texte 

Information …la première <p> est une balise bloc, la deuxième, <span> est une balise dite inline, ce qui signifie que :

1. <p> affiche le texte en commençant par un retour à la ligne et un saut de ligne, après la balise fermante, il y a également un retour à la ligne. Tout le texte contenu entre la balise ouvrante et fermante est formaté de la même manière..sauf…
2. si entre la balise <p> et la balise </p>, le navigateur rencontre une balise <span>. Dans ce cas tout le texte contenu entre les balises <span> et </span> sera affiché dans la continuité du flux qui le précède et qui le suit, sans retour à la ligne ni saut de ligne.

C’est la tout l’intérêt de la balise <span>. En utisant les styles prédéfinis dans les feuilles de style on peut modifier la graisse des caractères, l’inclinaison, ou la décoration d’un mot qui sera souligné. C’est ainsi que nous avons retrouvé ces styles dans la balise ouvrante <span>. Nous reviendrons sur tout cela lorsque nous aborderons la gestion des feuilles de style par BlueGriffon

Nous avions remarqué la liste déroulante qui passait de la valeur Largeur variable à la valeur Largeur fixe , selon le choix que nous avions fait du formatage d’un texte : par exemple le type Paragraphe ou Préformaté. Cliquons sur la droite de la liste pour l’ouvrir. Vous devriez voir quelque chose qui ressemble à la copie d’écran ci-dessous.

Information Vous constatez que cette liste est une liste de polices de caractères. Pour modifier la police d’une phrase particulière, d’un mot, il suffit de sélectionner le texte à modifier à l’aide de la souris, d’ouvrir la liste, de cliquer sur le nom de la police de caractère désirée.

Une phrase en police Courier

Une phrase en police arial

Une phrase en police Century Schoolbook

Une phrase en police Beta Dance

Mais n’oubliez pas que le navigateur qui affichera votre texte va fonctionner sur une machine qui ne contiendra peut-être pas la police fantaisiste dont vous raffolez. Donc pour un affichage assuré, choisissez des polices classiques.

Enfin vous pouvez modifier les caractères d’un texte en utilisant le menu Format. La copie d’écran ci-dessous montre toutes les entrées de ce menu.

Information Vous constaterez d’abord que le menu Format double les outils accessibles directement par les icônes de la barre des outils. Par exemple, on y retrouve les outils Gras, Italique, Souligné,etc.. Mais on y découvre aussi certains outils qui ne sont pas disponibles dans les barres d’outils comme Barré. Notez que le B est souligné ce qui pourrait indiquer que cette fonctionnalité est accessible par le raccourci clavier Maj+b. Essayez de tester en sélectionnant dans l’éditeur de BlueGriffon, un mot, puis appuyez sur la touche majuscule et b, le mot sélectionné devrait être affiché barré. Mais…il n’en est rien…

---

Un mot de plus pour vous faire noter la présence de la balise span dans ce menu Format. Pour mettre un caractère, un mot, une phrase en relief, sélectionnez le texte voulu appuyez sur la touche n et le texte en question devrait être encadré par <span>. Devrait être, mais les raccourcis ne sont pas définis par défaut. Consulter la page À propos de, elle est consacrée à la configuration des raccourcis clavier.

---

Reportez-vous au paragraphe de cette page pour une première approche de cette balise ou à cette page pour une étude plus approfondie.

Une première question se pose. Comment supprimer le texte barré et surtout les balises <span style= »text-decoration: line-through; »>l’intérêt</span> présente dans le code ? L’idéal serait de pouvoir supprimer le style style= »text-decoration: line-through; » en conservant le texte l’intérêt.
Pour cela, une première méthode : passer dans le mode code et supprimer les balises <span> et </span> en gardant le texte l’intérêt.
Mais l’un des objectifs de ces pages sur BlueGriffon est de tout réaliser en mode éditeur visuel. Donc, la méthode…

Copie d’écran

Faites La copie d’écran ci-dessus peut sembler suffisamment parlante. Mais nous allons tout de même énumérer les actions à mettre en oeuvre pour supprimer les balises span tout en conservant le texte qu’elles encadrent.

1. Cliquer dans le mot intérêt. Un curseur clignote.
2. Cliquer avec le bouton droit de la souris sur le tag <span>, placé en-dessous de la fenêtre d’édition de BlueGriffon. Le tag <span> est affiché en inversion vidéo, fond noir, texte blanc. Dans le même temps le texte l’intérêt est affiché sur fond orange, texte blanc. Enfin et surtout un menu contextuel est ouvert.
3. Cliquer dans ce menu sur Supprimer le tag comme l’indique la copie d’écran ci-dessus. le tour est joué : texte conservé, tag span supprimé.

Tout cela est bel et bon mais l’objectif de ce chapitre était d’utiliser le raccourci shift-ctrl-B. Qu’à cela ne tienne…

Faites.

1. Sélectionner l’intérêt
2. Maintenez appuyées simultanément les touches majuscule, Ctrl, B.

Voilà c’est fait votre texte est à nouveau barré l’intérêt. Sisyphe quand tu nous tiens.

Une question vous taraude peut-être l’esprit : pourquoi avoir choisi une association de trois touches shift-ctrl-B ? Le raccourci ctrl-B, avec B comme Barré n’aurait-il pas suffit ? Oui, mais…

Faites. Reprenez la manipulation précédente.

1. Suppression du tag <span>
2. Sélectionner l’intérêt
3. Maintenez appuyées simultanément les touches Ctrl, B.

Et voilà l’intérêt…est en gras et non pas en barré.

Conclusion.Vérifier si le raccourci n’existe pas déjà.

Le raccourci ctrl-B existe par défaut. Il est associé à la mise en gras d’un texte. Donc si vous voulez utiliser ctrl-B pour mettre un texte en Barré, vous supprimerez le raccourci associé à la mise en gras d’un texte. Que faire ?

1. Bien regarder dans les menus, les raccourcis existant.
2. Si vous choisissez un raccourci qui existe, penser à le remplacer par un nouveau raccourci. Par exemple, pour mettre en gras un texte, on pourrait choisir ctrl-G, avec G comme gras en français. Auquel cas l’on pourrait affecter au texte barré ctrl-B

La question par rapport à la création de nouveaux raccourcis pourrait être : quels sont les raccourcis les plus utiles ? De mon point de vue, la réponse serait, la création d’un raccourci pour créer une balise span encadrant un texte me paraît une priorité pour une utilisation optimum de BlueGriffon.

Certes les balises <span> et </span> sont utilisées lorsque l’on modifie certaines composantes d’un caractère, mais elles sont toujours associées à un style, gras, italique ou autre.

Dans un usage plus approfondi de BlueGriffon, je veux pouvoir encadrer un texte sélectionné par <span> et </span>, puis lié ces balises à un style CSS que j’aurai créé moi-même comme permet de le faire BlueGriffon.

Que choisir ?. Quel raccourci choisir pour le tag <span> ?

On va penser aux lettres du mot s p a n. Oui mais…ctrl-S est un raccourci traditionnellement utilisé pour la fonction Enregistrer de la plupart des applications et shift-ctrl-S est utilisé pour la fonction Enregistrer sous. ctrl-P est utilisé pour lancer une impression, ctrl-A pour sélectionner un ensemble de texte… ctrl-N sert à ouvrir une nouvelle fenêtre ou une nouvelle page selon les applications. c’est le cas de BlueGriffon. Fnalement, vu que la première lettre est utilisée , y compris avec shift, je me rabats sur la deuxième, ce sera donc shift-ctrl-P comme le montre la copie d’écran ci-dessous.

Le vaiqueur est…shift-ctrl-P

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.

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.

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

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.

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.