Séance 2 Marie Lavogez Justine Leleu Dreamweaver MX

Sommaire Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Formulaires  Permet à l’utilisateur d’entrer des renseignements le concernant. Ex : âge, sexe, activité…  Permet de cibler les catégories d’utilisateurs Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Formulaires Création d’un formulaire Insertion > formulaire ou Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Formulaires Inspecteur des propriétés Nom Méthode d’envoi du formulaire Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Formulaires Objets de formulaire il faut insérer les objets dans le formulaire sinon ils n’apparaîtront pas en tant qu’objet du formulaire ! Formulaire Image Reroutage Étiquette Zone de texte Texte Bouton Case à cocher Bouton radio Menu / liste Fichier Champ caché Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Calques  Permet la superposition d’éléments et l’action sur chacun de ses éléments séparément Seuls les navigateurs supérieurs à Internet Explorer 4 sont capable d’interpréter les calques  Insertion d’un calque insertion > calque  Sélection d’un calque cliquez sur du calque à sélectionner  Afficher grille de positionnement affichage > grille > afficher la grille  Afficher la règle de positionnement affichage > règle > afficher La grille et la règle permettent d’aligner les calques les uns par rapport aux autres ! Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Calques Inspecteur de propriétés 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 Débordement Conditions de déroutage Image Visibilité Ordre des calques Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site Propriétés du calque au chargement Propriétés du calque sur Dreamweaver

Calques Inspecteur de calques fenêtre > autres > calque ou F2 Calque visible au chargement (par défaut) Calque visible au chargement (œil ouvert) Calque invisible au chargement (œil fermé) Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Comportements  Permet la génération de code javascript  Permet d’ajouter des fonctionnalités au site  Permet d’ajouter de l’interactivité au site Panneau comportement Fenêtre > comportements ou Maj+F3 Supprimer un comportement Ajouter un comportement Événement Action Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Comportements  Pour créer un comportement, il faut : un objet, un événement et une action Seuls les navigateurs supérieurs à Internet Explorer 4 sont capable d’interpréter les comportements > afficher les éléments pour > IE4 ! Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

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 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é Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Modèles  Permet de créer des pages types  Peuvent être réutilisés pour créer rapidement des pages ayant la même structure  La modification de l’un des modèles entraînera, après confirmation, le changement de toutes les pages qui l’utilisent Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Modèles Créer un modèle 1- cliquer sur onglet modèle 2- cliquer sur la flèche d’accès au menu > new template 3- nommer le modèle 4- double-cliquer pour ouvrir le modèle Pour personnaliser votre modèle Modifier > propriétés de la page Pour rendre une zone modifiable Insérer une image ou un texte, le sélectionner, Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Modèles Enregistrer une page en tant que modèle Ouvrir la page Fichier >enregistrer comme modèle Choix du site Nom du modèle Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Modèles Utiliser des modèles Fichier >nouveau Fichier > enregistrer Vous pouvez maintenant modifier la page Pour supprimer l’association entre le fichier et le modèle: Modifier > modèles > détacher du modèle Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Modèles Utiliser des modèles Pour appliquer un modèle à une page existante:  modifier > modèles > appliquer le modèle à la page  puis dans la boîte de dialogue sélectionner le modèle, double-cliquer dessus pour l’appliquer à la page  faire glisser le modèle depuis le panneau modèle jusqu’à la fenêtre document  sélectionner le modèle dans le panneau modèle, choisir « appliquer » dans le menu panneau (en haut à droite) Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Modèles Modifier un modèle Pour modifier un modèle et actualiser la page en cours:  ouvrir un document qui utilise le modèle à modifier  modifier > modèles > ouvrir le modèle joint  modifier le modèle  modifier > modèles > mettre à jour la page en cours Pour modifier un modèle et tous les fichiers qui l’utilisent:  ouvrir un modèle existant, faire les modifications  modifier > modèles > mettre à jour les pages  regarder dans > site entier ou fichiers utilisant (site en cours)  dans la zone mettre à jour, vérifier que la case modèle est cochée  démarrer pour lancer la procédure d’actualisation Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site

Feuilles de styles CSS  « En cascade » Ce terme désigne la hiérarchie des priorités existantes entre les règles locales et les règles générales : Priorité+ Priorité - Règles locales Règles générales Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site La feuille de style en cascade permet de définir une présentation globale applicable au site tout entier Ex : style d’en-tête  centré, gras et bleu

Feuilles de styles CSS Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site 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 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

Feuilles de styles CSS Menu Fenêtre  styles CSS ou… Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site  Pour créer un nouveau style CSS Clic droit pour option de styles CSS ou… Importer un style Supprimer le style … Nouveau style Modifier le style

Feuilles de styles CSS Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site  Pour créer un nouveau style CSS Feuille interne Donner un nom commençant par un point et sans ponctuation Feuille externe

Feuilles de styles CSS Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site  Pour créer un nouveau style CSS Incompatibles avec de nombreux navigateurs Jeu de polices Catégories de personnalisation

Feuilles de styles CSS 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. Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site  Pour appliquer le style  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

Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site 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 Nom du scénario

Scénario Un scénario permet de créer des animations dans un temps prédéterminé à l’aide de calques. Créez un calque Insérez une image et/ou un texte Dans la barre de temps, cliquez à l’endroit où doit débuter l’animation Sélectionnez le calque et placez-le au point de départ de l’animation Dans la fenêtre scénario, cliquez à l’endroit où doit finir le scénario. Sélectionnez le calque et placez- le à sa position finale  Le tracé est visible alors à l’écran. Pour incurver le parcours suivi par le calque: Cliquer sur la ligne de temps entre le début et la fin Puis clic droit/insérer une image clé Sélectionner le calque et le positionner de façon à incurver le parcours.  Le scénario est créé. F12 pour apprécier le résultat ! Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site  Création d’un scénario

Gestion du site Accès: Site/nouveau site ou Site/modifier site  Création de la carte Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site Chemin d’accès à la page d’accueil Propriétés de la carte Noms des icônes de la carte

Gestion du site Pour afficher la carte: cliquez sur développer /réduire puis sur carte Pour afficher la carte: cliquez sur développer /réduire puis sur carte Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site  Fenêtre de la carte

Gestion du site Formulaires Calques Comportements Modèles Feuilles de styles CSS Scénario Gestion du site Ces paramétrages permettent l’accès à vos pages sur un serveur Web distant.  Pour terminer