DREAMWEAVER 2 de Macromédia

Transcription

1 DREAMWEAVER 2 de Macromédia Dreamweaver 2 vous permettra de produire des pages Web sans trop de difficultés. Voici quelques consignes de base. 1.1 Introduction Tout d abord, allez dans Dreamweaver en cliquant sur Démarrer, Télématique, Gratuitiels et finalement Dreamweaver. Dreamweaver 2 de Macromédia Centre Le Goéland 2002

2 Vous devez ensuite créer un dossier dans lequel toutes les pages et toutes les images ayant un lien avec le site Web se retrouvent. Cette étape est extrêmement importante, car les liens et les images risquent très fortement de ne pas être chargés par le navigateur lors de la navigation. 2 Allez dans Fichier et Enregistrer sous. Vous allez cliquer sur l icône : Créer un nouveau dossier (Nommez-le pageweb) Cliquez ensuite sur ce nouveau dossier et enregistrez votre première page sous le nom : index.html (nom qu on donne habituellement à la première page d un site Web) 1.2 Propriétés de la page Pour modifier les propriétés de la page: Dans le menu Modifier, sélectionnez l item Propriétés de la page

3 Vous aurez la fenêtre suivante : 3 1) Il faut donner un titre significatif qui est en lien avec le sujet de la page Web. Il servira éventuellement au moteur de recherche pour trouver votre page à travers la multitude de pages disponibles sur le Web. 2) Vous pouvez aussi mettre une image comme arrière-plan. Dans un tel cas, assurez-vous que votre image ne nuise pas à la navigation. Elle ne devra donc pas être trop lourde en Ko. 3) Vous pouvez également modifier la couleur de fond de votre page, la couleur du texte, du lien, des liens visités et des liens actifs en cliquant sur ces boutons. Choisissez des couleurs qui contrastent bien avec la couleur de fond de la page ou l image de fond. Note : Vous pouvez consulter le document : Création d une base Web : règles de base. Il vous donnera des critères à respecter dans le choix des couleurs.

4 4 2. Texte (mise en page) 2.1 Texte Pour insérer du texte, il suffit de le saisir directement au clavier ou par collage (copier, coller). Vous pouvez changer l aspect visuel du texte à partir de l inspecteur de propriétés. Choisir un format prédéfini Changer la police Couleur du texte Taille du texte Alignement (gauche, centre, droit) Italique Gras Pour créer un lien URL Liste à puces Liste à numéros Pour créer un lien URL (naviguer vers ) Retrait (gauche, droite) 2.2 En-têtes Dans la section Format de l inspecteur de propriétés, 6 choix d en-têtes prédéfinies vous sont offerts. Le fait de les utiliser assure à votre site Web une certaine uniformité. À noter que la taille des caractères de l en-tête «1» est plus grande que celle de l en-tête «6». 2.3 Puces et numéros Pour créer une liste à puces ou à numéros, il vous suffit de cliquer sur l icône représentant le type de liste désirée. Liste à numéros Liste à puces Pour changer le type ou le style de votre liste, cliquez sur Élément de la liste, la fenêtre suivante s affichera alors, vous permettant d apporter les modifications désirées.

5 5 Permet de choisir l aspect ou le style de la liste choisie Permet de choisir le type de liste (Simple, numéroté, menus ) Pour modifier les propriétés de la liste au complet Pour modifier les propriétés de la liste à partir d un élément

6 3. Image et Tableau Insérer une image Il est possible d insérer des images à vos pages Web. Les images que vous allez insérer devront se situer dans le même répertoire que votre projet Dreamweaver. Vous pouvez aussi créer un sous-répertoire images pour les classer. Pour insérer une image 1. Placez le curseur là où vous voulez que l image apparaisse dans la page. 2. Dans le menu Insertion, sélectionnez l item Image. 3. La fenêtre suivante s affiche. Recherchez le fichier image que vous voulez insérer en cliquant sur son icône, puis sur Sélectionner.

