Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

alt

 

Dans la plupart des logiciels, se trouve une aide ou un guide d'utilisation. Ces aides, ou guides, sont au format .chm

CHM signifie Compiled HTML : ce sont donc des fichiers HTML compilés.

Ce format est utilisé car il est très pratique et facilement distribuable : il peut en effet être lu sur toutes les versions de Windows, depuis la version 98.

Vous avez créé un programme, une application, une base de données et vous aimeriez, comme les pros, proposer une véritable aide aux utilisateurs ?

Ce tutoriel va vous montrer comment créer ce type de fichier.

 

 

Je ne vois pas à quoi ressemble un fichier .chm

Ouvrez le Bloc-Notes de Windows, et appuyez sur la touche F1 de votre clavier :

alt

 

Un fichier d'aide .chm, hé bien... c'est ça :o)

 

 

La première étape : la création des fichiers HTML

Voici l'étape la plus longue et la plus fastidieuse, et, mauvaise nouvelle, je ne vais pas pouvoir vous aider sur ce coup là, car vous allez devoir rédiger tous les fichiers HTML qui vont composer votre fichier compilé.

Vous pouvez utiliser n'importe quel éditeur capable de créer des fichiers .html : Dreamweaver, Microsoft Word, le Bloc Notes de Windows, etc...

