DREAMWEAVER 2 Michael LEPERS Pierre LAINÉ.  Formulaire  Calques  Comportements  Feuille de style CSS  Modèle  Scénario  Gestion du site.

Présentation au sujet: "DREAMWEAVER 2 Michael LEPERS Pierre LAINÉ.  Formulaire  Calques  Comportements  Feuille de style CSS  Modèle  Scénario  Gestion du site."— Transcription de la présentation:

1 DREAMWEAVER 2 Michael LEPERS Pierre LAINÉ

2  Formulaire  Calques  Comportements  Feuille de style CSS  Modèle  Scénario  Gestion du site

3 Formulaire 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)Mettre à jour une base de données

4 Création d’un formulaire Deux possibilités Insertion > formulaire Barre d’insertion > formulaires >

5 Propriété d’un formulaire Nom du formulaire Méthode d’envoi du formulaire (Get ou Post) Fichier qui traitera le formulaire Les méthodes d’envoi - Post : envoyé par protocole HTTP - Get : passé par URL

6 Le menu formulaire Formulaire Image Reroutage Étiquette Zone de texte Texte Bouton Case à cocher Bouton radio Menu / liste Fichier Champ caché il faut insérer les objets dans le formulaire sinon ils n’apparaîtront pas en tant qu’objet du formulaire !

7 Exercice 1)Créer un formulaire 2)Créer un tableau 3)Créer les objets

8 Calques 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, …)

9 Création d’un calque Deux possibilités Insertion > calque Barre d’insertion > commun > calque

10 Propriété d’un calque W: hauteur L: largeur dimensions Nom du calque Type de balise HTML L: position à partir du bord gauche S: position à partir du bord haut Position (en pixel) Couleur d’arrière plan Débordement Partie visible du calque Visibilité Ordre des calques Propriétés du calque sur Dreamweaver

11 Manipuler un calque 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  autres outils La grille de positionnement : affichage > grille > afficher la grille La règle de positionnement : affichage > règle > afficher

12 Inspecter les calques Calque 2 visible Calque 1 invisible fenêtre > calque ou F2

13 Comportement Définition : les comportements vont permettre de rendre les pages interactives et fonctionnelles par la génération de code Java Script. Un comportement comprend : Un objet (calque, image, bouton flash…) Un évènement : L’utilisateur fait quelque chose à l’objet. Exemple: clique sur un lien, clique sur un bouton, modification d’une zone de texte … Une action : Code Java Script pré-rédigé qui effectue une tâche spécifique Exemple : ouverture d’une nouvelle page dans le navigateur,afficher/masquer un calque,diffuser/arrêter un son ou une animation, vérifier un formulaire …

14 Les évènements onAbort Lorsque l'utilisateur appuie sur le bouton stop du navigateur, alors que tout n'est pas encore chargé. onBlurLorsque l'élément perd le focus. onChangeLorsque la valeur de l'élément est modifiée onClickLorsque l'utilisateur clique sur un élément onDblClickLorsque l'utilisateur clique deux fois sur un élément onError Est approprié pour capter les messages d'erreur et les remplacer par des messages personnalisés onFocusLorsque l'utilisateur active un élément. onKeydownLorsque l'utilisateur appuie sur une touche onKeypressLorsque l'utilisateur maintient une touche appuyée onKeyupLorsque l'utilisateur relâche une touche onLoadEntre en action quand un fichier HTML est chargé. onMouseDownLorsque l'utilisateur maintient la touche de souris appuyée. onMouseMouveLorsque l'utilisateur bouge la souris sur l'élément onMouseOverLorsque l'utilisateur passe sur l'élément avec la souris onMouseUpLorsque l'utilisateur, après avoir appuyé la touche de souris, la relâche. onSelectLorsque l'utilisateur saisi du texte onSubmitLors de l'envoi du formulaire

15 Les actions

16 Création d’un comportement Fenêtre > comportements ou SHIFT+F3 Afficher les comportements définis Supprimer un comportement Évènement action

