Création WEB avec DreamweaverMX

Transcription

1 Creation Web avec DreamweaverMX MX Initiation Sommaire.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

2 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 Lorsque votre arborescence est complétée, démarrer dreamweaver. Sélectionner Site>Nouveau site depuis la fenêtre Dreamweaver. jbernard page

3 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 jbernard page 3

4 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

5 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

6 . 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. 1 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... 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 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

7 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

8 3. Creer un lien Création WEB avec DreamweaverMX 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. 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 3 Ex. 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

9 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. 3 Voilà l image a été insérée dans le calque dans lequel avait été placé le curseur. jbernard page 9

10 5. Creer un lien sur une image Création WEB avec DreamweaverMX 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. 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

11 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 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

12 7. Inserer une image survolee Création WEB avec DreamweaverMX 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. Pour insérer vos images, cliquer sur le bouton Parcourir puis sélectionner l image 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 Cliquer ensuite sur OK jbernard page 1

13 8. Inserer un lien vers un courrier electronique Création WEB avec DreamweaverMX 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 e- mail. Cliquer sur OK. jbernard page 13

14 9. Apercu dans un navigateur Création WEB avec DreamweaverMX 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

15 10. Inserer une ancre Positon du curseur 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. 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 Nommer cette ancre puis cliquer sur OK. jbernard page 15

16 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