objectif général : Prendre en main DreamWeaver objectifs opérationnels : - Paramétrer un site local - Publier du texte - Lister du contenu - Lier des contenus - Afficher une image - Établir un tableau - Présenter un formulaire - Positionner et régler l’affichage d’un contenu - Intégrer du son et de la vidéo

1. Initiation à
Dreamweaver CS3
M. DIENG Abdoulaye

2. Objectif général
Prendre en main DreamWeaver
2

3. Les objectifs opérationnels
 Paramétrer un site local
 Publier du texte
 Lister du contenu
 Lier des contenus
 Afficher une image
 Établir un tableau
 Présenter un formulaire
 Positionner et régler l’affichage d’un contenu
 Intégrer du son et de la vidéo
3

4. Le sommaire
1. Présentation de DW
2. L’interface de DW
3. Paramétrer un site local
4. Création d’une page
5. Le texte
6. Les listes
7. Les liens
8. Les propriétés d’une page
9. Les images
10. Les tableaux
11. Les formulaires
12. Les calques
13. Le son et la vidéo

5. Présentation de DreamWeaver
• Adobe Dreamweaver (anciennement Macromedia
Dreamweaver et racheté en décembre 2005) est un éditeur
de site web de type WYSIWYG (tel affichage, tel résultat).
• Dreamweaver offre deux modes de conception:
– « mode création » permettant d'effectuer la mise en page
directement à l'aide d'outils simples, comparables à un logiciel
de traitement de texte.
– « mode code » permettant d'afficher et de modifier
directement le code (HTML ou autre) qui compose la page.
• Dreamweaver offre la possibilité de :
– concevoir des feuilles de style;
– développer des applications dynamiques ;
– gérer un site.
• L’objectif de ce cours est la découverte de Dreamweaver
CS3 afin de construire un site Web.

6. Interface de Dreamweaver

7. Paramétrer un site local (1/3)

8. Paramétrer un site local (2/3)

9. Paramétrer un site local (3/3)
1) Cliquer sur l’onglet « Avancé »
2) Donner un nom au site
3)Mettre le chemin absolue du site
4) Valider avec OK

10. Création d’une page
1) Click droit sur la racine du site
2) Choisir « Nouveau fichier » du
menu contextuel
3) Renommer la page
4) Double click sur la page

11. Le texte
présentation
 Le texte est le moyen le plus courant pour transmettre un
message sur une page web.
 Un texte peut être composé d'un titre et de plusieurs
paragraphes annoncés par des sous-titres.
 Sans oublier les degrés d’importance de certains mots, les
abréviations, les acronymes et la mise en indice ou en exposant.

12. Le texte
insertion
Gras et italique Insistances forte
et raisonnable
paragraphe
Citation de
paragraphe
Texte pré-formaté
En-têtes de
niveaux 1, 2 et 3
Texte sélectionné abréviation acronyme
Autres caractères

13. Les listes
présentation
• Une liste est une suite de données généralement simples.
• Une liste ne doit pas être contenue dans un paragraphe mais
peut être annoncée par celui-ci.
• Il y’a trois types de listes:
– Liste non-ordonnée utilisée lorsqu'il n'y a pas d'ordre
prédéfini pour les items.
– Liste numérotée utilisée lorsque les items sont ordonnées.
– Liste de définition utilisée pour l'affichage de termes
accompagnés de leurs définitions respectives.

14. Les listes
insertion
Liste de définition
Terme de définition
Description
de définition
Liste non ordonnée Élément de listeListe ordonnée

15. Les liens
présentation
 Les liens hypertextes sont l'essence même du World Wide
Web, qui n'existerait pas s'il était impossible de naviguer d'un
contenu à l'autre.
 Cliquer sur un lien permet de naviguer vers :
– un autre endroit d’une même page Web ;
– une autre page Web du même site Web
– un document quelconque
– un autre site web
– un autre service d’Internet
 En général, un lien est indiqué par du texte souligné ou par un
changement d’apparence du pointeur de la souris.
 Dans un navigateur, le passage du pointeur sur un lien fait
