SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia

L ES C ALQUES SI28 – Ecriture interactive et multimedia 2

D REAMWEAVER 2 : C ALQUES Les calques sont des éléments HTML servant à structurer les pages (alternative aux tableaux). Ils peuvent être situés n’importe où sur la page. Ils peuvent contenir n’importe quel objet. 3 SI28 – Ecriture interactive et multimedia

Dans la barre d’outils « mise en forme » : Propriétés du calque : 4 D REAMWEAVER 2 : C ALQUES SI28 – Ecriture interactive et multimedia

Propriété « débordement » : Visible : le navigateur redimensionne le contenu pour que tout soit affiché. Hidden : le navigateur coupera le contenu (le débordement n’est pas affiché). Scroll : le navigateur ajoute des barres de défilement horizontales et verticales. Auto : le navigateur utilise ses options par défaut. 5 D REAMWEAVER 2 : C ALQUES SI28 – Ecriture interactive et multimedia

6 T EMPLATES SI28 – Ecriture interactive et multimedia

Objectif des templates : conserver l’identité graphique d’un site afin de le rendre homogène. Une modification du modèle modifie toutes les pages automatiquement => permet une mise à jour massive 7 D REAMWEAVER 2 : T EMPLATES SI28 – Ecriture interactive et multimedia

Création de zones 8 D REAMWEAVER 2 : T EMPLATES SI28 – Ecriture interactive et multimedia

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. 9 D REAMWEAVER 2 : T EMPLATES SI28 – Ecriture interactive et multimedia

10 F EUILLES DE STYLE : CSS SI28 – Ecriture interactive et multimedia

CSS = Cascading Style Sheet ou Feuilles de Style en Cascade 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. 11 D REAMWEAVER 2 : CSS SI28 – Ecriture interactive et multimedia

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. Exemple : 12 D REAMWEAVER 2 : CSS SI28 – Ecriture interactive et multimedia

2 utilités au CSS: Redéfinition du style des balises html existantes (body, H1, H2, table… ). Création de classes de style réutilisables et applicables à n’importe quel élément du fichier html. 13 D REAMWEAVER 2 : CSS SI28 – Ecriture interactive et multimedia

Lien entre le CSS et les calques: Un calque est en réalité une balise avec des attributs CSS particuliers. Un est un simple cadre qui peut contenir n’importe quoi, un sert à mettre en page. L’attribut CSS « position » permet de déterminer si l’élément agira comme un calque ou non. Le CSS permet donc, en plus de gérer l’apparence des éléments, de gérer la mise en page d’un document html et la position des éléments les uns par rapport aux autres. 14 D REAMWEAVER 2 : CSS SI28 – Ecriture interactive et multimedia

15 F ORMULAIRES SI28 – Ecriture interactive et multimedia

Objectifs : Saisir des informations Les transmettre au site Internet Exemple : L'identification sur le site SI28 16 D REAMWEAVER 2 : F ORMULAIRES SI28 – Ecriture interactive et multimedia

Les deux types de formulaires : GET Envoi des données dans l'URL cible Taille de l'URL limitée (512 caractères) POST Envoi invisible des données pour le client Utile pour les gros volumes d'information 17 D REAMWEAVER 2 : F ORMULAIRES SI28 – Ecriture interactive et multimedia

Barre d’outils formulaires : Menu de reroutage Champ de texte Zone de texte Case à cocher Bouton radio Groupe de bouton radio Formulaire Image Fichier Bouton Etiquette Jeu de champs Liste/Menu Champ masqué 18 D REAMWEAVER 2 : F ORMULAIRES SI28 – Ecriture interactive et multimedia

19 D REAMWEAVER 2 : F ORMULAIRES SI28 – Ecriture interactive et multimedia

20 C OMPORTEMENTS SI28 – Ecriture interactive et multimedia

Dreamweaver met à disposition des comportements qui permettent de réaliser de l'animation ou de l'interactivité dans la page en création. En général, le comportement est associé à un événement, et il réalise l'exécution d'un code Javascript inclus dans la page. Pour créer un comportement, il faut associer une action à un objet pour un événement donné. 21 D REAMWEAVER 2 : C OMPORTEMENTS SI28 – Ecriture interactive et multimedia

Cliquer sur la bordure rouge pour sélectionner le formulaire. Aller dans l'inspecteur de balises, rubrique 'Comportements‘. 22 D REAMWEAVER 2 : C OMPORTEMENTS SI28 – Ecriture interactive et multimedia

Ajouter un comportement de type 'Valider le formulaire' Cocher la case 'Obligatoire' Cocher l'option 'Adresse électronique' Nous venons d'associer l'évènement 'Valider le formulaire‘ à l'objet 'Formulaire' pour l'évènement 'onSubmit‘. 23 D REAMWEAVER 2 : C OMPORTEMENTS SI28 – Ecriture interactive et multimedia

24 S CÉNARIOS SI28 – Ecriture interactive et multimedia

Les scénarios servent à réaliser de petites animations sans avoir à connaître JavaScript. 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. 25 D REAMWEAVER 2 : S CÉNARIOS SI28 – Ecriture interactive et multimedia

Numéro de calque Image clé 26 D REAMWEAVER 2 : S CÉNARIOS SI28 – Ecriture interactive et multimedia

Sélectionnez le calque modèle Ajouter le logo de l’utc dans un nouveau calque. Choisissez Modifier > Scénario > Ajouter un objet au scénario ou faite le glisser dans le panneau Scénarios. Une barre apparaît dans le premier canal du scénario. Le nom du calque ou de l'image y sera affiché. Cliquez sur l'indicateur d'image-clé, à la fin de la barre. Déplacez le calque sur la page à l'emplacement où il doit se trouver à la fin de l'animation. Une ligne apparaît pour indiquer la trajectoire de l'animation dans la fenêtre de document. Placez vous à la fin de votre barre de scénario Choisissez Modifier > Scénario > Enregistrer le chemin du calque Un autre scénario, c’est ajouter sur la timeline. Choisir des images dans la time line et modifier la taille du calque Enregistrer la page sous : scénario.html 27 D REAMWEAVER 2 : S CÉNARIOS SI28 – Ecriture interactive et multimedia

28 M ISE EN LIGNE DU SITE SI28 – Ecriture interactive et multimedia

Mise en ligne par un serveur : Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) Donner un nom au site Choisir ou non une technologie serveur Définir l’emplacement local du site Choisir le mode de connection FTP remplir les champs 29 D REAMWEAVER 2 : M ISE EN LIGNE DU SITE SI28 – Ecriture interactive et multimedia

Mise en ligne du site via l’UTC : Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) Donner un nom au site Choisir ou non une technologie serveur Définir l’emplacement local du site Choisir le mode de connection Local/Réseau remplir les champs : Z:\ public_html Site ensuite visible sur : wwwetu.utc.fr/~login 30 D REAMWEAVER 2 : M ISE EN LIGNE DU SITE SI28 – Ecriture interactive et multimedia