7 7 4. Si l image que vous voulez insérer ne se trouve pas dans le même répertoire que votre projet, cette fenêtre s affichera. Cliquez sur Oui, puis enregistrez- là dans le même répertoire que votre projet. Vous pouvez ensuite modifier les propriétés de l image à l aide de la fenêtre des propriétés. Largeur (L) et hauteur (H) de l image Nom de la zone d image Alignement de l image dans la page Pour créer un lien URL (naviguer vers ) Marges verticale (L) et horizontale (H) de l image Pour créer un lien URL Largeur du cadre de l image

8 3.2 Insérer un tableau 8 Pour insérer un tableau 1. Placez le curseur là où vous voulez que le tableau apparaisse dans la page. 2. Dans le menu Insertion, sélectionnez l item Tableau 3. La fenêtre suivante s affiche. Il suffit alors d entrer les dimensions désirées pour le tableau. Nombre de lignes et de colonnes Largeur du tableau Largeur de la bordure

9 9 Vous pouvez modifier l aspect visuel de votre tableau à l aide de l inspecteur de propriétés. 1. Sélectionnez tout le tableau pour afficher l inspecteur de propriétés du tableau en entier. Nombre de lignes et de colonnes Alignement du tableau dans la page Nom du tableau Largeur de Dimensions du tableau la bordure Marges horizontale et verticale Couleur d arrière-plan Couleur de la bordure Couleur de la bordure sombre, claire Image d arrière-plan 2. Sélectionnez une seule ou plusieurs cellules pour afficher l inspecteur de propriétés de celles-ci. Fractionner les cellules Marges Image d arrière-plan Fusionner les cellules Couleur d arrière-plan Est une cellule au format Couleur de la bordure en-tête lorsque coché

10 10 4. Hyperliens Les hyperliens permettent de changer de page dans un même site, d aller dans un autre site Internet ou de se rendre à un endroit spécifique dans la même page. Habituellement, les hyperliens sont représentés par du texte souligné. Pour ne pas induire les internautes en erreur, n utilisez jamais le souligné dans la mise en page de votre texte (réservezle pour les hyperliens). 4.1 Création d un lien vers un autre site Web 1. Dans la fenêtre Document, sélectionnez le texte ou l image qui conduira à un site Web externe. 2. Dans la fenêtre des propriétés, tapez l adresse complète du site Web dans le champ Lien. Cette adresse débute toujours par (adresse absolue). 4.2 Création d un lien vers une autre page que vous avez déjà conçue 1. Dans la fenêtre Document, sélectionnez le texte ou l image qui conduira vers une autre page de votre site. 2. Dans la fenêtre des propriétés, cliquez sur l'icône de dossier pour naviguer jusqu'au fichier désiré et sélectionnez-le.

11 11 3. Le chemin d'accès du fichier s'affiche dans le champ URL. Utilisez l'option Relatif à pour faire en sorte que le chemin soit relatif au document ou à la racine du site. Cliquez sur Sélectionner. Pour éviter des problèmes d adresses lors d un changement de serveur, choisissez Relatif au document. 4.3 Création d un lien de courrier électronique 1. Sélectionnez du texte ou une image dans la fenêtre Document. 2. Dans l'inspecteur de propriétés, tapez mailto: suivi par une adresse de courriel dans le champ Lien. 3. Appuyez sur Entrée. 4.4 Création d'un lien vers une ancre nommée Les ancres nommées marquent des positions spécifiques dans un document. Utilisez des ancres nommées pour sauter à une position marquée dans le document en cours ou pour créer un lien vers une position marquée dans un autre document. Avant de créer le lien vers une ancre, il faut créer l ancre. A. Pour créer une ancre nommée 1. Dans la fenêtre Document, placez le curseur là où vous voulez insérer l'ancre nommée. 2. Procédez de l'une des manières suivantes : Dans la barre de menu, choisissez Insertion > Ancre nommée. Ou Dans la barre d objets, sélectionnez Invisibles dans le menu déroulant en haut de la

