SI28 : Ecriture interactive et multimédia Dreamweaver MX Séance 2 Calques Feuilles de styles (CSS) Formulaire Scénario Comportement Modèle Gestion de site CHRYSOSTOM Joé HARVENT Candy

Calques Rappel : Les calques sont des éléments de page HTML qui peuvent être placés à n’importe quel endroit de la page web peuvent contenir n’importe quel objet (image, texte, formulaire, …)

Création d’un calque Deux possibilités Insertion > calque Barre d’insertion > commun > calque L: position à partir du bord gauche S: position à partir du bord haut Position (en pixel) W: hauteur L: largeur dimensions Visibilité Ordre des calques Image Nom du calque Propriétés du calque sur Dreamweaver Couleur d’arrière plan Propriétés du calque au chargement Type de balise HTML Conditions de déroutage

Manipulation des calques Déplacer, modifier la taille, imbriquer les calques l’un dans l’autre Superposer des claques Z = 1 Z = 2 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

Feuilles de style css 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.

Balises HTML redéfinies Feuilles de style css Interne  les données sont stockée dans le code HTML d’une page et n’applique de styles qu’à cette page. Externe Le fichier créé est un fichier texte stocké en dehors de la page HTML. Le style est appliqué à l’aide de liens sur la totalité du site ou sur les pages liées au fichier texte. 2 types de feuille de style Personnalisés Définition d’attributs pour la mise en page du texte: police, taille, couleur…. Balises HTML redéfinies L’interprétation des balises existantes est modifiée. Ex: la balise <BLOCKQUOTE> sert à placer le texte en retrait. La redéfinir permet d’ajouter de nouveaux attributs (couleur, position du texte…) au texte inséré entre les balises. 2 catégories de style CSS

Création d’un style css Importer un style Supprimer le style … Nouveau style Modifier le style

Création d’un style css Incompatibles avec de nombreux navigateurs Jeu de polices Catégories de personnalisation

Celui ci n’apparaîtra donc pas à l’écran. Création d’un style css Pour appliquer le style Sélectionner le texte dans la page Sélectionner le style dans panneau Styles CSS ou clic droit style CSS.  Attention aux conflits de style !!! Si une mise en forme est déjà appliquée, elle est prioritaire au style. Celui ci n’apparaîtra donc pas à l’écran. Les feuilles de styles externes Dans la boîte de dialogue Nouveau style: sélectionner « nouveau fichier feuille de style » au lieu de « seulement ce document ». enregistrer le fichier texte dans le répertoire racine

Exercice Ouvrir un nouveau fichier HTML Créer un calque 1 et un calque 2 Créer une feuille de style CSS personnalisée L’appliquer aux deux calques (sélectionner les calques et cliquer sur la feuille de style) Enregistrer le fichier et le fermer Modifier la feuille de style (Par exemple la couleur d’arrière plan) Enregistrer la modification Exécuter le fichier HTML avec le navigateur

Formulaires Permet à l’utilisateur d’entrer des renseignements le concernant. Ex : âge, sexe, activité… Permet de cibler les catégories d’utilisateurs

Création d’un formulaire Insertion > formulaire ou

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

Création d’un formulaire Pour utiliser les informations saisies il faut bien spécifier les propriétés suivantes Nom Méthode d’envoi du formulaire 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 Créer un formulaire Créer un tableau (8,2) Insérer les objets : Menu\list Textfield Bouton Radio Champ de fichier Bouton 4. Remplir les propriétés

Les Scénarios 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.

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

Exercice Créer un calque, le sélectionner Onglet « modifier », « scénario » Puis « Enregistrer le chemin du calque » Maintenir le clic gauche sur le calque et tracer le chemin du calque Relâcher le clic ou l'animation doit s'arrêter. Dreamweaver ajoute une barre d'animation au scénario, avec le nombre nécessaire d'images-clés.

Comportement Un comportement = un événement + une action Ajoute un comportement Supprime un comportement Modifie l’ordre des actions associées à un même événement Fenêtre > Comportement

Application d’un comportement Les comportements s’appliquent à des liens, des images ou à l’ensemble d’une page Web. Pour associer un comportement à l’ensemble de la page, cliquer sur la balise <body> dans le sélecteur de balises, situé dans le coin inférieur gauche de la fenêtre de document. On ne peut pas associer de comportement à du texte brut. Par contre on peut créer un lien nul à partir de ce texte qui n’engendrera aucune redirection de l’utilisateur vers une autre page. Pour cela, entrer « javascript:; » dans le champ Lien de l’inspecteur de propriétés. Afin de supprimer le soulignement du lien ainsi créé et d’en changer la couleur, en mode Création, entrer les lignes suivantes dans la balise <A href> du lien : <a href="JavaScript:;" style="text-decoration:none;color:black">LIEN</a>

Application d’un comportement 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é Actions Événements

Application d’un comportement 1. Sélectionner l’objet auquel on va associer un comportement ~ 2. Sélectionner une action 3. Sélectionner un événement Remarque : Tous les événements ne sont pas interprétés par tous les navigateurs. Pour afficher seulement les éléments pris en charge par un navigateur donné, sélectionner ce navigateur parmi les choix de « Afficher les événements pour ».

Exercice 1 Créer un calque (menu) visible. Créer un calque caché avec deux liens. Créer un comportement pour que le calque caché apparaisse lorsqu’on passe la souris sur menu.

Exercice 2 Faire disparaître l’image 1 lorsque l’on survole la seconde, et la faire réapparaître en double-cliquant sur cette même image. image1 image2

Les modèles 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 Pour faire quoi? Harmonisation du site Une mise à jour de toutes les pages est possible à partir d’une modification sur le modèle.

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

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 : Ecrivez le nom de votre modèle Choix du site Une fois le modèle défini, l’enregistrer : Menu fichier > enregistrer comme modèle

Appliquer un modèle 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 : sunserv.utc.fr Adresse du site : www4.utc.fr/~si28xxx 6. Tester la connexion et valider