mx - commission scolaire de laval

jbernard page 1

Création WEB avec DreamweaverMX

So

mm

air

eS

om

ma

ire .preparation.preparation

.mise en forme.mise en forme

.liens hypertextes.liens hypertextes

.images.images

.liens sur images.liens sur images

.images avec zones.images avec zonessensiblessensibles.images survolees.images survolees.liens de type courriel.liens de type courriel.apercu dans le navigateur.apercu dans le navigateur.ancre.ancre

Creation Web avecCreation Web avec

DreamweaverDreamweaverMXMX

InitiationInitiation

jbernard page 2


1. Preparer le site1. Preparer le site

D’abord et avant tout, il est recom-mandé de construire l’arborescencede votre site à partir de l’ExplorateurWindows. Il est suggéré d’utiliserl’arborescence type suivante:

+Nom de votre site +Images +fichiers de travail +videos +animations

11

22 Lorsque votre arborescence est complétée, démarrer dreamweaver. Sélectionner Site>Nouveau site depuisla fenêtre Dreamweaver.

jbernard page 3


Inscrire le nom de votre site dans la première case de texte puis sélectionner le répertoire que vous venez decréer tel que décrit dans le texte ci-haut.

Cliquer ensuite sur OK

44

Maintenant que votre site est défini, revenez à la page d’édition de Dreamweaver. Si aucun document n’estouvert, vous pouvez en ouvrir un nouveau directement à partir de l’écran de gestion des sites de Dreamweaver viale menu Fichier>Nouveau fichier. Inscrire un nom de fichier dans la case réservée à cet effet. S’il s’agit de votrepage d’accueil, le nom devrait être index.htm. Cela rendra l’adressage électronique plus facile pour le visiteur.

11

22

jbernard page 4


Inscrire dans la case “Titre”, le nom de cette page. Le nom de la pagen’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 descaractè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’affi-cher la grille. Cette grille est utile pour aligner les objets, les images et le texte. Elle ne sera pas visible dans unfureteur.

Pour afficher la grille, sélectionner Affichage>Grille>Afficher la grille

Maintenant que votre fichier est nommé, ouvrez-le en double cliquant dessus. Vous êtes maintenant enmode édition.

jbernard page 5


Les pages html peuvent contenir une couleur defond ou une image de fond. Vous pouvez égale-ment définir la couleur du texte, la couleur desliens, actifs, visités ou non. Vous pouvez égale-ment définir des marges comme on le fait dans unlogiciel de traitement de texte.

Pour modifier ces attributs de page, sélectionnerModifier>Propriétés de la page.

Dans la case “Image d’arrière-plan”vous pouvez spécifier une imaged’arrière-plan.

Les cases de couleurs en dessousvous permettent de modifier lacouleur de l’item spécifié.

Les cases des marges vous permet-tent d’indiquer les valeurs desmarges à inscrire. Vous ne pouvezspécifier que les marges du haut etles marges de gauche.Dreamweaver affiche 4 casespuisque Netscape et Explorertraitent différemment les attributsde marges. Les cases de gauchesont valables pour Netscape etcelles de droite sont valables pourExplorer.

Cliquer sur Ok lorsque vous avezterminé.

jbernard page 6


2. Mise en forme2. Mise en forme

Dreamweaver propose une aide à la mise en forme nommée “tableau de miseen forme”. L’utilisation des ces tableaux de mise en forme peut s’avérer arduepour 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 à votrepage 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 pouvezinscrire dans une page puis déplacer le calque ou le redimensionner pourrépondre à vos critères de mise en page...

Pour insérer un calque, sélectionner le bouton “Dessiner un calque” de la boîteà outils Commun.

Cliquer sur la page à l’endroit où vous désirez insérer le calquepuis glisser la souris. Un rectangle s’affiche à l’écran...

Relâcher le bouton de la souris lorsque le calque a atteint lesdimensions désirées.

11

22

jbernard page 7


Vous pouvez dessiner autant de calques que vous désirez. Ilfaut se rappeller cependant, qu’un calque ne peut en contenir unautre 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, ta-bleaux, etc.

Pour modifier les attributs d’un calque, le déplacer ou leredimensionner, 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 couleurde fond, l’image de fond et d’autres attributs du calque sélec-tionné.

Exemple d’une boîte de propriétés d’un calque...

La figure ci-contre illustre un exem-ple de l’utilisation des calques. Lecalque supérieur contient le titre. Lecalque de gauche contiendra la tabledes matières du site. Le calque dedroite contient le texte et les imagesdu site.

Chaque calque contient donc géné-ralement un contenu spécifique quel’on peut déplacer et redimensionnerfacilement avec la boîte de proprié-tés entre autres.

jbernard page 8


3. Creer un lien3. Creer un lien

Vous pouvez créer un lien sur un texte ou sur une image ou sur un objet. Pourcréer un lien sur un texte, il faut d’abord sélectionner ce texte. Ce texte seraensuite 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ésest affichée (habituellement dans le bas de l’écran). Si elle n’est pas affichée,sélectionner Fenêtre>Propriétés.

Puis dans la boîte des propriétés, vis-à-vis la case Lien, sélectionner l’iconeen forme de chemise afin d’atteindrele fichier qui constitue la cible du lien.

