DREAMWEAVER 2 de Macromédia

Transcription

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.
Ateliers d'initiation à l'informatique
Dreamweaver 2 de Macromédia
Ghislaine Bourque et Jean-Bernard Pelletier
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.
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…
Dreamweaver 2
3
Vous aurez la fenêtre suivante :
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.
Dreamweaver 2
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.
Dreamweaver 2
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
Dreamweaver 2
6
3. Image et Tableau
3.1 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.
Dreamweaver 2
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
Marges verticale (L) et horizontale
(H) de l’image
Dreamweaver 2
Alignement de l’image dans la page
Pour créer un lien URL (naviguer vers…)
Largeur du cadre de l’image
Pour créer un lien URL
8
3.2 Insérer un tableau
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
Dreamweaver 2
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.
Alignement du tableau dans la page
Nombre de lignes et de colonnes
Nom du tableau
Largeur de
Dimensions du tableau
la bordure
Marges horizontale et verticale
Couleur d’arrière-plan
Couleur de la bordure sombre, claire
Couleur de la bordure
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
Fusionner les cellules
Dreamweaver 2
Marges
Image d’arrière-plan
Couleur d’arrière-plan
Est une cellule au format
Couleur de la bordure
en-tête lorsque coché
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 http:// (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.
Dreamweaver 2
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
Dreamweaver 2
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.
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 F12.
2. 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).
Dreamweaver 2
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.
Dreamweaver 2
14
7. Création d'un effet de survol
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.
Dreamweaver 2
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).
Dreamweaver 2

DREAMWEAVER 2 de Macromédia

Transcription

Documents pareils

Créez un site avec Dreamweaver (exercice)

Comment supprimer un dossier créé via eTutelle

Procédure pour consulter le compte annuel de la taxe scolaire en

Formation Dreamweaver Initiation

Programme de formation DreamWeaver initiation

Accès au serveur Proxy de la bibliothèque avec Vista et Windows 7

Comment créer des sous-dossiers dans un dossier personnel

Voir le plan d`étude de cette formation

Programme de formation Dreamweaver Initiation

ACTIVATION PARTAGE DE CONNEXION