VOIR LE SITE AU PLUS PRES

Description

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

Sujets

• Velazquez
• Fichier informatique

Informations

• Publié par: pefav
• Nombre de lectures: 61
• Langue: Français
• Poids de l'ouvrage: 3 Mo

Extrait

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é p