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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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