Cet article fournit des liens vers les dernières versions archivées des dispositions et des profils d’écran de RoboHelp. Vous pouvez télécharger ces dispositions et profils d’écran, les utiliser dans votre projet RoboHelp et générer une sortie Responsive HTML5 ou Multiscreen HTML5.

Dispositions d’écran Responsive HTML5 pour RoboHelp (2015 release)

Téléchargez la disposition d’écran Responsive de votre choix dans la liste ci-dessous, changez l’extension de nom de fichier .zip en .slz, puis importez-la dans votre projet. Pour obtenir des informations plus contextuelles, voir Dispositions d’écran dans le Guide de l’utilisateur de RoboHelp.

La disposition Responsive attribue automatiquement à chaque périphérique une image optimisée. Avec la disposition Responsive, vous servez votre contenu d’aide sur tous les périphériques tels que bureau, tablette ou mobile en même temps.

Personnalisation des dispositions

Remarque :

Pour pouvoir personnaliser des dispositions, vous devez avoir une notion claire des technologies SCSS, CSS et Javascript.  SCSS est une extension de CSS, qui vous permet d’utiliser des variables, des mixins, des règles imbriquées, et d’autres principes de base de programmation pour créer un CSS.

Vous pouvez personnaliser une disposition Responsive de deux manières :

  • Personnalisation de l’aspect de la sortie par le biais des feuilles de style
  • Personnalisation du comportement, telle que la gestion de la recherche d’une façon particulière, par le biais de JavaScript

Les sections suivantes expliquent ces deux méthodes de personnalisation de la disposition.

Personnalisation via une feuille de style

  1. Téléchargez et extrayez le contenu du fichier scss-files.zip.

    Remarque :

    Le fichier scss-files.zip contient les fichiers .scss pour les dispositions Bleu azur et Gris anthracite. En outre, vous trouverez d’autres fichiers de configuration utilisés par ces dispositions, telles que les fichiers de configuration de disposition de droite à gauche.

  2. Modifiez le fichier .scss de la disposition que vous souhaitez utiliser.

    Remarque :

    Par exemple, si vous souhaitez modifier la disposition Bleu azur, modifiez le fichier layout.scss disponible dans le dossier scss-files\scss\Azure_Blue.

  3. Utilisez un compilateur de fichier .scss pour générer un fichier .css à partir du fichier.scss mis à jour.

    Remarque :

    Les fichiers CSS fournis avec les dispositions de RoboHelp ont été compilés à l’aide d’un outil tiers appelé Koala. Vous pouvez utiliser Koala ou tout autre outil pour compiler le fichier .scss.  

    Remarque :

    Si vous souhaitez générer le RTL CSS, ouvrez le fichier scss-files\scss\_rtl.scss dans un éditeur de texte. Définissez $if-rtl sur true, puis renommez le fichier layout.css généré en layout_rtl.css.

  4. Extrayez le contenu du fichier zip de la disposition (Azure_Blue.zip ou Charcoal_Grey.zip) et remplacez le fichier layout.css dans le zip par le fichier .css mis à jour que vous avez créé à l’étape 3.  

    Remarque :

    Le fichier layout.css est disponible sous le dossier racine du fichier zip de la disposition. Par exemple, pour la disposition Gris anthracite, l’emplacement du fichier CSS est scss-files\scss\Charcoal_Grey\layout.css.

  5. Recréez le fichier zip avec le fichier layout.css mis à jour.

  6. Renommez le fichier zip en .slz et importez-le dans votre projet.

Personnalisation de Javascript

Vous pouvez également modifier le comportement de certains événements dans votre disposition en personnalisant les fichiers JavaScript associés. Par exemple, si vous voyez une erreur spécifique de JavaScript dans un navigateur, vous pouvez modifier le code JavaScript pour corriger le problème.  

Effectuez les étapes suivantes pour personnaliser la disposition à l’aide de JavaScript :

  1. Téléchargez et extrayez le contenu du fichier js-files.zip.

    Remarque :

    Le zip contient quatre fichiers : common.js, layout.js, rh.js et topic.js. Chacun de ces fichiers JavaScript contient du code qui gère le comportement des divers composants de votre disposition.

  2. Modifiez les fichiers .js en fonction de vos besoins.

  3. Renommez le fichier modifié en <nom du fichier>.min.js. Par exemple, renommez le fichier common.js en common.min.js.

    Remarque :

    Au lieu de renommer manuellement les fichiers .js en min.js, il est recommandé d’utiliser un outil de réduction (tel que JavaScript minifier) pour réduire les fichiers .js mis à jour.

  4. Remplacez les fichiers JavaScript dans votre dossier de projet (Bleu azur ou Gris anthracite) existant par les fichiers JavaScript mis à jour. L’emplacement de stockage des fichiers JavaScript mis à jour est :

    <dossier de projet>\template\scripts

