Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.

Présentation au sujet: "Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur."— Transcription de la présentation:

1 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur d’entrer des données sur le site, ces données pourront être récupérées par l’administrateur du site Intérêt - Personnaliser l’accès à la page - Traiter des informations personnelles sur l’utilisateur Exemple

2 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les propriétés Nom Méthode d’envoi du formulaire Fichier de traitement des informations Formulaire Image Reroutage Étiquette Zone de texte Texte BoutonCase à cocher Bouton radio Menu / liste Fichier Champ caché La barre d’outils

3 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Exercice

4 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Exercice Créer un site pour l’ensemble des exercices 1/ Insérer un formulaire Insertion/Formulaire/Formulaire 2/ Insérer un tableau Insertion/Tableau (6 lignes; 2 colonnes) 3/ Créer le formulaire en insérant des objets de formulaire

5 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Calques Les calques permettent la superposition d’éléments, ils présentent l’avantage de pouvoir être manipulés séparément W: hauteur L: largeur Nom du calque Type de balise HTML L: position à partir du bord gauche S: position à partir du bord haut Position (en pixel) Couleur d’arrière plan Débordement Partie visible du calque Visibilité Ordre des calques Propriétés du calque sur Dreamweaver Propriétés des calques

6 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Calques L’inspecteur de calques  F2 ou Calques Calque 2 visible Calque 1 invisible

7 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Calques Exercice 1/ Créer 2 claques et les nommer Insertion/Objet de mise en forme/calque 2/ Afficher l’inspecteur de calques 3/ Jouer avec la visibilité puis l’indice Z, empêcher le chevauchement 4/ Jouer avec les alignements Modifier/Réorganiser/…

8 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Comportements Les comportements vont permettre d’ajouter des fonctionnalités au site en introduisant la notion d’interactivité Supprimer un comportement Ajouter un comportement Événement Action Modifie l’ordre des actions associées à un même événement

9 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Comportements Les é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 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é

10 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Comportements Les actions

11 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Comportements Exercice 1/ Importer la photo « front » Insertion/Image ou glisser déposer 2/ Ajouter un comportement 3/ Définir un événement OnMouseOut et OnMouseOver 4/ Définir une action relative à cet évènement Permuter une image (« back ») Restaurer une image (« front »)

12 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Scénarios Les scénarios permettent de créer des animations simple sans avoir recours à la notion de code La barre d’outils scénario Canal de comportements Contrôles de lecture Canaux d’animation Images clés calques Tête de lecture Image en cours Nombre d’images par seconde rembobiner Défilement avant/arrière image par image

13 Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les Scénarios Exercice 1/ Créer 2 claques Insertion/Objet de mise en forme/calque 2/ Sélectionner le calque supérieur puis Modifier/Scénario/Enregistrer le chemin du calque 3/ Tracer le chemin désiré clic gauche maintenu enfoncé 4/ Sélectionner une image-clé sur laquelle les deux calques ne sont pas superposés 5/ Permuter l’ordre des calques dans l’inspecteur de calques 6/ Jouer la séquence dans le navigateur

14 Les Modèles Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Le modèle permet de créer une page standard réutilisable. La page de modèle se divise en deux parties, les informations fixes permettant d’harmoniser l’ensemble du site, ce sont les éléments communs à toutes les pages, et les informations modifiables. Intérêt - Garder un modèle de présentation  Harmonisation - Créer rapidement des pages de même structure - Mise à jour rapide de l’ensemble des pages à partir de la Création du modèle 1/ Fichier 2/ Sélection de l’icône modèle 3/ Clic droit : nouveau modèle Nommer le modèle modification du modèle

15 Les Modèles Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Le modèle permet de créer une page standard réutilisable. La page de modèle se divise en deux parties, les informations fixes permettant d’harmoniser l’ensemble du site, ce sont les éléments communs à toutes les pages, et les informations modifiables. Enregistrer une page comme modèle 1/ Créer la page comme sur le modèle ci-contre 2/ Définir les zones modifiables Insertion > Objet de Modèles > région modifiable 3/ Enregistrer le modèle : fichier > enregistrer comme modèle

16 Les Modèles Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Le modèle permet de créer une page standard réutilisable. La page de modèle se divise en deux parties, les informations fixes permettant d’harmoniser l’ensemble du site, ce sont les éléments communs à toutes les pages, et les informations modifiables. Appliquer un modèle 1/ Fichier > Nouveau > Modèle 2/ Sélectionner le modèle 3/ Créer Exercice: Créer 3 nouvelles pages HTML Appliquer le modèle Modifier les éléments dans les parties modifiables et enregistrer chaque page Revenez au modèle, définissez les liens avec les deux pages

17 Les Modèles Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Le modèle permet de créer une page standard réutilisable. La page de modèle se divise en deux parties, les informations fixes permettant d’harmoniser l’ensemble du site, ce sont les éléments communs à toutes les pages, et les informations modifiables. Modifier un modèle 1/ Ouvrir un document qui utilise le modèle à modifier 2/ Modifier > Modèle > Ouvrir le modèle joint 3/ Modifier le modèle 4/ Modifier > modèles > mettre à jour la page en cours Vérifier que la case modèle est cochée Démarrer pour lancer la procédure d’actualisation

18 Les feuilles de styles (CSS) Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne C’est l’outil de présentation d’une page Web standard. La présentation est alors applicable au site tout entier. Intérêt - Permet d’avoir une seule feuille de style pour toutes les pages - Gain de temps : la feuille de style externe est chargée une seule fois les 2 types de feuilles de style - Interne : le style n’est appliqué qu’à une page particulière - Externe : le style est appliqué à l’ensemble du site ou sur les pages ayant un lien avec le fichier source Différence avec le Modèle La CSS permet de modifier facilement une mise en page, le modèle intervient dans la phase de conception.

19 Les feuilles de styles (CSS) Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne C’est l’outil de présentation d’une page Web standard. Création d’un style CSS 1/ Création > Style CSS 2/ Nouveau Style (ou modifier le style) Feuille interne ! Nom commençant par un point

20 Les feuilles de styles (CSS) Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne C’est l’outil de présentation d’une page Web standard. Appliquer un style 1/ Sélection du texte dont on désire le changement de style 2/ Sélection du style dans le panneau style CSS ou clic droit Style CSS Les feuilles de style externe 1/ Nouveau style > Nouveau fichier feuille de style 2/ Enregistrer le fichier texte dans le répertoire racine Exportation Pour une utilisation du style dans d’autres pages HTML. Fichier > Exporter > Exporter les styles CSS ou Texte > Style CSS > Exporter feuille de style

21 La mise en ligne Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne C’est l’outil de présentation d’une page Web standard. 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 sunserv.utc.f r