Création Web avec DreamWeaver

Création WEB avec DreamweaverMX
Creation Web avec
DreamweaverMX
Sommaire
Initiation
.preparation
.mise en forme
.liens hypertextes
.images
.liens sur images
.images avec zones
sensibles
.images survolees
.liens de type courriel
.apercu dans le navigateur
.ancre
jbernard page 1
Création WEB avec DreamweaverMX
1. Preparer le site
1
D’abord et avant tout, il est recommandé de construire l’arborescence
de votre site à partir de l’Explorateur
Windows. Il est suggéré d’utiliser
l’arborescence type suivante:
+Nom de votre site
+Images
+fichiers de travail
+videos
+animations
2
Lorsque votre arborescence est complétée, démarrer dreamweaver. Sélectionner Site>Nouveau site depuis
la fenêtre Dreamweaver.
jbernard page 2
Création WEB avec DreamweaverMX
4
Inscrire le nom de votre site dans la première case de texte puis sélectionner le répertoire que vous venez de
créer tel que décrit dans le texte ci-haut.
Cliquer ensuite sur OK
Maintenant que votre site est défini, revenez à la page d’édition de Dreamweaver. Si aucun document n’est
ouvert, vous pouvez en ouvrir un nouveau directement à partir de l’écran de gestion des sites de Dreamweaver via
le menu Fichier>Nouveau fichier. Inscrire un nom de fichier dans la case réservée à cet effet. S’il s’agit de votre
page d’accueil, le nom devrait être index.htm. Cela rendra l’adressage électronique plus facile pour le visiteur.
1
2
jbernard page 3
Création WEB avec DreamweaverMX
Maintenant que votre fichier est nommé, ouvrez-le en double cliquant dessus. Vous êtes maintenant en
mode édition.
Inscrire dans la case “Titre”, le nom de cette page. Le nom de la page
n’est pas le nom du fichier. Le nom du fichier ne peut contenir de caractères accentués et devrait être court. Le titre de la page peut contenir des
caractères accentués et être beaucoup plus exhaustif que le titre du fichier.
Nous allons maintenant commencer à composer notre page. Avant de commencer je vous recommande d’afficher la grille. Cette grille est utile pour aligner les objets, les images et le texte. Elle ne sera pas visible dans un
fureteur.
Pour afficher la grille, sélectionner Affichage>Grille>Afficher la grille
jbernard page 4
Création WEB avec DreamweaverMX
Les pages html peuvent contenir une couleur de
fond ou une image de fond. Vous pouvez également définir la couleur du texte, la couleur des
liens, actifs, visités ou non. Vous pouvez également définir des marges comme on le fait dans un
logiciel de traitement de texte.
Pour modifier ces attributs de page, sélectionner
Modifier>Propriétés de la page.
Dans la case “Image d’arrière-plan”
vous pouvez spécifier une image
d’arrière-plan.
Les cases de couleurs en dessous
vous permettent de modifier la
couleur de l’item spécifié.
Les cases des marges vous permettent d’indiquer les valeurs des
marges à inscrire. Vous ne pouvez
spécifier que les marges du haut et
les marges de gauche.
Dreamweaver affiche 4 cases
puisque Netscape et Explorer
traitent différemment les attributs
de marges. Les cases de gauche
sont valables pour Netscape et
celles de droite sont valables pour
Explorer.
Cliquer sur Ok lorsque vous avez
terminé.
jbernard page 5
Création WEB avec DreamweaverMX
2. Mise en forme
Dreamweaver propose une aide à la mise en forme nommée “tableau de mise
en forme”. L’utilisation des ces tableaux de mise en forme peut s’avérer ardue
pour les débutants, raison pour laquelle je leur préfère les calques.
Un calque, c’est ni plus ni moins qu’une couche invisible, superposée à votre
page comme une feuille acétate le serait par-dessus une feuille de papier.
Vous pouvez inscrire dans un calque à peu près tout ce que vous pouvez
inscrire dans une page puis déplacer le calque ou le redimensionner pour
répondre à vos critères de mise en page...
1
Pour insérer un calque, sélectionner le bouton “Dessiner un calque” de la boîte
à outils Commun.
2
Cliquer sur la page à l’endroit où vous désirez insérer le calque
puis glisser la souris. Un rectangle s’affiche à l’écran...
Relâcher le bouton de la souris lorsque le calque a atteint les
dimensions désirées.
jbernard page 6
Création WEB avec DreamweaverMX
Vous pouvez dessiner autant de calques que vous désirez. Il
faut se rappeller cependant, qu’un calque ne peut en contenir un
autre mais peut en chevaucher un autre.
Pour insérer du contenu dans un calque, cliquer d’abord à
l’intérieur de celui-ci puis insérer votre texte, vos images, tableaux, etc.
Pour modifier les attributs d’un calque, le déplacer ou le
redimensionner, sélectionner d’abord le contour de ce dernier
(de petits carrés noirs s’affichent sur le pourtour du calque). À
l’aide de la boîte des propriétés, vous pouvez modifier la couleur
de fond, l’image de fond et d’autres attributs du calque sélectionné.
Exemple d’une boîte de propriétés d’un calque...
La figure ci-contre illustre un exemple de l’utilisation des calques. Le
calque supérieur contient le titre. Le
calque de gauche contiendra la table
des matières du site. Le calque de
droite contient le texte et les images
du site.
Chaque calque contient donc généralement un contenu spécifique que
l’on peut déplacer et redimensionner
facilement avec la boîte de propriétés entre autres.
jbernard page 7
Création WEB avec DreamweaverMX
3. Creer un lien
Vous pouvez créer un lien sur un texte ou sur une image ou sur un objet. Pour
créer un lien sur un texte, il faut d’abord sélectionner ce texte. Ce texte sera
ensuite souligné et la couleur définie déjà dans la boîte “Propriétés de page”
sera appliquée. Avant de créer un lien assurez-vous que la boîte des Propriétés
est affichée (habituellement dans le bas de l’écran). Si elle n’est pas affichée,
sélectionner Fenêtre>Propriétés.
1
Sélectionner le texte sur lequel sera créé le lien.
2
Puis dans la boîte des propriétés, visà-vis la case Lien, sélectionner l’icone
en forme de chemise afin d’atteindre
le fichier qui constitue la cible du lien.
S’il s’agit d’une page sur
Internet, il vous faudra inscrire
l’adresse URL au complet, incluant http://
3
Ex. http://www.cslaval.qc.ca
Une fois le fichier sélectionné, cliquer sur “OK”. Voilà le lien
est activé. Le texte est souligné et la couleur définie dans
vos propriétés est affichée.
jbernard page 8
Création WEB avec DreamweaverMX
4. Inserer une image
Pour insérer une image, d’abord il
faut positionner le curseur à l’endroit
précis où vous désirez insérer
l’image. Dans l’exemple ci-dessous,
le curseur a été placé dans le calque
du haut.
Position du curseur...
1
Sélectionner le bouton
“Image” de la boîte d’outils.
Sélectionner l’image puis
cliquer sur “OK”.
2
3
Voilà l’image a été insérée dans le calque dans lequel avait été placé le curseur.
jbernard page 9
Création WEB avec DreamweaverMX
5. Creer un lien sur une
image
1
Pour créer un lien sur une image, la
technique est très semblable à celle
qui permet d’insérer un lien sur un
texte.
Sélectionner d’abord l’image qui
déclenchera le lien.
Dans la boîte des propriétés de l’image, cliquer sur l’icone en forme de
chemise, vis-à-vis la case Lien.
2
Sélectionner le fichier puis cliquer sur Sélectionner ou taper l’adresse URL
puis cliquer sur Sélectionner.
3
ou
4
3
jbernard page 10
Création WEB avec DreamweaverMX
6. Inserer une image
avec zones sensibles
Vous pouvez insérer plus d’un lien sur
une même image. Il s’agit alors de
zones réactives qui permettent,
chacune, d’activer un lien particulier.
Pour insérer une zone réactive sur
une image, il faut d’abord sélectionner l’image en question.
1
2
Puis dans la boîte des propriétés, sélectionner le type de
zones réactives.
Dessiner sur l’image la zone réactive en glissant la souris.
3
Dans la boîte de la zone réactive, inscrire le lien. S’il s’agit
d’un fichier local (un de vos fichiers), vous pouvez le sélectionner avec l’icone chemise comme vu précédemment.
Vous pouvez insérer autant de zones réactives que votre
image peut physiquement en contenir.
4
jbernard page 11
Création WEB avec DreamweaverMX
7. Inserer une image
survolee
Une image survolée c’est tout simplement une image qui s’affiche à la place d’une autre lorsque la souris la survole.
Insérer une image survolée revient
presque au même que d’insérer une
image ordinaire. D’abord positionner
votre curseur dans la cellule où vous
désirez insérer votre image survolée.
Sélectionner ensuite le bouton le menu
Insertion>Images interactives>Image
survolée .
La différence est évidemment qu’il faut inscrire
deux images au lieu d’une seule. La première
image sera celle qui sera affichée par défaut.
La seconde est celle qui s’affiche à sa place
lors du survol de la souris.
2
Pour insérer vos images, cliquer sur le bouton
Parcourir puis sélectionner l’image...
3
4
Vous procéder de façon identique pour
la seconde image.
Dans la case “si cliquée, aller à l’URL”,
inscrivez l’adresse du lien ou le sélectionner avec le bouton Parcourir
5...
Cliquer ensuite sur OK.
jbernard page 12
Création WEB avec DreamweaverMX
8. Inserer un lien vers
un courrier
electronique
Insérer un lien de type courriel est tout aussi simple que d’insérer un lien
hypertexte.
Positionner le curseur où vous désirez construire le lien.
Sélectionner le bouton “lien mail” de la boîte d’outils.
Dans la boîte “lien message électronique”, inscrire le texte sur lequel sera créé
le lien puis inscrire l’adresse de messagerie.
Cliquer sur OK.
Vous pouvez également construire un lien sur un mot existant, un
groupe de mots ou sur une image.
Sélectionner le mot, le groupe de mots ou l’image qui serviront
de base au lien de type courriel.
Sélectionner le bouton “lien mail” de la boîte d’outils.
Inscrire l’adresse électronique dans la boîte de texte “Adresse email”.
Cliquer sur OK.
jbernard page 13
Création WEB avec DreamweaverMX
9. Apercu dans un
navigateur
Normalement, à l’installation de
Dreamweaver, un fureteur par défaut
est automatiquement défini.
Pour visualiser dans un navigateur,
sélectionner Fichier>Aperçu dans le
navigateur...
Choisir le navigateur en cliquant sur
son nom.
Voici l’aperçu de notre
page dans le navigateur
Internet Explorer...
jbernard page 14
Création WEB avec DreamweaverMX
10. Inserer une ancre
Une ancre sert de repère à la navigation sur une page
web. Grâce aux ancres, vous pouvez permettre à vos
lecteurs de sauter d’une section à une autre de votre page
à l’aide d’un seul clic sans avoir à parcourir l’ensemble de
votre page.
Positon du curseur
L’exemple ci-contre illustre comment insérer une ancre
dans le haut d’une page web puis comment insérer un lien
vers cette ancre à partir du bas de la page. De cette
façon, un utilisateur, rendu en bas de la page, pourra en
un seul clic revenir au tout début de la page.
1
Sélectionner le bouton nommé : ancre nommée
cette ancre puis
2 Nommer
cliquer sur OK.
jbernard page 15
Création WEB avec DreamweaverMX
Une fois l’ancre insérée, il faut créer le lien vers cette
ancre. Il est à noter que plusieurs liens peuvent être
créés sur une même ancre mais qu’un lien ne peut
cibler qu’une ancre.
4
Dans l’exemple ci-contre, le mot “RETOUR” a été
sélectionné comme base de notre lien vers l’ancre.
5
À l’aide de l’icône “CIBLE”, situé à droite de la boîte “Lien”, vous ciblez l’ancre déposée. Il suffit de cliquer sur l’icône
puis de glisser la souris vers le symbole de l’ancre, une ancre marine sur fond jaune. Une fois sur le symbole de
l’ancre, relâcher le bouton de la souris et le nom de l’ancre s’inscrit automatiquement dans la boîte “Lien”.
Vous pouvez également inscrire directement le nom de l’ancre dans la boîte “Lien” précédé d’un #. Dans notre
exemple cela donne #haut.
jbernard page 16