SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 1 PRESENTATION Dreamweaver 2.

Présentation au sujet: "SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 1 PRESENTATION Dreamweaver 2."— Transcription de la présentation:

1 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 1 PRESENTATION Dreamweaver 2

2 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 2  Formulaires  Modèles  Feuilles de styles CSS  Calques  Comportements  Scénarios  Gestion de site Plan

3 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 3  Exemple d’utilisation…  Domaines d’utilisation Saisie d’informations personnelles (inscription sur un site), Interfaçage avec une base de donnée (mise à jour), Personnaliser (type de navigateur, résolution du navigateur). Formulaires - Définition Les formulaires permettent à l’utilisateur de saisir des données traitées par la suite dans une base de données

4 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 4 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

5 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 5 Formulaires - Création Zone du formulaire  Avant tout, il faut définir la zone du formulaire ! Nom Méthode d’envoi du formulaire Fichier de traitement des informations  Contrôle des propriétés

6 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 6 Formulaires - Exercice Champ de texte Liste/Menu Zone de texte Boutons radio Envoyer  Remarque il faut modifier une partie du code généré

7 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 7  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. Modèles - Définition  Intérêts: Cohérence et harmonisation d’un site Structuration des données modification aisée d’un site entier à partir de la mise à jour du modèle de base

8 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 8 Modèles - Création 1- cliquer sur onglet modèle 2- cliquer sur la flèche d’accès au menu > nouveau modèle 3- nommer le modèle 4- double-cliquer pour ouvrir le modèle 5. Créer la page 6. N’oublier pas d’insérer une région modifiable grâce à la barre d’insertion :

9 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 9 Modèles - Exercice  Les partie encadrées couleurs cyan sont des zones modifiables :

10 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 10 Modèles - Exercice  Créer un nouveau modèle  Enregistrer le en tant que modèle : Fichier > Enregistrer comme modèle…(.dwt )  Fermer le modèle créé  Créer un nouveau fichier HTML  Appliquer lui le modèle créé : Modifier > Modèles > Appliquer le modèle à la page…  Modifier les zones autorisées  Enregistrer la page ainsi créer : Fichier > Enregistrer sous… (.html )

11 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 11 Modèles - Exercice  Rouvrir le modèle  Modifier le (supprimer une zone modifiable, couleur…)  Enregistrer le de nouveau  Un menu de mise a jour des pages liées au modèle s’ouvre Autrement Modifier > Modèles > Mettre à jour les pages…  Il est possible qu’un menu s’ouvre pour vous demander ce qu’il advient des zones modifiables supprimer afin éventuellement de déplacer leur contenu

