Dreamweaver Vincent Drapier Automne 2006 Nabil El Hefni

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

Dreamweaver Les Formulaires 2

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. 3

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 4

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

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? champ 1=valeur 1&champ 2=valeur 2 (Adresse très longue, et peu de sécurité) 6

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 7

Dreamweaver Les Templates (modèles) 8

Dreamweaver But: • Définir une page en modèle permet de réutiliser celle-ci en ne modifiant 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. 9

Dreamweaver 10

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

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

Dreamweaver Ajouter une région modifiable • 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. 13

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 14

Dreamweaver Les calques 15

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, …) 16

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 17

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) 18

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 19

Dreamweaver Les Comportements 20

Dreamweaver Les comportements insèrent du code Java. Script 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 21

Dreamweaver Exemples d'événements: • on. Click : Quand l'utilisateur click sur un élément. • on. Mouse. Move : Quand la souris se déplace sur l'élément • on. Mouse. Out : Quand la souris sort de l'élément • on. Load: 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 22

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

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 » 24

Dreamweaver Les scénarios 25

Dreamweaver Définition: Les scénarios servent à réaliser de petites animations sans avoir à connaître Java. Script. 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. 26

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

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 » 28

Dreamweaver Les feuilles de style CSS 29

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 2 types de feuilles de style: • 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 30

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 03 31

Dreamweaver 2 catégories de style CSS: • 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 32

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

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

Dreamweaver Création d’un CSS 35

Dreamweaver Le CSS dans le code… <html> <head> <title>youpi</title> <style type="text/css"> <!-// Code ici --> </style> </head> <body> </html> 36

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 37

Dreamweaver Feuille de style externe Attacher une feuille de style: Texte > Style CSS > Attacher une feuille de style Appel dans le code d’une feuille de style externe Entre les balises <head></head>: <link rel="stylesheet" type="text/css" href= " lien de votre fichier" media="all" title= « titre du fichier" /> 38

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; Définit les marges à partir de chaque bord margin-left: auto; margin-bottom: 20 px; input, textarea, select { border-style: solid; border-width: 1 px; border-color: #9 B 0220; padding: 1 px; } // Définit un style pour les balises de formulaires input, textarea et select input. textfield, textarea, select { background-color: #FEE 6 E 6; } // Arrière plan des balises citées 39

Dreamweaver Gestion du site et sa mise en ligne 40

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

Dreamweaver Mise en ligne du site: à l’UTC • 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 ATTENTION de bien mettre les droits sur vos fichiers et de nommer votre 1 e page ‘index’ 42