Dreamweaver MX Séance 2 Présenté par : Bastien Durizy Cedric Le-Rest Formulaire Comportement Style css Gestion de site Calque Scénario Modèle

Formulaire Késako? Les formulaires permettent à l’utilisateur de saisir des données. Ha bon, pour faire quoi? Saisir des informations personnelles (inscription sur un site). Interfaçage avec une base de donnée (mise à jour). Personnalisation (choix de skin)

Création d’un formulaire Formulaire Image Reroutage Étiquette Zone de texte Texte Bouton Case à cocher Bouton radio Menu / liste Fichier Champ caché Deux possibilités Insertion > formulaire Barre d’insertion > formulaire > Menu formulaire

Propriétés du formulaire Nom Méthode d’envoi du formulaire Pour utiliser les informations saisies il faut bien spécifier les propriétés suivantes Action: Désigne le fichier qui traitera les données(CGI,PHP…) Méthode: Façon d’envoyer les informations (GET ou POST) Nom: Permet d’identifier le formulaire (pour le traiter au mieux)

Exercice 1.Créer un formulaire 2.Créer un tableau (11,2) 3.Insérer les objets : Textfield Menu\list textarea radio Bouton 4. Remplir les propriétés

Calque Késako? Les calques sont des éléments de page HTML sous forme de rectangle modulable. Pour faire quoi? Placer des objets (image, texte, formulaire, …) à différents endroits sur la page web.

Création d’un calque Deux possibilités Insertion > calque Barre d’insertion > commun > calque 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

Manipulation des calques Déplacer, modifier la taille, imbriquer les calques l’un dans l’autre Z = 1 Z = 2 Superposer des claques Aligner les calques  sélectionner les calques en maintenant shift appuyé  Menu Modifier > aligner > haut, bas gauche, droite

Manipulation des calques Inspecter les calques fenêtre > autres > calque ou F2 Calque 2 visible Calque 1 invisible

Comportements Késako ? Un comportement permet la génération de code javaScript. Ha bon, pour faire quoi? Pour ajouter des fonctionnalités au site. Pour ajouter de l’interactivité (menu dynamique, aide dynamique …)

Créer un comportement Pour créer un comportement il faut : 1.Un objet (calque, image, bouton flash…) 2.Un événement (clique, survol…) 3.Une action (afficher une image, cacher le menu…) Création du comportement: Sélectionner un objet puis faire : Tag inspector > behaviors ou maj+F3 Supprimer un comportement Ajouter un comportement Événement

ActionsÉvènements 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é

Exercice 1.Créer un calque (menu) visible. 2.Créer un calque caché avec deux liens. 3.Créer un comportement pour que le calque caché apparaisse lorsqu’on passe la souris sur menu. 4.Créer un comportement pour qu’une fenêtre popup apparaisse en cliquant sur menu.

Les Scénarios Késako?  Les scénarios créent une animation en modifiant, suivant une échelle temporelle, la position, la taille, la visibilité et/ou l'ordre de superposition d'un calque.  Ils s’appliquent aussi aux sons et aux comportements. Pour faire quoi? Créer de l’animation, du dynamisme, image par image.

Propriété des Scénarios Barre des comportements Contrôles de lecture Canaux d’animation Images clés calques Nombre d’images par seconde rembobiner Défilement avant/arrière image par image Nom du scénario Tête de lecture

Exercice (1/2) 1- Sélectionnez un calque 3- Choisissez Menu Modifier > Enregistrer le chemin du calque ou clique droit > enregistrer le chemin du calque 2- Amenez le calque à sa position initiale au début de l'animation.. Cliquez sur le symbole de calque, ou servez-vous de la palette de calques pour en sélectionner un.

Exercice (2/2) 4- Déplacez le calque sur la page pour décrire son parcours. 6- Dans l'inspecteur de scénario, cliquez sur le bouton Rembobiner, puis maintenez le bouton Lecture enfoncé pour visualiser votre animation. >F12 5- Relâchez la souris à l'emplacement où l'animation doit s'arrêter. Dreamweaver ajoute une barre d'animation au scénario, avec le nombre nécessaire d'images-clés.