afficher la cible sur la barre d’état

16. Les liens
vers un autre site
1) Sélectionner le texte
du futur lien
2) Choisir l’onglet « Commun »
3) Cliquer sur la chaîne
4) Saisir l’adresse du site
5) Valider

17. Les liens
avec une adresse mail
1) Sélectionner le texte
du futur lien
2) Choisir l’onglet « Commun »
3) Cliquer sur l’enveloppe
4) Saisir l’adresse électronique
5) Valider

18. Les liens
vers un autre document du site
1) Sélectionner le texte
du futur lien
2) Choisir l’onglet « Commun »
3) Cliquer sur la chaîne
4) Aller chercher le document
5) Valider

19. Les liens
vers une partie du document (1/2)
1) Positionner le curseur avant la
partie ciblée
2) Cliquer sur l’ancre de l’onglet « Commun »
3) Nommer ou identifier la partie ciblée
4) Valider

20. Les liens
vers une partie du document (2/2)
1) Sélectionner le texte
du futur lien
2) Saisir le caractère "#" suivi
du nom de la partie ciblée
Symbole de la partie
ciblée ou ancre

21. Propriétés de la page
présentation
Il s’agit de définir les propriétés:
• de l’avant-plan, de l’arrière-plan, de marge, etc.
Pour définir les propriétés de la page :
• Cliquer sur le menu « Modifier » puis choisir « Propriétés de la
page »
• Utiliser le raccourci « Ctrl+J »

22. Propriétés de la page
texte, arrière-plan et marges
Cliquer sur la flèche
pour choisir une
couleur
Cliquer sur la flèche
pour choisir une
police

23. Propriétés de la page
les liens
Cliquer sur le menu
« Liens »

24. Propriétés de la page
les en-têtes
Cliquer sur le menu
« En-têtes »

25. Propriétés de la page
titre et codage
Cliquer sur le menu
« Titre/codage »

26. Propriétés de la page
le tracé de l’image
• Un tracé d'image est une image qui apparaît à l'arrière-plan de la
fenêtre de document et peut être utilisé comme guide pour
reproduire une mise en page
• Le tracé de l'image est uniquement visible dans Dreamweaver
Cliquer sur le menu
« Tracé de l’image »

27. Les images
présentation
 Avantage : « une image vaut mille mots »
 Inconvénient : sa taille peut retarder le chargement de la page
 Solution : compression (réduction de la taille)
 Deux principales techniques de compression :
– compression destructive : supprimer des couleurs qu’un
humain n’est pas censé déceler. Cependant un fort taux de
compression peut entamer la qualité de l’image.
– compression non destructive : ce type de compression ne
détruit absolument pas l'image
27

28. Les images
principaux formats Web
Format Couleurs Compression Usage
jpeg
(Joint
Photographic
Experts Group)
16 777 216 destructive Photographies
gif
(Graphics
Interchange
Format)
256
Non
destructive
Logos, images animées,
transparence à 2 niveaux
(transparent ou opaque).
png 8 bits
(Portable
Network
Graphic)
256
Non
destructive
Boutons graphiques , flèches de
navigation et petites icônes
png 24 bits 16 777 216
Non
destructive
Logos, boutons graphiques
détaillés, captures d’écran et
transparence à plusieurs niveaux28

29. Les images
insertion
2)Choisir « Insertion>Image »
ou Taper «Ctrl+Alt+I » ou
cliquer sur l’icône Images de
l’onglet « Commun »
3)Sélectionner
la source de
l’image
4) Valider
1)Placer le point
d’insertion à
l’endroit où doit
apparaître l’image

30. Les images
propriétés
Après l’insertion, en cliquant sur l’image, on peut visualiser et éventuellement
modifier ses propriétés au niveau de « l’inspecteur de propriétés ».
Aperçu nom dimensions source Image-lien Texte alternatif Outils pour modifier
Créer des
zones réactives
Espaces
horizontal et
vertical autour
de l’image
Image
alternative de
taille réduite
s’affichant
avant l’image
Épaisseur de
la bordure de
l’image-lien
Alignement
p/r au texte
Alignement
p/r à la page

