VOIR LE SITE AU PLUS PRES

Publié par

VOIR LE SITE AU PLUS PRES : Créer un site avec Dreamweaver 2 ___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.

  • dossier portant le nom

  • nom de fichier

  • couleur des liens

  • lien avec la page index

  • barre du navigateur explorer

  • taille de fenêtre

  • nom de index


Publié le : lundi 18 juin 2012
Lecture(s) : 54
Source : ecoles.ac-rouen.fr
Nombre de pages : 16
Voir plus Voir moins

Créer un site avec Dreamweaver 2 ___Les niveaux de difficulté sont indiqués par . Le nombre d'étoiles augmente avec la difficulté.
SOMMAIRE
VOIR LE SITE "AU PLUS PRES" : http://artsplastiques.ac-bordeaux.fr/docs_logiciels_tic/dream2/Aide_2006/mon_site/index.htm
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
Le son 2. La page confesseur.htm Les images retournée (survolée)

3. La page lago.htm
Créer un scénario Ajouter un comportement 4. La page menines.htm
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 : Définir le projet et le site
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
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...
lllllll2. 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.
propriétés. Barre des
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 celle-ci.d'affichage de
donne accès à - Le lanceur
fenêtres.diverses

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.Page Index
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 :
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
Validez avec OK. 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:
Page_Index2
Les hypertextes qui mènent hors du site : Procéder comme ci-dessous :
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.
Faites F12 pour vérifier dans le navigateur que ce lien fonctionne.

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.La page confesseur.htm
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 onMouseOut 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)

Soyez le premier à déposer un commentaire !

17/1000 caractères maximum.