Dispositions Responsive HTML5 pour RoboHelp 11

Cette section répertorie les dispositions Responsive HTML5 que vous pouvez utiliser dans vos projets RoboHelp 11.  

Theme_1 Standard

Disposition qui donne à chaque périphérique une image optimisée. Avec la disposition Responsive, vous servez tous les périphériques en même temps.

Telechargement

Thème&nbsp;1

Disposition Theme 2_Gouvernement

Style classique formel accentué de couleurs vert foncé et gris ardoise pour bannières et titres.

Telechargement

Thème&nbsp;2

Theme_3 Noir

Style classique formel accentué de noir pour bannières et titres.

Telechargement

Thème 3

Dispositions Multiscreen HTML5 mises à jour

Cette section dresse la liste des dispositions Multiscreen HTML5 que vous pouvez utiliser dans vos projets RoboHelp (2015 release) ou 11.  

Dispositions Bureau

  • Disposition Bureau : thème gris et brun facile à parcourir avec table des matières, index et glossaire sur le côté gauche. Cette disposition Bureau fait partie d’une gamme qui comprend également des dispositions prédéfinies pour ces écrans : iPhone, iPad, Android Phone, Android Tablet et Kindle Fire.

Telechargement

Disposition d’écran Bureau
Disposition d’écran Bureau

  • Catalogue : Bannières turquoises et panneaux à ombre portée pour présenter des produits ou des services. L’affichage inhabituel de la table des matières, de l’index et du glossaire est placé à gauche. Il est facilement masqué lorsque l’utilisateur préfère avoir plus d’espace d’affichage.

Telechargement

Disposition d’écran Bureau Catalogue
Disposition d’écran Bureau Catalogue

  • Catalogue avec page d’accueil : Bannières turquoises et panneaux à ombre portée pour présenter des produits ou des services. L’affichage inhabituel de la table des matières, de l’index et du glossaire est placé à gauche. Il est facilement masqué lorsque l’utilisateur préfère avoir plus d’espace d’affichage.

Telechargement

Disposition d’écran Bureau Catalogue avec page d’accueil
Disposition d’écran Bureau Catalogue avec page d’accueil

  • Gouvernement : style classique formel accentué de couleurs vert foncé et gris ardoise pour bannières et titres.

Telechargement

Disposition d’écran Gouvernement
Disposition d’écran Gouvernement

  • Gouvernement avec page d’accueil : style classique formel accentué de couleurs vert foncé et gris ardoise pour bannières et titres. La page d’accueil comporte des espaces réservés pour les articles phares, prêts à modifier avec votre propre texte.

Telechargement

Disposition d’écran Gouvernement avec page d’accueil
Disposition d’écran Gouvernement avec page d’accueil

  • Connaissances : couleurs d’arrière-plan marron clair lisse avec des icônes et des accents gris clair. Utilise une table des matières horizontale, un index et un glossaire placés sur la gauche. Accès facile à la recherche.

Telechargement

Disposition d’écran Connaissances
Disposition d’écran Connaissances

  • Connaissances avec page d’accueil : couleurs d’arrière-plan marron clair lisse avec des icônes et des accents gris clair. Utilise une table des matières, un index et un glossaire placés à l’horizontale sur la gauche. Accès facile à la recherche.

Telechargement

Disposition d’écran Connaissances avec page d’accueil
Disposition d’écran Connaissances avec page d’accueil

  • Social : disposition colorée, spéciale réseaux sociaux avec code prédéfini pour accéder à Facebook Likes et Twitter Follows en temps réel. Elle utilise un panneau de navigation de style accordéon horizontal pour la table des matières, l’index et le glossaire. Cette disposition a des pages distinctes pour les rubriques et les résultats de recherche.

Telechargement

