Accueil Contacts Expositions Actu du site Galerie TICC Architecture Formation Documentation Liens
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?

  1. Cliquer sur la fenêtre Définir les sites...



  2. Une nouvelle fenêtre s'ouvre :




  3. 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.

Enregistrer cette page dans le dossier racine mon_site, sous le nom de index.htm

Nous allons successivement créer les 6 autres pages de notre site en enregistrant chacune sous le nom confesseur, lago, menines, miroir, naine, peintre.

Dans la fenêtre du dossier local nous pourrons ainsi repérer : le dossier images, le dossier sons, et les 4 pages htm, dont la page index.htm

Il est absolument nécessaire que tous vos fichiers soient regroupés dans le dossier racine.

Donner un titre à la page index

C'est le titre qui apparaîtra dans la barre du navigateur Explorer. A ne pas confondre avec le nom du fichier!

Comment?
Cliquer sur l'onglet modifier de la barre des tâches de Dreamwearver, puis sur l'onglet propriétés la page et procéder aux diverses modifications. Valider avec OK .

Ici, je fais le choix du texte noir, de l'arrière plan blanc, et je différencie la couleur des liens.

Tous ces paramètres peuvent être modifiés à n'importe quel moment et pour n'importe quelle page.


1.La page index, nommée Accueil:
Une image et un texte seront insérés dans un tableau à 2 lignes/ 2 colonnes. L'image comprendra des zones interactives, créées avec une carte graphique.

Créer le tableau :

 

Validez avec OK.

Dans la barre des objets, cliquer sur tableau.

Déterminer le nombre de lignes et de colonnes.

Si vous choisissez pourcentage, cela aura pour effet d'occuper l'écran de l'ordinateur au pourcentage déterminé (ici 75), et ce quel que soit la dimension de votre écran.

Lorsque l'on utilise des calques, comme ce sera le cas dans ce projet, il faut choisir pixel et déterminer une dimension fixe du tableau (ex: 780 dans ce projet)

Si vous souhaitez que la structure de votre tableau soit invisible, ne mettez pas de bordure.

 

NB. pour centrer le tableau, sélectionner celui-ci et utiliser le menu déroulant en haut à droite des propriétés comme ci-dessous:

Les hypertextes qui mènent hors du site : Procéder comme ci-dessous :


Faites F12 pour vérifier dans le navigateur que ce lien fonctionne.

Sélectionner le mot que vous voulez mettre en lien.

Cliquer dans la fenêtre des propriétés liens et inscrivez l'adresse du site que vous voulez mettre en lien. Ici, j'ouvre sur une page du Prado.

La cible : si vous choisissez _blank, votre lien s'ouvrira dans une autre fenêtre.

 

 

La carte graphique de l'image :

Après avoir inséré l'image, nous allons dessiner des zones actives qui renverrons à des hyperliens (ici, ce seront les pages)

Cliquer sur l'image et dans la barre des propriétés, vérifier qu'elle apparaît. Cliquer sur l'onglet carte. Une fenêtre s'ouvre.

Choisir un outil de dessin pour créer les différentes zones.

Dessiner sur les parties de l'image que vous voulez rendre actives au passage de la souris.
Double-cliquer sur une zone, puis choisir la page (ici, peintre.htm) dans le dossier lien.

Donner un nom à la carte (ici, zones).

Valider en cliquant sur OK

Sur mon image de la page index.htm, on peut compter 8 zones. Chacune est en lien avec une page interne du site.


2. La page confesseur.htm : Un tableau 2 colonnes, avec une image retournée (dite aussi survolée) dans chaque colonne.
Le passage de la souris déclenche 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'elles pour y accéder.

Créez le tableau comme indiqué précédemment.

Les images retournée (survolée): Pour créer une image retournée (survolée), il est impératif que les deux images soient strictement de la même taille. Le processus d'inversion ne se ferait pas.

Dans la barre des objets, sélectionner image retournée . Une fenêtre s'ouvre.

Image originale est celle qui apparaît lorsque la page s'ouvre.
La sélectionner dans parcourir.

Personnellement, j'ai mis cette image en lien avec index.htm. Cela permettra le retour vers l'accueil.
Cocher la case Précharger les images qui apparaîtrons plus rapidement.

Image renouvelée est celle qui apparaîtra au passage de la souris.

Rappelons que ces 2 images sont de taille identique!

Valider avec OK. Pour la seconde colonne, procéder de même.

Le son: Le passage de la souris déclenche un son.

0uvrir la fenêtre des comportements (jumelée avec celle des scénarios).

On remarque la présence du comportement de l'image survolée, onMouseOver qui a pour effet d'intervertir l'image. OnMouseOut la rétablit.

Pour ajouter un comportement à l'image, cliquer sur +. Le menu déroulant permet de choisir contrôle du son.

----------------->

Cocher la case Jouer le son puis faites parcourir pour sélectionner le fichier .wav ou .mp3 (préférable car plus léger) de votre choix. (Soyez prudents quant au poids!)

Valider avec OK

 

Dans la fenêtre des comportements, la fonction onMouseDown s'inscrit par défaut. Nous allons la modifier en paramétrant ainsi :
- passer sur l'image (onMouseOver) joue le son,
- sortir de l'image (onMouseOut) arrête le son.

Pour cela, cliquer sur : le menu déroulant apparaît

Choisir maintenant onMouseOver puisque nous avions coché précédemment la case Jouer le son

Procéder de la même manière pour arrêter le son en revenant sur + . Mais cette fois, il faudra cocher la case Arrêter le son.

Faites F12 pour vérifier que tout fonctionne.


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)


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.


 
5. La page 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.
Retournez vers le chapitre concernant l'insertion du son arrêt/marche.  


Sélectionner l'image.

Cliquer sur l'onglet comportement, puis sur + .
Choisir contrôle du son pour l'action.
Après avoir fait parcourir et choisi votre fichier, une ligne s'affiche dans Evènements qui permet de vérifier/modifier ceux-ci.

Procéder de même pour les autres images.

6. La page 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'elles pour y accéder.



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