FELSI

2010

Conception de pages Web avec Dreamweaver CS3

Y. Mine

1
 Prambule
1 Introduction
2 Elments fondamentaux de Dreamweaver CS3
2.1 les menus
2.2 la fentre document
lespace de travail
les rgles
la grille
les ascenseurs
la barre dtat
le menu prfrences
2.3 le menu contextuel
2.4 la palette des objets
2.5 linspecteur des proprits
2.6 linspecteur HTML
3 Environnement de travail
3.1 la carte du site
4 Cration dun site
4.1 construction dune page
4.1.1 larrire-plan
4.1.2 les liens
4.1.3 lencodage
4.1.4 les polices de caractres
4.1.5 les couleurs
4.1.6 les styles
4.1.7 les alignements
4.1.8 les retraits
4.1.9 les listes
4.1.10 les images
4.2 les liens
4.3 enregistrement des documents
4.3.1 prvisualisation
4.4. la gestion des sites
5 Options graphiques
5.1 les images survoles
5.2 les cartes graphiques
5.3 laffichage des pages
5.4 insertion de tableaux
5.5 les donnes tabulaires
5.6 les formulaires
5.6.1 champ de texte ligne unique
5.6.2 champ de texte multi-lignes
5.6.3 champ masqu
5.6.4 case cocher
5.6.5 bouton radio
5.6.6 menu contextuel
5.6.7 boutons denvoi
6 Les feuilles de style
7 Laide en ligne
8 Les comportements
9 Conception de frames dans Dreamweaver

2
 Avant de commencer raliser les pages

Crer un site Web caractre professionnel est un geste technique final, qui doit tre prcd
dune rflexion et dune prparation minutieuse du travail raliser.

Marche suivre :

1/ Prparation

Choisir un thme dvelopper ou rpondre une demande

Dfinir avec exactitude les objectifs poursuivis (promotion commerciale, prsence

sur la toile, prsentation dun hobby,)

Dterminer le public cible : adulte, adolescent, enfants,

En fonction de ces 3 points : dlimitation de la matire premire qui sera exploite pour le site.

2/ Runir la matire premire

documentation crite (livres, revues,) et virtuelle (fichiers)

illustrations (photos, dessins, graphiques,)

Crations personnelles

3/ En fonction du volume et du contenu de la documentation rassemble, faire la dcoupe en

pages et en niveaux.

Chaque page signifie un fichier html, les niveaux reprsentant la hirarchie

dorganisation de linformation.
Le niveau 1, qui est reprsent par la page daccueil, est le plus gnral, tandis que les
niveaux 2 et 3 vont donner accs de linformation de plus en plus dtaille.
Dessiner les pages en indiquant les liens prvus. (exemple)
Attribuer un nom significatif chaque fichier html

Accueil Niveau 1 : accueil

A B C Niveau 2 : premier niveau de dtail

A1 A2 A3 B1 B2 C1 C2 C3 Niveau 3 : deuxime niveau de dtail

Les liens sont toujours (ou presque) verticaux. Le besoin de liens horizontaux implique trs
souvent une mauvaise dcoupe de linformation.

3
Nommer les fichiers (html, jpeg, gif,) de manire vocatrice et rationnelle : p ;ex ; en franais,
maximum 8 caractres, pas de caractre accentu ni de caractre spcial ( ), pas
de majuscule.

Toujours raisonner et travailler en fonction des objectifs dtermins au pralable. Si une

modification des objectifs est ncessaire, il faut alors recommencer toute la rflexion.

4/ Quand le schma rencontre les objectifs, on peut commencer crer les pages html selon les
critres dfinis plus haut.

Crer une directory dans laquelle seront placs tous les fichiers relatifs au site
Crer toutes les pages, les nommer et les sauver
Y insrer tous les hyperliens
Vrifier le bon fonctionnement de ce squelette
Garnir les pages avec linformation voulue : texte, photos, dessins, animations
diverses,
Tester le site sur les diffrents navigateurs et en diffrentes rsolutions

Attention :

Les tapes 1 3 doivent faire lobjet dun document papier, qui sera la base de
travail ainsi que le story book du site. Ce nest que quand il sera termin,
corrig et approuv que la conception des fichiers pourra commencer.

Les effets spciaux (Flash, Java, JavaScript, ActiveX,)

Ils sont destins embellir les pages et y attirer lattention. Ils ne doivent pas nuire leur
lisibilit ni aux temps de chargement. En consquence, utilisez-les seulement quand ils
apportent un rel plus aux pages et pas dans le seul but de garnir. Cest le fond de votre site
et lui seul qui fera revenir les visiteurs.

Proprit intellectuelle (copyright)

Il faut proscrire la copie de textes, photos et autres objets graphiques sauf si ils sont
expressment dclars libres de droits ou si vous disposez de lautorisation pour le faire. En
bref, pas de copier-coller sauvage.

Lidal est de raliser soi-mme les photos et objets graphiques que lon met en ligne et dcrire
le texte. Dans le cas dun site command, le contenu pourra tre celui apport par le client. Il ne
pourra servir alors que pour ce seul travail.

4
1 - Introduction

Dreamweaver est un diteur HTML: Hyper Text Markup Language en mode WySIWyG (What
you see is what you get); qui permet de raliser des pages web (html) et qui donne directement
une ide de ce que sera la page, mais qui impose la visualisation du rsultat dans un navigateur
(via la touche F12).

Il permet en outre de grer un site et de le mettre sur le rseau, mme si il existe des outils plus
appropris cet effet.

Un site est un ensemble de fichiers html, dobjets graphiques (jpeg, gif, png), de fichiers divers,
de codes javaScript, dApplets Java, lis entre eux par des liens hypertexte.

Le fichier correspondant la page de dpart (ou page daccueil (home page)) sera nomm par
convention index.htm (ou html). Cette pratique permet de simplifier ladresse du site : taper
http://www.yes.com/index.htm ou http://www.yes.com/ fera charger automatiquement cette
mme page index.htm dans le navigateur.

Trs important,
en HTML, on na jamais la matrise totale de ses documents