31. Les tableaux
présentation et insertion
• Un tableau permet de
présenter
l’information d’une
manière concise.
• Un tableau est
constitué de lignes et
de colonnes
• Chaque intersection
d’une ligne et d’une
colonne définit une
cellule qui contient
une donnée.
2)Choisir « Insertion>Tableau »
ou Taper «Ctrl+Alt+T » ou
cliquer sur l’icône Tableau de
l’onglet « Commun »
1)Placer le point
d’insertion à
l’endroit où doit
apparaître le tableau
3) Choisir la taille du
tableau, l’en-tête et
l’accessibilité puis
cliquer sur OK

32. Les tableaux
propriétés
Après l’insertion, en cliquant sur le tableau, on peut visualiser et éventuellement
modifier ses propriétés au niveau de « l’inspecteur de propriétés ».
Largeur en
px ou en %
Espace entre le
contenu d’une cellule
et son contour
Espace intercellulaire
Image
d’arrière-plan
Épaisseur de
la bordure du
du tableau
Couleur de la
bordure du
tableau
alignement du tableau
Couleur
d’arrière-plan

33. Les tableaux
propriétés d’une ligne ou d’une colonne
Après avoir sélectionné une ligne ou une colonne, on peut visualiser et éventuellement
modifier ses propriétés au niveau de « l’inspecteur de propriétés ».
Alignement
du contenu
des cellules
sélectionnées
Couleur de fond
de la sélection
Fusionner
les cellules
de la
sélection
Largeur et
hauteur de
la sélection
Couleur de la
bordure de
la sélection
Image de fond
de la sélection

34. Les tableaux
propriétés d’une cellule
Après avoir sélectionné une cellule, on peut visualiser et éventuellement
modifier ses propriétés au niveau de « l’inspecteur de propriétés ».
Alignement
du contenu
de la cellule
Couleur de fond
de la cellule
Diviser la
cellule en
lignes ou en
colonnes
Largeur et
hauteur de
la cellule
Couleur de la
bordure de
la cellule
Image de fond
de la cellule

35. Les formulaires
présentation
 Les formulaires permettent d’interagir avec l'internaute.
 Parmi leurs utilisations courantes on peut noter :
• récupérer des informations sur l'utilisateur;
• procéder à des authentifications ;
• permettre à l'utilisateur de contribuer à un site ;
• opérer des recherches ou sélections sur le site ;
 L'internaute entre les données en remplissant des champs
texte (une ou +sieurs lignes), en cochant une (ou +sieurs)
case(s) ou en sélectionnant un (ou des) élément(s) dans une
liste.
 Ensuite l'internaute soumet les données en cliquant sur un
bouton de soumission.
 La soumission envoie les données généralement à un script
côté serveur sous forme de paires nom/valeur, c'est-à-dire un
ensemble de données représentées par le nom de l'élément
de formulaire, le caractère "=", puis la valeur associée.

36. Les formulaires
insertion
2) Choisir "Insertion"
puis "Formulaire" puis
"Formulaire"
Ou
Cliquer sur l’icône
Formulaire de l’onglet
"Formulaires"
1)Placer le point
d’insertion à l’endroit
où doit apparaître le
formulaire

37. Les formulaires
propriétés
Après avoir inséré et sélectionné un formulaire, on peut visualiser et éventuellement
modifier ses propriétés au niveau de « l’inspecteur de propriétés ».
Méthode employée pour envoyer
les données du formulaire à l'agent
de traitement.
GET, valeur par défaut, annexe les
données du formulaire à l'URL du
script cible.
POST est la valeur qui incorpore les
données du formulaire dans la
requête HTTP.
Choisir obligatoirement "multipart/form-data"
si un fichier doit être joint au formulaire
Chemin d’accès de la page ou du
script chargé de traiter les données
du formulaire

