Éditeur de page Web "tel affichage, tel résultat"

L'éditeur de page Web wysiwyg ("what you see is what you get") le plus connu est DREAMWEAVER mais il n'est pas gratuit et cher.
Heureusement il existe une alternative gratuite BlueGriffon.

Présentation de BlueGriffon

L'installation est très simple. Vous allez sur le site officiel et vous effectuez un "download". Vous récupérez un fichier ZIP. Il suffit de le décompresser. Le dossier obtenu contient le fichier bluegriffon.exe. Il suffit de double cliquer sur ce fichier pour lancer l'application. Bien sûr je vous conseille d'associer au fichier exécutable un raccourci sur le bureau pour un démarrage rapide du programme.

Interface de BlueGriffon

Ci-dessous l'écran avec BlueGriffon. Une page est ouverte par le logiciel.
J'ai demandé "Vue combinée" donc on a l'aperçu avec le navigateur à gauche et le code HTML & CSS à droite. bluegriffon

Une page produite avec l'éditeur BlueGriffon

Je vous communique tout le code (ou presque) !

Le code généré pas BlueGriffon

... <title>Onglet à fermer</title> <style> .boite {background : yellow ; height : 100px; overflow : auto ;} </style> </head> <body style=" width :90% ; margin :auto;"> <a href="#bas">Aller bas de page</a> <h1>Page produite avec BlueGriffon</h1> <p><strong>BlueGriffon est un éditeur de page Web wysiwyg. <br> C'est à dire dotée d'une interface graphique. Par exemple l'utilisateur dessine un tableau de données et le logiciel génère en arrière plan le code HTML correspondant. <br> </strong></p> <p><em>Ce qui est pratique avec ce genre d'outils c'est que l'on peut basculer de l'aperçu au code et vice-versa.</em> </p> Je vais utiliser ce logiciel pour produire une page contenant : <ul> <li>un lien vers une ancre</li> <li>une liste à puces</li> <li>une liste numérotée</li> <li>une liste de définitions</li> <li>une citation</li> <li>un tableau de données</li> <li>un texte avec mises en forme variées de certains mots</li> <li>une image</li> <li>une vidéo</li> <li>une boite contenant un texte en latin <li>une ancre</li> <li>etc.</li> </ul> <ol>Liste numérotée : <li>item</li> <li>item</li> <li>item</li> </ol> <dl>Liste de définitions : <dd>définition 1</dd> <dd>définition 2</dd> <dd>définition 3</dd> </dl> <p> <cite>Tout ce qui conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.</cite></p> <table style="width: 80%;margin : auto;" border="1"> <tbody> <tr align="center"> <td rowspan="1" colspan="5"> <h3>Barème au 1er janvier 2019</h3> </td> </tr> <tr> <td>référence</td> <td>désignation</td> <td>prix unitaire HT</td> <td>code TVA</td> <td>rem.</td> </tr> <tr> <td>BO111</td> <td>boulons</td> <td>5</td> <td>N</td> <td><br> </td> </tr> ... <tr> <td>EC114</td> <td>écrous</td> <td>12</td> <td>R</td> <td><br> </td> </tr> </tbody> </table> <h2>Texte avec mises en forme variées de certains mots</h2> <sub>Mot </sub>en indice.<sup>Mot </sup>en exposant. Mot en <b>gras</b>. Mot en <i>italique</i>. Mot en <u>souligné</u>. Mot en <span style="color: #ff6666;">rouge</span>.<br> <h2>Insertion d'une image</h2> <img src="../images/actinie_verte.jpg" alt="actinie verte" style="width : 50%; display : block; margin :auto;"> <h2> Insertion d'une vidéo</h2> <video src="../audio_video/balane.mp4" poster="../images/balane.jpg" preload="auto" controls="controls" height="300"></video> <div style="border : 1px solid red;" class="boite"> Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. </div> <p><a name="bas" id="bas"></a>Bas de page</p> </body> </html>

Attention j'ai dû compléter un peu le code "manuellement" (en basculant en mode "code source")
Création d'une feuille de style interne :

<style> .boite {background : yellow ; height : 100px; overflow : auto ;} </style>

Que ce soit l'insertion d'une image ou d'une vidéo ou encore d'une audio, il faut surtout cocher la case "rendre l'URL relative au document" sinon le chemin vers le fichier sera exprimé en absolu ... bref un code invalide chez l'hébergeur du site.

Avec le logiciel on peut générer un lien vers une ancre à condition de créer l'ancre avant le lien !

Via la commande Insertion / élément HTML vous pouvez insérer n'importe quelle balise.

Dès que vous avez créé une classe (dans la feuille de style interne) vous pouvez l'appliquer à l'élément sélectionné. Ainsi dans l'exemple j'ai appliqué la classe "boite" à l'élément DIV.

Je vous conseille aussi de "nettoyer" régulièrement la page ; commande Outils/nettoyer le code

Vous verrez dans la deuxième partie de la page que vous pouvez aussi générer le CSS toujours en mode "wysiwyg".

Le rendu de ce code

Aperçu du code avec le navigateur !

Bluegriffon : générateur de CSS

Ne pensez surtout pas que BlueGriffon sert uniquement à générer du HTML. Ce logiciel permet aussi de produire une feuille de style interne.

Code HTML d'une autre page produite avec BlueGriffon

<body> <h1>titre de niveau 1</h1> <p> Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.</p> <h2>Titre de niveau 2</h2> <p> denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.</p> <h2>Titre de niveau 2</h2> <p> Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.</p> </body>

J'ai produit 6 blocs de texte. Puis j'ai appliqué à chaque bloc : "titre de niveau 1" OU "titre de niveau 2" OU "paragraphe".

J'ai ensuite produit la commande panneaux / style CSS ; un volet s'affiche à droite avec différents onglets !

Pour produire en WYSIWIG les règles de style relatives à l'élément BODY il suffit, en mode 'page web' de cliquer sur le bouton "BODY" situé entre le texte et la barre d'état.
Voir capture d'écran ci-dessous ! bluegriffon

Il faut ensuite répéter la même manipulation pour styler les titres et paragraphes.
Toujours en mode "page web", il suffit de cliquer successivement dans le texte sur un titre H1, un titre H2 et n'importe quel paragraphe et de renseigner les onglets pour générer le CSS correspondant à chaque balise.

La feuille de style de la page obtenue

body { font-family: "Arial"; font-size: 12px; line-height: 24px; width: 80%; margin-bottom: auto; margin-top: auto; margin-left: auto; margin-right: auto; } p { text-align: justify; letter-spacing: 2px; word-spacing: 6px; text-indent: 20px; } h1 { text-align: center; text-transform: uppercase; font-size: 140%; line-height: 48px; width: 80%; background-color: #999999; box-shadow: 5px 5px 5px 5px #666666; margin-bottom: auto; margin-top: auto; margin-left: auto; margin-right: auto; } h2 { font-size: 120%; line-height: 36px; text-transform: uppercase; background-color: silver; width: 60%; text-align: center; }

Grâce à BlueGriffon j'ai ainsi révisé mon CSS. Ainsi j'avais un doute sur la syntaxe des propriétés pour gérer l'espacement inter-lettres et inter-mots.
Observez attentivement les règles relatives aux balises P !

Le rendu de ce code

Aperçu de la page générée entièrement avec BlueGriffon !

La page est belle et en plus elle est "responsive" (largeur de la page exprimée en pourcentage de l'écran).
Retour menu