SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05.

Présentation au sujet: "SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05."— Transcription de la présentation:

1 SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05

2 Formulaires Calques Comportements Scénarios Feuilles de style Les modèles Gestion de site La carte SI28 - Écriture multimédia interactive – A2004 Plan

3 SI28 - Écriture multimédia interactive – A2004 Formulaires – Utilisations Les formulaires permettent à l’utilisateur de saisir des données traitées par la suite dans une base de données Exemples d’utilisation: Saisir des informations personnelles (inscription sur un site). Personnaliser (type de navigateur, résolution du navigateur) Interfaçage

4 SI28 - Écriture multimédia interactive – A2004 Formulaires – Création Formulaire Image Reroutage Étiquette Zone de texte Texte BoutonCase à cocher Bouton radio Menu / liste Fichier Champ caché > Barre d’outils > onglet Formulaire > Cliquer sur Formulaire

5 SI28 - Écriture multimédia interactive – A2004 Formulaires – Propriétés Nom Méthode d’envoi du formulaire Afficher les propriétés > Clic droit sur la zone > propriétés

6 SI28 - Écriture multimédia interactive – A2004 Formulaires – Exercices Textfield Menu\list Textarea Radio Boutons Chaque objet est caractérisés par des propriétés

7 SI28 - Écriture multimédia interactive – A2004 Calques – Utilisation Les calques sont des éléments de page HTML sous forme de rectangle modulable. Exemples d’utilisation: Déplacer des objets (image, texte, formulaire, …) sur la page web. Animer des objets

8 SI28 - Écriture multimédia interactive – A2004 Calques – 2 nouvelles propriétés Nom du calque Type de balise HTML L: position à partir du bord gauche S: position à partir du bord haut Position (en pixel) W: hauteur L: largeur dimensions Couleur d’arrière plan Conditions de déroutage Image Visibilité Ordre des calques Propriétés du calque au chargement Propriétés du calque sur Dreamweaver >Insertion >Calque >clic droit > propriétés

9 SI28 - Écriture multimédia interactive – A2004 Calques – Manipulation Z = 1 Z = 2 Déplacer, modifier la taille, imbriquer les calques l’un dans l’autre Aligner les calques  sélectionner les calques en maintenant shift appuyé  Menu Modifier > aligner > haut, bas gauche, droite

10 SI28 - Écriture multimédia interactive – A2004 Calques – Manipulation Calque 2 visible Calque 1 invisible Inspecter les calques fenêtre > autres > calque ou F2

11 SI28 - Écriture multimédia interactive – A2004 Comportements – Utilisations Un comportement permet la génération de code javaScript. Permet d’ajouter: Fonctionnalité au site Interactivité

12 SI28 - Écriture multimédia interactive – A2004 Comportements – Création Pour créer un comportement il faut : 1.Un objet (calque, image, bouton flash…) 2.Un événement (clique, survol…) 3.Une action (afficher une image, cacher le menu…) Création du comportement Sélectionner un objet Tag inspector > behaviors (ou maj+F3) Supprimer un comportement Ajouter un comportement Événement

13 SI28 - Écriture multimédia interactive – A2004 Comportements – Création Quand l’utilisateur arrête le téléchargement d’un doc Quand utilisateur clique en dehors d’une zone -------------------------- sur un élément (=lien) --------------------------deux fois sur un élément Quand le navigateur rencontre une erreur Quand l’élément spécifié devient le focus 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 spécifié Quand le pointeur passe sur l’élément spécifié Quand un bouton de la souris est relâché

14 SI28 - Écriture multimédia interactive – A2004 Comportements – Exercice Reprendre l’exercice sur le formulaire Ajouter un calque 1 visible contenant le texte « Formulaire » Placer le formulaire dans un calque 2 invisible Associer au calque 1 une action « mouse over » qui rend visible le calque 2 Associer au bouton « s’inscrire » l’action message contextuel contenant le texte « Vos données personnelles ont été envoyées »

15 SI28 - Écriture multimédia interactive – A2004 Scénarios – Utilisations modifier, suivant une échelle temporelle, la position, la taille, la visibilité et/ou l'ordre de superposition d'un calque. Ils intègrent aussi les sons et les comportements. Permet d’animer, de dynamiser, image par image (avec interpolation et images clés)

16 SI28 - Écriture multimédia interactive – A2004 Scénarios – Propriétés Barre des comportements Contrôles de lecture Canaux d’animation Images clés calques Nombre d’images par seconde rembobiner Défilement avant/arrière image par image Nom du scénario Tête de lecture

