Dreamweawer2 pas à pas

7. La page peintre.htm : 1 tableau, 2 colonnes. L'image est insérée dans la colonne de gauche. 11 calques se déplacent, dans lesquels sont insérés des images GIF. Le son est généré par le passage de la souris sur l'image. Les images sont mises en lien avec la page index. Il suffit de cliquer sur l'une d'elles pour y accéder. La difficulté de cette page réside dans le nombre de calques à gérer. Son élaboration fait appel aux comportements, au scénario, à la conception de fragments d'oeuvres détourés et enregistrés au format GIF avec The Gimp.
Lecture de la structure de la page :
	L'image ci-contre montre la structure: Tableau. Image insérée en arrière plan du tableau. 11 calques sont dessinés sur la page, que l'on peut superposer.
	Eléments invisibles qui correspondent à chacun des calques. Le 1er élément grisé est le calque sélectionné. Indique le calque sélectionné (ici, celui du visage). Ce fil gris permet de visualiser le trajet du calque.
Lecture des fenêtres sénarios et comportements
*Le Scénario* *Les comportements* Exemple d'*actions* (colonne de droite)	Sur B (ligne des comportements), on constate divers rectangles bleus. Ce sont les différents évènements que j'ai programmés. Le premier est actuellement sélectionné, il est plus foncé. La ligne au dessous indique le nombre d'images alloué à chaque objet. Ex: les calques visage, main et palette évoluent sur 55 images. Le rectangle rose est la tête de lecture. Ici, elle est positionnée sur 1, c'est à dire onFrame1 On peut visualiser les 11 calques qui sont superposés et/ou juxtaposés. Dans un souci de lisibilité, je vous conseille fortement de nommer distinctement chaque calque. En cliquant sur l'onglet Comportements, on peut voir les différents événements attribués aux calques. OnFrame1 indique que la tête de lecture est positionnée sur la première image) *----> Afficher-masquer calques:* Les calques FILLE et picasso sont hide (masqués), VALDES1 et VALDES2 sont show (affichés) *----> Déplacer calque* Sur onFrame1, le calque VISAGE se déplace sans contrainte. Cela veut dire que je lui ai imposé un trajet autre que horizontal et/ou vertical.

copyright©Fabienne Dupré - janvier 2006

