1 Dreamweaver SI28: Ecriture interactive et multimédia Vincent Drapier Nabil El Hefni Automne 2006.

Présentation au sujet: "1 Dreamweaver SI28: Ecriture interactive et multimédia Vincent Drapier Nabil El Hefni Automne 2006."— Transcription de la présentation:

1 1 Dreamweaver SI28: Ecriture interactive et multimédia Vincent Drapier Nabil El Hefni Automne 2006

2 2 Dreamweaver Les Formulaires

3 3 Dreamweaver Définition : Les formulaires permettent de saisir des informations et de les envoyer à un autre fichier afin de les traiter. Exemple d’utilisation : 1) S’inscrire à un site. Le visiteur saisit des informations le concernant. Après l’envoi, les informations sont enregistrées dans une base de données. 2) S’identifier sur ce même site après validation de l'inscription.

4 4 Dreamweaver Insertion d’un formulaire On travaille ensuite dans la zone en pointillés rouges pour ajouter des éléments comme des champs de textes ou des menus déroulants

5 5 Dreamweaver Les différents éléments d’un formulaire:

6 6 Dreamweaver Propriété du formulaire Action: En général ce sera la page vers laquelle seront envoyées les information à traiter. Ces information doivent être traité par un langage de programmation comme php. Pour transmettre les information vers cette page, il y a 2 méthode: « POST » est la méthode qui correspond à un envoi de données stockées dans le corps de la requête, tandis que « GET » correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation. Exemple de la méthode GET: http://www. site.com/index.php?champ1=valeur1&champ2=valeur2 (Adresse très longue, et peu de sécurité)

7 7 Dreamweaver Exemple: Créer un formulaire avec pour action « index.php » et « Post » comme méthode. Insérer une liste et 2 champs de texte Enregistrer le fichier sous « index.php » Insertion du code php disponible sur http://wwwetu.utc.fr/~nelhefni/ Copie du fichier dans votre « public_html » Gestion des droits

8 8 Dreamweaver Les Templates (modèles)

9 9 Dreamweaver But: Définir une page en modèle permet de réutiliser celle-ci en ne modifiant que quelques zones prédéfinies. Rendre le contenu homogène en gardant une même structure. Intérêt: Une modification du modèle = toutes les pages modifiées automatiquement Mise à jour massive d’un ensemble de pages Ajouter/modifier/supprimer une page en touchant qu’au contenu Plusieurs modèles peuvent être attachés à un même site pour changer l’affichage.

10 10 Dreamweaver

11 11 Dreamweaver Cliquer sur le bouton Modèles dans l’onglet ‘actifs’ du panneau de commande ‘fichiers’

12 12 Dreamweaver Clic droit puis ‘nouveau modèle. Nommer le modèle Double cliquer dessus

13 13 Dreamweaver Par défaut, tout ce qui est contenu dans un modèle se retrouve non modifiable dans la page créée sur ce modèle. Pour pouvoir rendre des zones modifiables dans les pages créées sur le modèle, il faut définir dans le modèle des "régions modifiables" Il est possible de définir des régions répétées, dont le but est de spécifier des éléments dans le modèle, et de reproduire à volonté ces éléments dans la page créée sur ce modèle. Une région facultative permet de décider si des éléments doivent s'afficher ou être masqués dans les documents basés sur le modèle. Ajouter une région modifiable

14 14 Dreamweaver Exercice Faire un tableau de taille 100% comme celui-ci: Mettre une région modifiable: –En haut pour le titre du site –Dans la partie gauche pour le menu du site –Au centre pour le contenu du site Nommer ces régions et enregistrer Créer une nouvelle page html pour chacune de ces régions puis appliquer le modèle à celle-ci en choisissant bien dans quelle région on veut appliquer la page. –Menu Modifier/modèles/Appliquer le modèle à la page

15 15 Dreamweaver Les calques

16 16 Dreamweaver Définition : Les calques sont des éléments de page HTML sous forme de rectangle qui servent à structurer les pages. Ils peuvent être placés à n’importe quel endroit de la page web. Ils peuvent contenir n’importe quel objet (image, texte, formulaire, …)

17 17 Dreamweaver Insertion d’un calque Positionnement du calque en pixel G: Par rapport au bord gauche de la page S: Par rapport au haut de la page Taille du calque en pixel Type de débordement