Faites votre mise en forme directement dans votre éditeur (Titres, liens hypertextes, couleurs, captures d'écran …) et enregistrez chaque fichier au format .html.

Quelques conseils :

  • Mettez des titres à vos pages HTML représentatifs du contenu (par exemple : Installer, Débuter, À propos, Comment imprimer, etc...)
  • Nommez vos fichiers de façon à ce qu'ils soient eux aussi représentatifs de leur contenu (par exemple : installation.html, debuter.html, a_propos.html, comment_ imprimer.html, etc...)
  • Respectez une présentation identique (polices, taille de caractères, formatage des titres, sous-tires) ainsi qu'une charte graphique (couleurs, logos) pour tous vos fichiers .html : le résultat sera ainsi uniforme et de qualité professionnelle.

Allez, moi, je suis rapide, j'ai déjà tout fait :

alt

 

altNe prêtez pas grande attention aux noms de fichiers : il s'agit d'un projet que j'ai réalisé dans le cadre de mon boulot

 

 

Télécharger HTML Help Workshop

Pour compiler nos fichiers html et créer un fichier d'aide .chm, nous allons avoir besoin d'un programme : HTML Help Workshop

J'ai deux nouvelles : une bonne et une mauvaise...

La mauvaise : le programme est en anglais. La bonne : il est totalement gratuit

Téléchargez-le en cliquant sur le bouton ci-dessous, puis, procédez à son installation.

alt

 

 

Exécuter l'assistant - Création du fichier .hhp

Lancez HTML help Workshop en allant dans le menu "Démarrer", "Tous les programmes", "HTML Help Workshop", "HTML Help Workshop"

alt

 

Puis, allez dans le menu "File" et sélectionnez la commande "New"

alt

 

Dans la boîte de dialogue, sélectionnez la ligne "Project", puis cliquez sur "Ok"

alt

 

Le magicien arrive... Cliquez sur "Suivant"

alt

 

Cliquez sur "Browse", puis rendez-vous dans le dossier qui contient tout vos fichiers .html, puis donnez un nom à votre projet. Personnellement, j'ai choisi simplement le nom de fichier "Aide". Cliquez ensuite sur "Suivant"

alt

 

Cliquez sur la case à cocher "HTML files (.htm)", puis sur le bouton "Suivant"

alt

 

Cliquez sur le bouton "Add", puis sélectionnez la totalité des fichiers .html, puis cliquez sur "Suivant"

alt

 

Notre bon magicien a fini sa journée : cliquez sur "Terminer"

alt

 

Le programme nous offre ensuite une vue encore plus déroutante que tout à l'heure, mais... ne prenez pas peur Content

alt

 

Nous avons créé notre "fichier de travail", au format .hhp

Nous allons pouvoir passer à la création de notre projet.

 

 

 

Création de la table des matières

Cliquez sur l'onglet "Contents"

alt

 

Puis, dans la boîte qui apparaît, cliquez sur "Ok"

alt

 

Nommez votre table des matières (le nom importe peu, il ne se verra pas par la suite), puis cliquez sur "Enregistrer"

alt

 

Vous obtenez cette fenêtre :

alt

 

Bien souvent, les fichiers d'aide compilés sont organisés sous forme de rubriques, de sous-rubriques, et de pages. Voici par exemple celle du logiciel Dreamweaver :

alt

 

Pour créer une rubrique, cliquez sur le dossier jaune (Insert a heading)

alt

 

Nommez votre première rubrique dans le champ "Entry title", puis cliquez sur le bouton "Ok"

alt

 

Voici votre première rubrique créée !

alt

 

En cliquant sur l'icône en forme de crayon alt, vous pouvez modifier cette rubrique, et notamment, en allant dans l'onglet "Advanced", modifier l'icône de la rubrique.

alt

alt

 

Dans cette rubrique, vous avez la possibilité de créer une sous-rubrique (dans ce cas, répetez l'opération, tout en laissant la rubrique parente en surbrillance) ou de créer les pages qui conduiront vers vos fichiers html.

Pour créer une page, cliquez sur l'icône alt (Insert a page) puis répondez "Oui" à la question posée...

alt

 

Donnez un nom à cette page, puis cliquez sur le bouton "Add"

alt

 

Sélectionnez le fichier html souhaité, puis cliquez sur "Ok"

alt Vous avez remarqué ? Les noms affichés dans la liste sont les titres des pages html, d'où l'importance de bien les définir !!!

alt

 

Cliquez ensuite une nouvelle fois sur "Ok"

alt

 

Et voilà la première page de notre première rubrique créée !

alt

 

Arrêtons-nous une seconde sur la barre d'outils située en bas à gauche de la fenêtre :

alt

 

Celle-ci est très pratique car elle vous permet de monter ou descendre des rubriques, sous-rubriques ou des pages, mais également de définir l'arborescence (avec les flèches droite/gauche)

Continuez la construction de votre table des matières....

alt

alt

 

Pensez à sauvegarder régulièrement votre boulot ! Cliquez sur l'onglet "Project", puis sur l'icône en forme de disquette

alt

 

 

 

 

Création de l'index

L'index est facultatif, mais permet à l'utilisateur de rechercher de l'aide en saissant ou en sélectionnant des mots clés.

Voici par exemple celui de l'aide du logiciel Dreamweaver :

alt

 

altSi vous souhaitez faire un index, faites-le bien : rien n'est plus pitoyable qu'un index pauvre !

La création d'un index n'est vraiment pas difficile, mais elle est fastidieuse.

Cliquez sur l'onglet "Index", puis cliquez sur "Ok'

alt

 

Comme lors de la création de la table des matières, donnez un nom à votre index (le nom, là aussi, importe peu car il sera invisible aux utilisateurs), puis cliquez sur "Enregistrer"

alt

 

Vous obtenez ceci

alt

 

Cliquez sur la petite clé jaune "Insert à keyword"

alt

 

Saisssez un mot clé dans le champ "Keyword", puis cliquez sur le bouton "Add"

alt

 

Sélectionnez le fichier html relatif à ce mot clé, puis cliquez sur "Ok"

alt

 

Un même mot clé peut renvoyer à plusieurs fichiers html. Pour indiquer un autre fichier html relatif à ce même mot clé, cliquez de nouveau sur "Add" et répétez l'opération...

alt

 

Une fois terminé, cliquez sur "Ok"

alt

 

Voici notre premier mot clé paramétré :o)

alt

 

Faites tous les autres sur le même mode...

alt

 

La barre d'outils vous permet de monter/descendre chaque mot clé, de créer des mots clés parents en réglant l'arborescence (flèches gauche/droite), de trier les mots clés par ordre alphabétique et de sauvegarder votre travail....

alt

 

Définition de la fenêtre et du menu

Cliquez sur l'onglet "Project" , puis cliquez sur l'icône alt "Add/Modify window definitions"

alt

 

Dans l'onglet "Général", nommez cette fenêtre dans le champ "Windows type". Dans le champ "Title bar text", indiquez le nom qui sera présent dans la barre de titre de la fenêtre de votre fichier d'aide.

alt

 

Dans l'onglet "Buttons", et effectuez les réglages voulus...

alt

 

Hide/Show : vous permet d'afficher/masquer le menu

alt

 

Back : rajoute le bouton page précédente

alt

 

Forward : rajoute le bouton page suivante

alt

 

Stop : rajoute un bouton "Arrêter" permettant à l'utilisateur de stopper le chargement de la page html

alt

 

Refresh : ajoute un bouton permettant d'actualiser le contenu de la page

alt

 

Home* : ajoute un bouton conduisant vers une page d'accueil

alt

 

Options : ajoute tous les boutons définis sous forme de menu déroulant

alt

 

Print : ajoute un bouton permettant à l'utilisateur d'imprimer le contenu du fichier affiché

alt

 

Locate : rajoute le bouton "Sommaire" au menu

alt

 

Jump 1 et Jump 2*: sont deux boutons personnalisables

alt

 

* Pour les boutons "Home", "Jump 1" et Jump 2", définissez les fichiers liés à ces boutons dans l'onglet "Files"

alt

 

L'onglet "Position" vous permet de définir la taille de la fenêtre de votre fichier d'aide ainsi que sa position à l'écran

alt

 

Vous pouvez utiliser la fonction "Autosizer", très pratique : dimensionnez la fenêtre, positionnez-là à un endroit de l'écran puis cliquez simplement sur "Ok"

alt

 

Dans l'onglet "NavigationPane", vous pouvez définir quelques options très intéressantes :

alt

 

- Cochez "Window with navigation pane, topic pane, and button" afin de définir les options de navigation

alt

 

- Open with navigation pane closed : si activé, le sommaire n'est pas ouvert au lancement de l'aide (l'utilisateur doit cliquez sur le bouton "Afficher" pour accèder au sommaire)

alt

 

- Auto sync : laissez cette option activée, elle permet de synchroniser le contenu de la fenêtre de droite avec le sommaire

- Automaticlally show/hide navigation pane : si activé, le sommaire apparaît lorsque la souris le survolle et disparaît automatiquement

- Les fichiers d'aide son souvent équipés d'un petit moteur de recherche, qui permet à l'utilisateur d'effectuer une recherche dans l'aide par rapport à ses propres mots.

alt

 

Pour activer cette fonction, activez la case à cocher "Search Tab", et, si vous le souhaitez, la case "Advanced" pour autoriser une recherche avancée...

alt

 

- Default tab : si la fonction de recherche est activée, vous pouvez faire en sorte que l'utilisateur arrive directement sur le formulaire de recherche plutôt que sur le sommaire.

- Favorites tab : permet à l'utilisateur de marquer des fichiers d'aide comme favoris afin de les retrouver plus facilement par la suite

 

L'onglet "Styles" permet de définir certaines propriétés de votre guide. Je vous conseille de laisser les réglages par défaut afin de ne pas trop dérouter les utilisateurs habitués à voir tous les fichiers d'aide sous la même forme...

alt

 

Pour finir, l'onglet "Extended Styles" permet d'aller encore un peu plus loin dans la personnalisation de votre fichier d'aide.

alt

 

Une fois tous les paramètres définis, cliquez sur le bouton "Ok"

alt

 

 

 

La compilation

Tout est prêt !

Nous avons notre fichier de travail, au format .hhp, notre table des matières au format .hhc, notre index au format .hhk : il ne nous reste plus qu'à compiler tout ça pour obtenir notre fameux fichier .chm !

alt

 

Cliquez sur le menu "File", puis sur la commande "Compile"

alt

 

Si vous souhaitez enregistrer votre fichier d'aide compilé dans un répertoire différent, indiquez l'emplacement, puis cliquez sur "Compile"

alt

 

Laissez bosser...

alt

 

Une fois la compilation terminée, vous vous retrouvez avec votre fichier d'aide .chm, compilé :o)

alt

 

alt

 

C'était un peu long, mais le résultat vaut le coup, non ?

 

 

Recompiler encore et encore

Vous aurez sans doute un jour, besoin de rajouter des fichiers à votre aide, ou corriger une horrible phote d'ortografe glissée dans un fichier .html

Conservez toutes vos sources (fichiers .html, images, vidéos) qui constituent votre aide compilée : il vous suffira de modifier le fichier .html souhaité, puis de recompiler à nouveau !

Pour ajouter des fichiers .html inexistants au projet, il vous suffit de cliquer sur le bouton "Add/Remove topic files", disponible dans l'onglet "Project"

alt

 

 

alt

 

 

 

1000 caractères restants


Gravatar
Tiotmahieu
Merci pour ce tuto très bien fait.
J'ai décompilé un fichier d'aide avec HTML HELP WORKSHOP qui me sort entre autre
deux fichiers Index .Savez pourquoi ?
C'est pour faire une traduction en Français et comme c'est fastidieux, je préférerais faire le bon fichier .Merci d'avance.Christian

Gravatar
Guillaume
Bonjour,
Je rencontre un problème pour l'insertion d'image:
Je créé mon document au format .docx (OK)
Je l'enregistre au format .htm (OK)
Les images sont bien présentes

Par contre en compilant le chm les image en sont pas visible!
J'ai remarqué qu'en supprimant 2 balises (<![if !vml]> et <![endif]>) dans le code html les images apparaissent.

est ce qu'il y a une façon de faire pour que ces balises ne soient pas générées?




Gravatar
Greg [STAFF]
Bonjour Guillaume,
Je te conseille de réaliser les pages à l'aide d'un éditeur de pages web. Ainsi tu n'auras plus de problème de balises qui disparaissent. En effet, fidèle à l'esprit Microsoft, le format docx est assez destructeur et ne respecte aucun standard.
J'ai toujours fait mes fichiers d'aide sur Dreamweaver mais tu as également bon nombre d'éditeurs de page web gratuits.
On les appelle aussi parfois les éditeurs WYSIWYG.
Pour n'en citer que quelques uns : KompoZer, OpenElement, NVU ou Amaya.