FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.

Présentation au sujet: "FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base."— Transcription de la présentation:

1

2 FORMULAIRES

3 FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base de données

4 FORMULAIRES Rappels sur les formulaires Insertion > formulaire ou

5 FORMULAIRES Propriété Action : désigne le fichier qui traitera les données Méthode: façon d’envoyer des informations –Post : envoyé par protocole HTTP –Get : passé par URL Nom Méthode d’envoi du formulaire

6 FORMULAIRES Objets de formulaire Texte Zone de texte Case à cocher Bouton radio Menu/list Champ de fichier Bouton

7 FORMULAIRES Exercice Créer un formulaire Créer un tableau Créer les objets –Texte/zone de texte –Case à cocher –Bouton radio –Menu/liste –Bouton

8 Calques

9 CALQUES Les calques sont des éléments de HTML qu’on peut déplacer dynamiquement et qu’on peut afficher et masquer dynamiquement –peuvent être placés à n’importe quel endroit de la page web –peuvent contenir n’importe quel objet (image, texte, formulaire, …)

10 CALQUES Rappels sur les calques Insertion > calque Désigne plusieur calques –Procéder de la même manière en maintenant appuyée la touche Ctrl Sélection d’un calque –cliquer sur le nom du calque dans le panneau Calques (Fenêtre > Autres > Calques). –Ou cliquer sur le marqueur Le marqueur La poignée de sélection

11 CALQUES Propriété Nom position à partir du bord Dimensions Image d’arrière plan Couleur d’arrière plan Type de balise HTML Conditions de déroutage

12 CALQUES Inspecteur de calques fenêtre > autres > calque ou F2 Visibilité d’un calque Ordre de superposition des calques

13 COMPORTEMENT

14 Permet la génération de code Javascript –Le déplacement de calque –Menu dynamique –Vérifier un formulaire Pour créer un comportement, il faut : un objet, un événement et une action

15 COMPORTEMENT Rappels les comportement Fenêtre > comportements Supprimer un comportement Ajouter un comportement Action Evénement

16 COMPORTEMENT Les événements Quand l’utilisateur arrête le téléchargement d’un doc Quand utilisateur clique en dehors d’une zone Quand le navigateur rencontre une erreur Quand l’élément spécifié devient le focus(l’élément est sélectionné) Quand un téléchargement se termine Quand l’utilisateur déclenche le bouton de la souris/ bouge la souris sur l’élément spécifié Quand le pointeur sort de l’élément sélectionné Quand le pointeur passe sur l’élément sélectionné

17 COMPORTEMENT Exercice 1 Créer un calque visible Créer un calque invisible Créer un comportement pour que le calque caché apparaisse et le calque visible disparaisse lorsqu’on clique sur le calque

18 COMPORTEMENT Exercice 2 Créer un menu visible (menu1) et un menu invisible (menu2) Créer un comportement pour que menu2 soit visible quand on passe la souris sur le menu1 Créer un comportement pour que menu2 disparaisse quand la souris sort du menu2 Créer un comportement pour que menu2 apparaisse quand le souris entre dans le zone du tableau de menu2 Créer un comportement pour que menu2 disparaisse quand la souris sort du menu1

19 Le gestionnaire de sites

20 Le gestionnaire de sites A quoi ça sert ? Permet de mettre en ligne le site. Simplifie la mise à jour d'une partie du site.

21 Le gestionnaire de sites Exercice Créer un nouveau site. Mettre en ligne d'une page web. Mettre à jour une page. Utiliser la carte du site.

22 Les modèles Qu’est-ce que c’est ? Il s'agit d'un fichier de base définissant des zones éditables ou non, permettant de concevoir plusieurs pages sans redéfinir les zones communes (menu, entête, etc…).

23 Les modèles A quoi ça sert ? Permet de garder une interface unie pour plusieurs pages web. Facilite la mise à jour d'un élément (menu, entête, pied de page) sur plusieurs pages.

24 Les modèles Exercice Créer un nouveau modèle. Créer deux zones non éditables de menu et d’entête. Créer une zone principale modifiable. Créer plusieurs pages web à partir du modèle Éditer le modèle et mettre à jour les pages web.

25 Les feuilles de style

26 Les feuilles de style Qu’est-ce que c’est ? (1) Il s’agit d’une portion de code qui définit l’apparence (polices, arrière-plan, bordure, et bien plus encore…) d’un objet (portions de texte, tableaux). Il est possible d’appliquer en cascade plusieurs feuilles de styles d’où le nom de CSS (Cascading Style Sheets).

27 Les feuilles de style Qu’est-ce que c’est ? (2) Deux niveaux de feuilles de styles : –feuilles internes : ne définissent des attributs que dans une seule page. –feuilles externes : peuvent être réutilisées par plusieurs pages. De plus, ces styles peuvent non seulement définir des attributs pour la mise en page du texte, mais elles permettent aussi de redéfinir des balises HTML existantes (possibilité d’ajouter de nouveaux attributs au texte inséré entre les balises).

28 Les feuilles de style A quoi ça sert ? Permet une séparation du code HTML et des informations de mise en page. Simplifie la gestion de la présentation du site à l’aide d’une seule feuille de style pour toutes les pages. Permet d’alléger le code source des pages web (la feuille de style n’est chargée qu’une seule fois par le navigateur). Etc.

29 Les feuilles de style Exercice Créer un nouveau style interne. Sélectionner les attributs. Appliquer le style (attention aux conflits de styles). Faire la même chose avec une feuille externe.

30 Les scénarios

31 Les scénarios Qu’est-ce que c’est ? Permet de créer des animations simples sans connaître javascript, suivant une échelle temporelle, la position, la visibilité d’un objet, le déclenchement d’une action. Ces objets peuvent être calques, sons, et comportements.

32 Les scénarios A quoi ça sert ? Animer une page. Interpeller l’interacteur.

33 Les scénarios Exercice Créer un calque et le remplir Créer une image clé au début de la timeline Déplacer le calque à sa position d’origine Créer une image clé plus loin dans la timeline Déplacer le calque là sa position finale Note : Pour faire un parcours non rectiligne, il suffit de créer des images clés entre les deux points, et de déplacer le calque de façon à obtenir l’effet désiré.