Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.

Présentation au sujet: "Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia."— Transcription de la présentation:

1 Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia Flash

2 Scénario: description Nombre d’images par secondes Lecture automatique Ou en boucle Rembobiner Calques Tete de lecture Images clefs

3 Etape 1: Créer 2 calques Changer tailles et couleurs

4 Etape 2: Sélectionner un calque Aller dans Modifier/Scénario/ Enregistrer le chemin du calque

5 Etape 3: Maintenir click gauche de la sourire et dessiner un beau tracé! Relacher le click lorsque c’est fini

6 Dreamweaver a crée le nombre nécessaire d’images clefs!!

7 Attention!! Avant de créer un trajet Pour l autre rectangle!! Replacer l’indice de timing au Début pour un effet dual Etape 4: Cochez la case pour un tracé automatique

8 Effectuez la même opération pour le calque 2 Puis Testez!

9 Définition d’une feuille de style 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 On parle de norme CSS (Cascading Styles Sheets) car il est possible d’utiliser les feuilles de styles en cascade

10 Avantages de la feuille de style Gestion simplifiée de la présentation d’un site web grâce à la modification de la feuille de style uniquement Sélection d’une certaine mise en forme du document selon l’utilisateur Gain de temps lors de la navigation : la feuille de style externe est chargée une et une seule fois

11 2 types de feuille de style 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

12 2 catégories de style CSS Style personnalisé Définition des attributs pour la mise en page du texte (police, taille, couleur, …) Balises HTML redéfinies Modification de l’interprétation des balises HTML existantes

13 Création d’un style CSS Appuyer sur MAJ + F11 pour afficher la fenêtre des styles CSS. L’onglet styles CSS est sélectionné par défaut. Cliquez sur Nouveau style CSS Une fenêtre de propriétés s’affiche alorsLa fenêtre suivante apparaît : Donnez un nom à votre calque, sélectionnez son type et définissez le seulement dans ce document

14 Création d’un style CSS Vous avez alors la possibilité de renseigner des dizaines de propriétés de mise en forme (police, taille, style, couleur, épaisseur, hauteur de ligne, décoration, …) Validez en cliquant sur Appliquer après avoir renseigné les propriétés voulues dans chacun des onglets disponibles. Dreamweaver a créé le code correspondant : <!-- Code ici -->

15 Application d’un style CSS Après avoir créé le style, il faut l’appliquer à la zone désirée. Pour ce faire, sélectionnez la zone puis cliquez droit. Sélectionnez Styles CSS > nom du style voulu Si vous ne voyez pas de changement, c’est qu’une mise en forme y est déjà appliquée. Attention !! La mise en forme est prioritaire sur le style CSS

16 Création d’une feuille de style externe La différence se situe au tout début de la création. Il faut sélectionner Définir le nouveau style CSS dans un nouveau fichier feuille de style. Enregistrer le fichier feuille de style dans le répertoire courant.

17 Exportation des styles CSS L’exportation des styles CSS permet de charger une feuille de style externe existante Cliquez sur Fichier puis sur Exporter et sélectionnez Exporter les styles CSS

18 Formulaires: Les Formulaires permettent à l’utilisateur de rentrer des données On crée différents champs qui vont être complétés par l’utilisateur et envoyés par mail (HTML) ou manipulés pour générer des pages dynamiques (PHP)

19 Formulaires: Les composants Créer le formulaire Zone de Texte Case à cocher Boutons Radio Groupe de boutons Radio Bouton de validation ou de remise à Zéro

20 Etape 1: créer un formulaire (zone délimitée en rouge) Onglet Formulaires

21 Etape 2: créer un groupe de Boutons radios: Ajouter, supprimer des boutons Radios Nom du Bouton pour l’utilisateur Nom associé au choix de l’utilisateur (qui sera envoyé dans le mail)

22 Etape 2: 1)Création d’un menu liste 2) Cliquer sur le bouton valeurs de la liste Pour rempir la liste de valeurs 3) Créer des Champs:

23 Etape 3: 1) créer des cases à cocher: 2) Ecrire un texte à coté de la checkbox 3) Changer la valeur associée à cette checkbox

24 Etape 4: Créer des boutons Submit qui permettent d’envoyer les données (par mail ou vers une autre page) Pour envoyer les données par mail: écrire dans la partie code a cet endroit: mailto: votre_adresse puis apuyez sur F5 pour actualiser la page

25 Création d’un nouveau site Cliquez sur Site puis sur Nouveau site. Le fenêtre suivant apparaît : essai Cliquer ensuite sur Suivant Dites ensuite que vous ne souhaitez pas utiliser de technologies de serveurs puis cliquer sur Suivant. Voici alors cette fenêtre : Vient alors cette fenêtre : sunserv.utc.fr public_html si28xxxx ******** Cliquez sur Suivant L’avant-dernière fenêtre concerne l’archivage et l’extraction des fichiers. Choisissez la réponse qui semble la plus appropriée à votre projet (si vous êtes seul(e), vous pouvez très bien choisir non). La dernière fenêtre résume la définition de votre site. Vous pouvez soit modifier des informations en cliquant sur Précédent ou les confirmer en cliquant sur Terminer.

26 Des questions ?