17 Exemple 1) Reprendre le formulaire et le mettre dans un calque 2) Mettre le titre dans un 2eme calque 3) Créer un premier comportement : lors d’un click sur le bouton « valider », afficher un message : « traitement effectué » 4) Rendre le formulaire invisible 5) Créer un deuxième comportement qui rendra le formulaire visible si l’on passe/click dessus

18 Feuille de style css (Cascading Style Sheets ) Principe: Définir des caractéristiques de mise en forme( polices, arrière-plan…) qui seront ensuite associées à des groupes d'éléments (texte,calque …) Ce que les feuilles de style permettent : Une stricte séparation du contenu HTML et des informations de mise en page. Obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style Une plus grande lisibilité du HTML car les styles sont définis à part La disparition des tableaux détournés à des fins de présentation Des chargements de page plus rapides, pour les mêmes raisons que précédemment

19 Feuille de style css Il existe deux types de feuilles de style : Interne : Les données concernant le style sont stockées dans le code HTML de la page. Le style n’est donc applicable qu’aux éléments de la page. Externe : Un fichier.css contenant les données du style est crée en dehors de la page HTML. Le style peut donc être réutiliser sur d’autres pages en faisant un lien vers ce fichier.

20 Création d’une feuille de style Modifier le style Importer un style externe Supprimer le style Nouveau style Le nouveau style de nom « MonPremierStyle » est enregistré dans le fichier mon Style.css. C’est un style externe En cochant « seulement ce document », on crée un style interne

21 Propriétés de la feuille de style

22 Appliquer un style css 1)Sélectionner le texte dans la page 2)Sélectionner le style dans panneau Styles CSS ou clic droit style CSS.

23 Exercice 1 : Création d’un style interne 1)Créer deux calques comportant du texte 2)Créer un style css en cochant « Seulement ce document » 3)Appliquer le style au deux calques 4)Visualiser dans le navigateur 5)Modifier le style css 6)Visualiser dans le navigateur

24 Exercice 2 : Création d’un style externe 1)Créer un calque 2)Créer une feuille de style externe et l’enregistrer 3)Appliquer le style au calque 4)Fermer le fichier 5)Créer un nouveau fichier 6)Importer le style css et l’appliquer à un calque

25 Les modèles  Permet de créer des présentations réutilisables pour lesquelles on définit des zones modifiables et non modifiables.  Les modèles permettent d’harmoniser le site, de le mettre à jour en modifiant le modèle de base

26 Créer un modèle 1 Fichier> actifs> créer modèle 2 Nouveau modèle (ou click droit dans zone d’affichage) 1 2

27 Créer un modèle 1 Dessiner un calque 2 Le rendre modifiable: Onglet modèle> région modifiable 3 Fichier> Enregistrer comme modèle… 3 2 1

28 Appliquer un modèle Fichier>nouveau>onglet modèle>créer… Seule la région modifiable est sélectionnable… et modifiable! On peut modifier un modèle à tout moment… puis:  Enregistrer > mettre à jours les pages que l’on souhaite

29 Les scénarios A quoi ça sert? Les scénarios permettent de créer des animations simples sans l’utilisation de JAVA script. Ils permettent de modifier la position, la taille, la visibilité, l’ordre de superposition des objets. Objets en jeu Calques, sons, images, comportements. Principe Dynamique image par image avec interpolation Comparable à celui déjà vu pour Flash

30 Création d’un scénario calques Canaux d’animation Images clés Tête de lecture Nombre d’images par seconde rembobiner Défilement avant/arrière image par image Fenêtre > Autres > Scénarios ou ALT+F9

31 Création d’un scénario 1. Sélectionner le calque puis venir le déposer simplement dans le tableau des scénarios par un glisser – déposer (chaque ligne = 1 calque) 2. Clic droit > Enregistrer le chemin du calque 3. Tracer un parcours pour le calque sélectionné, lâcher la souris au point final de l’animation. Dreamweaver ajoute une barre d'animation au scénario, avec le nombre optimal d'images-clés.

32 Le gestionnaire du site Créer ou modifier un site: Site > Nouveau site ou Site > Modifier les sites Donner un nom au site Choisir une technologie serveur Définir l’emplacement local du site Choisir le mode de connection ftp et remplir les champs comme suit : sunserv.utc.fr