Internet Explorer, Chrome et Netscape coexistent dans lenvironnement. Des diffrences de

raction et daffichage sont systmatiques suivant lemploi de lun ou lautre de ces navigateurs.

Certains sites affichent un avertissement qui informe le visiteur quil a t optimis pour lun ou
lautre de ces programmes. Vu que nous allons dvelopper des pages pour tout le monde et pas
seulement pour les utilisateurs dun programme spcifique, on veillera toujours crer des
pages galement lisibles par ces 3 principaux browsers et les tester soigneusement dans les
diffrents environnements et sur diffrentes versions.

5
2 - Elments fondamentaux de Dreamweaver

Les menus
La fentre document
Le menu contextuel
La palette des objets
Linspecteur des proprits
Linspecteur HTML

2.1 Les menus

Comme tout logiciel, Dreamweaver comporte une srie de menus, classiques (Fichier, Edition,
Affichage, ), ou propres la conception web.

6
7
8
9
10
2. 2 La fentre document

Il sagit de lespace de travail principal du logiciel. Cest dans cet espace que sinsrent les
diffrents lments en mode WISIWIG.

Les diffrents composants de la fentre document sont :

Lespace de travail
Les rgles
La grille
Les ascenseurs
La barre dtat
Les prfrences

Lespace de travail (en blanc sur lexemple ci-dessous) est le seul lment de la fentre
document qui sera visible dans un navigateur

11
Les 3 boutons code , fractionner et cration (cercls de rouge) permettent de choisir
laffichage html, combin (comme sur cet exemple) ou wysiwyg. Combin signifie que lon a
sous les yeux les 2 versions de la page, celle wysiwyg et celle en code html. Le volet qui les
spare est mobile.

12
Les rgles

Les paramtres en sont spcifis via les sous-commandes de Affichage : Rgles . Afficher
permet de rendre les rgles visibles.
Rtablir origine permet de replacer lorigine des rgles (0,0) dans le coin suprieur gauche de la
page.
Pixel, Pouce et Centimtre permettent de dfinir lunit employe par les rgles. La plupart du
temps, les rgles sont chelonnes en pixel qui est lunit de base du web.
Les rgles sont affiches sur notre exemple.

La grille

Les paramtres de grille sont spcifis via

les sous-commandes de Affichage : Grille
.

Afficher permet de rendre la grille visible

Aligner sur permet de forcer
lalignement des calques sur la grille
Modifier permet de rgler la grille
(espacement, couleur,)

Les cases Grille visible et Alignement

ont respectivement le mme effet que
Affichage :Grille : Afficher et Affichage :Grille :Aligner sur .
La grille nest pas affiche sur notre exemple.

Les ascenseurs permettent la navigation verticale et horizontale lintrieur de la fentre. La

prsence dun ascenseur horizontal est proscrire. Organisez vos pages (via des tableaux ou
des div) de manire ce quils ne soient jamais ncessaires.

La barre dtat de la fentre document comprend, de gauche droite :

Mini-laceur : Il reprsente les palettes du logiciel sous forme dicnes.

La liste dimension de fentre : elle permet de donner une dimension prcise lespace de
travail de la fentre document afin de simuler laffichage sur diffrents crans. Il est possible
de prciser dautres dimensions que celles pr-installes dans la liste via la commande
Modifier les tailles de cette mme liste qui ouvre la barre dtat des prfrences du logiciel.

Indicateur de tlchargement : il affiche deux valeurs. La premire dtermine la taille de la

page (y compris les lments graphiques ou interactifs), la seconde le temps de
tlchargement valu en fonction de la vitesse de modem spcifie dans la zone dentre
Vitesse de connexion de la catgorie Barre dtat du logiciel.

13
Le menu prfrences

Ce menu permet de rgler de trs nombreuses options de raction du programme.

2.3 Le menu contextuel

Un menu contextuel apparat lors dun Ctrl-Clic (Mac) ou clic

droit (Windows) sur un lment prsent dans lespace de travail
de la fentre document. Il permet un accs plus rapide aux
fonctions.

14
 2.4 La palette des objets

Elle regroupe la majorit des lments insrer, groups par catgorie sous 7 onglets.

Les catgories sont :

Commun qui gre les objets de base (insrer tableau, photo, roll-over, ligne,)
Mise en forme des tableaux, cadres et div
Formulaire qui gre les lments de formulaires
Donnes, qui gre les relations avec les bases de donnes
Spry voir lencadr ci-dessous
Texte, qui gre la mise en forme des textes
Favoris rubrique garnir soi-mme selon ses besoins et ses habitudes de travail

Prsentation des effets Spry

Les effets Spry sont des amliorations visuelles applicables pratiquement

n'importe quel lment d'une page HTML l'aide de JavaScript. Ces effets
sont souvent utiliss pour surligner des informations, crer des transitions
animes ou modifier visuellement un lment de page pendant un certain
dlai.

15
 Remarque : pour appliquer un effet un lment, il doit tre slectionn ou
possder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas
slectionne, elle doit possder une valeur ID valide. Si ce n'est pas encore
le cas, vous devez en ajouter un au code HTML.
Les effets peuvent modifier les proprits d'opacit, d'chelle, de position et
de style d'un lment, comme sa couleur d'arrire-plan. Vous pouvez crer
d'intressants effets visuels en combinant plusieurs proprits.

Ces effets sont bass sur Spry. Ds lors, lorsqu'un utilisateur clique sur un
objet possdant un effet, seul l'objet est mis jour de manire dynamique.
La page HTML n'est pas entirement actualise.

Spry comporte les effets suivants :

Apparition/Fondu Fait apparatre ou disparatre lentement un lment.

Surligner Modifie la couleur d'arrire-plan d'un lment.

Store mont/Store baiss Simule l'effet d'un store qui monte ou descend
pour afficher ou masquer l'lment.

Glisser vers le haut/Glisser vers le bas Fait monter ou descendre l'lment.

Agrandissement/Rduction Augmente ou diminue la taille de l'lment.

