DREAMWEAVER Séance 2 SI28 – P06 Nolwenn PICHAUD

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

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

Formulaire Définition : Les formulaires permettent de saisir des informations et de les envoyer à un autre fichier afin de les traiter. Exemples d’utilisation : inscription dans un site, QCM, base de données Comment? 1) Insertion > formulaire 2) Barre d’insertion > formulaires > Autre méthode (3): dans menu : Insertion > formulaires 3 1 2

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

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

Exercice Créer un formulaire Créer un tableau Créer les objets

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, …) Comment? Insertion > calque Barre d’insertion > commun > calque Dessiner un calque Intérêt du calque : on peut lui ajouter un comportement

Propriété d’un calque L: largeur H: hauteur dimensions G: position par rapport du haut de la page S: position par rapport du bord gauche Position (en pixel) Visibilité Ordre des calques Index de position : 1 : premier plan, 2 : deuxième plan,... Nom du calque Propriétés du calque sur Dreamweaver Partie visible du calque Type de balise HTML Débordement* Couleur d’arrière plan *4 possibilités de traiter le débordement du contenu d'un calque : - Visible : le navigateur redimensionnera le calque pour que tout le document 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) Image d’arrière plan

Manipuler un calque Z = 1 Z = 2 Déplacer, modifier la taille, imbriquer les calques l’un dans l’autre Z = 1 Z = 2 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 Inspecter les calques : fenêtre > calque ou F2

Comportements Un comportement comprend : 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 …

Les événements onAbort Lorsque l'utilisateur appuie sur le bouton stop du navigateur, alors que tout n'est pas encore chargé. onBlur Lorsque l'élément perd le focus. onChange Lorsque la valeur de l'élément est modifiée onClick Lorsque l'utilisateur clique sur un élément onDblClick Lorsque 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 onFocus Lorsque l'utilisateur active un élément. onKeydown Lorsque l'utilisateur appuie sur une touche onKeypress Lorsque l'utilisateur maintient une touche appuyée onKeyup Lorsque l'utilisateur relâche une touche onLoad Entre en action quand un fichier HTML est chargé. onMouseDown Lorsque l'utilisateur maintient la touche de souris appuyée. onMouseMouve Lorsque l'utilisateur bouge la souris sur l'élément onMouseOver Lorsque l'utilisateur passe sur l'élément avec la souris onMouseUp Lorsque l'utilisateur, après avoir appuyé la touche de souris, la relâche. onSelect Lorsque l'utilisateur saisi du texte onSubmit Lors de l'envoi du formulaire

Les actions

Création d’un comportement Fenetre > comportements ou SHIFT+F3 Afficher les comportements définis Supprimer un comportement Évènement action Pour ajouter un comportement il faut sélectionner un objet et puis dans le menu « Comportements » il faut choisir l’événement que l’on veut et lui associer une action.

Exemple 1) Créer un calque 1 dans lequel on met une image 2) Mettre un texte dans un 2eme calque 3) on veut que le texte apparaisse que quand on passe sur l’image

Feuille de style css CSS =  Cascading Style Sheet = Feuille de styles en Cascade Le terme « en cascade » signifie qu’il est possible d’appliquer plusieurs feuilles de style à une même page Web. 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 …) Avantages des CSS : Séparation du contenu HTML et des informations de mise en page. Présentation homogène sur tout un site Facilitation de la mise à jour de toutes les pages en ne changeant qu’un seul fichier Des chargements de page plus rapides Il existe deux types de CSS : 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éé en dehors de la page HTML. Le style peut donc être réutilisé sur d’autres pages en faisant un lien vers ce fichier.

Création d’une feuille de style Importer un style Supprimer le style … Nouveau style Modifier le style Feuille interne Feuille externe nom commençant par un point… Menu création > style CSS

Propriétés de la feuille de style 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. 

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

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

Les modèles Intérêts d’utiliser un modèle : Permet de créer des présentations réutilisables pour lesquelles on définit des zones modifiables et non modifiables. Permet d’harmoniser le site, de le mettre à jour en modifiant le modèle de base Comment ? 1 Fichier> actifs> créer modèle 2 Nouveau modèle (ou click droit dans zone d’affichage) 1 2

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

Appliquer un modèle Fichier>nouveau>onglet modèle>créer… Les régions en cyan sont modifiables. Seules les régions modifiables sont sélectionnables… et modifiables! On peut modifier un modèle à tout moment… puis: Enregistrer > mettre à jours les pages que l’on souhaite

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

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

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.