Feuilles de style css Késako? 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. Le gain réalisé est considérable : - Gestion simplifiée et économique de la présentation d'un site à l'aide d'une seule feuille de style pour toutes les pages, aisément modifiable ; - Allègement du code-source des pages Web, et donc économie de bande passante : une feuille de style n'est chargée qu'une fois par un navigateur, qui l'applique sans délai si nécessaire aux pages visitées par la suite ; - Possibilité de doter une page de feuilles de style spécifiques selon les medias (navigateurs graphiques, lecteurs d'écran…). Les feuilles de style print permettent une impression immédiate d'une page depuis le navigateur, et dispensent d'avoir à créer une version imprimable du document HTML ; - Possibilité de doter une page de présentations alternatives au choix de l'utilisateur ; - Création de layout flexibles, qui s'adaptent aux différentes résolutions d'écran ; - Meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.

Créer un style css Allez dans menu fenêtre > style css Importer un style Supprimer le style … Nouveau style Modifier le style

Créer un style css Incompatibles avec de nombreux navigateurs Jeu de polices Catégories de personnalisation

Exercice 1.Créer 2 calques 2.Créer un style pour tout le corps avec les infos suivantes : -fond jaune -police arial -police taille 30 3.Créer un style.petit avec les infos suivantes : -fond bleu -police taille 10 souligné blanc -width 50 -height Créer un style.grand avec les infos suivantes : -fond gris -police taille 20 blink gras noir -width 200 -height Appliquer.petit au layer1 et.grand au layer2

Les modèles Pour faire quoi?  Harmonisation du site  Une mise à jour des toutes les pages est possible à partir d’une modification sur le modèle. Késako?  Un modèle permet de créer des pages réutilisables, en définissant des zones modifiables.  Un modèle de page possède des zones modifiables et non modifiables pour harmoniser toutes les pages d’un site. Les zones non modifiables correspondent aux éléments communs à toutes les pages

Créer un modèle Cliquer dans le menu déroulant à droite dans Fichiers (file) Méthode 1: Nom du modèle Zone d’affichage Dans la zone d’affichage : -Clique droit > nouveau modèle -Nommer le modèle (.dwt ) sélectionner l’icône modèles

Enregistrer une page en tant que modèle (Barre Insertion >modèles) Edit region (région modifiable ) Dessiner un calque puis définir à l’intérieur une région modifiable :

Exemple de modèle Région modifiable

Enregistrer une page en tant que modèle Une fois le modèle défini, l’enregistrer : Menu fichier > enregistrer comme modèle Ecrivez le nom de votre modèle Choix du site (Barre Insertion >modèles) Edit region (région modifiable) Dessiner un calque puis définir à l’intérieur une région modifiable :

Appliquer un modèle pour concevoir une page Fichier > Nouveau Sélectionner Onglet modèle Créer à partir du modèle Sélectionner le modèle > créer

Exercice (1/5) But : concevoir des pages interactives à partir du même modèle. Méthode :  définir le modèle (dessin) avec la (les) zone(s) modifiable(s).  construire des pages à partir de ce modèle.  mettre à jour les pages à partir du modèle

Exercice (2/5)

Exercice (3/5) Définissez (concevoir) et enregistrez votre modèle Appelez le modèle (fichier >nouveau…) Dans la région modifiable, faites apparaître les informations sur « présentation de l’UTC » Faites menu fichier >enregistrer sous Enregistrez la page sous format html

Exercice (4/5) Faites de même pour les deux autres pages html (formations.htm et échanges.htm) Revenez au modèle (dwt), définissez les liens avec les pages. Définissez le lien relatif

Exercice (5/5) Pour actualiser les pages en actions :  Menu modifier > modèles > mettre à jour les pages > site entier ou fichiers utilisant (site en cours)  dans la zone mettre à jour,  vérifiez que la case modèle est cochée  cliquez sur démarrer pour lancer la procédure d’actualisation Pour modifier le modèle et tous les fichiers qui l’utilisent:  Menu modifier modèles > ouvrir le modèle joint  modifiez le modèle  Menu modifier > modèles > mettre à jour la page en cours

Gestion de site 1. Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) 2. Donner un nom au site 3. Choisir ou non une technologie serveur 4. Définir l’emplacement local du site 5. Choisir le mode de connexion ftp et remplir les champs comme ceci : 6. Tester la connexion et valider Adresse du site : www4.utc.fr/~si28xxx sunserv.utc.fr

La carte Mise à jour Pour afficher la carte : cliquer sur fichier > développer /réduire puis sur carte Upload Download