38. Les formulaires
les objets de formulaires
Les objets de formulaire sont les éléments qui permettent aux
utilisateurs d'entrer des données. Les principaux sont :
• Champ de texte (une ligne, multi lignes ou mot de passe)
• Champ masqué
• Cases à cocher
• Boutons radio
• Menu ou liste
• Champ de fichier
• Boutons (soumission, réinitialisation, tâches de prétraitement)

39. Les formulaires
champ de texte
Le champ de texte accepte tout type d'entrée alphanumérique.
Identifiant
obligatoire
du champ
nombre
maximal de
caractères
pouvant être
affichés dans
le champ
le texte saisi apparaît
sous forme de puces
ou d'astérisques pour
le protéger du regard
de tiers
nombre
maximum de
caractères que
peut contenir
le champ
Valeur affichée
dans le champ
lors du premier
chargement du
formulaire

40. Les formulaires
champ masqué
Un champ masqué est généralement utilisé pour faire passer des
informations indirectement renseignées par l’internaute
Identifiant
obligatoire
du champ
Valeur transmise lors de
l'envoi du formulaire

41. Les formulaires
zone de texte
• Une zone de texte est un champ de texte pour lequel l’option
Multi lignes à été activée.
• Il permet d’entrer un commentaire sur plusieurs lignes.
Identifiant
obligatoire
du champ
largeur du
champ
occupée à
l’écran.
nombre de
lignes visibles
à l’écran
texte affichée dans la zone lors du premier
chargement du formulaire
Désactivé : retour à la ligne sur
action exclusive de
l’utilisateur, par pression sur la
touche Entrée du clavier.
Virtuel : retour à la ligne
automatique. Ces retours
automatiques ne seront pas
retranscris lors de l'envoi du
formulaire.
Physique: sauts automatiques
également retranscris lors de
l'envoi du formulaire.

42. Les formulaires
cases à cocher
• Les cases à cocher permettent la mise en forme de réponses à choix
multiples.
• Associées à une même question, plusieurs cases à cocher peuvent en
effet être activées simultanément.
Identifiant obligatoire de la case.
Cet identifiant doit être le même
pour toutes les cases impliquées
dans une même question
valeur
obligatoire
de la
réponse
Activé : la case est cochée dès son
affichage dans le navigateur ;
l’utilisateur pouvant toutefois la
désactiver dans le navigateur

43. Les formulaires
boutons radio
• Les boutons radio sont utilisés pour l’intégration de réponses à choix unique.
• Parmi plusieurs boutons associés à une même question, un seul peut être activé à
la fois.
Identifiant obligatoire du bouton.
Cet identifiant doit être le même
pour tous les boutons impliqués
dans une même question
valeur
obligatoire
de la
réponse
Activé : le bouton est coché dès
son affichage dans le navigateur ;
l’utilisateur pouvant toutefois le
désactiver dans le navigateur

44. Les formulaires
menu ou liste (présentation)
• Un menu est un volet déroulant que l’on peut ouvrir afin d’y
saisir un choix et un seul.
• Cette option permet de gagner de la place dans un formulaire
lorsque le nombre d’entrées est assez important.
• Une liste est une zone ouverte, non déroulante, mais composée
éventuellement d’un ascenseur permettant d’y naviguer et
d’activer une ou plusieurs option(s). On utilise la touche Maj
pour ajouter des options consécutives et Ctrl pour ajouter ou
soustraire des éléments de la sélection, ponctuellement.

45. Les formulaires
menu ou liste (propriétés)
Identifiant obligatoire
de l’objet

46. Les formulaires
champ de fichier
Un champ de fichier permet de procéder au téléchargement d’une
pièce jointe au formulaire, en activant l’ouverture d’une fenêtre
de sélection pour choisir le fichier à attacher au formulaire.
Identifiant
obligatoire
du champ
nombre maximal de
caractères pouvant être
affichés dans le champ
nombre maximum de
caractères que peut
contenir le champ

47. Les formulaires
Boutons
L’option Bouton permet non seulement l’insertion d’un bouton de
soumission du formulaire, mais aussi d’un bouton de
réinitialisation ou encore de boutons neutres destinés à
accueillir des scripts personnalisés ou des comportements.
Identifiant
obligatoire
du bouton
Libellé à afficher
sur le bouton
Bouton de
soumission
Bouton de
réinitialisation
Bouton
neutre

