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.

Fig. 245 Choix du type de projet

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

Fig. 246 Création d'une aide en ligne

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 un accès direct vers l'en-tête et le bas de page cliquez sur

30

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

Fig. 247 Création d'un site web

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

Fig. 248 Zone des composants ne produisants pas de contenu

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.

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é.

Fig. 249 Pour éditer un objet cliquez dessus puis faites Ouvrir

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

Fig. 250 Commandes du navigateur de rubriques

Sous Help&Web les rubriques de premier niveau sont appelées Chapitre, toutes les autres ont pour nom Page outre le fait qu'un Chapitre sera toujours au premier niveau de l'arborescence, une telle rubrique ne pourra pas se voir attribuer le style popup

27

Fig. 251 Rubriques 1ère niveau et sous-rubriques

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

Vous pouvez modifier les fontes employées par défaut pour le titre et le contenu de vos rubriques depuis l'onglet Style - Architecture de base

28

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

en pressant les touches Ctrl+Shift vous désactivez cette option

31

Fig. 252 Dialogue d'édition de texte

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 Gestion feuilles de style CSS

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.

Fig. 253 Application d'une fonte

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.

Positionnez-vous à droite d'une ligne de texte et pressez CTRL+1..6 pour transformer celui-ci en titre

32

Vous pouvez sélectionner un groupe de lignes pour les tranformer en autant de titres

33

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

En pressant Ctrl+Entrée dans l'éditeur de contenu vous définissez automatiquement un paragraphe aligné à gauche

34

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

Fig. 254 Définir une rubrique cible

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

Vous pouvez aussi poser un lien sur une image légendée, mais pas sur un thumbnail, qui ouvre l'image en taille réelle, ni sur une vignette.

29

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.

Sommaire