Ajout du contenu à un formulaire

Précédent  Suivant


L'ajout de contenu à un formulaire se fait via un éditeur de type texte qui génère automatiquement le code html.

Un utilisateur peut donc, sans connaissance préalable du langage html, créer des pages web de type formulaire.

Utilisation de l'éditeur html

graphic

la palette d'outils

graphic

couper

graphic

copier

graphic

coller

graphic

coller comme texte. Ouvre une fenêtre de collage spécial dans laquelle l'utilisateur colle son texte (formats rtf, OpenOffice...)



graphic

graphic

Coller à partir de Word. Ouvre une fenêtre de collage spécial dans laquelle l'utilisateur colle son texte (format .doc)



graphic

  • Les cases à cocher de cette fenêtre permettent de prendre en compte ou non la mise en forme du document MS-Word d'origine.

  • le bouton "effacer le contenu" permet de supprimer tous les caractères présent dans la fenêtre.


graphic

Annuler dernière action

graphic

Refaire dernière action

graphic

rechercher des caractères



graphic



entrer les caractères recherchés et cliquer su le bouton marqué "c"

graphic

Rechercher et remplacer



graphic

  • entrer les caractères recherchés,

  • entrer les caractères de substitution

  • utiliser les boutons "remplacer" ou "tout remplacer" pour effectuer l'opération

  • utiliser les cases à cocher pour spécifier les critères de recherche.

graphic

Tout sélectionner

graphic

gomme: "supprimer format" (supprime les styles appliqués au contenu).

Pour changer le style d'un contenu (texte, image, liens...) il est souhaitable de supprimer le style existant grâce à ce bouton avant de définir un nouveau style.

Pour supprimer le style d'un contenu, sélectionner le contenu et cliquer sur le bouton la gomme.

graphic

caractères  gras

graphic

caractères en italique

graphic

caractères soulignés

graphic

caractères barrés

graphic

caractères en indice

graphic

caractères en exposant

graphic

numérotation automatique

graphic

insertion automatique de puces

graphic

diminuer le retrait

graphic

augmenter le retrait

graphic

aligner à gauche

graphic

centré

graphic

aligner à droite

graphic

justifié

graphic

appliquer un style prédéfini. (menu déroulant)

graphic

appliquer une police prédéfinie (menu déroulant)

graphic

taille des caractères (choisir dans la liste déroulante)

graphic

couleur des caractères (choisir dans la liste déroulante)

graphic

couleur d'arrière plan (choisir dans la liste déroulante)

graphic

sauvegarder

graphic

créer une nouvelle page (elle efface la page en cours)

graphic

Créer une nouvelle page à partir d'un modèle (choisir parmi les modèles proposés dans la fenêtre popup)

graphic

Imprimer la page

graphic

aperçu avant impression

graphic

afficher/masquer la palette d'outils

graphic

Insérer/modifier un lien

Pour insérer/modifier un lien, sélectionner les caractères (mots, phrase) et cliquer sur le bouton "insérer/modifier lien",

pour modifier un lien existant, reprendre la procédure décrite ci-dessus ou alors,

sélectionner le lien et faire un clic droit en choisissant l'option "modifier lien"

Les liens sont gérés à travers une fenêtre popup qui présente quatre onglets:

  • Informations sur le lien

graphic

cet onglet permet de choisir un type de lien dans la liste déroulante (url, ancre, e- mail...):



S'il s'agit d'une URL, choisir le protocole dans la liste déroulante (http, https, ftp...) et entrer l'adresse de l'url dans la zone de texte marquée "url".

Si le lien pointe sur un document, cliquer sur le bouton "parcourir le serveur" pour charger le document.

S'il s'agit d'une ancre de page, l'utiilisateur est invité à sélectionner l'ancre

graphic

S'il s'agit d'un e-mail, la fenêtre de configuration permet à l'utilisateur de préciser entre autre l'adresse e-mail de destination.

graphic

  • Destination

Pour des liens de type url, l'onglet destination permet de spécifier la fenêtre de destination du lien (ouverture du lien dans la même fenêtre, dans la fenêtre mère, dans une nouvelle fenêtre...)

graphic

  • Upload

Pour des liens de type url pointant sur un document (texte, image...) l'onglet upload permet de joindre le document.

graphic

  • avancé

L'onglet "avancé" permet d'appliquer un style particulier au lien (nom, texte en info bulle, type de mise en forme...)

graphic

graphic

Supprimer lien

graphic

ajouter/modifier une ancre. Une fenêtre popup permet d'entrer le nom de l'ancre.

graphic


graphic

Ajouter/modifier une image

Les images sont gérées à travers une fenêtre popup qui présente quatre onglets

graphic

  • Information sur l'image: c'est l'onglet principal qui propose les rubriques suivantes:

URL: pour saisir l'url de l'image (ou la rentrer automatiquement en cliquant sur "parcourir le serveur" et en chargeant l'image)

texte de remplacement au cas où l'image ne s'affiche pas dans le navigateur, saisir dans cette case le texte qui apparaîtra.

largeur/hauteur de l'image en pixel

L'utilisateur peut conserver les proportions de l'image (en cliquant sur graphic ) ou garder la taille de l'image d'origine (en cliquant sur graphic)

Bordure pour associer une bordure à l'image.

HSpace/Vspace espacement vertical et horizontal (en pixel) entre l'image et le texte.

Alignement liste déroulante proposant un type d'alignement de l'image dans la page (centré, à gauche, à droite etc...)

Une fenêtre de prévisualisation permet de générer l'aperçu.

  • Lien: Cet onglet permet d'associer un lien à une image en entrant l'URL et de préciser le mode d'ouverture du lien (liste déroulante "destination")

graphic

graphic

  • avancé: cet onglet "avancé" permet d'appliquer un style particulier à l'image (nom, texte en info bulle, type de mise en forme...)

graphic

graphic

Insérer/modifier tableau: Cet onglet permet d'insérer des tableaux à la mise en forme.

graphic

Lignes/colonnes pour préciser le nombre de lignes et de colonnes du tableau

largeur/hauteur pour préciser les largeur et hauteur du tableau (en pixel par défaut ou choisir l'unité à partir de la liste déroulante)

bordure du tableau

alignement (gauche, droite, centré)

espacement entre les doubles-lignes qui constituent les bordures du tableau.

contour: espacement autour du contenu de la cellule.

Titre/résumé: descriptif du tableau

graphic

insérer un séparateur

graphic

Insérer un caractère spécial: une fenêtre popup permet de sélectionner le caractère à insérer par simple clic.

graphic

Ces outils mettent en relation le sondeur et l'enquêté, à travers des champs de remplissage qui seront récupérés sous forme de table xml et exportable au format xls.

graphic

case à cocher (pour des choix multiples) 

graphic

Les cases à cocher sont utilisées pour des questions à choix multiples avec possibilité de choisir plus d'une réponse.

nom: fait référence au libellé du champ dans le fichier xml

valeur: fait référence à la réponse choisie par l'enquêté.

la case à cocher "sélectionné" permet de proposer à l'enquêté une valeur par défaut.

exemple

graphic


graphic

bouton radio (pour des choix exclusifs)

graphic

Les boutons radio sont utilisés pour des questions à choix multiple, mais avec des réponses exclusives.

nom: fait référence au libellé du champ dans le fichier xml

valeur: fait référence à la réponse choisie par l'enquêté.

la case à cocher "sélectionné" permet de proposer à l'enquêté une valeur par défaut.

L'enquêté ne peut choisir qu'une seule des réponses parmi celles qui lui sont proposées; de ce fait il est impératif que le nom du bouton soit le même, pour toutes les valeurs proposées.

exemple

graphic

graphic

champ texte

cet outil permet de créer un champ texte pouvant contenir du texte ou un mot de passe. Ces données sont au format texte, nombre ou date.

graphic

nom: fait référence au libellé du champ dans le fichier xml

valeur: fait référence à la réponse choisie par l'enquêté.

largeur en caractère de la ligne de remplissage

nombre maximum de caractères admissibles

type: texte ou mot de passe

type de données: texte, nombre ou date

la case à cocher obligatoire rend le remplissage du champ obligatoire avant toute validation du formulaire.

graphic

zone de texte

l'outil zone de texte permet de créer du contenu texte sur plusieurs lignes.

graphic

nom: fait référence au libellé du champ dans le fichier xml

colonne/ligne: nombre de ligne/colonnes de la zone en pixel.

type de données: texte, nombre ou date

la case à cocher obligatoire rend le remplissage du champ obligatoire avant toute validation du formulaire.

graphic

liste/menu

cet outil permet de créer des listes ou des menus déroulants.

graphic

nom: fait référence au libellé du champ dans le fichier xml

taille: nombre de lignes visibles dans la fenêtre qui sera générée.

la case à cocher sélection multiple permettra à l'enquêté de sélectionner plusieurs choix.

texte: Il s'agit du texte que voit l'enquêté

valeur: c'est la valeur qui sera associée au champ "nom" dans la table du fichier xml.

saisir le texte et la valeur et:

  • cliquer sur graphic pour ajouter un nouveau choix

  • cliquer sur graphic ou sur graphic pour ordonner la liste de choix

  • cliquer sur graphic pour définir un choix par défaut

Pour modifier un texte/une valeur déja saisi, cliquer sur ce texte/valeur, il s'affiche dans la fenêtre texte/valeur. Saisir le nouveau texte/valeur et cliquer sur graphic pour le mettre à jour.

exemple

graphic

graphic

champ caché

cet outil génère un champ texte invisible pour l'enquêté. ce champ texte n'apparaît que dans le fichier xml.

graphic

nom: fait référence au libellé du champ dans le fichier xml

valeur: c'est la valeur qui sera associée au champ "nom" dans la table du fichier xml.

graphic

Ce bouton ouvre une page contenant le code html de la page en active.

graphic

Des modifications peuvent être apportées à la page directement à partir de cette fenêtre. Cliquer sur "OK" pour prendre en compte les modifications ou sur "Annuler" sinon.

graphic Pour prendre en compte les modifications apportées à la page html

graphic pour fermer la page sans prendre en compte les modifications.