48. Les calques
présentation
• Un calque est un bloc rectangulaire qui garde une position
précise par rapport au début du document, prescrite au pixel
près, et cela même si le visiteur redimensionne sa fenêtre ou
s'il modifie la taille des caractères.
• Un calque peut contenir toutes sortes d'éléments (texte,
image, tableau, formulaire…).
• Un calque peut apparaître, disparaître ou se déplacer à la
suite d'une temporisation ou d'une action de l'utilisateur.

49. Les calques
insertion
Pour insérer un calque, placer le point d'insertion dans la
fenêtre de document, puis choisir
Insertion > Objets mise en forme > div PA.

50. Les calques
propriétés
Après l’insertion, en cliquant sur le calque, on peut visualiser et éventuellement
modifier ses propriétés au niveau de « l’inspecteur de propriétés ».
Identifiant
du calque
Positionnement du calque :
G : position par rapport au bord gauche de la fenêtre
S : position par rapport au bord supérieur de la fenêtre
L : largeur du calque en pixel
H : hauteur du calque
Visibilité du calque :
defaut : visible
visible : le calque est affiché
hidden : le calque n'est pas affiché
Ordre de superposition.
Dans un navigateur, les calques
portant les valeurs entières les plus
élevées se superposent aux calques
portant les valeurs moins élevées.

51. Les calques
propriétés (suite)
Contrôle la manière dont le calque apparait dans un navigateur lorsque le
contenu dépasse la taille spécifiée du calque.
Visible : le calque s'agrandit proportionnellement au contenu.
Masqué : le contenu supplémentaire ne sera pas affiché dans le navigateur.
Défilement : ajout des barres de défilement qu'elles soient nécessaires ou non.
Auto : ajout des barres de défilement uniquement lorsque cela est nécessaire.
Définit la zone visible du calque.
Les coordonnées gauche (G), haut (S), droite (D) et bas (B) pour définir un rectangle dans
le champ des coordonnées du calque (en partant du coin supérieur gauche de l'élément
PA). Le calque est « détouré » afin que seul le rectangle spécifié soit visible.

52. Le son et la vidéo
présentation
• Il est possible d'ajouter du son et de la vidéo à une page Web.
• Il existe de nombreux types de formats audio et vidéo, mais le mp3
(audio) et le flv (vidéo) sont de loin les plus utilisé sur le Web
• Côté client, les navigateurs utilisent des logiciels appelés plug-in ou
modules externes pour lire ces objets multimédia.
Exemples de plugins :
Windows Media Player de Microsoft, Quicktime Player d’Apple,
Real Player de Real Networks et Schockwave Player d’Adobe.
• Côté serveur, on peut intégrer un fichier Flash qui sera chargé de lire
les fichiers multimédia.
Exemples de fichiers Flash :
dewplayer.swf d’Alsacréation pour les fichiers mp3
flvplayer.swf de Flv-player.net pour les fichier flv

53. Le son et la vidéo
insertion
2) Choisir "Insertion"
puis "Médias" puis
"Plug-in"
Ou
Cliquer sur l’icône
"Média" puis "Plug-in"
de l’onglet "Commun"
1)Placer le point
d’insertion à l’endroit
où doit apparaître
l’objet multimédia
3)Aller chercher le
fichier multimédia

54. Le son et la vidéo
propriétés
Identifiant
de l’objet
multimédia
largeur et hauteur
allouées à l'objet
sur la page
le fichier des
données source
Alignement de
l’objet sur la page
quantité d'espace blanc, en
pixels, au-dessus, en-dessous
et de chaque côté du plug-in
URL complète du site à partir
duquel le navigateur pourra
éventuellement télécharger
le plug-in.
Ouvre une boîte de dialogue
permettant d'indiquer des
paramètres supplémentaires
à transmettre au plug-in
largeur de la
bordure autour du
plug-in