Changement de main d'un site avec Bluegriffon

Bonjour à tous,

Tout d'abord, désolé si je n'ai pas choisi la bonne catégorie, mais il est vrai que je ne savais pas trop ou mettre ce sujet. Désolé aussi pour les fautes de français qui seront sûrement présent dans ce topic.

Alors voila, j'ai fait un site (statique) pour un collègue, et maintenant, mon collègue souhaite avoir la main dessus pour qu'il puisse y rajouter du contenu lui même, sauf qu'il n'a aucune connaissance en HTML CSS et JS. Je passe les détails qui nous on fait choisir cette méthode, ce serais bien trop long a expliquer. Quoi qu'il en soit, j'ai encoder le site "à l'ancienne" c'est a dire, avec un éditeur de code, mes lignes de codes et c'est tout.

Vous voyez venir le problème ? Mais j'ai trouver une "solution": L'utilisation d'un générateur de site statique nommé Bluegriffon, pour que mon collègue puisse ajouter facilement du contenu sur son site.

J'y viens,

Le problème est que, quand je fais des test (car je n'ai jamais utiliser ce type de logiciel), j'ai quelques soucis:

Je souhaite ajouter un roman sur le site dans la DIV dédié, sauf que Bluegriffon me remplace tout le contenu présent pour laisser place à l'image que j'ajoute.

Voila l'adresse du site: http://enquetes.en.bretagne.free.fr/

Voila la section de code en question (pour l'ajout des romans):

<!--Books-->
<div class="bg-color-book">
<div class="bookContain">
    <h2 class="bC-title">Mes Romans</h2>
    <div class="bC-container">
        <a href="secret.html"><div class="book" style="background: url('book/secret.png'); background-size: cover;"></div></a>
        <a href="fantome.html"><div class="book" style="background: url('book/fantome.png'); background-size: cover;"></div></a>
        <a href="tsar.html"><div class="book" style="background: url('book/tsar.png'); background-size: cover;"></div></a>
        <a href="meutres.html"><div class="book" style="background: url('book/meutres.png'); background-size: cover;"></div></a>
        <a href="bouddah.html"><div class="book" style="background: url('book/bouddha.png'); background-size: cover;"></div></a>
        <a href="sonneur.html"><div class="book" style="background: url('book/sonneur.png'); background-size: cover;"></div></a>
        <a href="sorcier.html"><div class="book" style="background: url('book/sorcier.png'); background-size: cover;"></div></a>
        <a href="cadavre.html"><div class="book" style="background: url('book/cadavre.png'); background-size: cover;"></div></a>
        <a href="babouche.html"><div class="book" style="background: url('book/babouche.png'); background-size: cover;"></div></a>
        <a href="chouchen.html"><div class="book" style="background: url('book/chouchen.png'); background-size: cover;"></div></a>
        <a href="diamands.html"><div class="book" style="background: url('book/diamands.png'); background-size: cover;"></div></a>
        <a href="memoire.html"><div class="book" style="background: url('book/memoire.png'); background-size: cover;"></div></a>
        <a href="faiencier.html"><div class="book" style="background: url('book/faiencier.png'); background-size: cover;"></div></a>
        <a href="crepes.html"><div class="book" style="background: url('book/crepes.png'); background-size: cover;"></div></a>
        <a href="fut.html"><div class="book" style="background: url('book/futs.png'); background-size: cover;"></div></a>
        <a href="joseph.html"><div class="book" style="background: url('book/joseph.png'); background-size: cover;"></div></a>
        <a href="vallee.html"><div class="book" style="background: url('book/vallee.png'); background-size: cover;"></div></a>
        <a href="zappa.html"><div class="book" style="background: url('book/zappa.png'); background-size: cover;"></div></a>
        <a href="blockhaus.html"><div class="book" style="background: url('book/blockhaus.png'); background-size: cover;"></div></a>
        <a href="naufrage.html"><div class="book" style="background: url('book/naufrage.png'); background-size: cover;"></div></a>
        <a href="jument.html"><div class="book" style="background: url('book/jument.png'); background-size: cover;"></div></a>
        <a href="talisman.html"><div class="book" style="background: url('book/talisman.png'); background-size: cover;"></div></a>
    </div>
</div>
</div>
<!--End books-->

Si quelqu'un peut m'éclairer, ce serait vraiment super, car j'ai tout essayé, mais je ne trouve pas la solution.

Merci d'avance,
Passez une bonne journée, soirée.
Kerrry.