Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004

Rappels présentation partie 1 Création d’un site local Site > nouveau site… Création d’une page Nouveau document > page de base

Rappels présentation partie 1 Les 3 types de liens Ancre nomméeLien de messagerie Lien hypertexte externe ou interne au site L’utilisation de la technologie Flash : boutons

Rappels présentation partie 1 Insertions…  tableaux

Rappels présentation partie 1 D’autres insertions…  images et calques Calque dans dmwBarre des propriétés des calques

Programme présentation 2 Formulaires Nouvelles propriétés des calques Comportements Scénarios Feuilles de style CSS Modèles Mise en ligne du site

Formulaires Les formulaires sont les feuilles qui permettent à l’utilisateur de saisir des données Exemple d’utilisation… Domaines d’utilisation Saisie d’informations personnelles (inscription sur un site). Interfaçage avec une base de donnée (mise à jour).  personnalisation, ciblage de l’utilisateur, …

Formulaires Mode opératoire 1. Insertion > formulaire ou

Formulaires 2. Contrôle des propriétés Nom Méthode d’envoi du formulaire Fichier de traitement des informations

Formulaires 3. Insertion des objets de formulaire Formulaire Image Reroutage Étiquette Zone de texte Texte Bouton Case à cocher Bouton radio Menu / liste Fichier Champ caché

Formulaires Application

Calques Quelques nouvelles propriétés pratiques : visibilité, ordre et positionnement, conversion. W: hauteur L: largeur dimensions 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

Calques 1. Création de 2 calques : couleur et taille différentes Z = 1 Z = 2 2. Utilisation de l’inspecteur : fenêtre > autres > calque ou F2 Calque 2 visible Calque 1 invisible Réglage par défaut : calque visible Index Z indicateur de position : à taper directement au clavier ou faire glisser les calques dans la fenêtre

Calques 3. Alignements Sélection, Menu modifier > aligner > haut, bas, gauche, droite

Calques 4. Alignements : autres outils  La grille de positionnement : affichage > grille > afficher la grille  La règle de positionnement : affichage > règle > afficher 5. Conversion des calques en tableaux Les navigateurs Web de version inférieure à la version 3 n'affichent pas les calques et ceux de version 4 ne les affichent pas toujours de la même façon. Pour que la page Web puisse être visualisée par tous les utilisateurs, il faut convertir les calques en tableaux : -Modifier > Convertir > Calques en tableaux ou -Fichier > Convertir > Compatible avec les navigateurs 3.0

Comportements Objectifs -Ajouter des fonctionnalités au site. -Introduire de l’interactivité (menu ou aide dynamique, …) Créer un comportement : 3 éléments de base -un objet (calque, image, bouton flash…) -un événement (clic, survol…) -une action (afficher une image, cacher le menu…)

Supprimer un comportement Ajouter un comportement Événement Action Comportements Création d’un comportement - Sélection d’un objet, Fenêtre > comportements ou Maj+F3 Configurer le navigateur Seuls les navigateurs postérieurs à Internet Explorer 4 peuvent interpréter les comportements Afficher les éléments pour > IE4 Pour associer un comportement à l’ensemble de la page, cliquer sur dans le sélecteur de balises, situé dans le coin inférieur gauche de la fenêtre de document.

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é Comportements : action et évènements Liste des évènements Liste des actions

Comportements Application -Faire disparaître le rectangle bleu lorsque l’on survole le calque rose, et le faire réapparaître en double-cliquant sur ce même calque rose. -Autre exemple sous forme d’un lien à partir du bouton du formulaire -Limite : pas de chronologie  problèmes de priorité de déroulement des actions quand mêmes évènements

Scénario C’est quoi? Les scénarios permettent de créer des animations simples sans connaître JAVA script. Objets en jeu Calques (visibilité, taille, ordre de superposition), sons, comportements. Principe Dynamique image par image avec interpolation Comparable à celui déjà vu pour Flash

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 Scénario Barre d’outils associée Fenêtre > Autres > Scénarios

Scénario Application 1. Sélectionner le calque puis venir le déposer simplement dans le tableau des scénarios par un glisser – déposer (chaque ligne = 1 calque) 2. Clic droit > Enregistrer le chemin du calque 3. Tracer un parcours pour le calque sélectionné, lâcher la souris au point final de l’animation. Dreamweaver ajoute une barre d'animation au scénario, avec le nombre optimal d'images-clés.

Feuilles de style CSS CSS = Cascading Style Sheet = Feuille de styles en Cascade C’est quoi ? La feuille de style en cascade permet de définir un style de présentation globale applicable à : -un site (fichier externe) : le style est stocké en dehors de la page HTML et est appliqué grâce à un lien entre la source et les pages concernées. -une page en particulier (fichier interne) Intérêts Outil de présentation standard qui sépare contenu et mise en forme Structuration des données : modification et chargements aisés Meilleure accessibilité des sites grâce à la disparition des tableaux au profit des CSS

Feuilles de style CSS Mode opératoire 1.Création d’un nouveau style CSS Fenêtre > style css Importer un style Supprimer le style … Nouveau style Modifier le style Feuille interne Feuille externe nom commençant par un point…

Feuilles de style CSS 2. Définition du style

Feuilles de style CSS 3. Application du style à un calque et à un texte -Sélectionner le texte -Création > Appliquer style.pandas 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

Modèles C’est quoi ? Un modèle est un exemple de présentation réutilisable pour lequel on définit des zones modifiables, et des zones inchangées qui servent de base commune. Intérêts -Cohérence et harmonisation d’un site -Structuration des données : modification aisée d’un site entier à partir de la mise à jour du modèle de base -Domaine d’application différent par rapport à la feuille de style CSS : la CSS permet de modifier facilement une mise en page, le modèle intervient dans la phase de conception.

Modèles Mode opératoire 5. Insérer une région modifiable grâce à la barre d’insertion : 1- cliquer sur onglet modèle 2- cliquer sur la flèche d’accès au menu > nouveau modèle 3- nommer le modèle 4- double-cliquer pour ouvrir le modèle

Modèles Application : exemple Sur le principe du site de  Partie gauche du tableau stable  Partie droite modulable

Modèles 1.Définition et conception du modèle (comme expliqué dans mode opératoire ou Fichier > Enregistrer comme modèle) 2.Appeler le modèle après fermeture : Fichier > Ouvrir > Modèle > Créer

Modèles 3. Donner un contenu aux zones modifiables et enregistrer chaque page : Fichier > Enregistrer sous (.html) 4. Définition du lien relatif entre les pages à partir de la page de référence : celle du modèle (.dwt)

Modèles Mise à jour des sites 1. Pour actualiser les pages en actions : - Modifier > modèles > mettre à jour les pages > site entier ou fichiers utilisant (site en cours) dans la zone mettre à jour, - vérifier que la case modèle est cochée; - cliquer sur démarrer pour lancer la procédure d’actualisation 2. Pour modifier le modèle et tous les fichiers qui l’utilisent: - Modifier > modèles > ouvrir le modèle joint - modifier le modèle - Modifier > modèles > mettre à jour la page en cours

Mise en ligne du site 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 et remplir les champs comme suit : sunserv.utc.fr