Premiers pas avec Dreamweaver

Dreamweaver est un diteur visuel professionnel pour la cration et la gestion de pages web.
Dreamweaver permet de crer aisment des pages compatibles avec toute une srie de plates-formes
et de navigateurs.
Dreamweaver permet galement d'utiliser certaines fonctions du format HTML dynamique, telles que
les calques et les comportements anims, sans devoir crire la moindre ligne de code.

1 Cration d'une page ou d'un nouveau site ?

1.1

Cration d'une page html

Par dfaut, l'ouverture de Dreamweaver, l'cran prsente une page blanche et vide, sans titre.

Insertion dimages, de
tableaux, de barres
horizontales, etc.
Pour modifier les
proprits dun
objet slectionn
Suivant les options coches
du menu fentre, un certain
nombre de palettes (flottantes,
elles peuvent tre dplaces
sur lcran) doutils sont
prsentes lcran.

Le lanceur (ou le mini-lanceur prsent dans la barre dtat de la fentre)

donne accs 6 fentres de Dreamweaver utiles pour maintenir le site, le
publier retrouver des lments souvent utiliss dans les pages
(bibliothque), grer les styles, les comportements javascript, les
animations dimages ou voir le code Html gnr.

(mini-lanceur prsent dans la barre d'tat)

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 1/27

La saisie de texte sopre comme dans un diteur de texte :

Le bouton Html de la fentre du lanceur permet d'afficher le code html de la page. On prend alors
conscience que la page n'est pas vide et contient dj la structure d'une page html :

Balise de dbut de page Html

Len-tte contient des
informations non affiches dans
la page qui sont utilises par les
navigateur (titre de la page) ou
les moteurs (mots-cls)

Le corps de la page contient le

texte informatif, les images
affichs dans la page
Les accents ont
t traduits

Balise de fin de page Html

Fermer alors la fentre de lditeur Html, puis fermer le premier document Html sans lenregistrer.
On pourra consulter en annexe quelques lments de code Html.
De la page au site
Dreamweaver permet donc de crer ponctuellement une page html. Mais il permet galement de crer un
site complet dans un dossier pralablement cr. Dreamweaver offrira alors un ensemble d'outils de gestion
de site qui faciliteront sa mise jour notamment l'occasion de dplacement de fichiers, lorsque l'on
renomme les pages ou les images, le code html des pages prendra en compte ces modifications.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 2/27

1.2

Dfinition d'un site local

Pour travailler avec Dreamweaver, si lon souhaite crer une grappe de pages, il est souhaitable de
commencer par crer un site local.
Un site est un emplacement o l'on stocke l'ensemble des documents et des fichiers appartenant un site
web. Un site local requiert un nom et un rpertoire racine local indiquant Dreamweaver l'emplacement o
l'on conservera les fichiers du site. On devra crer un site local pour chaque site web sur lequel on
travaillera.
Pour crer un site local :
1. Dans Dreamweaver, ouvrez la bote de dialogue Dfinition du site en procdant comme suit :
Fichier > Nouveau Site.
2. Dans la bote de dialogue Dfinition du site, vrifier si l'option Infos locales est slectionne dans la
liste Catgorie.
3. Nommer le site Initiation_html en tapant ce nom dans le champ Nom du site (le nom du site local est un
surnom qui renvoie directement au rpertoire dfini comme site local).
4. Cliquer sur l'icne de rpertoire droite du champ Dossier racine local et naviguer jusqu'au rpertoire
dsir, puis cliquer sur Enregistrer (attention, le rpertoire daccueil doit tre cr avant).

5. Les options de gestion des liens peuvent tre ignores dans un premier temps.
6. Cliquer droite de la bote de dialogue dans la catgorie mise en forme de la carte du site" pour prciser
le nom de la premire page du site :

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 3/27

7. Cliquer sur OK, puis sur Crer lorsque Dreamweaver demande si l'on souhaite crer un fichier cache pour
le site (mme si lon na pas coch loption correspondante dans la bote de dialogue). L'option de
cration d'un fichier cache dans le rpertoire permet de crer un enregistrement des fichiers existants de
manire ce que Dreamweaver puisse rapidement mettre les liens jour lorsque l'on dplacera,
renommera ou supprimera un fichier.

8. Si le dossier stage, contient dj des fichiers crs par ailleurs, la fentre du site les affiche. La liste fera
galement office de gestionnaire de fichiers, en vous permettant de copier, coller, supprimer, dplacer et
ouvrir des fichiers exactement comme dans le slecteur de fichier ou l'explorateur de l'ordinateur.
9. Lutilisateur accde alors une nouvelle fentre, cest la fentre de site, elle permet la maintenance de
base des fichiers du site (renommer, supprimer) et leur publication vers un site distant.

2 Composition de la page daccueil

Depuis la fentre de site, un double-clic sur le nom du fichier index.htm permet douvrir celui-ci dans la
fentre document.

2.1

Un titre et un arrire-plan pour la page index.htm

Choisir Modifier > Proprits de la page pour ouvrir la bote de dialogue Proprits de la page.

Saisir un titre pour cette page, c'est le titre qui sera affich dans la barre de titre des navigateurs, ce titre
peut comprendre des caractres accentus et des espaces, il est relativement explicite.
Remarque : Il est galement possible dinsrer des mots-cls dans len-tte de la page, ces mots-cls non
affichs dans la fentre du navigateur peuvent tre utiliss par les utilisateurs de moteurs de recherche dans
le cadre dune recherche prcise de documents.
Pour insrer des mots-cls : Insertion > en-tte > mots-cls.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 4/27

Pour dfinir une couleur d'arrire-plan pour la page :

Choisir une couleur dans la palette ou utiliser le compte-gouttes pour slectionner une couleur d'un
objet de la page ou encore saisir le code de couleur par exemple #CCCCCC pour du gris dans le champ
Couleur d'arrire-plan.
Cliquer sur Appliquer pour appliquer la couleur l'arrire-plan.
Remarque : Une couleur est code sur trois paires (correspondant au rouge, vert bleu) de caractres
hexadcimaux (dont la valeur exprime l'intensit de la couleur) ; le signe # prcde les trois paires.
Rouge
#FF0000
Vert
#00FF00
Bleu
#0000FF
Magenta
#FF00FF
Cyan
#00FFFF
Jaune
#FFFF00
Blanc
#FFFFFF
Noir
#000000
Gris
#C0C0C0
Pour dfinir une image d'arrire-plan pour la page :
Cliquer sur Parcourir (Windows) ct du champ Image d'arrire-plan.
Slectionner une image, si l'image n'a pas t stocke pralablement dans le dossier de travail
(E:\stage par ex : limage darrire-plan crepi.gif se trouve dans un dossier E :\image), Dreamweaver
propose d'en faire une copie dans le site en cours :

On acceptera cette duplication pour ramener tous les lments composant la page dans le mme
dossier
Cliquer ensuite sur Appliquer pour ajouter l'image d'arrire-plan la page.

2.2
2.2.1

Noms de fichiers et titres des pages, quelles diffrences ?

Le nom de fichier de la page d'accueil

La page doit tre enregistre dans le dossier de travail. Si elle a vocation a devenir la page d'accueil du futur
site, elle devra avoir pour nom index.htm ou index.html, voire default.htm, default.shtml. En fait tout dpend
du serveur Web qui servira les pages html au niveau de l'espace d'hbergement qui recevra les pages.
Supposons l'hbergement sur Internet soit l'adresse perso.truc.fr , on vous a accord un rpertoire
nomm soleil sur cette machine pour stocker vos fichiers, les pages seront donc envoyes sur l'URL
perso.truc.fr/soleil/ .
Si les pages index.htm, p1.htm, p2.htm ont t stockes sur cet espace, un utilisateur pourra depuis son
navigateur taper www.perso.truc.fr/soleil/p1.htm , il verra s'afficher la page p1.htm dans la fentre de son
navigateur. Cependant, si vous surfez, vous avez du remarquer que lorsque vous tapez une adresse de site,
gnralement vous ne tapez pas le nom de la page et pourtant une page d'accueil vous est envoye par le
serveur. C'est que le serveur est paramtr (par son administrateur), pour servir par dfaut une page bien
prcise ; en gnral l'administrateur imposera au serveur d'envoyer la page index.htm en dehors de toute
prcision fournie par l'utilisateur. Ainsi conviendra-t-il de se renseigner auprs de l'hbergeur de votre site
pour vous savoir comment nommer sa page d'accueil. En gnral donc index.htm...
2.2.2

Et les noms de fichiers des autres pages...

Pour ce qui concerne les autres pages du site, leur nom importe peu... ou presque ! En effet, nombreux
sont les serveurs faire la diffrence entre majuscules et minuscules dans des noms de page, la plupart
refusent les caractres accentus, tous dtestent les espaces... d'o la rgle des trois pas :

pas d'accents,
pas d'espaces,
pas de majuscules.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 5/27

2.2.3

Les titres des pages

Les titres des pages quant eux peuvent tre composs avec des majuscules, des espaces des accents.
Le titre de la page est affich dans la barre de titre du navigateur pendant la consultation de la page. Les
mots composant le titre devront cependant tre judicieusement choisis. En effet de nombreux moteurs de
recherche savent rechercher les mots-cls saisis par lutilisateur dans le titre des pages (dans Altavista, il
suffit de faire prcder le mot-cl de title :, dans Ecila, on peut affiner la recherche en choisissant loption
de recherche des mots-cls dans le titre seulement). Le titre doit donc rendre compte assez prcisment
du contenu de la page.

2.3

La mise en page du contenu informatif

Pour obtenir une mise en page permettant de placer du texte ct d'une image, comme avec tous les
diteurs Html, il convient d'utiliser un tableau. On utilisera soit la commande Insertion > tableau, soit
l'icne approprie de la fentre d'objets.
2.3.1

Insertion d'un tableau

La largeur dun tableau peut tre exprime
en pourcentage de la largeur de la fentre
de visualisation du navigateur (le contenu
textuel des cellules sera recompos pour
viter davoir utiliser lasenceur).
Cette largeur de tableau peut tre
exprime en pixel si lon souhaite viter
une dsorganisation de la page quand
lutilisateur final visualise la page avec une
fentre trop troite, notamment par
exemple lorsque des lgendes figurent au
ct dimages insres dans un tableau.

Si le tableau nest utilis que pour faciliter

le placement dobjets, on ne matrialisera
pas la bordure

Lorsque le tableau est slectionn, l'inspecteur de proprits nous renseigne sur les proprits du tableau :

2.3.2

Insertion d'une image dans la cellule de gauche du tableau

Placer le point d'insertion dans la cellule gauche du tableau

Commande Insertion > image ou icne image de la fentre des objets
(image sigle_iufm.gif)
Redimensionner l'image (en faisant glisser une poigne d'angle ou en
saisissant les nouvelles valeurs dans l'inspecteur de proprits)
Dplacer la double barre pointille symbolisant la limite entre cellules pour la
ramener contre l'image.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 6/27

Rappel : Si limage navait pas t stocke pralablement dans le rpertoire de travail, Dreamweaver
propose de dupliquer ce fichier afin quil se trouve dans le mme dossier que la page Html. Il est prudent
daccepter.
En effet, la diffrence dun fichier Word, lorsquune image est insre, elle nest pas insre dans le fichier
Html gnr. Elle a une existence propre sur le disque dur.
Ma_page.html

Img1.gi
f
Img2.gif

Ma_page.doc

Page Html ne
contenant que
du texte et un
lien vers les
images qui sont
stockes
sparment.

Une page Html ne contient que du texte, ce dernier contient des appel des images dont les fichiers
sont distincts de la page, les balises Html assurant leur positionnement au moment de laffichage dans un
navigateur.
Par exemple voici le code Html qui dcrit le placement de deux images :

<p><img src="file:///C:/Gifs%20animes/ani_cat.gif"
width="100"
height="60"><img src="aniheart.gif" width="40"
height="40"></p>
Limage ani_cat.gif est situe dans le dossier Gifs anims du disque dur C, le chemin est prcis dans le
code de la page html. Lorsque la page sera stocke sur une machine hte (un serveur distant), au moment
de laffichage de la page, limage en question sera recherche dans le rpertoire C:/Gifs%20animes/.
Aura-t-on pris soin de publier galement ces images dans un rpertoire de mme nom sur le serveur ? Si
oui tout se passe bien, sinon limage ne sera pas trouve et donc pas affiche.
Limage aniheart.gif quant elle est recherche dans le rpertoire courant, elle sera trouve sans problme
si tous les fichiers du rpertoire courant sont copis vers le serveur.

Il conviendra donc de crer un rpertoire qui contiendra tous les lments du

site (images, sons, pages html) pour tre sur de ne pas en oublier au
moment du transfert vers le site dhbergement.
Si lon souhaite travailler plus proprement encore on pourra crer un
rpertoire qui contiendra la fois les pages et un autre rpertoire qui
contiendra lui-mme les images.
Cest lensemble du rpertoire mon site qui sera transfr, le texte des
pages contiendra alors des chemins relatifs pour indiquer lemplacement
des images dans le sous rpertoire

2.3.3

c:\mon_site
page1.htm
page2.htm
page3.htm
c:\monsite\mes_images
img1.gif
img2.jpg
img3.jpg
img4.gi

Saisie du texte dans la cellule de droite

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 7/27

La liste droulante taille de l'inspecteur de proprits permet de choisir une police et une taille (ici 7)
pour le texte.
Remarques :
Les tailles de police HTML sont relatives ; ce ne sont pas des tailles de points spcifiques. Les
utilisateurs dfinissent le corps de la police par dfaut pour leur navigateur ; il s'agit du corps affich
lorsque Par dfaut ou 3 est slectionn dans l'inspecteur des proprits ou partir du menu Texte >
Taille. Les tailles 1 ou 2 apparatront plus petites que celle de la police par dfaut ; les tailles de 4 7
apparatront plus grandes. Pour que le texte s'affiche constamment dans une taille de point particulire,
utilisez les feuilles de style.
Lors de la saisie de texte, c'est la police par dfaut de l'diteur qui est utilise. Mais c'est la police par
dfaut du navigateur qui permettra de visualiser la page affiche ! Il est donc important de slectionner
une police dans la liste droulante pour la spcifier afin de limposer au navigateur de lutilisateur final.
Attention, les polices fantaisies ne sont pas forcment prsentes sur les postes de travail de la majorit
des "internautes", dfaut de trouver la police choisie par le concepteur de la page, c'est la police par
dfaut du navigateur de la machine hte qui est mobilise.
Les espaces entre les paragraphes sont importants, on pourra judicieusement remplacer certaines
marques de paragraphes par des retours la ligne (<Maj>+<Entre>).

2.3.4

Visualiser de temps en temps la page ralise dans un navigateur

Bien que la fentre document de Dreamweaver offre une vue de la page telle peut apparatre dans un
navigateur, il est prfrable de visualiser celle-ci dans un ou plusieurs navigateurs afin de sassurer du rendu
de la page. On utilisera la commande Fichier > Aperu dans le navigateur.
Complter la page daccueil avec des rubriques qui serviront de support la mise en place de liens.
Faire en sorte que lensemble des rubriques soit visible dans une fentre de navigateur sans avoir
utiliser la barre de dfilement.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 8/27

bout_vert.gif

lettre.gif
Visualiser la page dans un navigateur et constater que limage lettre.gif est une image anime.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 9/27

3 Cration dune nouvelle page et mise en place des hyperliens

Pour crer une nouvelle page :
Depuis la fentre document : Fichier > Nouveau
Depuis la fentre du site : Fichier > Nouveau Fichier
Crer la page sites.htm
On pourra utiliser les adresses de sites utiles la construction de pages Web fournies en annexe
Nom de fichier sites.htm (Attention aux rgles relatives au nom de fichier !)
Titre de la page : Adresses utiles Html
il.gif

Grib_r.gif

Ajouter une police

(voir infra)

Crer un style
(voir infra)

3.1

Ajouter une police

Lorsque lon souhaite utiliser frquemment une police spcifique et que celle-ci napparat pas dans la liste
droulante de linspecteur de proprits, il suffit de personnaliser la liste

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 10/27

3.2

Crer un style de paragraphe

Cration du style items (police Comic sans ms, rouge, taille 12)

Choix des proprits du style

Application du style un paragraphe slectionn

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 11/27

3.3

Mise en place dhyperliens

3.3.1

Hyperlien menant une page du mme site

Depuis la page index.htm (on y revient par lintermdiaire du menu fentre qui contient les pages en cours
de traitement), mettre en place un lien vers la page sites.htm
Slectionner le texte du lien et saisir ladresse
atteindre (ici une page html) dans la zone liens de
linspecteur de proprits, ou encore, choisir de
rechercher la page dans un dossier (ce qui vitera les
erreurs de saisie, la saisie de caractres en
majuscule etc) :

Sur la page sites.htm, mettre en place un lien sur une image qui permettra le retour sur la page daccueil

Insrer limage flech_g.gif en pied de tableau (pour obtenir un

alignement vertical correct avec le texte retour la page daccueil,
limage tant slectionne, choisir lalignement milieu absolu dans
linspecteur de proprits)

Slectionner ensuite limage et mettre en

place le lien vers Index.htm

Remarque : pour tester les liens, un clic droit sur le texte du lien permet datteindre le menu contextuel, on
choisira la commande ouvrir la page lie
Mettre en place le lien vers la page glossaire.htm qui existe dj et qui aura t pralablement copie dans
le rpertoire de travail e :\stage.

3.3.2

Mise en place de liens vers une adresse de site ou page sur Internet

Mettre en place quelques liens depuis la page sites.htm

vers les sites en question

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 12/27

3.3.3

Mise en place de liens internes une page

La page glossaire.htm contient une srie de

dfinitions ranges en ordre alphabtique. Il serait
donc opportun daccder aux dfinitions via des
hyperliens figurant sur un sommaire.
Ouvrir la page "glossaire.htm" et insrer des
ancres nommes (au dbut de chaque nouveau
groupe de mots commenant par la mme lettre) et
des liens pour permettre un va et vient entre le
rpertoire du haut de la page et les diffrentes
dfinitions.
Insertion > Ancre Nomme ou <Ctrl> +<Alt> +A
Il faudra nommer lancre, par exemple pour le
dbut de la rubrique des B :

Remarque : lancre permet d'identifier un endroit

prcis du texte (cet endroit peut tre constitu par
une image), l'hyperlien peut pointer sur lancre.

ABCDEF
G
___________
A~~
~~ ~

B~~
~~ ~

C~~
~~ ~

D~~
~~ ~

E~~

~ ~~
~ ~~ ~
~ ~~
~ ~~ ~
~ ~~
~ ~~ ~
~ ~~
~ ~~ ~

Lien permettant
le retour au
sommaire

~ ~~

Z~~ ~ ~~
~ ~ ~ ~ ~~ ~

Accueil

Lien vers la page

index.htm

Depuis le rpertoire figurant en sommaire de la page, il convient de mettre en

place un hyperlien vers lancre ainsi dfinie : faire prcder le nom de lancre du
symbole #

Insrer un lien en bas de page pour le retour la page d'accueil du site (index.htm)
puis un lien de la page daccueil (index.htm) vers la page glossaire.htm

Remarque : le principe des ancres (appeles signets dans le monde Microsoft, cibles dans le monde
Netscape) est trs utilis pour gnrer des aides contextuelles dans un document pointant vers une zone
prcise dun second document. Un lien mis en place dans une page de texte utilisant des termes
techniques peut pointer vers une zone prcise de la page glossaire.htm, pour cela il suffira de dsigner le
lien en donnant ladresse de la page suivie de # puis du nom du signet :

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 13/27

3.3.4

Visualiser la carte du site

La commande site de la fentre du lanceur permet datteindre la fentre du site :

Un clic sur le bouton carte du site permet

de visualiser graphiquement la grappe de
page ainsi constitue :

3.3.5

La mise en place dun lien vers une adresse lectronique

Comprenons-nous bien, il ne sagit pas de crer un lien qui permettra douvrir une bote aux lettres
lectronique, mais simplement de gnrer un nouveau message en compltant automatiquement ladresse
du destinataire. Cette procdure permet de faciliter lenvoi dun message par lutilisateur (par ouverture
automatique de la fentre nouveau message du logiciel de messagerie install sur sa machine), tout en
vitant les erreurs de libell dadresses.
Slectionner le texte Ecrivez-nous de la page daccueil, puis dans la zone de lien de linspecteur de
proprits de faire prcder ladresse lectronique du destinataire de mailto :

Limage anime de lenveloppe tant suggestive, il est judicieux de placer le lien galement sur celle-ci.

3.3.6

Cration dun hyperlien en direction dun fichier Word, Excel ou pdf

La page daccueil propose une information relative la rglementation en matire de construction de site.
Afin de permettre tout utilisateur de pouvoir lire le fichier (regle_site.pdf), il a t pralablement enregistr
dans le format pdf (portable document format) dAcrobat. Ce format permet lutilisateur de lire le document
dans sa pagination dorigine, avec Acrobat Reader (gratuit) sans avoir besoin de disposer de la version
adquate de Word, Excel ou autre application. Lorsque le lien est activ, le navigateur provoque louverture
dAcrobat reader qui permet de lire le fichier rapatri. La ralisation dun fichier Acrobat ncessite de
disposer de la version payante cette fois dAcrobat Writer (voir le document Production dun fichier Acrobat Iufm de reims- Jacques Bresson)
Attention, la version reader dAcrobat ne propose pas denregistrement du fichier tlcharg. Par ailleurs
certains fichiers pdf naffichent que des pages blanches (cest un bogue reconnu par Adobe qui diffuse

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 14/27

Acrobat). Pour viter ces deux problmes, lutilisateur final fera un clic droit sur le lien menant un fichier
acrobat et choisira la commande enregistrer la cible sous du menu contextuel.
Cration de la page telechargement.htm qui contient les liens vers les divers documents
Crer une page Html, y insrer des liens en direction des trois documents ci-dessous.
Tester l'effet de l'activation des liens sous un navigateur.

Construire une page de documents proposer en tlchargement qui sera relie la rubrique
tlchargement de documents de la page index.htm.
Les diffrents documents devront tre ventuellement transforms dans un format spcifique ou compress.
Attention : Prendre soin de stocker ces fichiers dans le mme dossier (que celui qui contient vos pages,
dfaut dans un sous dossier), pour que le chemin d'accs au document contenu dans le lien soit le mme
aprs tlchargement du site dans un dossier de pages personnelles sur un site d'hbergement.
Nature

Nom de fichier proposer au Taille

tlchargement
mots_croises.xls
53Ko

Une grille de mots croiss avec dispositif d'aide

sous Excel 97 (aucune manipulation faire sur ce
document, l'ouvrir sous Excel pour constater son
fonctionnement)
Cration de pages Html avec Word 97 : ncessite doc_html_word.exe
de compresser le fichier "doc_html_word.doc"
125Ko avec Winzip, puis en faire un fichier
autodcompactable
Cration de pages Html avec Frontpage Express : doc_html_fpex.pdf
ncessite de convertir en pdf pour lecture l'cran
le fichier "fp_express.doc" de 95ko

Comparer la taille du
fichier compress
obtenu avec le
fichier Word
d'origine.
Comparer la taille du
fichier compress
obtenu avec le
fichier Word
d'origine.

Test des liens

Si la machine de l'utilisateur est correctement configure, les documents sont automatiquement ouverts
avec Word, Excel, ou Acrobat Reader (si ces logiciels sont prsents sur la machine).

Si les logiciels ne sont pas installs, ou que

l'association entre l'extension du nom de fichier et
l'application ouvrir n'est pas ralise, une fentre
d'enregistrement s'ouvre.

Si l'on souhaite pouvoir stocker immdiatement les

documents sur son disque dur un endroit prcis
sans les ouvrir, il suffit, depuis le navigateur, de faire
un "clic droit" sur le lien et de choisir la commande
"enregistrer sous" dans le menu contextuel.
3.3.7

La cration de zones ractives sur une

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 15/27

image
Cette fonctionnalit de Dreamweaver permet de gnrer diffrentes zones ractives sur une image, chaque
zone pointant grce un hyperlien vers une information spcifique (autre page du site, autre site). On
retrouve cette fonctionnalit sous les diteurs volus comme FrontPage mais gnralement pas dans les
diteurs de type graticiels (il en est de mme pour laffichage en wysiwyg des pages de cadres voir infra-).
Crer une nouvelle page :
Titre : tourisme Rgion Champagne Ardenne
Nom de fichier : region.htm (attention, pas daccent au mot region).
Insrer le texte suivant en haut de page : Promenade en Champagne Ardennes
Insrer limage : champ-ard.jpg
Arrire-plan : image blanc.gif
Texte du titre en taille 7 couleur : vert
Saisir ensuite les textes et insrer les images suivantes :
Promenade en champage- Ardenne
Champ-ard.jpg

La place ducale charleville-Mzires

Ducale.jpg

Mettre en place des ancres

nommes sur les
paragraphes prcdant les
titres de la page

Pour mieux voir le positionnement

des ancres :

La cathdrale de reims
Cathedrale.jp
g

Le vignoble dEpernay
Vignes.jpg

Crer les zones ractives sur la carte de la rgion :

Slectionner limage de la rgion et activer le bouton carte de linspecteur de proprits

Le bouton Carte permet douvrir

une fentre dote doutils de
tracs afin de dlimiter des zones
ractives.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 16/27

Lditeur de carte permet alors de dfinir

les zones ractives de limage avec les
outils de trac et de dfinir les liens (ici
vers les ancres nommes).
Enregistrer les modifications et visualiser la
page dans un navigateur.

Tester les liens dans un navigateur (rappel

: Fichier > Aperu dans le navigateur)

Insrer une flche de retour flech_h.jpg pour permettre la cration dun lien affichant le haut de page (il
faudra donc insrer pralablement une ancre en haut de page).
Enregistrer la page et mettre en place un lien vers cette
page depuis la page daccueil (index.htm)

4 Redfinition des styles des hyperliens

La dfinition dun style de paragraphe a t aborde au chapitre 3.2
Il est possible de redfinir le style de certaines balises, notamment celle des hyperliens qui sont toujours
prsents de manire souligne, mais que lon peut souhaiter dune couleur particulire et non soulign pour
tenir compte dune charte graphique pour le site.

4.1

Cration dun style incorpor dans la page

Pour la page index, dfinissons des liens en vert gras et non souligns
Depuis le lanceur : style > Editer > Nouveau

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 17/27

Il sagit de redfinir la balise a href qui

permet de gnrer le lien hypertexte

Remarque : lors de la dfinition de la couleur, on dispose dune pipette qui permet de prendre un
chantillon de couleur sur un autre lment de la page au besoin.
Enregistrer le document.

4.2

Cration dune feuille de style externe

Le style dhyperlien est propre cette feuille. Il est cependant possible de crer une feuille de style externe
qui contient la dfinition des diffrents styles, sur laquelle pointeraient les diffrentes pages du site. Ainsi,
en modifiant une seule fois le style dans la feuille de style externe, les textes des diffrentes pages
comportant ce style seraient modifis en une seule opration.
Depuis la page Index.htm, activer la commande Style > Editer et cliquer sur le bouton
lien de la bote de dialogue
Nommer la feuille de style externe (ce nom nexiste
pas au dpart), cela donnera naissance une feuille
commun.css stocke sur le disque.

Crer alors les styles comme aux chapitres 3.2

et 4.1
Enregistrer

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 18/27

Ouvrir les autres pages html (sites.htm par exemple) et mettre en place le lien vers la feuille de style
Style > Editer > Lien et pointer la feuille de style commun.css
Les styles de la feuille sont pris en compte dans le document.
Enregistrer
Remarque : De la mme manire, il est possible de modifier la balise body pour prciser la couleur
darrire-plan.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 19/27

5 Les animations
De nombreuses images Gif animes sont disponibles sur Internet (voir adresses en annexe). Il est
galement possible de crer de telles animations avec un logiciel du type de GifAnimator (qui ne fait que
cela) ou avec PaintShopPro (qui fait bien dautres choses).
Il est possible dinsrer du code javascript ou des appliquettes Java. De nombreux sites prsentent des
exemples de code et la manire de linsrer par copier coller dans une page html (voir les adresses en
annexe).
Dreamweaver propose en standard des animations de texte et dimages

5.1

Les calques et les scnarios

Avec plupart des diteurs Html, il est ncessaire de recourir aux tableaux (Html 2 et amlior en version 3.3
avec les cartes ractives) pour positionner correctement textes et images dans une page Html. Avec le
principe des feuilles de styles en cascade (CSS), il est dsormais possible de positionner des cadres
contenant des images ou du texte un endroit prcis dune page et ceci dans trois dimensions. Attention
cependant, le code insr dans la page nest lu correctement que par les navigateurs de version 4
ou suprieure !
5.1.1

Insertion de calques dans une page

Crer une nouvelle page : nom journee.htm , titre La journe en images , enregistrer la page

ou bien

Insrer dans le calque limage autocar.gif et redimensionner le calque au besoin pour lajuster la
taille de limage.

Poigne de dplacement du
calque.

Nom du calque du calque.

Plus lindex Z est lev plus le
calque est plac au premier plan.

Insrer successivement deux autres calques qui contiendront limage

roue_av.gif pour lun et roue_ar .gif pour lautre.
Positionner les cadres en haut et droite de la page et placer les roues
au bon endroit sous lautocar.
Enregistrer

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 20/27

5.1.2

Insertion dun scnario

Pour dplacer lautocar, il est ncessaire dutiliser scnario qui va

dcrire comment les diffrents calques vont se dplacer dans la
page.

Cest la fentre de scnario qu doit tre ouverte via la commande du

lanceur.

Slectionner le calque de lautocar, il est situ en ahut et droite de

la page lendroit o commencera lanimation.

Insrer cet objet calque dans le scnario, soit par la

commande Modifier > Ajouter un objet au scnario soit en
faisant glisser le calque vers la fentre de scnario sur la
premire ligne de la barre denchanement des squences.

Cliquer alors sur

lextrmit droite de
la zone grise qui
reprsente le calque
dans la barre des
temps et dplacer le
calque sa position
finale (haut gauche
de la page) pour
indiquer quelle devra
se situer cet
endroit en fin de
course.

Un trait horizontal
symbolise la trajectoire du
calque sur la page

Recommencer lopration pour les

deux roues qui viendront sajuster
sous lautocar avec un temps de
retard : pour cela les zones
grises relatives aux deux roues
seront situes chronologiquement
aprs dans la barre des temps de
la fentre de scnario.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 21/27

Veiller ce que loption lecture Automatique soit coche dans la fentre des scnarios pour que ce
scnario soit jou louverture de la page

Enregistrer la page et visualiser leffet obtenu dans le navigateur.

Recommencer lopration avec un calque qui contiendra le titre de la page La journe en images, le
calque partira du bas de la page et viendra sajuster en haut de la page ct de lautocar
Puis insrer un claque qui contiendra un tableau permettant la mise en page des photographies
La premire range de cellule fera lobjet dune fusion de cellules (clic droit > tableau > fusionner) et
recevra limage haut_photos.jpg ; le pied du tableau recevra limage bas_photos.jpg.
Limage flech_d.gif recevra le lien qui renvoie la page index.htm.

5.2
5.2.1

Les comportements
Du son louverture de la page

On souhaite quun son soit jou louverture de la page index.htm

Pour associer un comportement l'ensemble de la page, cliquer sur la balise <body> dans le slecteur de
balises situ au coin infrieur gauche de la fentre du document.
Choisir Fentre > Comportements
pour ouvrir l'inspecteur de
comportements, ou cliquer sur le
bouton Comportement du Lanceur.
La balise HTML de l'objet slectionn apparat dans la barre de titre.
Cliquer sur le bouton + (signe plus) et effectuez un choix parmi les actions du
menu contextuel.
Choisir le fichier ouverture.wav et choisissez OK.

Toutes les actions proposes fonctionnent dans les navigateurs 4.0 ou plus rcents. Certaines actions sont
refuses pas les navigateurs moins rcents.
Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 22/27

L'vnement par dfaut de l'action apparat dans la colonne vnements ici onload pour le lancement du
son louverture de la page.

Enregistrer la page index.htm

5.2.2

Du son au survol dune image

Supprimer le logo de lIufm dans la page index.htm, il sagit dy insrer ce mme logo qui se transformera en
une photographie spia du sige de lIufm lors dun survol de la souris.
Une commande du menu insertion permet dviter de paramtrer le comportement dans la fentre de
comportement
Insertion > Image retourne

Le comportement est dsormais dfini pour cette image.

Remarque : on procderait de la
mme manire pour provoquer
lexcution dun son au passage de la
souris sur une image.

Enregistrer la page index.htm et la tester sous un navigateur.

5.2.3

Insertion dune appliquette java dans une page

Crer une nouvelle page jeu.htm

Aligne 4

Saisir le texte de la page :

Exercez-vous contre l'ordinateur

Puis insrer une apliquette java :
Insertion > Apliquette
Choisir le fichier java : connect4.class
Modifier la taille rserve laffichage de lapliquette
Le code insr peut tre visualis par la commande <Html> du
lanceur :

Enregistrer la
page et la tester

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 23/27

sous un navigateur.

6 Les pages de cadres

En gnral, on utilise une page de cadres pour une prsentation de type suivant :
Titre du site ou titre courant
de la partie de site visite,
en gnral avec un logo.
Sommaire
contenant des
liens affichant les
pages dans la
partie informative

Partie informative du site.

Cette organisation des cadres peut tre modifie, on peut ajouter dautres cadres, modifier leur taille
Attention :

6.1

Une page de cadres dcrit les proprits des diffrents cadres et leur positionnement relatif.
Chaque cadre est identifi par un nom et spcifie la page html quil affiche par dfaut.
La page de cadres ne contient donc pas les informations lues par lutilisateur final, ces informations
sont donc contenues dans les pages html affiches dans les cadres.
Ne pas confondre les cadres (encore appels frames ) et les claques (voir supra).

Cration dun jeu de cadres dans une nouvelle page

Crer une nouvelle page

Cration du jeu de cadre

Affichage > bordures de cadres
Dplacer la bordure apparue en haut de la page en maintenant la touche
<Alt> enfonce

Remarque : un cadre une fois cr, peut tre subdivis en

plusieurs cadres avec la mme procdure.

Ouvrir la fentre de cadres fentre > cadres

Cliquer dans le cadre infrieur de la fentre de proprits
de la page de cadre pour activer le cadre infrieur et
dplacer la bordure de gauche comme prcdemment en
maintenant la touche <Alt>

Le positionnement des trois cadres est maintenant ralis

Enregistrer les modifications ralises dans la page
c_infos.htm

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 24/27

6.2

Identification des pages afficher dans les cadres

Il faut alors dfinir quelle page sera affiche par dfaut dans chacun des cadres.
Pour cet exercice cinq pages ont t cres rapidement dont on pourra par la suite modifier le contenu :
titre.htm, menu.htm ,Info1.htm, Info2.htm, info3.htm

Pour modifier les proprits du cadre du haut , appuyer sur <Alt> et cliquer dans le cadre suprieur

On prcise s lon souhaite

ou non une bordure.
On donne un nom au cadre
qui sera enregsitr comme
toute page html .

On choisit la page que le

cadre affichera par dfaut
On prcise si les barres de
dfilement doivent tre
apparentes .

Cadre suprieur : nom banniere affichera la page titre.htm

Cadre de gauche : nom sommaire affichera la page menu.htm
Cadre principal : nom principal affichera la page info1.htm
Enregistrer le jeu de cadres :
Fichier > Enregistrer le jeu de cadres
Donner le nom c_infos.htm

6.3

Mise en place des liens

Slectionner gnrales dans le menu et depuis linspecteur de proprits, gnrer un lien en

direction de la page info1.htm en prcisant le cadre de destination :

Recommencer lopration pour les liens suivants

Formateurs pointe vers info2.htm, Stagiaires pointe vers info3.htm

Pour ce qui concerne le retour vers la

page daccueil, la page index.htm
ne doit pas tre affiche dans le cadre
principal mais en pleine fentre, pour

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 25/27

cela il convient de choisir comme cible _top .

7 La publication du site sur un serveur local ou distant

Dans le cadre dun rseau local dtablissement, un serveur Web personnel peut avoir t install sur une
machine PWS serveur de Frontpage par exemple sur un Windows 95 ou 98, IIS sur une machine NT,
apache sur un serveur Linux etc.
Le logiciel serveur guette sur le port 80 de la machine une demande qui sadresse lui par lintermdiaire
dun navigateur dans lequel on aurait saisi dans la barre dadresse : http://nom_de_serveur.
Lorsquil est sollicit le serveur envoie la premire page du site (en gnral index.htm, mais ce nom de page
est paramtrable et certains serveurs envoient par dfaut une page de nom default.htm ou encore
index.shtml ).
Si lon souhaite tre vu depuis lInternet, il convient de demander un espace dhbergement, en gnral
gratuit pour de petits espaces disque (20, 50 voire 100 200 Mo). Lhbergeur fournit alors :
Un identifiant : jacques Bresson
Un mot de passe FTP (File Transfert Protocol) : ************ (pour pouvoir crire sur sa machine dans
un rpertoire cr pour lutilisateur lexclusion de tout autre)
Il indique le nom du serveur ftp qui recevra les pages : perso.libertysurf.fr
Il indique que les pages pourront tre vues depuis ladresse suivante : perso.libertysurf.fr/monrep et
que si aucun nom de page nest spcifi cest par exemple la page index.htm qui sera envoye par
le serveur.
Attention, avant tout envoi, vrifier :

Que tous les fichiers ont ts enregistrs avec leurs dernires modifications.

Que les noms de pages vrifient les 3 pas (Cf. page 5), pas daccents, pas despaces, pas de
capitales. Si ce nest pas le cas, modifiez depuis la fentre carte du site (et non depuis lexplorateur
de Windows) le nom des fichiers (en effet Dreamweaver, modifie en consquence le code Html figurant
dans les pages qui contiennent un appel ces fichiers, liens, images par exemple)

Que les liens mis en place pointent correctement vers des fichiers existant (commande Fichier >
vrifier les liens > site entier).

Pour envoyer les pages composes, un logiciel FTP du type de FTP explorer (gratuit) suffit, mais
Dreamweaver comprend une application FTp qui permet cet envoi.
Utiliser la fentre site accessible depuis le lanceur :
Puis depuis cette fentre : site > dfinir les sites

De retour sur la fentre de site, cliquer

sur le bouton connecter
Pour provoquer une connexion et
dmarrer le transfert des fichiers.

Monrep

Pour la mise jour dun site dj transfr, la commande Affichage >

Slectionner local plus rcent permet de comparer la date de dernire modification des fichiers sur le
disque dur local et le serveur distant pour ne transfrer que les fichiers mis jour.

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 26/27

Table des matires

CRATION D'UNE PAGE OU D'UN NOUVEAU SITE ? ............................................................................................... 1

1.1
1.2

CRATION D'UNE PAGE HTML......................................................................................................................................1

DFINITION D'UN SITE LOCAL......................................................................................................................................3

COMPOSITION DE LA PAGE DACCUEIL..................................................................................................................... 4

2.1
UN TITRE ET UN ARRIRE -PLAN POUR LA PAGE INDEX.HTM ...............................................................................4
2.2
NOMS DE FICHIERS ET TITRES DES PAGES, QUELLES DIFFRENCES ?...................................................................5
2.2.1
Le nom de fichier de la page d'accueil............................................................................................................. 5
2.2.2
Et les noms de fichiers des autres pages........................................................................................................... 5
2.2.3
Les titres des pages............................................................................................................................................... 6
2.3
LA MISE EN PAGE DU CONTENU INFORMATIF ...........................................................................................................6
2.3.1
Insertion d'un tableau ......................................................................................................................................... 6
2.3.2
Insertion d'une image dans la cellule de gauche du tableau ...................................................................... 6
2.3.3
Saisie du texte dans la cellule de droite .......................................................................................................... 7
2.3.4
Visualiser de temps en temps la page ralise dans un navigateur............................................................ 8

CRATION DUNE NOUVELLE PAGE ET MISE EN PLACE DES HYPERLIENS.................................................10

3.1
A JOUTER UNE POLICE .................................................................................................................................................10
3.2
CRER UN STYLE DE PARAGRAPHE ...........................................................................................................................11
3.3
M ISE EN PLACE DHYPERLIENS..................................................................................................................................12
3.3.1
Hyperlien menant une page du mme site...................................................................................................12
Mise en place de liens vers une adresse de site ou page sur Internet..................................................12
Mise en place de liens internes une page...............................................................................................13
3.3.4
Visualiser la carte du site .................................................................................................................................14
3.3.5
La mise en place dun lien vers une adresse lectronique..........................................................................14
3.3.6
Cration dun hyperlien en direction dun fichier Word, Excel ou pdf....................................................14
3.3.7
La cration de zones ractives sur une image...............................................................................................15

REDFINITION DES STYLES DES HYPERLIENS ......................................................................................................17

4.1
4.2

CRATION DUN STYLE INCORPOR DANS LA PAGE ..............................................................................................17

CRATION DUNE FEUILLE DE STYLE EXTERNE ....................................................................................................18

LES ANIMATIONS..............................................................................................................................................................20
5.1
LES CALQUES ET LES SCNARIOS................................................................................................................................20
5.1.1
Insertion de calques dans une page................................................................................................................20
5.1.2
Insertion dun scnario .....................................................................................................................................21
5.2
LES COMPORTEMENTS.................................................................................................................................................22
5.2.1
Du son louverture de la page.......................................................................................................................22
5.2.2
Du son au survol dune image..........................................................................................................................23
5.3
INSERTION DUNE APPLIQUETTE JAVA DANS UNE PAGE ......................................................................................23

LES PAGES DE CADRES...................................................................................................................................................24

6.1
6.2
6.3

CRATION DUN JEU DE CADRES DANS UNE NOUVELLE PAGE .............................................................................24

IDENTIFICATION DES PAGES AFFICHER DANS LES CADRES................................................................................25
M ISE EN PLACE DES LIENS ..........................................................................................................................................25

LA PUBLICATION DU SITE SUR UN SERVEUR LOCAL OU DISTANT ...............................................................26

Iufm de reims Jacques bresson Premiers pas avec Dreamweaver

page 27/27