É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.
Une page produite avec l'éditeur BlueGriffon
Je vous communique tout le code (ou presque) !
Le code généré pas BlueGriffon
<![CDATA[
...
<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 :
<![CDATA[
<style>
.boite {background : yellow ; height : 100px; overflow : auto ;}
</style>
]]>
J'ai du aussi insérer :
- du texte à l'intérieur du conteneur STYLE (qui était vide).
- à la balise BODY j'ai rajouté : style=" width :90% ; margin :auto;"
- à la balise TABLE j'ai rajouté : style="width: 80%;margin : auto;"
- à la balise IMG j'ai ajouté : style="width : 50%; display : block; margin :auto;"
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
<![CDATA[
<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 !
Pour générer le code CSS relatif à BODY j'ai utilisé différents onglets du panneau :
- "général" : pour définir la famille de police, la taille et la hauteur de ligne
- "géométrie" : pour définir la largeur de la page et marges
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
<![CDATA[
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