Créer un site avec Dreamweaver 2 _Tutoriel réalisé par Fabienne Dupré. Janvier 2006 _Les niveaux de difficulté sont indiqués par . Le nombre d'étoiles augmente avec la difficulté.
SOMMAIRE A.Organiser l'espace de son site __B. définir le site dans Dreamweaver __C. Réaliser le projet "Au plus prés"
1. La page index Créer le tableau Les hypertextes La carte graphique
2. La page confesseur.htm Les images retournée (survolée) Le son
3. La page lago.htm
4. La page menines.htm Créer un scénario Ajouter *un comportement*
5. La page miroir.htm
6. La page naine.htm
7. La page peintre.htm
Avec ce logiciel, nous allons créer plusieurs pages web (htm ou html) qui seront reliées entre elles par des hypertextes ou hyperliens. Cette relation procédant par les "clics" ou passages de la souris sur des zones rendues actives, nous parlerons alors d'interactivité programmée de la page. A. Organiser l'espace de son site: La création d’une ou plusieurs pages htm suppose que le contenu soit déterminé au préalable : le texte, les images, les sons, qui s'insèrent dans des pages (ici, Index ; page_1 ; page_2 ; page_3). Cet ensemble d'objets est rangé dans un dossier portant le nom mon_site. Les objets images et sons sont impérativement rangés à l'intérieur de celui-ci et dans un dossier dédié. Les pages htm sont enregistrées dans le dossier racine mon_site. Ce qui donne ceci: L'arborescence: il s'agit d'organiser ses idées afin de déterminer la navigation au sein du site la mieux adaptée au projet. (Lire l'article de christophe Merchadou) Nous avons opté pour une arborescence simple, dite en étoile : Description du projet : Création d' un site comportant 7 pages reliées entre elles par des hyperliens et dont le but sera d'exprimer l'idée suivante: "Au plus prés des ménines de Diego Vélazquez". Index qui est toujours le nom de fichier de la page d'accueil. Une image et un texte seront insérés dans un tableau à 2 lignes/ 2 colonnes. L'image comprendra des zones hyperactives, créées avec une carte graphique. confesseur.htm : Un tableau 2 colonnes, avec une image retournée (dite aussi survolée) dans chaque colonne. Le passage de la souris déclanche un son et l'apparition d'une seconde image. Les images sont mises en lien avec la page index. Il suffit de cliquer sur l'une d'elle pour y accéder. lago.htm : un tableau 1 colonne/ 1 ligne. Une image gif (sans fond) sera en lien avec la page index en cliquant dessus. Un son est généré par le passage de la souris sur l'image. menines.htm : Un tableau 1 cellule (Une ligne et une colonne) dans lequel sera insérée une image GIF (Sans fond). Un son est généré par le passage de la souris sur l'image. Deux calques se déplacent dans lesquels sont insérés deux GIF. Les images sont mises en lien avec la page index. Il suffit de cliquer sur l'une d'elle pour y accéder. miroir.htm : 1 tableau 4 colonnes dans lesquelles sont insérés 4 GIF. Le son est généré par le passage de la souris sur l'image. Les images sont mises en lien avec la page index. Il suffit de cliquer sur l'une d'elle pour y accéder. naine.htm : 1 tableau 1 ligne/ 1 colonne dans lequel sont insérés deux calques qui se déplacent. Chaque calque contient une image GIF. Le son est généré par le passage de la souris sur l'image. Les images sont mises en lien avec la page index. Il suffit de cliquer sur l'une d'elle pour y accéder. peintre.htm : 1 tableau 2 colonnes. L'image est insérée dans la colonne de gauche. 7 calques se déplacent, dans lesquels sont insérés des images GIF. Le son est généré par le passage de la souris sur l'image. Les images sont mises en lien avec la page index. Il suffit de cliquer sur l'une d'elle pour y accéder. B. Définir le site dans Dreamweaver. Cela va permettre de faire apparaître deux tableaux dans la fenêtre de Dreamweaver2: Comment définir le site? Cliquer sur la fenêtre Définir les sites... Une nouvelle fenêtre s'ouvre : Cliquer sur OK et la fenêtre ci-dessous apparaît. Cliquer sur Terminer. .... la fenêtre de Dreamweaver présente alors les deux tableaux évoqués précédemment. Pour l'instant, nous ne nous préoccuperons que du site local.
*C. Réaliser le projet "Au plus prés"* Ouvrir Dreamweaver2 et créer un nouveau fichier "sans titre" qui va apparaître selon : "document sans titre (mon_site/untitled).	Barre des objets à insérer. Barre des propriétés. Lanceur. Facultatif (cf. le point suivant.) Détermine: - la taille de la fenêtre dans le navigateur. - Le poids de votre page et le temps df'affichage de celle-ci. - Le lanceur donne accès à diverses fenêtres.

4. La page menines.htm : Un tableau à 1 cellule (Une ligne et une colonne) dans lequel sera insérée une image GIF (Sans fond). Un son est généré par le passage de la souris sur l'image. (Cf. page 4 pour l'insertion du son)
Dessiner deux calques avec l'outil , puis insérer une image dans chacun des calques : Pour dessiner, il suffit de cliquer-glisser sur la page et de lâcher lorsque la dimension est convenable. ___________
Créer un scénario: Deux calques se déplacent dans lesquels sont insérés deux GIF ( figure-forme sur fond transparent). Les images sont mises en lien avec la page index. Il suffira de cliquer sur l'une d'elles pour revenir à la page d'accueil (index.htm). Pour déplacer le calque, il faut ouvrir la fenêtre des scénarios (associée à celle des comportements) afin de programmer les actions ajouter un objet, ajouter un comportement, ajouter des images clés...qui auront pour effet d'agir sur ce calque:
	Cliquer sur l'onglet Scenarios. Timeline1 indique la ligne de l'objet 1. On peut placer plusieurs objets sur plusieurs lignes qui se superposeront.8888 B est la ligne des comportements que vous ajouterez (apparition/disparition du calque, jouer le son...). Le rectangle rose positionné sur 1 est la tête de lecture. Cocher ces deux cases permet de lancer automatiquement l'animation et de la lire en boucle. (Conseillé). Après avoir sélectionné le calque à animer (et non l'image) : Cliquer droit sur B et sur Ajouter un objet, l'objet (ici, nommé DROITE ) apparaît sur la TimeLine1 :
Toujours au niveau de 1 Cliquer droit sur B et sur Ajouter *un comportement*
		_8Le menu apparaît à nouveau : choisir Afficher-masquer calques

		Pour l'instant, choisir le calque "DROITE" à afficher(show). Valider avec OK Recommencer pour Déplacer calque, puis cliquer sur le niveau onClick dans l'onglet Comportements. A vous de choisir l'action souhaitée, sachant que onMouseDown lance l'action dès que la page s'ouvre et que la souris bouge. ---> Recommencer en cliquant sur Contrôle du son. (Cf. page 4 pour l'insertion du son)
Déplacer le calque
			Dans comportements, et après avoir sélectionner le calque, cliquer sur + et sur Déplacer le calque. Une fenêtre s'ouvre : choisissez le calque que vous voulez déplacer (ici, celui de la fillette droite nommé "DROITE"). Cliquer également sur Obtenir la position courante. Valider avec OK
			Reportez vous sur l'onglet Scénarios Pour déplacer le calque, il faut insérer des images-clés qui vont marquer les différentes stations du trajet du calque. Pour cela, par exemple, cliquer-droit sur l'image-clé 5 et Ajouter une image-clé
			La nouvelle image-clé apparaît selon un point. Placez le calque en maintenant clic-droit sur celui-ci et positionnez-le en le déplaçant dans votre page. On remarquera alors une ligne grise qui dessine le chemin du calque. Chaque "station" nouvelle doit être marquée d'une nouvelle image-clé. Procédez de nouveau ainsi, jusqu'à ce que le trajet vous convienne.

3. La page lago.htm : un tableau 1 colonne/ 1 ligne. Une image gif (sans fond) sera en lien avec la page index en cliquant dessus. Un son est généré par le passage de la souris sur l'image.
	Créer le tableau Insérer l'image (Le chien a été isolé avec Gimp sur un fond transparent et enregistrée en format GIF) .Insérer le son en cliquant sur pour faire apparaître le menu ci-dessous:
Le tableau détaille les actions suivantes: *- onMouseOut* arrête le son lorsque la souris sort de l'image - onMouseOver déclanche le son lorsque la souris passe sur l'image. Créer le lien vers la page souhaitée (ici, *index.htm*)