Word Pro - utiliser dreamweaver.lwp

Créer des pages
inter
intra
} net avec Dreamweaver
Fonctions de base
Généralités : organiser ses fichiers.
Les fichiers seront nombreux : 1 fichier html (contenant la
page), 1 pour chaque image, son ou autre média inséré.
Mieux vaut les organiser de la façon suivante :
Pages html
Les pages internet sont créées par des éditeurs
spécifiques (ex. Dreamweaver) et portent l’extension html (ou
htm). Elles pourront être lues par les navigateurs.
Images, (sons et autres...)
Les images devront être au format jpg (pour les
photos) ou gif (pour les schémas). La taille de l’image doit
être celle qui sera affichée (en pixels) et la taille du fichier
doit être réduite (quelques Koctets) de façon à permettre un
chargement rapide de la page). Utiliser un logiciel de
traitement d’image (ex. PaintShopPro) pour effectuer ces deux réductions.
Conseil : toujours garder l’image de départ (de meilleure qualité) par sécurité dans un autre répertoire.
Les autres médias (sons, vidéos, ...) devront être de taille raisonnable, et dans un format que le navigateur
pourra lire (seul, ou au moyen d’un “plug-in” téléchargé par l’utilisateur).
Attention : proscrire les accents, les majuscules et les espaces dans les noms de fichiers.
Le texte
On peut taper le
texte directement
comme dans un
traitement
de
texte.
La
boite
de
réglages ci-contre
permet de mettre
celui-ci en forme,
et de rendre ce
texte
cliquable
(lien
vers
une
autre page).
Conseil : les pages internet doivent, pour rester lisibles, comporter peu de texte, de taille suffisante, en
évitant les “pavés” fatigants à lire.
Stages TICE SVT Rouen
Créer des pages internet 1
© Frédéric Hamelin, 2001
Les images
Les
images
peuvent
être
ajoutées
en
cliquant sur cette
icône de la boite
d’outils.
La boite ci-contre
permet d’effectuer
les
réglages
nécessaires.
Les liens
Dans les deux paragraphes précédents, nous avons vu qu’un texte ou une image pouvaient être définis
comme des liens.
S’il s’agit d’une adresse
internet externe à votre site,
entrez-la dans la case “Lien”
(http://www.............)
S’il s’agit d’une autre page
de votre site, cliquez sur
dans la boite du texte ou de
l’image à transformer en lien, puis
choisissez le fichier dans la boite
ci-contre (il faut que la page ait
été préalablement créée et
enregistrée).
La case “cible” des boites texte ou image permet de définir la fenêtre où la page doit s’ouvrir :
En l’absence de choix, cette page va s’afficher dans la fenêtre actuelle à la place de la page vu
précédemment. Choisir “_blank” ouvre une nouvelle fenêtre du navigateur et affiche la page dans celle-ci.
Conseil : toutes les pages d’un site doivent comporter des liens facilitant la navigation : retour au
sommaire général ou à la première page d’un chapitre, retour à la page précédente.
Apercevoir sa page
Il est important de régulièrement vérifier l’aspect que la page en cours de création va présenter dans les
navigateurs (“Internet Explorer” et “Netscape Navigator” affichent quelquefois les choses très différemment).
Après l’avoir enregistrée, choisissez “Fichier”, “Aperçu dans le navigateur”, puis le navigateur souhaité.
Stages TICE SVT Rouen
Créer des pages internet 2
© Frédéric Hamelin, 2001
Fonctions avancées
Les images en coordonnées
Une image en coordonnées permet de définir des zones actives dans l’image : ces zones seront des liens
pointant vers des pages différentes.
Après avoir inséré une
image dans la page,
cliquer dans la boite
sur
le
bouton
La
boite
ci-contre
permet
de
définir
autant de zones que
vous le souhaitez dans
l’image.
Dans l’exemple ci-contre, un survol de la
zone contenant les maisons et l’église
affiche le message “construits par
l’homme”.
En cliquant sur cette zone, la page
“constructions.html” s’ouvre.
Remarque : si on laisse le champ “cible”
vide (comme ici), c’est dans la fenêtre
courante du navigateur que la page
demandée s’affiche.
Stages TICE SVT Rouen
Créer des pages internet 3
© Frédéric Hamelin, 2001
Les images alternatives
Le but est de changer d’image lors du survol d’un lien par la souris.
Pour insérer une image alternative,
cliquer dans la boite d’outils sur le
bouton
Les calques
Les calques permettent de superposer autant de couches que vous le souhaitez, notamment sur une image,
mais aussi du texte.
Pour créer un calque,
cliquer dans la boite
d’outils sur le bouton
On
peut
ensuite
modifier
les
propriétés
de
ce
calque dans la boite
ci-contre.
En cliquant dans le calque, on peut y insérer des images et du texte. Le calque se comporte comme une
“page dans la page”.
Stages TICE SVT Rouen
Créer des pages internet 4
© Frédéric Hamelin, 2001
Comportements complexes des liens
Les liens, qui ouvrent une nouvelle page lorsqu’on clique dessus, peuvent aussi posséder des
comportements beaucoup plus intéressants : afficher ou masquer un calque, ouvrir une fenêtre de taille et de
propriétés fixées, déplacer un calque dans la page, jouer un son, ...
Pour attribuer un comportement à un lien, cliquer dans la boite d’outils sur
l'icône
La fenêtre ci-contre apparaît. Pour choisir un comportement pour ce lien,
cliquer sur
1. Quel comportement ?
Afficher message d’état
Afficher-masquer calques
Atteindre l’URL
Contrôle du son
Déplacer calque
Fenêtre de message
Intervertir image
Ouvrir fenêtre navigateur
Scénario
Affiche un message dans la barre d’état (en bas) du navigateur.
Permet de montrer ou cacher des calques du document
Ouvre une nouvelle page dans la fenêtre choisie
Permet de jouer des sons
Autorise le déplacement des calques par l’utilisateur
Affiche une fenêtre contenant un message
Change une image en une ou plusieurs autres
La fenêtre ouverte peut avoir la taille et les propriétés choisies
Joue un scénario préalablement défini
2. Quelle action doit déclencher ce comportement ?
Une fois que le comportement a été choisi, il apparaît dans la liste comme ceci :
action
onClick
onDblClick
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseOut
onMouseOver
onMouseUp
Stages TICE SVT Rouen
Le comportement sera déclenché lors ...
d’un clic de la souris sur le lien
d’un double clic de la souris sur le lien
d’une action sur une touche du clavier
d’une pression sur une touche du clavier
d’une relâchement d’une touche du clavier
d’une pression sur le bouton gauche de la
souris
de la sortie du passage de la souris du lien
de l’entrée de la souris sur le lien
du relâchement de bouton gauche de la souris
Créer des pages internet 5
© Frédéric Hamelin, 2001