12 palette d'objets, puis cliquez sur le bouton Ancre. 3. Dans la boîte de dialogue qui s'affiche, tapez un nom pour l'ancre. 12 Dans cet exemple, le nom de l ancre est amelie (on me met jamais de caractères accentués dans un nom d ancre). B. Pour créer un lien vers une ancre nommée 1. Sélectionnez un texte ou une image dans la fenêtre Document. 2. Dans l'inspecteur de propriétés, tapez le signe dièse (#) et le nom de l'ancre dans le champ Lien. Par exemple : 5. Aperçu dans le navigateur Pour vérifier votre document et le bon fonctionnement des hyperliens, affichez un aperçu du document. 1. Cliquez sur Fichier > Aperçu dans le navigateur. Vous pouvez également appuyer sur la touche F Cliquez sur le texte souligné pour vérifier si les hyperliens que vous avez créés sont fonctionnels. Cliquez sur les images qui portent un hyperlien (le curseur deviendra une petite main si l image possède un hyperlien).

13 13 6. Création d une carte graphique Une carte graphique est une image unique à laquelle sont affectés différents hyperliens pour définir les régions de l'image ou des zones sensibles. Pour créer une carte graphique 1. Sélectionnez l'image et cliquez sur le bouton Carte dans l'inspecteur de propriétés. Pour voir le bouton Carte, vous devrez peut-être cliquer sur la flèche d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés. 2. Tapez un nom pour la carte dans le champ approprié. 3. Sélectionnez l'outil cercle ou carré et faites-le glisser au-dessus de l'image pour créer une zone sensible de la forme d'un cercle ou d'un carré, ou sélectionnez l'outil de polygone et définissez une zone sensible de forme irrégulière en cliquant une fois pour chaque coin et deux fois pour fermer la forme. 4. Tapez le chemin de l'url de la zone sensible dans la boîte Lien, ou cliquez sur l'icône de dossier pour rechercher et sélectionner un fichier. 5. Dans le champ secondaire, tapez le texte de remplacement qui est affiché pour la zone sensible dans les navigateurs ne traitant que du texte. Certains navigateurs affichent ce texte comme une info-bulle lorsque l'utilisateur place la souris au-dessus de la zone sensible. 6. Répétez les étapes 3 à 5 jusqu'à ce que vous ayez défini toutes les zones sensibles, puis cliquez sur OK.

14 7. Création d'un effet de survol 14 Un effet de survol est une image qui change lorsque le curseur se déplace au-dessus d'elle. Un effet de survol est constitué de deux images : l'image principale (celle affichée lorsque la page se charge) et l'image renouvelée (celle qui apparaît lorsque le curseur se déplace au-dessus de l'image principale). Très important : l image principale et l image renouvelée doivent avoir exactement les mêmes dimensions. Pour créer un effet de survol 1. Placez le curseur dans la fenêtre Document, là où vous souhaitez que l'effet de survol apparaisse. 2. Effectuez l'une des opérations suivantes : Cliquez sur le bouton Image retournée dans la barre d objets. Ou Choisissez Insertion > Image retournée dans la barre de menus. 3. Dans la boîte de dialogue qui apparaît, entrez les informations suivantes : a) Tapez le chemin et le nom de fichier de l'image originale dans le champ Image originale, ou recherchez et sélectionnez une image. b) Donnez un nom à cette image. c) Tapez le chemin et le nom de fichier de l'image de zone sensible dans le champ Image renouvelée, ou recherchez et sélectionnez une image. d) Pour créer un lien, remplacez le signe # du champ Lien par un chemin et un nom de fichier, ou recherchez et sélectionnez un fichier.

15 15 e) Pour que Dreamweaver effectue le préchargement des images dans la mémoire cache du navigateur, sélectionnez l'option Précharger les images. 4. Cliquez sur OK. Pour tester un effet de survol 1. Choisissez Fichier > Aperçu dans le navigateur. 2. Dans le navigateur, déplacez le curseur au-dessus de l'image principale. L'image principale devrait être remplacée par l'image de survol (image renouvelée).