Secouer Donne l'impression que l'lment est secou de gauche droite.

Ecraser Fait disparatre l'lment dans le coin suprieur gauche de la page.

Important : lorsque vous utilisez un effet, diverses lignes de code sont

ajoutes au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js,
qui est ncessaire l'inclusion des effets. Ne supprimez pas cette ligne du
code, faute de quoi les effets ne fonctionneront pas.

2.5 Linspecteur de proprits

Cet outil, qui se trouve au bas de lespace de travail, donne accs aux proprits de lobjet
slectionn dans lespace de travail. Le contenu de la palette varie donc en fonction de lobjet
slectionn.

Cas du texte

16
Cas dune image

Cas dun formulaire

Cas dun tableau

Cest dans cette barre que vous devez raliser les diffrents rglages apporter aux lments
slectionns :

Texte : gras, italique, alignement, taille et police de caractres, couleur, retraits, puces
Tableau : paisseur de bordure, couleurs ou motifs des fonds et des cadres, alignement,
taille, units, composition
Objets graphiques : dimensions, alignement
Liens : cible

17
2.6 Linspecteur HTML

Affich via la commande Fentre : Inspecteur de code ou la touche F10, cette fentre montre le
code source de la page en cours.

Dreamweaver tant une interface graphique transformant des objets en code HTML, toute
modification de la page entrane une modification du code. Inversement, toute modification du
code HTML entrane, condition que ce code soit conforme, une modification dans la fentre
document.

Laffinage dune page passant obligatoirement par la lecture et la correction du code, il est
indispensable douvrir frquemment cette fentre afin de vrifier le code source. Il faut connatre
un minimum le langage html pour arriver un bon rsultat

Afin de faciliter la lecture du code, la catgorie Coloration du code des Prfrences permet
de colorer les balises, ainsi que le contenu des balises. Il est intressant de regrouper toutes les
balises dun mme objet sous une couleur unique. Par exemple, les balises <table>, <th>, <tr>,
et <td> tant colores en rouge, cest lensemble du code des tableaux qui serait affich en
rouge.

18
3 Environnement de travail

3.1 La carte du site

Carte du site : ouvre la palette de gestion du site pour faciliter la gestion des liens.

Vous pouvez afficher un fichier local pour un site Dreamweaver sous la forme d'une carte
d'arborescence contenant des icnes lies et que l'on appelle carte de site. Utilisez cette carte
pour ajouter de nouveaux fichiers un site Dreamweaver ou pour ajouter, modifier ou supprimer
des liens.

La carte du site prsente la structure du site sur deux niveaux en partant de la page d'accueil.
Les pages sont prsentes sous la forme d'icnes et les liens sont affichs dans l'ordre o ils
apparaissent dans le code source.

Vous devez dfinir la page d'accueil du site avant de pouvoir en afficher la carte. La page
d'accueil du site est le point de dpart de la carte ; il peut s'agir de n'importe quelle page de
votre site. Vous pouvez changer de page d'accueil, indiquer le nombre de colonnes afficher,
prciser si les tiquettes des icnes doivent afficher le nom du fichier ou le titre de la page et
indiquer si les fichiers dpendants et masqus doivent tre affichs. (Un fichier dpendant est
une image ou tout autre lment de contenu non HTML que le navigateur charge en mme
temps que la page principale.)

Lorsque vous travaillez dans la carte d'un site, vous pouvez slectionner des pages, ouvrir une
page pour la modifier, ajouter des pages au site, crer des liens entre les fichiers et modifier le
titre des pages.

La carte du site est idale pour agencer la structure d'un site. Vous pouvez dfinir rapidement la
structure d'ensemble du site, puis crer une image graphique de la carte du site.

Remarque : l'option de carte du site n'est disponible que pour les sites locaux. Pour crer la
carte d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis
utilisez la commande Grer les sites pour dfinir le site en tant que site local.

Affichage d'une carte de site

Dans le panneau Fichiers (Fentre > Fichiers), effectuez l'une des oprations suivantes :
Dans le panneau Fichiers affich sous sa forme rduite, slectionnez Affichage de la
carte dans le menu Vue du site.

Dans le panneau Fichiers affich sous sa forme dveloppe, cliquez sur le bouton Carte
du site dans la barre d'outils, puis slectionnez Carte seulement (la carte du site sans la
structure des fichiers locaux) ou Carte et fichiers (la carte du site avec cette structure).

