[Logiciel] BlueGriffon est un logiciel libre d’édition de pages web WYSIWYG, successeur de Mozilla Composer et Nvu.

BlueGriffon propose un éditeur WYSIWYG (X)HTML open source dans la lignée de Nvu et Kompozer. L’application reprend le moteur Gecko au travers de Mozilla Xulrunner pour le rendu des pages Web, le même utilisé par le navigateur Internet Firefox.

Il y a quelques années j’utilisais Nvu l’éditeur HTML de Mozilla. Sans doute le meilleur Freeware de sa catégorie dans les années 2000. Simple à utiliser, il est très performant sur les tableaux.  Il inclut un gestionnaire de site qui permet de mettre de manière simple et rapide son site à jour…

Aujourd’hui BlueGriffon intègre jQuery, un éditeur CSS compatible CSS3, un assistant de création de documents intuitif, Bespin pour l’édition des fichiers sources ainsi qu’un éditeur de script.

L’interface utilisateur permet de travailler en mode plein écran afin d’avoir une meilleure vision du projet.

Avec BlueGriffon il est très facile de visualiser en direct le résultat suite à la modification du code HTML. J’ai donc réalisé les pages des galeries d’images qui vous pouvez voir ici en utilisant le logiciel BlueGriffon.

Voici quelques exemples de codes que j’ai intégré pour la réalisation des pages HTML, avec du CSS.

Image en fond d’écran fixe et qui prend toute page

   body{
   	background-image: url("Pictures/background.png");
     	background-attachment:fixed;
     	background-repeat: no-repeat;
        background-size: 100%;
        background-color: #FFFAF4; /* Le fond de la page sera noir */
    	color: white; /* Le texte de la page sera blanc */
}

Bouton en CSS


.styled {
    border: 0;
    line-height: 3;
    padding: 0 20px;
	font-family: Arial;
    font-size: 12px;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(80, 80, 80, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

Utiliser les boutons CSS dans la page HTML

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="CSS/bouton.css">
  </head>

Exemple de boutons CSS dans la page HTML

<table style="width: 100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 110px;"><button class="styled" style="width: 100%;"
name="ACCUEIL" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/"'>ACCUEIL</button>
</td>
<td style="width: 120px;"><button class="styled" style="width: 100%;"
name="ACTUALITES" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/blog/"'>ACTUALITES</button>
</td>
<td style="width: 170px;"><button class="styled" style="width: 100%;"
name="SERVICES EN LIGNE" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/blog/category/services-en-ligne/"'>SERVICES EN LIGNE</button>
</td>
<td style="width: 140px;"><button class="styled" style="width: 100%;"
name="TUTORIELS" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/blog/category/tutoriels/"'>TUTORIELS</button>
</td>
<td style="width: 160px;"><button class="styled" style="width: 100%;"
name="ECRAN DE VEILLE" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/blog/category/ecran-de-veille/"'>ECRAN DE VEILLE</button>
</td>
<td style="width: 150px;"><button class="styled" style="width: 100%;"
name="FONDS D'ECRAN" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/blog/galerie/"'>FONDS D'ECRAN</button>
</td>
<td style="width: 110px;"><button class="styled" style="width: 100%;"
name="TELECHARGER" type="button" onclick='window.location.href="http://www.zapwallpaper.fr/blog/category/telecharger/"'>TELECHARGER</button>
</td>
</tr>
</tbody>
</table>

Grâce à BlueGriffon j’ai réalisé la mise à jour des modèles de galeries d’images pour fond d’écran réalisé par Watermark Magick. Du coup la mise à jour de Watermark Magick 2019 est pour bientôt…

La WebGalerie (fonctionnalité de Watermark Magick) permet de réaliser facilement une galerie d’images à partir d’un répertoire photo présent sur votre disque dur. La galerie est constituée de 6 vignettes (images réduites) sur une page html, permettant une visualisation plus rapide lors d’une navigation sur internet. Le nombre de pages générées sera fonction du nombre d’images présentes dans le répertoire.

Vous devriez aussi lire ces articles

A propos de R1C 131 Articles
L’homme est un être paresseux qui utilise son intelligence pour éviter le travail inutile. - http://www.zapwallpaper.fr - http://www.cmdvb.fr

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.