Styles du Form

Chaque style est associé à une feuille de style en cascade (fichier CSS). Chaque élément des pages finales de l'enquête (rendu HTML) est associé à une certaine classe (page, composant, erreur, etc.) et porte un ID spécifique afin de pouvoir lui attribuer un style dans le fichier CSS.

Vous pouvez également définir des templates sur mesure afin de personnaliser l’affichage de la page.

Le « Gestionnaire de style » est disponible via le menu « Action », option « Gérer les styles ».

  • Liste de styles : ce volet affiche tous les styles ainsi que les feuilles de style qui leur sont liées. Les styles « Business » et « Réactif » sont disponibles par défaut.
  • Template : pour chaque style, un template spécifique peut être défini (un pour chaque langue utilisée dans le Form).

La barre d'outils Gestionnaire de style offre les fonctionnalités suivantes :

  • Nouveau : permet de créer un nouveau style
  • Propriétés : ouvre les propriétés du style sélectionné
  • Supprimer : permet de supprimer le style sélectionné
  • Enregistrer : enregistre les modifications apportées au style
  • Dupliquer : permet de créer une copie du style sélectionné
  • Annuler : permet d'annuler la mise à jour du template
  • Rétablir : permet de rétablir la mise à jour du template
  • Couper : permet de couper le code html sélectionné dans le template
  • Copier : permet de copier le code html sélectionné dans le template
  • Coller : permet de coller le code html sélectionné dans le template

 

Créer un nouveau style

Sélectionnez l’option « Nouveau » dans la barre d’outils pour afficher la fenêtre « Propriétés du style » et créer le nouveau style.

Général :

  • Nom : le nom du style qui s’affiche dans la liste.
  • Description : description du style
  • Réactif :les eForms sont définis comme étant réactifs. Le rendu du Form est par conséquent optimisé pour un affichage sur différents périphériques : écrans d'ordinateurs, tablettes et périphériques mobiles (mise en page réactive). Si cette case à cocher est activée, la feuille de style (fichier CSS) sélectionnée dans les propriétés du style (onglet Avancé)doit prendre en charge la mise en page réactive.Nous vous recommandons d'utiliser cette option.
  • URL : URL d’un moteur de rendu de contenu utilisé pour générer une mise en page pour le Form.

    Normalement, l'URL du Form de Selligent (http://DOMAINNAME/optiext/survey.dll?ID=) est utilisée pour le rendu de toutes les URL du Form.Si vous définissez un moteur de rendu de contenu, tous les eForms utiliseront l'URL définie en lieu et place de l'URL du Form par défaut.Saisissez l'URL du moteur de rendu de contenu. Exemple : http://www.mysite.com/renderer.aspx?id=%s. Vous devez toujours utiliser « %s », que le système remplacera par l'ID (code haché) de Selligent.

Remarque technique : Le contenu de la page du moteur de rendu de contenu est fusionné avec le contenu de la page Selligent. Le site web existant récupérera le contenu de la page Selligent à partir du serveur web Selligent, intégrera le corps et l'en-tête dans le message et renverra le résultat fusionné au navigateur du contact sous forme de page HTML unique. Rien n'indiquera que le contenu est issu d'une page qui n'est pas d'un site web. Pour que cela soit possible, le code haché transféré avec la requête HTTP est utilisé pour récupérer tout le contenu et tous les paramètres. Pour obtenir de plus amples informations à ce sujet, consultez la section Moteur de rendu de contenu.

Exemple :
le style Retail utilisé pour l'enquête de satisfaction est configuré pour utiliser le moteur de rendu de contenu :http://www.mysite.com/renderer.aspx?ID=%s
Lorsque vous ouvrez l'URL du moteur de rendu de contenu, le résultat s'affiche comme suit.


Le Form qui utilise ce style s'affichera dans la mise en page définie ci-dessus. Le Form est « décoré » avec la mise en page définie ci-dessus.

Avancée :

  • Feuille de style :ce champ est renseigné avec l’URL depuis laquelle la feuille de style (fichier CSS) peut être extraite. Les feuilles de style définissent la mise en page de chaque élément des pages web.
  • En-tête HTML : permet de définir des éléments d'en-tête HTML. Ces éléments sont ajoutés entre les balises <head></head> de toutes les pages de l'enquête (pour chaque langue). Elles peuvent être utilisées comme références à JavaScript ou aux feuilles de style CSS. (Exemple : ajouter une balise <TITLE>. Un titre s'affichera dans la barre supérieure du navigateur)
  • Corps HTML : permet de définir des éléments du corps HTML. Ces éléments sont ajoutés après la balise ouvrante <body> de toutes les pages du Form (pour chaque langue). (Exemple : ajouter un logo au corps de chaque page)

Exemple : Propriétés avancées du style
Feuille de style : http://my_web_server/images/business.css
En-tête HTML :
<meta name="description" content="Form 1" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Form Author" />
Corps HTML :
<div id="MyDiv">
   <img src="http://www.mycompany.com/images/company_logo.gif" alt="company logo" />
</div>

 

Utilisation d’un template personnalisé

Dans les propriétés du style, vous pouvez définir des codes HTML communs pour toutes les pages de le Form. En outre, il est possible de définir un contenu et une mise en page personnalisés pour chaque langue utilisée dans le Form.

Lorsque vous sélectionnez un Style, le volet « Template » répertorie les templates définis pour chaque langue.

Remarque : un seul template peut être sélectionné par langue.

Le code HTML de base d’un template doit contenir les sections suivantes :

<body>
<DIV ID=MAHEADER></DIV>
<DIV ID=MAFORM></DIV>
<DIV ID=MAFOOTER></DIV>

</body>

Ces balises « DIV » correspondent aux parties « En-tête, Page et Pied de page » définies pour chaque page du Form. Vous pouvez insérer du code entre ces balises. Si une des balises « DIV » est absente du template, le contenu associé n’est pas inséré dans la page lors de l’affichage du Form.

Ex. : Ajouter un copyright au bas de votre Form. Dans la fenêtre « Template », saisissez après la balise « MAFOOTER div » : <div id="bottom">&copy; Compopnayname</div>. Associez le style portant l'ID « bottom » dans la feuille css liée au style à la balise DIV.

 

Définition d’un template pour chaque langue

1. Le volet « Template » est divisé en onglets. Il comprend un onglet par langue. Définissez un template pour chaque langue.

2. Enregistrez le template et fermez le gestionnaire de style.

3. Dans le Form, le contenu correspondant s’affiche en fonction de la langue sélectionnée.

 

Application d'un style au Form

Pour appliquer un style au Form, accédez aux propriétés du Form et activez un style dans l'onglet « Structure ».

 

 

Retour à Création Form