19
Remarque : Si aucune page d'accueil n'a t dfinie
ou si Dreamweaver ne trouve pas de page intitule
index.html ou index.htm dans le site actuel (qu'il
utilise alors comme page d'accueil), Dreamweaver
vous invite slectionner une page d'accueil.

20
4 Cration dun site

La bonne utilisation de Dreamweaver suppose quon lui indique demble les caractristiques de
base du site en cours de construction. Cette procdure ne sert quau programme lui-mme. Cela
lui permet de contrler plus facilement la cohrence des liens entre les lments et de grer la
synchronisation des fichiers se trouvant sur la machine locale avec ceux du site du serveur.

La dfinition du site sobtient via le menu site en optant pour loption nouveau site .

21
Remplissez obligatoirement les deux premiers champs nom du site et dossier racine local
. Les autres champs ne sont ncessaires que si vous comptez utiliser Dreamweaver pour
placer en ligne votre site. Des programmes de FTP pur sont mieux indiqus cet effet.

4.1 Construction dune page

Il ne faut pas confondre le titre donn la page avec le nom de fichier sous lequel vous allez la
sauver. Le titre sera le nom convivial qui apparatra dans la barre suprieure du navigateur lors
de la visualisation de la page. Exemple :

22
Par contre, cest le nom de fichier prsent physiquement sur le disque dur qui sera utilis pour
tablir les liens.

Le titre de la page peut tre modifi en allant dans le menu Modifier et en choisissant loption
Proprits de la page . Dans cette fentre, vous pouvez modifier dautres paramtres que le
titre de la page : image darrire plan, couleur darrire plan, couleur du texte, couleur du lien,
marges,

Il est galement possible de modifier le titre de la page directement dans le code, entre les
balises <title> : <title>titre de la page</title>

4.1.1 Arrire-plan

Pour le fond de la page, vous pouvez choisir soit une image de fond, soit une couleur de fond.

Pour les images darrire-plan, on utilise gnralement une petite image au format gif
reprsentant un motif. Celui-ci se rpte automatiquement pour former un fond de page.

23
Il faut tout prix viter dinsrer directement une image trop grande car cela alourdirait la page
et en allongerait considrablement le temps de chargement. De plus, elle ne sadapterait pas
bien la mise en page suivant les rsolutions utilises par les visiteurs. En outre, veillez
choisir judicieusement votre motif de fond pour ne pas gner la lisibilit du texte de la page.

La couleur darrire-plan offre comme avantage par rapport limage darrire-plan de ne pas
ralentir le chargement de la page. Par contre, on ne dispose que de fonds de couleurs
uniformes. Ne ngligez pas les fonds blancs (sans image ni couleur) qui, dans certain cas,
prsentent une solution particulirement nette.

Ces paramtres sont rglables dans le menu proprits de la page .

4.1.2 Liens

La couleur des liens peut aussi tre redfinie. Par dfaut, les liens saffichent en gris. Quand il
sagit de texte, le bloc est soulign quels que soient ses attributs de dpart.
Quand on utilise une image, elle est entoure dun cadre bleu. Une fois que le lien a dj t
utilis, il apparat dans une couleur bordeaux. Il est conseill de changer ces couleurs si on
risque un problme de lisibilit d lutilisation dun fond color ou dune image de fond ou
selon les rgles de la charte graphique.

24
 4.1.3 Encodage

Lencodage du texte seffectue comme dans un logiciel de traitement de texte avec la plupart
des facilits classiques :

Flche gauche : dplacement du curseur dun caractre vers la gauche ;

Flche droite : dplacement du curseur dun caractre vers la droite ;
Flche haut : dplacement du curseur dune ligne vers le haut ;
Flche bas : dplacement du curseur dune ligne vers le bas ;
CTRL-Flche gauche : dplacement du curseur dun mot vers la gauche ;
CTRL-Flche droite : dplacement du curseur dun mot vers la droite ;
CTRL-Flche haut : dplacement du curseur dun paragraphe vers le haut ;
CTRL-Flche bas : dplacement du curseur dun paragraphe vers le bas ;

Les touches de dbut et fin de page, dbut et fin dcran fonctionnent galement.

La pression sur la touche majuscule associe au dplacement (flche, CTRL-flche, ) permet

une slection quivalente au dplacement du curseur.

Le texte entr est balis par <p></p>. Chaque retour ou pression sur la touche Enter cre
une nouvelle paire de balises qui dfinit une nouvelle ligne. Seule la touche de tabulation nest
pas quivalente celle des traitements de texte. Lalignement de texte ne seffectuant pas par
des tabulations, mais par tableau, liste ou retrait.

On ne peut insrer quun seul caractre blanc de sparation (space bar) entre deux lettres ou
mots.

25
Le dplacement de texte ou dobjet graphique est possible par cliquer-glisser.

4.1.4 Polices de caractres

Le choix de la police de caractre doit se faire de manire judicieuse : comme le texte peut tre
visualis par de visiteurs nayant pas ncessairement la mme plate-forme que celle qui a servi
au dveloppement de la page, ni les mme polices de caractres, Dreamweaver propose en
standard un jeu de fonts (groupes par quivalence daspect) et qui sont normalement prsent
doffice sur tous les systmes.
Le choix de la police par dfaut se fait en ouvrant la palette des Proprits, onglet aspect.

La taille des caractres est donne en points, en centimtres, en pixels,

Si vous dsirez utiliser des polices de caractres diffrentes ou plus grandes, vous devez les
diter dans un logiciel graphique et en faire un gif que vous positionnerez lendroit adquat.
Ainsi, il sera lu de manire gale par tous les browsers.

4.1.5 Couleur

La couleur globale du texte est gre par les proprits de la page mais peut tre modifie
localement par la commande Texte : Couleur qui ouvre le nuancier ou encore par linspecteur
des proprits.

4.1.6 Styles

Style : vous disposez en standard de

gras (B enfonc) et ditalique (I
enfonc) et, par combinaison, du
gras-italique (B et I enfoncs). De
plus, vous pouvez colorer votre texte
(carr color cot de la taille).
Nutilisez quavec parcimonie le
soulign (qui nest dailleurs pas
propos en standard) car il est
rserv au marquage de liens.
Nanmoins, on peut y recourir si cela
ne cre pas dambigut mais il faut
alors viter de mettre le texte dans la
couleur des liens. Pour obtenir tous
les styles non-standards, il faut aller
dans le menu Texte et choisir
loption Style . On obtient alors la
fentre suivante :

26
 4.1.7 Alignements

Alignement du texte : Dreamweaver propose en standard lalignement gauche, lalignement

droite, le centrage et la justification gauche/droite.

Le retrait de texte ne seffectue pas laide de taquets de tabulations comme dans les logiciels
de traitement de texte ou de mise en page. Seuls les retraits ou les tableaux permettent
daligner le texte une distance donne de la marge gauche.

4.1.8 Retraits

La cration de retraits se fait via linspecteur des proprits, les commandes Retrait et
Retrait ngatif du menu Texte , ou encore les commandes Liste : Retrait et Liste :
Retrait ngatif du menu contextuel.

Chaque retrait positif cre une paire de balises <blockquote></blockquote>.

Ces balises, utilises en HTML pour signifier une citation, correspondent approximativement
un retrait de 5 caractres en corps 3 et peuvent tre imbriques.

Les icnes le permettent galement dans linspecteur de proprits, quand du texte est
slectionn.

4.1.9 Listes

Pour crer une liste ou une numration, il suffit deffectuer lune des commandes suivantes :

La commande Texte : Liste , un choix est effectuer parmi les diffrentes listes
proposes, la commande Proprit de la liste permet daffiner ce choix ;
Les icnes de la Liste simple et Liste numrote de linspecteur des proprits, le
bouton Elments de liste donne accs aux proprits de la liste
La commande Liste du menu contextuel.

Tout texte converti en liste garde ses attributs de corps, couleur, et est imbriqu dans la paire
de balises <ul></ul> pour les listes non-ordonnes, et <ol></ol> pour les listes ordonnes.

Les listes non-ordonnes sont des listes prcdes dun rond (puce), dun cercle ou dun carr,
tandis que les listes ordonnes dbutent par un chiffre ou une lettre.

4.1.10 Images

Pour mettre des images sur le web, on utilise exclusivement les formats, JPEG, GIF et PNG.
Le JPEG sera rserv aux photos et aux images exigeant un grand nombre de couleurs.
Le GIF (maximum 216 couleurs) sera rserv aux images prsentant de nombreux aplats
(grandes zones dune seule couleur) tels que les logos. Le GIF permet aussi de crer des
animations (gifs anims) et des images dont une couleur est dtermine comme transparente.

Le Portable Network Graphics (PNG) est un format ouvert dimages numriques, qui a t cr
pour remplacer le format GIF, lpoque propritaire et dont la compression tait soumise un

27
brevet. Le PNG est un format non destructeur spcialement adapt pour publier des images
simples comprenant des aplats de couleurs.

Pour les images synthtiques

PNG est particulirement appropri lorsquil sagit denregistrer des images synthtiques
destines au Web comme des graphiques, des icnes, des images reprsentant du texte
(bonne conservation de la lisibilit), ou des images avec des dgrads. Le PNG surpasse
rgulirement le format GIF en ce qui concerne la taille (avec une palette de couleurs bien
choisie) ou la qualit (puisquil nest pas limit 256 couleurs).
Pour les photos
Les caractristiques de PNG lui permettent denregistrer des photographies sans perte de
donnes, mais au dtriment de la
taille du fichier rsultant qui reste la
plupart du temps trs suprieure
celle de formats spcifiques aux
photographies comme JPEG (ou
JPEG 2000).

Linsertion dune image se fait soit via

la palette des objets, soit via le menu
Insertion avec loption Image .

On obtient alors la fentre suivante :

28
Bien quil soit possible de modifier dans Dreamweaver la taille daffichage dune image, cest
dconseiller car cela oblige en pratique le navigateur de votre visiteur recalculer chaque fois
la taille daffichage partir de la taille relle de limage en question.

Cela a pour rsultat de dgrader limage et risque dallonger le temps de chargement. Il convient
de raliser pour chaque image une version directement la taille souhaite et de les utiliser
pour garnir les pages. Il est aussi possible dy ajouter un lien vers limage en taille relle.

4.2 Les liens

Il existe 5 types de liens :

vers une autre page du site

vers une page externe votre site
vers un endroit prcis de la page locale (ancre)
pour permettre un contact mail
pour permettre un tlchargement de fichier

Dans tous les cas, le dpart du lien peut tre du texte, une image ou une partie dimage.

Pour crer un lien, il faut dabord crer la cible, puis dans la page de dpart, slectionner le bloc
de texte ou limage et aller dans la fentre des Proprits et crer le lien.

pour lier une autre page de votre site, soit vous utilisez licne Dossier pour parcourir les
rpertoires et choisir le fichier adquat, soit vous utilisez le pointeur pour slectionner votre
fichier dans la carte du site.

pour lier une page extrieure votre site, il faut encoder lURL (http://www.fundp.ac.be) dans
la case du lien dans la fentre des Proprits.

pour un lien vers une ancre de la page elle-mme, il faut dabord crer lancre en allant
lendroit cible puis dans le menu Insertion , choisir loption Ancre nomme . On peut
aussi utiliser la palette des Objets o dans le menu Commun on retrouve licne de
lancre. On retourne ensuite lendroit o doit se faire le lien et dans la case lien de la
palette des Proprits , on tape # suivi du nom de lancre (sans espace).

Lutilisation dancres est utile dans deux cas : pour dvelopper un menu et pour proposer un
retour direct au-dessus dune page trs longue (nb : il faut, dans la mesure du possible, viter
les pages trs longues et leur privilgier un ensemble de pages courtes lies entre elles).

pour lancer un contact email, slectionner le texte, puis dans la palette de Proprits, dans
la case lien, taper mailto : suivi de votre adresse email (sans blanc). Vous pouvez
galement utiliser la palette des Objets, o dans le menu Commun se trouve licne
Lien de messagerie .

29
 pour permettre le tlchargement dun fichier, il faut procder de la mme manire que pour
un lien vers une page de votre site et choisir le fichier (non-HTML).
Lors de ltablissement dun lien vers une autre page html, il faut galement veiller indiquer
dans longlet Cible lendroit ou la nouvelle page doit souvrir (parent = mme cran, blank
= nouvelle fentre)

4.3 Enregistrer un document.

Il existe trois enregistrements possibles dans Dreamweaver.

Les commandes Fichier : Enregistrer et Fichier : Enregistrer sous sont identiques

celles des autres logiciels. Enregistrer tout permet de sauver en une seule opration tous les
fichiers html ouverts ce moment.

La commande Fichier :Enregistrer comme modle permet denregistrer une page en tant
que modle, autrement dit, toutes les pages ouvertes daprs ce modle partageront les mmes
proprits de la page (couleur darrire-plan, marges, ).

4.3.1 Prvisualisation

Bien que les documents Dreamweaver donnent une bonne ide de ce que donnera la page
affiche, il y a cependant de grandes diffrences qui peuvent apparatre selon le navigateur
utilis ainsi que la version de ces navigateurs et il est ncessaire dy visualiser les pages avant
de les utiliser.

Il est possible denregistrer sa page, de lancer le navigateur et de ly ouvrir, mais ceci reprsente
une perte de temps considrable.

Pour cette raison, Dreamweaver a introduit une fonction de Prvisualisation qui ouvrira
automatiquement la page dans le navigateur dsir. Il est possible de prciser un navigateur
principal et des navigateurs secondaires. Pour pouvoir utiliser cette fonction, il est indispensable
de prciser au logiciel o se trouvent les navigateurs laide de la sous-commande Edition :
Prfrences : Aperu dans le navigateur. Les boutons + et servent ajouter ou supprimer
des navigateurs qui peuvent tre dfinis comme principal (F12) ou secondaire (CTRL-F12)
grce aux cases cocher.

30
 4.4 Gestion des sites

La gestion du site se fait laide de la fentre Fichier du site et carte du site .

Comme trs souvent le nombre de pages du site augmente avec le temps, on est tent de
supprimer ou renommer certaines pages, en dehors de Dreamweaver, et cela finit par crer des
liens briss.

Parmi les problmes qui perturbent les liens, on trouve trs souvent celui de la casse
(minuscules/majuscules). Il faut savoir que sous Windows ou sous Macintosh, le systme ne
verra pas de diffrences entre un fichier nomm Toto.htm ou TOTO.htm ou encore TOTO.HTM.

Sur le rseau, on a plus souvent affaire au systme dexploitation Unix et ce dernier fait lui la
distinction entre majuscules et minuscules. Pour lui, il sagira de trois fichiers distincts. Ainsi, si
dans le code HTML de ma page, je fais un lien vers monfichier.html et que le fichier est nomm
rellement monfichier.HTML, tout sera OK sur ma machine locale mais sur le rseau, le lien
sera dclar inexistant.

Cest particulirement courant avec les images, leur extension tant trs souvent rcrite en
majuscules lorsquon les retouche dans un programme de dessin.

31
5 les options graphiques

5.1 Les images survoles (roll over)

Lorsquune image est survole par le pointeur, une autre image apparat (roll-over). Cest le cas
des boutons qui donnent limpression dtre
en relief, puis en creux lorsquon clique
dessus, la nuance prs que la raction se
droule lors du passage de la souris et non
pas du clic. La seconde image peut tre
porteuse dun lien (pas la premire).

Linsertion dune image survole se fait soit

via la palette des objets, soit via le menu
commun avec loption Image
survole.

On obtient alors la fentre suivante :

Nom de limage permet de prciser un nom lobjet image survol, par dfaut, elle portera le
nom imagex, x tant le nombre actuel dimages insrs dans la page depuis son ouverture.

Image originale permet de prciser le chemin et le nom du fichier de limage lors du

chargement de la page.

Image survole permet de prciser le chemin et le nom de fichier de limage qui remplacera
limage originale lors du survol.

La case cocher Prcharger limage survole permet de prcharger doffice, et en tche de

fond, limage survole lors du chargement de la page. Cette option permet ainsi dobtenir des
effets de roll-over immdiats. Si cette case nest pas coche, limage survole sera charge au
moment du survol, avec un dcalage temporel.

32
Le texte secondaire sera la lgende du roll-over il nest pas obligatoire.

Si clique, aller lURL permet de prciser la destination du lien. Il est toutefois possible de
la prciser par la suite via la zone dentre lien de linspecteur des proprits de limage
survole slectionne.

N.B. Il est important que les deux images aient les mmes dimensions.

5.2 Carte graphique ou image map

Une carte graphique ou image map est une image qui possde un ou des liens attribus
nonepas lensemble de limage, mais des zones trs prcises, choisies en fonction de la
nature de limage.

Les zones sensibles sont attribues laide des trois Outils zones ractives prsent gauche
de linspecteur des proprits de limage slectionne.

Ils permettent de dfinir des zones rectangulaires, rondes ou polygonales libres. Les zones
ractives sont marques par des formes bleues translucides superposes limage, elles
possdent des points dancrage et leur contour est invariablement noir.

La slection et le dplacement de telle ou telle zone ractive seffectue laide de la flche

noire. Cette dernire se transforme en flche blanche lapproche des points dancrage,
permettant ainsi la modification de la forme des zones ractives.

Le nom de la carte, les noms et les liens des zones ractives ainsi quun nom alternatif se
dfinissent respectivement dans la zone dentre Carte , Liens et Sec. de linspecteur
des proprits de la zone ractive slectionne.

Par dfaut, la couleur dun texte portant un lien est bleu et soulign. Lorsquon clique sur un lien,
il devient noir par dfaut et violet une fois visit. Il est possible de modifier les couleurs
daffichage des liens via la fentre des proprits de la page ( Modifier : Proprits de la page
).

33
La zone Couleur du lien permet de dfinir la couleur du lien avant toute visite. La zone Lien
actif permet de dterminer la couleur du lien lors du clic et la zone Lien visit dtermine la
couleur du lien mmoris.

Si lon ne dsire pas obtenir une couleur diffrente lors du clic ou aprs une visite, il suffit
dencoder les mmes valeurs de couleurs dans chaque zone dentre. De fait, si aucune couleur
nest entre, les valeurs seront celles par dfaut. Les couleurs tant dtermines par les
attributs de <body> : link, vlink, alink, elles sont invariables pour lentiret de la page.

5.3 Affichage des pages

Par dfaut, tout lien, quil soit bas sur un texte, une image ou un lment extrieur (Shockwave
Flash, ) ouvre son fichier de destination dans la fentre en cours. Il est possible de modifier la
fentre cible des liens grce aux attributs _blank , _self , _parent et _top . ces
attributs se dfinissent via la liste Cible accompagnant la zone dentre Lien . Notez que
cette zone est inactive tant quaucun lment, texte, ou image na t slectionn.

5.4 Insertion de tableaux

Deux mthodes sont possibles :

via le menu Insertion avec loption Tableau

via la palette des objets , section commun

On obtient alors la fentre suivante qui permet le paramtrage du tableau

34
dans laquelle on dtermine le nombre de lignes, de colonnes, le type de bordure (0= pas de
bordure), lespace entre les cellules, .

La taille peut tre donne

en pourcentage de la taille dcran (le tableau sadaptera la rsolution du visiteur)

en pixels (la taille du tableau sera fixe).

Bordure permet de prciser lpaisseur en pixels du contour du tableau. La bordure peut

galement avoir une couleur. Pour cela, il suffit daller dans la Palette de Proprits et de
dfinir la couleur de la bordure dans la case Brdre .

Par dfaut, la bordure dun tableau est de 1 pixel.

La case Marge intrieure des cellules dtermine lespace entre le contenu et le bord du
cadre.

La case Espacement des cellules permet de prciser la quantit despace entre deux
cellules.

Par dfaut, le remplissage et lespacement des cellules est de deux pixels.

Il existe deux moyens dajouter des lignes et des colonnes un tableau. Le premier ajoute les
lignes en haut de la ligne active et les colonnes gauche de la colonne active, le second ajoute
les lignes et les colonnes respectivement en bas et droite de celles qui sont actives. La
mthode dajout est choisir en fonction du besoin.

Lajout de ligne au-dessus et de colonne gauche de llment actif est possible via la
commande Insertion , objet du tableau : Insrer (une ligne/colonne), par le menu contextuel
obtenu par clic droit (Windows) ou CTRL-clic (Mac) sur le tableau. On peut aussi ajouter une
ligne en dessous du tableau en positionnant le pointeur dans la cellule du bas droite et en
pressant la touche tabulation.

La suppression de lignes et de colonnes est possible via les commandes Tableau : Supprimer
(ligne/colonne) du menu contextuel ou en les slectionnant et en activant la commande clavier
delete .

5.5 Donnes tabulaires

Si les donnes qui devront tre mises en page dans un tableau sont dj encodes dans un
logiciel de traitement de texte ou un tableur, il est inutile de les encoder nouveau, on peut
importer des donnes tabulaires via le menu Insertion , objets du tableau , importer les
donnes tabulaires . Lors du placement de donnes tabulaires importes, la bote de dialogue
Insrer des donnes tabulaires souvre et permet le paramtrage de limport :

35
 Fichier de donnes permet de localiser le fichier source, ventuellement laide du
bouton Parcourir ;
Dlimiteur permet de choisir le sparateur de donnes entre tabulation, virgule, point-
virgule, deux points ou un autre sparateur prciser ;
Adapter au contenu permet dadapter la largeur des colonnes et donc du tableau au
contenu du fichier import ;
Marge intrieure des cellules permet de prciser le remplissage des cellules ;
Espacement des cellules permet de prciser la distance sparant deux cellules ;
Formatage ligne suprieure permet de prciser les attributs gras, italique ou gras italique
de la premire ligne du tableau ;
Bordure permet de prciser lpaisseur en pixel de la bordure du tableau.

5.6 Formulaires

Les formulaires servent crer un cran contenant des champs que les visiteurs des pages
peuvent garnir avec leurs donnes et envoyer ensuite via une liaison avec une base de donnes
rsidente sur un serveur (pas ncessairement celui o les pages se trouvent)

Tout formulaire, du plus simple au plus complexe, passe obligatoirement par linsertion dun
objet-formulaire au sein de la page. Cet objet nest quun conteneur, il ne possde aucune
ralit visible lors de laffichage dans le navigateur.

Dans Dreamweaver, lobjet-formulaire est reprsent par un rectangle pointill rouge.

36
Linsertion dun objet-formulaire seffectue via le menu Insertion avec loption Formulaire .

N.B. Contrairement aux tableaux, il est impossible dimbriquer des formulaires ou den modifier
la taille (ils sagrandissent en fonction de leur contenu).

Les lments du formulaire (boutons, champ de texte, liste, menu,...) doivent ensuite tre
insrs dans lespace dlimit par lInsertion du formulaire . Soit ils sont introduits laide de
la palette des Objets , soit ils sont introduits partir du menu Insertion avec loption
Objet de formulaire . Les diffrents lments pouvant tre insrs dans un formulaire et leurs
icnes respectives sont :
Dreamweaver regroupe trois ralits sous un mme objet nomm Insrer un champ de
texte

Le champ de texte ligne simple

Le champ de texte multi-lignes
Le champ masqu

5.6.1 Champ de texte ligne unique

Les paramtres dun champ de texte ligne unique , rglables dans linspecteur des proprits
du champ de texte slectionn, sont :

37
 Son nom, encod dans la zone dentre Champ de texte
La largeur du champ en nombre de caractres introductibles dans le champ, encode dans
la zone d entre Nbre caract. max.
Le texte prsent dans le champ ds son affichage, encod dans la zone dentre Val. Init.

5.6.2 Champ de texte multi-lignes

Les paramtres dun champ de texte multi-lignes , rglables dans linspecteur des proprits
du champ de texte slectionn, sont :

Son nom, encod dans la zone dentre Champ de texte

La largeur du champ en nombre de caractres visibles, encode dans la zone d entre
Larg. De caract..
Le nombre de lignes affiches, encod dans la zone dentre Nbre de ligne
Le texte prsent dans le champ ds son affichage, encod dans la zone dentre Val. Init.

Le mode de retour la ligne lorsque le texte introduit par lusager arrive la limite droite du
champ :

o Dsactiv, aucun retour la ligne forc ne sopre

o Virtuel, un retour la ligne forc sopre lcran mais pas dans les donnes
envoyes
o Physique, un retour la ligne forc sopre lcran et dans les donnes
envoyes
o Par dfaut, utilise les prfrence du navigateur ( viter).

5.6.3 Champ masqu

Les paramtres dun champ masqu, rglables dans linspecteur des proprits du champ de
texte slectionn, sont :

38
 Son sens, encod dans la zone dentre Valeur

Les champs masqus permettent de conserver et transmettre des informations qui ne sont pas
saisies par lutilisateur. Ces informations sont masques afin que l'utilisateur ne puisse pas les
voir.

Remarque : cette amlioration nest disponible que si vous pouvez accder un ordinateur
excutant ColdFusion MX 7 ou une version ultrieure

5.6.4 Case cocher

La case cocher est llment qui permet lusager de choisir une ou plusieurs occurrences
dans une liste.

Les paramtres sont :

Son tat
Sa valeur
Son tat initial, savoir : actif (coch) ou inactif (dcoch)
Sa classe

5.6.5 Bouton radio

Un bouton radio permet de ne choisir quune occurrence de cette liste.

Les paramtres dun bouton radio sont :

Son nom
Sa valeur
Son tat initial (actif ou inactif)
Sa classe

39
 5.6.6 Menu contextuel

Un menu contextuel est un champ de texte possdant une petite flche ouvrant une liste
lorsquon clique dessus.

Les paramtres dun menu, rglables dans linspecteur des proprits du champ menu
slectionn, sont :

Son nom
Son type
Les lments contenus (valeur de la liste)
Llment initialement slectionn (attribut selected)
Sa classe

N.B. Aprs avoir cliqu sur le bouton Valeur de la liste , lajout et la suppression dlments
de la liste seffectuent laide des boutons + et -. La modification seffectue en cliquant
nouveau sur Valeur de la liste .

5.6.7 Boutons denvoi

Les lments finaux dun formulaire sont les boutons qui permettent lusager de valider et
denvoyer ou non son formulaire.

Dreamweaver regroupe trois ralits sous un mme objet :

Le bouton denvoi des donnes du formulaire

Le bouton deffacement des donnes du formulaire
Le bouton type pour lattribution de commandes.

40
Les paramtres dun bouton, rglables dans linspecteur des proprits du champ bouton
slectionn, sont :

Sa valeur (Action : envoyer le formulaire, rtablir le formulaire, aucune)

Son nom qui spcifie le texte apparaissant sur le bouton
Sa classe

6 Utilisation des feuilles de style

Un style est un groupe d'attributs de mise en forme qui contrlent l'apparence d'un texte dans un
document. Une feuille de style CSS peut tre utilise pour contrler la mise en forme de
plusieurs documents en mme temps, et elle peut inclure tous les styles d'un document.

L'avantage d'une feuille de style CSS sur un style HTML est double : la feuille de style CSS peut
affecter plusieurs documents la fois et, lorsqu'elle est modifie, la mise en forme de tous les
documents qui y font appel est automatiquement modifie en consquence.
Les styles CSS sont identifis par des noms ou par des balises HTML, ce qui vous permet de
modifier l'un des attributs d'un style et de voir tout le texte auquel ce style est appliqu reflter
instantanment ce changement.

Dans les documents HTML, les styles CSS peuvent contrler la plupart des attributs de mise en
forme traditionnels, par exemple la police, la taille et l'alignement. Mais les styles CSS
permettent aussi de spcifier des attributs HTML uniques, dont le positionnement, des effets
spciaux et la raction un survol de la souris.

Pour crer une feuille de style CSS, il faut :

Ouvrir le menu Fentre option Styles CSS . Clic droit sur aucun style dfini et
choisir nouveau . Vous avez alors la fentre suivante :

Cliquer bouton droit sur aucun et choisir nouveau style dans le menu contextuel

41
 Sauver la css lendroit appropri
Encoder les choix voulus dans les diffrents menus faire appliquer
Dans le head de la ou des pages html qui doivent exploiter la css, crire :

<link rel="stylesheet" type="text/css" href="nom.css" />

42
7 laide en ligne

Une pression sur la touche F1 ouvre laide en ligne de Dreamweaver. On y trouve la rponse
la plupart des questions qui peuvent se poser. Nhsitez pas la consulter en cas de besoin.
La fonction de recherche ainsi que lindex permettent de spcifier les questions.

43
8 Les comportements

La fentre des comportements saffiche via la cl Maj-F4. Son intrt principal rside dans la
possibilit dajouter facilement des vnements dans le code de la page. Cet ajout se ralise en
cliquant le bouton + et en choisissant loption dsire dans la liste.

Ouvrir la fentre navigateur permet douvrir une nouvelle fentre, nantie des paramtres
souhaits et pointant vers une adresse au choix.

44
 Prcharger les images indique au browser quil doit commencer immdiatement charger
les images indiques (par exemple, celles se trouvant sur la page logiquement suivante),
ceci afin de rduire le temps de chargement quand le lien sera vraiment actionn.

45
9 Conception de frames dans Dreamweaver

Une page dcoupe en frames comprend :

le jeu de frames (frameset), entit dans laquelle on ncrira rien, dont la seule utilit est de
contenir les autres frames. Nanmoins, il faudra lui donner un nom.
Les frames proprement dites, sorte de dcoupage rglable de la surface de la page. Chaque
frame va afficher un fichier html diffrent.

46
Chaque frame porte un nom.

Sauver immdiatement les fichiers via la commande fichier enregistrer tout : pour une
dcoupe en 3 frames, on sauvera 4 fichiers html ; 3 nomms frame_nom et 1 nomm librement
qui est le frameset. Veillez nommer les 3 fichiers frame en fonction de la position quils
occupent rellement sur la page. Dans lhypothse dune dcoupe comme ci-dessus, il y a un
frame_top ou top_frame , un right ( droite) et un main (le plus grand).

Nous allons faire un menu dans le right_frame. Son but est dafficher des pages dans
MAIN_FRAME. Aprs avoir li un fichier sur litem menu du menu (ici, index2), il faut
galement rgler lendroit o il va apparatre.

Cette opration se ralise dans la bote Cible de linspecteur de proprits.

On trouve dans ce menu les options suivantes

Item Affiche la nouvelle page dans
Blank Une nouvelle page - browser ouvert 2x
Parent Une nouvelle page - browser ouvert 1x
Self Dans le frame local
Top Une nouvelle page
Rightframe Le frame principal
Mainframe Le frame gauche
Topframe Le frame du dessus

47
Dans notre hypothse, nous allons choisir mainframe dans le menu cible . Quand litem
du menu sera activ, index2.php saffichera dans le mainframe.

Quand vous construisez les pages destines garnir les frames top et left, tenez compte du peu
de place disponible pour laffichage. Il faut essayer de se passer dascenseur.

La fentre cadre (maj F2) permet de nommer les cadres (fentre Cadre ). Cette opration
est ncessaire pour pouvoir adresser laffichage dune page dans le frame voulu.

48