Nous allons voir comment créer des rubriques, poser des liens entres elles et insérer des images, nous supposons que vous avez assimilé l'interface d'Help&Web.

Création

Allez sur l'onglet Help&Web et cliquez sur Nouveau

Dans le dialogue qui s'ouvre cliquez sur Création d'un projet vierge

Un assistant s'ouvre vous avez alors le choix entre un projet de type aide en ligne, un site web, ou une présentation HTML (S5) quelque soit votre choix vous pourrez bien sur le modifier par la suite, il ne s'agit que d'une orientation optimisée, vous pouvez toujours générer un document dans n'importe lequel des formats supportés par Help&Web.

Pour les projets de type aide vous aurez ensuite à choisir entre une aide classique ou une aide style Help&Web.

La différence est uniquement dans les en-tête et pied de page avec l'utilisation des composants ClassicTopFooter ou TopFixedFooter, si par la suite vous souhaitez modifier leurs propriétés ou les supprimer vous devrez allez dans le contenu partagé puis dans En-Tête et Bas de Page

Pour les projet de type site web, la encore l'assistant ne fait qu'incorporer un composant dans le contenu partagé En-tête et Bas de page, en l'occurance les composants Html-Layout et Html-Layout-End, ils permettent de gérer facilement un design de 1 à 3 colonnes avec ou non en-tête et bas de page, le site d'help&web est construit de la sorte

Les propriétés par défaut de votre site web sont des composants placés dans une zone spéciale, pour les afficher et pouvoir les éditer allez sur l'onglet Rubriques - Affichage puis Composants cachés ou plus simplement pressez CTRL+F5

Une fois ces options validées sélectionnez alors le répertoire où sera placé votre projet, par défaut il sera mis dans un sous-répertoire à son nom dans le répertoire d'help&web.

• Donnez lui un nom
• Remplissez les autres champs et Validez

Vous vous retrouvez alors sur la première rubrique de votre projet, la partie situé à droite est le contenu de la rubrique active, vous changez de rubrique en sélectionnant celle qui vous intéresse dans l'arborescence des rubriques situé à gauche.

En mode source les portions de code entre < < > > sont des marqueurs Help&Web pour éditer leur contenu cliquez simplement dessus, un menu popup s'affichera où vous pourrez valider Ouvrir... pour accéder à l'éditeur associé.

Ajout de rubriques

Pour ajouter des rubriques de premier niveau cliquez sur l'icône située sur le coté gauche de l'arborescence, pour ajouter une sous-rubrique à la rubrique active cliquez sur

Un chapitre est une rubrique qui sera au premier niveau de votre arborescence, une page sera la rubrique enfant de la rubrique active.

Enrichir du texte

Pour enrichir votre texte (mise en gras, style etc.) sélectionnez la portion que vous souhaitez modifier et un dialogue va alors s'afficher

Style

La liste déroulante vous permet de sélectionner un style css que vous appliquez en cliquant sur le bouton

Pour définir un nouveau style css, double-cliquez dans la liste, pour l'appliquer cliquez

Vous accédez à l'édition des feuilles de style depuis l'onglet Style.

G et I définissent une mise en gras et en italique, ouvre un dialogue pour choisir une fonte, un style css sera créé à partir de celle-ci, vous pourrez le nommer à votre guise.

Formatage

vous permet de définir un titre avec des niveaux allant de 1 (le plus gros) à 6 (le plus petit), cela correspond aux balises h1..h6 en HTML , vous pouvez attribuer une classe CSS et spécifier si un signet doit être positionné en regard du titre.

permet de définir un paragraphe (aligner à droite, à gauche, centré...)

En cliquant sur la balise de paragraphe ALIGNE... vous pouvez modifier ses propriétés.

Vous permet de définir un bloc, équivalent à la balise DIV en html auquel vous pourrez attribuer un style css

Insérer une boîte expansible

Gère la création de liste

Génération d'un tableau à partir de texte séparé par des tabulations ou par le caractère | (vous pouvez choisir le caractère séparateur)

Exemple d'utilisation

cellule 1|Cellule 2
Cellule 3|Cellule 4

L'application de va nous donner un tableau de 2 lignes de 1 colonnes

Création d'un boîte d'information dans le style de celle juste au-dessus

Insérer du code html

Liens

Permet la création d'un lien vers une autre rubrique

Sélectionnez alors la rubrique que pointera votre lien et validez, vous pouvez pointer vers une position précise à l'intérieur de cette rubrique en indiquant un signet.

Plus rapide, pressez CTRL+J, si vous n'avez pas sélectionné de texte, l'intitulé du lien reprendra le titre de la rubrique sur lequel vous le faites pointer.

En cliquant sur "Rubrique d'un autre projet" vous pouvez définir un lien externe vers un autre projet, si vous avez configuré son url de base les liens seront fonctionnels en html, en HtmlHelp les fichiers CHM devront êtres dans le même répertoire.

Permet de définir un signet, c'est à dire un emplacement de votre rubrique vers où pourra pointer un lien

Insertion d'un lien vers une adresse web ou mail

Insertion d'un lien macro-commande

Insertion d'un lien vers l'accueil du projet

Insertion d'un lien vers le début du chapitre courant

Insertion d'un lien vers la rubrique précédente

Insertion d'un lien vers la rubrique suivante

Insertion d'un lien vers un signet interne à la rubrique

Presse-Papiers

Gestion du presse-papiers couper-copier-coller

Texte

Ajouter une définition pour le mot sélectionné

Ajouter le mot sélectionné aux mots-clefs de la rubrique, raccourci CTRL+K

permet d'activer les directives conditionnelles permettant par exemple de ne compiler un passage que pour le format pdf

Permet de choisir une accentuation possible pour la première lettre du mot sélectionné

Composants

Voir l'onglet Insérer - composants Gestion des composants pour ajouter des composants sur cette palette

Poser un lien vers une autre rubrique

Sélectionnez le texte qui servira de lien puis cliquez sur le bouton

Insérer des images

Pour insérer une image à la position du curseur pressez CTRL+I ou cliquez sur l'icône ( cliquez ici pour plus de précision sur la gestion des images par Help&Web )

Pour poser un lien sur une image, cliquez sur sa balise (du style < <BMP(...) > > ) et choisissez Créer une macro... dans le popup qui s'affiche, vous pouvez aussi placer directement un lien depuis le dialogue d'insertion d'images en allant sur l'onglet Image réactive

Voilà vous savez maintenant créer un projet simple contenant des rubriques et des liens entre celles-ci, il ne vous reste plus qu'a le publier pour obtenir votre hypertexte.