Disposition d’écran Social
Disposition d’écran Social

  • Social avec page d’accueil : disposition colorée, spéciale réseaux sociaux avec code prédéfini pour accéder à Facebook Likes et Twitter Follows en temps réel. Elle utilise un panneau de navigation de style accordéon horizontal pour la table des matières, l’index et le glossaire. Cette disposition a des pages distinctes pour les rubriques et les résultats de recherche.

Telechargement

Disposition d’écran Social avec page d’accueil
Disposition d’écran Social avec page d’accueil

  • Pharmaceutique : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. Ce thème fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et iPad Pharmaceutique. Elles se trouvent dans la Galerie. Vous pouvez la personnaliser en fonction de la taille d’écran requise par vos périphériques.

Telechargement

Disposition d’écran Pharmaceutique
Disposition d’écran Pharmaceutique

  • Pharmaceutique avec page d’accueil : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. La page d’accueil comporte des espaces réservés pour ajouter vos produits ou services phares dans un format facile à parcourir. Cette disposition fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et iPad Pharmaceutique. Vous pouvez aussi la personnaliser en fonction de la taille d’écran requise par vos périphériques.
Disposition d’écran Pharmaceutique avec page d’accueil
Disposition d’écran Pharmaceutique avec page d’accueil

Dispositions pour Smartphones

  • iPhone : Un thème bleu clair et gris, lumineux et facile à parcourir avec table des matières, index et glossaire, et recherche accessible à tout moment. Cette disposition pour iPhone fait partie d’une gamme qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPad, Android Phone, Android Tablet et Kindle Fire.

Telechargement

Disposition d’écran pour iPhone
Disposition d’écran pour iPhone

  • Android : Un modèle bleu sarcelle, vert et noir préconfiguré pour affichage dans les téléphones Android de tailles courantes. Cette disposition fait partie d’une famille qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPad, Android Phone, Android Tablet et Kindle Fire.

Telechargement

Disposition d’écran pour smartphone Android
Disposition d’écran pour smartphone Android

  • Pharmaceutique avec page d’accueil : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. La page d’accueil comporte des espaces réservés pour ajouter vos produits ou services phares dans un format facile à parcourir. Cette disposition fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et iPad Pharmaceutique. Vous pouvez aussi la personnaliser en fonction de la taille d’écran requise par vos périphériques.

Telechargement

Pharmaceutique avec page d’accueil (Disposition d’écran pour smartphone)
Pharmaceutique avec page d’accueil (Disposition d’écran pour smartphone)

Dispositions pour Tablette

  • Android : un modèle bleu sarcelle, vert et noir préconfiguré pour affichage dans les tablettes Android de tailles courantes. Cette disposition fait partie d’une famille qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPhone, iPad, Android Phone et Kindle Fire.

Telechargement

Disposition pour tablette Android
Disposition pour tablette Android

  • Disposition iPad : thème gris et brun facile à parcourir avec table des matières, index et glossaire, et recherche accessible à tout moment. Cette disposition pour iPad fait partie d’une gamme qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPhone, Android Phone, Android Tablet et Kindle Fire.

Telechargement

Disposition d’écran pour iPad
Disposition d’écran pour iPad

  • Kindle Fire : un modèle bleu sarcelle, vert et noir préconfiguré pour affichage dans Kindle Fire. Cette disposition fait partie d’une famille qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPhone, iPad, Android Phone et Android Tablet.

Telechargement

Disposition d’écran pour Kindle Fire
Disposition d’écran pour Kindle Fire

  • Pharmaceutique avec page d’accueil : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. La page d’accueil comporte des espaces réservés pour ajouter vos produits ou services phares dans un format facile à parcourir. Cette disposition fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et Bureau Pharmaceutique. Vous pouvez aussi la personnaliser en fonction de la taille d’écran requise par vos périphériques.

Telechargement

Pharmaceutique avec page d’accueil (Disposition d’écran pour tablette)
Pharmaceutique avec page d’accueil (Disposition d’écran pour tablette)

Profils d’écran

Téléchargez le fichier predefined_screens.zip, qui contient des profils d’écran pour différents périphériques. Le fichier contient un fichier XML - predefined_screens.xml. Enregistrez le fichier XML aux deux emplacements suivants :

  • AppData\Roaming\Adobe\RoboHTML\<version Rh>
  • <emplacement d’installation Rh>\RoboHTML\presets

RoboHelp met à jour la liste des profils d’écran prédéfinis pour votre projet.

Telechargement

Telechargement

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne