La création de pages WEB

Pour aller directement à une étape de votre travail, utilisez un des liens suivants :

La main à la pâte

Votre mission pour ce soir, si vous l'acceptez, sera de créer un formulaire qui vous permettra dans un premier temps d'envoyer vos Nom, Prénom, Ecole et E-mail à votre animateur préféré (Yvan [info@persiaux.ch] pour les personnes voyageant avec Persiaux Airlines et Didier [webmaster@florimont.ch] pour celles qui ont opté pour Florimont Airlines). Vous pourrez ensuite le modifier pour que d'autres personnes puissent VOUS envoyer leur adresse e-mail.

  1. Création de la page

    2. Créez une nouvelle page, enregistrez-la et reliez-la à votre Home Page (cf. Cours 1 et 2).

  2. Création du formulaire

    3. Il faut tout d'abord définir la zone qui constituera mon formulaire. Cela est nécessaire car on pourrait vouloir mettre 2 formulaires indépendants l'un de l'autre dans le même fichier.
    Non rassurez-vous, un seul sera suffisant pour ce soir !

    1. Prenez l'option "Formulaire --> zone de formulaire" du menu Insertion.

      2. Une zone de formulaire est rajoutée dans votre page. L'éditeur d'objet "formulaire" s'ouvre en même temps.

      Figure 47 : Editeur d'objet "Formulaire"

    2. Laissez la méthode sur "Envoyer…", mais modifier la fenêtre "Action" comme illustrée sur la Figure 47.

  3. Ajout des champs spécifiques

    4. Vous devez maintenant cliquer dans le formulaire et vous allez commencer à y insérer les champs dont vous avez besoin.

    1. Ecrivez "Nom : " puis sélectionnez l'option "Formulaire --> Champ de texte" du menu Insertion.

      2. L'éditeur d'objet s'adapte à votre nouvel création.

    2. Modifier l'option "Nom" en écrivant "NOM" en majuscule. Cela rendra la lecture du message abscons plus aisée. Laissez les autres options de l'éditeur comme elles sont; elles vont très bien pour ce premier champ. Ce sera le champ dans lequel vous taperez votre nom. La taille de ce champ ne nécessite pas d'être modifiée à moins que vous le souhaitiez.

    3. Répétez les points 1 et 2 sur des nouvelles lignes afin de créer les champs prénom, école et e-mail. Pour ces deux derniers champs vous devrez modifier dans l'éditeur l'option "Nom" : "PRENOM" pour le premier et "EMAIL" pour le second.

      4. Figure 48 : Editeur d'objet "Champ de texte"

    4. Augmentez la taille des champs ECOLE et EMAIL à 50.

    5. Nous allons créer un menu déroulant vous permettant de spécifier si vous avez suivi les cours "Introduction à Internet" et "Création de pages Web".
      Ecrivez "Cours suivi(s) :" puis sélectionnez l'option "Formulaire --> Menu déroulant" du menu Insertion.

      6. Figure 49 : Editeur d'objet "Menu déroulant"

    6. Modifiez le nom dans l'éditeur d'objet --> "COURS SUVI(S)" et validez la case "Autorisez multiples sélections" afin de permettre à l'utilisateur de sélectionner plusieurs choix.

    7. Il s'agit maintenant de définir quelles sont les options que vous proposez à l'utilisateur. Pour ce faire, cliquez sur le bouton "Editer éléments".

    8. Une nouvelle fenêtre s'ouvre et vous permet de modifier l'entrée existante, ajouter une nouvelle proposition.

      9. Modifier les titres et les valeurs afin d'obtenir quelque chose de semblable à l'image ci-dessous.

      La case cocher permet de désigner des réponses présélectionnées.

      Figure 50 : Editeur d'éléments d'une liste déroulante

    9. Insérez un bouton RAZ. Modifiez-en le texte en mettant un texte plus explicite sur le bouton à la place de RAZ.

    10. Insérez un bouton "Envoi".

     

    On essaye ?

     

    Et on discute des défauts … ok?

    Retour à la page du cours