S’il s’agit d’une page surInternet, il vous faudra inscrirel’adresse URL au complet, in-cluant http://

Ex. http://www.cslaval.qc.ca

Une fois le fichier sélectionné, cliquer sur “OK”. Voilà le lienest activé. Le texte est souligné et la couleur définie dansvos propriétés est affichée.

11

22

33

Sélectionner le texte sur lequel sera créé le lien.

jbernard page 9


4. Inserer une image4. Inserer une image

Pour insérer une image, d’abord ilfaut positionner le curseur à l’endroitprécis où vous désirez insérerl’image. Dans l’exemple ci-dessous,le curseur a été placé dans le calquedu haut.

Sélectionner le bouton“Image” de la boîte d’outils.

Sélectionner l’image puiscliquer sur “OK”.

Voilà l’image a été insérée dans le calque dans lequel avait été placé le curseur.

11

22

33

Position du curseur...

jbernard page 10


5. Creer un lien sur une5. Creer un lien sur uneimageimage

Dans la boîte des propriétés de l’image, cliquer sur l’icone en forme dechemise, vis-à-vis la case Lien.

11

22

33

44

Pour créer un lien sur une image, latechnique est très semblable à cellequi permet d’insérer un lien sur untexte.

Sélectionner d’abord l’image quidéclenchera le lien.

Sélectionner le fichier puis cliquer sur Sélectionner ou taper l’adresse URLpuis cliquer sur Sélectionner.

33

ouou

jbernard page 11


6. Inserer une image6. Inserer une imageavec zones sensiblesavec zones sensibles

Vous pouvez insérer plus d’un lien surune même image. Il s’agit alors dezones réactives qui permettent,chacune, d’activer un lien particulier.

Pour insérer une zone réactive surune image, il faut d’abord sélection-ner l’image en question.

Puis dans la boîte des propriétés, sélectionner le type dezones réactives.

Dessiner sur l’image la zone réactive en glissant la souris.

Dans la boîte de la zone réactive, inscrire le lien. S’il s’agitd’un fichier local (un de vos fichiers), vous pouvez le sélec-tionner avec l’icone chemise comme vu précédemment.

Vous pouvez insérer autant de zones réactives que votreimage peut physiquement en contenir.

11

22

33

44

jbernard page 12


7. Inserer une image7. Inserer une imagesurvoleesurvolee

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 revientpresque au même que d’insérer uneimage ordinaire. D’abord positionnervotre curseur dans la cellule où vousdésirez insérer votre image survolée.

Sélectionner ensuite le bouton le menuInsertion>Images interactives>Imagesurvolée .

La différence est évidemment qu’il faut inscriredeux images au lieu d’une seule. La premièreimage sera celle qui sera affichée par défaut.La seconde est celle qui s’affiche à sa placelors du survol de la souris.

Pour insérer vos images, cliquer sur le boutonParcourir puis sélectionner l’image...

Vous procéder de façon identique pourla seconde image.

Dans la case “si cliquée, aller à l’URL”,inscrivez l’adresse du lien ou le sélec-tionner avec le bouton Parcourir

Cliquer ensuite sur OK.

22

44

33

5...5...

jbernard page 13


8. Inserer un lien vers8. Inserer un lien versun courrierun courrierelectroniqueelectronique

Insérer un lien de type courriel est tout aussi simple que d’insérer un lienhypertexte.

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, ungroupe de mots ou sur une image.

Sélectionner le mot, le groupe de mots ou l’image qui servirontde 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 e-mail”.

Cliquer sur OK.

jbernard page 14


9. Apercu dans un9. Apercu dans unnavigateurnavigateur

Normalement, à l’installation deDreamweaver, un fureteur par défautest automatiquement défini.

Pour visualiser dans un navigateur,sélectionner Fichier>Aperçu dans lenavigateur...

Choisir le navigateur en cliquant surson nom.

Voici l’aperçu de notrepage dans le navigateurInternet Explorer...

jbernard page 15


10. Inserer une ancre10. Inserer une ancre

Une ancre sert de repère à la navigation sur une pageweb. Grâce aux ancres, vous pouvez permettre à voslecteurs de sauter d’une section à une autre de votre pageà l’aide d’un seul clic sans avoir à parcourir l’ensemble devotre page.

L’exemple ci-contre illustre comment insérer une ancredans le haut d’une page web puis comment insérer un lienvers cette ancre à partir du bas de la page. De cettefaçon, un utilisateur, rendu en bas de la page, pourra enun seul clic revenir au tout début de la page.

Sélectionner le bouton nommé : ancre nommée

Nommer cette ancre puiscliquer sur OK.

11

22

Positon du curseur

jbernard page 16


Une fois l’ancre insérée, il faut créer le lien vers cetteancre. Il est à noter que plusieurs liens peuvent êtrecréés sur une même ancre mais qu’un lien ne peutcibler qu’une ancre.

Dans l’exemple ci-contre, le mot “RETOUR” a étésélectionné comme base de notre lien vers l’ancre.

À 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ônepuis de glisser la souris vers le symbole de l’ancre, une ancre marine sur fond jaune. Une fois sur le symbole del’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 notreexemple cela donne #haut.

44

55

mx - commission scolaire de laval

Documents