18 18 Dreamweaver Il existe 4 manières de traiter le débordement du contenu d'un calque : Visible : le navigateur redimensionnera le calque pour que tout son contenu soit affiché à l'écran Hidden : le navigateur tiendra compte des dimensions du calque et coupera le contenu (le débordement ne sera pas affiché à l'écran) Scroll : insertion de 2 barres de défilement (horizontale + verticale) Auto : le navigateur utilisera ses options par défaut (hidden pour Netscape, scroll pour IE)

19 19 Dreamweaver Exemple Créer un calque pour y insérer l’image Créer ensuite un deuxième calques où vous y placerez un texte Faites en sortes que le texte et l’image soit superposés

20 20 Dreamweaver Les Comportements

21 21 Dreamweaver Les comportements insèrent du code JavaScript dans des documents pour permettre : Ajouter des fonctionnalités au site. Introduire de l’interactivité L’utilisateur peut donc faire du javascript, sans connaître le javascript. Un comportement comporte 3 éléments de base un objet (calque, image, bouton flash…) un événement une action

22 22 Dreamweaver Exemples d'événements: onClick : Quand l'utilisateur click sur un élément. onMouseMove : Quand la souris se déplace sur l'élément onMouseOut : Quand la souris sort de l'élément onLoad: Déclanche l'action dés que la page est chargée Exemples d'actions: Afficher une nouvelle image, jouer un son, permettre à l'utilisateur de déplacer un calque

23 23 Dreamweaver Insérer un nouveau comportement Supprimer un comportement Action Événement Ajouter un comportement

24 24 Dreamweaver Exemple : Création d’un puzzle Télécharger les 4 images sur http://wwwetu.utc.fr/~nelhefni/ Créer 4 calques déplaçables /!\ Désélectionner le calque avant d’ajouter un nouveau comportement Ajouter pour chacun des calques le comportement « déplacement de calque »

25 25 Dreamweaver Les scénarios

26 26 Dreamweaver Définition: Les scénarios servent à réaliser de petites animations sans avoir à connaître JavaScript. Les animations sont déclenchées par des comportements ou automatiquement et sont définies dans une « Timeline » semblable à celle de Flash. Les objets doivent être obligatoirement être définis dans un calque.

27 27 Dreamweaver Timeline Lecture automatique: évite d’avoir à définir un événement. Image clé Image actuelle Numéro du calque

28 28 Dreamweaver Exemple : Déplacement d’un calque Glisser-déposer le calque dans la fenêtre scénario Sélection de la dernière image de la ligne de temps Déplacez le calque comme souhaité Activer « lecture auto »

29 29 Dreamweaver Les feuilles de style CSS

30 30 Dreamweaver Une feuille de style est un fichier spécial qui définit la mise en forme du document Elle permet une séparation entre le code HTML et le code de mise en page, d’où un allègement du code global On parle de norme CSS (Cascading Styles Sheets) car il est possible d’utiliser les feuilles de styles en cascade Interne : application d’un style à une page Les données sont stockées avec le code HTML de la page Externe : application d’un style à un site Fichier texte spécial stocké en dehors de la page HTML 2 types de feuilles de style:

31 31 Dreamweaver Avantages de la feuille de style Gestion simplifiée de la présentation d’un site web grâce à la modification de la feuille de style uniquement Sélection d’une certaine mise en forme du document selon l’utilisateur Gain de temps lors de la navigation : la feuille de style externe est chargée une et une seule fois 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. Exemples: 01 02 03010203

32 32 Dreamweaver Style personnalisé Définition des attributs pour la mise en page du texte (police, taille, couleur, …) Balises HTML redéfinies Modification de l’interprétation des balises HTML existantes 2 catégories de style CSS:

33 33 Dreamweaver Création d’un CSS 1. Dans le panneau de commande, onglet CSS ( ou Maj F11 ) 2. Clic droit / Nouveau…

34 34 Dreamweaver Création d’un CSS Nom du calque du CSS Feuille de style externe Feuille de style interne

35 35 Dreamweaver Création d’un CSS

36 36 Dreamweaver Le CSS dans le code… youpi <!-- // Code ici -->

37 37 Dreamweaver Après avoir créé le style, il faut l’appliquer sur la zone désirée. (cf panneau de commande inférieur) Attention !! La mise en forme est prioritaire sur le style CSS

38 38 Dreamweaver Attacher une feuille de style: Texte > Style CSS > Attacher une feuille de style Feuille de style externe Entre les balises : Appel dans le code d’une feuille de style externe

39 39 Dreamweaver Le code de la feuille de style: quelques fonctions background-color:#000000; // Définit la couleur d’arrière plan text-align:center; // alignement du texte margin-right:auto; margin-left:auto; margin-bottom:20px; input,textarea,select { border-style:solid; border-width:1px; border-color:#9B0220; padding:1px; } // Définit un style pour les balises de formulaires input, textarea et select input.textfield,textarea,select { background-color:#FEE6E6; } // Arrière plan des balises citées Définit les marges à partir de chaque bord

40 40 Dreamweaver Gestion du site et sa mise en ligne

41 41 Dreamweaver Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) Mise en ligne du site: par un serveur

42 42 Dreamweaver Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) Choisir le mode de connection Local/Réseau Répertoire distant : Z:\ public_html Mise en ligne du site: à l’UTC ATTENTION de bien mettre les droits sur vos fichiers et de nommer votre 1 e page ‘index’