Dreamweaver MX 8

2008
INTRODUCTION
Master 1
[Tribet Hervé]
01/02/2008
[DREAMWEAVER MX 8 ]
1- Définition du site local
Dreamweaver gère les différentes pages incluses dans un site défini ;
s'il s'agit d'une création de site, utiliser la commande :
Sites > Nouveau site ...
Sinon, utiliser :
Sites > Modifier les sites ...
2 – Définition du site distant
Dreamweaver gère les échanges entre le site local et le site distant ;
s'il s'agit d'une création de site, utiliser la commande :
Sites > Nouveau site ...
Sinon, utiliser :
Sites > Modifier les sites ...
2
Introduction
[DREAMWEAVER MX 8 ]
Introduction
Les actions principales en mode "mono-rédacteur" sont
:
placer : transfert d'un fichier du site local vers le
site distant
acquérir : transfert d'un fichier du site distant vers
le site local
3 – Propriétés d’une page
Les propriétés de la page sont :
son titre
son image d'arrière-plan
sa couleur de fond
ses couleurs de texte et couleurs de liens
ses marges
On les obtient et on les modifie avec la commande :
Modifier > Propriétés de la page ...
4 – Mettre en forme le texte
3
[DREAMWEAVER MX 8 ]
Introduction
La mise en forme du texte d'une page web se réalise principalement grâce à la fenêtre de
l'onglet "Propriétés" (Ctrl+F3)
Sélectionner le texte que l'on désire mettre en forme
Appliquer une propriété disponible dans la fenêtre "Propriétés"
5 – Insérer un tableau
Après avoir positionné le curseur à l'emplacement désiré, l'insertion d'un tableau se fait par
la commande :
Insérer > Tableau
La boite de dialogue suivante permet de préciser les éléments de tableau à insérer :
nombre de ligne
nombre de colonnes
largeur (en pourcentage de la page, ou en pixels)
marges intérieures
espace entre les cellules
bordures (largeur en pixels)
4
[DREAMWEAVER MX 8 ]
Introduction
6 – Créer un lien
La création d'un lien hypertexte peut être réalisée sur un texte ou une image à l'aide de la
commande Ctrl+L , ou bien tout simplement dans la fenêtre de l'onglet "Propriétés" :
sélectionner le texte ou l'image sur lequel appliquer le lien
taper Ctrl+L, ou bien cliquer dans la case "lien" de la Fenêtre Propriétés
choisir ou entrer le nom du fichier à lier
Pour un lien externe, entrer la ligne suivante :
pour un site web : http://www.siteweb.tld
pour une adresse de courrier électronique : mailto:[email protected]
Choisir la cible "_blank" si on souhaite ouvrir le lien dans une nouvelle fenêtre.
A. Placer une image, créér un lien.
1. Voici la méthode pour insérer une image et lui donner un
lien.
Cliquez sur le 6ème icône 'Image'.
Dans la boite de dialogue qui s'ouvre, choississez votre image.
Cliquez sur ok.
5
[DREAMWEAVER MX 8 ]
Introduction
2. Pour insérer un lien,
Sélectionner l'image.
cliquez sur le dossier qui se trouve à la droite du mot 'lien' dans la barre des propriétés.
Dans la fenetre qui s'ouvre, sélectionner la page de destination.
cliquez sur ok.
6
[DREAMWEAVER MX 8 ]
Introduction
II. Faire un formulaire.
Commençons , pour cela cliquez sur l'onglet ' formulaire '.
La chose à retenir, c'est qu'un formulaire pour etre valide doit se tenir entre des balises
<form>.
Cliquez donc sur le premier icone.
Pour créér cette balise.
une fois créér, vous pouvez placer les champs de votre formulaire.
mais avant, petit principe de mise en page.
Nous allons créér un tableau.
dans les outils reprendre ' commun ' et cliquez sur insérer un tableau.
Pourquoi placer un tableau, me direz-vous ? simplement pour la beauté de votre page.
Vous définissez le nombre de lignes et de colonnes utiles pour votre formulaire.
Pour notre exemple :
Lignes :
4
Colonnes :
4
largeur :
700
Bordure :
0
Marge intérieure :
3
espacement des cellules
3
Cliquez sur ok
Vous devez obtenir ce tableau, si vous voulez le modifier, vous pouvez le faire aisément,
sélectionner le tableau et modifier les caractéristiques dans la palette 'propriétés'.
7
[DREAMWEAVER MX 8 ]
Introduction
Placez à présent les éléments
placez le curseur sur la 1 ère cellule et indiquez 'nom' appuyez sur la touche tabulation pour
changer de cellule (elle se trouve à gauche de votre touche A).
Placez un champs texte ( 2ème icone de la barre 'formulaire'.) de nouveau tabulation tapez '
prénom'.
Ainsi de suite pour le formulaire.
Placez le bouton envoyer avant avant dernier icone.
Vous avez remarqué que le bouton envoyer se trouvait au milieu du tableau.
Pour cela fusionner les colonnes de la dernière ligne. sélectionner les et cliquez sur le bouton
certi de rouge sur l'image de gauche.
Votre formulaire est pret, enfin pas tout à fait.
Il nous faut à présent définir les champs.
sélectionner le champ à droite du nom et dans la palette des propriétés nommez le ' nom '
8
[DREAMWEAVER MX 8 ]
Introduction
Ainsi de suite pour les autres champs de formulaire.
Votre formulaire est enfin pret.
Définnissez la destination dans ce cas ci : votre email.
sélectionnez le formulaire :
cliquez sur les lignes rouges pointillées ou dans le bas de la page (sur la balise <form>)
Dans la palette des propriétés du formulaire, completez :
Action :
mailto:[email protected] (ajoutez votre email)
Formulaire :
Le nom du formulaire.
Enctype :
text/plain (pour qu'il soit lisible dans l'email).
III. faire un simple roll over.
Un roll over, qu'est-ce que c'est ?
C'est une image qui se change au passage de la souris, souvent utiliser dans les menus.
Cliquez sur le 10ème icone, Vous aurez une fenetre qui s'ouvre avec :
Nom de l'image : pour donner un nom à votre image
Image originale : sélectionner l'image qui apparait
Image survolée : quand on passe avec la souris sur l'image, la deuxième image apparait,
sélectionnez la 2ème image.
Texte secondaire : le texte qui apparait si on reste quelques sec. sur l'image.
si cliqué, allez à l'URL : créér un lien.
9
[DREAMWEAVER MX 8 ]
Introduction
IV. Creer une feuille de style
Commençons par créér un nouveau document. ctrl+ n -------- css.
Enregistrer le document.
Dans l'onglet création , style css : cliquer sur l'icône attacher feuille de style.
reprenez le document que vous venez d'enregistrer, la plupart du temps, placer vos css dans
un dossier css.
Ensuite cliquer sur ' nouveau style css '
10
[DREAMWEAVER MX 8 ]
Introduction
Définissez votre style, la typo, la couleur, la taille, les espacements, etc......
Pour l'appliquer sur la page, sélectionner le texte et cliquez sur le style.
V. Créér un menu déroulant.
Pour ce faire, nous avons besoin de créér des calques
Un calque que nous nommerons menu, un autre que nous nommerons infos.
Dans le calque 'menu', plaçons le texte " informations " , sélectionnez le et dans la partie lien
placer le symbole '#' .
Dans le second calque 'infos' , plaçons les éléments du sous-menus dans un tableau pour la
mise en page , ex. : générales, sportives, diverses.
11
[DREAMWEAVER MX 8 ]
Introduction
à chaque fois crééz un faux lien avec le symbole '#' ( un vrai si vous le réaliser , bien sur ).
Sélectionner le texte ' informations ' dans le calque 'menu'.
Ensuite, aller dans le panneau 'création' et cliquez sur le petit '+'
sélectionner le comportement ' afficher/masquer les calques '.
Une fenêtre s'ouvre à vous : Avec le nom des calques 'infos' et 'menu' , cliquez sur le calque
'infos" et cliquez sur afficher, puis sur ok, sélectionner l'évennement 'on mouse over'.
Sélectionner le tableau dans lequel vous avez placé vos éléments dans le calque 'infos' ,
Ensuite, aller dans le panneau 'création' et cliquez sur le petit '+'
sélectionner le comportement ' afficher/masquer les calques '.
Une fenêtre s'ouvre à vous : sélectionner le calque 'infos' cliquez sur afficher et ok.
sélectionner l'évènnement 'on mouse over'.
Refaite la meme étape mais prenez 'masquer' et 'on mouse out'.
12
[DREAMWEAVER MX 8 ]
13
Introduction