12 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 12 Feuilles de styles CSS - Définition  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: Gestion simplifiée et économique (une seule feuille de style pour toutes les pages, aisément modifiable) Allègement du code-source des pages Web Possibilité de doter une page de feuilles de style spécifiques selon les médias (navigateurs graphiques, lecteurs d'écran…). Possibilité de doter une page de présentations alternatives au choix de l'utilisateur.

13 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 13 Importer un style Supprimer le style … Nouveau style Modifier le style Feuille interne Feuille externe nom commençant par un point… Feuilles de styles CSS - Création > Menu création > Style CSS

14 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 14 Incompatibles avec de nombreux navigateurs Jeu de polices Catégories de personnalisation Feuilles de styles CSS - Création

15 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 15 Feuilles de styles CSS - Exercice  Ouvrir un nouveau fichier HTML  Créer une feuille de style CSS personnalisée  L’appliquer à un calque ou à du texte  Enregistrer le fichier  Modifier la feuille de style (Par exemple la couleur d’arrière plan)  Enregistrer la modification  Exécuter le fichier HTML avec le navigateur

16 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 16 Feuilles de styles CSS - Exportation  Dans le fichier HTML précédant Fichier > Exporter > Exporter les styles CSS ou Texte > Style CSS > Exporter feuille de style  Pour une utilisation du style dans d’autres pages HTML Menu création > Style CSS ou Texte > Style CSS > Attacher une feuille de style

17 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 17 Calques - Définition  Les calques sont des éléments de page HTML qui : peuvent être placés à n’importe quel endroit de la page web peuvent contenir n’importe quel objet (image, texte, formulaire, …)  Intérêt : la mise en forme la création de comportements La création de scénario

18 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 18 Calques - Création 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

19 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 19 Calques - Exercice  Créer un calque  Dans la barre de propriétés : nommer le « image »  Dans la barre de propriétés : insérer l’image « hibou.jpg »  Créer un deuxième calque : le nommer « texte »  Dans le calque, écrire « Ceci est un hibou »  Enregistrer la page ainsi créer : Fichier > Enregistrer sous… ( calques.html )  Pour vérifiez que vous avez bien sélectionné le bon calque, des poignées apparaissent  en cliquant sur la poignée de sélection de calque ou le marqueur de calque  en utilisant le panneau Calques

20 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 20 Comportement - Définition  Les comportements insèrent du code JavaScript dans des documents pour permettre : Ajouter des fonctionnalités au site. Introduire de l’interactivité  Un comportement comporte 3 éléments de base un objet (calque, image, bouton flash…) un événement (clic, survol…) une action (afficher une image, cacher le menu, son…)

21 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 21 Comportement - Création Supprimer un comportement Ajouter un comportement Événement Action  Sélection d’un objet, Fenêtre > comportements  Afficher les événements pour Explorer 6 Pour associer un comportement à l’ensemble de la page, cliquer sur ou pour le calque dans le sélecteur de balises, situé dans le coin inférieur gauche de la fenêtre de document.

22 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 22 Comportement – Évènements et actions 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é Liste des évènementsListe des actions

23 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 23 Comportement – Exercice  Revenir sur la page calques.html  Sélectionner le calque hibou  Dans le cadre des comportements : jouer le son ping.mp3 quand OnMouseOver  Afficher le calque texte quand OnClick  Masquer le calque texte quand OnMouseOut  Sélectionner le calque texte, et dans le cadre de propriétés : Visibility : hidden  Enregistrer la page ainsi créer : Fichier > Enregistrer sous… ( comportements.html )

24 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 24 Scénario -Définition  Les scénarios permettent de créer des animations simples sans connaître JAVA script.  Le type le plus courant d'animation de scénario inclut le déplacement d'un calque sur un chemin. Les scénarios ne peuvent déplacer que des calques.  Dynamique image par image avec interpolation  Comparable à celui déjà vu pour Flash

25 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 25 Scénario – Barre d’outils Canal de comportements Contrôles de lecture Canaux d’animation Images clés calques Image en cours Nombre d’images par seconde rembobiner Défilement avant/arrière image par image Fenêtre > Autres > Scénarios

26 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 26 Scénario – Exercice  Sélectionnez le calque hibou  Choisissez Modifier > Scénario > Ajouter un objet au scénario ou faite le glisser dans le panneau Scénarios. Une barre apparaît dans le premier canal du scénario. Le nom du calque ou de l'image y sera affiché.  Cliquez sur l'indicateur d'image-clé, à la fin de la barre.  Déplacez le calque sur la page à l'emplacement où il doit se trouver à la fin de l'animation. Une ligne apparaît pour indiquer la trajectoire de l'animation dans la fenêtre de document.  Placez vous à la fin de votre barre de scénario  Choisissez Modifier > Scénario > Enregistrer le chemin du calque Un autre scénario, c’est ajouter sur la timeline.  Choisir des images dans la time line et modifier la taille du calque  Enregistrer la page sous : scénario.html

27 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 27 Gestion de site – avec un serveur Mise en ligne du site  Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites)  Donner un nom au site  Choisir ou non une technologie serveur  Définir l’emplacement local du site  Choisir le mode de connection FTP  remplir les champs

28 SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P2006 28 Mise en ligne du site  Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites)  Donner un nom au site  Choisir ou non une technologie serveur  Définir l’emplacement local du site  Choisir le mode de connection Local/Réseau  remplir les champs : Z:\ public_html  Alors, votre site est visible par tous à l’adresse : wwwetu.utc.fr/~login  Attention, avez-vous bien fait votre première page index ? … Gestion de site – via l’UTC