17 SI28 - Écriture multimédia interactive – A2004 Scénarios – Exercice Reprendre l’exercice précédent Créer un calque 3, le sélectionner Onglet « modifier » Puis « Enregistrer le chemin du calque » Maintenir le clic droit et tracer le chemin du calque Relâcher le clic ou l'animation doit s'arrêter. Dreamweaver ajoute une barre d'animation au scénario, avec le nombre nécessaire d'images-clés. Choisir un événement associé au calque 2 pour lancer la lecture du scénario (par exemple « on click »)

18 SI28 - Écriture multimédia interactive – A2004 Feuilles de style css – Utilisation Les CSS sont l'outil de présentation des pages Web standards. Les CSS permettent une stricte séparation du contenu HTML et des informations de mise en page. Avantages: o Gestion simplifiée et économique (une seule feuille de style pour toutes les pages, aisément modifiable) o Allègement du code-source des pages Web o Possibilité de doter une page de feuilles de style spécifiques selon les médias (navigateurs graphiques, lecteurs d'écran…). o Possibilité de doter une page de présentations alternatives au choix de l'utilisateur ; oMeilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.

19 SI28 - Écriture multimédia interactive – A2004 Feuilles de style css – Création Menu fenêtre Styles CSS Importer un style Supprimer le style … Nouveau style Modifier le style

20 SI28 - Écriture multimédia interactive – A2004 Feuilles de style css – Création Incompatibles avec de nombreux navigateurs Jeu de polices Catégories de personnalisation

21 SI28 - Écriture multimédia interactive – A2004 Feuilles de style css – Exercice Ouvrir un nouveau fichier HTML Créer un calque 1 et un calque 2 Créer une feuille de style CSS personnalisée L’appliquer aux deux calques (sélectionner les calques et cliquer sur la feuille de style) Enregistrer le fichier et le fermer Modifier la feuille de style (Par exemple la couleur d’arrière plan) Enregistrer la modification Exécuter le fichier HTML avec le navigateur

22 SI28 - Écriture multimédia interactive – A2004 Modèles – Utilisation Permet :  Harmonisation du site.  Une mise à jour des toutes les pages est possible à partir d’une modification sur le modèle. Un modèle permet de créer des pages réutilisables Un modèle de page possède des zones modifiables et non modifiables. Les zones non modifiables correspondent aux éléments communs à toutes les pages.

23 SI28 - Écriture multimédia interactive – A2004 Modèles – Création Cliquer dans le menu déroulant à droite dans Fichiers (file) Nom du modèle Zone d’affichage Dans la zone d’affichage -Clique droit > nouveau modèle -Nommer le modèle sélectionner l’icône modèles

24 SI28 - Écriture multimédia interactive – A2004 Modèles – Enregistrer un modèle Une fois le modèle défini, l’enregistrer : > Menu fichier > enregistrer comme modèle Ecrivez le nom de votre modèle Choix du site Fenêtre > modèles Edit region (région modifiable) Donner un nom au modèle Construire le modèle en insérant des zones modifiables

25 SI28 - Écriture multimédia interactive – A2004 Modèles – Appliquer un modèle Ouvrir une nouvelle page Fenêtre > Modèle Sélectionner le modèle Appliquer Remplir les zones modifiables Enregistrer la page HTML Le modèle peut être modifié à Tout moment. Ne pas oublier de mettre à jours les pages Modifier > Modèle > mettre à jours les pages

26 SI28 - Écriture multimédia interactive – A2004 Modèles – Exercice Créer un nouveau modèle M1 Deux calques C1 et C2 avec deux zones modifiables Z1 et Z2 Définir 2 feuilles de style pour C1 et C2 Un scénario faisant osciller verticalement C1 Un comportement affichant C2 par clic sur C1 Enregistrer comme modèle Générer deux pages HTML sur ce modèle Remplir les zones modifiables Enregistrer les pages (Dans le répertoire du site) et les fermer Modifier le chemin du scénario de C1 dans le modèle M1 Enregistrer le modèle et mettre à jour les pages

27 SI28 - Écriture multimédia interactive – A2004 Gestion de site 1. Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) 2. Donner un nom au site 3. Choisir ou non une technologie serveur 4. Définir l’emplacement local du site 5. Choisir le mode de connexion ftp et remplir les champs comme ceci : 6. Tester la connexion et valider Adresse du site : www4.utc.fr/~si28xxx sunserv.utc.fr

28 SI28 - Écriture multimédia interactive – A2004 Carte La carte Mise à jour Pour afficher la carte : cliquer sur fichier > développer /réduire puis sur carte Upload Download